Mentalidade Mobile First

A ideia defendida por Luke Wroblewski é simples: desenhar sua solução primeiro para mobile, depois para web. Esse exercício forçará o seu poder de síntese ao máximo e, ao transportar para a versão web, você já terá limado o excesso de conteúdo.

Segundo Luke, o excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo web.

“O mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa. Para fazer isso você precisa conhecer bem os seus usuários e o seu mercado.”, afirma Luke.

wpid-wp-1411570591317.jpeg

Um dispositivo mobile é por muitas vezes o primeiro dispositivo conectado que um bebê ou uma criança pequena interage e se familiariza. Se hoje eu der o kindle para meu bebê com 10 meses, ele tenta arrastar a tela como se fosse meu Smartphone.

“… Esta mentalidade mobile-first molda como eles interagem com o mundo e criam expectativas para tudo a sua volta. Incluindo dispositivos non-touch ou objetos inanimados, touch-friendly e sempre conectados. Estas mentes mobile-first são livres dos modelos mentais do passado da computação, e como resultado certamente moldarão o que esperamos mais a frente do nosso “mundo conectado.”

A definição mobile-first de Luke consiste em três principais componentes:

1. O crescimento do mobile é, mais do que nunca, uma grande oportunidade de atingir as pessoas;

2. As restrições do meio mobile nos força a focar no que realmente importa;

3. E as capacidades do mobile criam oportunidades inovadoras.

Então? Será que mobile-first seria a arquitetura a se pensar? Ou estamos apenas em mais um modismo?

Anúncios

Markdownpad Editor

Markdown é uma linguagem de marcação baseada em texto criado por John Gruberem 2004 como uma maneira de escrever em um formato fácil de ler que podem ser convertidos em HTML. Ele usa uma sintaxe muito simples formatação de pontuação e caracteres familiar, o que torna o conteúdo escrito para a web uma experiência mais intuitiva e mais rápida.

Como Markdown cresce em popularidade, novas ferramentas e aplicações surgiram para atender a escrever, conversão e pré-visualizar a linguagem de marcação. De tutoriais, plugins do WordPress e livros para Ferramentas de Serviço Markdown dedicados para OS X, há uma riqueza de excelentes recursos disponíveis.

Achei muitos posts descrevendo e exemplificando as melhores ferramentas e aplicativos para escrever e visualizar Markdown, incluindo recursos para Windows, Mac OS X, iOS e na web.

Eu pessoalmente, utilizo inclusive para este post o MarkdownPad, que é excelente.

MarkdownPad

MarkdownPad é um editor de Markdown full-featured para Windows, com atalhos de teclado, previews ao vivo e fontes personalizáveis​​, cores, layouts e folhas de estilo. Ele suporta múltiplos núcleos de processamento, incluindo Markdown Markdown extra e GitHub Flavored Markdown, com documentos com guias, verificação ortográfica, auto-save e destaque de sintaxe.

2014-08-30_230718

Mas cheguei a achar posts apresentando mais de 100 opções, então cada um pode escolher o que mais lhe agrada.

Ederson Melo

Declarações HTML !DOCTYPE

A declaração <!DOCTYPE> não é uma tag HTML; ela é uma instrução para o browser sobre qual versão a página HTML está escrita. e deve ser a primeira declaração do documento HTML.

No HTML 4.01, a declaração <!DOCTYPE> faz referência a um DTD, por que o HTML 4.01 foi baseado no SGML. O DTD especifica as regras para a linguagem de marcação para que os navegadores renderizem o conteúdo corretamente.

HTML5 não é baseado no SGML, e, portanto, não necessita de uma referência para um DTD.
HTML 4.01 e HTML 5

Existem três diferente declarações <!DOCTYPE> no HTML 4.01. No HTML5 existe apenas uma:

<!DOCTYPE html>

Elementos HTML e DOCTYPE

Veja na tabela todos os elementos HTML e em qual <!DOCTYPE> cada elemento aparece.

Dicas e Notas

Nota: A tag <!DOCTYPE> não tem uma tag de fechamento.

Dica: a declaração <!DOCTYPE> NÃO é case sensitive.

Dica: Use o validador W3C para checar se você escreveu um documento HTML / XHTML válido.

Declarações mais comuns de DOCTYPE

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML 4.01 Transitional

Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

Este DTD é igual ao HTML 4.01 Transitional, mas permite o uso de conteúdo frameset.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;

XHTML 1.0 Strict

Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

XHTML 1.0 Transitional

Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

XHTML 1.0 Frameset

Este DTD é igual ao XHTML 1.0 Transitional, mas permite o uso de conteúdo frameset.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

XHTML 1.1

Este DTD é igual ao XHTML 1.0 Strict, mas permite que você adicione módulos (por exemplo para fornecer suporte ao Ruby para idiomas do Leste Asiático).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&g