Web, programação e outras historias

Assine o Feed RSS

Category Archives: Cursos Webmaster Joinville

23 de julho

Aula n.6 – Curso de HTML, Javascript e CSS

Os antigos e quase inutilizados frames foram o primeiro conceito desta aula.

Precisava pelo menos saber o que eles são e como eles funcionam, pois é possível (mas não provável) que um dia vocês tinham que dar manutenção num site desenvolvido com eles.

Outro conceito foi o iFrame (inline Frame), que também não é um meu grande amígo, mas entre os dois é o mal menor. Ele permite carregar dentro dele uma página completa. ‘Antigamente’ isto era considerado ótimo, pois para visualizar uma página interna de um site não precisava atualizar tudo (menú, rodape, cabeçalhos) mas só o conteúdo de um iFrame principal;  em tempo de conexão discada isso era ótimo.

Hoje em dia o iFrame não é mais uma recomendação, pois ele complica um pouco a acessibilidade e não permite criar link diretos para uma página interna do site, além do fato que as páginas internas carregadas em iFrame são indexadas pelo Google como páginas síngulas, sem cabeçalho, menú etc, então pode acontecer que o usuário acesse o site de forma incompleta.

Pelo mesmo motivo dos Frames, aprendemos a criar um layout através de iFrames e (ahi ahi) de tabelas, estruturando um pequeno site com 3/4 páginas. Aí entraram todos os outros elementos estudados nas outras aulas.

23 de julho

Aula n.6 – Curso de PHP

Último conceito novo em algoritmo neste sábado.

Sempre através do VisuAlg, aprendemos a criar funções. Elas permite isolar um trecho da nossa programação e chamá-lo toda vez que precisar, se tem que escrever tudo de novo. Uma função tem um nome (que podemos inventar a vontade,  sempre que respeite as mesmas regras das variáveis – sem acentuação, espaços etc.) e possui geralmente (mas opcionalmente) parámetros. Em visuAlg, a função obrigatóriamente retorna um valor de um único tipo inteiro, real etc) estabelecido na declaração das funções. Veremos que o php é um pouco mais flexível.

Para testar as funções criamos um calculador com o VisuAlg, que tinha as 4 funções Somar, Subtrair, Multiplicar e Dividir e, além disso, tirava proveito de outras estruturas de decisão e repetição.

13 de julho

Aulas n.3, 4 e 5 – Curso de PHP

Ainda não tivemos PHP no curso de PHP. Mas fiquem tranquilos, sempre tem um motivo.

Precisamos primeiro aprender  a lógica de programação. Se o objetivos de vocês é criar visualmente um site, venham fazer o curso de HTML e CSS. Aqui, em PHP, aprendemos a criar sistemas, a lidar com lógica de programação e com bancos de dados. O que acaba resultando em criação de código HTML como saída final.

Por isso, as primeiras aulas são dedicadas ao estudo da logicade programação e aos algoritmos. Recentemente esta parte do curso foi enriquecida pela descoberta de um programa didático muito interessante, o VisuAlg , que permite “rodar” os algoritmos como verdadeiros programas num terminal de texto (Agradeço Thiago pela dica, valeu!). Graça a este programa, fazer algoritmos fica um pouco mais agradavel e temos um retorno imediato, sabendo na hora se nosso algoritmo está certo ou não. No PHP, programar será totalmente diferente, mas a logica de base será a mesma, assim com será igual em todas as outras linguagem de programação existentes. Vale a pena esperar um pouco então, não é?

Os assuntos abordados em algoritnos foram estruturas de decisão (se, – senão, escolha) e laços (enquanto,  para,  repita) e vetores. Teremos mais uma aula sobre funções e depois exercícios, muitos exercícios, antes de começar com o tão esperado PHP.

13 de julho

Aulas n. 3, 4 e 5 – Curso de Html, CSS e Javascript

Faz tempo que não atualizo o blog. Isto porque, além de uma semana sem aulas, o curso teve várias faltas e entradas de alunos que me obrigaram a repetir e/ou reforçar alguns assuntos.

De qualquer forma, vou fazer o ponto da situação:  chegamos a falar de utilizo de imagens, de tabelas e de formulários e fizemos alguns exercicios para aprender a utilizá-los de forma correta. Logo entraremos no parte de CSS, mas não pense que nunca mais veremos o HTML: muito pelo contrário. Será a horade testar nosso conhecimento dele e aplicar por cima dele uma camada de apresentação. Finalmente poderemos fazer um site “bonitinho”. Se você quiserm, podem começar a pensar em um projeto de  site,  já que logo faremos isto na sala.

