Inspired CSS – Aprenda CSS com Andy Clarke

Postado por: Pedro Rogério em

Andy Clarke, um dos gurus mundiais do CSS está lançando, juntamente com seu famoso livro Transcending CSS um DVD com 2 horas e meia de treinamento em CSS que se chama CSS Artistry: A Web Design Master Class. Podem ter certeza que em se tratando de Andy Clarke o conteúdo é de ótima qualidade. O conteúdo do DVD é focado em:

  • Transcending CSS
  • Semântica
  • Microformats
  • Seletores avançados de CSS
  • Técnicas de layout com CSS
  • Tipografia
  • CSS3

CSS Artistry: A Web Design Master Class

Vídeo (Objeto multimídia)

Abaixo uma prévia do que é encontrado no DVD:

Vídeo (Objeto multimídia)

Via Aprendiendo Web

10 Técnicas para Reset CSS

Postado por: Pedro Rogério em

Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia de Browser para Browser, não existe um padrão. Com isso você pode passar por vários problemas ao tentar desenvolver CSS Cross-browser.

Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, inciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser. Abaixo vou mostrar algumas técnicas, algumas desconhecias por alguns, outras já utilizadas por default por vários desenvolvedores.

Continuar lendo »

Peppy – Seletor JavaScript CSS3 mais rápido da Web

Postado por: Pedro Rogério em

James Donaghue desenvolveu recentemente um Framework, chamado Peppy que serve unicamente para selecionar os elementos de nossas páginas através de seletores CSS3. Sua velocidade em relação aos outros Frameworks é seu diferencial, chegando a desbancar outros Frameworks como Sizzle e Ext 2.2, sem falar de Mootools, jQuery, Prototype.

Nos testes executados, ele apresentou os seguintes resultados em relação os Frameworks mais conhecidos:

  • 4x mais rápido no Firefox 3.
  • 6x mais rápido no Firefox 2.
  • 8x mais rápido no Internet Explorer 7.
  • 3x mais rápido no Internet Explorer 6.
  • 3x mais rápido no Opera 9.
  • 4x mais rápido no Safari 3.

Referente a seu maior concorrente, Sizzle, ele apresentou os seguintes resultados:

  • 1.2x mais rápido no Firefox 3.
  • 1.3x mais rápido no Firefox 2.
  • 11.1x mais rápido no Internet Explorer 7.
  • 4.5x mais rápido no Internet Explorer 6.
  • 0x mais rápido no Opera 9.
  • 4x mais rápido no Safari 3.

Caso queira efetuar testes de velocidade com o Peppy em relação a outros Frameworks, é só dar uma olhada no Slickspeed, as velocidades podem variar de browser para browser.

Cross-Browser CSS Drop-Down Menu Framework

Postado por: Pedro Rogério em

Desenvolver menus drop down em CSS pode parecer inicialmente uma coisa fácil, mas você verá que terá problemas com browsers como o Internet Explorer 6 e menores, pois o mesmo não interpreta o comportamento :hover em todos os elementos HTML, somente quando implementado na tag a. Pensando nisso, Tomas Bagdanavičius desenvolver um Framework para criar rapidamente Menus Drop down com CSS.

CSS Drop down menu

Atualmente o Framework possui 15 versões de menu já prontos, todos são Cross Browser e só é necessário JavaScript para que os menus funcionem no Internet Explorer 6 e menores. Vejam o exemplo de um menu semelhante ao da Adobe criado com o Framework.

Design view do Dreamweaver não é browser

Postado por: Pedro Rogério em

Para muitos desenvolvedores, editores do tipo WYSIWYG deveriam ser banidos da face da terra, sejam eles adeptos do Notepad++, EditPlus ou Bloco de Notas, eu não tenho nada contra quem usa esses editores, pelo contrário, eu também já os utilizei em minha jornada, mas hoje utilizo o Dreamweaver pois ele simplesmente atende as minhas necessidades no trabalho. Mas esse agora não é o propósito desse post.

O termo WYSIWYG quer dizer: “What You See Is What You Get“, e em português claro: “O que você vê é o que você obtém“, o Dreamweaver é um editor desse tipo, mas ele também possui o modo de edição de código, que é o que eu utilizo, pois alguém já tentou desenvolver algum site nele no modo Design View? Não façam isso (agora cheguei no propósito do post), pois o que você está vendo alí nem sempre é o resultado esperado, prefira sempre, utilizar o modo código, e visualize sua página no browser, mas nunca dentro do Dreamweaver. Querem ver um exemplo do desastre que pode provocar o Design view do Dreamweaver? Olhem a screen abaixo:

Design View do Dreamweaver

Agora vejam no browser como a página deveria se comportar. Viram a diferença? Nunca desenvolva no Dreamweaver no modo Design view, a não ser que queira ter sérios problemas. Mas pelo que andei lendo recentemente a nova versão do Dreamweaver vai utilizar o motor de renderização WebKit, mas isso não me anima a começar a utilizar o modo Design, ainda vou continuar no modo código.

WaSP Curriculum Framework

Postado por: Pedro Rogério em
Web Standards Project

Seguindo a mesma lógica do Projeto Opera Web Standards Curriculum, o grupo WaSP desenvolverá um framework que auxilie as instituições e iniciantes em desenvolvimento a obter os conhecimentos necessários para trabalhar nessa área.

Esse projeto incluirá recomendações sobre cursos a se fazer, leituras a serem feitas, ferramentas. No lugar de um currículo será designado como Framework pois ele pretende ser uma diretriz rígida e uma ferramenta educativa capaz de adaptar-se as mais vertiginosas mudanças que ocorrem no dia-a-dia.

Leia mais

Via: Webmaster Libre.

CSS3 – Seletor :not()

Postado por: Pedro Rogério em

O seletor :not() com ceteza nos ajudará muito no desenvolvimento web a medida que for implementado nos browsers. O funcionamento desse seletor é basicamente para negar alguma coisa que estamos fazendo:


input#phone {
	background-color:yellow;
}
/* Todos os elementos que não contenham o #phone */
input:not(#phone) {
	background-color:green;
}
/* Todos os elementos que não sejam do tipo Submit */
input:not([type="submit"]) {
	font-size:3em;
}

Isso é somente o básico do que será capaz de ser feito com esse seletor, mas também dependeremos do suporte desse seletor nos browsers, até lá, temos que nos virar como podemos.

Referências

Páginas:«12345678...25»