18
CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA FACULDADE DE TECNOLOGIA DE INDAIATUBA CURSO DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS DANILO SOUZA FABIANO FAVARÃO SAMARA KAVAMOTO HTML5 INDAIATUBA 2014

Seminario HTML 5

Embed Size (px)

DESCRIPTION

Documentação da pesquisa realizada para a disciplina de Programação Web da Faculdade de Tecnologia de Indaiatuba sobre o padrão HTML 5

Citation preview

Page 1: Seminario HTML 5

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA FACULDADE DE TECNOLOGIA DE INDAIATUBA

CURSO DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS !!!!!!!!

DANILO SOUZA FABIANO FAVARÃO

SAMARA KAVAMOTO !!!!!!HTML5

INDAIATUBA 2014

Page 2: Seminario HTML 5

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA FACULDADE DE TECNOLOGIA DE INDAIATUBA

CURSO DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS !!!!!!!!

DANILO SOUZA FABIANO FAVARÃO

SAMARA KAVAMOTO ! !!!!HTML5 !!! !

Seminário sobre a tecnologia HTML5 apresentado por Danilo Souza, Fabiano Favarão e Samara Kavamoto como atividade proposta pela Prof.ª M.ª Janaine Cristiane de Souza Arantes, regente na matéria de Programação Web.

INDAIATUBA 2014

Page 3: Seminario HTML 5

RESUMO !Este trabalho tem como objetivo apresentar a tecnologia HTLM5, alguns de seus componentes e atributos, e a partir disso, incentivar o uso e o estudo da tecnologia para o desenvolvimento web e de aplicativos. !Palavras chave: html 5; tecnologia; desenvolvimento; programação; site; ferramentas; web. !

Page 4: Seminario HTML 5

História do HTML !A linguagem HTML – Hyper Text Markup Language (Linguagem de marcação de hipertexto) foi criada por Tim Berners-Lee em 1980.A primeira versão do HTML foi baseada na linguagem SGML utilizado para estruturação de documentos, da qual herdou diversas tags, tais como: título <h1> ao <h6>, cabeçalho <head> e parágrafo <p>. !Desde sua criação a lingaugem vem sofrendo várias alterações. Seu sucessor foi o HTML 2.0 .Essa versão poderia ser vista apenas como correção da versão anterior, ou seja apenas formalizava as características do HTML que já estava em uso. Em seguida o HMTL 3.0 implementou características tais como tabelas, applets e texto flutuante ao redor de imagens. !Em dezembro de 1997 oHTML 4.0 foi publicado trazendo como principal premissa a compatibilidade com as suas versões anteriores através de 3 implementações: Scrict (estrita) – implementação na qual fica proibida a utilização de elementos obsoletos da linguagem; !Transitional (transitória) – implementação na qual os elementos obsoletos são permitidos; Frameset – implementação direcionada para site que usam frames. !Durante a evolução da linguagem, em agosto de 1994 foi fundada a W3C - World Wide Web Consortium. ,com o objetivo de definir padrões para as respectivas áreas relacionadas àWeb. AW3C reformulou o grupo responsável pelo HTML para criar uma “suíte de tags XML”. O primeiro passo foi dado em dezembro de 1998 quando o grupo reescreveu o HTML em XMLsem adicionar elementos ou atributos novos. Essa especificação foi chamada de XHTML 1. !Surgiu também o WHATWG - grupo de trabalho tecnológico de aplicações de hipertexto para Web. Trata-se de um grupo livre, não oficial e de colaboração dos desenvolvedores de navegadores e de seus interessados. O WHATWG desenvolve especificações baseadas no HTML e em tecnologias relacionadas para facilitar o desenvolvimento e compatibilidade das aplicações web, com a intenção de submeter os resultados para um padrão organizacional. !Em outubro de 2006, Tim Berners-Lee,anunciou que a W3C deveria trabalhar em conjunto com aWHATWG. O primeiro passo do trabalho em conjunto foi renomear o “Web Application 1.0” para “HTML5.   !Sobre o HMTL 5 – Quais suas Principais Mudanças? !O HTML5 é a nova versão do HTML4.Um dos seus principais objetivos é facilitar a manipulação dos elementos, possibilitando o desenvolvedor modificar as características dos objetos de forma não intrusiva, fazendo com que isso fique transparente para o usuário final. Diferente das versões anteriores, o HTML5 fornece ferramentas para o CSS e o Javascript fazerem seu trabalho da melhor maneira possível de forma que um web site ou aplicação continue leve e funcional. !