8 de junho

Aula n.2 – Curso de Html, CSS e Javascript

Entrou um novo aluno, então fiz um breve resumo da primeira aula.

O assuntos novos foram links e ancoras (tag “a”), listas ordenadas e não  ordenadas (tag “ol” e “ul”, com “li”) e  listas de definições (tag “dl” com “dt” e “dd”).

Sobre a tag a, aprendemos sobre links, a estrutura deles, como abrir na mesma página o numa nova janela, como prepara-los para futuramente abri-los em frames ou iframes (não que isso seja tãaaao legal, mas é bom saber fazer….), ou como usar o “a” com âncora de texto paa ir num lugar diferente da mesma página.

Aprendemos a diferença entre listas ordenadas e não ordenadas, com criar sub listas, como mudar o símbolo ou a numeração e como “ul” e “li” são usados também para criar menus de navegação (que são listas de link, afinal).

Vimos também como usar as listas de definições, para criar por exemplo um mini-dicionário.

Não aprofundamos muito os atributos de estilização, pois a parte de layout será enfrentada mais na frente com o CSS.

No final passei um exercício: pedi que os alunos tentassem criar o html  a partir de um texto, que visualmente tinha alguns link e listas de vário tipo. Deu um pouco de confusão, e era isso mesmo que queria ver. Assim semana que vem vamos corrigir isto e tentar de novo. Quero que aprendam muito bem a escolher as tags certas, isto vai ajudá-los muito, no futuro,  para criar um bom código.

8 de junho

Aula n.2 – Curso de PHP

Já que entraram 2 novos alunos e faltaram os outros, aproveitei para repetir o mesmo conteúdo da primeira aula…

3 de junho

Aula n.1 – Curso de Html, CSS e Javascript

Como todo curso que se respeite, me apresentei e fiz os alunos se apresentar; em seguida, apresentei a “roadmap” das aulas.

Neste curso não aprenderemos a criar Layouts de site com editores WYSIWYG ( = What You See Is What You Get, ou seja O Que Você vê é o que você obtêm), mas sim a desenvolver HTML (e XHTML) conforme os Web Standards. Aprenderemos a criar um código bonito e semanticamente correto. O código que desenvolvemos não tem somente o simples objetivo de agradar o cliente (ou nós) porque é bonito. Nos temos algumas responsabilidades, entre elas a de deixar nosso site accessível, para pessoas com deficiências visuais (ou até outras). Este vídeo exemplifica muito bem o conceito, e é  por isso que o mostrei:

Legal, não é? Deixa bem claro quanto nossa atenção a certos detalhes é importante.

Agora, vamos supor que a gente seja muuuuito ma. Que não se importe com as categorias citadas no vídeo, que pra nós só conta o dinheiro. Bem existe uma personagem muito importante no mundo da web, que pode nos permitir de ganhar muito, o de fazer o sucesso do nosso site. o detalhe que esta personagem é cega. Sabem que é? O robot do Google, ou seja aquele programa que vasculha todas as páginas da Web e que permite – ou não – que nosso site apareça nos resultados de busca. Então, o Google (ou o Yahoo, ou o Live Search, agora Bing) é cego. Não lê imagens, não gosta de código sujo, não gosta de muito Flash (= animações). Não é um caso que os serviços de  SEO (Search Engine Optimization) são muito requisitados nestes últimos anos.

Enfim, o primeiro passo para um site bem feito é conhecer muito bem as tags html, não para o que mostram visualmente mas para o que elas querem dizer, para o significado semântico delas.

Por isso, na sala, fiz um pequeno experimento: peguei um site qualquer, e pedi para os alunos que identificassem estruturas básicas da página: títulos, cabeçalhos, rodapês, paragrafos, etc. Futuramente este exercicio evolverá em criar o próprio html das páginas respeitando a semântica.

Logo depois passei para os alunos as ferramentas do que falo neste artigo , e começei a introduzir o HTML, não sem antes ter explicado um pouco da arquitetura cliente – servidor. No final da aula, os alunos tiveram que reproduzir uma porção de teto deste mesmo blog, identificando parágrafos, títulos, e tentando uma formatação básica das fontes e das cores (tudo via atributos HTML, mas cientes que mais adiante este trabalho será feito pelo CSS).

