terça-feira, 29 de janeiro de 2008

Altura a 100% de uma div.

Parece-me que existem bastantes dúvidas de como por uma div com altura de 100%, ou seja de modo a ocupar toda a altura de uma janela do browser.

Então deixo aqui um pequeno tutorial de como o fazer.

Primeiro vamos definir o css:

html {
height: 100%;
}

body {
margin:0px;
padding:0px;
height:100%;
background-color:#000000;
}

#main {
min-height:100%;
height:auto;
margin:0px auto;
width:500px;
background-color:#666666;
color:#FFFFFF;
}

/* Para o IE */
* html #main{
height:100%;
}
Explicando, para a nossa div, poder ter todo o tamanho do browser é necessário, que o parent neste caso o body tenha também a altura de 100%, por isso é que o body e html têm a altura de 100%.

Está lá o hack para o IE, porque sem ele o que acontecia era que a div ficava apenas com o tamanho do conteúdo.

Agora temos o código HTML que é muito simples:
<div id="main"> Conteúdo<div>
Como se pode ver é extremamente simples, por uma div com a altura a 100%. Podem ver o demo aqui ( sem conteúdo suficiente para encher a página ) e aqui ( com conteúdo suficiente para fazer aparecer a scroll bar vertical ), e fazer o download aqui do código de ambas as páginas.

Esta é um dos 2, 3 métodos que existem para criar div's com 100% de altura, e de entre eles, este é o mais fiável. Pelo que testei.

Aproveito também para dizer, que já criei uma sandbox, para poder mostrar os demos funcionais do código que for postando aqui. Podem vê-la aqui: http://lancaster.freehostia.com/

quarta-feira, 23 de janeiro de 2008

O futuro do IE

Dia 21 deste mês, foi um dia em grande, para a comunidade que desenvolve para a WEB, e tudo por causa de um artigo da autoria de Aaron Gustafson escrito no A list Apart intitulado Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8.

O DOCTYPE, para quem não sabe, é usado basicamente para o browser saber em que modo há-de renderizar a página que lhe estamos a passar, se usarmos um DOCTYPE válido e completo, o browser tenta mostrar a página no modo "Standard" ( fazendo com que tudo apareça tal como está escrito nas especificações ), se no entanto não existir uma declaração de DOCTYPE válida ou incompleta, ele vai mostrar a página no modo "Quirks", ou seja como se estivesse a ser vista no IE 4.0 ( ou algo parecido ). O DOCTYPE é também usado para fazer validar as páginas, definindo assim qual o "markup" que estamos a utilizar por exemplo: "XHTML 1.0 Transitional".

A equipa que está a desenvolver o IE8, queria seguir a máxima "Don’t Break the Web!", e no que é que isto resultou?

Decidiram implementar um header que indica ao browser qual o motor que deve utilizar:
<meta equiv="X-UA-Compatible" content="IE=8"/>
E desta maneira, quando o IE8 ( ou outra versão superior ao IE8), olhar para este header, vai usar o motor do IE8 para mostrar o conteúdo da página.

Existe também um parâmetro para quando se quer usar o último motor disponível:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
O curioso é que se não incluirmos nenhum destes header's na página, o IE vai mostrar a página usando o motor do IE7.

E aqui é que está o problema. Por um lado tem as suas vantagens, já não é preciso estar a verificar um site, de uma ponta a outra para ver se está tudo bem, e se não tiver, têm que se estar a perder horas e horas de trabalho, para resolver pequenos problemas de design. Mas mantém-nos ( a nós programadores para a WEB ), atentos ao que se passa no resto do mundo o que é uma grande vantagem.

Mas por outro lado, também atrasa um pouco o desenvolvimento dos padrões "Standard", isto porque a tendência, será usar sempre o motor do IE7, porque muita gente não vai usar o header ( existe muita gente a usar o FrontPage, e espantem-se o Publisher para criar páginas ), logo tudo o que tenha sido desenvolvido ( Javascript, e mais importante CSS ) após o lançamento do IE7, não vai funcionar a não ser que se ponha o header correcto.


