Já está disponível mais uma edição da revista Programar. Neste número 34 a revista da comunidade portuguesa de programadores dá destaque de capa ao Android, mas aborda diversos outros temas, onde se inclui uma introdução ao HTML 5.
O texto é da autoria de Bruno Dias consultor e membro da comunidade NetPonto que ali explica o que é o HTML5 e para que serve, num artigo que o TeK publica abaixo, no âmbito de uma parceria com a revista.
Este e os restantes temas desenvolvidos na edição 34 da revista estão disponíveis online para consulta gratuita, através deste link.
Introdução ao HTML 5
Por Bruno Pires *
A primeira recomendação que o consórcio W3C publicou sobre HTML4 foi em Dezembro de 1997. Por esses dias existia uma luta que pretendia determinar qual o browser e tecnologia que iria dominar a web durante os próximos anos, o Internet Explorer acusava a versão 4 e a Internet começava a entrar na curva da exponencial.
A especificação que vigorou durante tantos anos acusava já o peso da sua idade. Durante esse tempo rebentou uma bolha, a Web reinventou-se numa versão 2.0 e neste momento vivemos a Web social em tempo real.
O que é o HTML5?
A especificação do HTML5 pretende, quando chegar a uma versão final, unificar a forma de desenvolver a apresentar ao utilizador páginas e aplicações Web.
Para atingir esse objectivo, foi desenvolvido um novo conjunto de tags HTML, API's de Javascript e incluída a última versão de Cascading Style Sheets (CSS3) que permite ao leitor criar aplicações Web complexas.
Estas tecnologias disponibilizam um conjunto alargado de funcionalidades inovadoras, como o suporte a armazenamento de dados no cliente. Por outro lado unificam diferentes formas de implementar funcionalidades que são utilizadas numa larga maioria de websites ou aplicações Web, como é o caso da validação de formulários.
Quais os browsers que suportam HTML5?
É uma pergunta sem resposta simples, existem neste momento um conjunto de browsers no mercado que mantêm uma quota de mercado relevante (Internet Explorer, Mozilla Firefox, Google Chrome, Opera, etc..), para cada um desses browsers existem as suas diferentes versões e cada uma dessas versões pode ter diferenças no suporte das funcionalidades HTML5.
Neste momento o browser com melhor suporte de HTML5 é o Google Chrome, no entanto existem um conjunto alargado de browsers com bom suporte HTML5, como é o caso do Internet Explorer 9, Mozilla Firefox ou Opera.
Neste momento a especificação do HTML5 não está fechada nem existem no mercado browsers que implementam completamente a especificação mais recente da W3C.
Para solucionar este problema utiliza-se uma abordagem simplificada, o leitor apenas necessita de validar se o browser que visita o website suporta as funcionalidades HTML5 nele utilizadas, simplificando-se assim o processo de validação e suporte do browser.
Existem várias formas implementar este tipo de validação, a mais popular é a biblioteca de Javascript Modernizar, que valida de forma simples a maioria das funcionalidades utilizadas na especificação HTML5 e CSS3.
Tecnologias A W3C divide em oito classes as novas tecnologias que estão incorporadas no HTML5. Classificação das tecnologias HTML5
Conectividade
Uma conectividade mais eficiente significa que existem um novo conjunto de funcionalidades que se podem explorar ou até melhorar com a utilização de melhores, mais rápidas e eficientes formas de comunicação entre cliente e servidor. A utilização de Web Sockets e Server-Sent Events permite uma melhoria significativa na performance e experiência de utilização, como aplicações Web que disponibilizam informação em tempo real.
Estilos
Com a utilização de CSS3, nunca foi tão fácil desenvolver websites e aplicações Web com um design atractivo utilizando HTML. Existe um conjunto de novas tecnologias e extensões nesta nova versão de CSS, como transições, transformações (2D e 3D) e suporte de tipografia para a Web (Web Fonts) que permitem que esse objectivo seja uma realidade.
Com CSS3 é possível implementar um conjunto de estilos e efeitos que permitem desenvolver aplicações com as últimas tendências do design Web, sem prejudicar a estrutura semântica ou performance. O suporte de novos tipos de tipografia, através de CSS3 @font-face, e o formato WOFF (Web Open Font Format) permitem flexibilidade, controlo criatividade como nunca foi possível.
Acesso a componentes e periféricos
A Web não termina no browser, estende-se para lá dele e passa a oferecer suporte a componentes e acesso a periféricos como, suporte de geolocalização, orientação do ecrã, acesso ao microfone e input de áudio e vídeo, além disso oferece suporte para aceder aos contactos e eventos que o leitor guarda na sua agenda.
Gráficos e 3D
Embora a Web sempre tenha sido visual, sempre teve muitas restrições a este nível, até muito recentemente o leitor estava limitado às funcionalidades disponibilizadas pelo Javascript e CSS para desenvolver animações e efeitos nos websites, acabando por se ver forçado a utilizar ferramentas que implementam plug-ins, como o Adobe Flash, para conseguir atingir o objectivo.
Agora existe uma alternativa, com a utilização de tecnologias como o Web GL, transformações 3D utilizando CSS3, imagens SVG ou Canvas, o leitor tem ao seu dispor um conjunto único de ferramentas que disponibilizam todas as funcionalidades necessárias para lidar com gráficos complexos 2D ou 3D.
Multimédia
Nos últimos anos, a Web tornou-se num recurso quase infinito de acesso a conteúdos multimédia, como não podia deixar de ser, o HTML5 suporta estas funcionalidades de forma nativa e permite que o leitor utilize conteúdos áudio e vídeo sem necessitar da utilização de qualquer plug-in para isso.
Através de um conjunto de API's é possível aceder, controlar e manipular este tipo de conteúdos. A combinação das API's de multimédia com outras funcionalidades disponível no HTML5 como CSS3, Canvas e outras, abre portas a um novo mundo de possibilidades, que até agora não eram possíveis implementar, como por exemplo, um leitor multimédia que durante a visualização de um vídeo permite alterar a localização das legendas sem interromper a reprodução.
Performance
O HTML5 disponibiliza ao leitor todas as ferramentas e funcionalidades necessárias para desenvolver aplicações Web com rapidez e performance, aplicações Web dinâmicas capazes de responder aos pedidos do utilizador com um eleva-do grau de fiabilidade e agilidade, utilizam tecnologias como Web Workers e XMLHttpRequest2 e têm uma alta capacidade de resposta, potenciam a imersão do utilizador e melhoram drasticamente a experiência de utilização durante a navegação.
As aplicações web são agora capazes de rivalizar, ao nível da performance e experiência de utilização, com as aplicações nativas e aplicações Desktop. Ao utilizar estas tecnologias, o leitor está a enriquecer de forma exponencial as aplicações web que desenvolve, tornando-as mais reactivas às acções do utilizador, transmitindo uma sensação positiva de eficiência e produtividade.
Semântica A semântica é uma dos pilares do HTML5, pretende dar um significado e compreensão à Web, utiliza para isso um conjunto de tecnologias como RDFa, Mircrodata e Microformats, juntamente com um novo conjunto de tags HTML permitem uma Web impulsionada pela informação, tornando-a mais útil e rica tanto para os utilizadores como para os programadores.
A semântica é a marca mais distintiva que o HTML5 tem relativamente a outras plataformas, a Web é maioritariamente texto, os websites e aplicações Web vivem num ecossistema onde o texto é rei, é a componente mais importante e todo ele é passível de ser referenciado e pesquisado. A capacidade de identificar, catalogar e pesquisar texto é extremamente importante, e as ferramentas autónomas não conseguem identificar facilmente a natureza e contexto de uma palavra ou frase sem a ajuda de metadados.
Se o leitor tiver ao seu alcance um conjunto de tecnologias e ferramentas que lhe permitem facilmente marcar a informação adicional de um texto, está a garantir que esse mesmo texto vai ser reconhecido com maior facilidade pelos motores de busca e vai ser identificado no contexto correcto, assim quando se executa uma pesquisa num motor de busca pela receita de Bacalhau à Duque de Palmela, num contexto de culinária, apenas lhe vão ser apresentados resultados que são relevantes dentro do contexto onde se insere a busca e não são apresentados um conjunto de resultados onde a grande maioria não corresponde ao contexto pretendido.
Representa um esforço adicional durante o processo de desenvolvimento, mas o retorno desse mesmo investimento é recuperado rapidamente.
Offline e Armazenamento
Websites mais rápidos e que funcionam mesmo quando não existe conectividade. Os termos Web e Online estão muito próximos e porque não quebrar essa dependência?
Existem um conjunto de razões para utilizar esta tecnologia como a possibilidade de o leitor utilizar a aplicação mesmo quando não existe ligação à web (ou cobertura no caso dos dispositivos móveis) e sincronizar os dados quando esta for restabelecida, ao utilizar a Aplication Cache é possível guardar dados menos voláteis ou estáticos da sessão ou do utilizador aumentado a performance e diminuindo o consumo de dados e permitindo uma melhoria significativa na performance e o peso e capacidade necessária da infra-estrutura à performance e fiabilidade das aplicações é reduzido.
Conclusão
As aplicações HTML5 permitem ao leitor estabelecer uma base de dispositivos e utilizadores maior do que qualquer outra plataforma, com um esforço de desenvolvimento e manutenção de baixo custo. Os browsers modernos estão em constante actualização e existem variadas técnicas disponíveis para minimizar a fragmentação, é uma plataforma de desenvolvimento de baixo custo, foram introduzidas funcionalidades e API's que melhoram significativamente a segurança e reduz a necessidade da utilização de plug-ins que aumentam o risco de vulnerabilidades.
O tema é sem dúvida extenso, existem um vasto conjunto de novidades e o suporte dos browsers está a melhorar muito rapidamente. Foi desenvolvido um website, disponível em http://www.brunopires.me/html5 e que disponibiliza um conjunto de demonstrações sobre algumas das funcionalidades que o HTML5 permite.
* Exerce funções de consultor de IT na Novabase desde 2008, com experiência de maior relevo nas áreas da banca e televisão digital, onde ganhou competências nas mais várias tecnologias. Membro da Comunidade NetPonto e autor de um blog.
Categorias
Entidades
Já está disponível mais uma edição da revista Programar. Neste número 34 a revista da comunidade portuguesa de programadores dá destaque de capa ao Android, mas aborda diversos outros temas, onde se inclui uma introdução ao HTML 5.
O texto é da autoria de Bruno Dias consultor e membro da comunidade NetPonto que ali explica o que é o HTML5 e para que serve, num artigo que o TeK publica abaixo, no âmbito de uma parceria com a revista.
Este e os restantes temas desenvolvidos na edição 34 da revista estão disponíveis online para consulta gratuita, através deste link.
Introdução ao HTML 5
Por Bruno Pires *
A primeira recomendação que o consórcio W3C publicou sobre HTML4 foi em Dezembro de 1997. Por esses dias existia uma luta que pretendia determinar qual o browser e tecnologia que iria dominar a web durante os próximos anos, o Internet Explorer acusava a versão 4 e a Internet começava a entrar na curva da exponencial.
A especificação que vigorou durante tantos anos acusava já o peso da sua idade. Durante esse tempo rebentou uma bolha, a Web reinventou-se numa versão 2.0 e neste momento vivemos a Web social em tempo real.
O que é o HTML5?
A especificação do HTML5 pretende, quando chegar a uma versão final, unificar a forma de desenvolver a apresentar ao utilizador páginas e aplicações Web.
Para atingir esse objectivo, foi desenvolvido um novo conjunto de tags HTML, API's de Javascript e incluída a última versão de Cascading Style Sheets (CSS3) que permite ao leitor criar aplicações Web complexas.
Estas tecnologias disponibilizam um conjunto alargado de funcionalidades inovadoras, como o suporte a armazenamento de dados no cliente. Por outro lado unificam diferentes formas de implementar funcionalidades que são utilizadas numa larga maioria de websites ou aplicações Web, como é o caso da validação de formulários.
Quais os browsers que suportam HTML5?
É uma pergunta sem resposta simples, existem neste momento um conjunto de browsers no mercado que mantêm uma quota de mercado relevante (Internet Explorer, Mozilla Firefox, Google Chrome, Opera, etc..), para cada um desses browsers existem as suas diferentes versões e cada uma dessas versões pode ter diferenças no suporte das funcionalidades HTML5.
Neste momento o browser com melhor suporte de HTML5 é o Google Chrome, no entanto existem um conjunto alargado de browsers com bom suporte HTML5, como é o caso do Internet Explorer 9, Mozilla Firefox ou Opera.
Neste momento a especificação do HTML5 não está fechada nem existem no mercado browsers que implementam completamente a especificação mais recente da W3C.
Para solucionar este problema utiliza-se uma abordagem simplificada, o leitor apenas necessita de validar se o browser que visita o website suporta as funcionalidades HTML5 nele utilizadas, simplificando-se assim o processo de validação e suporte do browser.
Existem várias formas implementar este tipo de validação, a mais popular é a biblioteca de Javascript Modernizar, que valida de forma simples a maioria das funcionalidades utilizadas na especificação HTML5 e CSS3.
Tecnologias A W3C divide em oito classes as novas tecnologias que estão incorporadas no HTML5. Classificação das tecnologias HTML5
Conectividade
Uma conectividade mais eficiente significa que existem um novo conjunto de funcionalidades que se podem explorar ou até melhorar com a utilização de melhores, mais rápidas e eficientes formas de comunicação entre cliente e servidor. A utilização de Web Sockets e Server-Sent Events permite uma melhoria significativa na performance e experiência de utilização, como aplicações Web que disponibilizam informação em tempo real.
Estilos
Com a utilização de CSS3, nunca foi tão fácil desenvolver websites e aplicações Web com um design atractivo utilizando HTML. Existe um conjunto de novas tecnologias e extensões nesta nova versão de CSS, como transições, transformações (2D e 3D) e suporte de tipografia para a Web (Web Fonts) que permitem que esse objectivo seja uma realidade.
Com CSS3 é possível implementar um conjunto de estilos e efeitos que permitem desenvolver aplicações com as últimas tendências do design Web, sem prejudicar a estrutura semântica ou performance. O suporte de novos tipos de tipografia, através de CSS3 @font-face, e o formato WOFF (Web Open Font Format) permitem flexibilidade, controlo criatividade como nunca foi possível.
Acesso a componentes e periféricos
A Web não termina no browser, estende-se para lá dele e passa a oferecer suporte a componentes e acesso a periféricos como, suporte de geolocalização, orientação do ecrã, acesso ao microfone e input de áudio e vídeo, além disso oferece suporte para aceder aos contactos e eventos que o leitor guarda na sua agenda.
Gráficos e 3D
Embora a Web sempre tenha sido visual, sempre teve muitas restrições a este nível, até muito recentemente o leitor estava limitado às funcionalidades disponibilizadas pelo Javascript e CSS para desenvolver animações e efeitos nos websites, acabando por se ver forçado a utilizar ferramentas que implementam plug-ins, como o Adobe Flash, para conseguir atingir o objectivo.
Agora existe uma alternativa, com a utilização de tecnologias como o Web GL, transformações 3D utilizando CSS3, imagens SVG ou Canvas, o leitor tem ao seu dispor um conjunto único de ferramentas que disponibilizam todas as funcionalidades necessárias para lidar com gráficos complexos 2D ou 3D.
Multimédia
Nos últimos anos, a Web tornou-se num recurso quase infinito de acesso a conteúdos multimédia, como não podia deixar de ser, o HTML5 suporta estas funcionalidades de forma nativa e permite que o leitor utilize conteúdos áudio e vídeo sem necessitar da utilização de qualquer plug-in para isso.
Através de um conjunto de API's é possível aceder, controlar e manipular este tipo de conteúdos. A combinação das API's de multimédia com outras funcionalidades disponível no HTML5 como CSS3, Canvas e outras, abre portas a um novo mundo de possibilidades, que até agora não eram possíveis implementar, como por exemplo, um leitor multimédia que durante a visualização de um vídeo permite alterar a localização das legendas sem interromper a reprodução.
Performance
O HTML5 disponibiliza ao leitor todas as ferramentas e funcionalidades necessárias para desenvolver aplicações Web com rapidez e performance, aplicações Web dinâmicas capazes de responder aos pedidos do utilizador com um eleva-do grau de fiabilidade e agilidade, utilizam tecnologias como Web Workers e XMLHttpRequest2 e têm uma alta capacidade de resposta, potenciam a imersão do utilizador e melhoram drasticamente a experiência de utilização durante a navegação.
As aplicações web são agora capazes de rivalizar, ao nível da performance e experiência de utilização, com as aplicações nativas e aplicações Desktop. Ao utilizar estas tecnologias, o leitor está a enriquecer de forma exponencial as aplicações web que desenvolve, tornando-as mais reactivas às acções do utilizador, transmitindo uma sensação positiva de eficiência e produtividade.
Semântica A semântica é uma dos pilares do HTML5, pretende dar um significado e compreensão à Web, utiliza para isso um conjunto de tecnologias como RDFa, Mircrodata e Microformats, juntamente com um novo conjunto de tags HTML permitem uma Web impulsionada pela informação, tornando-a mais útil e rica tanto para os utilizadores como para os programadores.
A semântica é a marca mais distintiva que o HTML5 tem relativamente a outras plataformas, a Web é maioritariamente texto, os websites e aplicações Web vivem num ecossistema onde o texto é rei, é a componente mais importante e todo ele é passível de ser referenciado e pesquisado. A capacidade de identificar, catalogar e pesquisar texto é extremamente importante, e as ferramentas autónomas não conseguem identificar facilmente a natureza e contexto de uma palavra ou frase sem a ajuda de metadados.
Se o leitor tiver ao seu alcance um conjunto de tecnologias e ferramentas que lhe permitem facilmente marcar a informação adicional de um texto, está a garantir que esse mesmo texto vai ser reconhecido com maior facilidade pelos motores de busca e vai ser identificado no contexto correcto, assim quando se executa uma pesquisa num motor de busca pela receita de Bacalhau à Duque de Palmela, num contexto de culinária, apenas lhe vão ser apresentados resultados que são relevantes dentro do contexto onde se insere a busca e não são apresentados um conjunto de resultados onde a grande maioria não corresponde ao contexto pretendido.
Representa um esforço adicional durante o processo de desenvolvimento, mas o retorno desse mesmo investimento é recuperado rapidamente.
Offline e Armazenamento
Websites mais rápidos e que funcionam mesmo quando não existe conectividade. Os termos Web e Online estão muito próximos e porque não quebrar essa dependência?
Existem um conjunto de razões para utilizar esta tecnologia como a possibilidade de o leitor utilizar a aplicação mesmo quando não existe ligação à web (ou cobertura no caso dos dispositivos móveis) e sincronizar os dados quando esta for restabelecida, ao utilizar a Aplication Cache é possível guardar dados menos voláteis ou estáticos da sessão ou do utilizador aumentado a performance e diminuindo o consumo de dados e permitindo uma melhoria significativa na performance e o peso e capacidade necessária da infra-estrutura à performance e fiabilidade das aplicações é reduzido.
Conclusão
As aplicações HTML5 permitem ao leitor estabelecer uma base de dispositivos e utilizadores maior do que qualquer outra plataforma, com um esforço de desenvolvimento e manutenção de baixo custo. Os browsers modernos estão em constante actualização e existem variadas técnicas disponíveis para minimizar a fragmentação, é uma plataforma de desenvolvimento de baixo custo, foram introduzidas funcionalidades e API's que melhoram significativamente a segurança e reduz a necessidade da utilização de plug-ins que aumentam o risco de vulnerabilidades.
O tema é sem dúvida extenso, existem um vasto conjunto de novidades e o suporte dos browsers está a melhorar muito rapidamente. Foi desenvolvido um website, disponível em http://www.brunopires.me/html5 e que disponibiliza um conjunto de demonstrações sobre algumas das funcionalidades que o HTML5 permite.
* Exerce funções de consultor de IT na Novabase desde 2008, com experiência de maior relevo nas áreas da banca e televisão digital, onde ganhou competências nas mais várias tecnologias. Membro da Comunidade NetPonto e autor de um blog.