Semana que vem, mais tags!

1 de junho

Aula n.1 – Curso de PHP

Depois da apresentação de professores e alunos, fiz uma breve introdução do curso. Abordei rapidamente os assuntos principais e logo comecei com os conceitos e as definições:

  • Arquitetura Cliente – Servidor
  • Diferenças entre applicações lado cliente e lado servidor
  • Requisições, protocolo http, DNS, respostas,  html
  • Aonde ficam, quem são e o que fazem Apache, PHP e MySql?

Logo colocamos as mãos na massa: instalamos o EasyPhp, que  é um dos pacotes que instalam para a gente o Apache, o PHP e o mySql, e já utilizamos ele para criar o nosso primeiro script… “Hello World”! Com isso,  já mostrei aonde fica o diretório raiz do site, como acessa-lo no navegador através do http://localhost  e como o servidor visualiza automaticamente o arquivo “index.php” (ou index.qualquer-outra-extensão) se não indicamos nada no navegador.

A segunda parte da aula foi dedicada aos algoritmos, indispensaveis se quisermos aprender a programar. Introduzi o Pseudo Código, criei junto com a turma o primeiro Algoritmo Soma e deixei como exercicio na sala o Algoritmo Média.

Até semana que vem!

29 de maio

Ferramentas úteis para o Programador Web

Ao longo da minha experiência como programador, mutias vezes me surpreendi de como alguma tarefa pode ser feita de uma forma bem mais rápida, proveitosa e menos chata. Graça a amigos, colegas o au meu “fuçar”, descobri alguma ferramentas, que a maioria dos programadores web usam e que se tornam indispensáveis.

Em primeiro lugar, aquele programa onde a gente vê e avalia nossa criação: o Browser, o navegador. Nenhum é igual a outro, isso  será repetido muitas vezes neste blog (especialmente quando o assunto é CSS!).

O 99% dos programadores eligiu o Firefox como o preferido. Porque? Bem, por vários motívos: primeiro, ele renderiza o código Html e o CSS de forma correta, como especificado pela W3C (falaremos muito a respeito destes caras!). Outros browser fazem isto também, mas não o Internet Explorer, que aprenderemos a odiar.  Outra caracteristica de destaque do Firefox é o suporte a plugin e extensões: entre elas estão a maioria das ferramentas úteis para o Programador Web. Lá vem eles:

Web Developer

Uma ferramenta com um bocado de funções: visualização do código, dos arquivos anexos como css e javascript, realçe de estruturas html, redimensionamento da janela para testar diferentes resoluções, entre outros. confesso que atualmente não tenho ela instalada, mas recomendo.

Firebug

A preferida de muitos e a mais conhecida: visualização e inspector do código, visualização do css, report de erros de javascript, monitoramento do trafego, e muitas outras. com certeza a mais prática.

Fire FTP

ótima para quem não quer instalar um programa ftp e prefere fazer o upload dos arquivos direto do Firefox.

Live Http headers

Permite vsualizar os cabeçalhos http e todas as informações que transitam de e para o servidor do site acessado.

clear cache

Às vees, quando atualizamos um site, o navegador parece não mostrar as alterações. Isto porque todos os navegadores gravam os arquivos na chamada “cache”, para não ter que acessar e baixar toda vez, tornando a navegação mais rápida. É possível limpar a cache, indo em Ferramentas > Limpar Dados Pessoais, e selecionar Cache. Esta extensão facilita o trabalho, permitindo colocar um botãozinho na nossa interface para um acesso mais rápido à função

view cookies

Permite visualizar os Cookies, arquivos que armazenam dados temporários localmente, no computador (por exemplo, nos logins automaticos, o nos carrinhos de compras). Poder visualizar direto no Firefox o conteúdo deles é melhor do que encontrar a pasta no nosso sistema operacional!

Existem muitas outras destas ferramentas, mas por enquanto vou parar por aqui. Vou encerrar citando uma ferramenta não diretamente ligada ao desenvolvimento, mas que me ajudou muito: o xMarks . Esta ferramenta permite, após a instalação e o cadastro no sistema deles (tudo via plugin e rapidamente), a sincronização automática dos favoritos entre vários computadores. Para quem como eu pesquisa em casa, depois pesquisa no trabalho, depois de novo em casa, esta é uma forma extremamente rápida de não perder nada.