Tableless » desenvolvimento

Sublime Text 2 – Meu novo editor

Diego Eis — Mon, 16 Apr 2012 12:36:23 +0000

Durante muito tempo eu fui apaixonado pelo Coda e pelo Textmate. Eu os utilizava praticamente todos os dias. O Coda tem um find/replace sensacional que funciona muito bem. O Textmate é ligeiro para a criação de snippets e outras tarefinhas automatizadas. Acontece que eu conheci o Sublime Text pelo Márcio Trindade, que trabalha comigo e então eu me apaixonei. Não pelo Márcio, mas pelo Sublime (falá-se sublaime).

Sem frescura

O que eu amava quando no Editplus do Windows era a interface limpa. Não quero ver iconezinhos bonitinhos, eu quero uma tela branca, pronta pra escrever. O problema é que eu não sou sadomasoquista suficiente para ficar usando o VI. O Textmate é muito parecido com o Editplus nesse quesito, assim como o Sublime. O Sublime é limpo e o code highlight padrão é muito confortável. Confesso que nunca fui fã de editores com o fundo escuro. Comecei a gostar depois do Sublime.

Customização

A customização do Textmate é sensacional. As possibilidades são muito maiores que a do Coda. Mas o Sublime consegue superar o Textmate. Ele guarda as configurações personalizadas em um arquivo separado com a sintaxe parecida com JSON. Você pode colocar esse arquivo no seu Dropbox e criar um link simbólico para o diretório do Sublime. Assim as suas configurações ficam iguais no trabalho e em casa.

Nesse arquivo você pode configurar tudo, desde o thema que será usado até as definições de word-wrap, tabs e espaços, tamanho de fonte, algumas configurações de busca e etc. Sensacional. Nunca mais perca tempo reconfigurando seu editor quando reinstalar o sistema.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

"indent_subsequent_lines": true,
"indent_to_bracket": false,
"line_numbers": true,
"line_padding_bottom": 2,
"line_padding_top": 2,
"margin": 0,
"match_brackets": true,
"match_brackets_angle": false,
"match_brackets_braces": true,
"match_brackets_content": true,
"match_brackets_square": true,
"match_selection": true,
"match_tags": true,
"move_to_limit_on_up_down": false,
"open_files_in_new_window": true,
"overlay_scroll_bars": "system",
"remember_open_files": false,
"rulers":

Como sou um cara solidário, coloquei meus arquivos de configuração do Sublime no Git. Assim você consegue pegar emprestado e eu não perco toda vez que eu reinstalar o sistema.

Plugins

Os plugins são o filé do Sublime Text. Para começar instale o Sublime Package Control. Este plugin te ajuda a descobrir, instalar e gerenciar pacotes e plugins do Sublime facilmente via comando de teclado.

Outro plugin muito útil é o SideBarEnhancements. Ele insere uma série de opções no menu contextual dos arquivos da sidebar. Você pode dizer: “O meu editor faz isso sem plugin”. Aí eu digo: “Você consegue customizar se quiser?”.

Existem outros plugins para integrar com o GIT, snippets para Bootstrap, SFTP, highlight, VI, SASS, LESS e outras coisas.

Descubra alguns plugins disponíveis para o Sublime aqui.

Você pode instalar esses plugins via o Package Control, que citamos anteriormente.

Tarefas com o Teclado

Quer encontrar uma função, classe ou id? Existe um atalho que se chama GoTo Anything. Aperte CMD+R ou CMD+P (CTRL+P), coloque um @ e comece a digitar o nome da função. Quer ir para uma linha? Digite CTLR+G ou CMD+P, coloque : e diga o número da linha.

Dá uma olhada nesses atalhos básicos e nesse Sublime Cheet Sheet.

Só o GoTo Anything quebra um galho danado.

A seleção por colunas funciona como no Textmate. E pra mim, uma novidade que eu só via no VI é a seleção por similaridade. Você consegue selecionar, via teclado mesmo, várias tags ou caractéres iguais. Por exemplo, suponha que você queira selecionar em um mesmo documento todas as tags

. Selecione primeiro a tag e depois aperte CMD+D.

Find and Replace

Find and Replace é coisa linda. Eu não vivo sem e provavelmente você também não. Você consegue procurar por arquivos e palavras em todos os documentos de uma pasta determinada, em arquivos abertos ou em pastas abertas. Aperte CMD+T e você consegue filtrar os arquivos que você precisa. Claro, que você também pode procurar arquivos via o GoTo Anything que já havíamos falado anteriormente via CMD+P.

SHIT+CMD+F você procura e substitui por arquivos dentro de uma determinada pasta.
Com ALT(option)+CMD+F você tem o find/replace tradicional.

Nem preciso dizer do suporte a expressões regulares, né?

Suporte

O Sublime tem versões para Windows, Linux e Mac.

Mais para ler

Posts Relacionados

Dicas de sobrevivência em uma era pós o IE6

Diego Eis — Mon, 09 Apr 2012 12:30:52 +0000

Nós ficamos mal acostumados com o Internet Explorer 6… Digo isso por que tinhamos tantos problemas e limitações no tempo em que precisávamos suportá-lo, que até hoje nos privamos de algumas técnicas e propriedades do CSS que funcionam plenamente no IE8 e nos IEs mais novos. Quero confessar que eu estava até esses dias eu era prisioneiro da sombra do IE6.

Por isso, aqui vão algumas dicas de propriedades que você já deve conhecer, mas que não usa ainda por que acha que todos os IEs são iguais ao maldito IE6.

:after

Você deve usar alguma técnica de clearfix que você criou ou que você pegou de algum lugar. Eu usava muito jquery para criar um elemento vazio dinamicamente no final do elemento que necessita do clearfix para fazê-lo parar de sofrer influência dos floats dos elementos. Essa técnica aqui pode salvar sua vida:

1
2
3
4
5

