Guia HTML

Primeiros passos no HTML5, JavaScript e CSS3

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (10)  (0)

Este artigo apresentará alguns dos novos recursos trazidos pelas tecnologias HTML5, JavaScript e CSS 3. Dentre os recursos abordados estão: novos campos de dados, validação de formulário, armazenamento de dados com JavaScript.

Do que se trata o artigo:

Este artigo apresentará alguns dos novos recursos trazidos pelas tecnologias HTML5, JavaScript e CSS 3. Dentre os recursos abordados estão: novos campos de dados, validação de formulário, armazenamento de dados com JavaScript, efeitos de texto e bordas redondas com CSS 3.

Em que situação o tema é útil:

Este tema é útil a todos os desenvolvedores que desejam conhecer melhor as novidades das tecnologias client-side que vão revolucionar a maneira de desenvolver aplicações atraentes e interativas para a web.

Resumo DevMan:

Este artigo introduzirá os novos recursos das tecnologias HTML, JavaScript e CSS sendo estudados numa abordagem prática. O objetivo das novas versões das tecnologias tratadas é facilitar a compreensão e manutenção do código, dar suporte a conteúdos que anteriormente só eram apresentados com plug-ins adicionais (vídeos, por exemplo) e auxiliar o desenvolvimento web baseado em padrões compatíveis com todos os tipos de dispositivos.

Através dos anos a internet passou por inúmeras mudanças. Os primeiros web sites que surgiram continham apenas conteúdo estático, ou seja, eram constituídos por páginas HTML expondo somente textos, imagens e links (sem muita interação com o usuário).

A necessidade de mais dinamismo nas páginas web culminou na criação do JavaScript, que chegou ao mercado em 1996. Com esta tecnologia foi possível mais interação nas páginas, uma vez que o JavaScript possui recursos como manipulação de conteúdos, elementos e eventos HTML.

Também em 1996 surgiu a primeira versão do CSS, uma linguagem de estilo utilizada para definir a apresentação de documentos HTML e XML. Seu principal benefício é separar a aparência do conteúdo de um documento. Assim, ao invés da formatação ficar dentro do documento HTML, neste haverá apenas uma ligação para o arquivo CSS, que contém os estilos. Deste modo, várias páginas podem utilizar o mesmo arquivo de formatação, e quando o programador quiser alterar a aparência do site, é necessário modificar apenas um arquivo.

Apesar dos vários recursos e funcionalidades do JavaScript e pelo CSS, ainda havia algumas deficiências. Por exemplo, devido às limitações das primeiras versões do HTML, não existia o suporte à apresentação de vídeos, e criar aplicações visualmente ricas ainda não era possível. Para suprir tais deficiências, comumente se faz uso de plug-ins como o Adobe Flash. Porém, com o intuito de não depender de plug-ins externos para tais tarefas, facilitar a manutenção e compreensão, e auxiliar o desenvolvimento web baseado em padrões compatíveis com todos os dispositivos, surgiu o HTML5 e o CSS 3.

O HTML5 inclui novas tags que fornecem suporte a arquivos de vídeo e áudio, novos tipos de campos de dados, validação de formulários e outros recursos que veremos no decorrer do artigo. Também há novidades em sua API JavaScript, dentre elas, a possibilidade de salvar dados no computador do usuário de forma mais segura e rápida do que usando cookies. Já o CSS 3 possui uma série de recursos visuais para incrementar a aparência de suas aplicações.

Apesar do HTML5 e do CSS 3 ainda estarem em desenvolvimento, as versões recentes dos navegadores mais populares já incorporam muitas das novas funcionalidades. Para testar o suporte de seu navegador, você pode acessar o site: http://html5test.com.

Com a finalidade de demonstrar um pouco dessas novidades, no decorrer deste artigo serão abordados recursos do HTML5, JavaScript e CSS 3. Para isso, o conteúdo foi dividido quatro seções: a primeira seção trata de HTML5 e JavaScript, a segunda aborda CSS 3, a terceira demonstra como configurar o ambiente de desenvolvimento para uma aplicação Java para web e, a última seção apresenta o HTML5 integrado em um sistema web Java.

As tecnologias client-side

Como este artigo é focado nas tecnologias utilizadas no desenvolvimento web do lado cliente (parte da aplicação que roda no navegador), é importante conhecer melhor o papel de cada uma para um melhor entendimento dos assuntos tratados nas próximas seções.

Essas tecnologias se dividem em:

· Marcação: trata-se da linguagem de marcação HTML, responsável por definir o que representa cada conteúdo em uma página e criar as ligações (links) para outros conteúdos;

· Apresentação: refere-se à tecnologia CSS, que é uma linguagem de estilo utilizada para definir a aparência de documentos escritos em HTML. Como já mencionado, seu principal benefício é prover a separação entre o formato visual e o conteúdo de um documento;

· Comportamento: trata-se do JavaScript, utilizado para trazer mais dinamismo às páginas web através de recursos como controle de eventos, manipulação de elementos DOM e seus conteúdos, entre outras funcionalidades.

Novidades do HTML5 e de sua API JavaScript

O HTML5 vem para revolucionar a maneira de se programar para web, com novos recursos que antes só eram disponíveis utilizando outras tecnologias. Sua finalidade é trazer suporte para os mais recentes tipos de multimídia e mantendo uma sintaxe legível, consistente e também bem compreendida por computadores e outros dispositivos.

Para testar cada exemplo apresentado nesta primeira seção, foi usado o navegador Google Chrome, que possui muitos dos novos recursos HTML já implementados.

Se você optar por não utilizar o Google Chrome para rodar os exemplos, ou utilizar navegadores em versões mais antigas, poderá não obter um correto funcionamento dos códigos apresentados.

Novas tags para estruturação de documentos

Novos elementos para estruturação do conteúdo da página foram introduzidos no HTML5. Estes elementos foram criados para representar semanticamente o conteúdo da página, ou seja, dividir melhor o conteúdo da página (cabeçalho, rodapé, menu principal) de acordo com sua finalidade e também facilitar a interpretação da página pelos mais variados tipos de navegadores e parsers. Observe um exemplo de uso dessas novas tags na Listagem 1.

Listagem 1. Código com novas tags HTML para estruturação.

<html>
     <head>
        <title>Novas tags de estrutura em HTML5</title>
     </head>
     <body>
        <header>
            <h1>Titulo do site</h1>
        </header>
        <nav>
            <ul>
              <li><a href="#">Inicial</a></li>
              <li><a href="#">Quem somos</a></li>
              <li><a href="#">Contato</a></li>                    
            </ul>
        </nav>
        <section id="example">
            <header>
              <h2>Titulo do artigo</h2>
            </header> 
            <article>
               <p>Um conteudo qualquer.</p>
             </article>
            <footer>
              <p>Por Luis</p>
            </footer>
        </section>
        <aside> </aside>
        <footer>
            <p>Todos os direitos reservados.</p>
        </footer>
     </body> 
  </html> 
"

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?