Connected Minds - Mario Nery - Informática e tecnologia » Web Design

Tabelas de Referências ou Cheat Sheets 2

Mario Nery — Wed, 12 Nov 2008 02:51:29 +0000

Tabelas de referências (cheat sheets) para PHP

Continuando a seqüencia de artigos onde eu pretendo disponibilizar tabelas de referências para boas práticas ou linguagens de programação vamos ver duas tabelas de referência para o PHP, a linguagem que compõe o WordPress.

As duas tabelas a baixo exemplificam a sintaxe dos principais itens do PHP, tornando mais fácil a compreensão para quem está estudando a linguagem ou mesmo precisa de uma referência rápida sobre a estrutura de codificação do PHP.

- Download da tabela 1 de referência sobre PHP (PDF – 348KB)
- Download da tabela 2 de referência sobre PHP (PDF – 123KB)

Aproveite as ofertas de Windows XP, Windows Vista, Office 2007, antivírus, NOD32, microsoft, windows no JáCotei.

Textos Relacionados:

Tabelas de Referências ou Cheat Sheets 1

Mario Nery — Sat, 18 Oct 2008 03:24:55 +0000

Notaram o “1″ no título do texto, não é? Então é isso mesmo, teremos outros artigos sobre tabelas de referências. Mas ora bolas o que é uma tabela de referência, alguma coisa do Excel??? Nopz… Uma tabela de referência é um guia rápido de consulta para uma determinada linguagem/prática. Algo como o que está na imagem abaixo:

Para quem programa ou trabalha com web de forma em geral ter uma tabela de referência sobre uma determinada linguagem ou metodologia pode ajudar muito na hora de trabalhar em um projeto.

Pensando nisso eu resolvi divulgar algumas tabelas de referência que eu utilizo quando estou trabalhando com web. Manter essas tabelas a mão no desktop ou mesmo imprimi-las e prendê-las no mural de cortiça em frente ao seu computador pode ajudar muito quando aquela dúvida aparecer.

Vamos começar com uma tabela que todo blogueiro e webmaster/designer deve amar de paixão, a tabela de SEO – Otimização para Ferramentas de Busca. Essa tabela traz um resumo das principais práticas de SEO que devem ser implementadas para que o site tenha um posicionamento melhor nos resultados das buscas.

A tabela de SEO tem informações conhecidas por muitos, como o uso da tag title e das H, e também informações não tão comuns quanto o número máximo de caracteres na tag head, sintaxes para o robots.txt e o sitemap. Download da tabela de SEO (PDF – 148KB)

A outra tabela que vou mostrar aqui é a de Tableless, ou seja, referências para desenvolvimento de sites usando CSS. Neste documento poderemos ver as principais marcações de CSS usadas atualmente. Download da tabela de CSS (PDF – 508KB)

Essas duas tabelas abrirão uma sequência de artigos sobre tabelas de referências voltadas principalmente para quem trabalha com o WordPress, assim sendo, iremos abordar SEO, CSS, PHP, HTML e MySQL. Pode ser que outros temas entrem na lista no futuro. Espero que vocês gostem.

Aproveite as ofertas de Aprenda a Operar no Mercado de Ações, Aprenda a Investir em Ações e a Operar Na Bolsa, Investindo em Opções no JáCotei.

Textos Relacionados:

Web RAP?? Conheça o Seo Rapper!

Mario Nery — Sun, 28 Sep 2008 16:19:52 +0000

Que tal a aprender a codificar e desenhar seu site da forma correta através de uma música? Essa é a proposta do Seo Rapper na faixa “Design Coding”, veja, ou melhor veja e ouça:

Gostou? É, eu gostei bastante, o cara tem feito sucesso no You Tube com vídeos falando de assuntos como esse. Você pode conferir tudo que já foi ao ar na página de vídeos dele – http://www.youtube.com/user/m0serious.

A letra de Design Coding:

Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration

a clear Call to action to increase the temptation
use appealing graphics they create motivation
if you have animation
please use with moderation
cause search engines can’t index the information

display the logos of all your associations
highlight your contact info that’s an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation

every page that they click should provide and explanation
should be easy to understand like having a conversation
when you design the style go ahead and use your imagination

but make sure you use correct color combinations
do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
design done, congratulations but it’s time to start construction

follow these instructions when you move into production
your photoshop functions then slice that design
do your layout with divs make sure that it’s aligned
please don’t use tables even though they work fine
when it come to indexing they give searches a hard time

make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat

tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won’t validate

check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox

title everything including links and images
don’t use italics, use emphasis
don’t use bold, please use strong
if you use bold that’s old and wrong

when you use CSS, you page will load quicker
client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that’s the real kicker
make you a lil richer, your site a lil slicker

design and code right man I hope you get the picture
what I’m telling you is true man it should be a scripture
if it’s built right you’ll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you’ll shine like glitter

if you trying to grow your company will get bigger
design and code right man can you get with it

Aproveite as ofertas de Aprenda a Operar no Mercado de Ações, Aprenda a Investir em Ações e a Operar Na Bolsa, Investindo em Opções no JáCotei.

Textos Relacionados:

Recursos para designers

Mario Nery — Thu, 19 Jun 2008 01:16:59 +0000

Um stencil, vetor ou brush bem utilizado pode fazer uma grande diferença na criação de um projeto gráfico de um folder ou de um site. Pensando assim eu resolvi divulgar o endereço de um blog internacional que publica material de primeira qualidade para quem trabalha com criação visual e mais alguns links que vão ajudar aqueles que estão aprendendo design e desenvolvimento web.

O site em questão é o Dezignus.com, lá é possível encontrar vetores, backgrounds, silhuetas, ícones, brushes, stencils e muita coisa para uso em trabalhos gráficos. A quantidade de material é enorme, só mesmo visitando o site para conferir tudo.

Outra dica para quem trabalha especificamente com a web são os Design Stencils do Yahoo, com eles é possível saber as medidas exatas para a criação das divisões mais comuns em uma página web, o tamanho e os nomes padrão dos formatos de banners, entre outras coisas. O que pode ajudar muito quem está aprendendo a trabalhar com wireframes.

Que tal uma lista com tamanhos e modelos de banners padrões e não padronizados? Ela pode ser encontrada no Designers Toolbox. Aliás, lá é possível encontrar medidas para praticamente qualquer coisa, desde folhas de papel e envelopes até CDs/DVDs.

Mais um link interessante do Designers ToolBox traz os códigos em HTML para caracteres especiais como @, copyright, trademark, etc. Esses códigos podem ser encontrados nesta página.

Um PDF com um guia de referência rápida para CSS, uma daquelas coisas que você imprime e pendura no seu quadro de cortiça que fica ao lado do seu micro. E para finalizar três pérolas:

- Gerador básico de layouts em tableless (em inglês)
- Tutorial básico de Tableless (online)
- Yahoo CSS Grid Builder – um construtor online de grids CSS

Aproveite as ofertas de câmera digital, videogame, notebook, geladeira, televisão no JáCotei.

Textos Relacionados:

Atendimento online no seu site de graça!

Mario Nery — Thu, 05 Jun 2008 02:05:46 +0000

Sua empresa precisa de um canal online para comunicação com seus clientes? Que tal parar de depender do MSN ou de qualquer outro programa do gênero para atender seus clientes??

É possível implementar um sistema de atendimento online (ou help desk online) diretamente no site da sua empresa, para isso basta apenas um servidor com suporte a PHP e um banco de dados MySQL, o que é fornecido em qualquer plano de hospedagem Linux.

Existem várias opções de serviços deste tipo, tanto pagos quanto gratuitos, dentre os gratuitos um que pode ser considerado bem robusto é o Crafty Syntax Live Help. Ele permite a criação de um sistema de chat no site da sua empresa que pode ser utilizado para tirar dúvidas dos visitantes sobre seus produtos e serviços ou então para atender um cliente online.

Para isso tudo funcionar basta fazer o download dos arquivos do programa, criar um banco de dados em MySQL no seu servidor web onde está a página da sua empresa e enviar os arquivos para o servidor através de um programa de FTP. Feito isso basta executar a instalação do programa através do seu navegador, como é feito com a maioria dos programas desenvolvidos em PHP.

O Crafty Syntax tem uma série de recursos interessantes, dentre eles:

- Suporte a múltiplos operadores e múltiplos idiomas
- Capacidade de convidar automaticamente um visitante da sua página
- Capacidade de ver o que está sendo digitado pelo usuário do programa antes dele enviar a pergunta
- Múltiplas sessões de chat
- Som de alerta
- Deixar mensagem para o operador que está offline
- Respostas rápidas e muito mais…

A instalação deste programa requer um conhecimento básico desta rotina em um servidor web, contudo, para aqueles que sabem criar um banco de dados MySQL no servidor e sabem usar o FTP mas nunca instalaram esse tipo de programa é possível acompanhar parte de um tutorial do site Viva o Linux que mostra alguns passos da instalação e configuração. Outra possível fonte de informação, mas desta vez em inglês, é a seção de documentação no site do desenvolvedor

(Fonte: Viva o Linux)

Aproveite as ofertas de Casais inteligentes enriquecem juntos, 1808, Bem-Vindo à Bolsa de Valores, Os Segredos da Mente Milionária no JáCotei.

Textos Relacionados:

Vídeo – Dreamweaver CS4 Live Preview

Mario Nery — Sat, 31 May 2008 14:47:54 +0000

Uma das coisas mais interessantes no Dreamweaver CS4 é a capacidade de visualizar a página que estamos desenvolvendo diretamente no programa, sem necessitar de abrir um navegador externo para isso. O DW faz isso usando uma engine do Safari para renderizar as páginas, permitindo ao desenvolvedor visualizar o resultado da codificação da página de modo muito prático. Poderia ter uma extensão ou alguma opção onde fosse possível visualizar usando a engine do Internet Explorer ou do Firefox.

Outra função interessante é a capacidade de clicar sobre um item na página renderizada e ver exatamente onde aquele item aparece no código, facilitando ainda mais a correção de erros ou localização de itens dentro do código da página. Confira o vídeo:

Mais vídeos sobre o novo Dreamweaver podem ser encontrados no site da Adobe TV.

Aproveite as ofertas de O segredo, Lei da Atração, Monge e o Executivo, Harry Potter e as Relíquias da Morte no JáCotei.

Textos Relacionados:

Vídeo do novo Dreamweaver CS4

Mario Nery — Thu, 29 May 2008 01:52:51 +0000

A Adobe já disponibilizou uma versão de testes do Dreamweaver CS4, a nova versão do seu programa para desenvolvimento de sites.

Não vale nem a pena colocar o link para download aqui no blog, já que a versão trial dura apenas 2 dias!! Para quem gosta do DW eu vou deixar um vídeo criado pelo pessoal do blog Magaiver que mostra alguns detalhes da nova versão do Dreamweaver.

Testando o Dreamweaver CS4 from Eduardo Fernandes on Vimeo.

O DW já gerou muitas discussões em alguns blogs nacionais, uns defendem o programa e muitos o criticam. A intenção aqui não é defender a bandeira dos amantes do DW e nem dos “programadores xiitas” (como diz o narrador do vídeo), apenas mostrar as novidades que estão por vir – mas saibam desde já – eu sou completamente apaixonado pelo DW!

Aproveite as ofertas de Laowai - Histórias de uma Repórter Brasileira na China, Marley e Eu no JáCotei.