O que é o HTML5? Tags Canvas

Transcrição

1 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.

2 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.

3 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 o HTML 2.0 em o HTML 3.5 no final de 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.

4 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

5 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

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