Categorias
HTML5 JavaScript Tutoriais

Observe a orientação do device com JavaScript

Com Javascript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico em nossa aplicação podemos utilizar JavaScript.

Temos “N” possibilidades de acompanhar a orientação do device com JavaScript, nesse post vou mostrar duas maneiras bem simples com JavaScript, a primeira observando o evento ‘orientationchange’, para isso adicionamos um listener em em nossa janela com o seguinte código:

window.addEventListener('orientationchange', function(){ // faça alguma coisa });
Code language: JavaScript (javascript)

O código acima acompanha quando a orientação do device muda, mas como sabemos que o usuário está em landscape ou portrait, para isso pegamos a orientação do device, com window.orientation essa propriedade retorna a rotação do device:

window.addEventListener('orientationchange', function(){ switch(window.orientation) { case -90: case 90: alert('landscape'); break; default: alert('portrait'); break; } });
Code language: JavaScript (javascript)

Com as informações sobre a rotação do device sabemos que 90 ou -90 o device está em landscape e diferente disso portrait. No código acima foi disparado somente um alert, mas poderíamos chamar alguma outra função, editar uma classe de um elemento ou adicionar uma conteúdo específico para o usuário.

matchMedia

A segunda opção seria com matchMedia ela faz parte da Web API Interface com ela podemos validar media queries por exemplo:

if (window.matchMedia("(min-width: 360px)").matches) { /* O view port tem pelo menos 360px de largura */ } else { /* o view port tem menos de 360px de largura */ }
Code language: CSS (css)

Podemos validar qualquer media query no CSS3 temos uma regra para verificar a orientação vamos utilizar ela para pegar o orientação do nosso device:

function handleOrientationChange(mediaQuerie) { if (mediaQuerie.matches) { alert("portrait") } else { alert("landscape") } } /* Criamos uma variável para armazenar a media querie */ var mediaQuerie = window.matchMedia("(orientation: portrait)"); /* Adicionamos um listenr para acompanhar a mudança de orientação */ mediaQuerie.addListener(handleOrientationChange);
Code language: JavaScript (javascript)

Temos ai duas opções para verificar a orientação do device com JavaScript. Para saber sobre Progressive web apps eu tenho um curso sobre o assunto. Tenho vídeos gratuítos sobre Desenvolvimento Mobile Web em meu canal do Youtube. Caso tenha qualquer dúvida só deixar um comentário.

Categorias
Tutoriais WordPress

Padrões de escrita de CSS

No último sábado dia 23 tivemos o WordCamp São Paulo evento oficial organizado pela comunidade WordPress. Uma das palestras que me chamou atenção foi a do Claudio Sanches, falou sobre padrões de codificação e dicas sobre desenvolvimento com WordPress, sua palestra teve o nome “Não é porque funcionou que significa que esta certo!”.

Uma das dicas do Claudio Sanches em sua palestra,  foi sobre o HandBook do WordPress documentação gerada pela equipe do Core do WordPress, nela contém dicas sobre codificação de CSS, HTML, JavaScript e PHP. Fiquei muito interessado no assunto e neste post vou traduzir os principais pontos do Handbook sobre CSS. Lembrando que esses padrões são especificados pela equipe do core do WordPress existem outros padrões definidos por outros times, mas muitas regras dessa guideline também podemos aplicar em projetos sem ser WordPress.

Estrutura

Uma estrutura limpa e legível é muito importante em um projeto com grandes equipes:

  • Para indentar use tabs, não use espaços.
  • Adicione duas linhas em branco para separar seções e uma linha para separar blocos da mesma seção.
  • Caso aplique uma mais de uma regra para um seletor colocar um em cada linha

exemplo:

/* correto */

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

/* errado */

#selector-1, #selector-2, #selector-3 {
    background: #fff;
    color: #000;
    }

#selector-1 { background: #fff; color: #000; }

Seletores

São muito importantes para eficiência do seu CSS, mas pode ter resultado inverso no projeto quando mau executado.

  • Semelhante ao padrão de codificação do WordPress para nomes dos arquivos use letras minúsculas e palavras separadas por hífens ao nomear seletores.
  • Evite camelCase ou sublinhados.
  • Use seletores legíveis quem descrevam qual é elemento e qual é o sua aparência.
  • Seletores por atributo devem usar aspas duplas amarrando o seu valor.
  • Evite seletores sobre-qualificados, por exemplo, “div.container” podemos utilizar apenas “.container”.

Exemplo:

/* correto */

#comment-form {
    margin: 1em 0;
}

input[type="text"] {
    line-height: 1.1;
}

/* Incorrect: */

#commentForm { /* erro: camelCase. */
    margin: 0;
}

#comment_form { /* erro: underline. */
    margin: 0;
}

div#comment_form { /* erro: sobre-qualificação. */
    margin: 0;
}

#c1-xr { /* O que é c1-xr?! esse tipo de seletor não define nada. */
    margin: 0;
}

input[type=text] { /* com atributos devemos trabalhar dessa forma [type="text"] */
    line-height: 110%;
}

Propriedades

Menos é mais, verifique se você não está repetindo o estilo ou introduzindo dimensões fixas(quando a solução fluida é mais aceitável).

  • Propriedades devem ser seguidas de uma coluna e um espaço
  • Todas propriedades devem estar em caixa-baixa, exceto para nomes de Font específicas.
  • Usar código hexadecimal para cores, ou utilizar rgba() somente quando necessitar de utilizar opacidade.
  • Evitar de utilizar a propriedade rga em letras maiúsculas
  • Quando possível encurtar os valores hexadecimais: #fff ao invés de #FFFFFF
  • Use shorthand(exceto para overriding styles) para background, border, font, list-style, margin e padding.

Ordenação de Propriedades

Ordenação aleatório de propriedades é um caos, isso não é poesia. No Core do WordPress, utiliza dois padrões de ordenação: a lógica ou ordenada por categoria. As propriedades dentro de uma categoria são também estrategicamente ordenadas para criar uma transição entre seções, por exemplo, a propriedade “background” escrita antes do “color”.

A ordenação por categorias tem a seguinte base:

  • Display
  • Posicionamento
  • Box model
  • Cores e tipografias
  • Outros

Exemplo:

#overlay {
    position: absolute;
    z-index: 1;
    padding: 10px;
    background: #fff;
    color: #777;
}

Vendor Prefixes

São os prefixos para engine de cada browser, por exemplo,“-webkit”. Devem ser ordenados dos prefixos mais longos para os mais curtos. Valores devem ser alinhados a esquerda após os dois pontos os valores alinhas com tab com se fosse uma única coluna

Exemplo:

.koop-shiny {
    -webkit-box-shadow: inset 0 0 1px 1px #eee;
    -moz-box-shadow:    inset 0 0 1px 1px #eee;
    box-shadow:         inset 0 0 1px 1px #eee;
    -webkit-transition: border-color 0.1s;
    -moz-transition:    border-color 0.1s;
    -ms-transition:     border-color 0.1s;
    -o-transition:      border-color 0.1s;
    transition:         border-color 0.1s;
}

Caso especial CSS gradients:

.gradient {
    background: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
    background-image: -webkit-linear-gradient(bottom, #fff, #000);
    background-image:    -moz-linear-gradient(bottom, #fff, #000);
    background-image:      -o-linear-gradient(bottom, #fff, #000);
    background-image: linear-gradient(to top, #fff, #000);
}

Valores

Seguindo as guidelines abaixo podemos manter um alto grau de consistência em nosso arquivo CSS.

  • Espaço antes do valor e depois dos dois pontos
  • Sempre terminar com ponto e vírgula(claro)
  • Usar aspas duplas ao invés de aspas simples
  • Valor 0 não deve ter unidade(exemplo: 0%, 0px, 0em…)
  • Use o zero a esquerda para valores decimais, exemplo, evite usar valores como .5 o ideal é 0.5.
  • Em Múltiplos valores separados por vírgula, cada valor deve ser separado por vírgula ou uma nova linha.

Exemplo:

/* Correct: */

.class { /* Uso correto de aspas duplas */
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
}

.class { /* Uso correto de valores com zero */
    font-family: Georgia, serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                       0 1px 0 #fff;
}

/* Incorrect: */

.class { /* Erro: falta de espaço entre os valores */
    background:#fff
}

.class { /* Erro: adicionando unidade para 0 */
    margin: 0px 0px 20px 0px;
}

Media Queries

Media queries permitem adaptar o nosso DOM a diferentes tamanhos de tela. Não se esqueça de testar todas as regras para ter certeza que este será o esperado. Em geral, é aconselhável manter as media queries agrupadas na parte inferior de seu arquivo css. Uma exceção é feita para p arquivo wp-admin.css no core.

A regras para o media queries devem ser indentadas em um nível:

Exemplo:

@media all and (max-width: 699px) and (min-width: 520px) {

        /* Your selectors */
}

Comentários

Caso tenha preocupações sobre o tamanho do arquivo, utilize arquivos minificados e constante SCRIPT_DEBUG. Comentários longos devem ser quebrados a partir de 80 caracteres.

Uma tabela de conteúdo deve ser utilizada para stylesheet extensos, especialmente os que são altamente seccionados para isso usamos um índice numérico(1.0,1.1,2.0, ect) que auxilia a busca, nesse caso repetimos o número do índice na seção, assim quando o usuário realizar a busca o apontador irá pular para o local correto.

Comentários devem ser formatados tanto quanto PHPDoc é. Cabeçalho de Seções e subseções devem ter novas linhas antes e depois. Comentários inline não devem ter linhas vazias separando o conteúdo de um item para cada relacionado.

Exemplo de seções e subseções:

/**
* #.# Título da seção
*
*  Descrição da seção.
*/

.selector {
    float: left;
}

Exemplos inline:

/* Este comentário é para esse seletor */

.another-selector {
    position: absolute;
    top: 0 !important; /* Aqui vocês explica porque usou !important */
}

Considerações finais

  • Manter o código bem escrito desde o início, nos ajuda a manter a visão geral, deixando nosso código flexível a mudanças.
  • Se você está tentando resolver um problema, esforce para resolver o problema antes de adicionar mais.
  • Saiba quando usar a propriedade height. Isto deve ser usado para incluir elementos outside(como images). Caso contrário, use line-height para ter mais flexibilidade.
  • Não redefina propriedades default, por exemplo, display:block em elementos blocados.

Referências:

http://make.wordpress.org/core/handbook/coding-standards/css/
https://speakerdeck.com/claudiosmweb/nao-e-porque-funcionou-que-significa-que-esta-certo

Categorias
Eventos WordPress

FEEC Brasil 2012

No dia 01 de dezembro em Recife acontece o FEEC Brasil 2012, um evento especial com grandes nomes relacionados a TI como: Stoyan Stefanov, engenheiro de software do Facebook e o autor de livros Javascript Patterns(faz parte da minha biblioteca) e Object-Oriented JavaScript. Além disso, é o criador do smush.it ferramenta de otimização de imagens. Resumindo o cara é fod* de verdade.

Outro nome forte no evento (que também vem de fora) é Caridy Patino: front end engineer da Yahoo! e especialista em SSJS / NodeJS e plataforma Cocktails Yahoo!. Caridy fará uma palestra sobre os desafios para se construir aplicações HTML5 para dispositivos móveis.

Além dos “pratas da casa” : Fabio Akita (Codeminer 42), Paulo Melo (C.E.S.A.R – SP), Nelson Glauber (C.E.S.A.R | Unibratec), Virgínia Chalegre (C.E.S.A.R Recife), Gustavo Guanabara(Tuiuiú Comunicação – RJ), Pedro Rogério (Ambulance-SP), Felipe Furtado(C.E.S.A.R Recife), Fred Vasconcelos(Joy Street – PE). Os palestrantes que acabei de citar, fazem parte das palestras do salão principal.

Mas as palestras não acabam por ai, entre uma palestra e outra no salão principal, acontecem light talks que eu vou ter o prazer de fazer parte! Vou falar sobre underscores o starter theme criado pela a equipe da Automattic.

Além da minha mini palestra irão participar: Gustavo Costa(EASY – Soluções Integradas), Lucas Cavalcanti(MGR Tecnologia), Nicholas Fazio(NicholasFF.Com), Socorro Macedo(Lefil), Danilo Torres(Mobiclub), Wilker Lúcio(Kajabi – EUA), Bartho Bernsmann(Microsoft Innovation Center – PE), Guilherme Farias(MGR Tecnologia)… Acho que não esqueci de ninguém. A programação completa você confere aqui : http://www.feecbr.com.br/pt/programacao.php?local=Recife

Estou ansioso pelo evento, primeira palestra em Recife cidade onde me formei. Reencontrar os amigos vai ser bem legal e conversar com os participantes do evento sempre é um estimulo para novas idéias. Um evento com 19 palestras um dia de overdose de TI. As inscrições ainda estão abertas então se você está pensando, não pense duas vezes o evento é daqui a uma semana.

Inscrições aqui!

O FEEC Brasil acontece no Hotel Golden Tulip Recife Palace que fica na Av. Boa Viagem número 4070. No dia 01 de Dezembro de 2012, mais informações sobre o evento aqui: http://www.feecbr.com.br/

Categorias
Vagas

Vaga Front-end fishy

Conhecimentos: html, css, desejavél javascript.
Noções de: SEO, usabilidade, acessibilidade.

Interessados enviar e-mail para irving[a]fishy.com.br

fonte : http://www.muqueca.blog.br/comentarios/comentarios.php?id=464