Arquivo da tag: web

Teclas de atalho do TinyMCE

Teclas de atalho do TinyMCETinyMCE é um editor de texto embutido que é utilizado em muitas aplicações web, tais como o WordPress, Joomla, Evernote e outras. Para quem prefere utilizar o mouse o menos possível, é sempre util conseguir memorizar as teclas de atalho das aplicações mais acessadas. Para minha surpresa, no caso do TinyMCE muitas vezes essa informação não está disponível nas aplicações e nem de forma direta quando realizamos uma busca.

Portanto, caso mais alguém tenha esse problema, seguem alguns atalhos de teclado do TinyMCE:

Ctrl+Z Desfazer última operação
Ctrl+Y Refazer última operação
Ctrl+B Negrito
Ctrl+I Itálico
Ctrl+U Sublinhado
Ctrl+K Inserir link (tag a)
Ctrl+1-6 h1-h6 (cabeçalhos de H1 a H6)
Ctrl+7 p (parágrafo)
Ctrl+8 Envolve texto na tag div
Ctrl+9 Envolve texto na tag address
Anúncios

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

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

O fim do Google Reader: alternativas e considerações

Ontem à noite quando, surgiu a notícia do fim do Google Reader, começaram a me perguntar se eu conhecia alternativas ao serviço. É claro que vários sites que vivem para isso já tinham publicado suas listas de substitutos, por isso não tive trabalho para responder.

Sobre considerações gerais sobre as motivações do Google, o Gizmodo Brasil também já soltou um post excelente, que ajudou a pensar melhor. Concordo com praticamente tudo, mas somente porque é como as coisas são, pelo jeito. Pode ser nostalgia de um tempo em que a internet era diferente, mas, para além de motivações corporativas do Google em reorganizar seu portifólio de produtos, não consigo me acostumar com a ideia do rumo que a internet está tomando.

Rage comic obrigatório para a ocasião

Rage comic obrigatório para a ocasião

Será que o fim do Reader, agregrador de feeds mais popular da história, não vai acabar arrastando o RSS para a cova também? Cada vez que um grande player da internet faz uma jogada que visa aumentar seus lucros, mas que também joga um caminhão de terra em cima de mais um protocolo ou padrão aberto, os princípios que fizeram a internet dar certo morrem um pouco junto.

Mas isso é só minha opinião, que fica melhor numa conversa de mesa de boteco. Vamos às alternativas!

Feedly

Eles já fizeram questão de dizer que estão totalmente prontos para nos receber, na nossa nova condição de viúvas do Reader. A interface é impressionante, tão impressionante que chega a confundir quem está habituado ao Google Reader, mas é uma questão de costume. Requer extensão para browser. Já voltei a usar e provavelmente vou ficar nele, pelo menos até a alternativa abaixo se recuperar do susto e estabilizar.

The Old Reader

Provavelmente tomaram o maior susto das suas vidas nessa madrugada. O site era quase um hobby, mas o pessoal vai ter que aprender a crescer na marra. O objetivo inicial era acomodar quem sentia falta da interface e das funcionalidades do Reader antigo, pré-Google+.

Netvibes

Jogador antigo, está na área há tanto tempo quanto o Reader. Cheguei a usar o Netvibes um bom tempo antes de conhecer o Reader, mas parei por motivos óbvios. Hoje a plataforma está bem diferente e pode ser uma opção para quem se identificar.

NewsBlur

Confesso que não conhecia até ontem. Tentei acessá-lo novamente agora há pouco e apareceu uma página com aviso de manutenção mas, pelo que vi, também tem uma interface bem bacana. Vale uma pesquisada depois.


Essa são algumas opções mais semelhantes ao Reader. Existe ainda uma inifinidade de aplicativos desktop e mobile para todas as plataformas, mas isso existia antes do Reader, concorda?

Se você tem alguma dica de aplicativo web, desktop ou mobile, por favor compartilhe conosco nos comentários. É sempre bom conhecer mais opções diferentes.

O que muda no Django 1.5

O que muda no Django 1.5No último dia 26 de fevereiro foi lançada a versão 1.5 do framework Django. Ainda não tive a oportunidade de instalar e testar todos os detalhes, mas de acordo com as informações das notas de versão, as principais novidades são as seguintes:

Modelo User configurável

A maior mudança nesta nova versão é a possibilidade de personalizar o modelo User do Django. Antes da versão 1.5, as aplicações que precisassem usar o framework de autenticação do Django eram forçadas a usar a sua definição de “usuário”. Agora é possível substituir o modelo User por outro escrito pelo desenvolvedor.

Algumas vantagens de poder criar seu próprio User são o fim da limitação de 30 caracteres para o atributo username e a possibilidade de criar mais atributos personalizados para o perfil do usuário, por exemplo.

Para facilitar a implementação, está disponível a classe AbstractBaseUser , que fornece a implementação do núcleo de um User customizado.

Também é necessário indicar para a aplicação qual a classe que representa o seu modelo User. Para isso, deve-se fornecer um valor para o atributo da configuração AUTH_USER_MODEL no settings.py. Por exemplo:

AUTH_USER_MODEL = 'myapp.MyUser'

Mais detalhes sobre a personalização do modelo User podem ser consultados na documentação oficial.

Suporte a Python 3

Outra novidade importante é o suporte a Python 3 (especificamente Python 3.2 e acima). Segundo os desenvolvedores, por enquanto este suporte deve ser considerado experimental, pois apesar de ter passado por testes automatizados extensivos, ainda não existiram muitas situações do “mundo real” para colocá-lo à prova. Além disso, alguns recursos não estão disponíveis para Python 3, tais como o backend para MySQL, o ImageField e o LiveServerTestCase. Isso se deve à dependência de componentes de software de terceiros (PIL, Selenium WebDriver etc.) que ainda não foram portados para Python 3.

Suporte a persistência de subconjuntos de campos de um modelo

Foi incluído o novo argumento update_fields no método Model.save(). Com ele é possível salvar apenas um subconjunto dos campos de um modelo. Esse recurso pode ser útil por motivos de desempenho ou para evitar sobrescrever mudanças concorrentes.

Instâncias de modelos relacionados passam a ficar em cache

O ORM do Django passa a evitar que uma nova consulta SQL seja disparada nos casos em que seja invocada uma instância de um modelo que possui relacionamento com outro que já foi recuperado do banco. Para exemplificar, na linha 3 do exemplo abaixo já não é mais necessária uma ida ao banco para recuperar first_choice.poll:

>>> first_poll = Poll.objects.all()[0]
>>> first_choice = first_poll.choice_set.all()[0]
>>> first_choice.poll is first_poll
True

Tag {% verbatim %}

Esta tag evita que o conteúdo do bloco seja renderizado. É útil nos casos em que, por exemplo, queremos evitar um trecho de código Javascript que conflita com a sintaxe do template seja renderizado.

{% verbatim %}
{{if dying}}Still alive.{{/if}}
{% endverbatim %}

Existem ainda muitas outras mudanças nessa nova versão do Django, incluindo algumas incompatibilidades com versões anteriores, para as quais vale a pena ficar atento antes de disponibilizar suas aplicações.

Referência: Django 1.5 release notes

Hack Design: aulas de design para programadores

Se você se considera um bom programador, mas todo mundo vive reclamando da deficiência estética de suas interfaces gráficas, seus problemas acabaram! Bom, pelo menos se você tiver interesse em acompanhar as lições de design para hackers do Hack Design, não vai ser por falta de informação de alta qualidade que a cara da sua aplicação vai desanimar os usuários.

O objetivo do projeto é tornar o assunto “design” mais acessível, mostrando como lidar com suas nuances e subjetividades. Para isso, alguns designers reconhecidos foram consultados para fazer uma curadoria dos livros, blogs, games, vídeos e tutoriais mais úteis para aprender os elementos fundamentais do design.

O projeto consiste em lições semanais que são enviadas por email aos assinantes. Cada lição é composta por uma ou mais indicações de recursos (filme, artigo, jogo etc.) sobre o tema da lição (tipografia, design para dispositivos móveis etc.). Mesmo quem preferir não assinar a newsletter, pode ter acesso livre a todas as lições já disponibilizadas.

A lição número 0, por exemplo, é assistir ao filme Objectified, que trata sobre como o design está presente em praticamente tudo o que nos rodeia.

Referência: Hack Design

Você também pode se interessar por: