Aline Branco - Design e webdesign

Retirados do HTML5

2012-02-03T12:01:00.002-03:00

3- Conhecendo os elementos retirados do HTML5

Tão importante quanto saber o que tem de novo, é saber o que tem de ultrapassado.

Elementos retirados pois seu uso dificultava a usabilidade e acessibilidade para o internauta.

frame
frameset
noframes

Elementos retirados por terem uso raro, criarem confusão e poderem ser satisfatoriamente tratados por outros elementos:

acronym - Use abbr para siglas e abreviações.
applet - Use object.
isindex - pode ser substituído pelo uso de controles de formulário.
dir - use ul.

Elementos retirados por terem feito puramente de apresentação. Agora se usa CSS para controlar a apesentação do conteúdo.

basefont
big
center
font
s
strike
tt
u

4- Conhecendo os atributos retirados do HTML5

A lista do que está obsoleto, do que não usar, até agora está pequena, mas vai crescer bastante quando eu colocar a lista de atributos obsoletos.

Calma! Não se desespere. Não é difícil. A maioria é intuitivo.

Observe que a lista de elementos obsoletos teve 15 itens. Frame, frameset, noframes, acronym , applet , isindex , dir , basefont, big, center , font , s , strike, tt e u .
Desses 15, 4 você já não usava mesmo, né?! Eu, pelo menos, nunca usei: acronym, applet, isindex e dir.
E, do restante, a maioria foi retirado pelo mesmo motivo. Antes não tinha CSS e agora tem!
Esse é o “pulo do gato”, a “grande dica”: Você deve controlar a aparência pelo CSS e não pelo HTML. Logo... tudo que for para controle de aparência ficou obsoleto.

Nada melhor q eu exemplo para acabar com qualquer dúvida:
Antes, se a gente queria destacar um pedaço do texto, a gente tinha que usar:

<font size="4" face="verdana" color="red"><u>Texto em destaque</u></font>

Assim o texto apareceria com um tamanho maior (4), com uma fonte diferente (verdana), em vermelho e sublinhado.
Agora não tem mais porque usar nem o elemento font e nem nenhum desses atributos, pois tudo isso vai ser controlado pelo CSS.
Se seguirmos essa lógica, fica muito fácil, pois a lista do que ficou obsoletos diminui muito.

---------------------
Segue uma lista com os atributos obsoletos retirado do Curso de HTML 5 do W3C Escritório Brasil

Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:
• align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.
• alink, link, text e vlink como atributos da tag body.
• background como atributo da tag body.
• bgcolor como atributo da tag table, tr, td, th e body.
• border como atributo da tag table e object.
• cellpadding e cellspacing como atributos da tag table.
• char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
• clear como atributo da tag br.
• compact como atributo da tag dl, menu, ol e ul.
• frame como atributo da tag table.
• frameborder como atributo da tag iframe.
• height como atributo da tag td e th.
• hspace e vspace como atributos da tag img e object.
• marginheight e marginwidth como atributos da tag iframe.
• noshade como atributo da tag hr.
• nowrap como atributo da tag td e th.
• rules como atributo da tag table.
• scrolling como atributo da tag iframe.
• size como atributo da tag hr.
• type como atributo da tag li, ol e ul.
• valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
• width como atributo da tag hr, table, td, th, col, colgroup e pre.

Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles serão discutidos.
• rev e charset como atributos da tag link e a.
• shape e coords como atributos da tag a.
• longdesc como atributo da tag img and iframe.
• target como atributo da tag link.
• nohref como atributo da tag area.
• profile como atributo da tag head.
• version como atributo da tag html.
• name como atributo da tag img (use id instead).
• scheme como atributo da tag meta.
• archive, classid, codebase, codetype, declare e standby como atributos da tag object.
• valuetype e type como atributos da tag param.
• axis e abbr como atributos da tag td e th.
• scope como atributo da tag td.

----
Viu como a maioria você vai tirar de letra?
É só lembrar que antes não tinha CSS e agora tem! E tudo que for para controle de aparência ficou obsoleto.
Retirar os que você raramente usa, pois esses, quando você for usar, você vai acabar tendo alguma dúvida e pesquisando. O que a gente quase não usa, a gente esquece. E quando tem que usar, lembra que existe mas acaba pesquisando. “Como é que era isso mesmo?”

Agora a lista ficou pequena né?!

Conhecendo os novos elementos do HTML5

2012-02-02T12:19:00.003-03:00

2- Conhecendo os novos elementos do HTML5

Vamos começar por: Header, Section, Article, Nav e footer.

Vou dar uma explicação meio “grosso modo”, só para dar uma visão geral e começar a situar quem nunca viu essas tags.

Foi observado que os sites sempre tinham:
uma div que continha o cabeçalho da página. Geralmente <div class= “header”>
uma div que continha o menu. Geralmente <div class=“menu”>
uma div que continha o conteúdo da página. Geralmente <div class=“content”>
uma div que continha o rodapé da página. Geralmente <div class=“footer”>

Se você, como a maioria, também costuma usar essas divs, vai ser fácil. No lugar da div que continha:
o cabeçalho – use header
o menu – use nav
o conteúdo - use section
os assuntos dentro do conteúdo – use article
o rodapé - use footer

Por exemplo:
- Ao invés de:

<div class=”header”>
<h1> Título da página
<img src=”logo.jpg” >
</div>

Use:

<header>
<h1> Título da página
<img src=”logo.jpg” >
</ header>

Deu para começar a entender essas tags novas e como usa-las?
São tags que definem um grupo, juntam dentro delas elementos afins.

Acho que com uma imagem vai ficar mais fácil.

OBS importante: O uso dessas tags tornam os documentos mais semânticos e influenciam positivamente em SEO.

---------------------
Segue uma lista com os novos elementos retirado do Curso de HTML 5 do W3C Escritório Brasil

section	A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.
nav	O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.
article	O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.
aside	O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.
hgroup	Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis como título com subtítulos e etc.
header	O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.
footer	O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.
time	Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano.

---------------------

HTML 5 - Introdução e começando pelo começo

2012-01-31T14:22:00.003-03:00

HTML5

Quando começar a usar o HTML5? Ontem!!!
Por cautela, muitas vezes demoramos a começar a usar o HTML5. Esperamos que a maioria dos navegadores se adequassem para evitar gastar muito tempo com “recursos” para fazer o site funcionar na maioria dos navegadores. Bom, essa fase já passou. Se você ainda está receoso, perca o medo e se lance, pois o HTML5 veio para ficar e para facilitar.

O que eu preciso saber para começar a usar o HTML5?
Para quem já conhece o HTML, tableless e XHTML vai ser muito fácil. Vou mostrar as duas formas. Comparando o novo com o que se usa comumente.

1- HTML5 - Começando pelo começo.
2- Conhecendo os novos elementos do HTML5
3- Conhecendo os elementos retirados do HTML5
4- Conhecendo os atributos retirados do HTML5
5- Conhecendo os atributos inseridos do HTML5

1- HTML5 - Começando pelo começo.

Vamos criar o nosso primeiro arquivo HTML5.
Exemplo:

<!DOCTYPE html >
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>
<body>
<p>Alô mundo!</p>
</body>
</html>

As diferenças começam no head.
Vamos por partes:
1.1)

<!DOCTYPE html >

Eu não disse q o html5 veio para facilitar?! Sim, é só isso mesmo.

Para quem estava acostumado com:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Facilitou, não?!

1.2)

<meta charset="utf-8">

Ainda pode ser usado como antes:
<meta equiv="Content-Type" content="text/html; charset=utf-8">
Mas é melhor usar a forma nova.

Observe que também pode ser usado em maiúsculas e com aspas. As sintaxes abaixo são igualmente válidas:
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta charset="utf-8">
<meta charset="Utf-8">

“o HTMl não é XML”
- O HTML não é “case sensitive”, logo não faz diferença se as letras aparecerem maiúsculas ou minúsculas . O XML é “case sensitive”. No XML <meta charset="UTF-8"> é diferente de <meta charset="utf-8">.

1.3) Outro detalhe, sobre “o HTMl não é XML” é que no HTML não é necessário a barra ao final de elementos vazios.
Ex.:
Use: <br> ao invés de <br />
Use: <hr> ao invés de <hr />
Use: <img src="ex.jpg" alt="exemplo" /> ao invés de <img src="ex.jpg" alt="exemplo" />

Logo, também são sintaxes igualmente válidas:
<meta charset="utf-8">
<meta charset="utf-8">

Se você está acostumado a colocar barra no fim, como nos exemplos acima, não se preocupe. Vai funcionar mesmo com a barra, mas procure ir se acostumando a não coloca-la.

1.4) Use o atributo LANG

<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>

Lembre-se que você não só pode como deve usar atributo LANG em outras tags para indicar a mudança no idioma do texto. Por exemplo:

<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>O amor é lindo!</title>
</head>
<body>
<h1>Eu estou apaixonada!!!! rs</h1>

<span lang="es">Yo te amo</span>

<p lang="fr">Je t'aime</p>

<em lang="it">Io ti amo</em>

<p lang="de">Ich liebe dich</p>
<strong lang="en">I love you.</strong>
<p>Resumindo... O amor é lindo!</p>

</body>
</html>

Amanhã continuamos... É uma série.rs

Mais um site de dentista - Mas agora foi para fazer SEO

