A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann.

Apresentações semelhantes


Apresentação em tema: "Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann."— Transcrição da apresentação:

1 Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann

2 HTML5 WORLD WIDE WEB HISTÓRICO W3C VISÃO GERAL

3 HTML – Visão Geral Em 1989 Tim Berners-Lee inventou a World Wide Web: Criou o termo World Wide Web; Desenvolveu o primeiro servidor web; Desenvolveu o protocolo http; Desenvolveu o primeiro navegador; Em 1990 desenvolveu a primeira versão do HTML (HyperText Markup Language); Especificações iniciais para URIs, HTTP e HTML foram refinadas posteriormente. World Wide Web

4 HTML – Visão Geral World Wide Web

5 HTML – Visão Geral World Wide Web...

6 HTML – Visão Geral Em outubro de 1994 Tim Berners-Lee fundou a W3C com o objetivo de desenvolver padrões, especificações técnicas e orientações que permitam o crescimento a longo prazo da web. W3C – World Wide Web Consortium

7 HTML – Visão Geral Alguns padrões definidos pela W3C: XML; HTML; XHTML; DOM; CSS; SVG; MathML; Padrões para Acessibilidade (WCAG – Web Content Accessibility Guidelines); Padrões Web Semântica; ….. W3C – World Wide Web Consortium Os padrões são definidos por grupos de trabalho. grupos de trabalho

8 HTML – Visão Geral W3C é um consórcio (associação de empresas) internacional que conta com: Organizações filiadas (mais de 370 membros);mais de 370 membros Uma equipe em tempo integral; Participação do público. W3C – World Wide Web Consortium

9 HTML – Visão Geral A W3C é administrada através de um contrato comum entre três instituições que o hospedam: MIT (EUA), ERCIM (Europa), Keio University (Japão) e Beihang University (China). MITERCIMKeio UniversityBeihang University W3C – World Wide Web Consortium

10 HTML – Visão Geral W3C – World Wide Web Consortium Possui também os escritórios regionais, como a W3C Brasil. O escritório no Brasil tem como objetivos:W3C Brasil Disseminar a cultura de adoção de padrões para a web; Organizar atividades na região para promover a W3C; Traduzir para o português textos da W3C relevantes para o Brasil; Recomendar padrões técnicos para o desenvolvimento da web no país;

11 HTML – Visão Geral Desenvolvimento da HTML5 De acordo com a W3C, a Web é baseada em 3 pilares: 1.Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI; 2.Um protocolo de acesso para acessar estas fontes, hoje o HTTP; 3.Uma linguagem de hipertexto, para a fácil navegação entre as fontes de informação: a HTML;

12 HTML – Visão Geral Desenvolvimento da HTML5 1989Tim Berners-Lee cria a World Wide Web 1990Tim Berners-Lee cria a 1ª versão da HTML 1994HTML 2 – já incluia a tag 1997HTML HTML XHTML XHTML Apple, Mozilla e Opera criam a WHAT WG (Web Hypertext Application Technology Working Group)

13 HTML – Visão Geral Desenvolvimento da HTML5 2007W3C retoma o HTML Working Group 2009W3C descontinua XHTML Apple, Google, Microsoft, Mozilla e Opera Software passam a dar suporte ao HTML5 em seus browsers.

14 HTML – Visão Geral Desenvolvimento da HTML5 HTML5 é a nova versão da HTML. Além de definir regras de marcação HTML e XHTML, define APIs (DOM) que formarão a base da arquitetura web. O que é a HTML5?

15 HTML – Visão Geral Desenvolvimento da HTML5 Novos elementos e modificação da função de outros. Elemento strong, aparece como elemento semântico, como marcador de um destaque dentro de um texto; Novos atributos, modificação de outros e novos valores de atributos; Elementos e atributos descontinuados (ex: font, center, frame); Elementos que melhoram a semântica do código; Mais interatividade sem a necessidade de plugins; Novo DOM (Document Object Model): nova API, eventos,... Interoperabilidade e Retrocompatibilidade. Objetivos da HTML5:

16 HTML – Visão Geral Desenvolvimento da HTML5 Em 12 de dezembro de 2012 foi publicada a definição completa (Candidate Recommendation) das especificações HTML5.0 e Canvas 2D. Estabilidade para o desenvolvedor e fornecedores de browsers. A expectativa da W3C é que a HTML 5.0 se torne uma recomendação no final de 2014 e a HTML 5.1 no final de 2016.