div:after {
content:" ";
display:block;
clear:both;
}

O content pode ser usado para uma série de outras coisas, como por exemplo inserir um ícone, objeto ou até texto depois de um determinado elemento.

Nesse caso o IE7 fica de fora.

first-child

Sim. O First-child funciona no IE7 ou superior. Mas o last-child não. Sem chance.
Isso já acaba com aqueles problemas de alinhamento de elementos em linha, onde você precisa tirar a margin, padding ou border do último (ou o primeiro) elemento para que eles fiquem alinhados corretamente.

1
2
3
4
5

div:first-child {
margin-left:0;
padding-left:0;
border-left:none;
}

Seletores complexos

Olha só que maravilha, o IE7+ já suporta alguns seletores complexos como os descritos abaixo:

Seletor	Descrição
input[type="text"]	Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT
a[title]	Seleciona o elemento a que contenha o atributo typenão importando o valor.
a[href$=html]	Seleciona elementos com atributos cujo seu valor temine com… Por exemplo, você poderia querer selecionar todos os links que apotam para um arquivo .pdf, ou .php etc.
a[href^="http://tableless.com.br/"]	Seleciona elementos com o atributos que comecem com… Você pode querer selecionar apenas os links que apontem para um site específico, por exemplo.
a[title~="tableless"]	Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços. No exemplo acima ele seleciona um link que contenha o atributo title e que em seu valor tenha a palavra “tableless” no meio.
a[hreflang\|="pt"]	Seleciona o elemento a cujo o valor do atributo hreflang comece com PT. Ou seja valores como “pt-br” serão encontrados.
a[href="http://tableless.com.br/"]	Seleciona o elemento a cujo o valor do atributo href seja exatamente http://tableless.com.br/.
a[title*="artigo"]	Seleciona os elementos a cujo o valor tenha pelo menos uma ocorrência com a palavra “artigo”.

Todos eles funcionam no IE7 ou superior. Só com estes seletores já economizamos uma penca de código Javascript.

:first-letter e :first-line

Formatar a primeira letra do parágrafo ou a primeira linha. Coisa linda.

1 2	p:first-letter {font-size:30px; color:red;} p:first-line {font-weight:bold;}

word-wrap

Essa propriedade é utilíssima. Você já deve ter escrito uma palavra muito grande ou uma URL, que geralmente não tem espaços, o que ocasionou da string ultrapassar a largura do objeto. A propriedade word-wrap faz com que essas strings muito grandes quebrem de linha assim que atingirem o limite do objeto.

1	p {word-wrap: break-word;}

Essa propriedade funciona desde o IE5. O.o

max-height/width e min-height/width

Essas aqui são essências para produzirmos layouts fluidos e responsivos. Funcionam a partir do IE7.

1
2
3
4
5
6

div {
min-width:200px; /** largura mínima **/
max-width:500px; /** largura máxima **/
min-height:150px; /** altura mínima **/
max-height:300px; /** altura máxima **/
}

Tabela de referência

O MSDN guarda uma tabela de compatibilidade muito completa com propriedades do CSS que os IEs suportam ou não. Vale a pena dar uma olhada e entender melhor o que você já pode usar nativamente do CSS em vez de sair escrevendo loucamente soluções JQuery.

Posts Relacionados

Drops 7 – Você está fazendo errado

Diego Eis — Thu, 05 Apr 2012 04:14:02 +0000

Tem designers trabalhando com web que não entendem HTML/CSS. Tem programadores que ainda insistem em aprender apenas a linguagem server-side e ficam se lixando para HTML. Tem desenvolvedores de interface que não estão nem aí pra semântica, css bem escrito e caem na bobeira de ficar discutindo assuntos superficiais como abordar ou não abordar determinado browser, ou o Flash é melhor que HTML e vice-versa.

Posts Relacionados

Usando Meta Box em seu tema WordPress

keppelen — Tue, 20 Mar 2012 13:52:29 +0000

O que são Meta Boxes?

Os Meta Boxes (Caixas de informações) foi implementado a partir da versão 2.5 do CMS, os Meta Boxes são aquelas caixas arrastáveis que estão presente na Dashboard, edição de um post, páginas, além de outros locais na área administrativa do WordPress.

Os Meta Boxes é uma maneira atraente para a tela do editor de post e evita forçar os usuários a confiar em campos personalizados. Se você já criou algum tipo de campo personalizado no WordPress, você provavelmente gostaria de adicionar algum campo.

Com os Meta Box e mais fácil. Imagine que você esteja criando um tema para um cliente que precise catalogar sua coleção de vinil. Você começa imediatamente olhar para o WordPress para ver como isso pode ser feito. Cada Post representa um Vinil, que é perfeito para adicionar imagem, titulo e descrição. Podemos usar também as categorias e marcar dentro do WordPress para que os organize. Mas vamos supor que o cara queira acrescentar mais um dado para catalogação? O WordPress não te dar essa opção por padrão a não ser que usemos o grande Meta Box.

Usando o Meta boxes

Neste tutorial não iremos trabalhar em um arquivo functions.php. Que não é o lugar correto para ele. Se você está adicionando dados a uma mensagem, é provável que você quer que ele exista independentemente do seu projeto de front end. Como tal, você deve colocar esse código em algum lugar que não é dependente do seu design. Ex: Um arquivo de plugin.

Convenientemente o WordPress oferece uma função para adicionar os Meta Boxes a uma tela de administração, usando o seguinte “add_meta_box”. Abaixo um exemplo.

1	add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); ?>

Parâmetros

$id – (String) Identificador único (Obrigatório)
$title – (String) Titulo a ser exibido (Obrigatório)
$callback – (Callback) Função para exibir o conteúdo do Meta Boxes (Obrigatório) Exemplo
$page – (String) Onde será exibido o Meta Boxes. Exemplos ('post', 'page', 'link', or'custom_post_type' )
$context (String) Tela onde o box vai ser inserido.
$priority (String) Prioridade de inserção da caixa em relação as demais.
$callback_args (array) Determina a passagem de parâmetros a função callback.

