HTML 5 e Css3 Bsico_celula

  • Published on
    15-Jan-2016

  • View
    5

  • Download
    0

DESCRIPTION

a postila sobre html, super legal e leiam, hein!

Transcript

  • HTML 5 e CSS 3 Mdulo Bsico

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    2

    ndice:

    1. Introduo e conceituao a. Evoluo do Mercado de internet b. Viso geral e histria do HTML c. Objetivos do HTML 5

    2. Estrutura bsica do HTML 5

    a. Modelo estrutural antigo b. Novas estruturas c. Novos elementos e atributos d. Elementos que saram ou foram descontinuados e. Elementos de estrutura f. Outros elementos de contedo

    3. CSS 3 Novos recursos de formatao

    a. Implementaes e vantagens do CSS 3 b. Transform, Gradients, Border-radius, Opacity e Shadow c. Animaes com Transitions e @Fontface d. Layout de um site

    4. Estratgias de uso

    a. Analise de suporte dos navegadores b. Polyfills e Shims c. Media Queries d. Layout para mobile

    5. Formulrios

    a. Novos tipos e campos b. Tipos de dados e validadores c. Montando um formulrio

    6. Multimdia no HTML 5

    a. Elemento udio b. Elemento vdeo e codecs

    7. Introduo ao SVG e Canvas API

    a. Svg api b. Canvas

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    3

    Captulo 1 Introduo e conceituao Evoluo do Mercado de Internet

    Para entender as alteraes na linguagem base dos web sites que o HTML ,

    devemos refletir sobre o porque , onde , quando e como utilizar essas

    alteraes, benefcios e implementaes

    A Internet Evoluiu

    Devemos fazer uma reflexo sobre a evoluo da Internet e de como as

    pessoas a utilizam atualmente. Vemos a cada ano uma adoo em massa do

    meio para diversas atividades como consultas, pesquisas, compras, negcios,

    aprendizado, divulgao de eventos e produtos, etc

    Atualmente temos ainda o fato da grande ascenso das redes sociais o que

    provoca uma incluso digital de quem estava fora desse mundo.

    Hoje os usurios quem fazem a rede, isso se evidencia em sites que utilizam

    contedos gerados por eles como facebook, twitter, youtube, linkedin,

    mercadolivre, webmotors, etc.

    Novos desafios

    Com essa exploso de contedo produzido em grande parte pelos usurios,

    vem o prximo desafio: organizar todo esse contedo para que seja mais fcil

    de localiz-lo e index-lo . Alm disso hoje devemos nos preocupar com

    acessibilidade, num mundo onde muitos deficientes de todos os tipos, e

    pessoas de idade acessam cada vez mais a rede.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    4

    Outra vertente importante dessa evoluo o fato de que os usurios no

    utilizam apenas uma plataforma ou um device de acesso. Atualmente as

    pessoas acessam a web de diversas plataformas ( Windows, MAC, LINUX,

    ETC) e tambm diversos devices ( celular, TV, tablet, notebook) e os sites

    devem estar disponveis para todos essas diferentes formas de acesso.

    Sites mais ricos e flexveis

    Uma soluo para todos esses desafios a linguagem HTML 5 , pois prope

    entre outras coisas a universalizao do site que dever estar disponvel em

    todas as plataformas, e devices alm de acessvel para todos com opes para

    deficientes e navegao mais facilitada e o site mais leve pois o site vdever

    conter um cdigo mais limpo , resumido e eficiente.

    Viso geral e histria do html

    De acordo com o W3C a Web baseada em 3 pilares:

    Um esquema de nomes para localizao de fontes de informao na Web, esse esquema chama-se URI.

    Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. Uma linguagem de Hypertexto, para a fcil navegao entre as fontes de

    informao: o HTML.

    Vamos nos focar no terceiro pilar, o HTML.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    5

    Hypertexto

    HTML uma abreviao de Hypertext Markup Language - Linguagem de

    Marcao de Hypertexto. Resumindo em uma frase: o HTML uma linguagem

    para publicao de contedo (texto, imagem, vdeo, udio e etc) na Web.

    O HTML baseado no conceito de Hipertexto. Hipertexto so conjuntos de

    elementos ou ns ligados por conexes. Estes elementos podem ser

    palavras, imagens, vdeos, udio, documentos etc. Estes elementos

    conectados formam uma grande rede de informao. Eles no esto

    conectados linearmente como se fossem textos de um livro, onde um assunto

    ligado ao outro seguidamente. A conexo feita em um hipertexto algo

    imprevisto que permite a comunicao de dados, organizando conhecimentos e

    guardando informaes relacionadas.

    Para distribuir informao de uma maneira global, necessrio haver uma

    linguagem que seja entendida universalmente por diversos meios de acesso. O

    HTML se prope a ser esta linguagem.

    Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade

    quando o Mosaic - browser desenvolvido por Marc Andreessen na dcada de

    1990 - ganhou fora. A partir da, desenvolvedores e fabricantes de browsers

    utilizaram o HTML como base, compartilhando as mesmas convenes.

    O comeo e a interoperabilidade

    Entre 1993 e 1995, o HTML ganhou as verses HTML+, HTML2.0 e HTML3.0,

    onde foram propostas diversas mudanas para enriquecer as possibilidades da

    linguagem. Contudo, at aqui o HTML ainda no era tratado como um padro.

    Apenas em 1997, o grupo de trabalho do W3C responsvel por manter o

    padro do cdigo, trabalhou na verso 3.2 da linguagem, fazendo com que ela

    fosse tratada como prtica comum. Voc pode

    ver: http://www.w3.org/TR/html401/appendix/changes.html.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    6

    Desde o comeo o HTML foi criado para ser uma linguagem independente de

    plataformas, browsers e outros meios de acesso. Interoperabilidade significa

    menos custo. Voc cria apenas um cdigo HTML e este cdigo pode ser lido

    por diversos meios, ao invs de verses diferentes para diversos dispositivos.

    Dessa forma, evitou-se que a Web fosse desenvolvida em uma base

    proprietria, com formatos incompatveis e limitada.

    Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada,

    fazendo com que a informao publicada por meio deste cdigo fosse

    acessvel por dispositivos e outros meios com caractersticas diferentes, no

    importando o tamanho da tela, resoluo, variao de cor. Dispositivos prprios

    para deficientes visuais e auditivos ou dispositivos mveis e portteis. O HTML

    deve ser entendido universalmente, dando a possibilidade para a reutilizao

    dessa informao de acordo com as limitaes de cada meio de acesso.

    WHAT Working Group

    Enquanto o W3C focava suas atenes para a criao da segunda verso do

    XHTML, um grupo chamado Web Hypertext Application Technology Working

    Group ou WHATWG trabalhava em uma verso do HTML que trazia mais

    flexibilidade para a produo de websites e sistemas baseados na web.

    O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de

    empresas como Mozilla, Apple e Opera em 2004. Eles no estavam felizes

    com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por

    isso, estas organizaes se juntaram para escrever o que seria chamado hoje

    de HTML5.

    Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi

    includo no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto.

    A participao no grupo livre e voc pode se inscrever na lista de email para

    contribuir.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    7

    Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo

    e principalmente pelo W3C - que at ento trabalhavam separadamente - que

    reconheceu todo o trabalho do grupo. Em Outubro de 2006, Tim Berners-Lee

    anunciou que trabalharia juntamente com o WHATWG na produo do HTML5

    em detrimento do XHTML 2. Contudo o XHTML continuaria sendo mantido

    paralelamente de acordo comas mudanas causadas no HTML. O grupo que

    estava cuidando especificamente do XHTML 2 foi descontinuado em 2009.

    O HTML5 e suas mudanas

    Quando o HTML4 foi lanado, o W3C alertou os desenvolvedores sobre

    algumas boas prticas que deveriam ser seguidas ao produzir cdigos client-

    side. Desde este tempo, assuntos como a separao da estrutura do cdigo

    com a formatao e princpios de acessibilidade foram trazidos para

    discusses e ateno dos fabricantes e desenvolvedores.

    Contudo, o HTML4 ainda no trazia diferencial real para a semntica do

    cdigo. o HTML4 tambm no facilitava a manipulao dos elementos via

    Javascript ou CSS. Se voc quisesse criar um sistema com a possibilidade de

    Dragn Drop de elementos, era necessrio criar um grande script, com bugs e

    que muitas vezes no funcionavam de acordo em todos os browsers.

    Objetivos do HTML 5

    O HTML5 a nova verso do HTML4. Enquanto o WHATWG define as regras

    de marcao que usaremos no HTML5 e no XHTML, eles tambm definem

    APIs que formaro a base da arquitetura web. Essas APIs so conhecidas

    como DOM Level 0.

    Um dos principais objetivos do HTML5 facilitar a manipulao do elemento

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    8

    possibilitando o desenvolvedor a modificar as caractersticas dos objetos de

    forma no intrusiva e de maneira que seja transparente para o usurio final.

    Ao contrrio das verses anteriores, o HTML5 fornece ferramentas para a CSS

    e o Javascript fazerem seu trabalho da melhor maneira possvel. O HTML5

    permite por meio de suas APIs a manipulao das caractersticas destes

    elementos, de forma que o website ou a aplicao continue leve e funcional.

    O HTML5 tambm cria novas tags e modifica a funo de outras. As verses

    antigas do HTML no continham um padro universal para a criao de sees

    comuns e especficas como rodap, cabealho, sidebar, menus e etc. No

    havia um padro de nomenclatura de IDs, Classes ou tags. No havia um

    mtodo de capturar de maneira automtica as informaes localizadas nos

    rodaps dos websites.

    H outros elementos e atributos que sua funo e significado foram

    modificados e que agora podem ser reutilizados de forma mais eficaz. Por

    exemplo, elementos como B ou I que foram descontinuados em verses

    anteriores do HTML agora assumem funes diferentes e entregam mais

    significado para os usurios.

    O HTML5 modifica a forma de como escrevemos cdigo e organizamos a

    informao na pgina. Seria mais semntica com menos cdigo. Seria mais

    interatividade sem a necessidade de instalao de plugins e perda de

    performance. a criao de cdigo interopervel, pronto para futuros

    dispositivos e que facilita a reutilizao da informao de diversas formas.

    O WHATWG tem mantido o foco para manter a retro compatibilidade. Nenhum

    site dever ter de ser refeito totalmente para se adequar aos novos conceitos e

    regras. O HTML5 est sendo criado para que seja compatvel com os browsers

    recentes, possibilitando a utilizao das novas caractersticas imediatamente.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    9

    Captulo 2 estrutura bsica do HTML 5

    DOCTYPE e charsets

    A estrutura bsica do HTML5 continua sendo a mesma das verses anteriores

    da linguagem, h apenas uma excesso na escrita do Doctype. Segue abaixo

    como a estrutura bsica pode ser seguida:

    1 2 3 4 5 6 7 8 9 10 11

    O Doctype

    O Doctype deve ser a primeira linha de cdigo do documento antes da tag

    HTML.

    O Doctype indica para o navegador e para outros meios qual a especificao

    de cdigo utilizar. Em verses anteriores, era necessrio referenciar o DTD

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    10

    diretamente no cdigo do Doctype. Com o HTML5, a referncia por qual DTD

    utilizar responsabilidade do Browser.

    O Doctype no uma tag do HTML, mas uma instruo para que o browser

    tenha informaes sobre qual verso de cdigo a marcao foi escrita.

    O elemento HTML

    O cdigo HTML uma srie de elementos em rvore onde alguns elementos

    so filhos de outros e assim por diante. O elemento principal dessa grande

    rvore sempre a tag HTML.

    O atributo LANG necessrio para que os user-agents saibam qual a

    linguagem principal do documento.

    Lembre-se que o atributo LANG no restrito ao elemento HTML, ele pode ser

    utilizado em qualquer outro elemento para indicar o idioma do texto

    representado.

    Para encontrar a listagem de cdigos das linguagens,

    acesse:http://www.w3.org/International/questions/qa-choosing-language-tags.HEAD

    A Tag HEAD onde fica toda a parte inteligente da pgina. No HEAD ficam os

    metadados. Metadados so informaes sobre a pgina e o contedo ali

    publicado.

    MetatagCharset

    No nosso exemplo h uma metatag responsvel por chavear qual tabela de

    caractres a pgina est utilizando.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    11

    Nas verses anteriores ao HTML5, essa tag era escrita da forma abaixo:

    Essa forma antiga ser tambm suportada no HTML5. Contudo, melhor que

    voc utilize a nova forma.

    A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um site

    que limite o acesso e pessoas de outros pases algo que vai contra a tradio

    e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas

    necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo

    em torno de um milho de caracteres. Ao invs de cada regio ter sua tabela

    de caracteres, muito mais sensato haver uma tabela padro com o maior

    nmero de caracteres possvel. Atualmente a maioria dos sistemas e browsers

    utilizados por usurios suportam plenamente Unicode. Por isso, fazendo seu

    sistema Unicode voc garante que ele ser bem visualizado aqui, na China ou

    em qualquer outro lugar do mundo.

    O que o Unicode faz fornecer um nico nmero para cada caractere, no

    importa a plataforma, nem o programa, nem a lngua.

    Tag LINK

    H dois tipos de links no HTML: a tag A, que so links que levam o usurio

    para outros documentos e a tag LINK, que so links para fontes externas que

    sero usadas no documento.

    No nosso exemplo h uma tag LINK que importa o CSS para nossa pgina:

    O atributorel="stylesheet"indica que aquele link relativo a importao de um arquivo referente a folhas de estilo.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    12

    H outros valores para o atributo REL, como por exemplo o ALTERNATE:

    Neste caso, indicamos aos user-agents que o contedo do site poder ser

    encontrado em um caminho alternativo via Atom FEED.

    No HTML5 h outros links relativos que voc pode inserir como

    orel="archives"que indica uma referncia a uma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um blog pode ser

    referenciada nesta tag.

    Modelos de contedo H pequenas regras bsicas que ns j conhecemos e que esto no HTML

    desde o incio. Estas regras definem onde os elementos podem ou no estar.

    Se eles podem ser filhos ou pais de outros elementos e quais os seus

    comportamentos.

    Dentre todas as categorias de modelos de contedo, existem dois tipos de

    elementos: elementos de linha e de bloco.

    Os elementos de linha marcam, na sua maioria das vezes, texto. Algunsexemplos:a,strong,em,img,input,abbr,span.Os elementos de blocos so como caixas, que dividem o contedo nas sees

    do layout.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    13

    Abaixo segue algumas premissas que voc precisa relembrar e conhecer:

    Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o

    elementoano pode conter o elementolabel. Os elementos de linha nunca podem conter elementos de bloco. Elementos de bloco sempre podem conter elementos de linha. Elementos de bloco podem conter elementos de bloco, dependendo da

    categoria que ele se encontra. Por exemplo, um pargrafo no pode

    conter um DIV. Mas o contrrio possvel.

    Estes dois grandes grupos podem ser divididos em categorias. Estas

    categorias dizem qual modelo de contedo o elemento trabalha e como pode

    ser seu comportamento.

    Categorias

    Cada elemento no HTML pode ou no fazer parte de um grupo de elementos

    com caractersticas similares. As categorias esto a seguir. Manteremos os

    nomes das categorias em ingls para que haja um melhor entendimento:

    Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

    Abaixo segue como as categorias esto relacionadas de acordo com o

    WHATWG:

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    14

    Metadata content

    Os elementos que compe a categoria Metadata so:

    base command link meta noscript script style title

    Este contedo vem antes da apresentao, formando uma relao com o

    documento e seu contedo com outros documentos que distribuem informao

    por outros meios.

    Flow content

    A maioria dos elementos utilizados no body e aplicaes so categorizados

    como Flow Content. So eles:

    a abbr address area (se for um decendente de um elemento de mapa) article aside audio b bdo blockquote br

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    15

    button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    16

    label link (Se o atributoitempropfor utilizado) map mark math menu meta (Se o atributoitempropfor utilizado) meter nav noscript object ol output p pre progress q ruby samp script section select small span strong style (Se o atributoscopedfor utilizado) sub sup svg table textarea time

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    17

    ul var video wbr Text

    Por via de regra, elementos que seu modelo de contedo permitem inserir

    qualquer elemento que se encaixa no Flow Content, devem ter pelo menos um

    descendente de texto ou um elemento descendente que faa parte da

    categoriaembedded.

    Sectioning content

    Estes elementos definem um grupo de cabealhos e rodaps.

    article aside nav section

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    18

    Basicamente so elementos que juntam grupos de textos no documento.

    Heading content

    Os elementos da categoria Heading definem uma seo de cabealhos, que

    podem estar contidos em um elemento na categoria Sectioning.

    h1 h2 h3 h4 h5 h6 hgroup

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    19

    Phrasing content

    Fazem parte desta categoria elementos que marcam o texto do documento,

    bem como os elementos que marcam este texto dentro do elemento de

    pargrafo.

    a abbr area (se ele for descendente de um elemento de mapa) audio b bdo br button canvas cite code command datalist del (se ele contiver um elemento da categoria de Phrasing) dfn em embed i iframe img input ins (se ele contiver um elemento da categoria de Phrasing) kbd keygen label link (se o atributoitempropfor utilizado) map (se apenas ele contiver um elemento da categoria de Phrasing)

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    20

    mark math meta (se o atributoitempropfor utilizado) meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr Text

    Embedded content

    Na categoria Embedded, h elementos que importam outra fonte de informao

    para o documento.

    audio canvas embed

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    21

    iframe img math object svg video

    Interactive content

    Interactive Content so elementos que fazem parte da interao de usurio.

    a audio (se o atributocontrolfor utilizado) button details embed iframe img (se o atributousemapfor utilizado) input (se o atributotypeno tiver o valor hidden) keygen label menu (se o atributotypetiver o valortoolbar) object (se o atributousemapfor utilizado) select textarea video (se o atributocontrolfor utilizado)

    Alguns elementos no HTML podem ser ativados por um comportamento. Isso

    significa que o usurio pode ativ-lo de alguma forma. O incio da seqncia de

    eventos depende do mecanismo de ativao e normalmente culminam em um

    evento de click seguido pelo evento DOMActivate.

    O user-agent permite que o usurio ative manualmente o elemento que tem

    este comportamento utilizando um teclado, mouse, comando de voz etc.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    22

    Captulo 3 CSS 3: Novos recursos de formatao

    Implementaes e vantagens do CSS 3

    Para entendermos as vantagens de se usar CSS, vamos voltar um pouquinho no

    tempo: Com a evoluo da internet, a linguagem HTML tambm precisava evoluir

    juntamente com a necessidade dos desenvolvedores, com isso foram criadas

    vrias tags (por exemplo center), que supriam essas necessidades, essas, por

    sua vez, por falta de planejamento, resultavam em um cdigo sujo, enorme e

    confuso.

    Mas depois de algum tempo, essas tags foram se tornando obsoletas, com isso

    surgiu uma nova soluo: As Folhas de estilos em Cascata, ou seja, CSS. A

    funo das CSS simplesmente separar a formatao do contedo da pgina,

    deixando o HTML somente com a estruturao do contedo.

    Vantagens do CSS 3

    Com CSS economiza-se tempo de criao e manuteno do site (o cdigo de formatao fica isolado em um nico arquivo CSS).

    Reduo do cdigo HTML. Os Navegadores carregam mais rpido a pgina, podendo chegar at a 70%. Maior eficincia no gerenciamento do Layout. Com recursos mais avaados de CSS pode-se conseguir um design

    sofisticado sem utilizao de imagens e tabelas.

    Limitaes do CSS 3 Ainda nenhum browser suporta todas as especificaes de style sheets definidas pelo W3C e alguns implementam estilos de forma diferente.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    23

    Transform, Gradients, Border-radius, Opacity e Shadow Transform Com a propriedade transform conseguimos aplicar efeitos que vo desde rotao dos elementos da tela, passando pela escala , at a inclinao. Nesse caso os valores de inclinao e rotao so em degress (deg). J os valores de escala, se baseam em numeros , sendo o nmero 1 equivalente a 100% do valor da escala X ou Y como mostra o exemplo abaixo: #div1{ width:150px; height:150px; Background:#fff; transform: rotate(75deg); -moz-transform: rotate(755deg); -webkit-transform: rotate(75deg); } No exemplo acima estamos rotacionando o elemento div1 em 75 graus positivos; #div2{ width:130px; height:130px; Background:#fff; -webkit-transform:scale(0.8); -moz-transform:scale(0.8); transform:scale(0.8); } No segundo exemplo alteramos a escala do elemento #div2 para 80% do seu tamanho original. Gradients Uma das facilidades do CSS 3 a utilizao de gradientes atravs do cdigo. Isso facilita a manipulao dos itens de layout como menus e caixas de destaque, devido ao fato de no utilizar imagens de fundo como era feito sem esse recurso. Vejamos um exemplo: 1 #box { 2 width:100px;

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    24

    3 height:100px; 4 background-image: -o-linear-gradient(bottom, rgb(179,13,13) 13%, rgb(250,10,50) 73%, rgb(252,239,242) 87%); 5 background-image: -moz-linear-gradient(bottom, #000 13%, #FFF 73%); 6 background-image: -webkit-linear-gradient(bottom, rgb(179,13,13) 13%, rgb(250,10,50) 73%, rgb(252,239,242) 87%); 7 background-image: -ms-linear-gradient(bottom, rgb(179,13,13) 13%, rgb(250,10,50) 73%, rgb(252,239,242) 87%); 8 } No exemplo acima utilizamos a propriedade background-image para inicializar o nosso gradiente , o a opo linear-gradient. Depois definimos 3 cores para esse gradiente e a sua porcentagem. Essas cores tambm podem ser configuradas em hexadecimal como mostrado na linha 5. Uma boa ferramenta para a criao de gradientes o site Gradient Generator (http://gradients.glrzad.com/) Transparncias (Opacity) Utilizao de transparncias via CSS um recurso cada vez mais exigido nos projetos de sites e interfaces web no geral. No CSS 3 temos a propriedade opacity recebe um valor numrico de 0 a 1 onde 0.5 representaria 50% de opacidade. #box {

    width:100px; height:100px; background-color:#99FF33;

    opacity:0.5; } Para o mozila utilizamos o prefixo moz- #box {

    width:100px; height:100px; background-color:#99FF33;

    opacity:0.5; moz-opacity:0.5; } No caso dos Navegadores mais antigos como Internet Explorer temos uma funo que substitui a propriedade atravs da propriedade Efects e nesse caso o valor da opacidade vai de 0 a 100.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    25

    filter : alpha(opacity=50); Sombras (shadows) Para se aplicar sombras temos duas propriedades: box-shadow , responsvel por adicionar sombras em caixas de modo geral e a propriedade text-shadow, aplicvel textos box-shadow:#F60 10px 10px 15px 10px; text-shadow:#F60 10px 10px 15px 10px; No caso acima estamos configurando a cor da sombra, a direo x e y da sombra . Depois podemos configurar o blur(desfoque) da sombra. E por ultimo temos a opo de borda da sombra. Border-radius Podemos aplicar o arredondamento de cantos utilizando essa propriedade. #box {

    width:100px; height:100px; border: 1px solid #000;

    border-radius:25px; } No caso de imagens tambm procedemos da mesma maneira.

    Animaes com Transitions e @fontface Uma das grandes novidades do CSS3 e que est abrindo novos horizontes para a comunidade de desenvolvedores e designers a propriedade transitions, responsvel por controlar processos de transio em eventos hover. -moz-transition:all 2s ease-in-out; Nela voc define quais as propriedades a serrem modificadas, quanto tempo vai durar essa transio em segundos, qual a funo de acelerao (ease) e posteriormente o delay da transio.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    26

    No segundo momento voc define o estado hover do objeto e a transio ser ento executada como segue abaixo #box { width:100px; height:100px; -webkit-transition:all 2s ease-in-out; border-radius:25px; background-color:#99FF33 } #box:hover { background-color:#CC0000; -moz-transform:scale(2,2) rotate(45deg) ; -ms-transform:scale(2,2) rotate(45deg) ; -o-transform:scale(2,2) rotate(45deg) ; -webkit-transform:scale(2,2) rotate(45deg) ;

    opacity:0.5; } @Fontface Essa propriedade j est disponvel a algum tempo e abre novas possibilidades para o desenvolvimento de interfaces web. Nela voc consegue utilizar diferentes tipos de fonts pois no limita o uso s fontes instaladas na mquina do usurio. No caso da @fontface voc sobe a sua coleo de fontes no servidor web e o usurio que acessar o site automaticamente baixa as mesmas em seu computador, como feito com as imagens de um site. Considere que utilizar a fonte "RegencyScriptFLF Regular" (tipo de fonte que simula manuscrito) em seu site @font-face { font-family: "RegencyScriptFLF Regular"; src: url("http://site/fontes/RegencyScriptFLF-Regular.ttf"); } p { font-family: "RegencyScriptFLF Regular", Cursive; } O navegador do usurio far download da fonte no endereo que consta na propriedade src e utilizar a fonte para renderizar os pargrafos do documento. Caso o arquivo no seja encontrado no endereo especificado ou o navegador no entenda a propriedade (retro-compatibilidade) ser utilizada a fonte genrica Cursive.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    27

    Os formatos de fontes aceitos pelos navegadores padro so .ttf, .otf, .svg e .svgz. Veja que neste exemplo estamos utilizando o formato .ttf, contudo o navegador Internet Explorer suporta apenas a extenso proprietria .otf e assim, a regra CSS apresentada no incio dever sofrer um acrscimo para que o IE a entenda, e, claro, os dois formatos devem estar disponveis para download. Veja a baixo: @font-face { font-family: "RegencyScriptFLF Regular"; src: url("http://site/fontes/RegencyScriptFLF-Regular.eot"); /* para IE */ src: url("http://site/fontes/RegencyScriptFLF-Regular.ttf"); } 7. p { font-family: "RegencyScriptFLF Regular", Cursive; } Uma questo importante o fato de que arquivos de fontes em geral so protegidos por direitos autorais e representam custo. Isto acaba por limitar as fontes disponveis para uso. Soluo: comprar as fontes Um boa ferramenta para verificar fonts disponveis, e para a converso de fonts o site Fonts Squirrel (http://www.fontsquirrel.com/). Nele voc conseque converter, baixar e verificar a disponibilidade e uso da sua font desejada.

    Layout de um site Agora com seu instrutor elabore um site a partir dos arquivos recebidos em aula. Utilize os conceitos e informaes passadas no captulo acima.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    28

    Captulo 4 Estratgias de uso do HTML 5

    O desenvolvimento modular

    Antigamente, para que uma nova verso do HTML ou do CSS fosse lanada,

    todas as idias listadas na especificao deveriam ser testadas e

    desenvolvidas para ento serem publicadas para o uso dos browsers e os

    desenvolvedores.

    Esse mtodo foi mudado com o lanamento do HTML5 e o CSS3. A partir de

    agora, as duas tecnologias foram divididas em mdulos. Isso quer dizer que a

    comunidade de desenvolvedores e os fabricantes de browsers no precisam

    esperar que todo o padro seja escrito e publicado para utilizarem as

    novidades das linguagens.

    As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos.

    H um grupo cuidando da propriedade Background, outro da propriedade

    Border, outro das propriedades de Texto e etc. Cada um destes grupos so

    independentes e podem lanar suas novidades a qualquer momento. Logo, o

    desenvolvimento para web ficou mais dinmico, com novidades mais

    constantes.

    O ponto negativo nesse formato, que problemas de compatibilidade podem

    ocorrer com mais frequencia. Por exemplo, um browser pode adotar bordas

    arredondadas e outro no. Ou um browser pode escolher suportar um API

    diferente do API que o concorrente implementou. Contudo, os browsers tem

    mostrado grande interesse em se manterem atualizados em relao aos seus

    concorrentes.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    29

    Motores de Renderizao

    H uma grande diversidade de dispositivos que acessam a internet. Entre eles,

    h uma srie de tablets, smartphones, pc's e etc. Cada um destes meios de

    acesso utilizam um determinado browser para navegar na web. No h como

    os desenvolvedores manterem um bom nvel de compatibilidade com todos

    estes browsers levando em considerao a particularidade de cada um. Uma

    maneira mais segura de manter o cdigo compatvel, nivelar o

    desenvolvimento pelos motores de renderizao. Cada browser utiliza um

    motor de renderizao que responsvel pelo processamento do cdigo da

    pgina.

    Abaixo, segue uma lista dos principais browsers e seus motores:

    Motor Browser

    Webkit Safari, Google Chrome

    Gecko Firefox, Mozilla, Camino

    Trident Internet Explorer 4 ao 9

    Presto Opera 7 ao 10

    interessante que voc faa cdigo compatvel com estes motores. Focando a

    compatibilidade nos motores de renderizao voc atingir uma amplitude

    maior de browsers.

    Por exemplo, se seu cdigo funcionar no Webkit, voc alcanar o Safari e

    o Chrome, dois dos principais browsers do mercado para desktops. Alm disso,

    voc tambm alcana aparelhos como Blackberry, iPhone, iPod Touch, iPad e

    dispositivos que rodam Android.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    30

    Compatibilidade com HTML5

    Atualmente o Webkit o motor mais compatvel com os Padres do HTML5.

    Como a Apple tem interesse que seus dispositivos sejam ultracompatveis com

    os Padres, ela tem feito um belo trabalho de atualizao e avano da

    compatibilidade deste motor.

    Contudo o Firefox e o Opera j esto compatveis com grande parte da

    especificao do HTML5 e CSS3 e a cada upgrade eles trazem mais

    novidades e atualizao dos padres.

    O que pode te preocupar de verdade a retrocompatibilidade com verses

    antigas de browsers como o Internet Explorer. A Microsoft est fazendo um

    bom trabalho com o IE9, mas as verses 8 e 7 no tem quase nenhum suporte

    ao HTML5, o que um problema srio para aplicaes web baseadas em

    tecnologias mais recentes, mas que a base de usurios utiliza as verses

    antigas do Internet Explorer.

    Abaixo segue uma tabela simples de compatibilidade entre os browsers e

    alguns mdulos do HTML5:

    Safari Chrome Opera Firefox IE 8

    IE 9

    Local Storage s s s s s s

    Histrico de Sesso s s s s s s

    Aplicaes Offline s s n s n n

    Novos tipos de campos s s s n n n

    Form: Autofocus s s s n n n

    Form: Autocomplete n n s n n n

    Form: Required s s s n n n

    Video, Audio e Canvas Text s s s s n s

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    31

    Tcnicas de deteco

    Pode ser que o usurio no utilize um browser que suporta HTML5. Neste

    caso, voc pode redirecion-lo para uma verso do site mais simples, ou talvez

    apenas mostrar uma mensagem alertando o usurio sobre a importncia da

    atualizao do browser. Para isso temos algumas tcnicas de deteco para

    conferir se o browser suporta ou no HTML5.

    Quando o browser visita um website, ele constri uma coleo de objetos que

    representam elementos HTML na pgina. Cada elemento no cdigo

    representado no DOM como um objeto diferente. Todo objeto DOM tem

    propriedades em comum, mas alguns objetos tem caractersticas especficas.

    Usaremos estes objetos para fazermos a deteco. Abaixo segue 4 meios que

    voc poder utilizar para detectar o suporte do browser:

    1. Verifique se uma determinada propriedade existe em objetos globais

    como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a

    geolocalizao.

    2. Crie um elemento e verifique se uma determinada propriedade existe

    neste elemento. 3. Crie um elemento e verifique se um determinado mtodo existe neste

    elemento, ento chame o mtodo e verifique se o valor retorna. Por

    exemplo, teste quais formatos de vdeo so suportados.

    4. Crie um elemento e defina um atributo com um determinado valor, ento

    verifique se o atributo suporta este valor. Por exemplo, crie um input e

    verifique quais types so suportados.

    Polly Fills e Shims

    Os pollyfills, so como ajustes feitos atravs de javascript para que os

    navegadores consigam interpletar as novas tags e recusos da linguagem.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    32

    Basicamente eles consertam alguns recusos que possivelmente no esto

    disponveis em algum navegador.

    Existem hoje algumas bibliotecas sendo desenvolvidas por grupos e

    disponibilizadas para os usurios sem nenhum custo.

    Uma delas o site html5shiv do Google. Um repositrio com vrios scripts

    especializados no internet Explorer e que prope a correo de vrios bugs

    Outra fonte muito utilizada o site Modernizr (http://www.modernizr.com/) que

    uma biblioteca de deteco que lhe permite verificar o suporte da maioria das

    caractersticas do HTML5 e CSS3.

    Utilizando o Modernizr

    O Modernizr roda automaticamente assim que voc o adiciona no head do

    documento. Assim, se voc quiser verificar se o browser suporta

    Geolocalizao, por exemplo, basta inserir este script na pgina. Se o browser

    suportar a feature testada, ele retornar true:

    if (Modernizr.geolocation) { // Aceita a feature } else { // No aceita a feature testada. }

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    33

    Media Queries Media Queries a utilizao de Media Types com uma ou mais expresses envolvendo caractersticas de uma media para definir formataes para diversos dispositivos. O browser ou a aplicao l as expresses definidas na query, caso o dispositivo se encaixe nestas requisies, o CSS ser aplicado. Sobre as Media Types As Media Types definem para qual tipo de media o CSS ser direcionado. O HTML foi criado para ser portvel, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML formatado em cada dispositivo diferente. Logo, o cdigo CSS ser diferente para cada um destes dispositivos. Por exemplo, se voc visita um site por um computador, ele no ter a mesma caso voc o visite por um dispositivo mvel. So dispositivos diferentes, com formas totalmente diferentes de navegao. O exemplo acima o mais comum. Mesmo assim, existem outras medias que podemos controlar, como por exemplo, impresso. Abaixo segue uma lista das medias: all

    Para todos os dispositivos.

    braille Para dispositivos tteis.

    embossed Para dispositivos que imprimem em braille.

    handheld Para dispositivos de mo. Normalmente com telas pequenas e banda limitada.

    print Para impresso em papel.

    projection Para apresentaes, como PowerPoint.

    screen Para monitores ou outros dispositivos com telas coloridas e com resoluo adequada.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    34

    speech Para sintetizadores de voz. O CSS 2 tem uma especificao de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores.

    tty Para dispositivos que utilizam uma grade fixa para exibio de caracteres, como por exemplo, teletypes, terminais, dispositivos portteis com display limitado.

    tv Para dispositivos como televisores, ou seja, com baixa resoluo, quantidade de cores e scroll limitado.

    Todos os nomes das medias so case-sensitive.

    A utilizao dessas medias so feitas como o cdigo abaixo:

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    35

    Contudo, ele tambm no trabalha como um desktop. Mesmo a renderizao do MobileSafari sendo idntica a de um desktop, o comportamento do usurio e a forma de navegao diferente. Logo temos um meio termo. No podemos disponibilizar um CSS para HANDHELD, nem um CSS totalmente SCREEN.

    Media Queries As Media Queries definem condies para a utilizao de um CSS especfico. Se essas condies forem aprovadas, ou seja, se o dispositivo de adequar a todas as condies, o CSS ser aplicado.

    Neste cdigo, por exemplo, o CSS ser aplicado em dispositivos de media screen, que tenham uma caracterstica color. Ou seja, este CSS no ser aplicado em aparelhos Monocromticos. Operadores Lgicos Os Operadores Lgicos possibilitaro a criao media queries diversas. Os operadores so: not, and e only. O not ir fazer uma sentena de negao. Por exemplo: Sentena verdadeira para dispositivos monocromticos.

    O only ir esconder os estilos de browsers que no reconhecem media queries. Antes da sentena, voc coloca o only: possvel tambm agrupar vrias media queries separando-os com , (vrgula). Se qualquer uma das queries forem verdadeiras, o CSS ser aplicado. Ento a vrgula funciona como um operador or.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    36

    Media features Para ento distinguir um dispositivo do outro, voc utilizar as caractersticas de cada um. Veja o exemplo:

    Nesse cdigo dizemos que o arquivo estilo.css, ser aplicado para dispositivos que se enquadram em screen com telas que tenham uma resoluo mxima de 480px. H uma lista de caractersticas que voc pode utilizar para selecionar os dispositivos.

    width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid

    As media queries tambm so case-sensitive.

    No so todos os browsers que suportam media queries. Hoje em dia, isso muito utilizado para separar o CSS para iPhone. O MobileSafari reconhece essas media queries, o que possibilita que voc faa uma verso do CSS para iPhone.

    Layout para mobile Agora com seu instrutor elabore um site a para um dispositivo mvel. Utilize os conceitos e informaes passadas nos captulos acima.

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    37

    Captulo 5 Formulrios Novos tipos de campos

    O elemento input aceita os seguintes novos valores para o atributo type:

    tel

    Telefone. No h mscara de formatao ou validao, propositalmente, visto no haver no mundo um padro bem definido para nmeros de telefones. claro que voc pode usar a nova API de validao de formulrios para isso. Os agentes de usurio podem permitir a integrao com sua agenda de contatos, o que particularmente til em telefones celulares.

    search

    Um campo de busca. A aparncia e comportamento do campo pode mudar ligeiramente dependendo do agente de usurio, para parecer com os demais campos de busca do sistema.

    email

    E-mail, com formatao e validao. O agente de usurio pode inclusive promover a integrao com sua agenda de contatos.

    url

    Um endereo web, tambm com formatao e validao.

    Datas e horas

    O campo de formulrio pode conter qualquer um desses valores no atributo type:

    datetime date month week time datetime-local

    Todos devem ser validados e formatados pelo agente de usurio, que pode inclusive mostrar um calendrio, um seletor de horrio ou outro auxlio ao preenchimento que estiver disponvel no sistema do usurio.

    O atributo adicional step define, para os validadores e auxlios ao preenchimento, a diferena mnima entre dois horrios. O valor de step em

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    38

    segundos, e o valor padro 60. Assim, se voc usar step="300" o usurio poder fornecer como horrios 7:00, 7:05 e 7:10, mas no 7:02 ou 7:08.

    number

    Veja um exemplo do tipo number com seus atributos opcionais:

    1 2 3 4 5 Number type 6 7 8 9 10 13 14 15 16 17

    O Opera 10 nos d uma excelente visualizao do que um agente de usurio pode fazer nesse caso:

    range

    Vamos modificar, no exemplo acima, apenas o valor de type, mudando de "number" para "range":

    1 2 3 4 5 Range type 6

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    39

    7 8 9 10 13 14 15 16 17

    color

    O campo com type="color" um seletor de cor. O agente de usurio pode mostrar um controle de seleo de cor ou outro auxlio que estiver disponvel. O valor ser uma cor no formato #ff6600.

    Tipos de dados e validadores

    Conforme voc deve ter percebido no ltimo captulo, o HTML5 avanou bastante nos recursos de formulrios, facilitando muito a vida de quem precisa desenvolver aplicaes web baseadas em formulrios. Neste captulo vamos avanar um pouco mais nesse assunto e, voc vai ver, a coisa vai ficar ainda melhor.

    autofocus

    Ao incluir em um campo de formulrio o atributo autofocus, assim:

    O foco ser colocado neste campo automaticamente ao carregar a pgina. Diferente das solues em Javascript, o foco estar no campo to logo ele seja criado, e no apenas ao final do carregamento da pgina. Isso evita o

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    40

    problema, muito comum quando voc muda o foco com Javascript, de o usurio j estar em outro campo, digitando, quando o foco mudado.

    Placeholder text

    Voc j deve ter visto um "placeholder". Tradicionalmente, vnhamos fazendo isso:

    2 3 4 5 Placeholder, the old style 6 7 8 9 11 12 13

    HTML5 nos permite fazer isso de maneira muito mais elegante:

    2 3 4 5 Placeholder, HTML5 way 6 7 8 9 10 11 12

    required

    Para tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:

    maxlength

    Voc j conhecia o atributo maxlength, que limita a quantidade de caracteres em um campo de formulrio. Uma grande lacuna dos formulrio HTML foi corrigida. Em HTML5, o elemento textarea tambm pode ter maxlength!

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    41

    Validao de formulrios

    Uma das tarefas mais enfadonhas de se fazer em Javascript validar formulrios. Infelizmente, tambm uma das mais comuns. HTML5 facilita muito nossa vida ao validar formulrios, tornando automtica boa parte do processo. Em muitos casos, todo ele. Voc j viu que pode tornar seus campos "espertos" com os novos valores para o atributo type, que j incluem validao para datas, emails, URLs e nmeros. Vamos um pouco alm.

    pattern

    O atributo pattern nos permite definir expresses regulares de validao, sem Javascript. Veja um exemplo de como validar CEP:

    2 3 4 5 O atributo pattern 6 7 8 9 10 11 CEP: 12 13 14 15 16 17 18 19 20

    novalidate e formnovalidate

    Podem haver situaes em que voc precisa que um formulrio no seja validado. Nestes casos, basta incluir no elemento form o atributo novalidate.

    Outra situao comum querer que o formulrio no seja validade dependendo da ao de submit. Nesse caso, voc pode usar no boto de submit o atributo formnovalidate. Veja um exemplo:

    2 3 4 5 Salvando rascunho 6 7 label{display:block;} 8 9 10 11

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    42

    12 13 14 nome: 15 email: 16 mensagem: 17 18 19 20 21 22 23

    Custom validators

    claro que as validaes padro, embora atendam a maioria dos casos, no so suficientes para todas as situaes. Muitas vezes voc vai querer escrever sua prpria funo de validao Javascript. H alguns detalhes na especificao do HTML5 que vo ajud-lo com isso:

    1. O novo evento oninput disparado quando algo modificado no valor de um campo de formulrio. Diferente de onchange, que disparado ao final da edio, oninput disparado ao editar. diferente tambm de onkeyup e onkeypress, porque vai capturar qualquer modificao no valor do campo, feita com mouse, teclado ou outra interface qualquer.

    2. O mtodo setCustomValidity pode ser invocado por voc. Ele recebe uma string. Se a string for vazia, o campo ser marcado como vlido. Caso contrrio, ser marcado como invlido.

    Com isso, voc pode inserir suas validaes no campo de formulrio e deixar o navegador fazer o resto. No mais preciso capturar o evento submit e trat-lo. Veja, por exemplo, este formulrio com validao de CPF:

    2 3 4 5 Custom validator 6 8 9 10 function vCPF(i){ 11 i.setCustomValidity(validaCPF(i.value)?'':'CPF invlido!') 12 } 13 14 15 16 17 18 CPF: 19 20 21

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    43

    22 23

    Montando um formulrio Agora com seu instrutor elabore um formulrio utilizando os conceitos e informaes passadas no captulo acima

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    44

    Captulo 6 Elementos Multimdia udio

    Para inserir udio em uma pgina web, basta usar o elemento :

    O valor de controls define se um controle de udio, com botes de play, pause, volume, barra de progresso, contador de tempo, etc. ser exibido na tela. Se for setado como "false", ser preciso controlar o player via javascript, com mtodos como play() e pause(). O valor de autoplay define se o udio vai comear a tocar assim que a pgina carregar.

    Origens alternativas de udio

    Todo agente de usurio deveria suportar o codec livre OggVorbis, mas, infelizmente, pode acontecer de seu arquivo oga no tocar no computador ou celular de algum. Quem sabe do seu chefe ou seu cliente. Ento preciso saber como oferecer um formato alternativo de udio:

    Claro, o agente de usurio pode ainda no saber tocar nenhum desses formatos, ou sequer ter suporte a udio. Para esses casos, oferea um contedo alternativo:

    Faa o download da msica.

    Vdeo

    O uso de vdeo muito semelhante ao de udio:

    E com vrios elementos source:

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    45

    Faa o download do vdeo.

    Codecs

    muito importante que voc inclua, nos seus elementos source de udio e vdeo, informao a respeito do container e codecs utilizados. Isso vai evitar que o navegador tenha que baixar, pelo menos parcialmente, o arquivo de mdia para, depois, descobrir que no consegue toc-lo. importante lembrar que a extenso do arquivo no informao relevante para isso, pelo contrrio, no significa nada. Uma URL pode no ter extenso de arquivo e pode levar a um redirecionamento.

    Para indicar ao navegador o container e codecs de determinado arquivo, usa-se o atributo type, no formato:

    type='MIME-type do container; codecs="codec de vdeo, codec de udio"'

    Por exemplo, um vdeo em Ogg, usando os codecs Theora e Vorbis, ter seu source assim:

    Com MPEG-4 a coisa um pouco mais complicada, por que preciso indicar ao navegador tambm o profile do codec de vdeo utilizado. Veja um exemplo:

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    46

    Captulo 7 Introduo ao SVG e Canvas API SVG

    O SVG uma linguagem XML que pode ser incorporada com facilidade em HTML5. Voc pode ler mais sobre SVG em http://www.w3.org/Graphics/SVG/. SVG uma linguagem para marcao de grficos vetoriais.

    Vejamos um exemplo bem simples:

    1 2 3 4 5 SVG 6 7 8 9 10 11 12 13 14 15 19 20 21 22 23 24 25 26

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    47

    Veja como renderizado no navegador:

    possvel fazer muito mais com SVG. A maioria dos editores de grficos vetoriais hoje exporta e importa automaticamente SVG, permitindo a um designer construir um grfico em seu editor vetorial predileto e export-lo diretamente. Em seguida, um programador pode construir javascript que manipula esse SVG, usando os mtodos do DOM. Com isso voc pode ter grficos dinmicos, com animao, escalveis e com excelente qualidade visual, programveis em Javascript, sem tecnologias proprietrias e plugins.

    O elemento canvas A Canvas API permite a voc desenhar na tela do navegador via Javascript. O nico elemento HTML existente para isso o elemento canvas, o resto todo feito via Javascript. Veja como inserir o elemento canvas numa pgina:

    Isso vai exibir um retngulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho, com Javascript:

    context=document.getElementById(x).getContext(2d) Agora que temos um contexto, podemos desenhar nele. Vamos comear com um simples retngulo:

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    48

    context.fillRect(10, 10, 50, 150) Simples, no? Que tal tentarmos algo um pouco mais complexo? D uma olhada no exemplo: 2 3 4 5 Canvas API 6 7 8 9 10 desenhar 11 12 13 function desenhar(){ 14 // Obtemos o contexto 15 context=document.getElementById('x').getContext('2d') 16 17 //Iniciamos um novo desenho 18 context.beginPath() 19 20 //Movemos a caneta para o inicio do desenho 21 context.moveTo(150,50) 22 23 //Desenhamos as linhas 24 context.lineTo(220,250) 25 context.lineTo(50,125) 26 context.lineTo(250,125) 27 context.lineTo(80,250) 28 context.lineTo(150,50) 29 30 //O desenho no de verdade enquanto voc 31 //no mandar o contexto pint-lo. 32 33 //Vamos pintar o interior de amarelo 34 context.fillStyle='#ff0' 35 context.fill() 36 37 //Vamos pintar as linhas de vermelho. 38 context.strokeStyle='#f00' 39 context.stroke() 40 41 } 42 43 44 45

  • CELULA TREINAMENTOS - HTML 5.0 e CSS 3 BSICO

    49

    Veja o que acontece quando se clica no boto:

    H muito mais para voc estudar se quiser se aprofundar na Canvas API. Apenas para que voc tenha uma idia, possvel desenhar texto, sombras, gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e transformar os objetos.

    Canvas x SVG Uma dvida muito comum quando usar Canvas, quando usar SVG. Para saber escolher, preciso entender as diferenas entre um e outro. SVG vetorial, e baseado em XML, logo, acessvel via DOM. Canvas desenhado pixel a pixel, via Javascript.

    Assim, as vantagens do SVG so:

    1. O contedo acessvel a leitores de tela 2. O grfico escalvel, no perde resoluo ou serrilha ao redimensionar 3. O contedo acessvel via DOM

    E as vantagens do Canvas:

    1. A performance muito superior ao SVG na maioria dos casos 2. fcil desenhar via Javascript. Em SVG, preciso fazer seu script

    escrever XML para voc. Com Canvas voc s manda desenhar, e pronto.