BEM: metodologia para escrever CSS

Essa dica serve tanto pra quem escreve código como para desenvolvedores, mas é pra webdesign.

Se você sempre teve dúvidas sobre qual a melhor maneira de criar código CSS em projetos complexos (como fazer código auto-explicativo – aquela classe é utilizada onde, pra modificar quem/o que?) criaram a solução: se chama BEM (Bloco, Elemento, Modificador) e pode ser lida neste link.

Não tem código pra baixar, nada pra instalar, só ler, mas tem de ter experiência sólida com CSS antes.

#ValeUmaLida #FicaAdica

Anúncios

Como testar sites para deficientes visuais (daltônicos)

Existe um lugar-comum no design, que é fazer textos com cores cinza-claro, imaginando que assim estão valorizando ou categorizando informações escala escala de tons. Isso é um problema para pessoas com deficiência visual (míopes, idosos).
Outra tendência é fazer sites com fontes de texto muito pequenas ou cores sem grande contraste.

Não há como resolver todos os problemas de design num projeto, mas há ferramentas para tentar minimizar o impacto destas decisões de projeto, como sites que exibem as cores como são vistas por pessoas com tipos de daltonismo, como este, do TopTal.

Existem muitos sites com testes de daltonismo também, basta checar no Google sobre teste de daltonismo.

WordPress – modelo Helium

Seguem aqui algumas dicas sobre como usar o modelo Helium, do WordPress.

Neste exemplo, a página inicial é um resumo do portfólio (uma divisão do modelo), e a página de blogs é a página “blogs” do modelo.
Tenha em mente que tanto as páginas como blogs tem configurações próprias para exibição no site em WordPress.

Mais

Crello – construtor de imagens online

Descobri esse site do depositphotos.com, Crello.com recentemente.

É mais um construtor de imagens para postagens nas principais redes sociais (Twitter, Facebook, Instagram) da internet.
A vantagem/diferencial é que ele já dispõe/oferece os tamanhos utilizados nestas redes, facilitando o trabalho de quem deseja, por exemplo, adquirir uma imagem no DepositiPhotos e criar uma postagem no Instagram, p.ex. Ou para quem trabalha com mídias sociais e ainda não fez um inventário de todos os tamanhos e formatos (atualizados) usados nas redes sociais.

Mas existem outros tamanhos padronizados (A3, p.ex.) e a possibilidade de criar uma montagem de imagens em qualquer outro tamanho.

As imagens podem ser enviadas para o site, ser da  galeria de imagens gratuitas próprio site ou imagens pagas.

#FicaAdica!

crello

 

Testes de compatibidade: tecnologias para páginas da web x navegadores

can-i-use

O site Can I Use permite ver a compatibilidade dos principais navegadores de internet, do mercado, com algumas tecnologias para criação de paginas para web (FlexboxCSS GridCSS transforms, SVG, CSS calc() ).

E tudo isso com um bom design e informações em forma de gráficos, #ValeAdica!

Links relacionados: seção Webdesign > Testes de compatibilidade

Dica de design – multimídia – video

Animação de texto em vídeo – ferramentas gratuitas online (na internet)

powtoon PowToon

introchampIntroChamp

Ambos criam textos animados em vídeo, online; na versão gratuita aplicam selo do site no vídeo, mas de modo discreto (ou que não interfere com sua animação).

Se precisar esconder ou remover o selo, basta usar a imaginação na hora de planejar, fazer e/ou editar o vídeo…

Design: editor de imagem online

Dica do dia:
Achei muito interessante o site Photo Collage.com pois é um portal para diversos sites relacionados com edição de imagem. Você acessa para fazer montagem de fotos, mas a partir dali pode capturar a tela (inteira ou parte) de seu computador e compartilhar online, ou redimensionar/cortar uma imagem (entre outras coisas)… conectado a internet, sem ter programas instalados.

Isso nos faz pensar como o ChromeBook (laptop com o Chrome OS, o sistema operacional do Google) é o futuro a nossa disposição hoje, e como isso faz sentido.

photocollage-com

 

Recomendo.

Entradas Mais Antigas Anteriores