Então, nosso add_meta_box será parecido com esse.

1	add_meta_box ( 'my-meta-box-id', 'Meu primeiro Meta Box', 'vinil_meta_box_vinil', 'post', 'normal', 'high' ); ?>

Não podemos simplesmente colocar em nosso arquivo plugin sozinho, se não vamos acabar na tela branca da morte ou o erro fatal PHP. Chamada para a função indefinida, por quê? Porque chamamos a função add_meta_box antes do WordPress ser carregado. Com isso precisamos fazer um gancho no WordPress, que faz parte da api de um plugin. Basicamente, as funções começam enganchando em uma ação do WordPress. Então vamos fazer nosso gancho add_meta_box em uma função, então conectar essa função ao add_meta_boxes, evitando o erro fatal. Nosso código para o Meta Boxes para tela de postagem ficará assim:

1
2
3
4
5
6
7

add_action( 'add_meta_boxes', 'vinil_meta_box_add' );

function vinil_meta_box_add() {

add_meta_box( 'my-meta-box-id', 'Meu primeiro Meta Box', 'vinil_meta_box_vinil', 'post', 'normal', 'high' ); }

?>

Renderizando o Meta Box

O código acima é o suficiente para adicionar o Meta Box, mas agora temos que tornar a coisa mais legal. Vamos adicionar campos, apenas um formulário HTML misturado com um pouco de PHP para exibir os dados salvos. Não precisamos incluir as tags de formulário pois o WordPress já faz isso para a gente. :) Lembre que a string passada como o $callback em add_meta_box? Agora vamos criar um função com o mesmo nome.

1
2
3
4
5

function vinil_meta_box_vinil() {

echo 'Conteúdo do meu primeiro Meta Box.'; }

?>

Agora vamos fazer o formulário, vamos adicionar vários campos para este Meta Box, 1 input, 1 select, 1 checkbox. Vamos começar com o input.

Na função

1
2
3
4
5

function vinil_meta_box_vinil() {

echo 'Conteúdo do meu primeiro Meta Box.'; }

?>

Vamos retirar o

1	echo 'Conteúdo do meu primeiro Meta Box';

Para começar a fazer o formulario do Meta Box, ficando da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11

function vinil_meta_box_vinil()
{
?>

Text Label

}

?>

Mas e quanto a exibir os dados? Bem você verá a seguinte, vamos armazenar esses dados na tabela usando a função wp_postmeta update_post_meta. Essas funções tem duas irmãs chamada get_post_meta e get_post_custom, que pega os dados de wp_postmeta. O get_post_meta só peega dados de uma chave, enquanto get_post_custom pega tudo. Como estamos usando realmente apenas um campo, neste ponto, vamos usar o get_post_meta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function vinil_meta_box_vinil()
{
$values = get_post_custom( $post->ID );
$text = isset( $values['texto_meta_box'] ) ? esc_attr( $values['texto_meta_box'][0] ) : '';
$selected = isset( $values['meta_box_select'] ) ? esc_attr( $values['meta_box_select'][0] ) : '';
$check = isset( $values['meta_box_check'] ) ? esc_attr( $values['meta_box_check'][0] ) : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>

Text Label

}

?>

Agora vamos adicionar o DropDow em nosso Meta Box.

No drop-dow iremos usar uma das funções mais úteis no WordPress, o selected(). Ele compara o primeiro valor, os dados que salva, com o segundo atributo de valor,

Ficando da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Text Label

Color

}

?>

Adicionando o Check box

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Text Label

Color

checked( $check, 'on' ); ?> />
Don't Check This.

}

?>

Novamente o WordPress fornece a função checked(). Ela funciona exatamente como selected() comparando o primeiro valor com o segundo valor e repetindo para checked=”checked” se eles são o mesmo.

Para finalizar vamos salvar nosso Meta Box

Para salvar nossos dados, vamos confiar em outro gancho: save_post. Isso funciona como o nosso gancho na ação acima:

1	add_action( 'save_post', 'vinil_meta_box_save' ); ?>

A função vinil_meta_box receberá um argumento, a ID do Post, e vai cuidar da limpeza e salvar todos os nossos dados.

Antes de podermos fazer qualquer coisa, no entanto, que temos que fazer 3 coisas: verificar se o Post esta auto salvando, verificar o valor único que criamos anteriormente, e verificar se o usuário atual pode realmente editar o post.

1
2
3
4
5
6
7
8
9
10

Agora as coisas divertidas: na verdade, salvar nossos dados. A regra número um, ao colocar qualquer coisa em seu banco de dados ou em seu site é não confiar no usuário. Mesmo se esse usuário é você. Para o efeito, antes de salvar os dados, queremos ter certeza de que não há nada malicioso lá. Felizmente WordPress fornece um monte de funções para validação de dados. Para isso vamos utilizar o esc_attr(). E também vamos usar a função update_post_meta para salvar os nossos dados. Leva três argumentos: a ID post, a chave de meta, e o valor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

add_action( 'save_post', 'vinil_meta_box_save' );
function vinil_meta_box_save( $post_id )
{
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

if( !current_user_can( 'edit_post' ) ) return;

$allowed = array(
'a' => array(
'href' => array()
)
);

if( isset( $_POST['texto_meta_box'] ) )
update_post_meta( $post_id, 'texto_meta_box', wp_kses( $_POST['texto_meta_box'], $allowed ) );

if( isset( $_POST['meta_box_select'] ) )
update_post_meta( $post_id, 'meta_box_select', esc_attr( $_POST['meta_box_select'] ) );

$chk = ( isset( $_POST['meta_box_check'] ) && $_POST['meta_box_check'] ) ? 'on' : 'off';
update_post_meta( $post_id, 'meta_box_check', $chk );
}

?>

