DESENVOLVIMENTO WEB II

Transcrição

1 REVISÃO Regras HTML e Dicas: Fechar sempre os TAGS fechados e compostos; NUNCA esquecer um sinal de < ou de >, no início ou no fim do TAG; Não usar espaços no TAG (no interior dos sinais < e > ). EX: </ comando> ERRADO!!! < com an do> - NUNCA!!!! Os agrupamentos de espaços colocados FORA dos TAGS serão interpretados como apenas um espaço. Fora dos TAGS não há restrição do uso dos espaços ( é usado para adicionar mais espaços); NOMES DOS ARQUIVOS (inclusive extensão.html ou.htm ) Sempre em minúsculas e sem acentos e caracteres especiais. Algumas dicas importantes para o seu sucesso na Web: Verifique suas páginas com diferentes navegadores e em diferentes plataformas para assegurar que você terá uma experiência de visualização consistente; Como alguns usuários da WEB ainda se conectam a velocidades baixas, verifique se suas páginas podem ser visualizadas com estes modems; Revise a grafia e a gramática antes de publicar a sua página (peça que outra pessoa a leia). Verifique todos os links entre as páginas. Esta dica é simples mas muitas pessoas esquecem dela e publicam péssimos trabalhos; Não coloque informações do tipo Este site está em processo de criação (geralmente acompanhada de sinais amarelos), pois praticamente todos os sites da Web estão em criação e em desenvolvimento. É preferível não colocar nada a colocar uma página com um aviso deste tipo; - 3 -

2 Peça a opinião de outras pessoas antes de publicar o seu site, o olhar crítico de alguém pode detectar erros que não foram percebidos por você. Observações em relação aos nomes dos arquivos: As extensões ".html" ou ".htm" são importantes quando o servidor Web está identificando o arquivo. Usaremos como convenção para os nossos trabalhos a extensão ".html"; Os nomes devem iniciar com uma letra obrigatoriamente; Pode-se utilizar caracteres como "-" e "_"; Evite utilizar "ç", caracteres especiais e letras acentuadas em nomes de arquivos; Procure usar nomes significativos, que remetam ao conteúdo do arquivo. Para edição dos arquivos.html, utilizaremos o programa PHP Editor Versão PHP Editor é um editor freeware e totalmente em português destinado a edição de páginas PHP e HTML. Vamos salvar nossos arquivos de exemplo na pasta c:/wamp/www/dw Estrutura básica de uma página <html> <head> <title>titulo da Página</title> </head> <body>  </body> </html> Um documento HTML básico é composto de duas partes: - 4 -

3 A seção de cabeçalho descritiva; O corpo do conteúdo. XHTML: XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em tradução livre resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que uma HTML "pura, clara e limpa". Vantagens de se usar XHTML: Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos documentos web produzidos ou se migrar os documentos atuais escritos em HTML. E, dentre elas destaca-se em primeiro plano a compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo desde já que as criações XHTML conservar-se-ão estáveis por longos anos. A tendência é a de que futuras versões de navegadores e agentes de usuários em geral, deixem de suportar elementos e atributos já em desuso ("deprecated") segundo as Recomendações do W3C 1, bem como antigos e ultrapassados esquemas e esboços da HTML. XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web. XHTML é um código consistente que dispensa uso de "truques" e "hacks" para contornar "bugs". Editar um código XHTML existente é uma tarefa bem simples por se tratar de uma escrita limpa e evidente. 1 O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um consórcio internacional com quase 400 membros (agrega empresas, órgãos governamentais e organizações independentes) com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web

4 O tempo de carregamento de uma página XHTML é mais rápido, pois os navegadores têm a interpretar uma página limpa sem ter que decidir sobre renderização de erros de código. Uma página XHTML é mais acessível aos navegadores e às aplicações de usuário em geral, incrementando a interoperabilidade e a portabilidade dos documentos web. Uma página XHTML é totalmente compatível com todas as aplicações HTML antigas e já ultrapassadas. XHTML é um "Padrão Web" (Web Standard) XHTML é uma linguagem estável, oficialmente especificada pelo W3C, tendo sido projetada e revisada pelos seus membros e é um "Padrão Web". As diferenças entre XHTML e HTML: As principais diferenças são: 1 - Todos os tags devem ser escritos em letras minúsculas: Errado: <DIV><P>Aqui um texto</p></div> Certo: <div><p>aqui um texto</p></div> 2 - Os tags devem estar convenientemente aninhados: Errado: <div><em><p>aqui um texto negrito</em></p></div> Certo: <div><em><p>aqui um texto negrito</p></em></div> - 6 -

5 3 - Os documentos devem ser bem formados: Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>. A estrutura básica do documento deve ser conforme abaixo: <html> <head>... </head> <body>... </body> </html> 4 - O uso de tags de fechamento é obrigatório: Em HTML é permitido, para determinados elementos, omitir-se o tag de fechamento. XHTML não permite omissão de qualquer tag de fechamento. Errado: <p>um parágrafo.<p>outro parágrafo. Certo: <p>um parágrafo.</p><p>outro parágrafo.</p> 5 - Elementos vazios devem ser fechados: Errado: <br><hr><img src="imagem.gif" alt="minha imagem"> Certo: <br /><hr /><img src="imagem.gif" alt="minhaimagem" /> 6 - Sintaxe para atributos: Nomes de atributos: Assim como os tags, os atributos também são sensíveis ao tamanho de caixa e então deve-se escrever nomes de atributos em minúsculas: - 7 -

6 Errado: <td ROWSPAN="3"> Certo: <td rowspan="3"> Valores de atributos: Os valores de atributos devem estar entre "aspas duplas " ou 'aspas simples': Errado: <td rowspan=3> Certo: <td rowspan="3"> ou <td rowspan='3'> Valores dos atributos: Todos os atributos devem receber um valor: Errado: <input checked /> Certo: <input checked="checked" /> Os atributos id e name: O HTML define o atributo name para os elementos a, form, frame, iframe, img, input e map. O HTML também introduziu o atributo id. Ambos atributos foram projetados para serem usados como identificadores. Documentos XHTML compatíveis com XML e bem estruturados, DEVEM usar o atributo id e não name ao definir identificadores para os elementos listados acima. Em XHTML, o atributo name destes elementos está formalmente em desuso e possivelmente será excluido nas versões futuras de XHTML

7 Errado: <img src="imagem.gif" name="minha_imagem" /> Certo: <img src="imagem.gif" id="minha_imagem" /> DESENVOLVIMENTO WEB II Nota: Por razões de compatibilidade com navegadores antigos você pode usar ambos os atributos como mostrado a seguir: <img src="imagem.gif" id="minha_imagem" name="minha_imagem" /> NOVIDADE: Documet Type Não existe um só tipo de HTML, atualmente existem vários: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, e muitos outros. Cada um destes tipos está definido em especificação própria no W3C, mas também está definido em linguagem de máquina especificando a estrutura legal, os elementos e os atributos próprios do tipo de HTML. Uma definição assim é chamada de "Document Type Definition", (Definição do Tipo de Documento) ou simplesmente DTD. Ferramentas para processar documentos, tais como WEB Browsers, precisam saber qual é a DTD que o documento (X)HTML usa: esta é razão porque documentos (X)HTML precisam conter logo no seu início uma declaração DTD tal como abaixo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Uma declaração DTD usualmente é chamada de "Doctype". Por que especificar um doctype? - 9 -

8 Porque ele define qual é a versão do (X)HTML que o documento está usando e esta é uma informação fundamental para que os browsers processem corretamente o documento. Por exemplo: ao especificar o doctype, o documento estará apto a ser processado por ferramentas tais como o Validador de marcação para checar a sintaxe do seu (X)HTML (e descobrir eventuais erros que prejudicariam a correta renderização em variados browsers. Entende-se que renderização é o processo pelo qual pode-se obter o produto final de um processamento digital qualquer). Estas ferramentas não funcionam se não conhecerem o tipo de documento que estão processando. Porém, o mais importante de uma declaração de doctype é que uma família considerável de browsers não ficará tentando resolver ou "adivinhar" como renderizar o código e ao contrário entrará logo em modo de parseamento "standard", no qual o entendimento (e em consequência a apresentação) do documento é não só mais rápida como também isenta de uma má apresentação ao qual estão sujeitos os documentos sem uma declaração de Doctype. São três os tipos de DOCTYPE para HTML e XHTML: Strict Transitional Frameset Strict: este tipo é usado quando você fez um código 100% XHTML, sem erros. Deve ser escrito assim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

9 Transitional: este é o modo mais usado. Você o usa quando está começando a migrar do nosso amigo HTML para o poderoso XHTML. Sua sintaxe é: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Frameset: é usado quando você está utilizando frames em seu site. Escreve-se assim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Esta informação deve ser adicionada na primeira linha do seu arquivo HTML, antes do tag <html>. Veja o exemplo abaixo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html> <head> <title>titulo da Página</title> </head> <body>  </body> </html>

10 Mata Tags - O que são e como utilizá-las: Meta tags são linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de te encontrar, por exemplo. Por meio delas, você pode também "assinar" seu site, declarando sua autoria sobre o código fonte. Cada vez mais os buscadores levam em consideração a qualidade do conteúdo nos resultados de pesquisa, e por isso simplesmente adicionar meta tags no código fonte da sua página não vai melhorar o posicionamento dela. Porém, as meta tags ainda tem seu espaço se utilizadas corretamente. Como utilizar as meta tags? As meta tags devem ser incluídas no seu código HTML, dentro do tag <head>, como mostra o exemplo a seguir: <html> <head> <title> Aprendendo sobre as meta tags </title> <meta name="author" content="marcos Dalamura"> <meta name="description" content="meta Tags - O que são e como utilizá-las"> <meta name="keywords" content="sites, web, desenvolvimento"> </head>... Vamos entender melhor as instruções "menos óbvias", isto é, keywords e description:

11 keywords Nesta tag você deve incluir uma quantidade de palavras que se referem ao conteúdo da página. Mantenha o limite de aproximadamente 150 caracteres. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado. Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas - alguns buscadores têm problemas com letras maiúsculas e podem ignorar seu site. <meta name="keywords" content="sites, web, desenvolvimento, html, design"> Pessoalmente, eu costumo incluir os termos no singular e no plural (site, sites). No caso de palavras acentuadas, eu ignoro a acentuação ou utilizo os caracteres acentuados em HTML ("manutenção" fica "manutencao" ou "manutenção"). Vide Infelizmente, alguns desenvolvedores fizeram mal uso deste recurso no passado, o que faz com que alguns robots e spiders não dêem muita atenção às meta tags keywords. Se não têm mais tanta influência nos resultados dos principais buscadores, as meta tags keywords ainda podem ajudar a categorizar o conteúdo da sua página. Por isso, sempre use palavras-chave coerentes com o seu conteúdo, e nunca acrescente itens só para aparecer melhor na busca, afinal você sabe que quando o usuário entra no seu site e não encontra o que foi "prometido" sairá rapidamente da página. Além disso, os buscadores melhoram seus algoritmos de busca a cada dia, e um truquezinho que aparentemente vai te ajudar pode atrapalhar e muito. description

12 Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site. Procure manter um limite de aproximadamente 90 caracteres. <meta name="description" content=" Meta Tags - O que são e como utilizá-las "> Sozinhas, as meta tags não fazem milagres na divulgação do seu site: dê muita importância ao seu conteúdo em primeiro lugar. É a dobradinha conteúdo bem apresentado + atualização constante que vai fazer com que o usuário sempre volte. Um título coerente com o conteúdo e explicativo também ajuda. Cuide também dos seus links: procure inserir apenas endereços para páginas com assuntos relacionados ao seu conteúdo, e tente ser "linkado" de volta. Em quanto mais páginas relevantes sobre o mesmo assunto seu site aparecer, melhor ele estará no ranking dos buscadores. Escondendo seu site dos buscadores Hoje em dia é um pouco obsoleto utilizar as meta tags para esconder determinadas páginas do seu site dos buscadores. Para melhores resultados, você pode experimentar o uso de um arquivo robots.txt (link em inglês). Tão importante quanto conhecer a utilidade da tag keywords é saber usar a tag robots. A função desta é informar aos buscadores se devem indexar sua página ou não. Parece contraditório falar sobre isso, mas, na verdade, bloquear seu site pode ter lá suas vantagens. Quando você utiliza pop-ups ou iframes para mostrar o conteúdo do seu site, por exemplo, não é interessante que o buscador indexe essas páginas, afinal, se elas forem acessadas individualmente, não vão significar nada e não trarão visitação relevante ao seu site. Também pode ser interessante não indexar seu site quando o conteúdo é restrito a um grupo de pessoas e não

13 precisa de divulgação ou quando você quer fazer um blog mais reservado, por exemplo. Nestes casos, mesmo que outras pessoas façam links para o seu site, ele não aparecerá em nenhuma busca (na verdade, isso pode depender de critérios internos do buscador). Os valores possíveis para esta tag são: <meta name="robots" content="index,follow"> <meta name="robots" content="noindex,follow"> <meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noarchive"> Aqui, os valores "index" e "noindex" se referem ao tratamento da página inicial: se o buscador deve ou não incluí-la nos resultados, respectivamente. Já os valores "follow" e "nofollow" se referem aos links da página inicial, se eles devem ser visitados e indexados ou não. Portanto: <meta name="robots" content="index,follow"> Indexa a página inicial e todas as páginas nela referenciadas. <meta name="robots" content="noindex,follow"> A instrução acima não indexa a página inicial, mas indexa as páginas nela referenciadas (links). nela. <meta name="robots" content="index,nofollow"> A instrução anterior indexa a página inicial, mas nenhum link existente

14 links. <meta name="robots" content="noindex,nofollow"> Por fim, a instrução acima não indexa nem a página inicial e nem seus Portanto, se você quiser evitar que os sites de busca encontrem seu site, use a última opção. Porém, se você quiser que apenas o Google não encontre seu site ou se quiser remover uma página dos seus resultados de busca a partir da próxima varredura, pode utilizar a seguinte tag: <meta name="googlebot" content="noindex,nofollow"> A maioria dos buscadores armazena uma cópia da sua página em cache, para otimizar a busca. Para evitar isso, você pode utilizar a tag a seguir: <meta name="robots" content="noarchive"> Todavia, lembre-se que além de acelerar a busca, armazenar uma cópia em cache tem a finalidade de disponibilizar o resultado ao usuário caso seu site esteja passando por algum problema técnico. Use esta tag somente se o conteúdo do seu site for muito específico quanto a essa necessidade. Mais do que divulgar seu site nos buscadores As meta tags não servem só para divulgar seu conteúdo. Basicamente, a função delas é fornecer informações adicionais sobre seu site. Vamos conhecer melhor algumas meta tags interessantes. content-language Especifica a língua primária da página. Útil para ajudar o buscador a classificar seu site no idioma apropriado, orientar os navegadores a exibir

15 acentuação e caracteres especiais corretamente, e para facilitar o uso de corretores ortográficos. Alguns valores possíveis: pt Português pt-br Português do Brasil en Inglês en-us Inglês dos EUA en-gb Inglês Britânico fr Francês de Alemão es Espanhol it Italiano ru Russo zh Chinês ja Japonês Um exemplo usando o valor "pt-br": <meta http-equiv="content-language" content="pt-br"> content-type Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam exibidos corretamente. Os valores mais comuns são: <meta http-equiv="content-type" content="text/html; charset=iso "> Onde:

16 text/html define que o conteúdo é um texto em linguagem HTML. Se você desenvolve sites em XHTML ou XML, deverá aplicar os valores "application/xhtml+xml" e "application/xml", respectivamente. iso é a codificação da linguagem mais comum para exibir textos em línguas derivadas do latim. author Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte: Eu considero esta tag importantíssima. Ela pode ser útil quando algum usuário procura pelo seu nome em um buscador ou quando o site do seu cliente não tem uma forma de contato direto com você desenvolvedor por alguma razão. <meta name="author" content="marcos Dalamura"> Infelizmente, trabalhamos com o risco de clientes não pagarem pelo nosso trabalho, motivo pelo qual também é importante manter uma tag com o seu nome no código do site para ajudar a provar que ele foi desenvolvido por você. reply-to Especifica um endereço de para entrar em contato com o responsável pelo site. <meta name="reply-to" content="[email protected]">

17 generator Alguma vez você já reparou que quando edita uma página HTML feita no Word, muitas vezes é o programa que a gerou que abre para edição, e não o Bloco de Notas ou seu editor não-visual padrão? Isso é por causa da meta tag generator, que especifica o programa que construiu a página: <meta name="generator" content="microsoft Word"> É assim que o Sistema Operacional sabe que editor utilizar e que ícone mostrar ao exibir um arquivo.htm ou.html em uma pasta. Redirecionando o visitante para outra página Alguma vez você já deve ter visitado um site que mudou de endereço e que exibe uma mensagem do tipo: Você será redirecionado para um novo site em 5 segundos. Se não quiser aguardar, clique aqui. Esse redirecionamento pode ser feito com meta tag, por meio de uma única linha: <meta http-equiv="refresh" content=" 5 ;url= Ou seja, depois de 5 segundos, o navegador será redirecionado para o endereço Essa mesma tag é utilizada para atualizar automaticamente uma página dinâmica, como a home page de um portal ou a sessão de notícias de um site, por exemplo. Neste caso, o intervalo de tempo em segundos deve ser bem maior e a URL deve ser o endereço do próprio site a ser atualizado. <meta http-equiv="refresh" content="120;url=

18 Lembre-se apenas de utilizar esse recurso com cautela, pois uma página que é atualizada automaticamente pode interromper a atividade do usuário, deixando-o irritado. As meta tags são interessantes para o seu site, mas não são o mais importante. Você deve priorizar a disponibilização de bom conteúdo e, claro, evitar enganar ou confundir seu usuário. Acreditar que somente um bom trabalho em meta tags será o suficiente para o seu site ser bem indexado é um erro, mesmo porque, conforme já informado, os buscadores estão cada vez mais preparados para identificar "truques". Por isso, utilize meta tags, mas procure também trabalhar com boas práticas. Exercício: Monte um arquivo com o nome revisao.html contendo o seu horário de aula neste semestre, conforme exemplo abaixo: Obs: 01 Escreva seu arquivo utilizando o padrão XHTML; 02 Salve seu arquivo na pasta c:/wamp/www/dw2 03 Utilize o DTD Trasitional e coloque o título da página como Meu Horário 04 Utilize a meta tag author colocando o seu nome como autor da página

19 05 Utilize a meta tag description com os seguintes dizeres: Horário do 4º Período de Sistemas de Informação - UNIVERSO 06 Utilize a meta tag keywords com os seguintes dizeres: universo, horário, sistemas de informação, quarto período 07 Utilize a meta tag robots de forma que os buscadores não indexem a página os links contidos na mesma 08 Utilize a meta tag content-language especificando a língua primária da página como Português Brasil 09 Utilize a meta tag reply-to informando seu 10 Utilizando a meta tag refresh redirecione a sua página, após 10 segundos, para o site da Universo Juiz de Fora ( 11 Utilize Folhas de Estilo (CSS), método interno, para configuar a página de acordo com as características abaixo: Família da Fonte de toda a página: arial, verdana, sans-serif Alinhamento do texto de toda a página: centralizado Todo texto da página, inclusive da tabela, em negrito Cor de fundo das linhas da tabela: #CCCCCC