2012-01-31T13:09:00.003-03:00

Esse não foi uma site criado e desenvolvido por mim. O layout foi pouco alterado. Na prática, reescrevi o site todo, para otimiza-los para mecanismos de busca.

Quando escrevi o artigo sobre SEO falei por exemplo da importancia de usar as tags de Título (h1, h2...) Esse é um site que não tinha um título sequer. Tudo era div. Tinha div class="titulo1" por exemplo. Mas nenhum h1, h2, h3... Claro que isso prejudicava o site em sua indexação nos mecanismos de busca. Foi uma das coisas que tive que alterar.

Muita coisa foi acrescida no conteúdo. E em alguns pontos o layout teve q ser alterado.

Essa imagem mostra a página do consultório com suas tecnologias. Um esquema usando jQuery proporcionou uma apresentação melhor do conteúdo.

A página mostrada abaixo é uma exemplo das páginas de vídeo que foram acrescidas, pois antes, quando o internauta clicava em um vídeo, ele era redirecionado a uma página no youtube. Ora, isso é algo que se deve evitar, pois o youtube é um "mundo". As chances do internauta se interessar por outro vídeo de lá e não retornar ao site são enormes. Ou seja, cada vídeo era uma porta de saída do site. Por isso foram criadas uma página para cada vídeo. Assim o internauta não sai do site. E mais, em cada página foram colocados links para outros vídeos e assuntos no site, estimulando a navegação e permanencia no site. Isso também são estratégias de SEO. Perceber portas de saída, evita-las ou corrigi-las. Procurar manter e incentivar a navegação interna no site.

Outro site de dentista

2011-11-08T19:11:00.001-03:00

Desenvolvido para a dentista Isabelle Perlucio, de quem também fiz a marca e a papelaria.

O site apresenta bons resultados em buscas orgânicas, não só pelo nome da dentista, bem como em buscas mais genéricas como por exemplo: "dentista na Ilha do Govenador".

Site de dentista

2011-10-25T11:25:00.007-03:00

Novo site da Dentista Cristiane Cunha.
Com menos de um mês já estava indexando super bem. Chegando a alcançar a primeira página em buscas no google por combinações de palavras como "dentista em botafogo".
Visitar o site

Scrapbook - Capas para álbum de fotos 3

2011-10-19T09:15:00.007-03:00

Scrapbook - Capas para álbum de fotos 2

2011-10-17T21:09:00.007-03:00

Scrapbook - Capas para álbum de fotos

2011-10-14T10:05:00.009-03:00

Fui fazer uma capa de álbum do fotos imitando scrapbook, mas impressa e gostaram demais. Acabou que uma foi puxando a outra e fiz várias. Vou publicando por aqui...

Cores

2011-07-11T09:22:00.000-03:00

Muito show!
http://www.mariaclaudiacortes.com/colores/Colors.html

SEO - 2º fator externo ao site

2010-12-13T21:05:00.000-03:00

Continuando a falar fatores externos ao site

Fatores externos ao site :

1)Links

2) Idade e qualidade do domínio

Num mundo que valoriza a juventude, os mecanismos de busca ficam com os “vovôs”. Jovens não tem tanta credibilidade. Sites velhos são considerados mais confiáveis. Rsrsss

Estamos num ótimo lugar para falar sobre isso, um fórum que tem tudo haver:
Quando for escolher onde hospedar o seu site, o faça com muito cuidado. Nada de ir no mais barato, no que está com promoção ou que ofereça facilidades demais. Diz o ditado que “quando a esmola é demais o santo desconfia”.

Quanto mais antigo e mais estável for o seu site, melhor. Não adianta ter um site de excelente qualidade hospedado numa “espelunca”. Coloque-o numa hospedagem de boa qualidade e deixo-o lá. Faça de conta que é um vinho, coloque na adega e deixe envelhecer.

Para quem está criando um site agora, existe a possibilidade de comprar um domínio antigo, ou seja, comprar o domínio de um site que está vencido, parado, “jogado as traças”. Quantos sites a gente entra e percebe que não tem nenhuma atualização há muito tempo? Isso tem aos montes. Se for olhar, muitos deles estão com o pagamento do domínio atrasado. Os donos não os querem mais. Mas você pode querer um deles. Principalmente se já vierem com um bom resultado nos mecanismos de busca, não é mesmo??? Mas tenha cuidado. Quando se compra algo novo, se tem as garantias de fábrica. Já quando se compra algo usado... Tem q olhar bem.

Observe quando o domínio foi registrado. Se foi trocado. Qual era o conteúdo disponibilizado antigamente. Você pode fazer uma busca no “archive.org” (uma grande biblioteca de informações online). Lá você vai encontrar uma excelente ferramenta, o WayBackMachine. Nele você pode inserir o domínio que você pretende comprar e resgatar versões antigas do site. Façam um teste para ver como ele funciona. Vocês lembram do cadê? Se vocês colocarem: “www.cade.com” no WayBackMachine, vão achar versões antigas desse site desde 1998 até 2006.

Outro ponto extremamente importante, verifiquem se o domínio pode ser achado em buscas no google, ou seja, se ele não está banido.

Mesmo que a posição nas buscas desse domínio não seja das melhores, o fato de ser um domínio antigo, é um ponto positivo para SEO. Comprando o domínio antigo, trocando o site que está lá por um novo com aplicações de técnicas de SEO, a tendência é do posicionamento nas buscas melhorar, e de se obter um resultado melhor do que com a compra de um domínio novinho em folha.

Bom... É isso! Espero que essas dicas básicas de SEO possam ajudar a muitos.

SEO - 1º fator externo ao site (cont.)

2010-12-08T18:49:00.000-03:00

Continuando a falar sobre os links

SEO - 1º fator externo ao site

Continuando... Como conseguir links?

1- Seu site tem q ser bom. Ter um conteúdo interessante e de preferência com um diferencial.
Ninguém vai te dar links “de graça”, por causa dos seus “belos olhos azuis”. As pessoas vão colocar links para sites q elas gostem, que elas considerem importantes, de boa qualidade.

Faça uma pesquisa dos sites e blogs da sua área. Procure perceber os assuntos importantes que eles menos abordam ou abordam sem profundidade. Procure detalhes onde você possa fazer melhor e se destacar. Melhore assim a qualidade e a abrangência do seu site (ou blog).

2- participe da sua área

Aproveite a pesquisa acima para participar e se fazer conhecer:

- Coloque elogios quando você ler um bom artigo.
- Poste comentários que acrescentem algo que não foi abordado no artigo (nunca em tom de crítica, ok?!)
- Se você percebeu que faltaram alguns pontos a serem abordados, escolha o mais relevante e coloque como comentário. Não faça do seu comentário uma lista de tudo o q faltou no artigo, porque, ou vai parecer q você está querendo se mostrar, ou vai parecer uma crítica. ( Ou ambos, o q é ainda pior)
- Seja simpático, mostre q você está ali para somar, para participar, acrescentar.
- Se o artigo for muito ruim, melhor nem comentar, passa pra outro. Você não vai querer associar o seu nome a artigos ruins, né?!
- Se na assinatura, não for possível colocar um link para o seu site ( que é o que geralmente acontece), assine seus comentários com um nome bem específico, o nome exato do seu site. De modo que, se a pessoa quiser saber quem é você e fizer uma busca no google, ela te ache na primeira página.

Se algum desses pesquisados colocar um link para o seu, provavelmente esse link terá qualidade, pois são links de assuntos similares ou complementares ao seu. Então, vale a pena o esforço. Mas, mesmo que nenhum deles coloque links para o seu site, só de vc participar de sites na sua área, ler, aprender, analisar e até criticar (criticar em segredo e de forma positiva) já vai valer a pena e te proporcionar crescimento. Além de servir de fonte de inspiração e ideias para o seu site. Não faça tudo apenas para conseguir links.

3- Use seus contatos
Coloque links nos sites de Social Bookmarks e em sites de relacionamento, mas capriche. Coloque com um título/ texto que chamem atenção e reflitam o que é o site. A pior coisa que tem é o internauta clicar esperando uma coisa e encontrar outra bem diferente. Isso já faz com que seu site fique mal visto.

Obs.: Não apelem para compra de links, pois é outra pratica que está sujeita a punição. Se os mecanismos de busca perceberem q os links são comprados, seu site será punido. Seu site ficará nas ultimas posições das buscas.
Não confundam links comprados com propaganda. Se você tiver condições de investir em anúncios, ótimo.

SEO - 1º fator externo ao site

2010-11-27T19:57:00.001-03:00

Continuando...
Falamos primeiro dos fatores internos ao site. Agora vamos aos fatores externos ao site:

1) Links:

Os links para o seu site terão importante papel e muitas vezes são detalhados de formas bem específicas e com muitos nomes tão específicos quanto. Vale a pena aprofundar o conhecimento depois. Mas vamos começar entendendo o básico. Quantidade, qualidade, âncora e continuidade.

Quantidade. A princípio, quanto mais links houverem espalhados pela web, melhor o seu site ficará posicionado em uma busca.

Mas CUIDADO, não vai sair por ai pedindo pra todos que você conhece colocar um link para o seu site q em troca você também colocará um link no seu site para o site deles. Os mecanismos de busca não veem isso com bons olhos e o efeito pode ser inverso, ou seja, em vez de melhorar a sua posição nas pesquisas o seu site ser punido e piorar a posição nas pesquisas. Use a troca de links com MUITA cautela. Já que você só poderá fazer poucas trocas, de preferência a sites q gerem links de qualidade.