É isso, agora você deve ter um Meta Boxes funcionando em seu WordPress.

Nosso arquivo fica assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/*
Plugin Name: Meta Box
Plugin URI: http://bygiovanni.com.br
Description:
Version: 1.0
Author: Giovanni - Tableless
Author URI: http://bygiovanni.com.br
*/

//ADICIONANDO O META BOX
add_action( 'add_meta_boxes', 'vinil_meta_box_add' );
function vinil_meta_box_add()
{
add_meta_box( 'my-meta-box-id', 'Meu primeiro Meta Box', 'vinil_meta_box_vinil', 'post', 'normal', 'high' );
}

//FORMULARIO PARA SALVAS OS DADOS
function vinil_meta_box_vinil()
{
$values = get_post_custom( $post->ID );
$text = isset( $values['texto_meta_box'] ) ? esc_attr( $values['texto_meta_box'][0] ) : '';
$selected = isset( $values['meta_box_select'] ) ? esc_attr( $values['meta_box_select'][0] ) : '';
$check = isset( $values['meta_box_check'] ) ? esc_attr( $values['meta_box_check'][0] ) : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>

Text Label

Color

checked( $check, 'on' ); ?> />
Don't Check This.

}

add_action( 'save_post', 'vinil_meta_box_save' );
function vinil_meta_box_save( $post_id )
{
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

if( !current_user_can( 'edit_post' ) ) return;

$allowed = array(
'a' => array(
'href' => array()
)
);

if( isset( $_POST['texto_meta_box'] ) )
update_post_meta( $post_id, 'texto_meta_box', wp_kses( $_POST['texto_meta_box'], $allowed ) );

if( isset( $_POST['meta_box_select'] ) )
update_post_meta( $post_id, 'meta_box_select', esc_attr( $_POST['meta_box_select'] ) );

$chk = ( isset( $_POST['meta_box_check'] ) && $_POST['meta_box_check'] ) ? 'on' : 'off';
update_post_meta( $post_id, 'meta_box_check', $chk );
}

?>

Para saber mais sobre os Meta Box podem ver no Codex que também é uma ótima fonte de estudo para o WP. http://codex.wordpress.org/Function_Reference/add_meta_box

Posts Relacionados

Introdução aos padrões de codificação

Diego Eis — Mon, 23 Jan 2012 11:28:41 +0000

Como os idiomas reais, cada linguagem de programação tem suas respectivas regras, individualidades, pontuações, pausas e pontos em comum com outras linguagens. Você precisa conhecer essas peculiaridades para falar fluentemente ou no mínimo ser entendido. Nas linguagens de para web ou qualquer outra linguagem de programação, precisamos seguir algumas regras básicas para que o código não vire uma língua estrangeira no meio do projeto.

Definir padrões é normal para que a equipe inteira escreva o código da mesma maneira. Esse assunto é longo e muito importante para todas as equipes de desenvolvimento. Programadores já quiseram me matar várias vezes porque eu uso TABS em vez de ESPAÇOS em arquivos Python/PHP. Programadores gostam de espaços. Eu não. Mas não é o nosso gosto que vai definir quais os padrões de código que devemos seguir.

Quando definimos padrões e boas práticas, garantimos que todos da equipe conseguirão ter o mínimo de entendimento do código daquele projeto que está na empresa a tempos. Se alguém da equipe adoecer ou precisar ir para o Canadá, outro integrante pode assumir o seu lugar sem precisar se preocupar em aprender novas regras, porque elas devem ser as mesmas do projeto anterior.

É importante que os integrantes da equipe sejam sempre fiéis aos acordos firmados no momento em que combinam esses padrões. É importante também que, caso eles encontrem um integrante fora da lei, que eles forcem o meliante a seguir as regras. Já vi gente perdendo o trabalho de uma semana por que estava trabalhando diretamente pelo FTP e o projeto não estava no GIT. O programador simplesmente APAGOU o projeto da pessoa. Nunca mais ela resolveu editar os arquivos fora do controle de versão. Esse tipo de atitude é perigosa mas muito necessárias às vezes. Devemos forçar as regras num ambiente onde todos devem quem, quando e como as linhas de código do projeto foram escritas.

Alguns pontos para se pensar e combinar:

Identação

Como devemos identar o código? Com espaços ou tabs? Se for com espaços quantos?

Espaços em brancos (Whitespaces)

Espaços devem ser incluídos depois de uma operação condicional? Espaços devem ser colocados entre o seletor e as chaves? E no final de cada linha, precisa?

Nomenclatura

Como as classes, ids e variáveis devem ser nomeadas? E as funções? Vamos usar CamelCase?

Comentários

Como faremos com os comentários? Como serão os delimitadores do comentário? O comentário deve ser completo ou precisa ser algo mais resumido?

Arquivos

Como os arquivos, que não fazem parte da estrutura padrão do CMS, Framework e etc deverão ser chamados? E o nome das pastas? Como as páginas serão chamadas?

Chaves e ponto/vírgula

As chaves deverão ser abertas na mesma linha ou devemos quebrar linhas? Vamos sempre usar ponto/vírgula? Vamos usar o padrão K&R ou Allman?

Quando definimos estas pequenas coisas, diminuímos muitos percalços no meio do caminho. Já vi projetos atrasarem meses por que um palerma abriu e salvou arquivos com o charset diferente do que já tinha sido combinado no início.

“It’s more important for people on a team to agree to a single coding style than it is to find the perfect style.” Building Scalable Web Sites: Building, Scaling, and Optimizing the Next Generation of Web Applications
Indico este livro sobre esse e outros assuntos sobre a construção, desenvolvimento e manutenção de websites

Posts Relacionados

Biblioteca CSS ou Framework?

Diego Eis — Mon, 10 Oct 2011 11:18:06 +0000

Primeiro você precisa entender a diferença entre os dois. A Talita Pagani em um dos seus artigos descreve o que é um framework assim:

Framework é um conjunto de componentes que provêm uma estrutura básica de elementos reutilizáveis, tendo uma arquitetura consistente de funcionalidade genérica sob a qual a aplicação será construída.

O uso de uma Biblioteca (CSS, Javascript, etc) é bastante parecido com a utilização de um framework. Eu prefiro a utilização de uma biblioteca por ser menos instrusiva e muito mais personalizável. Existem algumas diferenças que você deve prestar sua atenção para entender qual das duas formas é melhor para o projeto.

Modificação visual

Enquanto o framework modifica as características visuais, a biblioteca se restringe manipulando a diagramação ou a posição dos elementos.

Na grande maioria, os frameworks modificam automaticamente o visual de alguns elementos, gerando um certo retrabalho, porque geralmente o design aplicado não é o design aprovado pelo cliente ou pelo designer do projeto. Veja por exemplo o Bootstrap feito pelo pessoal do Twitter. Assim que linkado em seu código, os elementos como os campos de formulários e parágrafos tem suas características visuais modificadas para seguir um design pré definido pelos donos do framework – diga-se de passagem, o trabalho de design feito pelo pessoal do Bootstrap é muito bacana. Já as bibliotecas, na maioria das vezes, não faz nenhuma modificação no design ou na posição dos elementos sem a inserção de Classe ou ID. Geralmente as bibliotecas são restritas para manipular a posição e as dimensões dos elementos, facilitando a diagramação de layouts, sem modificar as características visuais, já que os layouts de cada site tem o design diferente. É por isso que eu gosto de definir que frameworks são ótimos para construir sistemas, já as bibliotecas ajudam muito mais ao construir websites. Sistemas tem muitos formulários, botões de ação, pouco texto e etc. A utilização de um framework é muito interessante nesse caso porque não perdemos tempo manipulando e definindo um padrão visual para estes elementos – como os tamanhos dos campos de formulário de texto.

Já a biblioteca é muito útil para definir quando os elementos terão float, position, largura variável e etc. São características de posição e diagramação, que não afetam a questão do design.

Quantidade de código não utilizado

Geralmente ao utilizar uma biblioteca, talvez você estará linkando mais código do que o necessário para o seu projeto. Você pode não utilizar todas essas classes/ids pré definidos pelo autor da biblioteca, o que é normal dependendo do projeto e do design criado. Este risco diminui quando utilizamos frameworks, já que eles modificam as características de todos os elementos principais do projeto. Praticamente todo o código estará do framework estará sendo usado porque eles são aplicados nos elementos assim que o framework é linkado no código. Porém, com a biblioteca, é fácil mapearmos quais as classes utilizadas e excluir o código que não está sendo usado para diminuir o tamanho dos arquivos e do código.

Personalização e criação

A personalização ou criação de uma biblioteca CSS é muito mais fácil do que se resolvermos criar do zero um framework. Você consegue facilmente criar uma biblioteca de CSS contendo algumas classes úteis para qualquer projeto, por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

* {
margin:0;
padding:0;
}

.fLeft {float: left}
.fRight {float: right;}
.fNone {float: none;}

.dBlock {display: block;}
.dInline {display: inline;}
.dInlineBlock {display: inline-block;}
.dNone {display: none;}

.pAbsolute {position: absolute;}
.pRelative {position: relative;}

.cBoth {clear: both;}
.cLeft {clear: left;}
.cRight {clear: right;}

O código acima é um bom começo para uma biblioteca CSS personalizada. Contém ali classes básicas que se combinadas dão diferentes características para um determinado elemento. Essas classes também se mostram muito úteis se reutilizarmos no código javascript do projeto.

Sistema e Site

Design de sistemas são sempre parecidos. Todos eles tem muitos campus de formulário, checkboxes, combos, radio buttons e etc. É basicamente manipulação de formulários, alertas de erro e mensagens para o usuário, manipulação de botões de ação e etc. Não foge muito disso.
Já o design de sites são todos bem diferentes. Por isso que a manipulação visual dos frameworks se torna inútil e gera muito retrabalho.

Eu prefiro utilizar bibliotecas para a criação de sites. Para o desenvolvimento de sistemas, prefiro utilizar framworks.

Mas tenha em mente: se for decidir utilizar qualquer um dos dois, é bom que essa decisão seja feita logo no começo do projeto. Aplicar um framework no meio de um projeto pode dar muitos problemas e tomar muito tempo. Por isso é importante que essa decisão seja feita no início do projeto.

Concluindo

Entenda que um framework pode ter uma biblioteca de CSS embutida em seu core. Tendo também a possibilidade de manipular o visual dos elementos, o framework se mostra muito mais completo que uma biblioteca CSS, embora a bilioteca ganhe por ser mais fácil de personalizar e por não manipular o visual dos elementos, te deixando livre para formatar da forma que você bem entender.

Posts Relacionados

Entendendo os Reflows

Alysson Franklin — Mon, 18 Jul 2011 13:00:02 +0000

Reflow é um assunto extenso e necessário. Ele sempre vai existir nos navegadores, então temos que entendê-lo para saber como utilizá-lo de maneira racional. O mais legal é entender todo o contexto sobre o que são e como funcionam, para a partir daí repensar o código que renderizamos no navegador para obtermos maior performance.

Reflow é o resultado de um evento que desencadeia mudanças no jeito que a pagina deve ser renderizada, tomando tempo para cálculo e reposicionamento de elementos.

Para explicar como isso acontece, o importante é entender como um navegador renderiza uma página web.

DOM

Document Object Model (DOM) é uma interface independente de linguagem e plataforma para representar e interagir com objetos em HTML, XHTML e XML. Mas o DOM é mais que isso; toda linguagem estruturada tem uma arvore DOM.

Exemplo de arvore DOM para documento HTML