17 HTML – Visão Geral Desenvolvimento da HTML5 Muitas tecnologias que foram originalmente definidas como HTML5 passaram a ser definidas em especificações separadas. Exemplo: HTML Microdata - HTML WG HTML Canvas 2D Context - HTML WG HTML5 Web Messaging - Web Apps WG Web Workers - Web Apps WG Web Storage - Web Apps WG The WebSocket API - Web Apps WG The WebSocket Protocol - IETF HyBi WG Server-Sent Events - Web Apps WG WebRTC - WebRTC WG WebVTT - W3C Web Media Text Tracks CG HTML+RDFa - RDFa WG SVG - SVG WG MathML - Math WG

18 HTML – Visão Geral Desenvolvimento da HTML5 HTML5 + CSS3 + JavaScript + outras especificações

19 HTML5 Estrutura básica, DOCTYPE e charsets

20 HTML5 – Estrutura básica, DOCTYPE e charsets O HTML5 define uma sintaxe compatível com HTML e XHTML: Palestra HTML5

21 Sintaxe XML do HTML5, para servir o documento como XML: Example document Example paragraph HTML5 – Estrutura básica, DOCTYPE e charsets

22 HTML5 Novos elementos semânticos

23 HTML5 – Novos elementos e atributos A função da HTML é indicar (marcar) que tipo de informação o documento está exibindo; Problema histórico da HTML: Não há um padrão para nomenclatura de IDs e classes; A HTML5 apresenta novos elementos que melhoram a semântica dos documentos web; Alguns dos novos elementos ajudam a definir setores principais nos documentos HTML e estabelecer grupos lógicos de conteúdos; Ajuda o trabalho de agentes de usuário como os sistemas de busca, que guardam informações mais exatas sobre o conteúdo dos documentos. Semântica dos documentos em HTML

24 HTML5 – Novos elementos e atributos Semântica dos documentos em HTML HTML4HTML5

25 HTML5 – Novos elementos e atributos Semântica dos documentos em HTML

26 HTML5 – Novos elementos e atributos Elemento header Representa um cabeçalho; Destina-se a marcar o cabeçalho de uma sessão ou da página como um todo. Estilização padrão: display:block; Geralmente deve conter os elementos h1-h6 (não obrigatoriamente). header - HTML language reference

27 HTML5 – Novos elementos e atributos Elemento header header - HTML language reference

28 HTML5 – Novos elementos e atributos Elemento footer Representa um rodapé; Destina-se a marcar o rodapé de uma sessão ou da página como um todo; Estilização padrão: display:block; Deve conter informações sobre o conteúdo da seção ou página, como seu autor, links para documentos relacionados, direitos autorais e similares. footer - HTML language reference

29 HTML5 – Novos elementos e atributos Elemento footer footer - HTML language reference

30 HTML5 – Novos elementos e atributos Elemento nav Marca uma seção da página que contenha links para outras páginas ou para outras partes dentro da própria página. Estilização padrão: display:block; Nem todos os grupamentos de links devem ser marcados com este elemento, somente os maiores grupos de links. nav - HTML language reference

31 HTML5 – Novos elementos e atributos Elemento nav nav - HTML language reference Navigation Index Things for today Managed

32 HTML5 – Novos elementos e atributos Elemento article Marca uma sessão de um conteúdo que forma uma parte independente de um documento ou site, por exemplo, um artigo de uma revista, uma entrada de um blog, um conteúdo fornecido via RSS, um post em um fórum, um comentário postado por um visitante, um conteúdo independente. article - HTML language reference

33 HTML5 – Novos elementos e atributos Elemento article article - HTML language reference The Very First Rule of Life If there's a microphone anywhere near you.... Comments Posted by: George Washington Yeah! Especially when talking about your!

34 HTML5 – Novos elementos e atributos Elemento section Marca, genericamente, uma seção na página, geralmente com um título ou cabeçalho; Entende-se seção como um grupo lógico de conteúdos tratando de um mesmo tema; Não utilizar como container genérico. Quando for necessário um container genérico a ser usado por fins de estilização ou para ser manipulado por script, devemos empregar o elemento div. section - HTML language reference

