Que tal testar a performance do seu browser?
É o que Peacekeeper está se propondo, testar os browsers dos users, para saber qual é o mais rápido, aplica uma bateria de testes, que usam bastante DOM, HTML, CSS analisando a renderização dos elementos e a performance do mesmo, no final mostra gráficos de resultados dos testes aplicados, assim como oferece uma lista dos browser com melhor performance.
Teste o seu aqui.
Grande parte de nós “nerds” da WEB, ao menos já ouviu falar da guerra dos browsers, que ocorreu entre a Netscape e a M$. Pois a discovery brasil, divulgou um vídeo explicando como tudo ocorreu:
Vi no blog do vicente.
Estamos de volta, para mais uma aventura de como fazer um site e fazer parte dessa grande WEB. Hoje será abordados algumas ferramentas necessárias para o desenvolvimento do mesmo.
No post passado, falamos sobre o que é a WEB e como ela foi composta e o que é necessário para o funcionamento da mesma, sabe-se agora que a WEB possui um conjunto de protocolos (padrões) e funciona através de troca de mensagens, e que possuí uma linguagem de marcação o HTML, o qual conseguimos estruturar textos e fazer interligações entre eles.
Também sabe-se que não é necessário entender logo de princípio como as coisas funcionam no protocolo HTTP, pois o browser sabe como se comportar assim como os servidores web. Então vamos por a mão na massa, vamos começar a entender como fazemos para estruturar um texto em HTML.
Ferramentas a serem usadas:
Você prefere comida de microondas ou de fogão? Pois é apesar de o microondas ser muito prático, muito rápido de fazer a comida nem sempre ela fica do gosto esperado.
Apesar de esse ser um exemplo um pouco frustrado, é exatamente assim que se da o desenvolvimento WEB, você pode aprender a usar FrontPage, Dreamwaver, etc… Porém pode ter certeza que não vai ser a mesma coisa que desenvolver na mão, logo sujiro primeiro começar a tentar desenvolver escrevendo e entendendo como funciona para logo após caso decidir utilizar ou não um editor visual.
Então as ferramentas de desenvolvimento:
Por que, boa vontade e paixão?
Porque para qualquer coisa a ser feita boa vontade e paixão por aquilo que está fazer traz um resultado melhor. Bom por hora você percebe que para aprender HTML não é necessário muitas coisas, um editor de texto para escrevermos o texto estruturado e um browser para renderizar essa página.
Começando com o HTML:
Resumindo o HTML é uma linguagem de marcação para hypertextos, que é utilizada para produzir páginas para internet os documentos HTML são interpretados pelo browser e apresentados na tela.
A linguagem HTML trabalha com tag’s ou etiquetas:
<elemento> </elemento> //Elemento com tag de abertura e fechamento
<elemento /> //Elemento unico de abertura e fechamento
Ou seja basicamente o HTML é um conjunto de tag’s, sendo que cada tag possuí um valor semântico ou seja, cada tag se refere a algum elemento produzido no texto. Vamos a um exemplo básico da estrutura de uma página HTML:
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title>Título da página</title> </head> <body> <h1>Título 1</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque adipiscing mi ut nunc. Vivamus eros. Curabitur arcu. Nullam convallis laoreet velit. Duis sit amet diam non diam ornare fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie. Praesent arcu. Fusce a metus vitae purus rhoncus cursus. Vestibulum est nibh, malesuada ac, auctor eget, pretium congue, odio. Mauris libero orci, elementum et, blandit nec, vulputate non, orci. Morbi ut lectus et eros imperdiet blandit.</p> <p>Sed ultricies quam. Maecenas eu mi vel elit accumsan bibendum. Suspendisse sit amet arcu id leo interdum tempor. Donec lobortis libero ut mauris. Nam arcu sapien, interdum ac, luctus vel, ultricies vitae, lectus. Maecenas sollicitudin sapien eu velit. Nam in ligula in risus egestas laoreet. Praesent quam. Curabitur mattis, quam non scelerisque egestas, elit felis rutrum libero, ut iaculis mi nisi vitae nulla. Aenean at est. In et risus vel orci posuere vulputate. Nulla consequat, orci sit amet sagittis dapibus, augue nisi consequat tellus, vitae ultrices neque arcu nec neque.</p> <h2>Título 2</h2> <p>Phasellus mauris nisl, scelerisque vel, consequat sit amet, volutpat sed, sem. Curabitur varius, quam et rutrum bibendum, justo eros venenatis eros, viverra dapibus purus nunc eget magna. Integer ac orci a eros fermentum mattis. Phasellus eu felis. In at metus. Quisque et lorem. Fusce vulputate accumsan mi. Ut non enim eu magna mollis auctor. Morbi aliquet tortor quis mauris. Praesent quis ligula. Duis sit amet odio.</p> </body> </html> |
Copie esse código e cole no seu editor de texto e salve como exemplo1.html e mande abrir com seu navegador (Firefox, Internet Explorer). Você pode ver aqui também.
Como podemos ver é um documento simples que foi gerado com apenas algumas marcações:
Então em uma regra geral, sempre teremos que usar algumas tag’s:
Essas tag’s são de grande importância, elas que definem a estrutura básica do documento HTML.
Pô legal em agora já sei fazer uma página com texto, bem bacana… Mas creio que esta faltando coisas ainda, porquê nos sites que entro é tudo bonito, e quando digito Ctrl + U no meu Firefox aparece um monte de código que você nem se quer citou aqui.
É verdade recém estamos engatinhando na estruturação de documentos com HTML, existem muitas tag’s a serem descobertas, assim como algumas outras linguagens. Por hora continue aprendendo sobre HTML e suas tag’s e os valores que elas tem.
Essa é uma pergunta repentina para quem trabalha com desenvolvimento WEB, e que tenha conhecidos que sabem da sua profissão. Quem nunca escutou essa pergunta que atire a primeira pedra. Tá bom vai dizer que não escutou algo como:
E você de boa fé, sempre acaba tentando ajudar e respondendo de alguma forma a pergunta de seu conhecido ou amigo. Porém vamos tentar ajudar essas pessoas, vou tentar nesse post, mostrar para quem tem interesse, onde e como começar e que diabos é um site.
A atual internet que temos hoje, surgiu da necessidade de manter em comunicações escritórios no período da guerra fria, ou seja mais uma vez os grandes avanços tecnológicos se dão quando há existência de guerra. O porque é simples, é quando grande parte dos países priorizarem ter algum diferencial para se favorecer na disputa.
A WEB por sua vez foi um pouco diferente, surgiu da necessidade de compartilhamento de arquivos, era muito complexo ter que ficar compartilhando por FTP ou outro protocolo os arquivos, além de ficar desorganizadas as informações, e sem interligação entre elas. Para isso foi definido um novo protocolo de troca de mensagens o HTTP, com esse era possível fazer requisições de formas diferente para obter respostas, junto do mesmo foi desenvolvido uma linguagem de marcação, para estruturação do texto e criar a possibilidade de interligar esses texto, eis então que surge o HTML, a denominação dada para esse conjunto foi World Wide Web ou simplesmente WWW.
Bom mas você que está começando ta perguntando porque, esse monte de coisa o que me interessa é fazer o site!
Calma lá, isso é um resumo do resumo da história só para conseguir chegarmos a um ponto, que temos a Internet, dentro dessa a WEB e que a WEB foi criada para compartilharmos documentos utilizando um protocolo chamado HTTP e uma linguagem de marcação denominada HTML para fazermos a estrutura das páginas.
Opa, entendi! Então para fazer um Web Site eu preciso entender HTTP e HTML?
Vamos por partes, atualmente navegando nos sites você precisa entender algo de HTTP e ou HTML?
A resposta é não! Porque?
Por que foram criados os navegadores WEB, isso mesmo os browser ou navegadores como são chamados, são na verdades clientes do protocolo HTTP e tem a possibilidade de interpretar o HTML para exibir na sua tela. Ou seja, ele pega todo o código HTML, e exibe na sua tela.
Então meu Firefox, Internet Explorer, Safari, Chrome, entre outros navegadores na verdades são clientes HTTP?
Sim, eles foram implementados para poderem interegir com o protocolo enviando as mensagens necessárias para os Servidores HTTP, conforme a ação do usuário no programa, logo após receber a resposta do protocolo HTTP que normalmente vem em HTML ele renderizar essa resposta, ou seja pegar o HTML que veio de resposta e mostrar na tela.
Mas, bah! Ele faz tudo isso quando acessa o Orkut?
Faz tudo isso e muito mais.
Até aqui percebemos que, para termos um site precisamos conhecer uma linguagem de marcação HTML, para fazermos a estruturação dos dados e ligação entre eles, e que para o site funcionar é necessário existir um protocolo, que é o HTTP. E para fazer as requisições desse protocolo nós utilizamos um cliente (Firefox, Internet Explorer…).
Mas espera… Tudo bem eu uso meu firefox digito lá: www.orkut.com e abre a página do orkut, mas como isso ocorre?
Se você conhece um pouco de informática, já deve ter ouvido aquele velho ditado, “onde tem cliente, tem servidor“. Trocando em miúdos, é necessário não apenas ter um cliente HTTP no caso os navegadores, mas também um servidor HTTP. É ele que vai receber as requisições e enviar o resultado esperado.
Exemplificando:
Jõazinho vai na padaria e pede 1 quilo de mortadela (Requisição do cliente).
O padeiro Manoel recebe esse “pedido”, e entrega para o cliente depois de pesar 1 quilo de mortadela (Resposta do Servidor).
Hãããã? Coma assim?
Isso mesmo se fizermos uma analogia, grande parte da nossa vida passa por 1 cliente e 1 servidor, e não seria diferente na web.
No servidor temos todas as respostas possíveis para as requisições, inclusive aquelas que não existe. Então o servidor na WEB, tem o papel de armazenar arquivos e esperar requisições do cliente para enviar resposta para ele.
Para servidor existem diversos, porém os com maiores destaques são o Apache e o IIS.
Ficamos por aqui com o primeiro post sobre essa aventura de como funciona à WEB e de como fazer ela, fique meditando sobre as informações obtidas aqui, e pesquise, googleie bastante. Pois as informações estão dispostas nessa WEB que estamos a desvendar. Agora você já sabe que acada vez que vai ver o perfil de alguem no Orkut você faz uma requisição para um servidor HTTP e esse envia para você uma resposta em HTML, que seu navegador renderiza na sua tela. Não é divino? Um simples clique…
Medite e qualquer dúvida post aqui e aguarde a seqüencia dessa temporada.
Google lança seu navegador codinome Chrome, utilizando o engine Webkit, o mesmo utilizado pelo Konqueror e adaptado para o Safari.
Com uma interface minimalista, e diversas outras funcionalidades citadas em uma revista com um pouco mais de 30 páginas explicando os benefícios do navegador.
Assim como vídeos ensinando a utilizar o browser, e demostrando os recursos.