Mas sobre o DOM podemos dizer que programas ou scripts podem dinamicamente acessar elementos na árvore DOM e alterar seu conteúdo, estrutura e estilo. Adicional ao estado inicial da pagina, estas alterações são agregadas a árvore DOM. O resultado é a renderização - o que nós vemos em um navegador. Mas a nossa Render Tree tem mais que isso:

Render Tree e como realmente entender display X visibility

Como a render tree é montada

O DOM é resultado do parse do markup HTML que você montou dentro de um navegador. Só que dentro de um HTML você não tem apenas a estrutura do documento, estilos em CSS e funcionalidades em javascript também estarão no seu markup. E a Render tree é a soma de DOM mais estilos, que depois podem ser manipulados (seus scripts).

Pode parecer estranho, mas para mim a melhor maneira de entender as diferencas entre DOM e Render Tree é encarar esta última como um individuo narcisista. Isso mesmo: A Render Tree gosta de aparecer, é o que vemos no browser. O DOM acontece por trás das cortinas. À Render tree, o palco. (Para saber mais sobre o DOM, veja este outro artigo)

Uma página que tem controles de show/hide mostra isso muito bem. Enquanto todo o conteúdo da página está presente na árvore DOM, apenas alguns itens estarão disponíveis na Render Tree – os visíveis na página (display:block). Alterar os elementos display:none vão disparar mudanças na render tree, e não na árvore DOM.

Já tentou entender as diferenças entre display:none e visibility:hidden? A maioria das explicações que vemos é que um “deixa de mostrar o elemento totalmente, incluindo seu espaço em tela” e o outro “deixa de mostrar o elemento visual, mas sua área de exibição continua sendo utilizada”. Esta explicação não está incorreta, mas seria melhor dizer que a propriedade display altera a estrutura da render tree, adicionando algo que antes não estava ali, enquanto visibility não faz alterações, apenas o câmbio de mostrar ou não um elemento que já esta na render tree.

Repaint

Entendido as diferenças entre display e visibility, além do contexto de área do elemento, conseguimos explicar o Repaint. Uma ação que faça alteração de propriedades de background sem alterar dimensões ou outras propriedades do elemento não causam o reflow, apenas o repaint, que seria a atualização da propriedade de cor ou da imagem – literalmente pintar novamente o elemento. Repaints gastam menos CPU que reflows.

Como um navegador monta seu documento HTML

Esses vídeos são sensacionais. Eles explicam o que são os reflows e dai como minimizá-los durante a fase de desenvolvimento do documento (sempre usando Progressive Enhancement quando possível) é mais fácil..

Esta é uma representação de como a página da Mozilla é montada. Quer mais? Veja também como a Wikipedia e a página do Google no Japão são renderizadas.

Analisando o primeiro vídeo, perceba que ao finalizar a montagem do rodapé, “algo mais” acontece (a partir de 12seg). São os Reflows. A maioria dos elementos são recalculados e reposicionados. Se ponderarmos que o rodapé acaba de ser montado aos 14 segundos e a renderização termina aos 26 segundos da pagina, estamos falando quase de 50% do tempo de renderização sendo gasto com Reflows, o que é muito, dependendo do que a sua página deve fazer.

O que causam exatamente os reflows?

1
2
3
4
5
6
7
8
var bstyle = document.body.style; // cache
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // outro reflow e repaint
bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint
bstyle.fontSize = "2em"; // reflow, repaint
// novo elemento DOM - reflow, repaint
document.body.appendChild(document.createTextNode('Leeento'));

Reflows são excessivamente pesados e para reduzir efeitos uma das táticas que navegadores usam é processar nossos scripts em lote. Uma fila é criada para todos os comandos que causam reflow sejam processados de uma única vez. Porém o foco é entender o que causa um reflow e tentar minimizar o seu uso para ganhar performance na aplicação.

Este assunto é novo, e com certeza, A lista que mostro abaixo deve crescer. É importante mantermos a atenção a este assunto porque pequenos cuidados podem significar muito. Em um site web visualizado em desktops a diferença é óbvia sobre o tempo de renderização. Mas isso implica em outras coisas, que podem fazer a diferença não apenas em montar uma página mais rápido, mas também para menor gasto de processamento, o que garante também mais tempo de bateria em mobiles e tablets por exemplo.

Adicionar, remover ou atualizar o DOM;
Esconder nós do DOM usando display:none;
Mover e animar o DOM na página;
Adicionar folhas de estilo on-the-fly que mudem o comportamento dos elementos;
Redimensionar janelas;
Alterar tamanho de fontes;
Scroll de página;

Em um dos posts sobre o assunto, Tony G mapeou pesquisas prévias e montou a seguinte tabela, que também está sendo constantemente atualizada.

Element

Frame, Image

Range

SVGLocatable

SVGTextContent

SVGUse

window

clientHeight,
clientLeft,
clientTop,
clientWidth,
focus(), getBoundingClientRect(), getClientRects(), innerText,
offsetHeight,
offsetLeft,
offsetParent,
offsetTop,
offsetWidth,
outerText,
scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft,
scrollTop,
scrollWidth

height, width

getBoundingClientRect(), getClientRects()

computeCTM(), getBBox()

getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()

instanceRoot

getComputedStyle(),
scrollBy(),
scrollTo(),
scrollX,
scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

Como melhorar o meu código para minimizar os reflows?

É simples. Basta minimizar o uso de requisições de estilo, que façam o navegador executar reflows ou repaints.

Planejar a sua aplicação e entender como plugins e scripts criados vão se comportar em relação a reflow e repaints. Arquitetar o uso de plugins de acordo com a personalização que deve ser feita. Minimize o uso de alteração de estilos on-the-fly.
Quando precisar alterar a propriedade de um estilo, troque o nome da classe, planeje a existência deste estado e adicione-o ao CSS previamente. Se o valor desta nova classe for dinâmica, use cssText. Evite alterar a propriedade diretamente para qualquer mudança.
Pense como suas mudanças afetam a render tree e o quanto precisará ser revalidado depois desta mudanca. Se você usa position:absolute em um elemento, ele deixa de pertencer ao nó que está, e passa a ser filho do BODY. Alterá-lo então, não será tão custoso em termos de performance. Mesmo que alterações neste nó sobreponha outras areas, o reflow acontecerá apenas neste nó, e não em toda a render tree.
Limpe seu CSS. Classes não utilizadas devem ser removidas.
Reduza o número de mudanças no DOM. Ele vai causar mudanças estruturais em todas as outras etapas. E mais tempo de reflow.
Animações na página, transições? Pondere sobre posicioná-la de maneira absoluta e trabalhar com ela a partir do BODY.
Vá com calma nos seletores CSS – os descendentes em particular – pois usam maior poder de CPU para executar a tarefa (CPU = Bateria).

Referências

DOM pela wikipedia
Gecko Reflow
DOM, HTML5, CSS3 e Performance – Slides por Paul Irish
Reflow pelo Mozilla Labs
Reflow e Repaint na Ajaxian
Reflow pelo Google Code
W3C Overview do DOM
1 dia de javascript com Alex Russel: Como Navegadores Veem as suas Apps
Como (não) criar um layout no webkit por Tony G
Usando a timeline panel em navegadores webkit
The book of Speed
Reflow/Repaint por Stoyan Stefanov
Inconsistências dos navegadores em Reflows por Stoyan Stefanov
BrowserScope tests para reflows
Browsers para Web Developers David Baron da Mozilla labs
Renderização no webkit, o básico

Posts Relacionados

Ferramentas de diagnóstico

Diego Eis — Mon, 11 Apr 2011 16:46:49 +0000

Se você escreve CSS e HTML provavelmente tem problemas de compatibilidade e visualização. Isso é normal, acontece com os melhores desenvolvedores. Quando isso acontece, o melhor a se fazer é um trabalho investigativo. Esse trabalho normalmente é ingrato porque você demora horas investigando o seu código para encontrar o erro e geralmente esse erro é solucionado com uma linha de código. Para você descobrir qual é essa linha, você precisa de ferramentas que te ajudem a decifrar todo o problema. Vou indicar algumas aqui que você já deve conhecer.

Ferramentas de Inspeção

Hoje a maioria dos browsers tem sua própria ferramenta de inspeção. O Firefox incorporou a Firebug, o IE tem a Developer Tool, o Chrome e o Safari tem o web inspector do próprio Webkit. O Opera usa o Dragonfly.

Com estas ferramentas você consegue facilmente encontrar o elemento, verificar o seu estilo CSS e entender qual das propriedades está causando o problema. Você consegue editar essas propriedades e ver o resultado ali mesmo.
Entenda que essas ferramentas não são utilizadas para salvar seu CSS diretamente servem apenas para fazer o trabalho investigativo.

Além de nos ajudar com HTML e CSS, os “inspectors” nos ajudam muito com debugging de Javascript. Você consegue localizar exatamente um determinado problema adicionando observer points para verificar o funcionamento de partes do script.

XRAY

O XRAY é um bookmarklet que te mostra as informações sobre um determinado elemento apenas clicando em cima dele. Você salva o bookmarklet e pronto. Clicando em qualquer elemento, você consegue informações como tamanho, nome da classe e do id, hierarquia, margens e qualquer outro estilo relacionado ao elemento.

SelectORacle

Você já deve ter visto algum seletor muito, mas muito complexo e difícil de se entender. Algo do tipo:

1
2
3
4
5
6
7
8
9

body > ol > li p;
:not(a);
p:not(.section);
body > h2:not(:first-of-type):not(:last-of-type);
ul li:nth-child(2n+3):not(:last-child);
ol li:nth-child(-3n+9);
ol li:nth-child(7n-3);
button:not([DISABLED]);
html|*:not(:link);

Se você parar alguns preciosos minutos você consegue entender exatamente o que cada um dos seletores quer dizer. O SelectORacle te fala em segundos o que cada um dos seletores quer dizer, explicando em poucas palavras cada uma das funções.

Validadores de HTML e CSS

Validar seu HTML e CSS não é ponto crucial para a aprovação do código pelo cliente, mas ele validar o código é muito importante para que ele não vá para a produção com erros de sintaxe. Estes erros podem causar grande parte dos erros visuais de crossbrowser. Cada browser se comporta diferente ao encontrar uma tag aberta ou colocada no lugar errado. Se o IE quebra o layout porque a tag não está fechada da forma correta, mas nos outros browsers o visual da página aparece normalmente, você logo fará um Hack para consertar o problema no IE.
Por isso é interssante que antes de incluir um CSS Hack em seu código, procure a SOLUÇÃO do problema antes de fazer um “workaround”.

O W3C disponibiliza o validador de HTML, que já está entendendo algumas coisas de HTML5. E o validador de CSS, que ainda não entende CSS3.

Posts Relacionados

Múltiplos backgrounds com CSS

Diego Eis — Mon, 28 Mar 2011 18:52:56 +0000

Uma das features mais esperadas por mim é sem dúvida a possibilidade de podermos definir múltiplos backgrounds via CSS. Chega de elementos extras e gambiarras. No CSS3 a propriedade background ganha várias funções, dentro elas a possibilidade de definirmos várias imagens como background em um único elemento.

A sintaxe é muito simples. Na verdade, é idêntica a sintaxe existente. Segue abaixo:

1
2
3
4
5
6
7
8
9
10

div {
width:600px;
height:500px;
border:1px solid black;
background:
url(gradiente-top.png) top left repeat-X,
url(gradiente-baixo.png) bottom left repeat-X,
url(gradiente-esquerda.png) top left repeat-Y,
url(gradiente-direita.png) top right repeat-Y;
}

Veja que basta definirmos diversas vezes a propriedade URL com as imagens que escolher e pronto. Os atributos de posição e repetição continuam iguais!
É tão simples que dispensa grandes explicações. No exemplo acima usei 4 imagens em gradiente transparente. Duas para os lados e as outras duas para o topo e baixo.

Testando com o HTML

Posts Relacionados

Para iniciantes: O que é HTML?

Diego Eis — Fri, 21 Jan 2011 02:26:24 +0000

HTML é uma das linguagens que utilizamos para desenvolver websites. O acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em português Linguagem de Marcação de Hipertexto.

O HTML é a liguagem base da internet. Foi criada para ser de fácil entendimento por seres humanos e também por máquinas, como por exemplo o Google ou outros sistemas que percorrem a internet capturando informação.

Quem criou o HTML?

Tim Berners-Lee. Esse é o nome do homem que criou o HTML. Ele criou o HTML para a comunicação e disseminação de pesquisas entre ele e seu grupo de colegas. O HTML ficou bastante conhecido quando começou a ser utilizada para formar a rede pública daquela época, o que se tornaria mais tarde a internet que conhecemos hoje.

O que são as tags do HTML?

O HTML é uma linguagem baseada em marcação. Nós marcamos os elementos para mostrar quais informações a página exibe. Por exemplo, um título importante. Aquele título do artigo, da manchete do site, nós marcamos com uma tag/elemento chamado H1. Veja um exemplo:

1	<h1>Aqui vai o texto do título</h1>

Perceba que o texto está entre duas marcações. Essas marcações são chamadas de TAGS. As tags são abertas e depois fechadas. No exemplo acima abrimos a tag com

e fechamos com

. O que está dentro é o conteúdo mostrado para o usuário.

O parágrafos são marcados com a tag P. Assim:

1
2
3

<p>Aqui vai o texto do parágrafo.
Geralmente parágrafos tem muitas palavras,
letras menores que as do título</p>

Utilizando as tags, nós dizemos para o navegador o que é cada informação. O que é um título, o que é um parágrafo, o que é um botão, um formulário etc. Dizemos também o que é cada coisa para os sistemas de busca, como o Google. O Google, nesse caso, para exibir os resultados de busca, ele precisa saber o que é um parágrafo e o que é um título. Ele sabe disso através das tags.

A estrutura básica

Todo HTML começa do mesmo jeito. Não há segredos aqui. Você pode simplesmente copiar em algum lugar para usar esse código toda vez iniciar um novo HTML.

1
2
3
4
5
6
7
8
9
10
11

<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Título da página</title>
</head>
<body>
... aqui vai todo o codigo HTML que faz seu site...
</body>
</html>

A primeira linha se chamada DOCTYPE. O Doctype avisa aos browsers, robôs de busca, leitores de tela e outras coisas que tipo de documento e aquele que eles estao prestes a carregar. Existem outros códigos que podemos carregar, por exemplo XML. Por isso o Doctype avisa o browser para que ele saiba como se comportar ao ler o código.

Depois começamos com a Tag HTML. Isso quer dizer que todo o que estiver entre as tags é escrito em HTML. Ao lado da palavra HTML tem um atributo (explico o que são atributos mais pra frente) chamado lang, onde indicamos qual o idioma do texto que escreveremos.

Logo após a tag html temos a tag . Na tag Head nós indicamos o título do documento e indicamos a tabela de caractéres que o browser deve usar para renderizar seu texto. Também não se preocupe com isso agora.
A tag &lttitle> é muito importante. É com ela que você indica o título do documento. O Google e outros sistemas de busca utilizam essa tag para indicar em suas buscas o título da págin. Isso é muito importante para que você apareça bem nas buscas.

Logo depois da tag de fechamento começamos a tag . Dentro deste elemento é que vamos escrever todo o código HTML do resto do site.

1
2
3
4
5
6
7
8
9
10
11
12
13

<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Título da página</title>
</head>
<body>
<h1>Aqui vai o texto do título</h1>
<p>Aqui vai o texto do parágrafo.
Geralmente parágrafos tem muitas palavras, letras menores que as do título</p>
</body>
</html>

Criando seu primeiro HTML

Para criar seu HTML é muito simples. Primeiro, abra e crie um arquivo vazio, sem texto, com o nome index.html. Utilize o Notepad (se estiver no windows) ou o TextEdit (se estiver no Mac).
Perceba que a extensão do seu arquivo é .html e não .txt

Feito isso, copie o código utilizado no exemplo acima e cole neste documento. Salve e abra no seu navegador. Voilá! Você fez seu primeiro arquivo HTML

Um pouco avançado: Desenvolvimento em Camadas

Um dos principais problemas no desenvolvimento para internet é a mistura dos diversos códigos. Nós não usamos apenas o HTML para fazer sites. Além do HTML, utilizamos ainda o CSS, que é uma linguagem para configurarmos o visual das páginas e o Javascript, que vai cuidar do comportamento da página, por exemplo, o que acontece quando o usuário clica em um botão.
Há também as linguagens chamadas Linguagens Server-Side, que são linguagens como PHP, Python, Ruby, ASP e etc. Essas linguagens fazem tudo funcionar. Elas fazem os cálculos nos servidores e dão a resposta para o navegador do usuário.

Para que os códigos não se misturem, nós os separamos em diversas camadas. Para ficar mais fácil de entender, imagine que o HTML é sempre o esqueleto do site. É com ele que vamos fazer toda a estrutura de código, onde iremos dizer o que é um título, o que é um parágrafo, uma imagem e etc. O CSS será a parte externa do corpo. É o que deixará o esqueleto bonito. É com o CSS que iremos dar cor para o título, configurar o tamanho do texto, largura das colunas e etc.

Dessa forma nós não misturamos o código HTML e o código CSS. Utilizamos a mesma ideia para separar os outros códigos citados acima.

Este é o básico. É conceito puro, por que você precisa começar de algum lugar.

Mais referências: