Google Mobilegeddon

Amanhã haverá uma  mudança rara no algoritmo de busca do Google, isso significa que algumas alterações drásticas no ranking dos resultados da pesquisa ocorrerá.

A mudança tornará os resultados de pesquisa do Google mais úteis para as pessoas que o utilizam em sistemas mobile. Ou seja, o algoritmo irá premiar sites com os projetos da “mobile-friendly” e empurrar para baixo aqueles que não são otimizados para visualização em dispositivos móveis. Essa mudança tem causado grandes aflições para os desenvolvedores, e já até ganhou o apelido de “Mobilegeddon“.

Mas o que seria um site não-otimizado? Uma explicação rápida seria imaginar que ao tentar visualizar um um site em seu telefone e ele necessitar a manipulação do “Zoom in” ou “Zoom out”. Situação bem chata que o Google tentará modificar.

Para testar se um determinado site serão afetados pela mudança, o Google construiu um site que permite que você conecte em uma URL e ver se o algoritmo irá puni-lo por seu design. O site para o teste é: https://www.google.com/webmasters/tools/mobile-friendly/

Então, o que isso significa para você? Se você estiver usando o Google no seu telefone,  essa experiência ficará ainda melhor. Se você é um desenvolvedor e não tem certeza que seu site é “mobile friendly” use o site indicado para inspecionar e corrigir o que for necessário.

Fonte: GizModo

Ferramenta para escolha de cores

A combinação de cores para compor um layout pode ser algo simples para alguns, mas podem ser uma etapa complexa para muitos, para auxiliar nesta etapa complexa existem algumas ferramentas que montam uma paleta de cores indicadas para seu layout, as mais conhecidas são http://paletton.com/ e http://colorschemer.com/  que recebe um código hexadecimal da cor principal e automaticamente retorna as demais cores que harmonizam.

demo-paletton
Demo na ferramenta paletton

 A segunda ferramenta citada acima, a Color Schemer, oferece até mesmo algumas combinações de cores já prontas para inspirar os exploradores do site, além disso, fornece  uma versão do aplicativo para mobile.

E vocês já usaram alguma destas ferramentas? Deixe suas experiências ou dúvidas aqui nos comentários.

Editores para criar arquivos HTML

Uma pergunta muito comum em minhas aulas é qual o editor mais indicado para criar arquivos HTML, seja para criar páginas simples com hiperlinks ou até mesmo criar páginas com JavaScript e CSS que modificam os elementos adicionados na página.  Esta pergunta é bem difícil de responder, isso devido a grande variedade de editores disponíveis além da preferência de cada programador por características que mais são usadas.

Para iniciar, o editor mais comum e disponível é o notepad, um pouco além disso e com mais funcionalidades temos o notepad++. Ambos editores são leves e criam arquivos diversos (HTML, CSS, JS, entre outros comuns do dia a dia), o notepad ++ oferece algumas ferramentas que podem ser associadas e auxiliar o desenvolvedor em alguns pontos (comparação de código por exemplo).

Algumas opções mais rápidas e atualizadas estão disponíveis online e apresenta os resultados em tempo real, são eles:

  • http://htmledit.squarefree.com/
  • http://www.htmlinstant.com/
  • http://scratchpad.io/
  • http://cssizer.com/
  • http://codepen.io/pen

Se você conhece algum destes editores ou tem alguma dica não deixe de comentar aqui.

 

A tag audio do HTML 5

A reprodução de sons na web, embora este recurso esteja presente no HTML5 ele ainda não foi perfeitamente integrado em todas as variantes de navegadores Web disponíveis, de modo que nem sempre o que funciona em um “browser” poderá funcionará em outro.
Isto se aplica principalmente em relação aos tipos de arquivo de áudio que cada navegador é capaz de reproduzir.

Formatos de áudio suportados nos principais “browsers”
BrowserOggMP3WAV
FireFox 3.6+OKOK
Safari 5+OKOK
Chrome 6OKOK
Opera 10.5+OKOK
Internet Explorer 9 (beta)OKOK

 

