docFaculdade de Tecnologia Senac Goiás
download 
Denúncia Transcrição
Faculdade de Tecnologia Senac Goiás
Faculdade de Tecnologia Senac Goiás Jefson de Souza Alves AEC - Atividade Externa ao Componente Curricular HTML5 Goiânia 2016 Introdução ao HTML5 Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na versão 4. De lá pra cá, a W3C esteve focada em linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics - o uso de gráficos vetoriais em navegadores). Enquanto isso, desenvolvedores de navegadores estiveram preocupados em melhorar as funcionalidades destes, como exibir páginas em abas e oferecer integração com leitores de RSS. Recentemente, no entanto, organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar novos e interessantes recursos. Neste artigo, veremos algumas novidades que o HTML5 traz. Para quem está se familiarizando agora com o HTML, sem preocupações: os elementos tradicionais continuam os mesmos, já que o HTML5 foi planejado considerando também compatibilidade com estas funcionalidades. Novos elementos Vários novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento <div> com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são: Elementos de estrutura <header> - cabeçalho da página ou de uma seção (não confundir com a tag <head>); <section> - cada seção do conteúdo; <article> - um item do conteúdo dentro da página ou da seção; <footer> - o rodapé da página ou de uma seção; <nav> - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página; <aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo). Elementos de conteúdo <figure> - usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe: <figure id="figura01"> <legend>Figura 1. Esquema de uma página em HTML5</legend> <img src="html5.png" border="0" width="200" height="300" alt="Estrutura de uma página escrita com os novos elementos do HTML5" /> </figure> <canvas> - por meio de uma API gráfica, renderiza imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc; <audio> e <video> - usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens: <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> <video src="video.mov" width="400" height="360" /> <dialog> - junto com as tags <dt> e <dd> criado para formatar um diálogo: <dialog> <dt> Michael, you never told me your family knew Johnny Fontane! <dd> Oh sure, you want to meet him? <dt> Yeah! <dd> You know, my father helped Johnny in his career. <dt> Really? How? <dd> ...Let's listen to this song. </dialog> <time> - representa data e/ou hora; <meter> - utilizado para representar medidas, que podem ser de distância, de armazenagem em disco, etc. Elementos retirados do HTML5 Alguns elementos não existirão mais no HTML5. Alguns foram retirados porque sua função é puramente visual e devem ser substituídos por uma declaração no CSS (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a acessibilidade do site: <frame>, <frameset> e <noframes>. Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em>, respectivamente. Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são: • target no elemento <a>; • align nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros; • background em <body>; • bgcolor nos elementos de tabela e no <body>; • border em <table> e <object>; • • • • • cellpadding e cellspacing em <table>; height em <td> e <th>; width nos elementos <hr>, <table>, <td>, <th> e <pre>; hspace e vspace em <img> e <object>; noshade e size em <hr>. Doctype Com o HTML5 usaremos apenas uma declaração doctype: <!DOCTYPE html> Além de única, ela é curta e fácil de lembrar - hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML. Transição do XHTML A semelhança entre o HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos deixarão o processo mais simples. A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como <img> e <input> fossem "fechados": <input type="text" id="nome"> Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita: <input type="text" id="nome" /> Curiosidade: Logotipo do HTML5 Em janeiro de 2011 o HTML5 ganhou um logotipo, junto com símbolos gráficos que mostram para o visitante quais recursos estão sendo utilizados naquele site, como CSS3 e multimídia. Segundo o site oficial da W3C, o logotipo é "forte e confiável, universal como a linguagem de marcação que você escreve". Vantagens da linguagem -Torna a internet mais rápida: desenvolvedores vem usando HTML5 para reduzir o tamanho de arquivos e tornar a experiência do usuário mais limpa; -HTML5 tem Canvas que é uma poderosa ferramenta para a criação de conteúdo gráfico. Com Canvas é mais fácil criar animações, desenhos e outros elementos visuais complexos sem usar aplicativos externos; -Cada vez mais navegadores dão suporte ao HTML5. Quer saber se o seu navegador é compativel com HTML5? Vá para html5test.com e verifique, caso não seja, é melhor atualizar a versão de seu navegador; -Um dos grandes diferenciais do HTML5 é sua capacidade de vídeo; Desenvolvedores podem integrar vídeos e HTML5 sem a necessidade de plugins. E como temos cada vez mais navegadores que são compatíveis ao HTML5, vemos um rápido crescimento na porcentagem de vídeos online; -O mesmo acontece com sons. HTML5 vem com uma ferramenta de suporte poderosa para elementos de audio; -HTML5 está disponível em diversas plataformas e sua performance é ótima em PC's, dispositivos móveis e tablets; -É importante mencionar que o HTML5 ainda está em desenvolvimento e aos poucos passará por mudanças. Devido a suas capacidades tão impressionantes e alto padrão, podemos dizer com alguma segurança que qualquer coisa envolvendo HTML5 terá um grande impacto na internet; Desvantagens da Linguagem - Não está pronto; - A parte de som está mal especificada; - Não há consenso entre os formatos suportados na tag video; - Implementação rudimentar por parte do IE (a MS só implementa o que é exclusivamente dentro do padrão); - Performance diferente nos diversos browsers (uma função/estrutura rápida num, pode ser lenta em outro); - Falta de ferramentas de autoria (editores, bibliotecas, etc); - De maneira geral, performance pior que a do flash. Tipos de aplicações que possuem a linguagem HTML5 como base O principal ponto de debate nesta área envolve linguagens nativas e HTML5, já que a base de programação de uma app poderá ser inteiramente suportada pela linguagem nativa do dispositivo (Android, iOS e Windows Phone possuem linguagens nativas diferentes entre si) ou por HTML5, linguagem transversal a todos os dispositivos móveis quando disponibilizada num browser. Esta última opção denomina-se web app pois tal como um website engloba de forma generalizada HTML5, apoiado por CSS e JavaScript. Há ainda a possibilidade de fazer uso das duas opções na mesma aplicação, ou seja, criar aplicações híbridas (hybrid apps). Optar pelo HTML5 no desenvolvimento deste tipo de aplicações é uma escolha que se pode definir como "eclética". É uma linguagem considerada "multiplataforma" e certifica que a app será carregada em qualquer dispositivo que tenha um browser ou uma aplicação que interprete HTML. Evita-se assim a criação de raiz da mesma app cada vez que for necessário distribuí-la num sistema operativo diferente, reduzindo substancialmente o tempo e respetivo custo de desenvolvimento. Elementos Semânticos Em todas as páginas da Web existem divisões básicas referentes aos tipos de conteúdo que são colocados em cada parte do layout, como cabeçalho, rodapé ou menu de navegação. Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class. No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisão da página, organizando e padronizando o desenvolvimento. Cabeçalho com o elemento <header> O novo elemento <header> do HTML5 é usado para definir o cabeçalho de uma página ou sessão, e pode conter logo, títulos, menu de navegação, campo de busca, etc. <header> <img alt="logo" src="/img/logo.png"> <h1>Entendo a estrutura e semântica do HTML5</h1> <form action="www.enderecodosite.com.br/search" id="searchform" method="get"> <label for="s">Pesquisa</label> <input type="text" placeholder="Pesquisa" id="s"> <input type="submit" value="Pesquisa" class="submit"> </form> </header> Dentro do <header> podemos também inserir o elemento <hgroup>, que serve para agrupar dois ou mais elementos de títulos (h1 até h6), organizando-os hierarquicamente. O elemento <hgroup> foi descontinuado e não deve mais ser usado. Exemplo: site http://destroyafteruse.com/ utiliza a marcação <header> em seu cabeçalho, como podemos ver (de forma simplificada) logo abaixo. <header> <h1><a href="http://destroyafteruse.com/">Agent</a></h1> <p id="site-description">Disruptive Innovation & Strategic Product Design</p> <div id="logo"><a href="http://destroyafteruse.com/"><img src="logo.gif"></a></div> <p class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></p> <nav> <ul> <li><a href="http://destroyafteruse.com/category/news">News</a></li> <li><a href="http://destroyafteruse.com/about-agent">ABOUT AGENT</a></li> <li><a href="http://destroyafteruse.com/category/missions">Top Missions</a></li> <li><a href="http://destroyafteruse.com/the-way-of-the-agent">THE AGENT WAY</a></li> <li><a href="http://destroyafteruse.com/business-units">Business Units</a></li> <li><a href="http://destroyafteruse.com/services">SERVICES</a></li> <li><a href="http://destroyafteruse.com/our-process">Our Process</a></li> <li><a href="http://destroyafteruse.com/category/the-agents">The Agents</a></li> <li><a href="http://destroyafteruse.com/category/press">Press</a></li> <li><a href="http://destroyafteruse.com/jobs">JOBS</a></li> <li><a href="http://destroyafteruse.com/meeting-point">Meeting point</a></li> </ul> </nav> </header> Navegação Global com o elemento <nav> O novo elemento <nav> do HTML5 serve para agrupar uma lista de links para outras partes do site, seja essa lista de navegação local ou global. Esses blocos de links podem estar em diferentes partes do layout, como no cabeçalho ou no rodapé. <nav> <ul class="menu"> <li><a href="inicio.html">Início</a></li> <li><a href="quem-somos.html">Quem somos</a></li> <li><a href="servicos.html">Serviços</a></li> <li><a href="contato.html">Contato</a></li> </ul> </nav> Exemplo: site do navegador Safari, da Apple (http://www.apple.com/br/safari/), utiliza a marcação <nav> em seu menu, como podemos ver (de forma simplificada) abaixo. <nav> <ul role="navigation" id="globalnav"> <li><a href="/br/"><span>Apple</span></a></li> <li><a href="http://store.apple.com/br/"><span>Store</span></a></li> <li><a href="/br/mac/"><span>Mac</span></a></li> <li><a href="/br/ipod/"><span>iPod</span></a></li> <li><a href="/br/iphone/"><span>iPhone</span></a></li> <li><a href="/br/ipad/"><span>iPad</span></a></li> <li><a href="/br/itunes/"><span>iTunes</span></a></li> <li><a href="/br/support/"><span>Suporte</span></a></li> </ul> <div id="globalsearch"> <form method="get" action="http://www.apple.com/br/search/"> <label for="sp-searchtext">Buscar</label> <input type="text" id="sp-searchtext"> </form> </div> </nav> Diferentes sessões com o elemento <section> O novo elemento <section> do HTML5 é o menos especifico entre as novas tags. A diferença do <section> para um <div> é que o primeiro serve para dividir o conteúdo em diferentes sessões, que podem conter elementos como <header> ou <article>, enquanto o segundo divide qualquer conteúdo, sem uma finalidade específica. <section> <article> (...) </article> </section> Exemplo: site do Nike Better World utilizava a marcação <section> para dividir duas diferentes sessões, como podemos ver (de forma simplificada) logo abaixo. <section data-controller="StoryPhilosophy" data-nav="Philosophy"> <article> (...) </article><!--article--> </section><!--story--> <section data-controller="StoryBeach" data-nav="Board Short"> <article> (...) </article><!--article--> </section><!--story--> <section data-controller="StoryHyperdunk" data-nav="Hyperdunk"> <article> (...) </article><!--article--> </section><!--story--> <section data-controller="StoryLegendpant" data-nav="Nike Legend Pant"> <article> (...) </article><!--article--> </section><!--story--> <section data-controller="StoryArchive" data-nav="View More Stories"> <div class="view-archive"> <h1>THERE'S MORE BETTER HERE.</h1> <p><a href="/about">Click</a> to learn more about how we're leveling the playing field, and protecting it too.</p> <div class="swoosh"><img src="lib/img/logo_end.png" /></div> </div> </section><!--story--> O conteúdo central com o elemento <article> O novo elemento <article> do HTML5 serve para identificar um conteúdo independente e de maior relevância dentro da página, que pode ser distribuido via feed, como um post, artigo ou bloco de comentários. O elemento <article> pode conter outros elementos como <header> ou <footer>. <article> <header> <h1>Entendendo o elemento Article</h1> <p>Publicado em <time pubdate datetime="2011-09-01">01 de Setembro de 2011</time></p> </header> ...conteúdo... <footer> <small>© Todos os direitos reservados.</small> </footer> </article> Exemplo: site Gaga Debki (http://gaga-debki.pl/) utiliza a marcação <article> para especificar o conteúdo de maior relevância dentro do site, como podemos ver (de forma simplificada) logo abaixo. <article> <h2>Ośrodek domków holenderskich</h2> <p>Ośrodek domków holenderskich <strong>GAGA • Dębki</strong> znajduje się w spokojnej części Dębek w odległości <strong>400m od centrum Dębek i 900m od jednej z najpiękniejszych plaż w Polsce.</strong></p> <p>Posiadamy na wynajem 4 holenderskie domki letniskowe. Oferowane przez nas domki są w pełni wyposażone w następujące przedmioty:</p> <ul> <li>aneks kuchenny z lodówką, kuchenką z piekarnikiem oraz ekspresem do kawy,</li> <li>łazienkę z umywalką i prysznicem oraz WC,</li> <li>indywidualny alarm,</li> </ul> <p>Nasze domki letniskowe posiadają dwie sypialnie, jedna z łóżkiem małżeńskim, druga z dwoma pojedynczymi łóżkami wraz z pościelą. Istnieje także możliwość rozłożenia łóżka i spania w salonie.</p> <p><em>Doba rozpoczyna się o godzinie 14-ej, a kończy się o godzinie 11-ej.</em></p> </article> Conteúdos relacionados com o elemento <aside> O novo elemento <aside> do HTML5 serve para mostrar conteúdos que fazem referência ao conteúdo principal à sua volta, como informações, blocos de navegação ou até mesmo publicidade. Vejamos o exemplo abaixo: <div id="main"> <div id="primary"> <article> <header> <h1>Entendendo o elemento Aside</h1> <p>Publicado em <time pubdate datetime="2011-09-01">01 de Setembro de 2011</time></p> </header> (...) <aside> <h2>Curiosidades sobre o Aside</h2> (...) </aside> <footer> <p>Esse post foi publicado na categoria <a href="#" title="HTML5">HTML5</a> </footer> </article> </div> <div id="secondary"> <aside> <h3>Arquivos</h3> <ul> <li><a href="#" title="agosto 2011">agosto 2011 <li><a href="#" title="julho 2011">julho 2011</a></li> <li><a href="#" title="junho 2011">junho 2011</a></li> <li><a href="#" title="maio 2011">maio 2011</a></li> <li><a href="#" title="abril 2011">abril 2011</a></li> </ul> </aside> </div> </div> Aqui temos duas situações onde o <aside> é empregado. No primeiro caso ele está dentro de um elemento <article>, e por isso podemos entender que ele traz conteúdos relacionados ao post ou artigo em questão. No segundo caso o <aside> está fora do <article>, fazendo parte da barra lateral do site, trazendo links de navegação que tem relação com a página como um todo. Exemplo: site Tableless (http://tableless.com.br/) utiliza a marcação <aside> para especificar os conteúdos relacionados dentro de suas páginas, como podemos ver (de forma simplificada) logo abaixo. <aside class="lateral"> (...) <h3 class="widget-title">Posts Relacionados</h3> <ul class="related_post"> <li><a title="Dicas de sobrevivência em uma era pós o IE6" href="#">Dicas de sobrevivência em uma era pós o IE6</a></li> <li><a title="Drops 7 ? Você está fazendo errado" href="#">Drops 7 ? Você está fazendo errado</a></li> <li><a title="Usando Meta Box em seu tema WordPress" href="#">Usando Meta Box em seu tema WordPress</a></li> <li><a title="Introdução aos padrões de codificação" href="#">Introdução aos padrões de codificação</a></li> <li><a title="Biblioteca CSS ou Framework?" href="#">Biblioteca CSS ou Framework?</a></li> </ul> (...) </aside> Rodapé com o elemento <footer> O novo elemento <footer> do HTML5 representa o rodapé de um documento ou de uma sessão específica do mesmo, podendo conter informações relacionadas ao autor e ao copyright, blocos de navegação ou links relacionados. <body> <div id="page"> <article> <header> <h1>Entendendo o elemento Footer</h1> <p>Publicado em <time pubdate datetime="2011-09-01">01 de setembro de 2011</time></p> </header> (...) <footer> <p>Publicado na categoria <a href="#" title="HTML5">HTML5</a></p> </footer> </article> <footer> <nav> <ul> <li><a href="inicio.html">Início</a></li> <li><a href="quem-somos.html">Quem somos</a></li> <li><a href="servicos.html">Serviços</a></li> <li><a href="contato.html">Contato</a></li> </ul> </nav> <small>Copyright © 2011 - Todos os direitos reservados</small> </footer> </div> </body> No exemplo acima vemos o <footer> sendo empregado em duas situações: no primeiro caso ele está contido dentro do elemento <article>, representando o rodapé do post ou artigo em questão, e no segundo caso está ao final do código, representando o rodapé da página. Exemplo: site HTML5 Boilerplate(http://html5boilerplate.com/) utiliza a marcação <footer> para delimitar a sua área de rodapé, como podemos ver (de forma simplificada) logo abaixo. <footer> <h3>Brought to you by</h3> <p> <a href="#"><img src="img/paul-irish.png">Paul Irish <br><i>Google Chrome, jQuery</i></a> <a href="#"><img src="img/divya-manian.png">Divya Manian <br><i>Open Web Vigilante</i></a> <a href="#"><img src="img/shichuan.png">Shichuan <br><i>Open Web Developer</i></a> <a href="#"><img src="img/mathias-bynens.png">Mathias Bynens <br><i>Freelance web developer</i></a> <a href="#"><img src="img/nicolas-gallagher.png">Nicolas Gallagher <br> <i>Front-End Web Developer</i></a> </p> <ul> <li><a href="#">Mickael Daniel</a></li> <li><a href="#">Jonathan Verrecchia</a></li> <li><a href="#">Rob Larsen</a></li> <li><a href="#">Mike West</a></li> <li><a href="#">More Contributors</a></li> </ul> <p>It would not have been possible without the efforts of these superheroes:</p> <ul> <li><a href="#">Stoyan Stefanov</a></li> <li><a href="#">Patrick H Lauke</a></li> <li><a href="#">Faruk Ate?</a></li> <li><a href="#">Remy Sharp</a></li> <li><a href="#">Adam McIntyre</a></li> <li><a href="#">Thierry Koblentz</a></li> <li><a href="#">Mike Taylor</a></li> <li><a href="#">Jonathan Neal</a></li> <li><a href="#">Kroc Camen</a></li> <li><a href="#">Ethan Dunham</a></li> <li><a href="#">Peter Beverloo</a></li> <li><a href="#">Viget</a></li> <li><a href="#">Steve Souders</a></li> <li><a href="#">Isobar Creative Technology team</a></li> </ul> </footer>