Page 5: Seminario HTML 5

Algumas tags foram modificadas, outras criadas e algumas descontinuadas. As versões anteriores do HTML não eram padronizadas para criação de seções comuns e específicas como rodapé, cabeçalho, slidebar, menus etc. Houve também modificações na forma em que escrevemos o código e organizamos a página. Ela passou a ser mais semântica com menos códigos, aumentando a interatividade sem a necessidade de instalação de plug-ins, que em alguns casos, causa perda de performance. É um código interpolável, ou seja, pronto para futuros dispositivos, facilitando a reutilização da informação de diversas maneiras. !!Estrutura básica !A estrutura básica do HTML5 foi mantida, sofrendo uma pequena alteração no DOCTYPE. Abaixo podemos ver no exemplo: !Listagem 1: Estrutura básica !

<!DOCTYPE HTML> <html lang=”pt-br”> <head> <meta charset=”UTF-8”> <title></title> </head> <body> </body> </html> !!

O DOCTYPE !Listagem 2: DOCTYPE !<!DOCTYPE HTML> !Embora o DOCTYPE não seja uma tag HTML, ela deve ser a primeira linha antes do código, pois se tratar de uma instrução que indica ao navegador ou outro meio qual a versão de marcação o código foi escrito. !Em versões anteriores, era necessário referenciar o DTD (Document Type Definition) diretamente no código DOCTYPE. Com o HTML5, essa referência fica por responsabilidade do próprio navegador. !!!

Page 6: Seminario HTML 5

Novos elementos do HTML5 !Novos elementos semânticos Um elemento semântico descreve o seu significado tanto para o navegador como para o desenvolvedor. Exemplos de elementos não-semanticos : <div> and <span> - Não corresponde a nada sobre o seu conteudo. Exemplos de elementos semanticos: <form>, <table>, and <img> - Claramente informa sobre seu conteúdo. Muitos dos sites hoje possuem seu codigo HTML estruturado assim: <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer. HTML5 oferece novos elementos semânticos para claramente definir as diferentes partes da estrutura de uma pagina. A tabela a seguir apresenta os novos elementos estruturais do HTML5

Elementos Estruturais HTML5

TAG DESCRIÇÃO

<article> Representa um pedaço independente do conteúdo de um documento, como um texto, notícias, blog, fórum

<aside> Representa uma parte de conteúdo relacionado com a página

<command> Um botão, um radiobutton ou checkbox

<details> Descreve detalhes de um documento ou partes

<dialog> Define uma caixa de dialogo ou janela

<summary> Um caption ou sumário, dentro da tag <details>

<figure> Pode ser usado para associar uma legenda, como de um gráfico ou de vídeo

<figcaption> Legenda da figura de seção

<footer> Usado para indicação de um rodapé de documento ou seção, podendo incluir: data, autor, contatos e direitos autorais.

<header> Usado para introduzir um documento ou seção. Pode incluir o elemento <nav>

<hgroup> Usado em uma seção de títulos, usando <h1> para <h6>, onde o maior é o título principal da seção, e os outros são sub-títulos

<mark> Destacar um texto

<meter> Medição. Usado somente quando há valor máximo e mínimo conhecido

<nav> Usado para uma seção de navegação (menu)

<progress> Progresso de uma tarefa.

<ruby> Anotações em Ruby

<rt> Explicação da anotação em Ruby

<rp> Para ser exibido em navegadores que não suportam Ruby

Page 7: Seminario HTML 5