Qualidade. Suponha que você tem dois links para o seu site. Um deles está num site q não tem nada haver com o seu. E o outro está num site que possui um tema parecido com o seu. Os dois não terão o mesmo peso. O que está em um site q possui conteúdo que tem haver com o seu, surtirá mais efeito, ou seja, fará seu site melhorar bem mais de posição numa busca.

Outro caso é o “prestígio” que tem o site com link para o seu. Quanto mais ele for acessado e quanto mais ele for relevante para as buscas, mais acessos ele vai gerar para o seu site e melhor resultado ele irá proporcionar ao seu site em uma busca. Este também será um link de qualidade.

Outro detalhe é a diferença entre links internos e links externos. Não adianta você criar várias páginas dentro do seu site, todas com vários links para a página inicial do seu site por exemplo, ou para alguma outra página que você esteja querendo focar. Você poderá ter uma centena de links se quiser, mas não vai adiantar muito. Os links que vem de outros sites para o seu site, ou seja, os links externos, terão muito mais peso que os links internos. Isso não significa que vamos abandonar os links internos, eles tem a sua função e importância. Pretendo falar um pouco mais deles depois.

Por tudo isso, foi q eu disse; “a princípio, quanto mais links houverem melhor”. Na verdade, não é só a quantidade que importa. A qualidade influencia muito. Ou seja, é melhor um link de boa qualidade do q vários sem qualidade nenhuma.

Então, você deve focar, não só em conseguir muitos links, mas em conseguir muitos links de qualidade.

Âncora. Um ponto importante a ser observado é a “Âncora”. Chamamos de âncora o texto com o qual o site é apresentado no link. Exemplo:
Código:

< a href= “http://www.url-do-site.com.br >Aqui é o texto q chamamos de âncora </a>

É importante observar quais as âncoras usadas pelas pessoas para fazer links com o seu site. Essas ancoras serão palavras-chaves para o seu site. Elas farão que o seu site fique bem colocado nas buscas por essas palavras-chaves, ainda que você sequer as tenha mencionado no seu site.

Trabalhar essas palavras-chaves no seu site fará melhorar os seu posicionamento nas buscas.

Mas para analisar as âncoras, você precisa ver os links. Como saber onde estão os links externos para o seu site? É simples:
- Acesse: Yahoo! Brasil
- Pesquise por: linkdomain:seusite.com.br
Coloque na busca: “linkdomain:” e subistitua “seusite.com.br” pelo seu domíno ou url da página que você deseja pesquisar. Vai aparecer como resultado uma lista de páginas que possuem links para a página pesquisada. Ai, você vai nas páginas e confere como está o seu link.

Continuidade. Nunca pare de se esforçar para conquistar mais links para o seu site. Mesmo q você seja o primeiro em todas as busca, você deve sempre se manter atualizado e crescendo. Ou, bem rapidinho o tempo passa e seu conteúdo fica desatualizado, você começa a perder links e a não conquistar novos links. O mundo virtual é muito rápido, dinâmico, sempre mudando e evoluindo.

SEO - Dicas fáceis - 5/5

2010-11-17T19:14:00.002-03:00

5)Imagens

Não descarte o uso de imagens explicativas e ilustrativas. Não é a toa que dizem q “uma boa imagem vale mais que mil palavras”. Além disso as imagens vem ganhado cada vez mais importância na otimização de sites.

Nomes. Para dar nomes as imagens valem as mesmas regras que para as páginas, ou seja:
Use letras minúsculas
Use nomes esclarecedores. Nada de “img1.gif” ou foto0652.jpg”.
No caso de nomes formados por mais de uma palavra use hifens. Ex.: bolo-de-chocolate.jpg

Formato. Use os formatos padrões: jpg, gif ou png.

Qualidade. Quanto melhor a qualidade da foto, maior e mais lenta para carregar ela vai ficar. É importante achar uma qualidade boa no menor tamanho possível, pois se o internauta tiver q esperar séculos até a imagem abrir, ele vai desistir e sair.

A tag alt. ALT é uma palavra gerada da abreviação de 'Alternative' e deve refletir o conteúdo da imagem. É usada pelos mecanismos de busca para saber do que se trata a imagem e indexa-la, por isso é muito importante e merece nossa atenção. Lembre-se que também é possível fazer buscas por imagens e que essas podem resultar em acessos ao seu site.

Ela também será exibida sempre a a imagem não for carregada ou demorar para ser carregada. Então escreva um texto coerente não apenas palavras-chaves soltas, como se somente os mecanismos de busca fossem ler.

Seja objetivo na descrição da imagem para compor a tag alt. Se a descrição ficar muito longa, os mecanismos de busca poderão achar q se trata de spam.

A tag title. Quando se para o mouse sobre uma imagem, é o conteúdo dessa tag (e não o da alt) que será exibido numa “caixinha” para o internauta.

Relação com o conteúdo. Os assuntos escritos próximos a imagem, logo abaixo e/ou acima da imagem devem conter palavras-chaves relacionadas a suas tags alt e title. Isso dará maior relevância entre imagem, conteúdo da página e consequente ranking nas buscas por imagens.

Sintaxe.

<img src="http://sua_imagem.jpg/" alt="Escreva aqui o texto alternativo" title="Escreva aqui o texto a ser exibido" />

Use imagens que transmitam o conteúdo do site. Lembre-se que o Google, que é o principal buscador hoje em dia, está dando cada vez mais importância as imagens. Trabalhar as imagens é hoje um diferencial em SEO que pode ajuda-lo a passar na frente da concorrência.

SEO - Dicas fáceis - 4/5

2010-11-14T22:10:00.000-03:00

4) O conteúdo

Seja coerente, claro, sucinto e organizado!

Seja coerente. Não adianta fazer os passos anteriores e depois não colocar um conteúdo compatível. Não vale mentir. Não adianta colocar nos títulos temas relevantes e/ou polêmicos só pra atrair o internauta e quando este entrar na sua página encontrar de tudo, menos o q ele estava procurando. Tem que haver coerência entre os títulos e os conteúdos.
Os mecanismos de busca também vão procurar pelas palavras-chaves no texto. E os internautas também podem denunciar páginas falsas.

Seja claro. Nada de ficar com palavras rebuscadas demais. Não é “falando difícil” que você vai fazer as pessoas lerem. A leitura deve ser leve e agradável ou com um simples click o internauta estará noutra página melhor.

Lembre-se que o público na internet é muito variado, então, a não ser que você queira atingir apenas um publico muito específico e focado, explique-se. Se for usar um termo técnico ou uma palavra complicada para a maioria das pessoas, coloque um link para uma página explicativa (pode ser da Wikipédia) ou faça uma pequena explicação você mesmo.

Muitas pessoas acham q escrevendo “difícil”, bem rebuscado, vão passar mais credibilidade e parecer mais inteligentes. Parecer inteligente nem sempre é ser inteligente. Mostre de forma clara que você domina o assunto e pronto, você terá a credibilidade desejada.

Seja sucinto. Pesquisas mostram que os internautas não leem textos muito longos. Mostram ainda que a atenção é maior no começo do texto e depois o internauta só passa os olhos, sem ler. Então... O primeiro parágrafo é o cara! É nele que você tem q dizer a q veio. Diga logo, sem enrolar, sem introduções, sobre o q você vai escrever e atraia a atenção para o seu conteúdo. Ou você desperta o interesse do internauta em ler o seu artigo, ou ele vai só passar os olhos e sair.

Seja organizado. Use as tags de títulos. Não existe só h1 e h2. Destaque e conduza o olhar, a leitura.

Os subtítulos (h3, h4...) vão te ajudar a separar o conteúdo, a ser mais claro para os internautas e a rankear melhor nas buscas. As tags de títulos tem grande importância para os mecanismos de busca. Não foi a toa que toquei nesse assunto logo a primeira dica. Aproveito aqui pra frisar e completar esse assunto. Mantenha a ordem e a hierarquia ao usá-las. Por exemplo, se você usou o primeiro subtítulo h2, depois tem q vir um h3. Não pode pular pro h4, ok?!

Destaque as palavras ou frases importantes com uso de recursos como negrito, sublinhado ou mudança na cor do texto. Chame a atenção para as partes mais importantes do seu texto.

SEO - Dicas fáceis - 3/5

2010-11-11T20:40:00.003-03:00

Fatores internos ao site:

1) Títulos das páginas (ver post anterior ao anterior)

2) Meta tags (ver post anterior)

3) URLs

O primeiro ponto é o domínio. Procure escolher domínios fáceis, curtos e de preferência que seja uma palavra-chave.

Por exemplo, o nome da firma é Fulano indústria e comércio de doces ltda:

- Tente o domínio fulano.com.br. Ou fulanodoces.com.br. Ou doces.com.br.
- Evite: fulanoicd.com.br Ninguém vi ficar lembrando das iniciais, né?!
- Não use: fulanoindustriaecomerciodedocesltda.com.br É muito grande.

Observe as grandes: Rede globo virou globo.com. Lojas Americanas ficou só americanas.com

O segundo ponto são as páginas. Lembre-se que o nome delas vai fazer parte da url. Então, evite ficar colocando pasta dentro de pasta e nomes com números ou que não se auto expliquem.

Por exemplo, vou criar o site da fulanodoces.com.br. As páginas, além da home, serão: empresa, produtos e contato.

- A página da empresa vou chamar de: empresa.html ou fulano.html.
- A pagina de produtos vou chamar de: produtos.html ou doces.html.
- Nada de usar: pagina1.html. Ou pg002.html.

Tome cuidado com o “excesso de organização”. Tem gente que começa a criar pasta pra tudo. De cara já cria a pasta de conteúdo. Deixa só a página index na raiz e coloca todas as demais páginas dentro da página conteúdo. É, fica bem organizado, mas veja como vão ficar as urls:

- fulanodoces.com.br/conteudo/empresa.html
- fulanodoces.com.br/conteudo/produtos.html

Isso não é bom. Quanto menor, melhor.

É mesmo necessário uma pasta pra organizar tão pouco? Acho q não né?!

Se continuar assim, isso pode ficar pior: fulanodoces.com.br/conteúdo/bolosetortas/bolos/ref567.html

Ninguém merece uma url dessas né?! Uma pasta para separar os produtos tudo bem. Mas três pastas para o exemplo acima foi um exagero, né?!

E observaram que o exemplo usa a referência do produto??? Eu já vi isso acontecer. Ref567 não quer dizer nada pra ninguém, não use esse tipo de nome. Use nomes que todos entendam. Por exemplo, use bolos-de-chocolate.html. Uma página só de bolos de chocolate, de todos os tipos, que delícia!!!
O que fica mais fácil de lembrar? Bolos-de-chocolate claro!
Alguém vai procurar por ref567? Não né?!
E por bolo de chocolate??? Certamente vão procurar.

Qual dessas páginas vai ser mais facilmente achada numa busca por bolo de chocolate? Obvio que a página que tem as palavras-chaves na url vai ficar melhor posicionada do que a que tem uma referencia numérica.

Observaram que usei bolo-de-chocolate com hífen no exemplo? Não foi a toa tá?! Toda vez que você tiver que usar mais de uma palavra, como no exemplo, use hifén. Existe a possibilidade de se usar underline (_), mais (+) ou de usar tudo junto, mas a opção pelo hifén é mais aceita. Ou seja, prefira bolo-de-chocolate em vez de bolo_de_chocolate ou de bolodechocolate, ok?!

Ah! Já ia me esquecendo, use sempre letras minúsculas.

SEO - Dicas fáceis - 2/5

2010-11-08T20:42:00.005-03:00

Ai vai a segunda das 5 dicas internas ao site:

Fatores internos ao site:
1) Títulos das páginas (ver post anterior ao anterior)

2) Meta tags

A “meta description tag” e a “meta keywords tag”. A sintaxe é :

< head>
…
< meta name=”description” content=”Escreva aqui a descrição da sua página” />
< meta name="keywords" content="sites, web, desenvolvimento, html, design">
…
< /head>

A “meta description tag” nada mais é que uma descrição sucinta da página. Ou seja, é melhor ficar abaixo dos 160 caracteres. Nunca ultrapasse os 200 caracteres, ok?!

É importante usar palavras relevantes para a página. Esse texto será importante tanto para os mecanismos de busca como o google, quanto para ou internautas que buscam algum conteúdo. Escreva um texto coerente e esclarecedor.

Não raro, esse texto é usado como parte dos snippets (que é aquele pequeno texto que aparece logo abaixo dos links resultantes de uma busca).

A “meta keywords tag” já foi mais valorizada. Hoje é, muitas vezes, tida como irrelevante.
São palavras chaves sobre a página, sempre escritas em letras minúsculas e separadas por vírgulas.

SEO - Primeira dica básica e fácil

2010-11-04T11:00:00.002-03:00

Fatores internos ao site:

1) Títulos das páginas:

Use sempre o nome do site em todas as tag “title” e varie de acordo como o conteúdo da página usando a mesma palavra do título da página, ou seja, do “h1”. Ficou confuso? Nada como um bom exemplo para deixar tudo mais claro.

Exemplo: Vamos fazer o site da empresa “Branca” que tem 4 páginas: Home, Empresa, Produtos e Contato.

Não use em todas as páginas:

< title>Empresa Branca < /title>

Use para a página da empresa:

<title>Empresa Branca – Empresa</title>

Use para a página de produtos:

<title>Empresa Branca – Produtos</title>

E depois, não se esqueça de colocar o mesmo conteúdo na tag h1 , ou seja, use:

<title>Empresa Branca – Empresa</title>

E depois:

<h1>Empresa Branca – Empresa</h1>

Ou somente:

<h1>Empresa</h1>

Os mecanismos de busca gostam de encontrar coerência entre a “title” e “h1”, ok?!

Mais um detalhe: Não existe só h1. Use e abuse dos subtítulos (h2, h3, h4...). As tags de títulos são importantes, ok?!

SEO - Introdução

2010-10-28T20:08:00.001-03:00

SEO - Introdução

Na grande maioria dos casos, a maior quantidade de acessos a sites provem de mecanismos de busca. Logo quanto melhor for a posição de um site numa busca, maiores as chances de ser acessado. Dai a grande importância de se saber e aplicar ao menos o básico de SEO em cada site que desenvolvemos.

O termo SEO vem do inglês, “Search Engine Optimization”, e pode ser traduzido como "otimização para mecanismos de busca". É uma conjunto de técnicas empregadas com o objetivo de melhorar a posição de um site nos mecanismos de busca.

O SEO não serve só para melhorar o PageRank (posição que o site ocupa em uma busca), mas também para melhorar a sua qualidade. Como assim melhorar a qualidade? Quando se atinge o objetivo do dono do site com as visitas, ou seja, se um site é pra vender, não adianta só ter milhões de acessos, né?! Melhorar a qualidade dos acessos é aumentar a quantidade de visitantes que atingem o objetivo do site, seja ele vender, assinar, fazer o visitante ler artigos, etc...

O serviço de otimização para mecanismos de busca pode ser oferecido a qualquer momento, no início da construção ou com o site já online a tempos. É uma serviço importante e valorizado. Não deixe de aplicar ao menos as orientações básicas em todos os sites que você for desenvolver, ok?!

Os meus próximos posts darão algumas dicas básicas que você não pode deixar de empregar. As dicas estarão divididas em “Fatores internos ao site” e “Fatores externos ao site”. Até lá!

Relaxando...

2010-10-22T20:19:00.002-03:00

Site para Interbraz

2010-10-20T18:44:00.003-03:00

Site desenvolvido para a interbraz, com versões em português, inglês e espanhol.
Com uso de fonte não padão de web.

Site para Profissional de yoga

2010-10-18T11:13:00.001-03:00

Site desenvolvido para o profissional de Yoga Gilberto Schulz.

Como usar fontes diferentes na web

2010-10-15T18:59:00.012-03:00

Como usar fontes diferentes com CSS

Até bem pouco tempo, só era possível usar na web as fontes padrões, ou seja, as fontes que se sabia que já estavam instaladas na maioria dos computadores. Isso reduzia a web a um número muito pequeno de fontes. Poucas variações eram possíveis. Agora isso acabou.

Use a fonte que vc quiser. Sendo de boa qualidade e free, é claro.

No Arquivo CSS coloque:

@font-face {
font-family: "nome da fonte";
src: url("http://end_do_site/fontes/nome_da_fonte.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nome_da_fonte.ttf") format("truetype");
}

*{ font-family: "nome da fonte", Arial, sans-serif; }

---

Se a fonte tiver um nome formado por uma única palavra, ou palavras unidas por hifens, não há necessidade das aspas:

@font-face {
font-family: nome_da_fonte ;
src: url("http://end_do_site/fontes/nome_da_fonte.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nome_da_fonte.ttf") format("truetype");
}

*{ font-family: nome_da_fonte, Arial, sans-serif; }

---

Se vc não quiser usar a fonte diferente em tudo é só não usar o *.
Por exemplo, usar a fonte diferente só nos títulos:

h1, h2, h3 { font-family: nome_da_fonte, Arial, sans-serif; }

---

Se a fonte q vc quer usar não for truetype (.ttf), é só trocar a especificação.

String	Font Format	Common extensions
“truetype”	TrueType	.ttf
“opentype”	OpenType	.ttf, .otf
“truetype-aat”	TrueType with Apple Advanced Typography extensions	.ttf
“embedded-opentype”	Embedded OpenType	.eot
“svg”	SVG Font	.svg, .svgz

Por exemplo, quero usar a fonte nomeA.otf

@font-face {
font-family: nomeA ;
src: url("http://end_do_site/fontes/nomeA.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nomeA.otf") format("opentype");
}

*{ font-family: nome_da_fonte, Arial, sans-serif; }

----

Supondo q vc não tenha a versão .eot da fonte, necessária para o IE, use a versão q vc tem e converta.
Nesses sites vc consegue converter facilmente:

http://ttf2eot.sebastiankippe.com/
http://www.conversoes.org/

Marca para Profissional de Yoga

2010-09-16T12:13:00.001-03:00

Fotos trabalhadas

2010-08-11T17:32:00.002-03:00

Uma forma criativa de se curtir ainda mais as fotos que se gosta é trabalha-las com elefeitos. Um bebê nas nuvens é um bom começo.

Descontraída

2010-07-28T16:50:00.004-03:00

Solicitante: Fernanda
Empresa: Artesã
Trabalho desenvolvido: Criação da marca e Manual de identidade Visual.

Descontraída

2010-07-28T15:46:00.005-03:00

Solicitante: Fernanda
Empresa: Artesã
Trabalho desenvolvido: Criação da marca e Manual de identidade Visual.

Escolher paleta de cores 2

2010-07-27T14:02:00.002-03:00

Já comentei aqui sobre a importancia na escolha das cores e coloquei uns links interessantes de sites que podem auxiliar nessa etapa crucial do trabalho. Agora coloco mais alguns:
ColoRotate
Multicolr
Color Hunter

Criação da marca da Neb Confecções

2010-07-21T16:48:00.005-03:00

Cliente: Neb Confecções
Roupas de moda feminina, moda masculina e uniformes para empresas.

Site para escola de yoga

2010-05-31T00:57:00.004-03:00

Fiz um site novo para a Escola Jaya de Yoga.

Projeto de Lei obriga a avisar sobre o uso do Photoshop

2010-03-29T09:39:00.003-03:00

Um projeto de lei quer obrigar a incluir nas imagens um aviso que a imagem foi retocada por photoshop ou similares.
Jornal Correio do Brasil
Quem não se lembra de polemicas sobre o uso do photoshop?
Demi Morre, Filippa Hamilton para Ralph Lauren, etc
E da propagada da Dove?

Site do Ministério da Educação

2010-03-24T12:39:00.001-03:00

Uma bela biblioteca digital: Domínio Publico

Um lugar onde você pode gratuitamente:

· Ver as grandes pinturas de Leonardo Da Vinci ;
· escutar músicas em MP3 de alta qualidade;
· Ler obras de Machado de Assis Ou a Divina Comédia;
· ter acesso às melhores historinhas infantis e vídeos da TV ESCOLA,
. Só de literatura portuguesa são 732 obras!
. Artigos científicos...

Hora do planeta - 2010

2010-03-23T09:29:00.001-03:00

Criação de Identidade Visual

2010-03-14T11:48:00.004-03:00

Cliente: Sônia laços.
Especializada na confecção de laços para bebês.

Papel de parede - Wallpaper

2010-03-12T22:52:00.008-03:00

Lista de sites de imagens e fotos free

2010-03-10T11:30:00.002-03:00

Onde conseguir imagens e fotos gratuitas para compor layouts?
Uma lista com vários sites com fotos free.

http://www.sxc.hu/
http://www.public-domain-photos.com/
http://www.morguefile.com/
http://www.freedigitalphotos.net/
http://www.imageafter.com/
http://www.photogen.com/
http://www.burningwell.org/
http://www.openphoto.net/
http://imagebase.davidniblack.com/main.php
http://www.stockvault.net/
http://www.freepixels.com/
http://www.everystockphoto.com/
http://www.unprofound.com/
http://www.woophy.com/photo
http://www.quick-image.com/index.cfm?/home_ES&activate=home
http://www.photocase.com/de/
http://www.nextfoto.com.br/novo/index.asp
http://www.latinstock.com.br/br/homenet/Default.aspx

Tutoriais de efeitos do photoshop para textos

2010-03-04T19:03:00.000-03:00

Uma coletânea de tutoriais de efeitos do photoshop para valorizar qualquer texto e trabalho.

Não raro, um detalhe, um pequeno texto ou efeito, faz a diferença.
Design Vitality

E tem muito mais tutoriais desse tipo, muito interessantes, espalhados pela net.

Lista de sites de fontes free

2010-02-28T10:14:00.007-03:00

Simplesmente fundamental. A escolha da tipografia pode ser tudo em um layout.

Vale a pena rever o post Tipografia e Ilustração

Google anuncia fim do suporte ao IE6

2010-02-01T17:04:00.002-03:00

Mais um passo, esse importantíssimo, para acabar o uso do Internet Explorer 6.

Veja a notícia

8ª Semana do Design

2009-11-22T22:32:00.002-03:00

Papeis de parede - Wallpapers

2009-11-09T12:11:00.003-03:00

Aprendendo JQuery

2009-10-27T12:05:00.007-03:00

Estou, finalmente, aprendendo. Se vc, como eu, não é programador, vc sabe que isso é um desafio. rs Muitas vezes, não entendi nada de um tutorial q li pq não sabia nada da área de programação. Não é que o tutorial estivesse mal escrito, mas supunha que eu soubesse o básico.
Por isso é MUITO importante ler artigos sobre introdução a orientação a objetos (POO - Programação Orientada a Objetos). Eu queria ler e entender um tutorial sobre JQuery, mas não sabia direito o q era um método, uma função, ... Confundia os eventos, objetos e atributos. Aff! Certamente, o primeiro passo é ler um pouco sobre isso, entender esses conceitos.

Entendi o básico de JavaScript com: truquesedicas.com
Tive paciência e li tudinho.
Sim está desatualizado, mas o básico não mudou.

A pagina de documentação do próprio JQuery é muito boa. Tem exemplos que ajudam.
docs.jquery.com

A página abaixo mostra exemplos funcionando. Vendo o q acontece fica mais fácil entender.
visualjquery.com

Gostei do jeito dele explicar. Muito bom o artigo do Caio Moritz Ronchi

O que é Web 2.0 ? - FOWD November 2007

2009-10-21T13:05:00.002-03:00

Excelente:
Check out this SlideShare Presentation:

FOWD November 2007

View more documents from elliotjaystocks.

Papel de parede - Wallpaper - Abstrato

2009-09-14T12:16:00.007-03:00

Fotografia - inspiração

2009-09-12T10:00:00.002-03:00

Uma boa foto ajuda muito na hora de criar.
Gosto muito do trabalho do Marcelo Medeiros

Papel de parede - Wallpaper

2009-09-11T17:25:00.001-03:00

Camisa para formatura de administração e contabilidade

2009-09-10T23:38:00.003-03:00

Arte da blusa para a formatura, com o logo do curso de administração.

E com o logo do curso de contabilidade.

Versão antiga de um programa

2009-09-10T17:07:00.002-03:00

Geralmente as coisas funcionam com a versão mais nova. Mas nem sempre...
Estou a dias com um dos meus projetos emperrado pq estou com a versão mais nova de um programa instalada e está dando incompatibilidade com os outros. Aff!
No site do referido programa só tem a versão atualizada disponível para download.
Por isso, gostei muito de conhecer o site OldVersion.

Campanha x pichação

2009-09-09T17:59:00.004-03:00

Como eu gostaria que essa campanha acontecesse aqui no Brasil... rs

Parabéns pelo bom trabalho: cooch

Tipografia e ilustração

2009-09-09T17:41:00.003-03:00

Muito interessante o trabalho dela: SARAH A. KING

Proporção Áurea aplicada a sites

2009-09-08T18:43:00.002-03:00

Um site interessante: http://goldenratiocalculator.com/
Ele calcula a proporção áurea auxiliando na criação do layout do site.

Vc não sabe ou não se lembra muito bem o que é proporção áurea. Esse vídeo vai te ajudar a nunca mais esquecer. rs
http://www.youtube.com/watch?v=58dmCj0wuKw

Como descobrir qual a fonte usada?

2009-08-31T16:12:00.004-03:00

Não raro, precisamos saber qual a tipografia usada em determinado material. O que fazer?

- Separe uma imagem com a fonte a ser descoberta,
-Acesse o site:
http://www.myfonts.com/WhatTheFont/
ou
http://new.myfonts.com/WhatTheFont/
-Faça o upload da imagem
E num clique, sua fonte pode ser reconhecida!

Claro que nem sempre dá certo, mas vale a pena tentar.

Parabéns

2009-08-22T10:57:00.001-03:00

Foto

2009-08-15T14:33:00.003-03:00

2009-08-15T09:30:00.001-03:00

Uso da internet para propaganda neonazista preocupa autoridades alemãs

EUA testam na China e Irã sistema que burla censura na web

China

2009-08-14T15:49:00.008-03:00

"China recua em plano de instalar filtros para internet"

"Pais chineses "derramam lágrimas" e pedem restrições à web, diz governo"

"China limita acesso à internet após violência étnica"

"China fecha sites e atribui medida a "lágrimas dos pais" "

"Conforme o ex-presidente Jang Zemin, o controle das religiões é essencial para defender a segurança nacional."

"No calendário chinês, 2009 é o “ano do boi”. Para eles, o boi é sinônimo de disciplina, autoridade e deveres. Cristãos de todo o mundo demonstram a preocupação de que o governo chinês poderá utilizar essa crença como justificativa para aumentar a repressão aos dissidentes do sistema."

Opera anuncia lançamento do Opera 10 beta 3

2009-08-13T18:15:00.004-03:00

"A Opera anunciou nesta quinta-feira o lançamento da terceira versão beta para o navegador Opera 10. " Saiba mais direto da fonte

Wallpaper feito por encomenda

2009-08-10T12:03:00.000-03:00

Meu site

2009-08-08T11:42:00.006-03:00

Enfim, um site todinho pra mim. rsrsrssss
Tem um ditado popular que diz: "Casa de ferreiro, espeto de pau". Pois é, até hoje já havia começado a fazer vários sites pra mim. Alguns ficaram quase prontos, teve um que chegou a ficar prontinho,mas eu nunca colocava online.
Estava conversando com alguns amigos (designers) e todos concordaram, é muito mais fácil fazer sites para outras pessoas do que para nós mesmos. Enfim... Espero que gostem.

Para visitar meu site: www.alinebranco.com.br

Site da Igreja de Nossa Senhora Mãe dos Homens

2009-08-07T15:24:00.004-03:00

Fiz esse site para uma igrejinha histórica no centro da cidade do Rio de Janeiro.
Tombada pelo IPHAN (Instituto do Patrimônio Histórico e Artístico Nacional), é composta por uma mistura de barroco, rococó e neoclásico. Mesmo quem não é católico, aprecia sua beleza.

Veja o site na internet: www.maedoshomens.com

Foto de formatura

2009-07-26T00:55:00.004-03:00

Brasil - pattern de renda

2009-07-25T00:32:00.004-03:00

As populares rendas brasileiras invadem o photoshop. Que por sua vez, invade as rendas com os seus efeitos, transformando totalmente as patterns.

As populares rendas brasileiras invadem o photoshop. Que por sua vez, invade as rendas com os seus efeitos, transformando totalmente as patterns.

Usando pattern

2009-07-24T00:09:00.003-03:00

Uma pattern pode gerar visuais muito diferentes. Mudando apenas a opacidade da parttern e o seu tamanho, já se consegue uma grande variedade de resultados. Gradientes, alterações de cores e inversões também podem dar ótimos resultados.

Pattern

2009-07-21T22:32:00.003-03:00

A primeira é a aplicação simples da pattern. As outras 4 tonalidades acima foram conseguidas usando a opacidade da pattern abaixo em 40%.As cores dos retangulos nos quais foram aplicados a pattern foram: #480101 , #0e0246 , #330144 e #693b0e.

Enegrecendo

2009-07-20T11:42:00.002-03:00

Mãe

2009-07-19T19:14:00.002-03:00

Imagem comemorativa

Imagem original:

Acessibilidade – Uma questão de ser humano

2009-07-08T08:18:00.007-03:00

Mesmo que façamos um site, ou blog, como amadores, por diversão ou qualquer outro motivo, é muito importante lembrarmos que muita gente não consegue ter acesso a grande parte do conteúdo na web. Na hora de se fazer um site é sempre bom lembrar das pessoas com problemas ou mesmo pequenas deficiências de visão, auditivas ou motoras. Lembrar das crianças, idosos e pessoas que estão começando a navegar, geralmente elas não manuseiam o mouse com facilidade e se sentem perdidas nesse novo ambiente da internete.
Além disso, alguns cuidados melhoram o site para todos, pois somos seres humanos e não máquinas. Mesmo os mais experientes dos internautas gostam de algumas comodidades.

Mas como podemos melhorar o nosso site para todos???

Aqui vão algumas dicas bem fáceis:

IMAGENS

Sempre use o “alt”.

Pessoas com alguma ou total deficiência de visão, usarão programas para ler a tela (). Tais programas irão descrever a imagem lendo o que estiver no “alt”.

Exemplo: Num site onde vou usar uma imagem como logo. Como fica o código:

<img src="caminho/da_imagem.jpg" alt="Descrição da imagem, nesse exemplo: Logotipo da empresa" />

Mas e se a imagem for somente um enfeite?
Mesmo assim use o “alt”. Sempre use o “alt” !!! rs
Só que nesse caso use o alt sem nada escrito.

<img src="caminho/da_imagem.jpg" alt="" />

Se o leitor de tela encontrar uma imagem sem alt, ele informará que encontrou uma imagem, mas a pessoa vai ficar na curiosidade, pois não saberá de q era a imagem.
Se o leitor de tela encontrar uma imagem com o alt vazio, ele não informará nada.

AUDIOS e VÍDEOS

Sempre disponibilize um conteúdo escrito.
Por exemplo, no caso de uma música, coloque a letra da música ou um link para a mesma.
No caso de um vídeo, sempre prefira os legendados.
Mesmo se o vídeo for em português??? Isso mesmo! Lembre-se dos surdos. Podemos colocar o vídeo que desejamos e próximo a ele um link alternativo para um vídeo em português com legenda em português. Ou colocar um texto com o conteúdo do áudio.

FORMULÁRIOS

Sempre use o elemento <label>

O label “une”, “associa” um texto a um campo de formulário. Ex:

<label>E-mail
<input type="text" name="email" id="email" />
</label>

No caso de um cego usando um leitor de tela, esse “E-mail” será lido como o texto referente a esse campo de formulário.

Assessibilidade é bom para todos!!! Até para os mais comuns e experientes internautas!

Isso fica muito claro nos casos de checkbox e de radiobuton. É bem mais cômodo poder clicar em qualquer parte do texto referente ao campo,do que ficar restrito a pequena área desses campos. Lembre-se das pessoas com deficiência motora, ou das que estão começando e não possuem muita “intimidade” com o mouse.
Exemplo:

<label>
<input type="checkbox" name="marcar" id="id" /> Sim eu quero melhorar a acessibilidade do meu site!
</label>

Perceba a diferença clicando nos textos abaixo:

FOQUE

Cegos e pessoas com dificuldade motora não usam o mouse!
Teste seu site. Deixe seu mouse de lado e navegue usando o teclado, com tab, shift-tab e return.

Use “focus” no seu arquvo CSS
Exemplo:

a:focus {outline:#333 dashed 1px;}

input, textarea {
border:#666 solid 1px;
background:#EEE;}

input:focus, textarea:focus {background-color:#ddd; border:#666 1px inset;}

Assim, sempre que seu link ou formulário estiver selecionado, uma alteração será percebida facilitando a navegação até dos usuários mais experientes.

SEJA CLARO

Cegos navegam de link em link usando a tecla tab. Assim ele vai chegar em links do tipo: “saiba mais” e “clique aqui” sem passar pela leitura do texto anterior ao link.
Nesses casos use o atributo title para descrever o link.
Exemplo:

<a href="noticia356.html" title="Título da notícia">Saiba mais</a>

Patterns - Um bom fundo pode transformar seu layout

2009-07-07T22:31:00.004-03:00

Na criação do layout, as vezes nos concentramos no conteúdo, nas cores, no Logo,... Mas, não raro, o que faz a grande diferença e passa profissionalismo são mesmo os detalhes. O fundo, menosprezado por alguns, pode ser o grande diferencial, o que "fechará com chave de ouro" o seu layout.

Uma solução simples e bela, não só para o fundo, mas para certas áreas de um layout é o uso de patterns.

Uma busca simples na internete por pattern traz uma variedade incrivel de possibilidades.
Existem alguns sites dedicados a isso, como por exemplo:
http://patterns.ava7.com/
http://www.patternhead.com/

E outros espalhados por ai, como por exemplo esses no deviantArt:
Madeira, Metal, Cutie, Retro Grunge
, That's My Dad e Summer Pattern Pack, dentre outros.

Lembrancinha para saída de maternidade

2009-06-23T07:53:00.003-03:00

Cartão de 9,5cm x 7cm.
Biscuit preso, através de um furo, com fita de cetim.

Painel para decoração de quarto de bebê

2009-06-22T22:34:00.002-03:00

Tema: Safari
Quarto de menino.

Template para Blog (Blogger ) - Urbano

2009-06-21T14:09:00.004-03:00

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<meta content='Neste blog voce pode encontrar ... . ' name='description'/>
<meta content='urbano, dark' name='keywords'/>
<meta content='index,follow' name='robots'/>
<meta content='Aline Branco' name='author'/>

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Name: Aline_Urbano
Designer: Aline Branco
Date: junho 2009
-----------------------------------------------
*/

/* Variable definitions
====================
<Variable name="bgColor" description="Page Background Color"
type="color" default="#efefef" value="#efefef">
<Variable name="textColor" description="Text Color"
type="color" default="#333333" value="#cccccc">
<Variable name="linkColor" description="Link Color"
type="color" default="#336699" value="#336699">

<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="#336699" value="#336699">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#fff" value="#ffffff">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="#528bc5" value="#528bc5">

<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="borderColor" description="Border Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#999999">

<Variable name="bodyFont" description="Text Font geral"
type="font" default="normal normal 100% Verdana, Arial, Tahoma, Sans-serif;" value="normal normal 100% Verdana, Arial, Tahoma, Sans-serif;">
<Variable name="detalhesFont" description="Text Font para detalhes"
type="font" default="normal normal 100% Tahoma, Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Tahoma, Sans-serif;">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 210% Verdana, Arial, Tahoma, Sans-serif;" value="normal normal 210% Verdana, Arial, Tahoma, Sans-serif;">

<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

body {
background:#000;
margin: 0;
padding: 0px;
font: Verdana, Arial,Tahoma;
text-align: center;
color: $textColor;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}
blockquote {
border: 2px dashed #aaa;
background-color:#333;
font-size: 85%;
padding:15px;
}
/* Header
----------------------------------------------- */
#header-wrapper {
margin: 0;
padding: 0;
background:#000000
text-align: $startSide;
}

.bg_header_border {
width: 1000px;
margin: 0 auto;
padding:0;
background:#333333 ;
}

#header {
background:#222 url(http://lh3.ggpht.com/_ZX-0U2VlJ1s/Sj5DynS-qdI/AAAAAAAAAUs/7V1tIm0hSXM/blog-top.jpg) no-repeat center 30px;
color: #000;
padding: 15px;
margin: 20px 0 0 0;
font: $headerFont;
height:206px;
width: 948px;
margin: 0 auto;
border-left: 1px solid $borderColor;
border-right: 1px solid $borderColor;
text-align: left;
}

h1.title {
margin:30px 0 0 130px ;
font-size:36px;
color:#f89a1f;
}

h1.title a, h1.title a:visited {
color:#f89a1f;
font-size:36px;
text-decoration: none;
padding: 3px;
}

#header .description {
display: block;
margin-left: 3500px;
padding: 0;
font-size: 15px;
font-family:Tahoma, Arial;
}
.menu {
width: 810px;
text-align:right;
color:#6bacfd;
font: bold 14px Trebuchet MS, Tahoma, Verdana, Arial;
display:block; }

