Web, programação e outras historias

Assine o Feed RSS

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!

3 de junho

Bing: será que pega?

No primeiro de Junho  a Microsoft lançou o Bing, a nova ferramenta de busca, que substituiu o Live Search.  Tem tudo para ser legal.

Aqui pode encontrar alguns detalhes sobre o Bing.

Parece que a Microsofit desta vez conseguiu criar algo competitivo… o problema é que na verdade o Google já fazia isto há tempo. Este artigo confirmou minha teoria, e também me mostrou que a Google está na frente de novo, com o Wave, ferramenta que  pretende revolucionar o email e as formas de trabalho colaborativas.

Tem outra dúvida: mesmo que este Bing seja bom mesmo, será que vai pegar? Será que as pessoas, que mal querem atualizar seus navegadores, irão, por exemplo, mudar a página inicial dele ? Ou será que mudarão o habito de digitar google.com para procurar algo? Somos seres rotineros, gostamos das coisas que conhecemos, e o Google já virou costume para a maioria. Tomara que eu esteja enganado, não tanto pela Microsoft, mas pela concorrência, e pelo estímulo a sempre melhorar e inovar que pode vir disso.

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.


24 de maio

Inauguração

Let’s get it started!!!

Primeiro post do tobia.blog.br, num tranquilo domingo de maio do 2009.

Porque resolvi abrir um Blog? Bem, para compartilhar com todo mundo as descobertas de cada dia, relacionadas principalmente ao desenvolvimento de websites. Abordarei temas como Php, Zend Framework, Html, Xhtml, CSS, Javascript e JQuery, entre outros.

Além disso, terei um diário das aulas dos Cursos de WebMaster que estou ministrando na SOS de Joinville.

Logo estarei com um layout digno, me aguardem!