Iniciando em HTML5
O HTML5 veio com a finalidade de preencher necessidades no desenvolvimento das
linguagens de marcação d...
diferença entre isto e div’s?”. Bem, fora as varias funcionalidades que eu mostrarei logo
mais neste post ainda tem o fato...
Repare que dentro das ancoras existe um atributo chamado rel. Bem, este atributo
existe apenas para deixar explicito o con...
HTML5 e CSS3 trouxeram consigo varias melhorias para o gerenciamento de formularios.
Varios controles que antes eram feito...
disponibilizam para controles de formulario. É apenas uma prévia para mostrar o basico e para
que saibam da existencia de ...
- Novos seletores do CSS3:
Este é um assunto extenso que exige um post inteiro. Por isso vou mostrar o que são os
seletore...
paginas ficarão muito mais leves, farão menos requests no servidor e não terão mais o
efeito de carregar primeiro os eleme...
box-shadow: 3px3px10px#666666;
}
O código acima adiciona efeito de sombra em todas as divs e em todos os caracteres que
es...
Próximos SlideShares
Carregando em…5
×

Iniciandoemhtml5 seleogustavo-121106173712-phpapp02

126 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
126
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Iniciandoemhtml5 seleogustavo-121106173712-phpapp02

  1. 1. Iniciando em HTML5 O HTML5 veio com a finalidade de preencher necessidades no desenvolvimento das linguagens de marcação de texto. Necessidades estas que surgiram com o advento de novas tecnologias e novos paradigmas e padrões. Hoje o HTML não pode simplesmente ser organizado e bem visto pelos desenvolvedores, existem outros clientes que podem se beneficiar desta nova arquitetura. Entre as diversas funcionalidade do HTML5, as principais são: facilitar o desenvolvimento de paginas que estejam de acordo com os fundamentos dos padrões web, melhorar a semântica das paginas para diversos clientes e implementar novas funcionalidades. Neste post vou tentar mostrar algumas novidades do HTML5, exibindo algumas vantagens, novas tags, atributos, estilos e técnicas de desenvolvimento que facilitam o que antigamente (ou atualmente) era ser feito com varias linhas de código e envolvendo outras tecnologias. Para começar vamos falar um pouco sobre as estruturas das paginas antigas e compara- las com as que serão usadas futuramente. Quando a parte HTML de uma pagina era desenvolvovida, a estrutura ficava quase sempre da seguinte forma: <divclass="principal"> <divclass="header"></div> <divclass="nav"></div> <divclass="conteudo"></div> <divclass="footer"></div> </div> Reparem que tudo se baseava em torno de div’s (isso quando não se baseava em table = S) e classes para mapear e fazer o reconhecimento de sessões da pagina. Esta forma de desenvolvimento é bastante cabível e de certa forma consegue separar os tipos de conteúdo, deixando a semântica do HTML relativamente organizada. No entanto com a aplicação do HTML5 esta forma de desenvolvimento vai sofrer algumas pequenas mudanças. Como já se sabe o HTML5 trouxe consigo algumas novas tags que podem ajudar não somente o reconhecimento ou a organização ou a visibilidade de um código HTML. Vejamos algumas novas tags em uma estrutura feita sobre a nova versão desta linguagem: <section> <header></header> <nav></nav> <article></article> <footer></footer> </section> Perceba que todos os nomes das tags sofreram alterações, entretanto a estrutura não. O conteúdo da pagina não é organizada sobre div’s mas sim sobre uma divisão natural feita pelas tags. Uma pergunta muito comum ao ver esta diferença é “Mas e daí, qual a
  2. 2. diferença entre isto e div’s?”. Bem, fora as varias funcionalidades que eu mostrarei logo mais neste post ainda tem o fato de organizar de forma obrigatória e definitiva a semântica em todos os aspectos. O que estou querendo dizer é que não somente os desenvolvedores terão o prazer de mapear o código de forma bem mais simples mastambem o CSS será feito de forma mais especifica e os sites de busca terão mais facilidade para fazer o mapeamento das paginas. Um exemplo, vamos supor que a forma de mapeamento do Google seja feita através dos menus dos sites. Agora vamos supor que o AbasB já esteja em HTML5 e o menu seja feito utilizando a tagnav. O Google pode se preocupar em começar o mapeamento pelo conteúdo das tagsnav e fazer um mapeamento bem mais eficiente do que um site em que o menu esteja dentro de div’s e listas tais quais o resto da pagina. Bom, agora que já mostrei algumas vantagens das novas tags e estrutura do HTML5 vamos ver algumas novas funcionalidades mais a fundo. A tagheader pode ser usada tanto na aplicação do header do site, conforme mostrado na estrutura acima, como pode se usado para representar a header de outras sessões do site. Por exemplo, o AbasB poderia utilizar a tagheader para guardar informações do cabeçalho de um post como o titulo, a data de criação, o autor e alguns outros dados. Vamos à um exemplo: <article> <header> <hgroup> <h2>Titulo do Post</h2> <h3>Autor do Post</h3> <hgroup> <timedatetime=”2010-11-02 23:00:00”>02 de novembro de 2010</ time> </header> </article> Duas das tags acima ainda não foram apresentadas, mas não são menos importantes. A taghgroup tem a finalidade de agrupar todas as tags de cabeçalho h*. A tag “time” como o próprio nome diz tem a finalidade de armazenar valores de tempo como datas e hóras. A tagnav pode ser usada para representar determinadas áreas de navegação de um site. Dois exemplo simples são o menu e mapa do site que normalmente são feitos com listas. A seguir um exemplo: <spanstyle="font-size: medium;"><nav> <ul> <li><arel=”item1” href=”#”>item1</a></li> <li><arel=”item2” href=”#”>item2</a></li> <li><arel=”item3” href=”#”>item3</a></li> <li><arel=”item4” href=”#”>item4</a></li> </ul> </nav></span>
  3. 3. Repare que dentro das ancoras existe um atributo chamado rel. Bem, este atributo existe apenas para deixar explicito o conteúdo no qual a ancora esta sendo fazendo referencia. Mais uma vez algo util para o mapeamento dos sistemas de busca, já que eles podem passar de link em link e ter uma previa do conteúdo que aquela ancora guarda. Uma nova tag bastante interessante é a article. Ela permite marcar explicitamente em que parte do seu HTML estão os artigos e conteúdos em geral. Esta tag foi utilizada para ilustrar exemplos mais acima. Deve se ter muito cuidado para não substituir <divclass=”conteudo”> por article. Mesmo porque o conceito de “conteúdo” varia de desenvolvedor para desenvolvedor, ao passo que o conceito da tagarticle é único. Outra tag nova bastante inteligente é a aside. Esta visa guardar todos os links que podem estar relacionados ao conteúdo principal da pagina ou mesmo ao conteúdo de um artigo. É bem mais facil entender o funcionamento desta tag através de um exemplo: <span style="font-size: medium;"><article> <!--CONTEUDO DO ARTIGO---> </article> <p>Conteudos relacionados:</p> <aside> <ul> <li><a rel=” artigo2” href=”#”> artigo2</a></li> <li><a rel=” artigo3” href=”#”> artigo3</a></li> <li><a rel=” artigo4” href=”#”> artigo4</a></li> <li><a rel=” artigo5” href=”#”> artigo5</a></li> </ul> </aside></span> Perceba que esta tag pode ser confundida com o uso da tagnav, embora suas competências sejam nitidamente diferentes. As tagsaudio e video foram provavelmente uma das mais esperadas pelos desenvolvedores. Mas a verdade é que apesar de ter facilitado muito (muito mesmo!) a inclusão destas midias em uma pagina a falta de customização pode acabar diminindo a utilidade destas tags. Até porque não é dificil pegar a tag de video do YouTube, por exemplo, e disponibilizar em uma pagina HTML. Mesmo assim a facilidade no uso destas duas tagssão surpreendentes. Ambas possuem os atributos src e controls. A primeira se referente ao caminho da musica ou video que a pagina irá rodar. O segundo se refere ao controles que irão aparecer para que o video/audio possa ser gerenciado pelo usuario. A tagaudio pode rodar arquivos no formato .mp3 e a tagvideo .webm, .mp4 e .ogv. Estes provavelmente não são todos os formatos que estas tags suportam. A medida que encontrar novos tipo de fontes que funcionem atualizo este post. A ultimatag para ser tratada neste post é a tagfooter. Como o próprio nome diz esta tag deve ser inserida no final das paginas do site. Geralmente representa o espaço que contem informações como “Copyright”, um link para a home ou mapa do site. Novas tags de formulario do HTML5 e CSS3
  4. 4. HTML5 e CSS3 trouxeram consigo varias melhorias para o gerenciamento de formularios. Varios controles que antes eram feitos com a mistura de CSS, HTML e JavaScript já podem ser substituidos por apenas um controle HTML. Os estilos de validação que eram feito com CSS e inseridos com JavaScript já podem ser substituidos por estilos de validação via CSS. Isso é possivel pois o HTML5 dividiu o <input type=”text”/> em vários elementos especificos e criou outros controles que não existiam mas que eram improvisados. Algumas tags do HTML5 estão listas abaixo: <input type="date" min="0001-01-01" max="2011-08-14" value="2010-08-14"/> <input type="tel" placeholder="(XXX) XXX-XXXX" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /> <input type="color" /> <input type="number" step="1" min="-5" max="10" value="0" /> <input type="email" /> Perceba que na linha 1 o tipo do campo é date o que indica que o campo serve para receber datas. Neste e em outros campos como o number (utilizado para trabalhar com números) é possivel definir propriedades como min, max e value. Na linha 2 o tipo do controle é tel, que significa que aquele campo serve para telefones. O formato do telefone pode ser definido com o atributo pattern que recebe um regex e verifica se o valor segue o padrão ali estabelecido. O atributo placeholder pode ser usado em outros campos e serve para criar uma máscara para o respectivo campo. Na linha 3 o campo é do tipo color, que como o proprio nome diz serve para validar cores. As cores podem ser tanto em hexadecimal (#FFF) como descrito em ingles (red). Outras tags importantes do HTML estão listas abaixo. São elas respectivamente: controle do tipo range; progressbar que visa informar que um determinado evento está ocorrendo; progressbar que informar quanto do tempo de execução de um evento falta para acabar. <input type="range" min="0" max="100" step="1" value="10" /> <progress>working...</progress> <progress value="75" max="100">3/4 complete</progress> Já do lado do CSS dois novos seletores facilitam muito a estilização de controles de formulario. Vale lembrar que nem de longe estas são todas as novas ferramentas que o HTML5 e CSS3
  5. 5. disponibilizam para controles de formulario. É apenas uma prévia para mostrar o basico e para que saibam da existencia de ferramentas mais simples que fazem o trabalho pesado. [required] { background-color: lightyellow; } :invalid { background-color: #FF9; } A primeira linha do trecho de código acima estiliza todos os elementos de formulário que não podem sofrer submit com valor vazio. A pergunta é “como o css sabe quais controles de formulário não podem ficar vazio?”. A resposta é simples, para que o seletor [required] estilize todos os elementos que não podem estar vazios basta inserir nas tags HTML a propriedade required. Dessa forma o CSS reconhece que aquele controle não pode estar vazio. A segunda linha também contempla um novo seletor que estiliza todos os elemenetos inválidos da pagina. Por exemplo, uma tag com a seguinte configuração <input type=”email” /> fica com a propriedade background-color igual a #ff9 até que o usuário escreva um e-mail valido dentro da caixa de texto. Veja que a mistura dos novos campos HTML5 com os novos elementos CSS3 é possivel incrementar a validação e o gerenciamento do formulario de forma muito poderosa e simples. Recursos interessantes do CSS3 Na verdade a pouco tempo o AbasB tinha um unico post com tudo de CSS3 e tudo de HTML5. Faz pouco tempo decidi dividir melhor os temas para facilitar a busca e os temas do assunto. Neste post tento passar dois elementos que a meu ver são indispensáveis para quem pretende começar com CSS3. - Colunas automaticas: É muito comum em sites a necessidade da divisão de um container em diversas colunas com o mesmo tamanho, afim de organizar textos, formularios, imagens ou outros elementos HTML. Antes do surgimento do CSS3 era necessario a criação de classes com o atributo floatdefinido com o valor left ou rightpara que as divsse organizem conforme anecessidade. Apartir do CSS3 basta definir três atributos para que as colunas sejam definidas dentro de um container. .colunas { -webkit-column-count: 3; -webkit-column-rule: 1pxdashed#999; -webkit-column-gap: 20px; } Não vou perder tempo explicando cada atributo pois pelo nome já é possovel identificar suas responsabilidades. Para visualizar as colunas basta associar a classe colunas a um container e inserir conteudo. O conteudo inserido será divido de acordo com o configurado na classe.
  6. 6. - Novos seletores do CSS3: Este é um assunto extenso que exige um post inteiro. Por isso vou mostrar o que são os seletores , com o intuito de ilustrar algumas das novas técnicas que visam aumentar o controle e a produtividade do CSS. Para ver todos os novos seletores do CSS3 clique aqui. Os seletores são usados para definir e posteriormente associar classes a um elemento. Os seletores mais usados são por tag, por classe e por ID. Mutios dos sites hoje utilizam conceitos de herença e combinam os seletores de tag com classe ou ID. .classe {} #id {} tag{} tag.classe {} .classe tag{} Os novos seletores visam aumentar o controle e a produtividade das folhas de estilo e dos elementos HTML. Um exemplo de novos seletores que já foram mostrados neste post foi: [required] { background-color: lightyellow; } :invalid { background-color: #FF9; } tabletr:nth-child(odd) { background: #999; } Apartir do seletor da linha 2 é possivel adicionar estilo a todos os elementos invalidos da pagina. Já com o seletor da linha 1 é possivel adicionar estilo em todos o elementos que possuem o atributo required. O terceiro seletor acessa todos os elementos tr impares que estão dentro da tagtable e adiciona uma cor de fundo diferenciada. Muito usado para fazer a alternancia de cores nas linhas de uma tabela. Borda arredondada, gradiente, sombriamento e espelhamento no CSS3 Depois de tantos posts sobre CSS3 vamos a parte considerada por muitos a parte mais interessante de toda a brincadeira. Como os novos atributos são tão intuitivos quanto os antigos tentarei mostrar a maior quantidade possivel e de forma rapida. Muitas das formas de desenvolvimento de layout exigiam a inserção de imagens para se criar uma pagina com visual convidativo, com logo colorido, bordas arredondadas, degrade, sombras em caixas e textos. Com CSS3 o uso de imagens pode ser reduzido drasticamente devido a facilidade de se produzir efeitos visuais. Por consequencia as
  7. 7. paginas ficarão muito mais leves, farão menos requests no servidor e não terão mais o efeito de carregar primeiro os elementos simples do HTML, depois as imagens. Todos os códigos citados neste post estão dentro da tag<style> e fazem parte de uma folha de estilo. - Borda arredondada: div{border-radius:15px; border:1px solid #000; } O trecho de código acima arredonda as bordas de todas as div’sda pagina. Além disso insere uma borda de 1 pixel que acompanha o novo formato da div. O elemento responsavel pelo efeito é o border-radius que além de prover o estilo arredondado ainda controla através do valor inserido o nivel da curvatura das bordas. - Gradiente: div { background: -webkit-gradient(linear, leftbottom, lefttop, from(#eee), color-stop(0.50, #fff), to(#eee), color-stop(0.50, #fff)); } Este código insere um degrade de cima para baixo e de baixo para cima em todas as divs do site, deixando centro da divbranca. É um código diferenciado se comparado com o primeiro exemplo. O elemento background recebe qual será o modelo do gradiente. Neste caso foi usado o linear, no entanto existem outros tipo d gradiente que podem diversificar o visual. Além do tipo é necessario configurar ainda a cor em que o degrade começa e em qual cor ele vai parar, tanto de cima para baixo, como é possivel ver na linha 3, quando de baixo para cima, como é possivel ver na linha 4. Neste caso ele vai de “azul” para “branco” de forma linear. - Sombra em caixas e textos: div{ /*sombra de texto*/ text-shadow: #99902px5px; /*sombra de container*/ -moz-box-shadow: 3px3px10px#666666; -webkit-box-shadow: 3px3px10px#666666;
  8. 8. box-shadow: 3px3px10px#666666; } O código acima adiciona efeito de sombra em todas as divs e em todos os caracteres que estão dentro das divs. O elemento responsável pelo aombriamento de textos esta na linha 3. Ele configura a cor, profundidade e lado que a sombra aparecerá. O trechos de códigos das linhas 6 a 8 são os responsaveis por inserir sombra nas divs. - Espelhamento de container: div { -webkit-box-reflect: below10px-webkit-gradient(linear, lefttop, leftbottom, from(transparent), color-stop(0.3, transparent), to(rgba(255,255,255,0.8))); } O código acima insere espelhamento nos containers. É na linha 1 que se configura qual será a posição e o tipo de reflexo. A linha 2 determina qual será a cor e a opacidade que o reflexo terá no inicio e fim. Para maiores informação (muito maiores) acessem este site espetacular.

×