O que é o HTML5? Tags Canvas

Documentos relacionados
Gosta de acompanhar os rumos das linguagens de programação? Então não fique de fora dessa! Descubra o que é o HTML 5!

Linguagem de Programação Visual. Estrutura Basica do HTML5 Prof. Gleison Batista de Sousa

Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI.

HTML 5 TAGS BÁSICAS E ESTRUTURAIS. Prof. Rosemary Melo

HTML 5, UM ESTUDO SOBRE SEUS NOVOS RECURSOS

Roteiro 02. Professor: Prof. M.Sc. Odilon Corrêa da Silva. Curso: Desenvolvimento de Sistemas. Disciplina: Programação para WEB I

Roteiro 01. Professor: Prof. M.Sc. Odilon Corrêa da Silva. Curso: Engenharia de Computação. Disciplina: Programação para WEB

IFSC/Florianópolis - Prof. Herval Daminelli

Linguagens de Marcação e Folhas de Estilos

Web I F R N I N S T I T U TO F E D E R A L D E E D U C A Ç Ã O, C I Ê N C I A E T E C N O LO G I A D O R I O G R A N D E D O N R T E.

Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo

INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2

Redes de Computadores I Seminário Novas Tecnologias em Redes HTML5. Jessica da Silva Hahn Letícia Aparecida Coelho

Hiperlinks. Hiperlinks. Hiperlinks. Tag <a></a> Hiperlinks 07/05/2011

Aula 11 Introdução ao Java Script

Ao projeto inciado na aula anterior, faça as seguintes alterações:

Desenvolvimento de Sistemas WEB Prof. Msc Jacson Rodrigues

Tecnologias de Desenvolvimento de Páginas web

Iniciando Layouts. No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica:

INTRODUÇÃO A PROGRAMAÇÃO PARA WEB

Estratégias Móveis. O que toda empresa precisa saber

Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação HTML

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

S U J E I T O P R O G R A M A D O R

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

Curso online de. Formação em Front-End. Plano de Estudo

TAGS. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. <tag>conteúdo da tag</tag>

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)

O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2

DESENVOLVENDO APLICAÇÕES MULTIPLATAFORMA PARA DISPOSITIVOS MÓVEIS UTILIZANDO IONIC E PHONEGAP

TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML

Curso online de Aplicações. Híbridas. Plano de Estudo

Guia para Criativos em HTML5 ABRIL

Guia para Criativos em HTML5 ABRIL

Introdução à Programação para Dispositivos Móveis

Apps na prática 1 Aviso Legal: Este material foi produzido e desenvolvido pela Fábrica de Aplicativos S.A para o curso presencial e online.

Introdução 1 PARTE I: A LINGUAGEM DA WEB 5

Introdução a Web Standards. Reinaldo Ferraz e Clécio Bachini

Daniel Röhers Moura. Software HandsOn.TV. danielrohers

1.5 PROGRAMAÇÃO DE JOGOS EM AMBIENTE DE REA LIDADE AUMENTADA AMBIENTES INTEGRADOS DE DESENVOLVIMENTO DE JOGOS 19

HTML: INTRODUÇÃO TAGS BÁSICAS

Pré-requisitos: Conhecimentos de informática gerencial e lógica de programação.

Desenvolvimento Web. Introdução Geral. Prof. Vicente Paulo de Camargo

Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B

Construção de sites Aula 1

Guia para produção de peças HTML5 Infoglobo

HTML: Linguagem de Marcação de HiperTexto (HyperText Markup Language) Pimentel, Morganna BSI -UNIRIO DPW

O W3C Futuro da Web HTML5. Março/2010 1o. - FIEB - ITB Profa. Maria Sylvia Chaluppe Mello

CSS Organizado e simples. Cercomp Equipe Web Nícolas Lazarte -

DreamweaverCC Plano de Aula - 24 Aulas (Aulas de 1 Hora).

AULA 01 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos

Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora).

Ângelo Lovatto Éderson Ferreira Taiane Ramos

HTML5 Curso W3C Escritório Brasil

PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

O W3C Futuro da Web HTML5. janeiro/2010 Campus Party

Desenvolvimento de Aplicações Móveis com HTML5

Plano de Aula - Dreamweaver CS5 - cód Horas/Aula

Conceitos de HTML 5 Aula 1

INTRODUÇÃO ÀS APLICAÇÕES PARA WEB

Introdução a Web. Programação para a Internet. Prof. Vilson Heck Junior

Conteúdo programático. Desenvolvedor web - front end

Volnys Bernal. Introdução à linguagem HTML. Introdução à linguagem HTML. Visão geral. Visão geral. Visão geral. Visão geral.

Plano de Aula - DreamWeaver CC - cód Horas/Aula

Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina

TECNOLOGIAS DE DESENVOLVIMENTO DE APLICAÇÕES UTILIZANDO METEOR

INTRODUÇÃO A PROGRAMAÇÃO AVANÇADA PARA WEB E AO HTML. Prof. Msc. Hélio Esperidião

Guia para produção de peças HTML5 Infoglobo

HTML5 Futuro da Web. Multimídia sem limites 2011 SENAC - SP

Introdução à linguagem HTML. Volnys Borges Bernal

Baixar curso de html5 e css3. Baixar curso de html5 e css3.zip

Técnico em Informática. Web JavaScript. Profª Ana Paula Mandelli

CURSO PROFISSIONAL DE TÉCNICO DE MULTIMÉDIA

REDES DE COMUNICAÇÃO. 11º - ANO Professor: Rafael Henriques

Dreamweaver CS6 Plano de Aula - 24 Aulas (Aulas de 1 Hora).

<HTML> Vinícius Roggério da Rocha

3. Construção de páginas web Introdução ao HTML

10 DICAS PARA UM WEBSITE DE SUCESSO O QUE VOCÊ PRECISA SABER PARA CONSTRUIR UM WEBSITE BEM SUCEDIDO!

Um Cliente de Webmail para ser acessado em Celulares

ALCATEL-LUCENT ENTERPRISE RAINBOW TM

Programação Web - HTML

Aplicações para Internet

Figura 1 QR Code para o download do Cata Ciência.

Aula 17 Introdução ao jquery

Primeiros Passos para o Desenvolvimento de Aplicações Móveis na Plataforma Android. Odette Mestrinho Christian Reis 1

Roteiro 01. Professor: Prof. M.Sc. Odilon Corrêa da Silva. Curso: Desenvolvimento de Sistemas. Disciplina: Programação para WEB I

Faculdade de Tecnologia "Dep. Júlio Julinho Marcondes de Moura" RELATÓRIO FINAL DE INICIAÇÃO CIENTÍFICA

Desenvolvimento de Aplicações Móveis Multiplataforma Utilizando Ionic 2

Curso online de Fundamentos em Android. Plano de Estudo

Assim, ao armazenar em cache elementos como HTML, CSS, JS e imagens, o navegador reduz drasticamente o tempo de carregamento e o uso de recursos.

Ferramentas para Produtividade. Aprenda a produzir mais sem trabalhar mais!

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011

Programação para Web

Agenda. Vantagens e desvantagens. Tipos de arquivos. Dicas

Protocolo HTTP. Professor Leonardo Larback

MÓDULO 3 PÁGINAS WEB. Criação de Páginas Web

Maurício Samy Silva. Novatec

Desenvolvimento de Sistemas Corporativos Aula 1.3 Motivação de DSC Visão geral de Arquiteturas. Prof. Bruno Moreno

SharePoint Online. Pesquisar Encontre Sites, Pessoas ou Arquivos. Criar um site ou postagem de notícias

Transcrição:

O que é o HTML5? O código HTML está presente nas páginas da web há mais de dez anos e tem uma larga aceitação dos usuários por todo o mundo. Com certeza, qualquer pessoa que tem uma ligação um pouco mais estreita com computadores e internet já ouviu falar em HyperText Markup Language (Linguagem de marcação de hipertexto), ou seja, o HTML. A principal característica desse tipo de programação são as tags as marcações para inserção de algum tipo de objeto ou característica de um objeto através de comandos em inglês e números. Com essa aproximação das linguagens, muita coisa pode mudar dentro de pouco tempo. Ao que tudo indica, a tão sonhada Web Semântica de Tim Berners-Lee está no caminho de acontecer e o HTML 5 pode ajudar bastante a chegar lá. Como pode observar, o sistema de divisão de marcações é todo feito por tags. Nessa nova linguagem, algumas dessas etiquetas de marcação mais objetivas. De modo geral, com essas e as outras novidades, será muito mais fácil navegar pela Internet! Tags Canvas Especializadas em renderizar imagens em bitmap, as tags canvas serão específicas para a edição breve de imagens através de APIs ou JavaScript. Esse tipo de edição acontece pura e exclusivamente de maneira muito similar a outros geradores de imagem em duas dimensões (2D). Além disso, as Canvas Tags são compatíveis com as folhas CSS. Tags de vídeo Incluir vídeos em HTML como conhecemos hoje, utilizando códigos para o embed, ou seja, incorporar vídeos à página será muito mais simples. O HTML 5 possui tags específicas para a inserção de vídeos no corpo da página. Basta inserir a tag de vídeo assim como se faz com aquela destinada às imagens. Assim, será necessário indicar uma src, ou seja, source (fonte) que nada mais é do que a origem do vídeo.

Para os vídeos a situação será muito semelhante ao que é feitos hoje com as imagens. Assim como a edição rápida de atributos tais como height (altura) e width (largura) também poderão ser feita diretamente no código e totalmente personalizados pelo desenvolvedor da página ou do usuário que desejar criar algo completamente novo e aprender novas técnicas. Geolocalização Saber onde você está não é uma informação importante só para os seus pais, namorados ou namoradas. O HTML 5 também possui maneiras de descobrir a sua localização e informá-la aos sites e serviços que você acessa. Os APIs serão o ponto forte para determinar a localização de um usuário. Por isso, este recurso de geolocalização permite o que se chama de geottaging. Através disso, pode-se fornecer ao usuário conteúdos específicos para o local em que ele está. É muito útil para aplicativos de smartphones, uma vez que este recurso envia e recebe informações a respeito de onde o indivíduo está. Caching de aplicações Agora, com o HTML 5 os aplicativos web poderão ser acessados offline via cache. De acordo com a publicação provisória da W3C, o arquivamento desses aplicativos será feito via URL em que cada uma delas possui uma categoria diferente. As entradas mestre são aqueles documentos que foram adicionados ao cache por um contexto de navegação indicado por um atributo de manifesto. Já o manifesto é a fonte da URL indicada na Entrada mestre do HTML. Esses arquivamentos ainda podem ser agrupados ou não. Base de dados Apesar de não ser um recurso muito utilizado por usuários não desenvolvedores, os bancos de dados são importantes para os sites. No HTML 5, algumas vantagens serão implementadas como a possibilidade de entradas de valores ou palavras chave, além do banco de dados SQL.

E o que muda para o usuário? Se você possui um perfil um pouco mais ligado às novidades tecnológicas, sentirá boas diferenças ao navegar pela Internet. Isso porque o HTML 5 irá facilitar muito a vida de todos nós quer sejamos desenvolvedores ou apenas usuários. Para os desenvolvedores, fica mais rápido produzir sites cada vez mais fáceis e limpos para que os usuários possam aproveitar ao máximo cada uma dessas melhorias. Você irá notar que colocar vídeos do YouTube no seu site ou blog ficará cada vez mais simples, assim como os conteúdos específicos direcionados para você que está procurando por uma padaria ou locadora de filmes pelo navegador do seu smartphone. Os conteúdos possuem a tendência de serem convergentes, assim como a linguagem de programação. O HTML 5 vem exatamente para facilitar esse processo! Vantagens e Desvantagens do HTML5 Basicamente o problema na epoca com a então emergente internet pública (que tornaria-se a Internet) era com a comunicação e disseminação das pesquisas entre grupos. E a solução que ganhou atenção mundial for a criacao do HTML. A linguagem HTML foi definida em especificações formais na década de 1990. o HTML 2.0 em 1995. o HTML 3.5 no final de 1997. E em 2008 veio o HTML5 A grande vantagem da linguagem HTML e que, por ela ser muito simples, nao necessita de conhecimentos proprios de programacao. Outro fator e o de nao precisar de um editor especifico, qualquer um serve. desvantagens tem muito com a parte tecnica de quem vai criar um codigo...como o codigo de marcacao HTML e que ele nao faz distincao entre letras maiusculas (CAIXA ALTA) e letras minusculas (caixa baixa). Tanto faz escrever como. Porem... se o browser nao considera letras maiusculas ou minusculas o mesmo na acontece com os servidores, onde sua paina esta hospedada.

Se voce criar um link para um arquivo chamado tutorial.htm e ele estiver com o nome Tutorial.htm, o servidor simplesmente nao ira encontra-lo. Notou a diferenca: tutorial.htm e Tutorial.htm?...por isso que muitas vezes o servidor retorna com uma mensagem de "Arquivo nao encontrado" quando o arquivo esta la. Mas isso não e tudo, existem outras regras que devem ser obedecidas ao nomear seus arquivos: Os nomes nao devem conter mais que 32 caracteres. Os nomes nao devem conter espacos em branco, use o simbolo Underline ( _ ) para substituir o espaco em branco, assim, ao invez de nomear o arquivo como laje branca.htm, nomeie-o como laje_branca.htm. Tipos de aplicações que possuem a linguagem HTML5 como base As aplicações para dispositivos móveis constituem um marco na história da tecnologia, revolucionando a maneira como interagimos com vários sistemas e serviços de informação móveis. É certo. No entanto, causa alguma e fascínio que algo tão banalizado e cujo uso é de domínio comum, não tenha uma abordagem de desenvolvimento consensual (longe de ser empírica) e que pode colocar no mesmo plano de discussão uma empresa startup ou uma gigante informática. 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-seweb 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. Como é óbvio, construir uma aplicação que faz uso das mesmas linguagens do sistema operativo que a acolhe (linguagens de programação nativas) pressupõe um maior poder de acesso aos recursos do sistema, eficiência e

independência (para o bem e para o mal, refira-se).entende-se portanto que quando as aplicações mobile começaram a difundir-seem larga escala, fazer uso das linguagens nativas para o seu desenvolvimento era a escolha por excelência. Elementos Semânticos: Header, Nav, Section, Article e Footer. section A tag section define uma nova seção do site, uma área genérica do site. Por exemplo a home pode ser dividida em destaque, novidades, chamada para conteúdo completo. header O elemento header representa uma área de introdução. Pode ser utilizado para agrupar índices de conteúdo, campos de busca, cabeçalho do site com titulo ou logo. footer A tag footer representa o rodapé do site, ou de uma seção. nav O elemento nav é utilizado para representar uma seção da página que contém links para outras partes do site. Este elemento deve ser utilizado para grupos de links importantes do site tipicamente menus de navegação. article O elemento article é utilizado para representar o conteúdo do site propriamente dito, como posts, artigos e outros textos em geral. aside A tag aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. Porém vários navegadores, principalmente os mais antigos, não reconhecem devidamente as novas marcações. Para mantermos a compatibilidade é necessário estilizar algumas tags usando a seguinte regra CSS. 1 header, footer, article, aside, nav, section {display:block} Para verificar o suporte a HTML5 e CSS3 podemos utilizar a Modernizr,que é uma biblioteca de detectação que lhe permite verificar o suporte da maioria das características do HTML5 e CSS3. O Modernizr roda automaticamente assim

que você o adiciona no head do documento fazendo funcionar as novas tags em navegadores mais antigos(ie8).