Os elementos estruturais facilitam muito a construção da estrutura da página. A maioria das páginas possuem partes comuns como: cabeçalho, colunas, rodapés. Toda esta formatação era feita utilizando div, sendo que cada classe possui o nome da parte da interface.

!O uso de div é necessário porque o HTML4 não é semântico no que se refere a estrutura. Sendo assim o HTML5 cobre muito bem esta questão na introdução dos novos elementos, para representar cada uma das partes.

<section> Seção de um documento, como capítulos, cabeçalhos, rodapés ou outras seções do documento

<time> Definição de tempo ou data

<wbr> Quebra de palavra. Para definir uma possivel quebra de linha

Page 8: Seminario HTML 5

!O código do exemplo acima seria escrito da seguinte forma:

!<body>

<header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>

Page 9: Seminario HTML 5

Novos tipos de entradas HTML5 possui diversos novos controles de entrada para formulários. Essas novas entradas permitem melhor controle e validação.

Os novos tipos de entradas são: color; date; datetime; datetime-local; email; month; number; range; search; tel; time; url; week.

!Exemplo Color !

<!DOCTYPE html> <html> <body> <form action="demo_form.asp"> Select your favorite color: <input type="color" name="favcolor"><br> <input type="submit"> </form>

</body> </html>

!Exemplo Date

!<!DOCTYPE html> <html> <body> !<form action="demo_form.asp"> Birthday: <input type="date" name="bday"> <input type="submit"> </form> !</body> </html>

!Nem todos os navegadores suportam todos os novos tipos de entradas. Entretanto, é possível utiliza-los normalmente; Se eles não forem suportados, se comportaram como campos de textos comuns.

!Tag Descrição

<input> Define um controle de entrada

Page 10: Seminario HTML 5

Novos elementos de formulario HTML5 possui os seguinte novos elementos de formularios: <datalist> <keygen> <output>

!

!Novos atributos para formulários e entradas !HTML5 possui vários novos atributos para formulários e entradas (<form> and <input>). !Novos atributos para <form>: autocomplete e novalidate; !Novos atributos para <input>: autocomplete, autofocos, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required e step. !!Acesso ao dispositivo !API Geolocalização !A API de geolocalização é usada para obter a posição geográfica do usuario. Como esse recurso pode comprometer a privacidade do usuario, a posição não está disponível a menos que seja aprovada seu uso. Drag and Drop Arrastar e soltar é um recurso muito comum e agora é um padrão no HTML 5 e qualquer elemento pode ser tornar “arrastado” basta definir seu atributo draggable como true. !Web Storage !No HTML5, paginas da web podem guardar dados localmente no navegador do usuario. Antigamente era utilizado cookies porém com Web Storage é muito mais rapido e seguro. Os dados não estão incluidos em cada requisição do servidor, somente quando for necessario. O que torna possível o armazenamento de arquivos maiores sem afetar a perfomace do site. Existem vários motivos para utilizar armazenamento. Um deles é o aplicativo funcionar quando o usuário estiver off-line, voltando a sincronizar os dados assim que a rede estiver conectada novamente. !Outro ponto positivo é um modelo mais simples de programação, pois passa a depender menos da infra-estrutura do servidores. Um ponto negativo são os dados ficarem mais vulneráveis e o usuário não pode acessá-los de qualquer lugar. É importante só utilizar este armazenamento para dados que não são críticos.

Tag Description

<datalist> Especifica uma lista de opções pre-definidas par ao input

<keygen> Especifica um campo para geração de pair-key no formulario

<output> Representa o resultado de um calculo

Page 11: Seminario HTML 5

!Conectividade !Conectividade está mais eficiente no HTML 5 através Web sockets e Eventos permitem maior interação entre cliente e servidor. Chats em tempo real, jogos e aplicações mais velozes são alguns exemplos que se beneficiam dessas melhorias. !Web Worker Quando são executados scripts em uma pagina, a pagina fica sem responder até que o script seja finalizado. Um web worker é um JavaScript que roda em plano de fundo, independente de outros scrips, sem afetar a performance da pagina. Com isso, é possível continuar a fazer qualquer coisa que queira: clicar, selecionar, etc., enquanto o web worker trabalha em plano de fundo. !Server-Sent Events Um server-sent event é quando uma pagina automaticamente recebe atualizações do servidor. O que já era possible antes, porem a pagina precisava requisitar se havia alguma atualização disponivel. Com o server-sent events, as atualizações ocorrem automaticamente. Exemplos: Facebook/Twitter updates, atualização de preços de ações, feeds de noticias, resultados de esportes, etc. !!Multimídia !Áudio e Vídeo tornaram-se uma fist-class citizens na web com HTML5, do mesmo modo que outros tipos de mídias, como imagens, vez no passado. Através de suas novas APIs você pode acessar, controlar e manipular arquivos de áudio e vídeo. Mas o verdadeiro poder desses novos elementos HTML se destaca quando combinado com as outras tecnologias do web stack, seja Canvas, SVG, CSS ou WebGL. !Por exemplo, você pode construir um aplicativo de mixer para DJs, com vários controles para parar e mixar áudios. Utilizar Canvas para ler os pixels de vídeo, adicionar um visualizador de vídeos com seleção de cena e usar filtros SVG para distorcer ou adicionar efeitos ao filme enquanto os vídeos são reproduzidos. !Atualmente a maioria dos navegadores suportam elementos de áudio e vídeo. !Exemplo de Audio ! Code: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">

Page 12: Seminario HTML 5

Your browser does not support the audio element. </audio> ! View: ! Exemplo de Video Code: <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> !!Gráficos !Em HTML5 o desenvolvedor pode utilizar de tecnologias como 2D Canvas, WebGL, SVG, 3D CSS transforms, e SMIL, para aprimorar os efeitos visuais e animações do seu web site. Essas novas tecnologias, só são uteis e ágeis graça ao JavaScript, que já é rápido o suficiente para executar jogos em 3D e manipular vídeo em tempo real. A composição acelerada por hardware também está sendo implementada em diferentes navegadores. Isso significa que até mesmo transições e transformações em CSS serão cada vez mais suaves. !Existe um numero imenso de demos de gráficos HTML na web, desde implementação algoritmos de antigos gráficos 2D até novas técnicas criadas especificamente para a web moderna. !Gráficos é um tópico tão extenso que existem diversas especificações em desenvolvimento. Exemplos dessas especificações são: Transparência Alfa PNG, CSS3 Colors, SVG (suporte básico), Canvas (suporte básico), Elemento de vídeo, CSS Transforms, API de texto para Canvas, SVG em Fundos de tela CSS, Efeitos SVG para elementos HTML, Animação SVG SMIL, Fontes SVG, Filtros SVG, Animação CSS3, Gráficos do 3D Canvas / WebGL e CSS 3D Transforms. !Exemplo de Canvas ! Code: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ! // Cria o efeito de gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); ! // Preenche com o gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);

Page 13: Seminario HTML 5

</script> ! !Exemplo de SVG ! Code: <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> !

Desempenho e Integração !Navegadores modernos podem oferecer sites e aplicações que rivalizam com o desempenho de native e across loads de tipos de dispositivos e telas. Esse desempenho só é possível através da utilização de técnicas e tecnologias para tirar o máximo proveito do browser. O desempenho é uma parte crítica da experiência do usuário, é um tema constante em todos os aspectos do desenvolvimento do produto. !No HTML5 é possível melhor o desempenho de aplicações e conteúdos dinâmicos, deixando-os mais rápidos, utilizando uma variedades de técnicas e tecnologias como Web Workers, XMLHttpRequest 2, entre outros. !XMLHttpRequest !XMLHttpRequest(XHR) é uma API disponível em linguagens de script como JavaScript. É utilizada para enviar requisições HTTP/HTTPS para um servidor web e carregar os dados de resposta do servidor diretamente de volta ao script. Os dados podem ser recebidos do servidor através de JSON, XML, HTML ou como texto. Dados da resposta podem ser usados diretamente para alterar o DOM do documento atual ativo na janela do navegador sem carregar um novo documento de página. Os dados de resposta podem também ser avaliados pelo script do lado cliente. Por exemplo, se ele foi formatado como JSON pelo servidor web, ele pode ser facilmente convertido em um objeto de dados do lado cliente para uso posterior. XHR é utilizado atualmente por muitos sites para implementar aplicações web responsivas e dinâmicas. Exemplos dessas aplicações incluem Gmail, Google Maps, Facebook e muitas outras. !XMLHttpRequest pode ser considerado um objeto Javascript que torna possível a comunicação assíncrona com o servidor, sem a necessidade de recarregar a página por completo. !!Suporte ao CSS3 !Com a introdução CSS3 e o suporte do HTLM5 á ele, é possível criar sites e aplicativos complexos de forma fácil e cada vez mais bonitos. Existem diversas novas tecnologias e extensões para CSS3, como: Transformações 2D, Transições, Transformações 3D e WebFonts. !

