Arquivo da tag: html

Book review: “HTML5 & CSS3 For The Real World”; by Alexis Goldstein, Louis Lazaris, Estelle Weyl; O’Reilly Media

 HTML5 & CSS3 For The Real WorldThe purpose of HTML5 & CSS3 for the Real World, as title says, is to help the readers face real world problems of website building process, giving practical instruction on the new HTML5 and CSS3 resources involved in each specific need. The strong semantic nature of HTML5 specification is highly emphasized, making the reader think about all the possibilites of a truly semantic web. Also, the book offers a fairly deep historic background of the evolution of the specs.

HTML5 new tags are discussed in detail, including examples of some common use scenarios. Also, there is a small website project to follow as an example. People who is really serious about learn and understand details should try to code it from scratch. The section about CSS selectors, for example, gives a formal and in-depth coverage of the subject. It becomes easier to understand what you are doing when creating your style sheets if you know how to categorize the different selectors. Chapter 6 brings a section on CSS colors that enlightened me on basic aspects of color composition and perception.

In case you want to get up to speed quickly, I think it’s ok to just skim over chapter 1, if you’re not interested in HTML/CSS historic details, and chapter 5, if you don’t need to work with audio, video and multimedia resources right away.

The only thing that could be a downside for some people is the fact that much of the valuable and comprehensive information you find in the book is written in prose, not structured by topics. So, if you want a mere reference book, maybe this one is not for you.

I don’t now if HTML5 & CSS3 for the Real World surprised me in a positive way because I’m not primarily a front-end developer – and therefore was presented to new information that amazed me – but the fact is that I didn’t expect to read such a good book on the subject.

Book page: HTML5 & CSS3 for the Real World

Anúncios

8 ferramentas para acertar na escolha das cores do seu site

Você, programador que está lendo esse post, com certeza já proferiu a seguinte frase em alguma oportunidade:

“Eu gosto de programar (para web), mas sou uma negação na parte visual”

Sim, somos ogros. Porém, o que acontece é que, em muitos casos, temos que assobiar e chupar cana ao mesmo tempo. Ou seja, geralmente é preciso sair com alguma gambiarra solução visual para um site, página ou aplicação por conta própria. Não tem jeito.

Por isso, é bom saber que uma das coisas mais simples que alguém pode fazer para deixar uma interface visual minimamente interessante é acertar na escolha das cores que serão utilizadas. É importante que as cores tenham harmonia entre si.

Harmonia → Lógica → Programação → DIVERSÃO

Abaixo, seguem algumas dicas de ferramentas que podem nos auxiliar a encontrar cores que combinem e deixem nosso design um pouco menos tenebroso ou com menos cara padrão de Twitter Bootstrap:

colourcode

colourcode - find your colour scheme 2013-07-22 17-24-01Escolha uma cor movendo o cursor pela tela, selecione com um clique, e a partir dela, gere uma paleta de acordo com os princípios da teoria das cores (análogas, complementares, tríade etc.). É a preferida da casa.

Adobe Kuler

Color wheel | Color schemes - Adobe Kuler 2013-07-22 17-25-43Ferramenta da Adobe, funciona de forma semelhante ao colourcode. Permite criar uma conta para salvar os esquemas de cores.

Color Scheme Designer

Color Scheme Designer 3 2013-07-22 17-26-32Mais um ótimo gerador de paletas de cores que funciona segundo o mesmo princípio dos anteriores.

0to255

#4055c0 on 0to255 2013-07-22 17-27-57É uma ferramenta mais simples, mas não menos útil. Cria variações em torno da mesma cor, o que a torna ideal para bordas, gradientes etc.

COLOURlovers

Browse Palettes :: COLOURlovers 2013-07-22 18-04-44O site permite que os usuários criem e compartilhem paletas de cores.

ColoRotate

colorotateMostra as cores de forma tridimensional, facilitando a compreensão de como as cores se relacionam entre si.

ColourGrab

ColourGrab.com - Colouring The World. 2013-07-22 17-33-39Informe o URL de uma imagem e a ferramenta retorna um esquema com as principais cores que a compõem.

Pictaculous

Pictaculous - A Color Palette Generator (courtesy of MailChimp) 2013-07-22 17-34-34Semelhante ao ColourGrab, com a diferença que é preciso fazer o upload da imagem.

Conhece alguma outra ferramenta de esquemas e paletas de cores? Compartilhe nos comentários!

Você também pode se interessar por:

Tutorial: Criando sites estáticos com Python e Pelican

Tutorial: Criando sites estáticos com Python e Pelican

Índice

  1. Por que um site estático?
  2. O que é o Pelican?
  3. Instalação
  4. O comando pelican
  5. O comando pelican-quickstart
  6. Usando o Makefile
  7. Criando o conteúdo do seu site
  8. Conclusão

Por que um site estático?

Com as facilidades proporcionadas por serviços como Blogger, Tumblr, WordPress e similares, por que alguém deveria optar por um site estático? Alguns motivos:

  • Hospedagem mais barata e independente da continuidade de um serviço específico
  • Controle total sobre o layout e conteúdo
  • Portabilidade
  • Trabalhar com arquivos de texto puro é mais simples e mantém você focado no conteúdo
  • Você pode usar o editor de texto de sua preferência
  • Mais fácil de manter controle de versões, backup etc.
  • É mais divertido!

O que é o Pelican?

Pelican é um gerador de sites estáticos escrito em Python que permite criar conteúdo diretamente em arquivos de texto nos formatos RestructuredText (default), Markdown ou AsciiDoc. Além disso, inclui uma ferramenta de linha de comando que facilita a geração do site, convertendo os arquivos texto para HTML.

Com o Pelican, é possível gerar sites estáticos que, na prática, têm as mesmas funcionalidades de sites dinâmicos. Um blog feito com o Pelican, por exemplo, disponibiliza conteúdo em formato de artigos ou de páginas, comentários (via serviços externos), suporte a templates, publicação de artigos em mais de um idioma, feeds RSS do conteúdo, realce de sintaxe em trechos de código-fonte, geração de PDF dos artigos/páginas, integração com serviços externos como Twitter e Google Analytics, entre outros.

Abaixo, segue um breve tutorial sobre o uso do Pelican:

Continuar lendo