Pela tabela acima é possível notar que não existe um formato de áudio que seja ao mesmo tempo compatíveis com todos os navegadores. Deste modo, precisaremos nos preocupar com esta limitação ao codificarmos nossos jogos ou aplicativos em HTML5 que fazem uso de áudio.

<audio id="som" src="motor.ogg"></audio>

Esta nova “tag”é usada para carregar o arquivo de áudio chamado “motor.ogg”. Neste caso o arquivo de áudio deverá estar no mesmo diretório do arquivo “html” para funcionar. Uma alternativa seria utilizarmos uma “URL” para carregarmos o áudio diretamente de um endereço na internet. Da forma como carregamos o arquivo de áudio ele funcionará apenas nos navegadores Firefox, Chrome e Opera, pois são os únicos a fornecerem suporte ao formato “ogg”.

<audio id="som">
    <source src="motor.ogg"/>
    <source src="motor.mp3"/>
</audio>

Desta forma é possível que os arquivos de seja reproduzido em diferentes navegadores de acordo com o formato de arquivo suportado por cada um. Quando um navegador específico não suportar um tipo de arquivo, ele tentará carregar um dos outros listados. Deste modo, em nosso exemplo, o som de motor poderá ser reproduzido nos navegadores Firefox, Chrome e Opera (formato “ogg”) e também nos navegadores Safari e Internet Explorer (formato “mp3″).

A grande desvantagem desta técnica é que precisamos ter nosso som gravado em diversos formatos diferentes para cada navegador desejado.

Para acessar o elemento áudio através do JavaScript basta usar as seguintes linhas de código:

<script>
   var som = document.getElementById("som");
</script>

Vale lembrar que o elemento deve ser chamado exatamente da forma com que foi definida o id, portanto nas linhas de código acima o id do elemento áudio deve ser som.

var som = document.getElementById("som");
som.play();

A instrução “play” da variável “som” que referencia nosso áudio.

Quando esta linha de código é executada o arquivo de áudio é executado uma única vez, sendo interrompido quando o mesmo chega ao seu final

var som = document.getElementById("som");
    addEventListener("ended", function(){
      som.currentTime = 0;
      som.play();
    }, false);
som.play();

A instrução “addEventListener” da variável “som” permite que identifiquemos o “status” do som que está sendo reproduzido, de modo que sejamos capazes de identificar o momento em que ele terminou informando no primeiro parâmetro da instrução o valor “ended”.

Deste modo, quando a reprodução do som chegar ao seu final (ended) a função apresentada no segundo parâmetro será executada. Neste caso, posicionamos o som novamente em seu início utilizando a instrução “som.currentTime = 0″ e em seguida ele volta a ser reproduzido com “som.play()”.

O terceiro parâmetro definido como “false” indica que queremos aplicar o conteúdo da função apenas ao evento “ended” de nossa variável “som”. Agora podemos reproduzir o som pela primeira vez com a instrução “play” e o mesmo será executado continuamente.

Se você já usou esta tag e tem alguma dica ou dúvida, não esqueça de deixar seu recado aqui.

Ferramenta de auxílio na depuração do código

A rotina de um desenvolvedor de aplicações web / website/ jogos dentre outro destinados aos navegadores muitas vezes se resume em criar um documento, salvar e abrir no navegador para visualizar os resultados, parece simples, mas a correção de algumas informações ou até mesmo testes faz com que este processo se repita muitas vezes até que o resultado final seja adequado.Uma das ferramentas que podem auxiliar este processo é o Firebug, que na verdade é uma extensão para navegadores que permite que você edite, encontre erros e monitore sites em tempo real.

A instalação desta extensão é bem simples e rápida, para isso, basta acessar a versão desejada (atualmente é possível instalar o Firebug no Firefox e no Google Chrome).  Para instalar o Firebug, basta visitar o site da extensão:

Após a instalação, o ícone do Firebug será mostrado desta forma:

firebug-firefox
Firebug no Firefox

 

firebug-chrome
Firebug no Google Chrome

 