35 HTML5 – Novos elementos e atributos Elemento section section - HTML language reference Visão da empresa A empresa em uma visão de mundo...

36 HTML5 – Novos elementos e atributos Elemento aside aside - HTML language reference Inter Campeão de tudo O Internacional de Porto Alegre se sagrou... Você sabia ? O primeiro título colorado foi conquistado... Marca um conteúdo que faz referência ao conteúdo principal que o cerca, exibindo, por exemplos, informações contextuais sobre o conteúdo principal. Em documentos para impressão, pode ser formatado como uma nota de rodapé, por exemplo.

37 HTML5 Novos atributos

38 HTML5 – Novos elementos e atributos Novos atributos para formulários autofocus placeholder required pattern

39 HTML5 – Novos elementos e atributos Novos atributos para formulários

40 HTML5 – Novos elementos e atributos Novos atributos para formulários

41 HTML5 – Novos elementos e atributos Novo atributo form para elementos como input, select e textarea; Permitem que os controles sejam associados a um formulário; Os controles não precisam ser descendentes do elemento form. Novos atributos para formulários

42 HTML5 – Novos elementos e atributos Novos valores para o atributo type tel - Telefone search – Um campo de busca – com formatação e validação url – Um endereço web, também com formatação e validação datetime date month week time number range color Custom validators

43 HTML5 – Novos elementos e atributos Atributo novalidate Novos atributos para formulários Atributo formaction First name: Last name:

44 HTML5 – Novos elementos e atributos Atributo formmethod First name: Last name: Novos atributos para formulários Atributo formtarget First name: Last name:

45 HTML5 SUPORTE DOS NAVEGADORES E EXTRATÉGIAS DE USO

46 Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 Para o desenvolvimento da HTML5 e CSS3, a W3C dividiu o desenvolvimento de cada tecnologia em módulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar que todo o padrão seja escrito e publicado para utilizarem as novidades das linguagens. HTML5 nos navegadores atuais

47 Compatibilidade da HTML5 html5test.com Teste de compatibilidade dos browsers: Suporte dos navegadores e estratégias de uso

48 Compatibilidade da HTML5 Problemas de compatibilidade com IE Suporte dos navegadores e estratégias de uso html5test.com IE – 23,54% no Brasil 320 / 500

