Algumas novidades sobre o HTML 5

Não sei quando os browser iram implementar , mas o HTML 5 tem novidades para facilitar nosso trabalho e melhorar a semântica dos documentos.
Vou listar o que achei mais significativo:

Mudança no modelo de conteúdo, os elementos block deveram conter em sua raiz um elemento in-line ou um block , mas não ambos .

Este é um exemplo do que será permitido:

<div>
<p><em>…</em></p>
</div>

mas isto não :

<div>
<p>…</p>
<em>…</em>
</div>

Novos elementos introduzidos

Alguns para melhorar a estrutura dos documentos, como:

• section : poderá ser utilizado junto com H1-H6 para indicar a estrutura do documento
• article : representa um pedaço independente de um conteúdo ou documento, como o post de um blog ou um artigo
• aside: um trecho de conteúdo q tem pouco relacionamento com o resto do conteúdo
• header: cabeçalho de uma seção
• footer: o rodapé de uma seção , e pode ter informações sobre o autor,copyright, etc…
•  nav: para ser utilizado como menu de navegação
•  dialog: pode ser utilizado para marca um dialogo
• figure: pode ser utilizado para adicionar titulo em gráficos e videos

<figure>
<img src=’teste.jpg’/>
<legend>Example</legend>
</figure>

e outro elementos como :

•  progress: representa o status de uma tarefa

e o elemento input tem mais attributos:

•  datetime
•  datetime-local
•  date
•  month
•  week
•  time
•  number
•  range
•  email
•  url

A intenção deste novos atributos para o input é de melhorar a comunicação com o browser, por exemplo no auto preenchimento dos formulários

Novos atributos:

• autofocus: para o elemento imput, como pode se imaginar é para focar o elemento após o carregamento da página
• require: para o elemento input, para indicar que o campo precisa ser preenchido antes do formulário ser enviado
• inputmode: dá uma dica (hint) ao user sobre qual tipo de resposta se espera
• autocomplete
• draggable

Um dos atributos quem não será mais padrão e o rev  para o elemento link e charset, mas utilizamos esse atributo com microformats que talvez sofra modificações por causa disto

No dom, getElementsByClassName foi adicionada e innerHTML agora é padrão

As mudanças não são grandes e muito do que ele propõe já é feito com javascript, mas quando utilizarmos HTML 5 certamente iremos precisar de menos javascript

fonte : HTML5 differences from HTML4

Tem CSS? YES! Tem AJAX? YES! E não esqueça do HTML!

Uhhuuu tamo na webinsider !!

CSS, Ajax, tudo bem. Mas não esqueça o HTML

Não vai esquecer de deixar seu comentário lá .. hehehehhe

Boss — Por quê fazer o redesign de um site usando Tableless?

Este é uma documento que fiz para a empresa onde trabalho, acho que pode ter utilidade quando precisar falar sobre as vantagens de desenvolver utilizando padrões, tableless, CSS, etc ….

——ƒ——

“Redesign de um site usando tableless”.

Atualização, organização e otimização.

Atualmente o site possui o layout feito com ‘tabelas’, há por volta de 800 linhas de html, css e Java script em um único arquivo. Também existem vários erros de aninhamento de tags na página.

Ao substituir tabelas por layout tableless e corrigir o aninhamento diminuiremos o tempo de carregamento da página para o cliente, e por diminuir o consumo de banda teremos uma melhora na performace do servidor.

Dividiremos o desenvolvimento em 3 arquivos: conteúdo (HTML), layout (CSS) e comportamento (JS), organizando e facilitando a manutenção.
O aspecto visual não será mudado, será adaptado o existente.

O custo deste projeto é o mesmo de um projeto com tabelas, também estaremos sujeitos a empecilhos e imprevistos. Uma outra questão, em alguns sites que utilizam tabelas para o layout ainda existe diferenças de aspecto visual entre diferentes browsers, problemas com alinhamento de boxes e alinhamento de blocos de texto. Podemos solucionar estes problemas como também pode vir a ocorrer outros que certamente poderemos solucionar.
Custos

• Conhecimento de CSS para atualizar.
• Alterações futuras precisam ser feitas com cuidado para não prejudicar o projeto e trazer de volta a estrutura desorganizada e ultrapassada.
• Talvez alguma área do layout precise ser alterada no alinhamento e/ou no tamanho, existem algumas diferenças entre tabelas e CSS.

Um prazo estipulado em 3 à 4 semanas, calculo que seja feito em menor período, mas o prazo adjacente seria para imprevistos que possam aparecer no desenvolvimento do projeto.

Benefícios:

• Diminuir o tamanho do arquivo (estimado em até 20% a 30%), diminuir tempo de donwload, diminua consumo de banda do servidor, diminua o tempo de render no browser.
• O usuário precisará baixar o estilo em CSS uma única vez, o css fica em cache.
• Melhorar a semântica, melhorar a acessibilidade, melhorar a indexação dos engines de busca.
• Melhorar o acesso a diversos dispositivos (leitores de telas, mobile).
• Facilitar o redesign, diminuir o numero de linhas, separar as camadas (conteúdo, layout, comportamento) em arquivos.
• Substituição de metodologia de desenvolvimento web ultrapassada por uma metodologia atual.

A pagina atual:

• A pagina possui layout a base de ‘tabelas’, aumentando o tamanho do arquivo e o tempo de render.
• Possui vários erros de aninhamento de tags pela página, aumentando o tempo de render no browser.
• A alguns CSS embutidos no arquivo HTML, impossibilitando o cachê para arquivo css.
• Um arquivo, espaguete de HTML, CSS, JAVASCRIPT; com 800 linhas.

A pagina após o redesign:

• Estrutura no conceito tableless, seria feito a remoção das tabelas e sua substituição por tags html apropriadas.
• Correto animanhento das tags (diminuindo o tempo de render no browser).
• Arquivo CSS externo (o usuário faz o donwload uma única vez ou quando houver atualização no CSS), isto colabora para diminuir o total de bytes transferidos.
• Diminuir o numero de linhas no arquivo e organizar as camadas.

——ƒ——

Qualquer sugestão para melhorar o discurso será bem recebida.

Botão com a tag botão

Uma tag subestimada, pois com a tag “button” temos mais controle sobre o formulário e sobre o design do botão .
Usualmente em um formulário utilizamos a tag input com o type= submit|reset, com o button obtemos o mesmo funcionamento, para enviar e dar o reset.
Ex de submit|reset com button:

<button type=”submit”>Enviar</button>

<button type=”reset”>Enviar</button>

Até aqui está tudo igual, agora duas vantagens com o button.

Aspecto visual: podemos adicionar dentro de uma tag “button” uma imagem, dai vc pensa ‘na tag input também’, certo mas com button você coloca quantas imagens quiser e até mesmo outras tags .

Ex:

<FORM action=”seuform”>
email: <INPUT type=”text” name=”email”>
<BUTTON name=”submit” value=”submit” type=”submit”>
<span>E</span>nviar
<IMG src=”legal.gif” alt=”wow”> <IMG src=”forum.gif” alt=”forum”>
</BUTTON> <BUTTON name=”reset” type=”reset”>
Re<span>s</span>et <IMG src=”oops.gif” alt=”oops”>

<IMG src=”forum.gif” alt=”forum”> </BUTTON> </P> </FORM>
Quando em um formulário o usuário precisa selecionar uma entre várias opções, podemos utilizar um select box ou vários formulários ou várias tags “a” dentro de uma mesma pagína. Neste caso é utilizado o button para adicionar apenas um formulário e enviar apenas um valor para o servidor.

Ex de uma pagínação:

<form class="pagination" action="paginate.php" method="get">

<ol>

<li class=”prev”>

<button type=”submit” name=”submit” value=”1″>

1

<span></span>

</button>

</li>

<li class=”curr”>

<button type=”submit” name=”submit” value=”2″>2</button>

</li>

<li class=”next”>

<button type=”submit” name=”submit” value=”3″>3</button>

</li>

<li>

<button type=”submit” name=”submit” value=”4″>4</button>

</li>

<li>

<button type=”submit” name=”submit” value=”5″>5</button>

</li>

</ol>

</form>

Acho q pode ser muito util em algumas situações, diminuindo o tamanho do código e ajudando a semântica da pagína.

http://del.icio.us/marco.moura/button

Long Tail é como a grande baleia azul que se alimenta de camarões

Nas últimas semanas tenho lido na web e em revistas sobre “The Long Tail”, a nova tendência da web, sites como youtube, flickr, Mercado Livre fazem uso do Long Tail, traduzido em “Calda Longa” .
Long Tail foi um termo utilizado por Chris anderson para nomear um efeito já conhecido em estatísticas, que e literalmente a longa cauda dos gráficos, neste local reside produtos com baixa venda, vídeos com pouca audiência, etc.. geralmente isto é descartado devido os custos serem maiores do que o lucro, entretanto, como na web o custo é bem menor, estes itens transformam-se em nicho e um grande diferencial.

Resumidamente funciona assim, devido a quantidade de ofertas de itens renegados ser maior que os que estão entre os itens populares, o retorno com a cauda pode ser grande, é caso da amazon, há à venda cerca de 35 milhões de livros em sua loja virtual, vamos supor 1/4 destes itens seja best sellers, o restante dos livros, é de autores desconhecidos que vendem talvez 1 exemplar por ano, mas a quantidade destes itens é tanta que metade do faturamento da amazon é com estes produtos, é dai que vem o titulo deste post imagine o amazon como a “grande baleia”.

Isto explica, um pouco, como outros serviços web estão tendo faturamento, you tube, google ( mail, search,…) .

Outra coisa que veio a minha mente quando li sobre a demissão de um astro de hollywood que possuía um contrato milionário, a reportagem comentou a tendência de que os estúdios de cinema invistam em filmes com atores e produções de menor custo, ou seja, de certa forma eles estão buscando lucro via long-tail, e lógico que isto também se aplica nas outras artes , no futuro certamente nossa cultura será bem diferente, modismos e bandas certamente existirá, filmes e livros feitos para atender as massas, como mero consumismo, entretanto teremos mas espaço para as artes de verdade, de quebra a tecnologia vem trazendo a inclução cultural no mundo.

É muito amplo, podemos encontrar Long Tail em quase tudo, ou será tudo.

Para quem quiser saber mais:

del.icio.us/marco.moura/LongTail