Para finalizar, a opção default, deveria ser: "Usar sempre o último motor". E no caso de não querermos modificar a página bastaria por o header, com o motor que queremos usar e problema resolvido.

Referências:
meyerweb.com/
NCZ Online
A List Apart 1 - Aaron Gustafson
A List Apart 2 - Eric Meyer

quarta-feira, 16 de janeiro de 2008

Manutenção de Código.

Estive agora a ouvir durante cerca de 45 minutos a palestra do Nicholas C. Zakas, sobre manutenção de código em Javascript...e como é lógico não podia concordar mais com ele em vários pontos. No entanto há muito programador que se esquece da maior parte das coisas que ele fala ( eu inclusive ). Seja pela pressa pela distracção ou outra coisa qualquer. Mas isto não pode acontecer!

Este problema leva a bastantes dores de cabeça, quer sejamos nós a mexer no código que criámos, quer seja um colega nosso. E quase que aposto que é onde um programador perde mais tempo no seu dia.

O que fazer para poder resolver este problema tão comum hoje em dia? Arranjar um bom método de trabalho, este penso que é o mais importante que tudo. Não ir em modas, lá porque toda a gente o anda a fazer, não quer dizer nós precisamos de o fazer e que é o melhor para onde o estamos a aplicar. É preciso analisar muito bem o que estamos a fazer para nos podermos atirar de cabeça com tecnologia X ou Y.

E para além destas duas que dei, outra, é ler, ler e ler ainda mais sobre a matéria em questão.

Se acham que implementaram alguma coisa mal, procurem por isso na web. Para que quando tiverem que criar algo parecido não caiam no mesmo erro.

Para finalizar ficam com o link para a palestra que ele deu intitulada: "Maintainable JavaScript".
http://www.nczonline.net/speaking/

Link para o site dele:
http://www.nczonline.net/

domingo, 13 de janeiro de 2008

Google Earth download!

Se há coisa que me irrite, é quando vou a um site, e esse site começa a dar erros de javascript! E que não nos deixa fazer o que queremos, por causa desses erros..


Desta vez foi com o site do Google Earth!

Primeiro pensei que fosse por estar a usar o Firefox, então toca de experimentar o IE e o problema continuava na mesma..

O que acontecia, como acontece a muito site por aí, que use o Google Analytics, a função urchinTracker(); não estava definida!

Podem ver os erros de tanto do FF, como do IE:




Mas como eu queria mesmo fazer o download, toca de meter mãos à obra com o meu fiel companheiro Firebug, basicamente é uma extensão para o Firefox, que permite editar e fazer debug no browser.

O que fiz simplesmente, foi ir à procura da função que o script javascript chamava quando se carregava no botão, e removê-la de lá. Depois foi só carregar no botão e voilá.. Toca de instalar o Google Earth.

O problema nisto tudo, é que quem visita a página à procura do produto, e vê que não consegue fazer o download, fica logo a pensar: "Mas que incompetentes são estes?!" Pelo menos é o que eu penso..

E até existem maneiras de dar a volta a isto, uma delas seria passar por verificar se o objecto javascript existe, outra seria por tudo dentro de um try catch finally, e problema resolvido. Mesmo que ele desse erro algures, o utilizador poderia sempre fazer o Download. A isto chama-se javascript não obstrutivo, e que degrada facilmente sem retirar qualquer funcionalidade à página que se está visualizar. E que deixa toda a gente contente!

Claro que esta solução dá mais trabalho, acrescenta mais código etc etc, mas não é bem mais vantajosa??

O que é que estes engenheiros/programadores/gestores andam a fazer no Google??

PS: Quem quiser pode fazer o download directo a partir daqui.

sexta-feira, 11 de janeiro de 2008

Ser um programador WEB a sério!

Este não vai ser daqueles post's onde vou dar 2 ou 3 dicas, e pronto é-se um programador WEB de sucesso.

Primeiro há que distinguir, programador WEB de WEB designer, embora as duas profissões, estejam eternamente ligadas, não são bem a mesma coisa. ( Pelo menos na minha opinião ). Há muita gente que chama a um programador WEB, WEB designer...pelo menos é o que me acontece a mim..

Um WEB designer, é alguém que desenha as páginas para a WEB, ou seja, cria os layout's para as várias páginas existentes num site.

O programador WEB, é quem pega no layout feito previamente, e implementa esse layout em código. ( O que às vezes é bem complicado de fazer..)

Existe muita gente hoje em dia, que faz ambos, cria o layout, e também o implementa.

Dito isto, e estando feita a distinção, podemos passar para o segundo passo, como é que alguém se pode tornar num programador WEB digno desse nome.

Hoje em dia, qualquer pessoa pode ter uma página na internet. Existem vários serviços para isso, por exemplo o Google Pages, para além disso a maior parte dos ISP's têm alojamento gratuito no pacote de acesso à net. E como qualquer pessoa tem o Office, que tem o magnífico FrontPage, consegue fazer uma página em 2 tempos. E publicá-la na WEB.

Vê-se muito por aí, e cada vez mais, muitos sites completamente detestáveis, que só trabalham bem no IE ( mas isto é outra guerra, portanto fica para depois ), para além de que existem muitas empresas que têm alguém que sabe mexer no FrontPage, e dizem-lhe para criar uma página com umas coisa e pronto, já têm a sua presença na WEB, o que degrada a imagem da empresa.

A minha história:

Eu comecei pelo FrontPage, há cerca de 8 anos atrás, uma coisa muito simples, punha-se uma tabela aqui ( pronto, muitas tabelas ), formatava-se o tipo de letra e a cor acolá. E pronto, tinha-se uma página toda bonita em questões de minutos.

Passado uns tempos, descobri que fazendo uma página num editor WYSIWYG ( WYSIWYG é o acrónimo para "What You See Is What You Get"), não era a melhor opção, até porque os editores WYSIWYG não são fiáveis a 100%. Para além do código que geram ser do piorio.

Nessa altura, decidi remodelar o site que tinha feito, escrevendo tudo à mão, com o Notepad ( foi esta a maneira que aprendi HTML ), ao fazer isto, para além de perder montes de tempo, também aprendi a sintaxe do HTML, de trás para a frente e da frente para trás...

Passado uns tempos, comecei a usar o Dreamweaver da Macromedia ( syntax highlighting dá mesmo muito jeito, para além de completar as tag's HTML automaticamente.. ). Mas sem usar as propriedades WYSIWYG do software, ou seja faço tudo à mão.

Para finalizar, os meus conselhos são:
  • Não usar editores WYSIWYG.
  • Começar logo por escrever tudo à mão.
  • Não usar o Notepad.
  • Usar um bom editor, como por exemplo o Dreamweaver.
Existe bastante gente que concorda comigo nestes 4 aspectos. Mas também há muita gente que não.

Existem algumas pessoas que dizem que programar HTML no Notepad é que é bom, sinceramente não percebo porquê, tudo bem que é rápido e nada pesado, mas tentar mexer numa página HTML, com o Notepad, acho um suicídio autêntico, é bem complicado de se ler. Atenção, que até eu uso o Notepad de vez em quando, para fazer uma alteração muito simples nalgum ficheiro. Agora para desenvolver um site do início nem pensar! Em vez de demorar uma ou duas semanas, se calhar demorava um mês ou dois.

Estes são os meus conselhos para alguém se tornar num programador WEB, se será bom ou mau, já depende da sua capacidade e vontade. Mas pelo menos poderá dizer que sabe HTML.

Eu ao fim de 8 anos a programar para WEB, não sei tudo...e ainda hoje continuo à procura de soluções para os problemas que encontro. Até diria que o tempo que um programador WEB gasta, poderá estar dividido da seguinte maneira, 70% em pesquisas, e 30% a programar.

E não se esqueçam que Roma não foi construída num dia!

Nota: Não esquecer, que para ser programador WEB, não basta saber HTML, é preciso saber também CSS, algum Javascript e alguma(s) linguagen(s) dinâmica(s) também, como por exemplo o PHP.