Após acionar a extensão do Firebug (pode ser clicando no item apontado nas imagens acima ou pressionando o F12), basta usar o elemento de inspeção que será apresentado na parte inferior da tela, esta interação será a mais simples, e após a seleção de algum elemento da tela, poderá ser feito modificações nos elementos (HTML, CSS, ou até mesmo no Javascript), as modificações realizadas nesta etapa são apenas para visualização imediata, isso significa que ao fechar o navegador ou atualizar  a página a página original será carregada.

inspeção
Elemento de inspeção

Além disso, o Firebug é muito usado também para analisar se o seu site não está consumindo muita banda do servidor, para verificar isso, basta abrir o site, iniciar o Firebug e clicar em Rede para visualizar todos os dados enviados pelo site. Nesta análise,  é possível visualizar  os arquivos que foram carregados do site, o tempo que demorou a carregar cada arquivo, o tamanho total dos arquivos carregados e o tempo total que levou para abrir o site. Além disso, caso algum arquivo não estiver carregado corretamente, mensagens em vermelho serão apresentadas.

Estes foram alguns destaques  do Firebug, se você tem alguma experiência com esta ferramenta ou alguma dúvida, deixe seu recado aqui.

 

Um pouco sobre JavaScript e desenvolvimento em camadas

Em um post anterior, mostrei que o HTML não é uma linguagem de programação, e sim apenas uma linguagem de marcação de texto, que destina-se especificamente para estruturas um documento web e que não tem a responsabilidade de cuidar da apresentação visual e não possui funcionalidades que permitem a interatividade avançada às páginas, tarefa destinada às linguagem de programação.

O Javascript faz parte das linguagens de programação que podem auxiliar na interação da página, foi criada em 1995 e implementada em 1996 no navegador Netscape Navigator 2.0. Linguagem desenvolvida para rodar ao lado do cliente (ao contrário das linguagens como PHP, ASP, JAVA que rodam do lado do servidor) ou seja, toda a interpretação e funcionamento desta linguagem dependem das funcionalidades hospedadas no navegador do usuário. Resumidamente, a linguagem JavaScript necessita apenas de um navegador para que seus script sejam executados, ao contrário de linguagens como PHP que necessitam de um servidor local com suporte ao PHP.

Com o JavaScript é possível manipular os elementos em HTML que compõe a página, e até mesmo escrever códigos em HTML, porém a escrita de HTML através do JavaScript não está presente nos Padrões Web atuais, isso por que a página web tem que manter a boa experiência para o usuário mesmo com a ausência do interpretador de JavaScript no navegador. Além de definir, alterar e controlar de forma dinâmica a apresentação de um documento HTML, é possível manipular também o CSS (folha de estilo) associada ao documento criando novas regras ou anulando outras já existentes.

Alguns formas de utilização desta linguagem são consideradas inadequadas e ultrapassadas, isso porque as restrições e manipulações na janela (abrir, fechar, pop-up, entre outros) acabam com a boa experiência dos usuários, além de não contribuir para a acessibilidade e usabilidade do documento web.

Ao contrário do conceito antes dos Padrões Web, atualmente a linguagem JavaScript é usada lado a lado com a usabilidade e acessibilidade, com isso alguns efeitos desnecessários não são mais usuais (imagens que piscam, imagens acompanhando mouse na tela, objetos voando, entre outras coisas). O conceito de divisão do desenvolvimento em camadas também mostra aos desenvolvedores que o JavaScript não deve adicionar códigos  HTML no documento, não alterando também a camada de apresentação (onde está o CSS).

Seguindo o conceito de desenvolvimento dividido em camadas, o desenvolvimento deve passar por três etapas, a primeira consiste na estruturação onde se desenvolverá todo o HTML do documento, ao termino desta etapa todos devem estar aptos a acessar o conteúdo apresentado sem restrições, a segunda etapa de desenvolvimento é a aplicação de estilo para configurar a apresentação do conteúdo, a terceira e  última etapa é a aplicação de códigos em JavaScript que devem auxiliar na interação e boa experiência do usuário com o documento. Todas estas etapas estarão ligadas através de links o que possibilita aos desenvolvedores mais padronização, mais reutilização e reaproveitamento de código, além de facilitar a busca por eventuais problemas ou alterações que podem surgir ao longo das atualizações da página.

 

 

 