49 Compatibilidade da HTML5 HTML5 no Internet Explorer HTML5 apresenta novos elementos; IE8 e anteriores não aplicam regras CSS a elementos desconhecidos; CSS: header{height:150px; background-color:#cccccc;} document.createElement("header"); Suporte dos navegadores e estratégias de uso

50 Compatibilidade da HTML5 HTML5 no Internet Explorer Script desenvolvido por Remy Sharp: Suporte dos navegadores e estratégias de uso

51 Compatibilidade da HTML5 caniuse.com Suporte dos navegadores e estratégias de uso Pesquisa sobre suporte ao HTML5, CSS3, SVG, novas APIs JavaScript

52 Compatibilidade da HTML5 Biblioteca JavaScript Modernizr Biblioteca JavaScript para detectar o suporte nativo dos navegadores; Detecta suporte ao HTML5 e CSS3; Habilita elementos HTML5 em versões antigas do IE para estilização; Constantemente atualizada, disponível em if(Modernizr.video){ // script para uso do elemento video } else { // } Suporte dos navegadores e estratégias de uso

53 Compatibilidade da HTML5 Biblioteca JavaScript Modernizr Para o CSS3, a biblioteca Modernizr detecta o suporte CSS do navegador e adiciona valores ao atributo class da tag..borderradius #content { border: 1px solid #141414; border-radius: 12px; }.no-borderradius #content { border: 1px solid #ccc; } Suporte dos navegadores e estratégias de uso A biblioteca Modernizr vai acrescentar dinamicamente valores ao atributo class da tag html de acordo com as funcionalidades suportadas e não suportadas pelo navegador:

54 Compatibilidade da HTML5 Biblioteca Modernizr, em conjunto com outras bibliotecas JavaScript, permite adicionar funcionalidades não suportadas nativamente pelo browser. Suporte dos navegadores e estratégias de uso Formulário Cross Browser com Modernizr, webforms2 e html5forms

55 Compatibilidade da HTML5 HTML5 Boilerplate Template front-end que acompanha marcação HTML5, CSS Resets, Javascript (Modernizr), script que compatibiliza o documento HTML5 em browser desatualizados, CSS media queries (páginas responsivas), estilos para impressão, acompanha Biblioteca Jquery, script Google Analytics, arquivos configuração Apache, entre outros. Suporte dos navegadores e estratégias de uso html5boilerplate.com

56 HTML5 Suporte IDEs

57 Netbeans Suporte ao HTML5 criando novos projetos HTML5 utilizando templates populares, Live Preview (integração com Google Chrome) e suporte a Responsive Web Design. Suporte IDEs

58 Aptana Studio (Eclipse) Suporte IDEs

59 HTML5 MathML e SVG

60 HTML5 + MathML HTML5 incorpora o MathML; MathML é uma linguagem de marcação baseada em XML para representação de fórmulas matemáticas; Basta escrever o código MathML no documento HTML5;

61 HTML5 incorpora o SVG; SVG é uma linguagem de marcação baseada em XML para marcação de gráficos vetoriais; Basta escrever o código SVG no documento HTML5; A maioria dos editores gráficos vetoriais exportam SVG; HTML5 + SVG

62 HTML5 Novos elementos para AUDIO e VIDEO

63 HTML5 – Novos elementos e atributos Elemento audio Destina-se a incorporar um audio ou stream de audio na página; Sem a necessidade de plugins, Flash, QuickTime, Real Audio, WMP; Som reproduzido com as funcionalidades nativas do navegador; Não há um codec padrão a ser implementado nativamente; Cada fabricante decide a implementação do codec; Navegadores que não dão suporte renderizam o conteúdo do elemento: audio - HTML language reference

64 HTML5 – Novos elementos e atributos Elemento source Elemento audio admite como elemento-filho o elemento source; Elemento source permite servir arquivos com formatos alternativos. Recomenda-se utilizar o atributo type; Seu navegador não suporta o elemento audio da HTML5. Faça o download do arquivo. audio - HTML language reference source – HTML language reference

65 HTML5 – Novos elementos e atributos Elemento video Destina-se a incorporar um video na página; Sem a necessidade de plugins, Flash, QuickTime, Windows Media Player; Video reproduzido com as funcionalidades nativas do navegador; Não há um codec padrão a ser implementado nativamente; Cada fabricante decide a implementação do codec; Navegadores que não dão suporte renderizam o conteúdo do elemento: Seu navegador não suporta o elemento video da HTML5. video - HTML language reference

66 HTML5 – Novos elementos e atributos Elemento video Elemento video no navegador Google Chrome

67 HTML5 – Novos elementos e atributos Elemento video Codecs para a HTML5: Theora para ogv; MPEG4 para mp4; H.264 para MPEG; VP8 para WebM;

68 HTML5 – Novos elementos e atributos Elemento track Destina-se a definir trilhas externas para os elementos audio e video: Subtítulos; Legendas; Descrições; Metadados; track - HTML language reference Seu navegador não suporta o elemento video da HTML5.

69 HTML5 – Novos elementos e atributos Ferramenta para codificação Codificar vídeos nos containers Ogg e WebM com os codecs Theora (vídeo), Vorbis (audio) e VP8 (vídeo-audio).

70 HTML5 – Novos elementos e atributos APIs para audio e video A API disponível para os elementos audio e video permite que se implemente controles personalizados. Entre os atributos e métodos disponíveis estão: Método play(); Método pause(); Método stop(); Atributo volume;

71 HTML5 – Novos elementos e atributos APIs para audio e video

72 HTML5 Elemento canvas

73 HTML5 – Novos elementos e atributos Elemento canvas O elemento canvas marca uma área para a criação de desenhos, implementar animações e jogos através da linguagem JavaScript. Acessado por meio de interfaces DOM; Contexto 2D; WebGL - Contexto 3D a partir do elemento canvas; context=document.getElementById(x).getContext(2d); context.fillRect(10, 10, 50, 150); No JavaScript: No HTML:

74 HTML5 – Novos elementos e atributos Elemento canvas Entre as possibilidades de uso da API Canvas estão: Desenhar texto; Desenhar sombras e gradientes; Incluir imagens no canvas; Manipular objetos através de eventos; Rotacionar, animar e transformar objetos;

75 HTML5 – Novos elementos e atributos Elemento canvas WebGL – Contexto 3D a partir do elemento canvas. Angry Birds Jogo multiplayer HTML5 (Websocket API + Canvas API) Wolfenstein 3D

76 HTML5 Microdata API

77 HTML5 – Novos elementos e atributos Microdata API Semântica adicional para ser lido por máquinas; Usuário pode definir seus próprios padrões de metadados; Pode utilizar metadados padronizados (http://www.data- vocabulary.org/);http://www.data- vocabulary.org/ A Microdata API fornece acesso especial aos dados; Evitar ambiguidade na análise sintática dos dados (parsing).

78 HTML5 – Novos elementos e atributos Microdata API

79 HTML5 Web Storage

80 HTML5 Web Storage Dados podem ser armazenados localmente pelo browser; Anteriormente, feito com cookies (problemas com privacidade); Web Storage é mais seguro e rápido; Armazenamento de dados para além da sessão atual;

81 HTML5 Aplicações OFFLINE

82 HTML5 Applicações OFFLINE Maneira de indicar ao navegador quais elementos são necessários e devem ser colocados em cache para que a aplicação funcione offline. Clock The time is: Arquivo clock.appcache CACHE MANIFEST clock.html clock.css clock.js

83 HTML5 API de Geolocalização

84 HTML5 API de Geolocalização Define uma API que fornece acesso por script de informações sobre localização geográfica; As fontes de informações de localização incluem GPS, redes de celulares, serviços de localização de IP.

85 HTML5 API de Geolocalização

86 HTML5 Web Socket

87 HTML5 Web Socket Define um protocolo e funcionalidades que permitem a comunicação de um cliente web com um servidor remoto; A conexão permanece aberta e possibilita a comunicação permanente entre cliente e servidor; Conexão pode ser fechada pelo desenvolvedor; Em uma aplicação que consulta o servidor repetidamente, o uso o protocolo http implica em repetidas requisições/resposta gerando tráfego de cabeçalhos http; Web Socket torna a aplicação mais rápida;

88 HTML5 Web Workers

89 HTML5 Web Workers JavaScript tem característica single-thread (uma linha de execução). Scripts longos congelam as páginas; Web Workers permite a execução de mais de um script simultaneamente; Criação de threads de execução JavaScript;

90 HTML5 Server-Sent Events

91 HTML5 Server-Sent Events Um server-sent event possibilita que um documento web obtenha automaticamente uma atualização do servidor. teste-server-sent.php executa no servidor. Código no cliente.

92 HTML5 Outras funcionalidades

93 HTML5 Outras funcionalidades API de Drag and Drop Atributo draggable num elemento o torna arrastável e há uma série de eventos que é possível tratar. Revisão ortográfica e gramatical Agentes de usuário podem oferecer recursos de revisão ortográfica e gramatical. O desenvolvedor pode controlar o comportamento através do novo atributo spellcheck. Inserir spellcheck =true habilita a revisão. Atributo contenteditable Este atributo torna um elemento HTML editável pelo usuário.

94 HTML5 Outras funcionalidades DOM e HTML5 O DOM é a interface entre a linguagem JavaScript e HTML. Novas propriedades e métodos. Exemplos: Novo método getElementsByClassName; Propriedade innerHTML passa a ser um padrão; Menus e Toolbars O elemento menu é usado para definir menus e barras de ferramenta. Dentro do menu, você pode inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu.

95 HTML5 – Novos elementos e atributos Outras funcionalidades Elementos details, summary e progress Copiando 37,5% Tamanho total: KB Transferido: Taxa de transferência: 127KB/s Nome do arquivo: HTML5.mp4

96 HTML5 – Novos elementos e atributos Outras funcionalidades Elemento datalist Usar junto ao elemento input; Define uma lista de sugestões para o campo input; Fruta preferida:

97 HTML5 – Novos elementos e atributos Outras funcionalidades Elementos figure e figcaption Elemento figure: marcar fotos, ilustrações, diagramas (entre outros); Elemento figcaption: marcar uma legenda para uma figura; Pássaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio. Originais por Richard Clark

98 Validadores W3C

99 Novas possibilidades no desenvolvimento web com a HTML5 Referências

100 Valeu Pessoal!!! Organização: Tiago Kautzmann Novas possibilidades no desenvolvimento web com a HTML5 Material da apresentação disponível em:


Carregar ppt "Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann."

Apresentações semelhantes


Anúncios Google