O documento apresenta as principais diferenças entre HTML5 e XHTML, como a remoção do fechamento de tags, a nova sintaxe do doctype e a adição de novas tags semânticas. Também discute como implementar vídeos, tabelas e formulários semanticamente no HTML5, além de dicas para adaptação a dispositivos móveis.
O documento resume uma apresentação sobre HTML5, CSS3 e JavaScript feita por Fábio Flatschart na Campus Party 2011. A apresentação discute as novas especificações e recursos introduzidos pelo HTML5, como estrutura semântica, formulários, vídeo, SVG e APIs, e como essas tecnologias permitem o desenvolvimento de aplicações web ricas. O documento também aborda compatibilidade entre navegadores e ferramentas da Adobe para suporte a HTML5.
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011
O documento fornece instruções para construir layouts sem tabelas utilizando tags <div> e CSS. Explica os 6 passos para criar o layout: 1) escolher os blocos, 2) nomeá-los, 3) criar a marcação HTML, 4) posicionar os blocos com CSS, 5) adicionar conteúdo, 6) criar menu dropdown. Também discute como tornar o layout responsivo e acessível em diferentes dispositivos.
O documento discute os principais aspectos de desenvolvimento de sites, incluindo escolha de ferramentas, linguagens de programação, bancos de dados, estrutura, padrões web, acessibilidade e testes.
O documento discute a evolução do HTML para a versão 5, propondo simplificar a estrutura e sintaxe do código. Ele apresenta exemplos de como estruturar páginas web usando novos elementos semânticos no HTML5 como section, nav e article. O documento também mostra como incorporar vídeos, áudio e estilos CSS3 nas páginas.
O documento apresenta informações sobre um curso de desenvolvimento web ministrado pelo professor Rodrigo Santa Maria, incluindo sua formação acadêmica, experiência profissional e objetivos do curso.
O documento resume uma apresentação sobre HTML5, CSS3 e JavaScript feita por Fábio Flatschart na Campus Party 2011. A apresentação discute as novas especificações e recursos introduzidos pelo HTML5, como estrutura semântica, formulários, vídeo, SVG e APIs, e como essas tecnologias permitem o desenvolvimento de aplicações web ricas. O documento também aborda compatibilidade entre navegadores e ferramentas da Adobe para suporte a HTML5.
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011
O documento fornece instruções para construir layouts sem tabelas utilizando tags <div> e CSS. Explica os 6 passos para criar o layout: 1) escolher os blocos, 2) nomeá-los, 3) criar a marcação HTML, 4) posicionar os blocos com CSS, 5) adicionar conteúdo, 6) criar menu dropdown. Também discute como tornar o layout responsivo e acessível em diferentes dispositivos.
O documento discute os principais aspectos de desenvolvimento de sites, incluindo escolha de ferramentas, linguagens de programação, bancos de dados, estrutura, padrões web, acessibilidade e testes.
O documento discute a evolução do HTML para a versão 5, propondo simplificar a estrutura e sintaxe do código. Ele apresenta exemplos de como estruturar páginas web usando novos elementos semânticos no HTML5 como section, nav e article. O documento também mostra como incorporar vídeos, áudio e estilos CSS3 nas páginas.
O documento apresenta informações sobre um curso de desenvolvimento web ministrado pelo professor Rodrigo Santa Maria, incluindo sua formação acadêmica, experiência profissional e objetivos do curso.
O documento discute as mudanças trazidas pelo HTML5, incluindo a adição de elementos semânticos que melhor descrevem o conteúdo, como section, header e article, e a capacidade de incorporar vídeos e mídia diretamente na página sem a necessidade de plugins.
O documento discute a importância da acessibilidade na web para pessoas com deficiências. Ele explica como tornar sites acessíveis para deficientes visuais, auditivos, físicos e cognitivos através do uso correto de tags HTML, atributos como "alt" e "longdesc", e organização da tabulação. Também fornece diretrizes sobre como tornar conteúdo acessível para daltônicos e links úteis sobre o assunto.
O documento apresenta as novidades do HTML5 em 8 capítulos, incluindo novas tags semânticas, formulários aprimorados, armazenamento offline, acesso a dispositivos e multimídia. Apresenta também CSS3 com novas propriedades para efeitos visuais e design responsivo para diferentes telas.
Palestra que demonstra e explica em detalhes, através de um exemplo prático (a interação entre duas caixas de seleção), os principais conceitos envolvidos no desenvolvimento de aplicações com AJAX.
O documento discute as principais mudanças e recursos introduzidos pelo HTML5, incluindo nova estrutura, elementos e atributos. Também analisa o suporte dos navegadores a esses recursos e estratégias para uso, como a detecção de recursos com Modernizr e o desenvolvimento modular dos motores de renderização. Por fim, apresenta em detalhes os novos recursos multimídia como vídeo, áudio e codecs, além de novas APIs como Storage e offline.
Isto é uma apresentação sobre HTML5, a nova padrão web especificado pelo o W3C e WHAT-WG.
Nesta apresentação eu dou um curto resumo da historia de web apps e depois mostrar HTML5 usando varios exemplos.
O documento apresenta as principais novidades da especificação HTML5, incluindo novos elementos semânticos, formulários aprimorados, integração de mídia como áudio e vídeo, o canvas para desenho, e APIs que fortalecem o desenvolvimento do lado do cliente. O palestrante Clécio Bachini discute como o HTML5 é a evolução natural da web, não uma ruptura, e como proporciona marcação semântica e compatibilidade multiplataforma.
Este documento fornece uma visão geral de um curso de desenvolvimento web e apresenta os principais tópicos a serem abordados, incluindo HTML, CSS, JavaScript, frameworks e conceitos como protocolo HTTP e servidores web.
O documento apresenta uma introdução ao design responsivo, discutindo princípios como grids fluidas, media queries e imagens flexíveis para adaptar sites a diferentes dispositivos. Também fornece exemplos de código e frameworks para ajudar a criar sites responsivos.
O documento introduz os principais conceitos de HTML5, incluindo: (1) suas novas tags semânticas como <section>, <nav> e <article>; (2) seus novos recursos como vídeo, áudio e armazenamento local; e (3) como substitui o XHTML ao oferecer maior flexibilidade e retrocompatibilidade.
O documento discute as novas possibilidades trazidas pela especificação HTML5, como elementos estruturais semânticos, novos tipos de entrada para formulários, integração de mídia como vídeo e áudio, uso de canvas e SVG, e APIs que permitem novas funcionalidades para aplicações web. A especificação HTML5 evolui a web de forma modular, permitindo que recursos sejam implementados gradualmente pelos navegadores sem depender da finalização da especificação.
Os documentos resumem vários cursos sobre HTML e CSS, abordando tópicos como tags HTML, propriedades CSS, frameworks, responsividade e desenvolvimento de sites. Muitos cursos são gratuitos e ensinam desde os conceitos básicos até o avançado, com certificado.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Gustavo Corrêa Alves
- O documento discute técnicas para melhorar o desempenho de sites, incluindo otimização de HTML, CSS, JavaScript, imagens e configurações no servidor;
- Recomenda-se minificar e concatenar arquivos, evitar manipulação excessiva do DOM, usar CDNs e gzip para reduzir tamanho de arquivos e tempo de carregamento;
- Cuidados com sprites, icon fonts, escala de imagens e otimização delas também são destacados para melhorar a performance.
O documento apresenta uma palestra sobre HTML5. Em três frases ou menos:
HTML5 é a nova especificação do W3C para a web que introduz novos elementos, APIs e recursos multimídia como canvas e vídeo. A palestra aborda as novidades da linguagem e como desenvolvedores podem começar a usar o HTML5 agora mesmo aproveitando sua natureza modular. O palestrante Clécio Bachini é especialista em web standards e fundador da empresa Soyuz Sistemas.
0 Introdução ao Desenvolvimento Web - ApresentaçãoMauro Duarte
Este documento apresenta um curso introdutório sobre desenvolvimento web que inclui 20 aulas sobre HTML, CSS e padrões web. O curso é ministrado pelo professor Mauro Duarte e inclui três provas para avaliar o conhecimento dos alunos.
1. O documento apresenta um sumário detalhado sobre o curso Desenvolvimento Web com HTML, CSS e JavaScript da Caelum, com tópicos que vão desde a introdução aos conceitos até exercícios avançados de posicionamento.
2. É apresentado um guia passo-a-passo para desenvolvimento de páginas web, começando pelos fundamentos de HTML e CSS e evoluindo para conceitos mais complexos como posicionamento, formulários e JavaScript.
3. O documento fornece todos os recursos necessários para aprender a desenvolver
O documento fornece uma introdução sobre desenvolvimento de jogos com HTML5, abordando tópicos como canvas, áudio, vídeo, armazenamento, entre outros. Explica porque o HTML5 é uma boa opção para jogos e apresenta frameworks e melhores práticas para desenvolvimento com esta tecnologia.
Este documento fornece uma introdução abrangente sobre como usar o Twitter de forma eficaz, incluindo como criar uma conta, postar tweets, seguir outras pessoas, usar hashtags, obter seguidores e potencialmente ganhar dinheiro com links patrocinados. Ele explica os principais recursos e funcionalidades do Twitter para iniciantes.
Este documento fornece um modelo de perguntas para planejamento digital interativo, cobrindo tópicos como dados do cliente, público-alvo, concorrentes, análise SWOT, expectativas do cliente, objetivos, métricas, conteúdo, arquitetura de informação e planejamento visual. Embora não seja uma receita de bolo rígida, serve como base para desenvolver briefing ou planejamento digital para projetos.
O documento discute as mudanças trazidas pelo HTML5, incluindo a adição de elementos semânticos que melhor descrevem o conteúdo, como section, header e article, e a capacidade de incorporar vídeos e mídia diretamente na página sem a necessidade de plugins.
O documento discute a importância da acessibilidade na web para pessoas com deficiências. Ele explica como tornar sites acessíveis para deficientes visuais, auditivos, físicos e cognitivos através do uso correto de tags HTML, atributos como "alt" e "longdesc", e organização da tabulação. Também fornece diretrizes sobre como tornar conteúdo acessível para daltônicos e links úteis sobre o assunto.
O documento apresenta as novidades do HTML5 em 8 capítulos, incluindo novas tags semânticas, formulários aprimorados, armazenamento offline, acesso a dispositivos e multimídia. Apresenta também CSS3 com novas propriedades para efeitos visuais e design responsivo para diferentes telas.
Palestra que demonstra e explica em detalhes, através de um exemplo prático (a interação entre duas caixas de seleção), os principais conceitos envolvidos no desenvolvimento de aplicações com AJAX.
O documento discute as principais mudanças e recursos introduzidos pelo HTML5, incluindo nova estrutura, elementos e atributos. Também analisa o suporte dos navegadores a esses recursos e estratégias para uso, como a detecção de recursos com Modernizr e o desenvolvimento modular dos motores de renderização. Por fim, apresenta em detalhes os novos recursos multimídia como vídeo, áudio e codecs, além de novas APIs como Storage e offline.
Isto é uma apresentação sobre HTML5, a nova padrão web especificado pelo o W3C e WHAT-WG.
Nesta apresentação eu dou um curto resumo da historia de web apps e depois mostrar HTML5 usando varios exemplos.
O documento apresenta as principais novidades da especificação HTML5, incluindo novos elementos semânticos, formulários aprimorados, integração de mídia como áudio e vídeo, o canvas para desenho, e APIs que fortalecem o desenvolvimento do lado do cliente. O palestrante Clécio Bachini discute como o HTML5 é a evolução natural da web, não uma ruptura, e como proporciona marcação semântica e compatibilidade multiplataforma.
Este documento fornece uma visão geral de um curso de desenvolvimento web e apresenta os principais tópicos a serem abordados, incluindo HTML, CSS, JavaScript, frameworks e conceitos como protocolo HTTP e servidores web.
O documento apresenta uma introdução ao design responsivo, discutindo princípios como grids fluidas, media queries e imagens flexíveis para adaptar sites a diferentes dispositivos. Também fornece exemplos de código e frameworks para ajudar a criar sites responsivos.
O documento introduz os principais conceitos de HTML5, incluindo: (1) suas novas tags semânticas como <section>, <nav> e <article>; (2) seus novos recursos como vídeo, áudio e armazenamento local; e (3) como substitui o XHTML ao oferecer maior flexibilidade e retrocompatibilidade.
O documento discute as novas possibilidades trazidas pela especificação HTML5, como elementos estruturais semânticos, novos tipos de entrada para formulários, integração de mídia como vídeo e áudio, uso de canvas e SVG, e APIs que permitem novas funcionalidades para aplicações web. A especificação HTML5 evolui a web de forma modular, permitindo que recursos sejam implementados gradualmente pelos navegadores sem depender da finalização da especificação.
Os documentos resumem vários cursos sobre HTML e CSS, abordando tópicos como tags HTML, propriedades CSS, frameworks, responsividade e desenvolvimento de sites. Muitos cursos são gratuitos e ensinam desde os conceitos básicos até o avançado, com certificado.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Gustavo Corrêa Alves
- O documento discute técnicas para melhorar o desempenho de sites, incluindo otimização de HTML, CSS, JavaScript, imagens e configurações no servidor;
- Recomenda-se minificar e concatenar arquivos, evitar manipulação excessiva do DOM, usar CDNs e gzip para reduzir tamanho de arquivos e tempo de carregamento;
- Cuidados com sprites, icon fonts, escala de imagens e otimização delas também são destacados para melhorar a performance.
O documento apresenta uma palestra sobre HTML5. Em três frases ou menos:
HTML5 é a nova especificação do W3C para a web que introduz novos elementos, APIs e recursos multimídia como canvas e vídeo. A palestra aborda as novidades da linguagem e como desenvolvedores podem começar a usar o HTML5 agora mesmo aproveitando sua natureza modular. O palestrante Clécio Bachini é especialista em web standards e fundador da empresa Soyuz Sistemas.
0 Introdução ao Desenvolvimento Web - ApresentaçãoMauro Duarte
Este documento apresenta um curso introdutório sobre desenvolvimento web que inclui 20 aulas sobre HTML, CSS e padrões web. O curso é ministrado pelo professor Mauro Duarte e inclui três provas para avaliar o conhecimento dos alunos.
1. O documento apresenta um sumário detalhado sobre o curso Desenvolvimento Web com HTML, CSS e JavaScript da Caelum, com tópicos que vão desde a introdução aos conceitos até exercícios avançados de posicionamento.
2. É apresentado um guia passo-a-passo para desenvolvimento de páginas web, começando pelos fundamentos de HTML e CSS e evoluindo para conceitos mais complexos como posicionamento, formulários e JavaScript.
3. O documento fornece todos os recursos necessários para aprender a desenvolver
O documento fornece uma introdução sobre desenvolvimento de jogos com HTML5, abordando tópicos como canvas, áudio, vídeo, armazenamento, entre outros. Explica porque o HTML5 é uma boa opção para jogos e apresenta frameworks e melhores práticas para desenvolvimento com esta tecnologia.
Este documento fornece uma introdução abrangente sobre como usar o Twitter de forma eficaz, incluindo como criar uma conta, postar tweets, seguir outras pessoas, usar hashtags, obter seguidores e potencialmente ganhar dinheiro com links patrocinados. Ele explica os principais recursos e funcionalidades do Twitter para iniciantes.
Este documento fornece um modelo de perguntas para planejamento digital interativo, cobrindo tópicos como dados do cliente, público-alvo, concorrentes, análise SWOT, expectativas do cliente, objetivos, métricas, conteúdo, arquitetura de informação e planejamento visual. Embora não seja uma receita de bolo rígida, serve como base para desenvolver briefing ou planejamento digital para projetos.
O documento define termos técnicos relacionados à diagramação, ilustração, impressão e edição de imagens digitais. Entre os termos definidos estão anti-aliasing, bitmap, CMYK, diagramação, vetorização e dithering.
Com base neste cenário, nas perspectivas da área de gestão de pessoas, e contando com experiência de mais de 20 anos militando nas áreas de Consultoria e Tecnologia da Informação, auxiliamos nossos clientes combinando as seguintes abordagens, com o objetivo de prevenir riscos e a transformar os setores de Administração de Pessoal e Recursos Humanos, em centros de resultados integrados a todos os demais departamentos das empresas
Este poema expresa los sentimientos de amor del autor que permanecen constantes sin importar las estaciones. Describe las emociones que evocan cada estación - el otoño trae pasión cuando las hojas caen, el invierno trae calor a través del amor a pesar del frío, el verano es para la reconciliación, y la primavera eterna representa el amor que durará para siempre.
Marketing para Pequenas Empresas - Criação de sites otimizadosAlan Pereira
Nossa missão é ajudar nossos clientes a transformar e potencializar seu negócio através dos serviços de marketing digital e tradicional de alta qualidade, com ótimos resultados e custos acessíveis às Pequenas Empresas.
https://www.alanpereira.com/criacao-de-sites/
O documento fornece um resumo sobre HTML5. Apresenta o histórico da evolução da linguagem HTML ao longo dos anos e descreve as principais novidades trazidas pela especificação HTML5, como novos elementos semânticos, formulários aprimorados, integração de mídia e APIs para desenvolvimento de aplicações web. O documento também discute questões de compatibilidade entre navegadores e fornece links para recursos adicionais sobre HTML5.
O documento descreve as principais novidades do HTML5 e CSS3, incluindo a reorganização semântica do HTML5 com elementos como header, nav, section e article, assim como recursos multimídia como vídeo e canvas, e propriedades avançadas de CSS3 como borda arredondada, sombras e transições. Exemplos são fornecidos para ilustrar o uso desses recursos.
O documento discute os principais conceitos da Web 2.0, incluindo sua evolução, tecnologias envolvidas e oportunidades de mercado. Aborda tópicos como a história da web, modelos de desenvolvimento, linguagens como HTML, CSS e JavaScript e padrões como W3C.
O documento descreve o que é HTML5, suas principais funcionalidades como novos elementos semânticos, controle de mídia, e uso offline, e como está sendo usado em jogos, animações e aplicativos de desenho. Também discute padrões e ambientes de desenvolvimento para HTML5.
O documento resume vários artigos sobre HTML5. Apresenta as principais mudanças trazidas pelo HTML5 como novas tags semânticas que melhoram a acessibilidade e a estrutura do código, novas APIs para mídia e formulários e compatibilidade aprimorada entre navegadores. Também discute técnicas para garantir compatibilidade do HTML5 em navegadores mais antigos.
O documento resume uma palestra sobre HTML5, CSS3 e JavaScript que ocorrerá em 17 de outubro de 2022. Apresentará conceitos básicos dessas tecnologias como tags, elementos, estrutura básica de páginas web e exemplos de códigos.
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
O documento discute a evolução da web, desde suas origens estáticas até a web dinâmica e interativa de hoje. Apresenta as principais tecnologias por trás do desenvolvimento web, como HTML, CSS e JavaScript. Explica também os modelos de desenvolvimento em camadas e a importância dos padrões da W3C.
O documento discute padrões da web, incluindo HTML, XHTML e CSS. Ele explica como esses padrões foram criados para facilitar o desenvolvimento web e melhorar a experiência do usuário, e destaca boas práticas como usar HTML de forma semântica e separar conteúdo de apresentação usando folhas de estilo.
O documento apresenta uma introdução sobre XHTML e CSS com Dreamweaver CS3. Resume conceitos como:
1) XHTML é uma reformulação da linguagem HTML baseada em XML para melhorar a acessibilidade em diversos dispositivos.
2) CSS é usada para separar a formatação do conteúdo, definindo a apresentação de documentos em HTML ou XML.
3) Dreamweaver CS3 permite validar, converter e estilizar documentos usando XHTML e CSS de forma integrada.
1. O documento discute HTML5, apresentando sua história, arquitetura, elementos e semântica. Também aborda CSS3 e JavaScript.
2. São apresentados diversos elementos HTML5 como vídeo, áudio, listas e formulários, além de CSS como fontes, cores e bordas.
3. O documento fornece links e exemplos para auxiliar no aprendizado de HTML5, CSS3 e JavaScript.
Saiba como a Web Semântica (Web 3.0) vem se tornando cada vez mais uma realidade com a chegada do HTML 5 e conheça o que essa nova versão da linguagem de marcação tem de diferente das anteriores e quais as vantagens que nos traz. Com Edu Agni, diretor de Arte Online, e especialista em Semântica e Web Standards.
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Eduardo Bertolucci
1. O documento apresenta um trabalho sobre HTML, CSS e JavaScript desenvolvido por Eduardo Bertolucci para a disciplina de Tópicos Especiais em Desenvolvimento de Sistemas da UNOPAR.
2. O trabalho contém seções sobre HTML, CSS e JavaScript onde são apresentados exemplos de códigos e explicações sobre os principais elementos e propriedades dessas tecnologias.
3. O documento termina com referências bibliográficas.
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
O documento apresenta informações sobre:
1) A estrutura e componentes principais de um navegador da web, incluindo a interface do usuário, engine do navegador, engine de renderização e componentes de rede.
2) O fluxo de renderização de páginas web, incluindo a construção da DOM a partir do HTML, CSSOM a partir do CSS e árvore de renderização.
3) Técnicas para otimizar o critical rendering path como priorizar recursos, async/defer scripts e code splitting.
O documento discute o que é crossbrowsing, que é a habilidade de um site ou aplicação web funcionar em múltiplos navegadores respeitando as especificações do W3C. Ele fornece exemplos de sites que utilizam crossbrowsing e ferramentas para testar sites em diferentes navegadores. Por fim, aborda técnicas como CSS, HTML5 e comentários condicionais para construir sites compatíveis com diferentes browsers.
Palestra / Efeitos Espetaculares Em Dhtml / SDDhugodiasneto
O documento discute como o Dynamic HTML (DHTML) permite modificar dinamicamente páginas da web no cliente usando HTML e JavaScript sem recarregar a página. Ele também descreve como frameworks como o Scriptaculous e o Prototype podem ser usados para criar efeitos visuais como menus deslizantes, abas Ajax e lightboxes para imagens.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
O documento discute os conceitos básicos de HTML, incluindo:
1) O que é HTML e como é usado para estruturar páginas da web;
2) As principais tags HTML como <head>, <body>, <h1>, <p>, <img>;
3) Como adicionar estilos a páginas HTML usando CSS.
O documento discute o desenvolvimento web usando diferentes frameworks como VRaptor e Spring MVC combinados com REST, HTML5 e CSS3. Ele também introduz o Bootstrap como uma forma de criar interfaces responsivas com esses padrões sem esforço adicional.
2. Índice
HTML! 3
Por que HTML5?! 3
Já dá pra usar HTML5 hoje em dia?! 3
Quais são as diferenças?! 4
Doctype! 4
HTML! 4
Charset! 4
Chamando CSS e JS! 5
Imagem! 5
Video! 6
Tags novas do HTML5 para montagem da página! 7
Estrutura semântica da tabela! 8
Estrutura semântica de formulários! 9
Adaptando para celulares! 10
Dicas de desenvolvimento! 11
CSS3! 12
Referência, dicas, links úteis ! 13
3. HTML
Por que HTML5?
Na opinião de Diego Eis, da Visie, o HTML5 vem para substituir o xHTML. O desenvolvimento do xHTML no W3C estava muito devagar,
então um grupo de desenvolvedores começou o HTML5 e fez tanto barulho que o W3C pegou para si. Tem sido lançado devagar e
liberado aos poucos, e assim sendo implantado pelos browsers.
Com o HTML5 a semântica é quase obrigatória. Com isso, passar o site para mobile é extremamente simples e ganhamos muito tempo
na manutenção.
Já dá pra usar HTML5 hoje em dia?
SIM. A única coisa que o browser faz é interpretar seja lá o que for que você escrever e formatar com CSS. Como o IE não é browser,
ele precisa de um javascript que transforma as caixas em divs.
É basicamente um
<script>document.createElement('time');</script>
Onde ʻtimeʼ é a tag do HTML5 que você quer transformar em caixa.
Existem scripts que fazem isso automaticamente, é só adicionar no <header>. Esse está hospedado no Google, é bom que não
consome banda.
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
O que não dá pra usar ainda são muitas das frescuras do CSS3. Bordas arredondadas, colunas, sombras são elementos que já
funcionam no webkit e no firefox mas ainda não existem para IE e algumas coisas nem pro Opera. Isso acontece porque, como está se
implementando aos poucos, os navegadores fazem algumas coisas e outros não. Existem tabelas que mostram o que funciona aonde.
As opções são ou contornar o problema com jQuery ou conversar com o cliente, oferecendo uma versão com features de layout para
quem usa browsers modernos.
4. Quais são as diferenças?
Não é mais necessário fechar todas as tags, uma vez que não estamos mais no xHTML. De <br/> fica <br> mesmo.
Doctype
De
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
Para
<!DOCTYPE html>
HTML
De
<html xmlns="http://www.w3.org/1999/xhtml">
Para
<html lang="pt-BR">
É importante colocar o atributo lang porque isso ajuda o google a indexar, configura o leitor de tela e ainda ajuda o charset.
Charset
De
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Para
<meta charset="utf-8" />
Uma vez colocado, não é preciso se preocupar em colocar caracteres com ASCII, tipo . Se você fixa o caracter com o código
ASCII, numa tradução para caracteres diferentes esse código permanece igual. Isso prejudica a acessibilidade.
5. Chamando CSS e JS
De
<style type="text/css">
Para
<style>
De
<script type="text/javascript">
Para
<javascript>
Imagem
De
<img src=”” alt=””/>
<span> Legenda </span>
Para
<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://
www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>
No W3Schools diz ainda que não existem mais os atributos align, border, hspace, e vspace.
6. Video
Antes
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/
oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>
Depois
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Existem dois tipos de codificação de vídeo: MP4 que funciona para todos os browsers menos o Firefox e o OGG. O MP4 roda inclusive
no IE (embedando no flash), então a única preocupação é fazer as duas versões.
Isso é uma coisa que precisamos estudar melhor. Ficou na sala de programação do Codeshow e eu não vi.
7. Tags novas do HTML5 para montagem da página
No lugar de usar <div id=””> para tudo, vamos usar div quando for realmente um bloco de alguma cosia.
Atenção: as tags listadas abaixo são inline por default. Lembre-se de trocar o display para block no CSS.
<header> Coisas do cabeçalho, como título, busca, etc.
<nav> Para navegação interna do site.
<aside> Barra lateral.
<section> Um bloco, um pedaço.
<article> Um artigo. O conteúdo em si.
<time> Para data e hora.
<footer> Rodapé da página. Eu também vi usando como rodapé do artigo. Acho interessante, podemos discutir e usar a header para
isso também.
Existem outras tags mas essas são as principais.
8. Estrutura semântica da tabela
Válido também para xHMTL.
<table>
" <thead>
" " <tr>
" " " <th>titulo</th>
" " " <th>Views</th>
" " " <th>x</th>
" " </tr>
" </thead>
" <tfoot>
" " <tr><td></td></tr>
" </tfoot>"
" <tbody>
" " <tr><td></td></tr>
" </tbody>"
</table>
O <thead> é o cabeçalho, onde vai o que é cada coluna. Importante para acessibilidade e leitores de tela.
O <tfooter> vem logo abaixo por causa dos tempos negros de ADSL, onde o browser carregava o cabeçalho, o rodapé e só depois o
meio da tabela.
<tbody> é onde vai o conteúdo.
9. Estrutura semântica de formulários
Válido também para xHTML
<form action="" method="POST" id="sampleForm">
<fieldset><legend>Formulário</legend>
<label id="userName">
Nome de Usuário:
<input type="text" name="userName">
</label>
<label id="mail">
Email:
<input type="text" name="mail">
</label>
<label id="fullName">
Nome Completo:
<input type="text" name="fullName">
</label>
<label id="choose">
Escolha:
<select name="choose">
<option>asdaasdasdaafsdfsdfsds</option>
<option>123123123123</option>
</select>
</label>
<label id="address">
Endereço:
<textarea name="address" rows="3" cols="50"></textarea>
</label>
<input type="submit" class="submit">
</fieldset>
</form>
10. O <fildset> é importante para acessibilidade e você pode tirar a borda, formatando o <legend> para ser o título do formulário, sem
necessidade de <hx>.
Colocar o nome do campo e o campo dentro do <label> ajuda a clicar, pois clicando no título do campo já foca o mesmo.
Adaptando para celulares
A tag mais coisa-linda-de-Deus (Diego Eis que descreveu assim)
<meta name="viewport" content="width=device-width" />
Que define a largura do dispositivo.
Com isso é possível fazer CSSs para cada largura:
<link rel="stylesheet" href="cssNormal.css" type="text/css" media="screen and (min-width:481px)">
<link rel="stylesheet" href="cssParaCelular.css" type="text/css" media="screen and (max-width:
480px)">
Teste no Tableless.com.br, diminuindo a largura da tela. O CSS para mobile só tira os float:left.
O indicado é oferecer esse serviço para celulares mais novos, como o Android, os Nokias mais recentes e claro, iPhone.
Dica: esse media=”screen” tem de ser em letra maiúscula para funcionar no windows mobile. Fica media=”Screen”.
11. Dicas de desenvolvimento
Semântica não é algo mecânico. É algo a ser discutido e pensado - e, pessoalmente, é a parte mais divertida do HTML. No Codeshow
mudávamos de ideia a cada sugestão, pensando para que servia cada coisa.
O melhor seria que planejássemos antes de montar, conversando com o gerente de projetos e o programador para saber o que é e para
que serve cada elemento e, assim, escolher a tag mais adequada.
Outra coisa que é bacana é fazer todo o HTML primeiro, só a marcação, validar no W3C e só então passar a fazer o CSS. Enquanto
isso, o programador pode já utilizar o HTML e assim toda a equipe ganha tempo.
12. CSS3
Muitas das coisas do CSS3 ainda não vamos conseguir usar, mas seguem links de algumas dicas muito úteis que funcionam apenas em
browsers com suporte:
Texto em colunas: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-multi-column-css3-module/
Transitions, background na letra, rotate, box shadow, animation http://www.smashingmagazine.com/2010/05/27/css-three-connecting-
the-dots/
Borda arredondada (inclusive na imagem), dois backgrounds na mesma div, sombra no texto http://forum.imasters.uol.com.br/
index.php?/topic/352661-o-css3-esta-chegando-confira-alguns-exemplos/
Text gradient http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/
A gente podia fazer um repositório com dicas sobre isso :)
13. Referência, dicas, links úteis
HTML5 em todos os browsers http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
Features you can use right now: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html5-features-you-should-be-using-right-
now/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+nettuts+(NETTUTS)
Formulários semânticos: http://gaigalas.net/lab/semanticforms.html
Tags HTML5 http://www.w3schools.com/html5/
Tag figure http://html5doctor.com/the-figure-figcaption-elements/
Lista de tags HTML http://www.pinceladasdaweb.com.br/html5/
Tabela de compatibilidade HTML5 - browsers http://html5demos.com/
Exemplo da página em HTML5 - http://www.pinceladasdaweb.com.br/blog/2009/06/22/semantica-com-o-html5/
Tabelas de HTML5 e CSS3 - http://www.webresourcesdepot.com/html-5-and-css3-cheat-sheets-collection/