Dicas para certificação 70-480 – Developing in HTML5 with JavaScript and CSS3 (Parte 3)

Após ressaltar as definições dos seletores, é hora de relembrar conceitos básicos sobre a aplicação de cores, estilos de fonte, além de relembrar conceitos simples de organização de página, propriedades de texto e uma pincelada de jQuery.

  • Propriedades de texto

Aplicar configuração de texto através do CSS é algo simples e intuitivo, depois de selecionado a área que irá receber o estilo (pode ser um paragrafo, uma tabela, uma div, entre outros) basta definir suas cores, sua formatação (podendo ser negrito, itálico) além do tamanho e tipo de letra. Outro ponto a se destacar é a possibilidade de definição do alinhamento, espaçamento entre letras, e qualquer outra formação que seja necessário (até mesmo selecionar a primeira letra para mantê-la maior).

A definição de cores pode ser através do nome (red, blue, Green, entre outras), através de uma hash hexadecimal (#000, #fff, #646464) nata-se que a formação de três dígitos é devido a repetição dos dígitos, lembrando também que F significa branco, e 0 preto.Outra forma de definição das cores é através de rgb(a) onde a significa alpha, ou opacidade, também conhecido como transparência. A última e a menos comum é a definição de cores por hsl(a).

Exemplos:

Color: red;

Color: #fff;

Color: rgb(0,0,255) ou rgba(0,0,255,0,2)

Color: hsl(0,50%,50%)

As configurações de texto são conhecidas como

  • text-decoration: none; deixa a fonte sem nenhuma configuração;
  • text-transform: uppercase; transforma a letra em caixa maior;
  • text-shadow: 2px 2pxred; aplica sombra na fonte;

Há também as configurações das propriedades das fontes onde se define o style, variant, weight, height, family, shortland.

A aplicação de uma propriedade CSS marcada como !important será sempre levada em consideração, mesmo que alguma outra propriedade tente se sobressair:

P{color: red !important}

P{color:blue}

  • Propriedade de BOX

Para a estilização de um documento, é importante lembrar que a sequencia é a seguinte Offset>Margin>Border>Padding>Content

Em questão de visibilidade algumas propriedade do css são disponibilizadas, são elas:

  • Display: é a propriedade que define como o elemento será renderizado, podendo ser block, inline, none, entre outros.

Um elemento pode ser considerado um bloco e fica sempre um embaixo do outro, são tags como <h1><p><div>, há também os elementos de linha, que ficam um em frente ao outro como o <span><a>. Frequentemente é necessário trocar estas funcionalidades, para isso basta informar display:block; ou display:inline; o primeiro fará com que os elementos fiquem um abaixo do outro, e o segundo fará com que os elementos fiquem um em frente ao outro.

  • Visibility: é a propriedade que define se o elemento em questão será visível ou não em um documento. Para deixar um elemento escondido em seu documento, é possível informar o display:none ou visibility: hidden;
  •      OutLine: é a configuração que cria bordas em volta do conteúdo, fora da borda, é possível configurar as cores, tamanho, largura e estilo.

Há também as novas propriedades do css para definição de bordas arredondadas e gradientes entre cores, que foram aprimoradas com a chegada do css3.

  •    Flexbox: é uma forma de organizar os elementos filhos horizontal ou verticalmente, é muito utilizado no layout do win8. É possível também fazer a divisão do espaço disponível para os elementos filhos em questão. Mais informações http://www.html5rocks.com/pt/tutorials/flexbox/quick/
  •      Multi-column:foi introduzido no layout do Windows 8 e possibilita a organização das informações em colunas como de jornal.
  • Position: A organização dos elementos de um documento é feita através da propriedade position (antes de posicionar é necessário definir qual tipo de posicionamento será, podendo optar por posicionamento relativo ou absoluto)
  • Grid alignment: algo semelhante a utilização de tabelas, mas implementadas através do CSS, o que permite uma estrutura limpa de formação de estilo.

Algumas propriedades que podem ser aplicadas através do CSS são referentes aanimação  (transform) dos elementos. Com a definição desta propriedade, é possível fazer com que os elementos sejam alterados de acordo com as seguintes propriedades:

  • Rotate: irá mudar a angulação do item selecionado.
  • Skew: alonga verticalmente.
  • Scale(2): amplia o item de acordo com a escala informada.
  • Translate: afasta-se das bordas.

Transform: modifica a forma que define o seguimento que irá levar para o próximo evento.

jQuery

jQuery é um framework baseado em javascript com o intuito de facilitar a escrita e manipulação dos elementos em um documento. Sua sintaxe mínima envolve o $ que simboliza e define o jQuery, um elemento que será selecionado e uma ação. $(‘elemento’).acao()

A manipulação dos elementos de uma página pode ser feita através de jQuery.  Para selecionar os elementos basta utilizar o esquema $(‘elemento’). Este elmento pode ser um classe, um identificador, atributos, pseudo-elemento ou até uma pseudo-classe.  Segue exemplo de seletores em jQuery:

$(“#id”) – seleciona através do id

$(“.class”) – seleciona através da classe

$(“p”) – seleciona através do elemento

$(“div p:first-child”) –seleciona através de pseudo elementos

$(“:focus”) – seleciona através de pseudo classes

Após a seleção do elemento, é possível aplicar ações no elemento selecionado, basta acrescentar o ponto em frente ao elemento e atribuir a ação, abaixo um exemplo de aplicação da ação hide() para inibir elementos.

$(“p”).hide() – esconde o todo conteúdo presente na tag<p>

$(“p”).show() – mostra o conteúdo presente na tag<p>

$(“p”).click(function(){

                Alert(“mouse clicked”);

}); – ação do clique do mouse

É possível também manipular o estilo dos elementos relecionados, basta adicionar o .css(“nome da propriedade”,”valor”), em um simple exemplo:

$(“p”).css(“background-color”,”red”); desta forma se atribui a cor de fundo ao elemento <p>

 Se necessário pode aplicar diversas propriedades de CSS, basta separar por virgular e a atribuição do valor será feita por dois pontos, da seguinte forma:

$(“p”).css(“propriedade”:”valor”, “propriedade”:”valor”);

Mais informações sobre os seletores de jQuery: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Dicas para certificação 70-480 – Developing in HTML5 with JavaScript and CSS3 (Parte 2)

CSS selector + style properties

A aplicação de estilo a uma parte do documento depende dos seletores, eles são essenciais para que um determinado estilo seja aplicado de acordo com a necessidade do desenvolvedor, a partir disso surgem diversas formas de seleção, permitindo que aplique-se um estilo por TYPE, CLASS, ATTRIBUTE entre outros. A seguir mais informações sobre cada forma de seleção.

  • Type selector: Atribuir um estilo por type é definir no CSS que toda configuração irá ser modificada de acordo com o tipo da tag que deseja-se atingir, isso em todos os documentos referenciados com a folha de estilo. O tipo é considerado o nome do elemento, que pode ser um link (a) um paragrafo (p) entre outros diversos tipos.
  • A aplicação deste estilo é feita da seguinte forma:

Table { color: red;}

Ul {color: red;}

Nota-se que no código css basta informar o nome da tag desejada.

  • Class selector: atribuir um estilo de acordo com a classe definida, significa que o desenvolvedor criará um classe de acordo com o perfil do estilo desejado, e com apenas uma chamada na folha de estilo ira modificar todos os elementos que estão identificados com a classe em questão.
  • A aplicacao deste estilo é feita da seguinte forma:

<imgsrc=”” class=”imagens_destaque”>

.imagens_destaque{border: 1px solidred; }

*.imagens_destaque{ border: 1px solidred; } * significa universal selector e se aplica a todas as classes

Nota-se que para atribuir o estilo é necessário fazer a chamada com . (ponto) desta forma se entende que está chamando uma classe. Esta forma é conhecida como chamada universal e é considerada para diversas tags, caso queira informar o nome da tag basta informaro type.classname.

http://en.kioskea.net/contents/css/cssclass.php3

  • Attribute selector: aplica um estilo de acordo com os atributos informados na tag html.

<input type=”…” required>

[required] {color: red}

O código acima informa que todos os campos que possuem o atributo required terá o css aplicado. É possível utilizar alguns símbolos para seleção de atributos, $ = no final; ^ = no início; * em qualquer parte (utiliza-se quando o atributo recebe um nome, ex: data-autor=”aline”)

  • Referedby id:para aplicar estilo em alguns elementos isolados, usa-se a referencia por identificação, desta forma, o programador inicia a aplicação do css com #idenificador, e no documento html informa o id=identificador. Ex: #identificador{color:red;}
  • Pseudo Classes: são usados para aplicar estilos em tags de acordo com alguma reação ou evento, ao contrários das classes, as pseudo-classes são pre definidas e não permite a personalização dos seus nomes e chamadas. Existe diversos tipos de pseudo-classes, são elas:
  • Dynamic pseudo-classe: utilizado para mudar o estilo de algum elemento quando um evento ocorre, é o caso de alteração de estilo em um clique, ou no instante que o mouse passa-se em um link. EX: a:houver{ border: 2px;}

Uma observação é que este tipo de pseudo-classe não é renderizado da mesma forma para todos os navegadores.

  • Link pseudo-classe: este tipo é usada especificamente paraa tag<a>, e possibilida a aplicação de estilo quando um link está clicado ou não . EX: a:link{ color:red;}  ea:visited{color:red}
  • Pseudo-Classes descendentes:este selector é utilizado quando é necessário aplicar o estilo em alguns elementos filhos (como por exemplo, apenas o primeiro parágrafo). Ex: P > A:first-child {color: #00FF00;}
  • Page, language e text :  criados para utilização personalizada
  • Pseudo Elemento: usados para adicionar efeito a um selector, os pseudo elementos são uteis quando se quer definer diversos estilos para um element em uma mesma página.
  • First-letter: utilizado para aplicar um estilo especial na primeira letra. EX: p::firt-letter{ color: red; }
  • First-line: utilizado para aplicar um estilo especial para a primeira linha. EX: p::first-line{color:red}
  • http://reference.sitepoint.com/css/css3psuedoclasses

As APIs do HTML 5

A formação do HTML5 não envolve apenas as novidades de marcação, mas sim diversas novidades em APIs que podem auxiliar na construção de uma aplicação e podem ser acessadas via javascritp, abaixo algumas das APIs e suas principais funções e aplicações. (Lembrando que neste tópico serão apresentadas apenas as APIs que não estão definidamente no core do HTML5, como canvas ou drag in drop, mas sim das APIs que são desenvolvidas e estão bem relacionada complicação com a linguagem HTML5).

  • StorageAPIs: Através das APIs destinadas ao armazenamento de informações, é possível registrar informações sem a utilização de cookies, o que permite mais segurança e agilidade. É possível armazenar grandes quantidades de dados, sem afetar o desempenho do site em questão. Uma vantagem na utilização de armazenamento no client-side, é que o aplicativo poderá ser utilizado caso o usuário esteja off-line. Um ponto negativo é que estes dados podem se mostrar mais vulneráveis, porém o desempenho desta aplicação é muitas vezes melhor do que o salvamento de informações do usuário no servidor, através de upload.http://www.adobe.com/devnet/html5/articles/html5-storage-apis.html
  • AppCache API: Com esta API torna-se fácil a construção de uma aplicação off-line, o que permite que o usuário acesse e utilize a aplicação mesmo sem acesso a internet. Há diversas vantagens para a utilização desta API, sendo a possibilidade já listade de manter a aplicação mesmo off-line, a agilidade que o cache proporciona, além da redução do carregamento do servidor.http://www.w3schools.com/html/html5_app_cache.asp
  • Geolocation API:esta é uma API que informa para a aplicação os dados de localização que o usuário se encontra. É importante ressaltar que estas informações só são apresentadas caso o usuário aceite o compromisso de privacidade.

Dicas para certificação 70-480 – Developing in HTML5 with JavaScript and CSS3 (Parte 1)

Logo em Janeiro deste ano (2013) me preparei para a prova de certificação 70-480 focada em Desenvolvimento em HTML5 com JavaScript e CSS3, realizei a prova na People em Campinas-SP e foi uma ótima experiência, o conteúdo oferecido para estudo é um material rico e interessante para quem precisa da visão geral sobre desenvolvimento para a Web. Neste poste vou levantar os principais tópicos que estudei para a prova, e ressaltar alguns conteúdo que foram explorados em minha avaliação

Implementando e manipulando estruturas de documentos e objetos

A fim de esclarecer o que significa realmente a estrutura e semântica de um documento (antes mesmo de discutir como manipular) é necessário revisar que o HTML5 é uma ressalva de partes de códigos que deram certo, considerando que sua formação atual é fruto da transformação das classes que eram utilizadas como divs para descrever cabeçalhos, menu, rodapés e agora são novas tags estruturais.  Resumidamente a estrutura de uma página construída com os novos conceitos aplicados é o resultado da transformação de divs que antes eram criadas por cada desenvolvedor para representar as partes do código como header, nav, footer, article, section, aside, entre outras divs que se transformaram em tags <header>, <nav>, <footer>, <article>, <div>, <section>, <aside>, entre outras.

A utilização das novas tags são propostas para a formação de documentos desta forma:

<header>Responsável por definir o cabeçalho da página ou de uma sessão, este elemento representa um grupo de introdução ou elementos de navegação. Pode ser utilizados para agrupar índices de conteúdos, campos de busca ou até mesmo logotipos. (W3C, 2011).

<nav>Responde pela seção de navegação em um documento HTML 5. É uma seção que contém links para outros documentos ou partes dentro do documento atual (W3C, 2011).

<section>define as seções em um documento, tal como capítulos, cabeçalhos, rodapés ou outras seções do documento.

<article> Representa uma seção que consiste em uma composição ou itens pertencentes a uma parte independente de um documento, como uma postagem de fórum, uma revista ou artigo de jornal, ou qualquer outro item de conteúdo não dependente que se apresente completo ou faça sentido por si só. (W3C, 2011).

<aside> Representa a um bloco de conteúdo que referencia os dados que estão em sua volta e que poderia de certa forma ser considerado separado do conteúdo do documento. (W3C, 2011).

<footer>Representa o rodapé de um documento e é o último elemento antes de fechar a tag HTML, geralmente contém metadados sobre o fechamento de sua seção, como autor, links para documentos relacionados, os dados de copyright, etc. (W3C, 2011).

Os formulários também ganharam algumas funcionalidades e com isso criar campo para inserção de dados ficou um pouco mais simplificado, com a chegada do HTML5 a tag input recebeu algumas atualizações que pretende deixar as páginas imunes a erro de digitação e incompatibilidade de dados. Quando é necessário dizer que um campo é obrigatório, basta informar na tag<input> que ele é required. Para adicionar uma máscara ao campo (facilitando o estabelecimento de dados padrões para entradas de usuários) basta utilizar o pattern. Ainda para auxiliar o usuário, é possível escrever na caixa de texto o que é indicado para seu preenchimento, com isso basta informar o placeholder.

<form>

<input >

Algumas propriedades:

 

Type: pode definir que a entrada será uma url, tel,search, number, entre outros;

 

Required: define que o campo é obrigatório;

Placeholder: adiciona uma mensagem ao fundo da caixa de texto, ex: “digite seu e-mail”;

Pattern: define uma mascara de entrada de dados e evita que os dados sejam inconsistentes. Ex: “ddd”;

</form>

Códigos que interagem com controles

Novos elementos foram introduzidos no HTML5, com a finalidade de simplificar e unificar a forma de adicionar vídeos e áudios em um documento web. Com isso, surgem as tags <áudio> e <vídeo>.

A tag/controle <áudio> introduz arquivos com as seguintes extensões: mp3, ogg, wav. A tag/controle <vídeo> introduz arquivos com as seguintes extensões: mp4. Ambos os controles foram criados para dispensar a utilização de plug-ins complexos que eram necessários ao reproduzir um áudio ou vídeo.

Desenhar em documentos tornou-se possível através da inclusão da tag <canvas> e <svg>. A primeira habilita um espaço para desenhar com javascript. Resumidamente é adicionado a tag<canvas> no código HTML e atribui um Id, através deste Id será possível manipulá-lo por javascript – getElementebyId(“Id do canvas”), este elemento é utilizável para a construção de jogos e animações. A segunda opção escreve gráficos em vetores e não requer a utilização de javascript.

Para definir quando usar canvas ou svg basta pensar que canvas será utilizado apenas para desenhar, svg transforma-se em objetos. Games utilizam canvas, pois garante um melhor desempenho.

A tag vídeo conta com um atributo poster que após informar uma imagem, ficará visível enquanto não se clicar no play.

Discutindo HTML5

O jogo desenvolvido no post anterior utilizou os conceitos elementares da linguagem, apenas incorporando o elemento canvas na estrutura principal do documento, programação com a linguagem JavaScript e configurando alguns itens de layout  através de CSS. Este jogo representa um padrão, pois poderá ser executado em todos os computadores e dispositivos moveis que contenham seus navegadores atualizados.

Com o HTML 5 não há necessidade de executar plugins de proprietários como o Flash, que é constantemente considerado uma ameaça de segurança devido a seus erros e vulnerabilidades.

Para os desenvolvedores, não será necessário aprender uma linguagem de programação específica para um dispositivo, pois deverá criar aplicativos e jogos para diversos interpretadores. O resultado será jogos de alta qualidade que podem ser jogados em qualquer lugar.

A compatibilidade com os navegadores pode ser considerada um dos pontos mais críticos para a nova linguagem, isso devido ao fato de que seu grande fluxo de atualizações faz com que os navegadores precisem de adaptações para a interpretação correta do aplicativo ou jogo. E é por conta deste ponto que alguns jogos podem funcionar perfeitamente em um navegador, e nem se quer carregar a tela principal em outros.

Para desenvolver os jogos que sejam específicos para celulares ou dispositivos móveis são necessárias algumas otimizações referentes à forma de exibição específica para todos os dispositivos. No entanto, mesmo os jogos que não estão projetados com estes requisitos podem ser reproduzidos no navegador de um telefone.

  • 1º texto que fala sobre a Linguagem HTML está disponível aqui.
  • 2º texto  que fala sobre a W3C – WORLD WIDE WEB CONSORTIUM está disponível aqui.
  • 3º texto sobre WHATWG – WEB HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP está disponível aqui
  • 4º texto sobre o HTML 5 está disponível aqui
  • 5º texto sobre as novas características da linguagem HTML 5 está disponível aqui
  • 6º texto sobre a estrutura de documentos está disponível aqui
  • 7º texto sobre os elementos estruturais está disponível aqui
  • 8º texto sobre os elementos multimídia está disponível aqui
  • 9º texto sobre gráficos na web aqui
  • 10º texto sobre canvas API aqui
  • 11º texto sobre canvas e SVG aqui
  • 12º texto sobre compatibilidade do HTML 5 aqui
  • 13º texto sobre desenvolvimento de jogos com HTML aqui
  • 14º texto sobre jogos em flash aqui
  • 15º texto sobre jogos em HTML5 aqui
  • 16º texto sobre alguns  complementos para desenvolvimento de jogos aqui
  • 17º texto sobre engines e frameworks aqui
  • 18º texto sobre um estudo de caso aqui

Compartilhando Tecnologia e Informação em um só lugar