#frase {
float: right;
margin-right: 50px;
margin-top: -42px;
font-style:italic;
font-size:16px;
color:#fff;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}

.bg_content_border {
background: #333333;
width: 1000px;
margin: 0 auto 50px;
padding-bottom:20px;
}

#content-wrapper {
padding: 30px 0 15px;
text-align: $startSide;
background-color: #222;
border: 1px solid $borderColor;
border-top: 0;
margin: 0 10px ;
}
#main-wrapper {
margin-$startSide: 10px;
padding: 20px ;
width: 640px;
float: $startSide;

display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$endSide: 10px;
width: 225px;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
padding: 20px ;
}

/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 80%;
font: $detalhesFont;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 5px;
height:17px;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
background:#333 url(http://lh4.ggpht.com/_ZX-0U2VlJ1s/Sj5DynOvwaI/AAAAAAAAAUw/sw5dLj6FfC4/title.jpg) no-repeat left top;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: #ea8731;
font-weight: bold;
padding:3px 5px 3px 25px;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}

.post-footer {
margin: -.25em 0 0;
color:#505050;
font-size: 87%;
font: $detalhesFont;
}

.post-footer .span {
margin-$endSide: .3em;
}

.post img {
padding: 4px;
border: 1px solid $borderColor;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 10px 5px 5px;
border-top:1px #ccc dashed;
font-size: 100%;
color: #a0afda;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color:#777777;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align: center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: $startSide;
}

</b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<div class='bg_header_border'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='SEU TÍTULO (Cabeçalho)' type='Header'/>
</b:section>

<div id='frase'><ul style='color: rgb(255, 255, 255);'><li style='margin: 3px; display: inline;'>SUA FRASE OPCIONAL</li></ul></div>

</div>
</div>
<div class='bg_content_border'>
<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
<div class='clear'/>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Text2' locked='false' title='Bem-vindo ao meu blog!' type='Text'/>
<b:widget id='Text1' locked='false' title='Um pouco sobre mim' type='Text'/>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Label1' locked='false' title='Categorias' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'/>
<b:widget id='Followers2' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
<div class='clear'/>

</div></div>
</div> 
</body>
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-7414915-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</html>

Fotos de casamento

2009-06-20T23:10:00.003-03:00

Manipulação de Fotos de casamento.

Manipulação de Fotos de casamento.

Convites para chá de bebê

2009-05-16T18:21:00.008-03:00

Depois de um longo tempo... Voltando a postar.
Duas idéias de convite para chá de bebê.

História da internet

2009-03-10T11:32:00.003-03:00

Um pouco de história ajuda a entender melhor o "mundo" no qual trabalhamos. rs
Era uma vez...

Teste se o site está bom em vários navegadores

2009-03-04T09:19:00.004-03:00

Após uma longa pausa (carnaval e um monte de coisas acontecendo. rsrss), volto a postar...
Neste site, você coloca a o endereço do site que deseja testar e recebe imagens de como o site está ficando nos mais diversos navegadores e de diferentes sistemas operacionais. O processo é rápido e fácil. Browser Shots

Otimize seu CSS usando declaração única.

2009-02-18T08:34:00.004-03:00

Otimize seu CSS. Agrupe sempre que possível. Facilita a manutenção. Poupa consumo de banda quando o site estiver publicado.

A declaração única nada mais é do que compactar diversas propriedades com a mesma finalidade em apenas uma.

Exemplo:

p {
color:#999966;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
font-variant: small-caps;
line-height:15px;
}

Por mais incrível q possa parecer, o código abaixo substitui perfeitamente o código acima.

p {
color: #996;
font: italic small-caps bold 12px/15px Arial, Helvetica, sans-serif;
}

Com o tempo, a gente acaba pegando o jeito e já criamos o código assim.
Os sites abaixo podem ajudar:
http://www.cssoptimiser.com/
http://flumpcakes.co.uk/css/optimiser/
http://iceyboard.no-ip.org/projects/css_compressor

Acima, fiz com fontes, mas se usa muito fazer com margin, paddign, border, list-style-type e background.
Exemplo para vc copiar o código, salvar e ver como fica no navegador:
Não esqueça de fazer uma imagem.gif para vc ver como fica o background.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
</style>
</head>

<body>
<div>Curabitur ullamcorper ultricies nisi. Nam eget dui. </div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate bbeget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
</style>
</head>

<body>
<div>Curabitur ullamcorper ultricies nisi. Nam eget dui. </div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate bbeget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</body>
</html>

Escolher paleta de cores

2009-02-16T23:42:00.001-03:00

Cores
É comum designers gastarem um bom tempo na escolha da palheta de cores. Uma boa escolha faz toda a diferença no layout. Alguns artifícios podem ajudar.
Estes trabalham com as teorias das cores:
Kuler

Color Scheme designer

Color Jack
Pourpre

Quando temos uma imagem acho interessante o 'whats its color', pois carregamos a imagem e obtemos as cores principais. Muitas vezes, podemos trabalhar com a cor principal para escolher a paleta de cores.
whats its color

"Rivais crescem e ameaçam Internet Explorer"

2009-02-14T14:06:00.004-03:00

Fico MUITO feliz com essa notícia!!!!!!!!!!!!!
IEca perdeu espaço.
Mozilla cresceu de 16,98% para 21,53% no ultimo ano.
Não falou do Opera, mas resaltou o Chrome.
Leia na integra

Menu em CSS - horizontal, vertical e drop down

2009-02-14T13:47:00.005-03:00

Fazer menus exige cuidado. Mas calma e tempo no meio da correria do dia-a-dia é raridade. Esse site se torna uma "mão na roda" pra agilizar um serviço ou para aprender como se faz menus de vários tipos. CSS Menu Maker

Abandonando as antigas tabelas.

2009-02-13T18:24:00.003-03:00

Para quem ainda trabalha construindo sites com tabelas ou para quem está começando e querendo saber mais sobre CSS, padrões web e Tableless. Vale a pena conferir.

Revigoramento da marca Cativa - Moda feminina

2009-02-12T21:56:00.007-03:00

Trabalho acadêmico realizados durante a disciplina de Desenvolvimento de Competências Profissionais. 2º semestre de 2008. Criação da marca, cartões, embalagens, layouts de site, folder, ... Trabalho completo. rsrss
A Cativa atua no mercado de moda como uma loja multimarca. Trabalha com roupas e acessórios femininos. O publico alvo é mulheres de classe média alta, independentes, urbanas, trabalhadoras, consumistas e com faixa etária entre 30 a 50 anos. Palavras chaves: feminilidade, status, detalhes, elegância e bom gosto.

2009-02-12T08:23:00.006-03:00

Fundos listrados (Backgrounds)

2009-02-11T20:54:00.007-03:00

É comum vermos e fazermos bacgrounds com os mais diversos tipos de listras. Mas quanto maior a quantidade e o tamanho das imagens, mais tempo a página leva para carregar e abrir. Por isso, usamos imagens de backgrounds pequenas que se repitam. Para fazermos as listras, tais imagens têm que se encaixar perfeitamente. É comum vermos pessoas com dificuldade de gerar tais imagens. Afinal, nem sempre isso é tarefa fácil. O Stripe Generator pode ajudar, e muito!

Escolha a tipografia e gere o CSS facilmente.

2009-02-10T08:13:00.004-03:00

Escolha a melhor tipografia para o seu layout no site: CSS Type Set. A facilidade de alterações e a rápida visualização do resultado facilitam o trabalho de escolha da fonte e suas características. Depois, é só copiar o código CSS que já estará prontinho.

Se você gosta de opções, use o Font Tester. Não possui um visual tão bonito e clean como o CSS Type Set, mas permite a geração e visualização simultânea de até 3 textos. Ótimo para comparações. E ainda apresenta o mapa de caracteres da fonte utilizada.

Geradores de texto

2009-02-09T08:36:00.005-03:00

É comum usarmos geradores de textos para preencher espaços destinados a textos nos layouts em desenvolvimento. Produz um resultado muito mais próximo do real e mais profissional. Usar nonono ou texto texto texto, não é nada bom.

O Blindtextgenerator trabalha com uma coleção de geradores, inclusive com o conhecidíssimo o Lorem Ipsum. Em uma única página, de forma prática e rápida, você tem acesso a várias linguagens e estilos. Vale a pena conferir.

Tableless e tabelas

2009-02-08T08:26:00.009-03:00

"Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares." Wikipedia

Ou seja, tableless não é ausência total de tabelas. Devemos usar cada tag para o que esta foi criada. Se tenho dados tabulares, devemos usar tabela. E a página será validada pelo padrões W3C, sim.

