Ordem de declaração das propriedades CSS

Postado por: Pedro Rogério em
  • 12 mar
  • 33
Ordem das declarações em CSS

Manter a organização no CSS é fundamental em qualquer projeto, aliás, organização não deve se resumir somente ao CSS. Eu, particularmente em cada projeto declaro as propriedades CSS em ordem alfabética, muitas pessoas me crucificariam por isso, no começo pode parecer estranho, mas depois se torna mecânico e você consegue produzir o CSS normalmente. Mas como eu gosto de colocar aqui também a visão de outros desenvolvedores, vou deixar aqui a dica que encontrei no blog Aloe Studios de como organizar melhor seu CSS.

Todas as declarações devem se resumir na seguinte ordem:

  1. Display & Fluxo
  2. Posicionamento
  3. Dimensões
  4. Margens, Padding, Bordas, Outline
  5. Tipografia
  6. Background
  7. Opacidade, Cursores…

Traduzindo isso para o CSS, as declarações ficariam da seguinte forma:

Continuar lendo »

CSS Animation Pong

Postado por: Pedro Rogério em
  • 10 mar
  • 5

Animações são possíveis utilizar em linguages como o SVG, não existindo de forma nativa no CSS. A proposta de CSS Animation introduzida no Webkit especifica os valores que o CSS terá após um determinado intervalo de tempo.

Através dessa proposta são utilizados os Keyframes, Animations, Animation behavior, Animation events para obter os mais variados tipos de comportamento através de CSS sem a utilização de JavaScript. Mas isso por enquanto é privilégio de browsers que utilizam como motor de renderização o Webkit(Safari, Google Chrome, Midori)

Pong com CSS

CSS Animation Pong

Todos já ouviram falar daquele famoso jogo chamado Pong? Se não fosse por ele os vídeo-games não chegariam ao nível que chegaram hoje. Vamos ver aqui um exemplo de como desenvolver esse jogo utilizando CSS Animation(O Jogo no exemplo é somente uma ilustração, a jogabilidade não existe).

Vamos fazer o uso de 3 animações simples, chamadas left, ball e right, movendo nossas “raquetes” para cima e para baixo e a bola para a direita e para a esquerda. A “raquete” da direita utiliza um Keyframe extra para abrandar um pouco mais o movimento para baixo:

@-webkit-keyframes left {
	from { top: 20px; }
	to { top: 150px; }
}
@-webkit-keyframes ball {
	from { left: 40px; top: 60px; }
	to { left: 340px; top: 150px; }
 }
@-webkit-keyframes right {
	from { bottom: 120px; }
	50% { bottom: 60px; }
	to { bottom: 40px; }
}

O estado :hover é responsável por fazer a chamada das animações:

#court:hover div {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#court:hover #paddle-left { -webkit-animation-name: left;  }
#court:hover #ball { -webkit-animation-name: ball; }
#court:hover #paddle-right { -webkit-animation-name: right; }

Não podemos deixar de mostrar um exemplo, mas atenção que você só irá conseguir ver a animação em browsers que utilizam o motor de renderização WebKit.

Esse post é uma adaptação do original: Broken Links.

Download: A Guerra dos Browsers

Postado por: Pedro Rogério em
  • 6 mar
  • 5
Guerra dos Browsers

A Discovery Channel produziu a algum tempo atrás um documentário onde você pode ver toda essa história a fundo da Guerra dos Browsers que aconteceu entre os anos de 1995 e 1999, que inclusive postei no meu outro blog. Só que infelizmente parece que eles tiraram o vídeo do ar. Mas como eu tenho amigos influentes na Internet, meu amigo Rafael me enviou um link onde podemos efetuar o download da versão full, em Português do vídeo sobre a Guerra dos Browsers.

O Vídeo está no formato .flv, portanto você precisará de um player alternativo para vê-lo, eu aconselho você a utilizar o nFLVPlayer para isso.

O que há de novo no HTML 5

Postado por: Pedro Rogério em
  • 5 mar
  • 9

O HTML 4 foi publicado em dezembro de 1997, lá se vão quase 12 anos de uma especificação ultrapassada, pois engenheiros, projetistas, departamentos de marketing, desenvolvedores e usuários aprenderam muito sobre a Web como um meio de comunicação. Os sites web refletem isso hoje em dia, já não temos mais somente páginas estáticas, hoje desenvolvemos sites que podem interagir com o usuário, mas o simples HTML 4 não consegue isso sozinho, e é isso que o W3C quer conseguir com o novo HTML 5, deixar de ser um simples hipertexto e elevá-lo a um nível superior.

Dentre as principais mudanças podemos destacar as seguintes: Uma API para desenvolvimento de gráficos 2D, incorporação e controle de conteúdos de áudio e vídeo, mantendo firme o armazenamento de dados do lado do cliente e oferecer aos usuários a possibilidade de editar documentos e suas partes de forma interativa. Novas tags foram desenvolvidas como <section>, <footer>, <nav> (para navegação), e <figure> (para atribuir uma legenda a uma foto ou outro conteúdo incluído na página). Caso você tenha interesse em conhecer as novas diferenças entre o HTML 4 e o HTML 5, basta dar uma olhada nesse documento do W3C, ou você pode também ver essa interessante apresentação de Christopher Schmitt:

Vídeo (Objeto multimídia)

Prometo que futuramente farei um post tentando detalhar cada tag nova que foi implementada no HTML 5, mas por enquanto você pode obter maiores informações no seguintes links:

Orientação a Objetos em CSS

Postado por: Pedro Rogério em
  • 3 mar
  • 7

A orientação a objetos, também conhecida como Programação Orientada a Objetos (POO) ou ainda em inglês Object-Oriented Programming (OOP) é um paradigma de análise, projeto e programação de sistemas de software baseado na composição e interação entre diversas unidades de software chamadas de objetos. Em alguns contextos, prefere-se usar modelagem orientada ao objeto, em vez de programação.

A análise e projeto orientados a objetos têm como meta identificar o melhor conjunto de objetos para descrever um sistema de software. O funcionamento deste sistema se dá através do relacionamento e troca de mensagens entre estes objetos.

Na programação orientada a objetos, implementa-se um conjunto de classes que definem os objetos presentes no sistema de software. Cada classe determina o comportamento (definido nos métodos) e estados possíveis (atributos) de seus objetos, assim como o relacionamento com outros objetos.

C++, C#, Java, Object Pascal, Objective-C, Python, Ruby e Smalltalk são exemplos de linguagens de programação orientadas a objetos. ActionScript, ColdFusion, Javascript, PHP (a partir da versão 4.0), Perl (a partir da versão 5) e VB.NET são exemplos de linguagens de programação com suporte a orientação a objetos.

Orientação a objetos no CSS

Uma das coisas mais complicadas em CSS é cada pessoa escreve as folhas de estilo em cascata da maneira que mais lhe convém, não pensando em otimização, gerando assim uma redundância de elementos. Foi pensando nisso que Nicolle Sullivan chegou a aproximação da Orientação a Objetos em CSS(OOCSS), de forma a criar módulos reutilizáveis de forma a serem criadas folhas de estilo mais claras, leves e limpas, inclusive em sites grandes.

Essa apresentação criada por Nicolle Sullivan leva a metáfora de se criar peças de lego para criar nossos sites, de forma que se mantenha a consistência do design, respeitando padrões web e a semântica.

Vídeo (Objeto multimídia)

Um exemplo do código pode ser baixado através do GitHub. Via Ajaxian.

Páginas:«1...14151617181920...28»