A equipe do Createeve deseja um Feliz ano novo para todos os que nos seguem e comentam no blog! E pra começar 2010, o blog estará de cara nova. Estamos projetando um novo layout, e precisamos de alguns palpites também.

Ai vai nosso layout:

Espero que tenham gostado ( clique para visualizar ).

Abraços e Bom Ano!

Identidade visual forte e funcionalidade são dois dos aspectos fundamentais à atratividade de um produto. A combinação ideal entre essas características torna-se ainda mais relevante quando falamos de sites, blogs, newsletters e outros documentos disponíveis na internet, que representam as maiores ferramentas de marketing da era da sociedade em rede. Responsáveis pela criação desses endereços virtuais, os webdesigners possuem a função de garantir que, em meio à avalanche de conteúdos produzidos na internet, o acesso ao produto oferecido por ele seja atraente.

Os sites e blogs são formas de contato direto com os clientes atuais e os futuros e, por isso, devem ser pensados de forma eficaz pelos profissionais que os desenvolvem. Um dos passos fundamentais para o bom planejamento de uma página na web é conhecer o público-alvo, os produtos oferecidos, os objetivos e as necessidades da empresa. Essa análise é geralmente feita por meio de um briefing e ponto de partida do projeto elaborado pelo webdesigner.

A partir daí, constrói-se a página. Nesta etapa, os profissionais se valem de conhecimento em várias áreas, como arquitetura da informação (que se refere à estrutura do site), programação e estética. Tal multidisciplinaridade é uma marca dos webdesigners para garantir que os usuários atinjam seus objetivos durante a navegação de forma agradável e prática.

“É importante lembrar que sites e blogs são acessados prioritariamente por causa do conteúdo que apresentam”

Dessa forma, a arquitetura da informação, ou seja, a estrutura que viabiliza o acesso a esse conteúdo, deve ser a mais lógica e prática possível, obedecendo a um preceito fundamental da criação dos endereços: a usabilidade. Para facilitar essa navegação, a difusão da internet em banda larga tem proporcionado a utilização de novos recursos e mais eficientes na criação dessa feramentas, tais como apresentações em flash, menus em Java e aplicativos que rodam direto do browser.

Esses espaços virtuais, também, devem ser esteticamente atraentes para que possam chamar a atenção dos usuários e fidelizá-los. Para isso, o layout deve ser criativo e coerente com a razão social e a proposta da empresa, pois constitui um importante elo de comunicação entre instituição e usuário. Além disso, deve se adaptar aos suportes que estarão ancorados: celular, leitores de telas, impressoras, etc.

Para entrar no mercado de trabalho, o profissional pode optar por cursar graduação em design na UPFE ou design gráfico no IFPE. Há também a opção de escolher cursos tecnológicos oferecidos por instituições particulares, como a Faculdade Marista e a Maurício de Nassau no Estado. Ou, ainda, fazer um curso técnico no Senac.

O mercado de webdesign é promissor. Apesar da crise, os principais investimentos estruturadores foram mantidos e essa área encontra-se no melhor momento do seu desenvolvimento econômico das últimas décadas. Assim, investir na comunicação, inclusive, virtual, pode ser imprescindível para enfrentar a concorrência acirrada, inclusive vinda de fora, que tem se instalado no Estado.

Fonte:  JC Online (uol)

O jQuery, sem sombra de dúvidas, revolucionou a maneira como escrevemos Javascript. Baseado no atalho $ paradocument.getElementById, o jQuery estendeu-o muito além do que se podia imaginar, misturando-o com a funçãodocument.getElementsBySelector.

Além do evidente aumento de produtividade, o tamanho da biblioteca impressiona: a versão 1.3.2 tem apenas 19kb para fazer tudo o que você precisa: requisições AJAX, iteração e criação de elementos DOM, tratamento de eventos… resumindo, é uma biblioteca completa, sem deixar a simplicidade de lado.

Uma coisa que deve ficar muito clara quando você começa a trabalhar com jQuery são os seletores disponíveis, baseados em CSS 1-3 e alguns adicionados pelo próprio jQuery. Sem eles, você não tem por onde começar. Então, aqui vai uma lista super-detalhada dos seletores disponíveis no jQuery.

Seletores

Os exemplos que mostrarei são baseados no seguinte markup:

<body>
<h1>jQuery Selectors</h1>
<h2>This is a visible H2</h2>
<h2 style="display: none;">This is a hidden H2</h2>
<p>This is just a dummy text.</p>
<p>This is just a dummy text too.</p>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>
<strong>Sample:</strong> Visit our
<a href="#" target="_blank" id="sample">sample page</a>!
</p>
<div id="empty-div"></div>
<div>
<p>
<span>
<em>Inside a span</em>
</span>
</p>
<p>
<em>Inside a paragraph</em>
</p>
</div>
<p>
<input type="button" disabled="disabled" value="Disabled button" />
<input type="button" value="Click me!" />
<button>Click me too!</button>
</p>
<p>
<input type="checkbox" id="checkbox" checked="checked" />
<label for="checkbox">I'm checked</label>
</p>
<p>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected="selected">Option 3</option>
</select>
</p>
<dl>
<dt>Colors</dt>
<dd>Blue</dd>
<dt>Shapes</dt>
<dd>Circle</dd>
<dt>Words</dt>
<dd>Power</dd>
</dl>
</body>

CSS 1-3

$('p.comment-meta *'); // pega todos os elementos dentro de p.comment-meta

$('div'); // pega todas as divs

$('li:nth-child(2)'); // get o segundo elemento li ( item 2 )

$('li:first-child'); // pega o primeiro li ( item 1 )

$('div:empty'); // pega a <div id="empty-div"></div>

$('input:enabled'); // pega o <input type="button" value="Click me!" />

$('input:disabled'); // pega o <input type="button" disabled="disabled" value="Disabled button" />

$('input:checked'); // pega o <input type="checkbox" checked="checked" />

$('option:selected'); // pega o <option value="3">Option 3</option>

$('p strong'); // pega o <strong>Sample:</strong>

$('p > em'); // pega <em> dentro de um paragrafo </em> mas não <span><em>Dentro de uma span</em></span>

$('h1 + p'); // pega o <p>This is just a dummy text.</p>

$('h1 ~ ul'); // pega <ul id="list">

$('h1,ul'); // pega o <h1> e <ul>

$(':checkbox[checked]'); // pega <input type="checkbox" id="checkbox" />

$('[id^=empty]'); // pega <div id="empty-div"></div>

$('[id$=div]'); // pega <div id="empty-div"></div>

$('dd[class*=o]'); // pega <dd> e <dd>

$('dd[class=word]'); // pega <dd>

Adicionados pelo jQuery:

$('option:even'); // pega <option value="1"> e <option value="3">

$('option:eq(0)'); // pega <option value="1">
$('option:nth(1)'; // pega <option value="2">

$('li:gt(1)'); // pega <li>Item 3</li>

$('li:lt(1)'); // pega <li>Item 1</li>

$('li:first'); // pega <li>Item 1</li>

$('li:last'); // pega <li>Item 3</li>

$('h1:parent'); // pega <h1>jQuery Selectors</h1>

$('li:contains("Item 1")'); // pega <li>Item 1</li>

$('h2:visible'); // pega <h2>This is a visible H2</h2>

$('h2:hidden'); // pega <h2 style="display: none;">This is a hidden H2</h2>

Formulários

O jQuery fornece alguns atalhos para se trabalhar com campos de formulário, evitando que você tenha que usar um seletor de atributo (input[type=radio], por exemplo). Veja como é simples:

• :input: seleciona qualquer tipo de campo de formulário (input, button, textarea, select).
• :text: seleciona campos com type="text".
• :password: seleciona campos com type="password".
• :radio: seleciona campos com type="radio".
• :checkbox: seleciona campos com type="checkbox".
• :file: seleciona campos com type="file".
• :submit: seleciona campos com type="submit".
• :image: seleciona campos com type="image".
• :reset: seleciona campos com type="reset".
• :button: seleciona campos com type="button" ou <button></button>.

Exemplos práticos

Agora você conhece os seletores do jQuery, veja alguns exemplos mostrando como usar este framework.

• Executando códigos no após o carregamento da página (onload) – ready.html
• Zebrar uma tabela, adicionando uma classe de CSS – zebra-table.html
• Adicionar um evento onmouseover nas linhas de uma tabela, alterando a cor de fundo – table-row.html
• Iterar em uma lista de elementos retornados – iteration.html
• Mover itens de uma lista para outra – list-items.html
• Carregar HTML em um elemento – html-content.html
• Carregar dados em formato JSON – json-content.html
• Exibir/Esconder elementos – show-hide.html

O jQuery possui uma série de outras funcionalidades que não foram citadas aqui. Para mais informações, você deve acessar a documentação do projeto. Ela também está disponível em um formato muito fácil de vsualizar em Visual jQuery. Vale a pena conferir!

E se você tem dúvidas em usar ou não o jQuery em seu próximo projeto, não se preocupe. Em relação ao Javascript, será a melhor escolha que você poderia ter feito!

Fonte: http://simplesideias.com.br/usando-jquery-na-pratica/

De acordo com a StatCounter, o Firefox 3.5 é atualmente a versão de navegador mais utilizada no mundo, superando por pouco a versão 7 em uso do Internet Explorer (o segundo colocado na lista). A estatística foi criada a partir da coletânea de dados obtidos de milhares de sites, registrando os acessos às suas páginas por diferentes navegadores e suas versões em uso. Atualmente, a versão 3.5 do Firefox possui 21.93% do uso total, seguida de perto pela versão 7 do Internet Explorer, com 21,20%. O IE8 possui 20,33% e o IE6 13,89%. Este é um ponto a se comemorar, mas não podemos esquecer que a guerra ainda está longe de ser ganha. O Firefox 3.5 pode estar ganhando de todas as versões do Internet Explorer, de forma isolada, mas ainda está perdendo feio no somatório total. Juntando todas as versões do Internet Explorer, seu uso chega a 55,44% do total, enquanto as versões em uso do navegador da Mozilla, incluindo o Firefox 3.5, 2.0 e versões bem mais antigas, possuem 32,12% do bolo.

O interessante de se notar aqui é que o Firefox ganha em uso com as versões mais recentes de seu navegador, mostrando que os usuários que preferem esse browser estão mais interessados em possuir sempre a última palavra em tecnologia Web, além de estarem antenados com as novidades e os padrões da Internet. Já do lado da Microsoft, é claro que as mesmas estatísticas mostram que os usuários do Internet Explorer tem começado a largar a versão 7 e migrado (mesmo que lentamente) para a versão 8. O problema ainda reside nos usuários “teimosos” que insistem em utilizar o IE6, o mesmo problemático que vem sendo alvo de uma verdadeira “caça às bruxas” na Internet.

Várias são as intermináveis campanhas contra esse navegador que afronta os padrões em vigor da Internet. Até a própria Microsoft aconselha seus usuários a migrarem seus navegadores, do IE6, para a última versão, o IE8 [3], mesmo ainda que garantindo o suporte dessa versão do navegador até 2012. Após ter lançado a versão 8 de seu navegador web, a Microsoft iniciou uma campanha para incentivar seus usuários que ainda utilizam o IE6 a migrarem para o IE8. Porém, muitos desses mesmos usuários ainda não efetuaram a migração por estarem “presos” corporativamente e essa tecnologia ultrapassada.
O “Ministério da Web adverte!” Utilize apenas os padrões em seus projetos!

Este é um tema que já foi e continua sendo motivo de polêmica, gerando debates e a publicação de muitos artigos sobre o assunto. É normal que toda e qualquer empresa que publique seu site queira um site de aparência bonita, atraente e que cause impacto aos visitantes, porém dependendo do público alvo do site, um bom design pode não significar tudo.

Cada negócio sugere um tipo de produto ou serviço, consequentemente a abordagem para os mais variados tipo de negócios será diferente. Quanto mais os anos se passam melhores ficam as ferramentas de desenvolvimento, desta forma, a melhoria visual na internet é surpreendente. Anos atrás você não encontrava por exemplo um site todo em flash, não era tão fácil o acesso via banda larga e os sites costumavam ser mais pesados.

O Confronto

Responda a seguinte pergunta: É melhor um site bonito com conteúdo fraco ou um site de conteúdo relevante e design horrível? Certamente em ambos os casos existem os lados positivos negativos.

Os sites bonitos são capazes de gerar acessos, causar impacto a visitantes e ser admirado, porém caso não haja conteúdo relevante o visitante dificilmente retornará ao site, pois provavelmente irá em busca de conteúdo que tenha maior importância. Ao priorizar o conteúdo de qualidade provavelmente o site terá um
feedback melhor dos visitantes, conseguindo adquirir acessos constantes, entretanto dependendo do baixo nível de design do site pode perder alguns visitantes principalmente se o layout não permitir uma fácil navegação.

O Desafio

Não é necessário pensar muito para concluir que se o seu site consegue manter um alto padrão de design e conteúdo ele terá grande destaque. A partir desta afirmação é importante fazer um planejamento sobre a facilidade e disponibilidade para gerenciar o site. Caso tenha um bom design, bom conteúdo, mas não apresente atualizações, aos poucos os visitantes abandonem as visitas considerando que não encontrarão nada de novo.

Veja abaixo alguns exemplos de quando deve priorizar cada área.

Quando priorizar o Design

• Buffets;
• Lojas de Roupas;
• Festas Infantis;
• Restaurantes; e
• Espaços de Eventos.

Quando priorizar o Conteúdo

• Empresas de marketing;
• Blogs;
• Portais de Notícias;
• Sites Jornalísticos; e
• Sites de Tutoriais.

Dicas

Lembre-se que um dos fatores importantes para estar nas primeiras posições no resultados de buscas é extremamente importante um bom conteúdo. Cuidado para não exagerar em um bom design e o mesmo tornar a funcionalidade do site baixa. Se é capaz de gerar um bom conteúdo aproveite os bons serviços disponíveis na propria internet como Blogs e sistesmas de gerenciamento de conteúdo como Wordpress, Joomla, entre outros.

Fonte: Rgb Magazine

Para nossa 3 edição do “Inspiração Nacional”, estaremos mostrando o portifólio da ContentCom, uma empresa localizada em São Paulo com especialidades em criação de marcas e projetos interativos. São trabalhos em Flash, com grande interatividade e uso do 3D para intensificar a beleza do site. Espero que gostem!

Conclusão:

Essa foi nossa mostra de portifólios brasileiros da semana, se você tem algum portifólio predileto e queira compartilhar conosco, comente! Estarei atento!
Obrigado e até a proxima!

Neste post, estaremos mostrando o melhor da galeria “BestWebGallery” que todo ano indica os melhores sites mostrados. O grunge e o estilo Clean está entre as tendências. Aprecie!

Sushi and Robots

Bobulate

A Way Back

LegiStyles

For a Beautiful Web

Black Estate

Cynosura

Mark Dearman

iA

Trent Walton

Area 17

Nosotros

Atebits

Square Space

Gap Medics

Fringe

Typographica

Book Cover Archive

Search Inside Video

Red Nose Day

Carsonified

Fajne Chlopaki

Devia

Mail Chimp

Miro

Squared Eye

Clear Left

White House

45 Royale

Work at Play

Wonderbra

Legwork studio

Surly

Project 365

72 Ave

Maxvoltar

We Heart

Jeff Finley

Elliot Jay Stocks

SimpleBits

Corking Design

Adii

Burciaga

Paravel

Jeremy Charles

Brite Revolution

Go Media

31 Three

AN idea

Mission Bicycle

A Ao5 ( Agência Orange Five ) reside em São Paulo capital, e tem um destaque grande no web design brasileiro. Com mais de 10 anos de experiência no mercado, a Ao5 mostrando seus serviços com qualidade na parte de web e publicidade em geral. Nesta semana, veremos um pouco do trabalho dessa agência. Aprecie!

Vários Ilustradores e Web designers têm seu próprio escritório em casa. Não significa que tudo em sua volta precisa estar feio. Separei uma matéria encontrada no Freelance review que separou 33 belos escritórios de desenvolvedores. São escritórios com cores marcantes, em ambientes aplos e confortáveis. É ótimo para quem quer montar seu escritório e não sabe por onde começar. Espero que gostem.

Fonte: Freelance Review

A comunidade de desenvolvedores que trabalham com codificação (XHTML e CSS) sabem o quanto é árdua a tarefa de deixar tudo, ou quase tudo, funcionando bem no browser Internet Explorer 6. Vários manifestos já foram feitos pelos desenvolvedores para tentar matar o IE6, porém percebemos que a porcentagem de acesso por esse suposto browser ainda é considerável. Por esta razão resolvi listar algumas dicas para evitar alguns bugs comuns.

1. 1. Bug da margem duplicada

   Acredito que esse seja o mais comum. É causado quando flutuamos algum elemento e damos margem para a mesma direção. Veja o código exemplo:

   div {
float: left;
margin-left: 15px
}

   Nesse caso o IE6 interpretaria a margem como 30px. Uma das soluções para o erro seria declarar a div como display: inline. Resolveria o problema e não afetaria nada nos demais browsers. Porém eu costumo fazer o possível para não declarar margem para o lado flutuado, como solução tento sempre utilizar o padding no próprio elemento ou no elemento pai. Neste caso adote a solução que lhe adequar melhor.

2. 2. Posicionamento absoluto

   É provocado quando existe um elemento flutuando após um elemento absoluto. Quando isso ocorre o elemento absoluto desaparece. Parece mentira não é ? mas de fato acontece. Bom, para resolver é preciso colocar uma div pai no elemento flutuado, veja o exemplo:

   CSS

   #absoluta {position: absolute}
#right { float: right}
   XHTML Com bug

   <div id="absoluta">Content</div>
<div id="right">Conteudo flutuado para a direita</div>

   XHTML Solução

   <div id="absoluta">Content</div>
<div>
<div id="right">Conteúdo flutuado para a direita</div>
</div>

3. 3. Bug do Caracter duplicado (eco)

   Acontece em casos muitos especificos. Já fui vítima desse bug e consegui solucionar depois de muita dor de cabeça. Andei pesquisando e consegui encontrar esse comentário do maujor onde ele prorõe 4 soluções.

   “Para a segunda e terceira DIV flutuada IE indenta aproximadamente 3px. Resulta um total de 6 px de diferença na largura total em relação aos browsers standards. Esta indentação faz com que o caracter pule para a próxima linha de flutuação.
   No caso podemos adotar as seguintes soluções:
   1a.Solução: diminuir 2px na width de cada DIV (3 x 2px = 6px) de 177px para 175px;
   2a.Solução: aumentar 6px na DIV conteúdo, de 608px para 614px;
   3a.Solução: diminuir 6px total nas margens laterais das DIV
   4a.Solução: declarar display:inline para as 3 DIV flutuadas.”

4. 4. Bug da altura

   Quando a altura de um elemento é declarada os browsers web standards consideram que ela vai ser fixa, independente se o conteúdo ultrapasse a altura ou não. Observe:

   div {
width: 200px;
height:20px;
background-color: #ccc
}

   <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit justo, malesuada eget lobortis sit amet, venenatis at odio. In hac habitasse platea dictumst.
</div>

   Faça esse teste e perceba que no Firefox a div vai continuar mantendo os 20px de altura mesmo o conteúdo passando. Já no IE6 a altura vai se adaptar ao conteúdo. Esse comportamento errado do IE6 é compatível com a declaração min-height (altura mínima).

5. 5. Bug do 50% + 50% > 100%

   Esse bug é provocado quando usamos dos elementos flutuados, dentro de um container, com largura de 50%. Ao somar 50% + 50% o IE6 resulta em mais de 100%. Para solucionar o problema precisamos utilizar uma declaração especifica para ie6 setando o valor da largura das divs como49,9%.

E vocês? Já foram vítimas de outros bugs? Compartilhem comentando.

Referência:

SILVA, Maurício. Construindo sites com CSS e (X)HTML. Novatec, SP: 2008.

Fonte: Ramon Victor