8ª Semana do Design

Papeis de parede - Wallpapers

Aprendendo JQuery

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

Excelente:
Check out this SlideShare Presentation:

FOWD November 2007

View more documents from elliotjaystocks.

Papel de parede - Wallpaper - Abstrato

Fotografia - inspiração

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

Papel de parede - Wallpaper

Camisa para formatura de administração e contabilidade

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

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

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



Parabéns pelo bom trabalho: cooch

Tipografia e ilustração

Muito interessante o trabalho dela: SARAH A. KING

Proporção Áurea aplicada a sites

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?

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

Foto

Uso da internet para propaganda neonazista preocupa autoridades alemãs

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

China

"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

"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

Meu site

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

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

Brasil - pattern de renda

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

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

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

Mãe

Imagem comemorativa


Imagem original:

Acessibilidade – Uma questão de ser humano

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:

Com label – Pode clicar aqui no texto

Sem label – Só pode clicar no checkbox

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

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

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ê

Tema: Safari
Quarto de menino.

Template para Blog (Blogger ) - Urbano

<?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'>

<!-- skip links for text browsers -->
<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>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

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

</div></div>
</div> <!-- end outer-wrapper -->
</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

Manipulação de Fotos de casamento.



Manipulação de Fotos de casamento.

Convites para chá de bebê

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

História da internet

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

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.

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">
<!--
p {
color: #666600;
font: italic 12px/18px Arial, Helvetica, sans-serif;
}

body {
background-color: #EBE9ED;
background-image: url(imagem.gif);
background-repeat: repeat-x;
background-position: top;
}

div {
background-color: #E2EEE1;
float:left;
color: #996;
width:200px;

font-family: Arial, Helvetica, sans-serif;
font-size:12px; font-style:italic;
font-weight:bold;
font-variant: small-caps;
line-height:25px;

margin-top: 10px;
margin-right: 80px;
margin-bottom:30px;
margin-left: 20px;

padding-top: 15px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

border-width: 1px;
border-style: solid;
border-color: #666600;
}
--></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">
<!--
p {
color: #666600;
font: italic 12px/18px Arial, Helvetica, sans-serif;
}

body { background:#ebe9ed url(imagem.gif) repeat-x top }

div {
background-color: #E2EEE1;
float:left;
color: #996;
width:200px;

font:12px arial,helvetica,sans-serif italic small-caps bold /25px;
margin:10px 80px 30px 20px;
padding:15px 20px 10px;
border:1px solid #666600;
}
--></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

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"

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

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.

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

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.

Fundos listrados (Backgrounds)

É 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.

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.