Page 14: Seminario HTML 5

Trazendo mudanças drásticas para a manipulação visual dos elementos do HTML. !Com as atualizações do CSS3, nós entramos em um patamar onde sem dúvida o CSS é a ferramenta mais poderosa para o designer web. Os principais pontos nesse novo patamar, são: Selecionar primeiro e último elemento; selecionar elementos pares ou ímpares; selecionarmos elementos específicos de um determinado grupo de elementos; gradiente em textos e elementos; bordas arredondadas; sombras em texto e elementos; manipulação de opacidade; controle de rotação; controle de perspectiva; animação; estruturação independente da posição no código HTML. !

Page 15: Seminario HTML 5

HTML5 EM AÇÃO !Portifolio !Uma aplicação para o HTML 5 que vem sendo bastante utilizada é a criação de portifolios. Usando as mais variadas tecnicas de animação e eventos programados por ações e interações do usuarios aliado aos novos recursos agora nativos do padrão. A combinação principal é CSS3 e alguns script para efeitos de movimento. é possivel para programadorese web desiners mostrar suas habilidades não apenas com seus trabalhos mas tambem na forma como apresenta eles. !Construct 2 !Construct 2 é um motor de jogo (Engine) desenvolvido pelo grupo Scirra, focado na criação de jogos em HTML5, especificamente jogos 2D. Essa ferramenta possibilita que qualquer um possa desenvolver games, sem a necessidade de codificação. !Utiliza-se de um sistema de eventos e comportamentos, para o desenvolvimento. Também pode ser facilmente extensível, utilizando plug-ins em javaScript. !Os projetos criados no construct 2, podem ser exportados para múltiplas plataformas, entre elas: Web, Desktop, Android, iOS e Windows Phone 8. !The New York Times !O site de um dos maiores jornais do mundo é um exemplo em como a utilização dos novos recursos adotados pelo padrão irão influenciar de maneira possitiva a criação de conteudo na internet. A adoção da semantica facilita a identificação de assuntos e conteudos tornando o seu acesso muito mais amplo e apurado. Outra grande vantagem adquirida com a linguagem é o funcionamento multiplaforma que permite que o site seja exibido independente do dispositivo ou navegador. O desenvolvimento de aplicações tambem é centralizado, alterando apenas a plataforma em que será publicado. !

Page 16: Seminario HTML 5

FERRAMENTAS !BlueGriffon !BlueGriffon é uma editor web desenvolvido com a engine Gecko, a mesma utilizada no Firefox. É uma ferramente do tipo WYSIWYG (O que você vê é o que você tem) capaz de editar paginas da web conforme os ultimos padrões da rede sendo uma aplicação intuitiva que permite tanto iniciante como usuarios avançados criar paginas sem a necessidade de conhecimento tecnico extenso. !Sua ultima versão estavel é gratuita para baixar e está disponivel para Windows, OS X e Linux em diversas linguas. !Google Web Designer !Google Web Designer é uma ferramenta distribuida pela Google, o software foi lançado totalmente em português e se encontra atualmente em fase beta, trazendo recursos para desenvolvedores criarem páginas web e anúncios em HTML5 de forma fácil e rápida. Com o Web Designer, é possivel à adição de componentes como imagens, videos (sendo do YouTube ou não), efeitos e animações 3D, entre outros recursos, sem a necessidade de conhecer HTML5, CSS ou JavaScript, permitindo que o usuario foque apenas no design de sua pagina ou anuncio. Mas também possibilita que os desenvolvedores mais experientes implementem seu codigo utilizando essas técnologias. !Adobe Dreamweaver Adobe Dreamweaver é uma ferramenta de web design e desenvolvimento que fornece editor WYSIWYG (conhecido tambem como Design view) e editor de codigo, com recursos padrões como syntax highlighting e verificação de sintaxe em tempo real. !O Design View facilita a criação de layouts rapidamente e seu condigo permite que seja alterado os elementos criados de forma dinamica e facil. O programa tambem integra um browser para visualizar páginas da web desenvolvidos, além de permitir que o conteúdo a seja aberto em navegadores instalados na maquina. !O behavior panel permite a utilização de JavaScript básico, sem qualquer conhecimento de codificação, e integração com o framework Spry Ajax da Adobe oferece acesso a conteúdo e as interfaces gerados dinamicamente. !Assim como outros editores de HTML, os arquivos são editados localmente e podem ser enviados para servidores remotos usando FTP, SFTP, or WebDAV. !Dreamweaver tambem pode ser usado com Extensões de terceiros, aumentando assim as funcionalidades do aplicativo.

Page 17: Seminario HTML 5

CONCLUSÃO !Após um longo período a web finalmente está se movimentado para a adoção de um novo padrão que irá permitir não apenas aplicações mais ricas em conteúdo como também em interação. !Os novos recursos vistos permitem o desenvolvimento tanto de sites como aplicativos de maneira mais pratica e rápida. A maior independência de plug-ins e soluções de terceiros facilita o desenvolvimento em geral, alem de permitir ao desenvolvedor maior liberdade para a criação dos projetos. !Conseguimos identificar também, através desse trabalho de pesquisa, diversas aplicações e possibilidades que apesar de já existirem no passado, de forma mais restrita, agora foram disponibilizadas de forma muito mais abrangente e inclusiva para toda a comunidade web. !Graças ao padrão mais amplo e claro, o numero de aplicações para edição também se torna mais diversificado, o que garante a competitividade e inovação do mercado. !Concluímos com esse trabalho de pesquisa que o novo padrão HTML5 não apenas redefiniu a maneira como a web deve ser vista mas também seus meios para tornar isso possível. Mesmo sendo considerada uma evolução natural, ficou claro que as novas soluções irão permitir oportunidades inéditas e inimagináveis no padrão antigo. ! !

Page 18: Seminario HTML 5

REFERÊNCIAS !Base oficial http://www.w3.org/TR/html5/ Acessado em 23 de Agosto de 2014 !Fonte de informações http://www.html5rocks.com/ !Fonte de informações http://www.w3schools.com/html/html5_intro.asp !Historia do HTML http://www.slideshare.net/anm8tr/the-history-of-html5 !Sobre o HTML 5 http://broadcast.rackspace.com/blog/HTMLtimeline/index.html acessado em 25 de Agosto de 2014 !Aplicação de Pagina Mobile Analisado http://mobile.nytimes.com/international/ Acessado em 26 de Agosto de 2014 !Aplicação Portifolio Analisado http://guifurin.web44.net/ Acessado em 27 de Agosto de 2014 !Aplicação Contruct 2 https://www.scirra.com/construct2 Acessado em 24 de Agosto de 2014 !Ferramenta Google Web Designer http://www.google.com/webdesigner/ Acessado em 26 de Agosto de 2014 !Ferramenta BlueGriffon http://bluegriffon.org Acessado em 23 de Agosto de 2014 !Ferramenta Adobe Dreamweaver http://www.adobe.com/br/products/dreamweaver.htmlAcessado em 29 de Agosto de 2014