CategoryHTML

Meu boilerplate de projetos de sites html5 e mobile

Passando aqui apenas para compartilhar um novo repositório que acabei de criar no meu github.

https://github.com/wbruno/boilerplate-front

Sabe quando você já fez centenas de sites, já deu manutenção em dezenas, e já começou toda uma estrutura de pastas/arquivos centenas de vezes?

Pois é, também passei por isso. E finalmente criei coragem e vergonha na cara para criar esse repo.
Coloquei lá os arquivos mínimos dos meus projetos em html5 e responsivos de hoje em dia.

Tem horas de estudos acumulados nesse projeto, e horas de leituras sobre otimizações, além de já incluir outro projeto meu, que é o Column.GS, um sistema de grid 960px, responsivo e semântico.

É isso, espero que usem, testem e enviem seus pull requests. =)

Semântica html5 – Comece agora mesmo! Use!

Vou lhes dar um ótimo motivo para já começar a usar html5 hoje nos teus projetos: semântica.

Os elementos <header>, <footer>, <article>, <aside>, <section> e <nav> são nivel de bloco tão bons quanto o elemento <div>. Para o usuário comum e para nós desenvolvedores não haverá nenhuma mudança perceptível(do ponto de vista visual).

E nem deveria! Desde o início, a linguagem nasceu com o intuito de marcar o conteúdo. Isso por si só, já justifica marcarmos mais adequadamente nossos conteúdos, usando as novas tags da html5.
Continue reading

Desenhando layout para projeto em html5

Desenvolvimento de briefing com a equipe.

Em um projeto que envolve animações complexas e formatos diferenciados, o html5 atende um mix de características para montar idéias de forma inteligente e funcional, porém este resultado depende do processo de trabalho, para ser mais especifico, depende da forma que o desenvolvedor, o designer e o AI estão trabalhando.

Qual é a diferença básica de processo?

1- O “time”

Normalmente o processo segue uma linha de produção com participações de todos em forma de validações, o famoso “Dá pra fazer assim?”. Em um projeto utilizando html 5 é necessário que as ideias sejam desenvolvidas em conjunto, formando um conjunto de especificações que apenas um braço desta equipe não conseguiria fornecer.

Quais navegadores vamos atender?
Onde vamos usar CSS3 ou JS?
Baseado na ordem das informações, quais são as prioridades em relação ao peso de cada bloco de imagens?
Por ser uma tecnologia nova, quais são as áreas que podem ser sacrificadas com a mudança de um navegador para o outro?

Estas dúvidas que em um projeto web são naturalmente resolvidas no decorrer da coisa, se tornam fatores importantes para fazer o orçamento de horas e recursos empregados no projeto, pois sabemos o quanto os gargalos atrapalham o lucro de uma agência ou produtora digital.

2- O material de especificação

O Layout passa a ter novas camadas, virando um híbrido entre layout e storyboard, novas preocupações aparecem , como a quantidade de movimentos e o quanto isso gera processos.
O importante em definir navegadores prioritários antes desta etapa é identificar os diferentes comportamentos da aplicação e geral protótipos com cada uma delas, o site pode se comportar de forma mais simples em navegadores mais antigos.

A semântica da tag <br /> – Simplesmente não use !

Impossível deixar de citar o texto do Henrique C. Pereira para o blog Revolução Etc, nesse início de post:

“Escrever algo semanticamente correto, nada mais é do que utilizar-se desses símbolos (leia-se tags) considerando o significado real pelo qual foram criados.”

Continue reading

Como recortar Email Marketing

Tarefa chata !
Desenvolver Email Marketing envolve recorrer a uma estruturação em <table>, que a tempos deixamos para trás.
Continue reading