Ferramenta para webdesign responsivo

embed-responsively-incorporar-responsivamenteEsse site Embed Responsively fornece código para inserir conteúdo da web (vídeo do YouTube, posts do Twitter, mapas do Google Maps, áudio do SoundCloud, etc) em seu site ou página HTML, de modo responsivo (para ser visto em dispositivos móveis).
Mas também te ajuda a inserir de conteúdo nativo, de seu site, desta forma.

É claro que existem formas alternativas de resolver esse problema de responsividade: muitos conteúdos em sites de terceiros podem ficar responsivos apenas removendo marcações de largura e altura. Você pode editar a largura e/ou a altura de seu conteúdo (imagem, p.ex.) para que ele fique responsivo.
Mas para situações em que não se tem a solução para essas questões, esse site fornece o HTML e CSS necessário.

Anúncios

Webdesign, código: Dica de formulário de contato em PHP (gratuito e pago)

Se sua hospedagem de site, na verdade, vende serviço de infra-estrutura de internet e não oferece formulário de contato para seu site ou seu plano de hospedagem não contempla esse serviço, eis uma dica útil, para designers ou desenvolvedores.

  • Com versão gratuita (estrutura em HTML e código PHP) e paga (código PHP e design).
  • Com crítica de campos pronta, em PHP também.
  • Personalizável.
  • Funciona na maioria das hospedagem de sites com PHP

#ValeAdica: Free Contact Form

Ferramentas de blog simples

Quem precisa acrescentar um blog em seu site em HTML ou criar um blog sem banco de dados (o paraíso pra quem quer fazer backup/cópia de segurança de informações não-sigilosas)?

Seguem links úteis de ferramentas gratuitas para essa empreitada:

HTMLY

Jekill

Microblog de Thiago Furlan  (framework/estrutura para desenvolvedores)

Lista com outros CMS desta mesma linha

 

blog-simples

Conversor de fontes online

Quem precisa fazer sites com fontes de texto personalizadas (e que não estejam no Google Fonts ou Adobe TypeKit) pode usar dois sites que geram o CSS/folha de estilo necessário, além de gerar/converter suas fontes existentes nos formatos TTF, OTF, WOFF, WOFF2 ou SVG.

Font Squirrel

Transfonter

conversor-fontes-online

 

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

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

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

Entradas Mais Antigas Anteriores