Postagens

Microformatos

Imagem
Olá pessoal, fim de ano chegando e esse será nosso último post de 2013. Bom, pra fechar o ano com chave de ouro, aprenderemos o conceito de Microformatos , bora lá?! O que é? Já falei aqui anteriormente que a semântica presente em nossos sites deve ser nosso objetivo primordial, já que é o que nos ajuda a rankear em sites de busca, além de aumentar o significado de cada elemento HTML, provendo uma comunicação mais próxima da humana do que a de códigos. E todo esse conceito de semântica é aplicado nos microformatos, já explico o porquê. Microformatos é uma série de especificações que tem como foco principal relacionar a informação ou os dados com os humanos em primeiro lugar e em segundo com as máquinas. É uma nova maneira de se pensar sobre dados. Esta série de especificações constitui um “dicionário” de conteúdo semântico para (X)HTML que tem como base os web standards e é escrito para descrever a informação de forma mais simples possível. Como podem ver na citação acima, o ...

Design Responsivo

Imagem
Olá galerê! Aproveitando que ontem (05/11) foi dia do Designer (Parabéns para mim e para quem trabalha nessa área!!!) e também aproveitando a deixa no post anterior sobre Acessibilidade, hoje falarei sobre Design Responsivo, destacando sua necessidade, características e um breve "tutorial" para tornar um site de design fixo (feito para desktops) em responsivo. So, let's begin! O que é? Há pouco tempo atrás, quando o uso da Internet em dispositivos mobile era pouco ou quase inexistente, era muito comum o desenvolvimento de websites pensando apenas em desktops, com medidas fixas baseadas nas resoluções comuns entre os monitores (800x600 ou 1024x768), porém quando ocorreu o BOOM dos smartphones e consequentemente o aumento de acesso à web proveniente destes, e também o surgimento de uma variedade de resoluções de tela, uma nova forma de layout teve de ser criada. Esta forma é o que chamamos de design responsivo , que não deve ser confundido com design fluído , já explico...

Acessibilidade

Imagem
Olá pessoal! Mais um post saindo pra vocês, aliás, um post recheado de informação importante e essencial para nós que desejamos desenvolver não só um website, mas um website acessível . E como eu torno meu site acessível, seu Sérgio? . Respondo: Basta seguir as dicas abaixo e logo estará apto para desenvolver sites disponíveis para qualquer tipo de user. Acessibilidade : Resumidamente, é a capacidade de fazer com que um mesmo conteúdo possa ser acessado por qualquer pessoa em qualquer mídia . E não se aplica somente à web, em nosso dia-a-dia vemos exemplos práticos de acessibilidade: vagas específicas para deficientes, rampas de acesso, bancos e lugares de transporte público específicos para pessoas com necessidade. Ou seja, assim como são realizadas adaptações físicas para esse público, também devemos adaptar nossos ódigos e folhas de estilo para nossos usuários. Acessibilidade na Web Quando falamos de acessibilidade na web, devemos nos preocupar com os seguintes quesitos: Imag...

Taquigrafia CSS

Imagem
Bom dia, boa tarde, boa noite! Mais um post sensacional de CSS saindo pra vocês e o tema é: Taquigrafia CSS . "Mas que raios é Taquigrafia?" Se formos pela etimologia da palavra, significa: escrita rápida (do grego tachys = rápido e grafia = escrita). Na escrita é geralmente usada por meio de símbolos e abreviaturas, que tornam hábil e prático anotar muitas coisas ao mesmo tempo. Aplicando o conceito acima ao nosso querido CSS, podemos definir que a taquigrafia é nada mais, nada menos do que simplificar as nossas regras declaradas, ou seja, ao invés de definir várias regras para uma mesma propriedade, podemos criar apenas uma. "Agora entendi o que significa, mas como fazer?" Para aplicar a taquigrafia ao nosso estilo CSS devemos seguir alguns parâmetros, os quais serão explicados ao longo desse post. Espero que o conteúdo esteja claro e objetivo, e, caso haja alguma dúvida, basta comentar abaixo. Boa leitura! :) Aprenderemos a aplicar técnicas abreviadas (chama...

Seletores CSS

Imagem
Após um bom tempo sem postar, volto com um assunto já falado anteriormente: os seletores CSS . Já foi explicado nesse post o que são e para que servem, porém no post de hoje meu objetivo é apresentar formas avançadas, e de certo modo "interessantes", de utilizá-los. Já sabemos que podemos ter uma tag , um ID e uma classe como seletores, agora aprenderemos os tipos de seletores que podemos ter ao utilizá-los em conjunto, que são: Seletor Universal Seletor de Tipo de Elemento Seletor Contextual Seletor de Elementos-filhos Seletor Adjacente Seletor de Classe Seletor de ID Agrupamento de Seletores Seletor de Atributo Pseudo-classes Pseudo-elementos Seletor Universal Este tipo de seletor é de compreensão básica e geralmente utilizado para o que chamamos de Reset de CSS (zerar os estilos pré-definidos pelos browsers), pois ele aplica a(s) mesma(s) regra(s) à todos os elementos HTML, isso mesmo, TODOS. Para criarmos uma regr...