Depois de algum tempo a ganhar pó o PTTutoriais vai tentar estar de volta!

De cara nova, esperemos que gostem mais desta versão. Mas claro o mais importante são os artigos e o PTTutoriais vai tentar lançar um a dois artigos por semana.

Claro quem estiver interessado em escrever um artigo contacto-nos.

De resto o PTTutoriais abriu também um forum para os seus leitores. Registra-te!

Mas sem duvida que para programadores e designers o firefox é uma relíquia. Muito devido as extensões / add-ons disponíveis para download.

Neste artigo vou apresentar as 10 melhores extensões no meu ponto de vista.

Claro que para diferentes pessoas o top 10 poderá mudar muito mas de certeza que algumas extensões encontram-se na lista de todos nos, especialmente programadores e designers.

Numero 1: Firebug

Se és programador ou designer e ainda não conheces esta extensão fica já a saber que e uma das melhores extensões que existe para o firefox.

Firebug é excelente para editar, testar e analisar HTML, CSS e Javascript em tempo real. Usando o firebug é tão fácil encontrar um elemento de HTML no código e modificar o CSS e ver o resultado em tempo real.

Firebug vai ao pormenor de analisar o tempo que cada request faz, por exemplo quanto tempo demora o download de uma imagem, quanto tempo demora o download do Javascript.

Outra das grandes vantagens é a facilidade que nós dá para analisar o DOM.

Sem duvida uma das melhores extensões para o firefox.

Numero 2: Colorzilla

Uma pequena extensão, mas é tão útil.

Imagina que estas a ver um site ou uma imagem na net, e ficas apaixonado por uma das cores. A tua próxima pergunta é que cor é esta, é neste momento que colorzilla entra.

Colorzilla funciona como eyedropper, simplesmente carregas na cor que desejas e colorzilla informa-te do RGB da cor.

Numero 3: Measure It

Esta exelente extensão ajuda e muito, especialmente quando usas CSS a sério e queres que todos os teus divs tenham os tamanhos perfeitos ao pixel!

Quantas vezes queres saber o tamanho de uma caixa, ou quanto espaço ainda tens livre para poderes por uma imagem ou outro div com informação.

Measure It é tão simples de usar, desenhas no ecran um rectângulo do espaço que queres medir e measure it informa-te dos pixels que ainda tens disponível.

Exelente!

Numero 4: Selenium IDE

Uma palavra para esta extensão: brutal!

Especialmente para sites de e-commerce. Selenium IDE é simples de usar e da um jeito enorme.

Imagina:

Estas a construir um site de e-commerce e sempre que queres testar mudanças que fizeste tens sempre que repetir os mesmos passos, adicionar produtos no basket, passear no site, adicionar mais uns quantos produtos, fazer o checkout, preencher a informação toda e muito mais.

Cada vez que modificas o teu programa la tens tu que repetir os mesmos passos de sempre.

É neste momento que Selenium IDE entra. Basta correres o Selenium e automaticamente começa a gravar todos os passos e informação que teclas, no fim salvas a sessão.

Modificas o script e queres ver se ainda esta tudo a funcionar, vais começar a repetir outra vez os mesmos passos de sempre!!! Não o Selenium gravou tudo basta correres o Selenium outra vez e ele sozinho repete todos os passos.

Podes criar varias sessões e salvar com nomes diferentes e sempre que precisares testar o selenium salva o dia!

Numero 5: HTML Validator

Sem muito para dizer, todos os programadores devia usar esta extensão, que automaticamente mostra se o teu HTML é valido e não contem erros.

Se tiver erros informa-te da linha e ainda da-te uma explicação do porque do erro.

Numero 6: Dummy Lipsum

Quando estas a fazer o design do site, muitas das vezes ainda não tens conteúdo para encher todas as caixas ou sítios onde o texto se vai encontrar.

E vamos ser sincero no design teres um site sem veres como fica com o texto, fica um pouco para o esquisito.

Dummy Lipsum ajuda-te a criar texto random que enche o teu site com conteúdo.

Numero 7: SEOpen

SEO ou Search Engine Optimization e um factor muito importante depois de um site estar na net.

SEOpen ajuda em analisar o teu site em vários motores de pesquisa, mas especialmente os grandes como o Yahoo, Google e MSN.

Num clique tens toda a informação que precisas, page ranking, backlinks, cache e muito mais.

Sem duvida uma extensão muito útil.

Numero 8: SEO Quake

Não fugindo muito ao tema do SEO, o SEO Quake e outra extensão útil para o mundo do SEO.

Vai ate ao google e faz a tua pesquisa, nos resultados o SEO Quake adiciona toda a informação que no mundo do SEO da jeito, page ranking, caches, backlinks etc.

O que mais me atrai nesta extensão e o factor de ser rápida nos resultados e não teres que estar muito tempo a espera.

Numero 9: Web developer

Vou ser sincero, desde que conheci o firebug que tenho usado cada vez menos o web developer, mas mesmo assim entra na lista, pois sem duvida da muito jeito.

Web developer faz 50% do que o firebug faz mesmo assim tem varias opções agradaveis e que dão jeito como o display de id and classes.

Numero 10: Diz me tu

Pois com tantas extensões disponíveis, a numero 10 não tem nenhum.

Porque? Bem antes de mais porque o artigo não se podia chamar o Top 9. Vamos ser sinceros um titulo Top 9 não atrai tanto como o Top 10.

Por isso o numero 10 esta aberto ao publico, participa e diz me qual devia ser a numero 10.

Width e Height é bastante usado em CSS, e traz bastante vantagens na construção de layouts para a web.

Width

O width define a largura de um elemento em HTML, e pode tomar valores em pixeis, percentagens, inches, centímetros, milímetros, pontos, e picas.

• Inches: 1 inch é igual a 2.54 centimetros
• Pontos: é usado em CSS2 sao iguais a 1/72 de uma inch
• Picas: 1 pica é igual a 12 pontos
• Melimitros
• Centímetros

Como usar o widht

Usando o width no elemento <p>

<p style="width: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Como podemos ver o texto fica contido, assim que chegar aos 200px o restante texto muda de linha.
Também podemos usar os valores em percentagens, sendo assim o bloco irá ocupar uma percentagem disponível na janela do browser.

Por exemplo quando a janela do browser está á utilizar o écran inteiro ou está apenas a utilizar metade do écran é considerado sempre 100%.

Usando apenas uma parte

Quando usamos os valores em percentagens, o elemento apenas usara a percentagem disponível no écran.

<p style="width: 50%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Neste exemplo experimenta modificar o tamanho da janela para veres que o elemento usa sempre 50% do espaço disponível.

Height

O height é usado da mesma maneira que o width a diferença é que especificas a altura do elemento.

<p style="height: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque posuere dignissim. Donec mattis.

Como podemos ver o próximo paragrafo só começa 200px depois.

O height também pode ser usado com percentagem e tem o mesmo efeito que o width.

Conclusão

Este tutorial serve apenas para ver como usar e os resultados do widht e height em CSS.

Neste exemplo apenas usamos o elemento <p> mas o width e o height pode ser usado praticamente em todos os elementos de HTML.

Usar valores em percentagem da uma vantagem de criar layouts ‘elásticos’ que se modificam através do tamanho disponível do écran.

Usar valores fixos tem a vantagem de controlares melhor o layout e saberes sempre que tudo encaixa perfeitamente.

No inicio só existia HTML e com o simples objectivo de partilhar informação na internet. Nunca houve a intenção de HTML servir para layout de web sites.
Apesar de tudo no dia em que HTML introduziu <table> as coisas mudaram, pois foi possível designers começarem a criar layouts.
A <table> ajudou muito para a evolução dos websites, por fim existia uma maneira de designers puderem porem os elementos e imagens no sítio que desejavam.
Mesmo assim criar layouts usando <table> pode ser um processo doloroso, <table> dentro de <table> cria um código pesado e deselegante.

CSS, Cascading Style Sheets

CSS veio ajudar o coitadinho do HTML, e com grandes vantagens.
Não só o factor <table> mas simplesmente o processo todo de dividir código com layout. Com CSS é possível atribuir um ID ou uma classe a qualquer tag em HTML e simplesmente criar o layout ou estilo para essa mesma tag usando CSS.

Este artigo não tem como objectivo entrar nos pormenores, mas sim ajudar a mudança e deixar de uma vez por todas <table> tag.

Exemplo <table> layout

Vamos começar com um simples exemplo de um design de três colunas usando tabelas.

<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="20%">Layout lado esquerdo</td>
<td width="60%">Layout centro</td>
<td width="20%">Layout lado direito</td>
</tr>
</tbody></table>

Simples não? Pois bem sem duvida que ate e simples, mas será CSS ainda mais simples?

A maneira CSS

Então e como será em CSS? Mantendo o mesmo layout.

<div id="ladoesquerdo">Lado Esquerdo Layout</div>
<div id="ladocentro">Centro Layout</div>
<div id="ladodireito">Lado Direito Layout</div>

Hmm só três linhas? Parece simples, mas aonde esta o troque?
Pois bem como disse no inicio CSS da vantagem de separar o código do layout e por isso existe umas linhas extras.

Existe três maneiras de inserir código CSS.

• Entre as tags <head>
• Directamente na tag que queremos modificar usando <style>
• Ou criar um link para um ficheiro css

Neste exemplo inserimos entre as tags <head>.

#ladoesquerdo {width:19%; float:left; border:1px solid "666;}
#ladocentro {width:60%; float:left; border:1px solid "666;}
#ladodireito {width:19%; float:left; border:1px solid "666;}

Então e as vantagens?

Pois bem, existe varias vantagens:

• O código esta separado, qualquer mudança no layout pode ser feito só no CSS e não existe necessidade de mexer no HTML.
• Search Engines adoram CSS, pois normalmente o tamanho do ficheiro fica mais pequeno, e também porque a percentagem de conteúdo tem mais hipóteses de ser superior ao código.

Mas claro também existe as suas desvantagens:

• CSS ainda não tem o suporte total de todos os browsers no mercado.
• Por vezes o que se vê num browser (IE) e diferente noutros (Firefox / Opera).

Mas com os web standards cada vez mais a puxar os browsers para a mesma maneira de mostrar os resultados, CSS parece ter um futuro garantido.

Mostra mais

Então e que tal mostrar um pouco mais as vantagens do CSS.
Ok vamos então dar um espaço entre as caixas, mudar a cor de cada caixa, as cores das fontes isto tudo sem tocar no código HTML.

#ladoesquerdo {width:15%; float:left; border:1px solid #666; background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:60%; float:left; border:1px solid #666; background-color:#3366FF;margin-right:4%;}
#ladodireito {width:15%; float:left; border:1px solid #666; background-color:#000099; color:#FFFFFF;}

Hmmm ok, mas ainda não me convenceram. Mudar cores, mudar os tamanhos, bastava apenas acrescentar mais uns elementos na tabela.
Então e mudar o layout sem mexer no código? Por exemplo ter só um layout de duas colunas?

#ladoesquerdo {width:20%; height:100px; float:left; border:1px solid #666;
background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:75%; height:50px; float:right; border:1px solid #666; background-color:#3366FF; }
#ladodireito {width:75%; height:50px; float:right; border:1px solid #666; background-color:#000099; color:#FFFFFF;clear:right;}

Ok ok, ainda não tocamos no código, ok ok já estou a ver as vantagens.

Conclusão

Espero que este artigo tenha ajudado para perceber alguma das vantagens de CSS, e claro não quero passar a ideia errada, tabelas são um aspecto importante e deve ser usado, mas no sitio certo como longos formulários, para mostrar extensos resultados de base de dados, mas como uma maneira de criar o layout geral para um web site espero ter demonstrado as vantagens de CSS.

Usando apenas CSS o nosso site fica mais rápido e o efeito pode ser modicado simplesmente editando o no ficheiro de CSS.

O código em HTML

Para começarmos vamos primeiro criar o nosso código em HTML.
Consiste apenas de os links que queremos modificar. Neste exemplo temos, Pagina Principal, Acerca de Nos, Contactar.

<div id="navegacao">
<ul>
<li><a href="#" title="Pagina Principal">Pagina Principal</a></li>
<li><a href="#" title="Acerca de Nos">Acerca de Nos</a></li>
<li><a href="#" title="Contactar">Contactar</a></li>
</ul>
</div>

No nosso código HTML temos um div em que lhe atribuímos o id de navegação, assim é mais fácil podermos usar o css.

CSS com o efeito.

O CSS é que vai criar o efeito todo, sem imagens. Para tal para criar o efeito do botão vamos usar diferente cores nas bordas dos botões.
O botão normal tem o topo e o lado esquerdo de uma cor diferente, quando o visitante passa com o rato as cores mudam para criar o efeito do botão.
Sem mais demoras o código do CSS.

#navegacao {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#navegacao ul{
list-style:none;
margin:0;
padding:0;
padding-top:4px;
}

#navegacao li{
display:inline;
}

#navegacao a:link, #navegacao a:visited{
margin-right:2px;
padding:3px 10px 2px 10px;
color:#A62020;
background-color:#FCE6EA;
text-decoration:none;
border-top:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}

#navegacao a:hover{
border-top:1px solid #717171;
border-left:1px solid #717171;
border-bottom:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}

Visita esta pagina para ver o efeito dos botões.

A palavra chave que define melhor o sucesso de uma página web é o seu grau de interactividade, a página será mais atractiva se o visitante puder interagir com ela e não simplesmente absorver a informação em bruto.
Uma das linguagens utilizadas para criar esta “rotina” é o PHP (PHP: Hypertext Preprocessor”). Exemplos vivos deste tipo de interactividade são alguns sistemas de forum, sistemas de Leilões, etc.

Para melhor perceber o que é realmente o PHP, primeiro teremos de focar dois elementos chave relativamente aos tipos de linguagem usados na Internet: as linguagens baseadas no cliente ( o browser, por exemplo o internet explorer ou o netscape) e as linguagens baseadas no servidor.
No primeiro caso a execução das tarefas é realizada no computador do visitante; no segundo as tarefas são executadas no servidor web. O PHP pertence ao segundo grupo.

Imaginemos que visita uma página, com vista a subscrever um serviço ou simplesmente pedir informações, e que se depara com um formulário com vários campos (nome, email, comentários).
Preenche todos os campos e clica no botão “enviar”.
Poderão então surgir dois tipos de comportamento:

• O seu cliente de e-mail (outlook, outlook express, eudora) abre e visualiza aquilo que escreveu no formulário no corpo da mensagem que irá enviar. Esta é uma forma de processar as informações recorrendo a uma linguagem baseada no cliente, ou seja a execução da tarefa é efectuada pelo seu computador ( um exemplo deste tipo de linguagens é o javascript).

• Na janela do seu browser aparece o seguinte texto: “Mensagem enviada com sucesso! Obrigado”. Tal significa que a sua mensagem foi processada e enviada ao seu destinatário recorrendo ao servidor web, através de funções que poderão ter sido funções de PHP (também são usadas outras linguagens como o perl, que serviu de base para o php, ou o cgi).

Esta é uma forma de processar, ou melhor dizendo interpretar as informações utilizando uma linguagem baseada no servidor.

Assim, o facto de o php ser uma linguagem baseada no servidor abre caminho a inúmeras e diversas funcionalidades, como interacção com bases de dados (o SQL ou o MSAccess), bases de dados estas que permitem armazenar e exibir informações quando estas são solicitadas; quando visita um forum, participa, ou simplesmente visualiza as mensagens publicadas estará com certeza a visualizar ou armazenar informação na base de dados do servidor.

Para explanar todas as inúmeras vantagens oferecidas por esta linguagem “open source” (sim não tem de pagar nada para poder trabalhar em php, nem de comprar programas ou licenças; pode usar um simples ficheiro de texto para fazer as primeiras experiencias) teriamos de explorar alguns exemplos de códigos, o que tornaria este artigo demasiado extenso e eventualmente hermético para quem está a ter um primeiro contacto com este tipo de informação.

Assim sendo as principais vantagens do PHP são as de tornar o seu site mais dinâmico, facilmente actualizável, visualizável em qualquer tipo de PC não é necessário instalar nada para poder ver páginas em PHP, e principalmente é a interacção simples, leve e cinérgica que se pode criar entre o visitante da página e o seu webmaster.

O objectivo deste tutorial é explicar como criar uma lista de opções de imagens em que o visitante do nosso site possa escolher cada hipótese e ter um preview da imagem seleccionada.

Para tal vamos usar Javascript para criar o efeito.

Começo por explicar primeiro o HTML em que consiste numa forma e de uma imagem, e de seguida explico o Javascript que não passa de uma pequena função para mudar de imagem cada vez que o visitante selecciona uma nova opção.

Para veres o que queremos criar basta seguir o link.

O HTML

O HTML é simples e consiste apenas de uma forma com uma lista e as várias hipóteses que o visitante tem.

<form name="SelecionarImagem">
<select name="ImagemEscolha" onChange="ImagemSelecionada()">
<option value="contribuinte.jpg">Imagem Um</option>
<option value="membro.jpg">Imagem Dois</option>
<option value="membrodomes.jpg">Imagem Tres</option>
</select>
</form>
<img src="images/icons/admin.jpg" id="imagemmudar">

O primeiro passo é criar uma forma e dar o nome de SelecionarImagem.

De seguida criamos uma lista com as várias hipóteses que o visitante tem, neste caso tem três imagens que pode escolher, em cada hipótese dá-mos o valor da imagem.

Também dá-mos um nome para esta lista ImagemEscolha.

Uma parte importante neste código é:

onChange="ImagemSelecionada()"

Isto serve para cada vez que o visitante seleccione uma hipótese chama a nossa função em Javascript, essa função é a que troca as imagens para o visitante ver um preview.

Por fim temos uma imagem, com a primeira escolha disponível. Esta imagem ira mudar-se sempre que o visitante seleccione outra hipótese, não esquecer o id imagemmudar.

O Javascript

O Javascript consiste numa pequena função que a única coisa que faz e agarrar no valor da hipótese escolhida e trocar a imagem para o visitante ver o preview.

<script language="javascript">
function ImagemSelecionada(){
var ImagemSelecionada = document.SelecionarImagem.ImagemEscolha;
var ImagemMostrar = ImagemSelecionada.options[ImagemSelecionada.selectedIndex].value
document.getElementById("imagemmudar").src = "images/icons/"+ImagemMostrar+""
}
</script>

Primeira passo que fazemos é criar uma função entre as tags headers do html, de seguida declaramos uma variável ImagemSelecionada para agarrar todas as opções disponíveis.

Basicamente esta linha funciona:

var ImagemSelecionada  //Declarar variável
document.SelecionarImagem.ImagemEscolha //Document.NomeQueDemosAForma.NomeDoSelect

A segunda linha é uma nova variável que guarda a escolha do visitante e o seu valor:

var ImagemMostrar  //Declarar variável
ImagemSelecionada.options[ImagemSelecionada.selectedIndex].value  //Serve para guardar o valor escolhido.

Por fim só resta trocar a imagem para isso:

Basicamente esta linha funciona:

document.getElementById("imagemmudar").src = "images/icons/"+ImagemMostrar+""

getElementById serve para agarrar o elemento que queremos modificar, como o elemento e uma imagem de seguida usamos .src, para modificarmos a imagem.
De seguida e só por a path onde as nossas imagens estão e a variável do valor da imagem.

Conclusão

E pronto esta feito, como vimos não e assim tão complicado.
Este exemplo foi testado em IE6, Firefox e Opera e resulta perfeitamente e podemos ver a ser usado aqui.