Detalhe importante: O título da tabela deve ficar na tag capition. Infelizmente, é raro vermos isso. Geralmente está em uma tag p ou span ou mesmo como um subtítulo. E ainda que esteja na primeira linha da tabela, este não é o lugar correto. Sempre imagine que um cego gostaria de ter acesso a seu site através de softwares que lêem o conteúdo das páginas em voz alta. Se o título da tabela não estiver na tag capition, não será lido como título da tabela, e o cego ficará confuso.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de tabela </title>

<style>
table {
background-color:#F9ECD0;
font:12px Arial, Helvetica, sans-serif;
color:#310000;
border:double 3px;
text-align:center;
}

caption {
font-size:14px;
text-align:left;
}

th {
background-color:#E4CAAF;
font-weight:bold;
border:none;
border-bottom:#660000 solid 1px;
width:120px;
height:25px;
vertical-align:middle;
}

td {
border:none;
border-bottom:#660000 dotted 1px;
height:20px;
}
</style>
</head>

<body>

<table>
<caption>
- Título da tabela
</caption>

<tr>
<th>Título da coluna A </th>
<th>Título da coluna B </th>
<th>Título da coluna C </th>
</tr>
<tr>
<td>A1 </td>
<td>B1 </td>
<td>C1 </td>
</tr>
<tr>
<td>A2 </td>
<td>B2 </td>
<td>C2 </td>
</tr>
<tr>
<td>A3 </td>
<td>B3 </td>
<td>C3 </td>
</tr>
</table>

</body>
</html>

Para saber mais sobre tabelas visite o Maujor.

Plugins do Firefox para Webdesigners

2009-02-05T22:53:00.009-03:00

Plugins que considero importantes e interessantes para webdesigners, pois contribuem no desenvolvimento e na otimização do trabalho:

firebug : Como já disse, simplesmente indispensável.

Web Developer : Cheio de recursos.

yslow : Mede o desempenho da página em vários pontos. Pelo seu resultado podemos perceber se devemos melhorar a página e onde mexer para conseguir um melhor resultado.

MeasureIt : Uma régua para medir em pixels e perceber alinhamentos.

colorzilla : Mostra instantaneamente as cores (em hexadecimal e RGB).

Palette Grabber : Captura paletas de cores. Auxilia no desenvolvimento de layouts.

Programa free para trabalhar com CSS e HTML

2009-02-05T22:48:00.001-03:00

Dentre os programas gratuitos para se trabalhar com HTML e CSS, gostei do Free CSS Toolbox. Ele exibe uma lista de opções durante a digitação do código e possui recursos de arrumação e compressão do código (acerta a indentação, retira espaços e linhas em branco, apaga comentários,...). Bem interessante e free.
http://www.blumentals.net/csstool/

Para iniciantes em CSS e HTML (Tableless)

2009-02-04T08:31:00.008-03:00

Enfim, começar a escrever... Começar é sempre um desafio. Nem sempre sabemos por onde. Resolvi começar a escrever sobre CSS, pois trabalho com isso. Aconteceu também que, semana passada, um amigo me pediu ajuda pra começar a trabalhar com CSS. É bem verdade q existe muita coisa boa sobre esse assunto na internete, mas pra quem tá começando... Como saber onde é bom mesmo? O q está desatualizado? Tantas incertezas... rs Muitas informações dispersas. Então vamos lá!

Primeira coisa que se precisa... As ferramentas. Começe instalando (ou atualizando) programas:

Firefox: http://br.mozdev.org/

Sei que a maioria dos internautas usam IE, mas quem vai construir sites precisa de um navegador de verdade. Também amo o Opera, vale a pena instalar: http://www.opera.com/

Firebug: https://addons.mozilla.org/pt-BR/firefox/addon/1843

Simplesmente INDISPENSÁVEL. É um complemento onde, estando numa página da internete (seja a q estamos fazendo ou uma já existente) podemos ver o código html de um lado e o código css do outro. Pra quem quer aprender, vale a pena abrir páginas interessantes e ver como o profissional construiu aquela página. Aprendi várias coisas assim. É indispensável na hora q estamos construindo uma página, pois nele podemos testar (editando o código no próprio firebug e vendo instantaneamente como fica na página). Também nos ajuda a achar onde estão as alterações a serem feitas.

O Firebug é sem sombra de dúvidas o melhor, mas vale a pena instalar os "similares", para nos auxiliar quando estivermos acertando o layout nos outros navegadores. Isso mesmo, ainda que vc queira criar uma página visando o IE, é melhor construi-la no Firefox primeiro. Lembre-se q é importante aprender certo. E para isso é preciso construir páginas para bons navegadores (firefox, opera,...).

Para o IE: Debugbar - http://www.debugbar.com/
Para o Opera: Dragonfly - http://www.opera.com/dragonfly/

É possível construir suas páginas de HTML e CSS até mesmo no bloco de notas, mas facilita usar programas q ajudem "completando" e "colorindo" o código, pois é muito comum cometermos erros de digitação. E quem está começando comete muitos erros. Podemos achar chato e acabarmos por desistir se ficarmos meia hora pra descobrir cada errinho de digitação. Dreamweaver e e-texteditor são bons programas pra isso, mas são pagos.

Editoração - Revista

2009-01-31T09:04:00.004-03:00

Trabalho acadêmico realizados durante a disciplina de Diagramação e Editoração Eletrônica. 2º semestre de 2007. As imagens são de páginas internas da revista Trabalhar, viver.

Linha editorial : Trabalhar, viver é uma revista que trabalha a questão da qualidade de vida em todos os planos: trabalho, casa, nutrição, saúde, corpo, emoções, atitudes, moda, beleza e lazer.
A revista trará dicas e soluções para o trabalhador médio aumentar sua produtividade no trabalho, equilibrar sua rotina e aumentar sua saúde. Através de informações passadas de forma simples e que possam gerar mudanças incorporadas ao dia-a-dia, a revista pretende contribuir com quem quer cuidar de si e dos que estão a sua volta, indicando meios de crescimento pessoal, social e profissional.

Público alvo: É destinado a leitores urbanos que buscam uma vida mais equilibrada, descomplicada, saudável e alegre, apesar do ritmo agitado e do cotidiano conturbado das cidades grandes.
A revista pretende atingir especialmente trabalhadores que busquem estar antenados com as novas questões do trabalho, empresários que procurem aumentar o bem-estar dos funcionários e profissionais que trabalhem com gerenciamento de pessoas, com a qualidade da convivência no trabalho e com a melhoria da produtividade.

Editoração - Livro

2009-01-24T21:58:00.002-03:00

Trabalho acadêmico realizados durante a disciplina de Design Editorial. 2º semestre de 2007.

Livro sobre o cantor, compositor, arranjador, músico e produtor Lenine. No formato de 21x15cm. O livro contém um pouco da sua história e letras de várias músicas famosas.

O livro foi ilustrado com imagens de obras de Romero Brito, conhecido artista pop brasileiro, radicado em Miami.

Romero e Lenine são brasileiros, nascidos em Recife e fazem grande sucesso no Brasil e no exterior.

Identidade Visual - Hora de Decorar

2009-01-17T11:57:00.004-03:00

Trabalho acadêmico realizado no 1º semestre de 2008, para a disciplina de Planejamento de Competências Profissionais.

Hora de Decorar é um loja situada na Estrada do Galeão, principal via de toda Ilha do Governador. Vende os mais variados tipos de artigos para decoração e móveis. Dentre os seus produtos estão quadros, almofadas, arranjos, mantas, porta-retratos, bibelôs, vasos, sofás, cadeiras e mesas. A maior parte dos clientes são de classe média intermediária e classe média alta.

A cima, a marca desenvolvida. Logo abaixo as versões da marca; monocromáticas, positivo e negativo.

Identidade Visual - Bombo de Corda

2009-01-17T08:51:00.007-03:00

Trabalho acadêmico realizado no 1º semestre de 2007, para a disciplina de Projeto Gráfico - Identidade Visual.

O Bombo de Corda é formado por músicos com experiência em canto coral e uso variado de percussão. Traz a público as vozes das várias etnias formadoras do nosso povo e da nossa história, destacando como a mistura que deu origem à noção de identidade nacional é plena de riquezas. Seu repertório é trabalhando com reisado, congado, ciranda, folia, cacuriá, baião, coco, jongo, vissungo, lundu, ijexá, samba de roda, boi-bumbá, caboclinho, maracatu...

Sinestesia

2009-01-16T19:30:00.004-03:00

Ilustração

2009-01-16T11:07:00.003-03:00

Misturando nanquim, pastel e photoshop.

Ilustração

2009-01-12T20:51:00.005-03:00

Muitos pontinhos..... . . . . . . . . . . .

Ilustração

2009-01-10T22:01:00.009-03:00

Trabalhos acadêmicos realizados durante a disciplina de Expressão Plástica.
Grafite em formato A3- 2° semestre de 2005.

Compisição de linhas
Composição com figura humana

Ilustração

2009-01-09T09:07:00.004-03:00

Trabalhos acadêmicos realizados durante a disciplina de Desenho Artístico.
Nanquim em formato A4- 1° semestre de 2007.
Figura em síntese,
Figura em planos,
Figura em linhas e
Figura em pontilhismo.

Início (ou seria o fim?! rsrsrss)

2009-01-08T20:42:00.003-03:00

Ano novo, vida nova, blog novo!!!