webdesign

WebDesign

Wallace Vianna é webdesigner e desenvolvedor web no Rio de Janeiro  RJ.

(*) informações que podem ser de utilidade pública, não apenas para webdesign

Publicidade online/na internet

Nomenclaturas e tamanhos de publicidade online:

Iab.net
IAB (Unidades de medida para publicidade na web)
novo-transpAbraweb (medidas em padrões não-atualizados)
novo-transpMater New Media (formatos comentados)

Sites inspiradores

Template Monster: designs para sites de página única.

Design responsivo

Blog Template Monster:
Modelos de sites WordPress com Design Responsivo
Design e imagem responsivos no WordPress
Guia interativo webdesign responsivo e
Infográficos interativos com/sobre webdesign responsivo

Layout e resolução de tela com design responsivo

Recomendações do Google: artigo 1, artigo 2 (extraido do link “infográficos interativos com/sobre webdesign responsivo”)

Design móvel

Modelos de páginas web da Nokia (para smartfones e celulares), com demonstração e download.

Responsive web patterns (padrões para design responsivo) – exemplos (com código) para soluções comuns em design responsivo

Codepen – exemplos de bibliotecas HTML 5 com efeitos especiais (visuais ou 3D)

Mobilizejs.com – biblioteca HTML5 e Javascript para converter página HTML tradicional em página para dispositivos móveis.

To the PC , Hongkiat.com – Listas com conversores e criadores de páginas móveis (gratuitos e pagos)

Dicas do Google Webmaster Tools: Mapa do site móvelDirecionando o buscador (Google) para página móvel

Askville.amazon.com – Links e dicas para criação e conversão de sites móveis (como definir CSS para site móvel, etc)

Teste de compatibilidade entre navegadores para HTML5 e CSS3

Teste o quanto seu navegador está compatível em relação aos padrões do

Páginas para atualizar seu navegador (útil para criar links em seu site, quando ele não exibir a página corretamente):
Google WhatBrowser (português)
Update Your Browser (português)
Browser Update (português)

Testadores e simuladores

Testadores de páginas Online

Simuladores de Celulares

Sizzy – simulador de dois tipos de dispositivos: Android e Iphone; celular e tablet; fácil de usar.

Test Iphone – Testador/simulador de Iphone, online. Bom, tela na vertical e horizontal, com rolagem

How to go mobile – exibe captura de tela de páginas da web, em celular. (Fora do ar em dez.2013)

Mobi Ready – exibe relatório sobre site visualizado em dispositivo móvel, com erros e acertos existentes.

Mobitest – testador de páginas móveis (relatório e teste)

Simuladores de tablets

IpadPeek
Simulador de Ipad online (só navegador de internet). Bom, tem rolagem de tela, vertical e horizontal, em Ipad (Tablet), Iphone e Iphone 5.

Ipad2 simulator
Simulador de Ipad2 (interface, aplicativos e navegador).  Razoável: tela de tablet (Ipad) sem rolagem, apenas na horizontal.

DotMobi
Simulador de Nokia N70 e Sony K750 (requer Java VM atualizado) –  Fora do ar em dez. 2013

Opera Mini
Simulador do navegador Opera Mini em dispositivos de mão (requer Java VM). Não tem rolagem de tela, visualização apenas na vertical.

Iphone tester
Simulador de Iphone Online. Bom, tem rolagem de tela, na vertical e horiozntal.

Android emulator
Simulador de Android S.O. online (em Motorola) Muito bom, tela apenas na vertical, mas tem rolagem

Blackberry emulator
Simulador de BlackBerry. Funciona, mas a tela da simulação aparece deslocada em diversos navegadores.

Simuladores de desktop e laptops

Google Chrome Test IEExtensão do GC (Google Chrome)  para testar todas as versões do IE, na tela do GC, através de um aplicativo online chamado BS (BrowserStack). Só funciona no GC, e você precisa se cadastrar no BS ou usar a versão free.

Firefox Test IE – idem acima, extensão do Firefox para testar todas as versões do IE, na tela do Firefox.

BrowserShots – exibe captura de tela de páginas na web em diversos sistemas operacionais e navegadores. Sua página entra numa fila para ser vista, como imagem.

Fast HTML (exibe páginas na internet nas resoluções de tela padrão mais comuns.

Webpagetest – Testa páginas do ponto de vista do carregamento, em computadores de mesa e móveis, sugerindo mudanças para agilizar o carregamento. Util para questões de SEO e projeto de sites. Muito completo.

Simuladores de qualquer tipo de navegador e computador (celular, tablet, laptop ou desktop):

Sreenfly: site do QuickTools, excelente simulador de dispositivos online, com recursos muito completos.

SauseLabs: oferece um serviço muito profissional, versão paga e uma versão gratuita por tempo limitado. (excelente, mas tem de se cadastrar/logar)

Coderama.com > responsivo: exibe na tela do computador seu site em simulação de diversos dispositivos. (excelente,  com resultado na hora, em diversos aparelhos, tamanhos e orientação de  de tela – em pé ou deitado)

Testadores de páginas Offline / desconectados:

Navegadores desktop / de mesa em diversas versões

Mozilla Firefox Colection (testador de páginas para internet em diversas versões do Firefox; requer instalação mas há versões portáteis)

IE Tester (testador de páginas para internet em diversas versões do Internet Explorer; requer instalação mas há  versões portáteis)

Virtualizador de S.Os

Virtual Box
Para testar o navegador em outros sistema operacionais, em seu computador, sem precisar fazer partição de HD nem instalar o S.O. da maneira tradicional.

Testadores de Plug-ins, players e applets em diversas versões

Java tester (possui ainda testadores para Flash, Javascript, monitores LCD, HTML 5, Pen Drives, janelas pop-up/de salto, etc)

Simuladores de navegadores em dispositivos móveis, para download

Android
Blackberry
Diversos
OpenWave

Ferramentas online

Construtores de sites móveis

Mobirise.com Esse aplicativo pra Windows e Mac promete construir sites responsivos com ferramentas/blocos pré-definidos. Parece ser uma versão desktop de construtores de  sites online e em plugins de CMS.

WebDesign – wireframes

Segue aqui relação de sites que oferecem ferramentas de wireframe online, gratuitos; são recursos básicos (wireframe.cc), fáceis de usar (Frame box) ou semi-elaborados (MockFlow) que não permitem salvar o wireframe na versão gratuita, mas você pode capturar a imagem dele para ilustrar seu pensamento, e compartilhar idéia com terceiros. Já o Google Drawings (aplicativo online do Google para fazer desenhos) permite fazer. salvar e reutilizar o “desenho estrutural” de sua página web, embora não seja uma ferramenta “de wireframe”.

Existem soluções de código aberto, para download, como o Pencil Project (útil para trabalho desconectado da internet); e também soluções voltadas para prototipagem para celulares (Iphone Mock Up).

Outros links: Iplotz (possui demo online), JumpChart,  Gliffy, InVision (sistema completo de wireframe, com navegação, comentário e revisão de versões), MockingBird (aplicação gratuita e que pode ser utilizada sem registro, como o Frame Box), Cacoo,

Webdesign – mood board/painel semântico

Go mood board.com; ferramenta online

Webdesign – canivete suíço

QuickTools, reúne ferramentas de mapa de site, wireframe, simulador de dispositivos, e informação de tela/navegador.

Adobe Muse BR: relação de diversas ferramentas e conteúdos para webdesign: fontes, vetores, texturas gratuitas.

PlaceHold.it – Site que oferece imagens para auxiliar na criação de layouts ou wireframes: imagem para área reservada.

Criador de Gif animado Online: PicasionGickr e GifUp
Serviços possuem limitação de tamanho da imagem (KB e dimensões largura e altura)

Favicon
Geradores de favicon online (ícone personalizado, que aparece na barra de endereços dos navegadores, ao digitar um endereço na web)
Favicon • Iconifier e Manytools (para produtos Apple = Iphone, IPad)

Example.com: página de exemplo, na internet, para usar em seus projetos (link para página inexistente, wireframe, etc).

Webdesign – layout de apresentação, image placeholder ou área de imagem reservada

Place It: ferramenta que permite exibir seu site – online, ou imagem capturada em seu computador – dentro de layouts pré-definidos;  útil para quem deseja fazer apresentações profissionais de trabaklhos de webdesign. Permite inserção de seus vídeos em outros vídeos também (!).

Webdesign – mapa de imagem online

Ferramenta online para gerar mapas de imagem (imagens clicáveis com links):

Image Mapping ; Maschek.huEasy Image Map Editor (Dario D. Muller)

Multimídia

Como baixar videos da Globo.com: Internet download manager •

Biblioteca de áudio gratuito do YouTube; permte download

Soarconversor de texto para voz / áudio / mp3. Planos gratuito e pago. Tem de fazer ajustes de pontuação e entonação ao escrever o texto, mas tirando isso, funciona muito bem. Plano gratuito: 1 voz (feminina), 8 páginas por dia, por até 6 meses.

Peggo.co – baixa vídeos e áudio na internet.

Media.io
Converte áudio – que esteja na internet – e permite download.

Get audio from video – Download de áudio do YouTube, online

Clip Converter – Ferramenta online, gratuita

Video Grabber – baixa vídeos online, requer Java VM instalado

Keep Vid e Savevid – Download de vídeos do YouTube, online, com restrição de navegador ou número de downloads (obriga uso de software ou navegador  próprio, instalados)

Atube – Programa que requer instalação; permite baixar vídeos da internet (You Tube, Myspace) em formato FLV para diversos formatos (AVI, WMV, Mpeg)

Vídeo em HTML 5 (design responsívo ou móvel) – dicas do Template Monster

Vídeos do YouTube

Como criar legendas
sem usar programas complicados link 1link 2 (explicação simples e objetiva, áudio ruim);
usando programa online,
instalando programa,
ou usando programa portátil

Como criar links para
O minuto exato do vídeo
Determinado ponto do vídeo
link de tempo nos comentários

QR code / Código QR

Wikipedia (definição)
Leitor online de QR Code e Código de barras
Leitor online de QR Code
Gerador online de QR Code

Diversos

Wwwhatsnew.com (brasil) – site com links de ferramentas para Bem-estar, Comunicação, Internet, Lazer, Mídias Sociais, Multimídia, Produtividade, Webdesign, entre outras categorias (Adobe Air, Conversores de formatos, Desenho, Educação, Estatísticas, Lazer, LifeStream, Marketing, Microblogging, Motor, Política, Realidade aumentada, Redes Sociais, Segurança, Tutoriais)

Template Monsterdiversas ferramentas online para webdesign: bibliotecas JQuery; visualizador/testador/identificador de fontes online;  paleta de cores; gerador de padrões (imagens), texto grego, formulários, botões e menus.

(*) Randomizador (aleatorizador) – serviços gratuitos e pagos, relacionados com resultados aleatórios: sorteio de listas de nomes ou números, etc.

SEO – Otimização para sistemas de busca

Ferramentas de SEO

Medidores PageRank
Mestre SEO
SEO Chat
Marketing de busca

Como remover pagina / site / conteúdo das buscas do Google

Medidores do valor de seu blog ou site : Biz Information
(Antes de acessar os links – ou depois de ler os dois links anteiores – Leia esse artigo aqui)

Blog webs.com: Dicas sobre SEO

Locaweb, texto muito bom sobre SEO: Uma receita simples para aumentar a receita de seus projetos web

E-mail marketing, marketing online

Your Mailing List Provider
Lista de e-mail, mala direta na web; site que fornece esse serviço, para quem deseja criar listas de email eletrônicas (não são fóruns de discussão!) com versões gratuitas e pagas, como deve ser qualquer serviço on-line.

Eventick
Site que ajuda a promover eventos – eventos gratuitos, divulgação grátis; em eventos pagos, o site cobra percentual sobre o ingresso.

MailChimpE-goi

Enquete online: http://www.enquetefacil.com/

(*) Conversores

– de arquivos

PDF para E-PUB:  Online-converter.com ; Zamsar.com
E-PUB para PDF: E-PUB Converter;  E-PUB Converter.com

Leitores de E-PUB
Online:
Google Play Livros (até 100 mb; também lê PDF)
EMS EPUB Reader (plugin/app para navegador Google Chrome ler E-PUB)
Magic Scroll E-book Reader (senha de acesso único por e-mail)
EPUB Reader (extensão/plugin para navegador Firefox ler E-pub)

Para Tablets e Celulares
Com android:
Aldiko book reader

PDF Crowd: Conversor online de páginas HTML para PDF; na versão gratuita as páginas devem ser pequenas (760 x 410 px ou 1000 x 600 px).

Online PDF Converter
Converte PDF com recursos como proteção de edição, qualidade das imagens e layout da página

Free PDF Convert
Conversor online de documentos do Word, Excel, Powerpoint para PDF.

Express PDFWeb 2 pdf convert

Converte arquivos Word, Excel e da web para PDF

Nitro PDF
Serviços de conversão e edição de PDF online: converte PDF para Word, Excel além de editar.

DOCX para DOC
Conversor word 2007 para word 2003 – 97

Zamzar
Conversor de arquivos online, gratuito, ate 100mb.

Media Convert
Site que converte arquivos em diversos formatos (de texto à áudio); útil para fazer conversão, mesmo que necessite fazer algum tipo de ajuste depois.

CometDocs – converte e envia arquivos, disco virtual público e privado.

Neevia – converte, comprime, mescla e redimensiona uma grande lista de formatos de arquivos (PDF principalmente) entre 2 e 10 mb

File Spazz
Converte arquivos de vários formatos (inclusive vetorial): Corel 5 a 13, Illustrator, DWG, EPS, JPEG, DOC (MsWord), PSD (Photoshop), etc. Tem de ser arquivos “simples”. Possui suporte técnico e tradução para vários idiomas (português inclusive)

(*) Outro(s) conversor(es) e editores

PDF Scape – editor de PDF online –  útil para visualizar anotações de PDFs sem distorções, nas posições originais (quando o Adobe Reader exibir as anotações de maneira inadequada).

PDF (une, separa e rotaciona PDFs): neste blog em em Impressão digital Outros assuntos relacionados > Editores de documentos

Convert JPG to PDF.net: Reune imagens JPG (JPEG) em arquivo PDF.

Divisor e agregador de arquivos (Divide e reune arquivos grandes em pequenos pedaços)
Online file splitter
File splitter

– de medidas

Unidades de medidas

Tabela conversão medidas web (1)
Site que converte valores de Pixel para EM e vice-versa; explica também as unidades de medida (em inglês)

Tabela conversão medidas web (2)
Uma tabela de referência para conversão de medidas de internet: px, em, %, etc.

Serviços Online

Serviços de internet (Web Services)

FTP

Online FTP
FTP Online da Amazon.
Prós: Programa de uso, interface e opções simples.
Contras: Download faz copia de estrutura de diretorios remota, completa, desde a raiz.
Observações: Ações (no menu de opções): atualiza a tela, cria (arquivo ou pasta); envia e baixa arquivos ou pastas (auto-compactadas/zipadas)

Monsta FTP
FTP online
Prós: Programa simples, porém com opções relevantes.
Contras:  Download de múltiplos arquivos/pastas é compactado e pode ser lento; há tempo limite para enviar/baixar múltiplos arquivos ou arquivos grandes.
Observações: Ações (no menu de opções do rodapé ou botão direito do mouse): abrir, baixar, copiar, recortar, renomear, deletar, CHMOD (permissão de arquivos)

AnyClient
FTP online gratuito, requer plug-in Java VM.
Programa de FTP online, interface muito semelhante a programas instalados.
Prós: Compacta arquivos ao enviar.
Observações: Ações: renomear, criar pasta, deletar, enviar, baixar,
Cadastro é cancelado em caso de grande inatividade na conta.

Unlimitedftp, da UtechSoft
(Programa de FTP Online, requer Java instalado)

AjaxPlorer – Dreamwhost
FTP online da Dreamhost,
Prós: já foi muito bom, hoje é apenas regular…
Observações: Oferece link para programa que reune as partes (vide acima, “divisor e agregador de arquivos”)
Contras: Não baixa nem compacta pastas online.

SmoothFTP
Prós: Programa de FTP simples.
Contras: envio e descompactação de arquivos .ZIP limitado a 5 kb (!) ou compra de plano pago.

Net2ftp
Programa de FTP online
Prós: envia e des/compacta arquivos compactados .ZIP no servidor de hospedagem, multiidioma.
Contras: Tem limitação de quantidade de arquivos/MB transferidos por dia, por usuário.

FtpWeb
(programa de FTP online, livre, idêntico ao anterior, em português)

FTP Live (fora do ar em dez.2014)
FTP online, versão HTML, apenas. Rápido, com recursos, mas envia de um arquivo por vez.

 

novo-transpFTP para desenvolvedores (FTP hard core)

Themergency.com – solução de FTP com PHP. Exige um programa (como o CPANEL da hospedagem ou FileZilla) para alterar permissão CHMOD do arquivo para 777. Se você entendeu, é do ramo…

Phoca Server Unzip – solução gráfica para fazer FTP com PHP; talvez não funcione em servidores Windows ou que não suportem funções PHP ZIP.

Widgets e aplicações online

TypeForm – deslumbrante serviço online de formulários (de contato, cadastro), enquetes, testes/questionários, e soluções online de comunicação textual.

Email me form.com – serviço gratuito muito profissional de formulário online

JotForm:  serviço  muito profissional de formulário online, com versão gratuita, em português.

Snack Tools – gratuito e pago: widgets, banners, disco virtual – tudo muito profissional, em HTML 5, Flash ou GIF para pôr em seu site/blog/rede social ou para criar um site

SurveyMonkey: formulários de pesquisa online, gratuitos e pagos

Pooldaddy: avaliações, questionários e pesquisas em seu site

 

Outros serviços

50 sites que não sabia que existiam, todos muito úteis, Tecnomundo.net

Amazon Web Services
Diversos serviços online para internet, com versão gratuita e paga (requer cartão de crédito até para versão gratuita).

Artigos e links para diversos serviços e tutoriais online
http://www.catabits.com.br/

Software colaborativo
37 signals
Ta-da list (Lista de tarefas foi descontinuado para novos usuários; antigos permanecem) e Writeboard editor/revisor/compartilhamento de textos; ambos online e gratuitos.

Galeria de fotos carroussel
SimpleViewer (2D)
Roundabout (3D)

Infra-estrutura web

Endereço IP: Meu endereço IP exibe o endereço IP de um site na web, IP reverso e localização geográfica. Informações sobre endereço IP (o que é, como funciona, etc).

Informação sobre domînios registrados/registro de domínios

.BR
Registro.br/Whois
Fapesp

Altenativa ao internic.org – Novos dominios (genéricos, territoriais e novos domínios = .ART, etc)
https://www.entorno.pt/dominios_gtld

Encurtadores de URLs

Google,
Migre.Me,
TinyUrl (permite escolher/escrever parte da URL),
Va.Mu (possui opções para gera o encurtamento de URL),
BitLy (possui opções de encurtamento, como integração com redes sociais),
IsGd ,
Redirect100 (redirecionamento com opções)
bit Serviço de redirecionamento de URL, com serviços (métricas de acesso, compartilhamento de links, etc).

Velocímetros de conexão com a internet:

Brasil Banda Larga.org.br;  RJNet; Minha conexão; site Anatel

Speed Tester
Site que se propõe a medir a velocidade de acesso a uma página em diversas conexões (discada à banda largíssima). Analisa ainda o peso do site sem ou com HTML, Javascripts, etc.

Calculadora de tempo
Calculadora de tempo para transferência de arquivos na web. Saiba quanto tempo seu arquivo será transmitido em determinada conexão.

Email gratuito e profissional

Amazon SES (Simple Email Services)

Cores

Cores RGBA

Color reminder
Ferramenta online para criação de tabelas de cor.

Kuler
Sofisticada ferramenta de criação de cores para mídias digitais

Pantone
Site da Pantone; vide seção “Products”, “Color Control” para produtos de calibração de cores (leitura em PANTONE)

pocketspec
Site de empresa que comercializa medidores (hardware e software)para cores impressas (leitura em RGB); útil para calibração de cores

Dicas de apoio ao webdesign

Dicas de projeto (web design e design digital)

FastHTML
Dicas diversas sobre HTML e ferramentas úteis online (visualizador de sites na web em resoluções-padrão e paleta de cores)

Dynamicdrive
Site com muitas dicas e tutoriais para projetos de web.

Presentation Zen
Diversas informações para fazer boas apresentações (EM INGLÊS).

Soluções e dicas dignas de registro

Centralizando layout verticalmente

Essa dica do site Kioskea.net se propõe a resolver um antigo problema de design de página para computadores “desktop/de mesa” (ou em telas tradicionais, grandes): centralizar layout de tamanho fixo, “encaixado na tela”, em diversos navegadores.
O único senão (apontado pelo próprio texto) é que a solução depende de Javascript habilitado no navegador para funcionar, e não há opção alternativa para exibição, na falta deste. Ainda assim vale uma conferida.

Importante: para centralizar o layout na tela na horizontal, acrescente seu código CSS ao exemplo fornecido.

No código HTML onde está

<div id="centralização">
<!--Ponha o código de sua página aqui. Este será centrado -->

Acrescente seu código CSS de forma a ficar assim, como neste exemplo inline:

<div id=”centralização” style=”width: 640px; height:480px; border: solid 1px black; margin:0 auto”>
Lorem ipsum

Javascript para criar Trilha de migalhas de pão (breadcrumb trails)

Este código permite que a página HTML exiba todo o caminho de navegação no site, desde a home/pasta raiz, até a página atual, ficando mais ou menos assim:

http://www.dominio.com / pasta1 / pasta2 / paginaAtual.html

Isso simplifica o trabalho de ter de refazer a trilha de navegação (Breadcrumb) em sites

– de “navegação profunda” (com muitas subpastas ou páginas)

– que não possuem indicação de localização diretamente no menu de navegação

– que precisam indicar claramente a navegação existente (conteúdo dividido em muitas páginas ou seções)

Pode pegar o código neste link.

Turbinando seu WordPress sem plug-ins

Essa é pra quem precisa adcionar funcionalidades em sites usando o WP como CMS (Gerenciadores de conteúdo): uma coleção de soluções para seu blog/site em WordPress sem precisar de plug-ins, neste link do Template Monster.

Galeria de fotos deslizante com Jquery

Modelo gratuito do Template Monster para galeria de fotos Jquery

Tudo acima gratuito, mas em inglês…

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: