CSS Orbit - Web Design

Inpiration Showcase - Ilustração #12 Arte espacial de Tobias Roetsch

noreply@blogger.com (Danilo Ramos) — Sat, 17 Sep 2011 05:01:00 +0000

Apresento a vocês a arte espacial de Tomas Roetsch, um artista da Alemanha também conhecido como taenaron, é mesmo de impressionar a qualidade gráfica com que esse artista produz seus trabalhos gráficos espaciais, mereceu esse post na nossa seção Inspiration Showcase. Enjoy !

Inspiration Showcase - Sites #10

noreply@blogger.com (Danilo Ramos) — Sun, 11 Sep 2011 14:23:00 +0000

Olá pessoal ! tudo bem ;) Dessa vez o site enviado para a Inspiration Showcase foi o site wllcbarros.com do Wallace Barros, site com um visual bem futurista e clean, muito bom. Reparem no slider (visível ao acessar o site) que deu um toque especial ao site.

Navegador mais rápido da web atualmente Adivinha quem ganhou?

noreply@blogger.com (Danilo Ramos) — Wed, 10 Aug 2011 11:20:00 +0000

A Compuware lançou dados referentes ao navegador mais rápido do mundo atualmente. Foi feita uma pesquisa onde foram coletados dados ao longo de um mês de 1.860 milhões de usuários em mais de 200 websites. E o resultado[...] você vê logo abaixo.

No gráfico é exibido em cor azul o tempo de carregamento da página, e em verde o tempo que a página fica visível aos olhos do usuário. Em relação ao tempo de carregameto o Chrome levou a melhor com um tempo de 3,433 segundos, em penúltimo ficou o Internet Explorer com 6,006 segundos e o mais lento foi o Safari com 6,149 segundos.

O Firefox 5 ficou em primeiro no tempo que a página fica visível aos olhos do usuário (em verde)com 2,18 segundos.

fonte: Compuware

Inspiration Showcase - Ilustração #11 Lindos feiosos monstros

noreply@blogger.com (Danilo Ramos) — Thu, 04 Aug 2011 12:03:00 +0000

Ta sem inspiração? Tá querendo criar uma ilustração? um mascote? Eu acho que essa seleção de ilustrações de lindos monstrinhos feita pelo CSS Orbit irão te ajudar.

yannlecoroller.com/

recycledwax.deviantart.com

http://flickr.com/photos/ph7labs/3042457684/

travislouie.com

moshimonsters.com

travislouie.com

pulcomayo.com/news/moshi-monsters-2

http://www.yannlecoroller.com/

yannlecoroller.com/

yannlecoroller.com/

antelopeb

antelopeb

antelopeb

Jotform, inserindo um formulário de contato no seu site ou blog Di grátisss, simples e rápido

noreply@blogger.com (Danilo Ramos) — Sat, 09 Jul 2011 02:05:00 +0000

Se você acha que criar um formulário de contato no seu site ou blog é um "bicho de sete cabeças", tenho uma solução que vai te poupar esforços[...], é o JotForm.

Simplicando, o JotForm é um site onde você faz um simples cadastro e monta um formulario em alguns minutos, no final é gerado um codigo Javascript que você insere no seu blog ou site. Nele você encontra uma enorme gama de opções para você usar no seu formulário, desde campos de e-mail e telefone até ferramena de avaliação e anexar imagem para emvio, muito bom.

É um construtor WYSIWYG, você não precisa saber "nada" de códigos, é apenas escolher o que quer, arrastar, e colocar onde quer, veja:

Depois de tudo pronto é só incorporar o código no seu site ou blog, veja como:

Espero que essa postagem tenha ajudado você a incrementar seu site ou blog com essa ótima ferramenta recomendada pelo CSS Orbit, até a próxima ! ^___^

CSS para Iniciantes #1 Aplicando o CSS na página HTML

noreply@blogger.com (Danilo Ramos) — Sat, 18 Jun 2011 01:26:00 +0000

Iniciaremos uma série de tutoriais para quem está iniciando em CSS, simples e objetivos, de uma forma clara para que você possa entender e começar a aplicar em seus sites ou blogs.

Podemos aplicar o CSS de tres formas diferentes no site, veja:

1º Inline

O CSS é aplicado diretamente na tag HTML, veja o exemplo:

<b style="font-size: 25px; color:blue;">texto qualquer</b>

Isso faz com que o texto fique com 25px de tamanho e cor azul.
Mas uma coisa, evite o uso do Inline no seu site![...]

2º Interno

O CSS é aplicado dentro da página HTML, mais precisamente dentro da tag <head> veja o exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Exemplo de CSS</title>
  
  <style type="text/css">
    b { font-size: 25px; }
    b { color: blue; }
  </style>
  
</head>

Isso faz com que o texto fique com 25px de tamanho e cor azul.
Use o Interno algumas vezes, mas ainda não é recomendado.

3º Externo

Como o nome já diz, é externo, então criaremos além do arquivo do nosso site (.html) criaremos também um novo arquivo só que .css(por exemplo: meuestilo.css).
Veja, esse é o conteúdo do arquivo meuestilo.css, veja:

b {font-size: 25px;}
b {color: blue;}

Agora importaremos o CSS para dentro do nosso site - mas como? - através da tag <link>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Minha Primeira Página Web</title>
<link rel="stylesheet" type="text/css" href="meuestilo.css" />
</head>
...

E adivinha, isso faz com que o texto fique com 25px de tamanho e cor azul. ;)
Esse é o recomendável para você aplicar o CSS na suas páginas.

Internet Explorer 10 ! Versão de testes já disponível

noreply@blogger.com (Danilo Ramos) — Tue, 31 May 2011 03:16:00 +0000

Mal o Internet Explorer 9 foi lançado e a Microsoft já disponibilizou o Internet Explorer 10 em versão de teste para download.

Foram feitas melhorias no processamento do HTML5 e do CSS3, ou seja, melhorias na parte visual das páginas e menos dor de cabeça para os web designers de plantão. Foi dado também um "upgrade" no uso do hardware e do processamento o que dá ao usuário uma navegão mais rápida. O IE 10 está vindo para concorrer de igual para igual com o Firefox da Mozilla e o Chrome do Google.

Uma má notícia, segundo a revista ComputerWorld o IE 10 não vai funcionar no Windows Vista, quando é executado exibe uma mensagem de erro:

"A plataforma de prévia do Internet Explorer não suporta nenhuma versão anterior ao Windows 7".

Essa é pra matar de vez o tão despresado Windows Vista. E tem gente dizendo que o IE 9 é o novo IE 6, ixi !

Inspiration Showcase - Ilustração #10 Belas ilustrações de um dos universos mais conhecidos dos quadrinhos

noreply@blogger.com (Danilo Ramos) — Sun, 22 May 2011 16:21:00 +0000

Navegando pela web encontrei o blog dccomicsartshow.blogspot.com, onde publicam ilustrações relaciondas ao universo DC, muito bom, se você curte quadrinhos como eu ou é apenas apreciador de belas artes você vai babar.

Para ver mais ilustrações é só acessar o site dccomicsartshow.blogspot.com

A evolução do Firefox ! Uma viagem ao passado que mostra como o Firefox se tornou um dos principais navegadores da web.

noreply@blogger.com (Danilo Ramos) — Sat, 07 May 2011 04:35:00 +0000

Surgido no dia 9 de Novembro de 2004, o Firefox é considerado um dos melhores browsers da web, e hoje, está em segundo lugar entre os browsers mais utilizados e a cada ano sua fatia no mercado aumenta.(...)

^{fonte da imagem}

Procurando ícones para seus projetos ? ícones, ícones e mais ícones

noreply@blogger.com (Danilo Ramos) — Tue, 03 May 2011 12:29:00 +0000

Procurando ícones bem legais para seus projetos, vou te dar a dica de dois sites que encontrei na web, um deles é o findicons.com[...]

...e o outro é iconfinder.com

É possível encontrar nesses sites, ícones em diversas extensões (png, gif, ico e etc) tanto para uso "não comercial" quanto para uso "comercial", basta usar os filtros encontrados no site. Aproveite !

Firefox 4 chega a marca de quase 9 milhoes de downloads E a Microsoft ainda dá bolinho pra comemorar

noreply@blogger.com (Danilo Ramos) — Wed, 23 Mar 2011 20:09:00 +0000

Em apenas 24 horas o Mozilla Firefox 4 foi baixado 5 milhões de vezes, segundo a Fundação Mozilla. Em contrapartida vale lembrar que o Internet Explorer 9, o principal concorrente da Firefox foi baixado "apenas" 2,3 milhões de vezes no dia de seu lançamento.[...]

Veja a imagem abaixo do hotsite criado pela Mozzila para mostrar, em tempo real, o número de downloads do aplicativo.

^{Fonte da imagem: Fundação Mozilla}

Em apenas um dia, os números colocam o Firefox 4 como a oitava versão mais utilizada na atualidade. O Internet Explorer 8 ainda é o navegador mais utilizado, mas o novo Firefox fica à frente do Internet Explorer 9 e do Opera 11.

E o mais curioso, a equipe do Intenet Explorer enviou na tarde do dia 22 um bolo para o pessoal da Mozilla parabenizando pelo lançamento do novo browser. Isso que é amizade =).

^{Fonte da imagem: Jay Pattel / Twitter}

Inspiration Showcase - Ilustração #9 Incríveis ilustrações dos Transformers

noreply@blogger.com (Danilo Ramos) — Sat, 12 Mar 2011 19:49:00 +0000

Transformers, filme de 2007, baseado no desenho animado de mesmo nome, um "filmão" pra quem curte muita ação. Abaixo um seleção de ilustrações, ou melhor, de incríveis ilustrações dos Transformers, o Bumblebee, do time dos mocinhos, é o meu favorito.

por Zeo-x

por kieranoats

raptorkraine

dylanliwanag

strifestyle

orcasaurus

maxcdn

codexcdm

Caracteres especiais em HTML

noreply@blogger.com (Danilo Ramos) — Sun, 23 Jan 2011 16:49:00 +0000

Um lista de vários caracteres, acho que alguns você nem sabia que existia, podem ser úteis para algum trabalho seu na web. A vantagens de usar esses caracteres ao invés de imagens é que carrega mais rápido pois é apenas texto.

Deu um trabalhão mais ta aí pra você, os caracteres e seu respectivo código para colocar no seu HTML.

Traços e separadores

– | –

— | —

⋅ | &#8901;

• | &#8226;

◊ | &loz;

[...]

Aspas

‘ ’ | ’ / ‘

“ ” | ” / “

❛ ❞ | &#10075; / &#10078;

trademark e copyright

™ | ™

® | &reg;

Símbolos de valores

¢ | &cent;

£ | £

¥ | &yen;

€ | €

Setas e direções

→ | →

← | ←

» | »

« | «

› | ’

‹ | ‘

↑ | &uarr;

⇐ | ⇐ (atenção o "A" deve ficar maiúsculo mesmo)

⇒ | ⇒ (atenção o "A" deve ficar maiúsculo mesmo)

↵ | &crarr;

↔ | ↔

☞ | &#9758;

☜ | &#9756;

Outros

☎ 416 234 7590 | &#9742;

✉ | &#9993;

✍ | &#9997;

✎ | &#9998;

✓ | &#10003;

☑ | &#9745;

☒ | &#9746;

✗ | &#10007;

⊕ | &oplus;

⊗ | &otimes;

† | &dagger;

♫ | &#9835;

✄ | &#9988;

✁ | &#9985;

∞ | ∞

♨ | &#9832;

☢ | &#9762;

✈ | &#9992;

℗ | &#8471;

☠ | &#9760;

☣ | &#9763;

☯ | &#9775;

☮ | &#9774;

♂ | &#9794;

☰ | &#9776;

♥ | &hearts;

★ | &#9733;

☆ | &#9734;

☺ | &#9786;

☹ | &#9785;

Temperatura

☂ / 29° | &#9730; / &deg;

℃ / ℉ / ☃ | &#8451; / &#8457; / &#9731

O melhor das melhores dicas para um site ou blog de sucesso Uma seleção de dicas que vão te ajudar a alavancar seu site

noreply@blogger.com (Danilo Ramos) — Wed, 12 Jan 2011 17:30:00 +0000

Na web existe muitos posts sobre "como ter um site ou blog de sucesso", você já deve ter lido algum, então o CSS Orbit fez uma seleção do melhor dessas dicas encontradas em diversos sites para ajudar você a ter um blog de sucesso !

Crie uma interface amigável

"A criação de uma interface amigável não implica somente em juntar um conjunto de imagens interessantes, textos longos e formas bonitas em uma janela cheia de cores e esperar que qualquer usuário seja capaz de utilizá-la e tirar o melhor proveito dela. Ao contrário, para que(...) uma interface seja considerada amigável, ela deve seguir alguns parâmetros: ser de fácil utilização, possuir uma baixa taxa de erros, ser atrativa ao usuário, além de propiciar uma fácil recordação."

fonte: arianefonseca.com

Navegação eficiente e clara.

A navegação de um site tem que ser simples e claramente visíveis. Uma vez que o tema é finalizado, o segundo aspecto é o de criar uma navegação eficiente. Todas as ligações têm de estar devidamente organizados e apresentados como relacionados ao tema. O visitante deve encontrar uma navegação transparente a fim de acessar as informações, receber a mensagem clara e utilizar qualquer ajuda do site.

fonte: blog.bounceweb.com.br

Aprendi nessa vida ;)

"Uma coisa que eu aprendi nessa vida é que você recebe o que oferece sem pensar no que vai levar em troca. Se você faz as coisas somente pensando nos cifrões $$$ que pode ganhar, as chances de falhar são muito grandes.

Eu sempre tento criar conteúdo que facilite a vida dos visitantes que acessam o Criar Sites, passando e explicando as dicas da melhor maneira que eu posso para um público exigente."

fonte: criarsites.com

Use os agregadores de notícias

"Divulgue seus artigos em agregadores de notícias: Existem atualmente inúmeros sites na internet para qual os usuários enviam os posts, assim cada post recebe votos e quanto maior o número de votos, o mesmo tem a chance de aparecer na página inicial facilitando a visualização de todos os usuários do agregador. Como exemplos deste serviço temos: Likk (www.linkk.com.br), Rec6 (www.rec6.via6.com), Dihitt(www.dihitt.com.br) e Eu Curti (www.eucurti.com.br)."

Fonte: blogdicas.net

Faça um conteúdo diferente e baseie-se em bons sites

"Dê preferência ao que não foi criado ou pelo menos ao que menos foi criado. Por tanto é muito importante escolher um assunto que você domina. Criatividade é a chave do negócio!

Dificilmente você vai encontrar um assunto bom e que não é falado por algum blog. É nessa hora que o melhor trabalho vai sair na frente.Procure blogs e sites que falem do mesmo assunto, veja grandes trabalhos relacionados e inspire-se neles.

Claro! Você não vai fazer igual ao outro blog e sim algo além. Lembre-se do que eu disse: Crie um blog completo e diferente."

Fonte: ferrmentasblog.com.br

Meu site e o consultório médico, hum oque?!

"...não adianta nada ter um site leve, bem feito, facílimo de navegar, mas sem qualquer conteúdo (fica parecendo um consultório médico que é bonito, limpo, que traz conforto psicológico, mas que o médico não é um bom profissional e por isso não tem pacientes). Infelizmente a realidade é que a maioria dos sites na Internet se encontram em uma dessas duas situações."

Fonte: aptnet.com.br

Use imagens e videos nos seus artigos

"A coisa mais importante que você pode fazer no seu blog é escrever artigos de qualidade anexando a ele imagens e vídeos sempre que possível, pois é agradável ler um artigo e ver um vídeo ou foto relacionado. "

Fonte: mestreseo.com.br

Especifique dias e horários para seu blog

"Para criar e manter um blog de sucesso é preciso persistência e organização. Dias e horários específicos evitam os famosos “daqui a pouco eu faço” e o “amanhã eu faço o de hoje e o de amanhã”. O que certamente acabará fugindo do seu controle."

Fonte: leocabral.com

Seja específico e tenha amor pelo que escreve

"Você precisa ter em mente que quanto mais específico for o assunto do seu blog, mais altos serão os rendimentos obtidos com ele tanto com programas de afiliados como de anunciantes direto além de atrair tráfego específico para seu blog. Mas cuidado, especificar de mais também não é bom. Um blog sobre receitas light é um blog específico, já um blog sobre receitas de bolo de chocolate light não passará do primeiro mês por falta de assunto. Para completar, se você não amar o assunto pelo qual escreve, perderá o interesse rapidamente."

Fonte: leocabral.com

Bom, espero que essa seleção ajude você a ter um blog de sucesso !

Centralizando seu site com CSS Modo simples de deixar sua página sempre no centro da tela

noreply@blogger.com (Danilo Ramos) — Tue, 28 Dec 2010 02:06:00 +0000

Vamos utilizar um método, que na minha opinião, é o mais fácil para deixar o site sempre no meio da tela, não importando a resolução ou o tamanho da janela a página sempre fica no meio.

Primeiramente o HTML, teremos que criar uma div que envolva todo o site (como se fosse uma "casca") e nela colocaremos o id="centro". E dentro dela criamos mais uma div, com o id="wrap". Veja como ficou:

<div id="centro">
<div id="wrap">

</div>
</div>

(...)
Agora o CSS, para a nossa "div centro" colocamos float com o valor left, margin com o valor auto (para o cálculo automático da margem), width com o valor 100%, (o valor é em porcetagem por que assim a div ocupa a largura da tela inteira não importando o tamanho da janela ou a resolução do monitor) e border com os valores de 1px, solid e blue apenas para que você possa visualizar a div, coloque o valor em 0px se não quizer visualizar a borda.

Já para a "div wrap" colocamos margin com o valor auto e width com o valor de exemplo de 800px, e border com os valores de 1px, solid e blue (coloque o valor em 0px se não quizer visualizar a borda). Veja:

#centro{
        border:1px solid blue;
        float: left;
        margin:auto;
        width:100%;
       }

#wrap{
        border:1px solid red;
        margin:auto;
        width:800px;
       }

Pronto ! Agora dentro da div "wrap" você desenvolve sua página.

Tutorial de XHTML Aprenda XHTML sem enrolação

noreply@blogger.com (Danilo Ramos) — Sat, 18 Dec 2010 17:59:00 +0000

O que é XHTML ? Uma breve introdução.

O XHTML é uma linguagem desenvolvida para exibição de páginas da internet tanto em pcs e notebooks quanto em celulares, pamls, etc. É uma linguagem mais organizada e mais "limpa" em relação ao HTML. Essa nova linguagem consegue ser suportada por vários dispositivos, independentemente da plataforma usada. Se baseia na linguagem XML sem deixar de lado a inguagem de marcação HTML. Além disso a W3C recomenda o uso do XHTML desde 26 de janeiro de 2000 (já faz um tempinho).

Diferenças entre HTML e XHTML.

Não existem grandes diferenças entre o HTML e o XHTML, se você domina o HTML não terá muitas dificuldades em aprender essa linguagem, existem muitas praticas que podiam ser usadas no HTML e que agora no XHTML não podem mais, seria como um HTML mais organizado como dito anteriormente, onde você tem que seguir algumas regras a mais, vamos começar.
(...)
1 No XHTML todos os elementos devem, obrigatoriamente, estar bem aninhados.

Modo errado:
<p><b><i>texto</b></i></p>

Modo certo:
<p><b><i>texto</i></b></p>

2 Todos os elementos devem, obrigatoriamente, possuir tags de fechamento.

Modo errado:
<p>esse é um texto.
<p>esse é outro texto.

Modo certo:
<p>esse é um texto.</p>
<p>esse é outro texto.</p>

2.1 Aqueles elementos que no HTML não possuem uma tag de fechamento, devem ser, obrigatoriamente, fechados com um espaço e uma "/" no final, atenção, não se esqueça do espaço:

Modo errado:
esse é um texto.
<br>
esse é outro texto.
<hr>
<img src="exemplo.gif" alt="uma imagem">

Modo certo:
esse é um texto.
<br />
esse é outro texto.
<hr />
<img src="exemplo.gif" alt="uma imagem" />

3 No XHTML as tags e também os atributos são sensíveis a caixa, por isso devem estar, obrigatoriamente, em caixa baixa (letras minúsculas):

Modo errado:
<BODY>
<P><b><i>texto</i></b></P>
</BODY>
<font COLOR="blue">texto</b>
<img src="exemplo.gif" ALT="uma imagem" />

Modo certo:
<body>
<p><b><i>texto</i></b></p>
</body>
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />

3.1 Cuidado com códigos com letras maiúsculas feitos por editores:

Modo errado:
<div OnMouseOut=function()>

Modo certo:
<div onmouseout=function()>

4 Todos os valores dos atributos devem estar, obrigatoriamente, entre aspas:

Modo errado:
<font color=blue>texto</b>
<img src=exemplo.gif alt="uma imagem" />

Modo certo:
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />

5 A sintaxe deve ser escrita por completo:

Modo errado:
<input checked />

Modo certo:
<input checked="checked" />

5.1 - Uma lista com os atributos que se enquadram no item 5:

declare declare="declare" 
readonly readonly="readonly" 
disabled disabled="disabled" 
selected selected="selected" 
defer defer="defer"
compact compact="compact" 
checked checked="checked"  
ismap ismap="ismap" 
nowrap nowrap="nowrap"
nohref nohref="nohref" 
noshade noshade="noshade"  
multiple multiple="multiple" 
noresize noresize="noresize"

6 Se for usar o &(e comercial) ele deve ser codificado no código HTML.

Modo errado
Maria & João

Modo certo
Maria &amp; João

7 Imagens, o atributo "alt" é abrigatorio em todas as imagens.

Modo errado:
<img src="exemplo.gif" />

Modo certo:
<img src="exemplo.gif" alt="uma imagem" />

ou assim:

<img src="exemplo.gif" alt="" />

8 Use o "id" ao invez do "name", o elemento "name" está em desuso.

Modo errado:
<img src="exemplo.gif" name="foto" />

Modo certo:
<img src="exemplo.gif" id="foto" />

9 Separadores de blocos de código. Não use a sequência "----------" entre os "<-- -->" alguns agentes de usuários mais antigos podem ter problemas para interpretar, use uma sequecia como "========" ou "xxxxxxxx".

Modo errado:
<---------------menu----------------->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li> 
    
   <li>Twitter</li> 
 </ul> 
<---------------menu----------------->

Modo certo:
<-- ==========menu============= -->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li>     
   <li>Twitter</li> 
 </ul> 
<-- ============menu=========== -->

O que é Feed ou RSS ? Um breve conceito

noreply@blogger.com (Danilo Ramos) — Tue, 14 Dec 2010 14:21:00 +0000

Um RSS ou Feed nada mais é do que um endereço na web por onde você pode acompanhar as últimas noticias de um site ou blog, um RSS é representado pelo simbolo:

Clicando no símbolo do feed você pode se inscrever para acompanhar as novidades do respectivo site ou blog.
Em um RSS é mostrado vários resumos das notícias juntamente com o link para a notícias inteira. Hoje, pricipalmente entre a comunidade de blogs, o feed é muito popular.(...)

No que o feed é legal?

Uma das coisas legais de um feed ou RSS é que você não precisa visitar toda hora um site para saber se há posts ou notícias novas, através do feed favoritado em seu browser, por exemplo, você pode saber das novidades sem entrar no site. Apenas os browsers atuais possuem essa função como o Firefox 3+ Chrome, Opera, Internet Explorer 7+, etc.

Com um feed também é possível acompanhar as notícias e postagens de vários sites ou blogs ao mesmo tempo em uma só página através dos sites agregadores de feed.

Para você alguns agregadores de feed:
-Google Reader
-Bloglines
-RSS Owl

Relação sites e dispositivos móveis Como seu site ou blog é visto em dispositivos móveis?

noreply@blogger.com (Danilo Ramos) — Mon, 29 Nov 2010 15:20:00 +0000

Já parou pra pensar em como seu site ou seu blog é visto em dipositivos móveis? A web já não se limita mais a apenas PCs e Notebooks, estamos em uma era onde ocorre uma explosão de dispositivos movéis no mercado, como celulares e smarthphones.

Na campus Party 2010, houve uma discussão(...) sobre dispositivos móveis e mobilidade que contou com Hilton Mendes, diretor de Terminais e Inovação da Vivo, Nick Ellis, do blog Digital Drops, Marcelo Castelo, diretor da F.biz, e Ricardo Longo, diretor da Fingertips. Veja alguns comentários ditos por eles (fonte):

Nick Ellis:

“A mobilidade é o presente da humanidade, a prova disso é que todos estão conectados aqui.”

Ricardo Longo:

“Aproveitamos a oportunidade que o iPhone trouxe, mas sabíamos desde o começo que não podíamos nos restringir à plataforma da Apple. A ideia é trabalhar sempre com novas demandas.”

Marcelo Castelo:

“A internet dá acesso ao mundo. Mas é o conteúdo que instiga as pessoas a usarem a tecnologia.”

Hilton Mendes:

“Ninguém pode negar que houve uma mudança de paradigmas depois do iPhone.”

Até 2020, 2 bilhões de dispositivos móveis estarão conectados na internet no Brasil (fonte) e, acho eu, que um dos maiores incentivadores para esse crescimento são os planos de telefonia que torna o acesso a web por celulares cada vez mais barato e rápido, já é hora de se preocupar com o desenvolvimento de sites válidos para esses dispositivos, sabe por quê? vamos aos números:

Em uma lista com as 500 maiores empresas brasileiras, apenas 12% dispõem de uma versão mobile de seus portais – excluindo as do setor financeiro. A pesquisa realizada pela em empresa de soluções móveis Mowa, apontam ainda que 95% das empresas não podem ser consideradas totalmente mobilizadas(fonte).

Em um ano foram comercializados oficialmente 175 900 iPhones no País, segundo a consultoria Gartner.(fonte: Portal Exame – 21/08/09).

Pesquisa feita empresa americana InsightExpress concluiu que a publicidade para celular causa um impacto quase cinco vezes maior do que aquela feita para a internet e vista no computador (fonte).

Essas pesquisas mostram alguns motivos pelo qual web designers devem mais atenção para o desenvimento de páginas para dispositivos móveis. E falando nisso, uma ferramenta muito interessante é o ready.mobi que analiza seu site mostra se é apto para ser exibido em dispositivos móveis ou não.

CSS Tutorial - CSS Reset Limpando a lousa antes de desenvolver seu site

noreply@blogger.com (Danilo Ramos) — Tue, 23 Nov 2010 00:39:00 +0000

Quando se usa diferentes browsers para testar determinada página da web podemos ver que as tags HTML em seu estado de dafault(sem formatações) são interpretadas de uma forma um pouquinho diferente em cada browser, isso acontece porque cada browser define o seu padrão para as tags, inserir o CSS Reset antes de começar a desenvolver sua página, é uma boa alternativa para resolver esse probleminha de inconsistência.(...)

O CSS Reset basicamente neutraliza o default inconsitente que as tags HTML tem nos browsers, ou seja, dá uma "resetada" nas margin, padding, h1, h2, form, div e etc para que tenha o mesmo padrão consitente em todos os browsers.

Pra usar é muito simples basta criar um arquivo .css apenas com o CSS Reset e importar normamente com o @import ou a tag <link>.
Existem várias tipos de CSS Reset que, afinal, tem o mesmo objetivo, mas vou mostrar as mais utilizadas pelos web designers. São tres tipos:

CSS Reset Genérica

* {
    padding: 0;
    margin: 0;
    border: 0;
}

Embora o CSS Reset acima seja bem comum, ainda assim não é um "reset" completo pois ainda temos que resetar além das margins e paddings também os links, tabelas e itens de lista, etc. Então é mais recomendável o uso dos exemplos abaixo.

Yahoo's CSS Reset
CSS Reset proposta pelo Yui / Yahoo:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
ol,ul {
    list-style: none;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer Reset CSS
Proposto por Eric Meyer:

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}
body {
    background: white;
    line-height: 1;
    color: black;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

10 add-ons do Firefox para web designers Uma seleção de add-ons que são uma mão na roda

noreply@blogger.com (Danilo Ramos) — Tue, 09 Nov 2010 23:13:00 +0000

A possibilidade de inserir add-ons é uma das características que diferencia o Firefox de vários browsers e por isso também o torna preferido por muitos web designers. Entre vários addons para desenvolvimento web, o CSS Orbit fez uma seleção de 10 add-ons que vão fazer você não perder muito tempo naquelas funções do dia-a-dia na hora de desenvolver(...) páginas da web, veja alista abaixo:

Firebug

Um ótimo add-on, com ele você pode modificar e monitorar CSS, HTML e Javascript "ao vivo" em qualquer site.

Web Developer

Esse add-on disponibiliza pra você um menu e uma toolbar com uma série de ferramentas para desenvolvedores web.

IE Tab 2

Versão melhorada do clássico IE Tab, permite você visualizar suas páginas da web no IE em uma nova aba com o Firefox.

EditCSS

Um editor de CSS na sua sidebar.

ColorZilla

Com addon você pode capturar o código de qualquer cor exibida em qualquer ponto de seu browser, você também pode ampliar a página e medir a distância entre dois pontos da página, também permite a escolha de cores de um conjunto de cores pré-definidas e salvar as mais utilizadas em paletas personalizadas.

Rainbow Color Tools

Ferramentas de cores para desenvolvimento web.

Extrai o esquema de cores a partir de imagens do site atual e CSS;
Selecionador de cores HSV;
Recupera a cor de qualquer pixel no navegador;
Filtra através de cores salvas por tag ou o url da página que a cor foi encontrada.

View Source Chart

Esse add-on usa um sistema de cores no código fonte da página, adicionando limites visuais fica mais fácil aprender HTML e visualizar a estrutura do código.

HTML validator

Adiciona um validador de HTML no Firefox o número de erros da pagina HTML pode ser vista na barra de status do navegador.

CSS Reloader

Com esse complemento você atualiza apenas o CSS de uma página da web sem precisar atualizar página inteira.

CSS Validator

Valida sua página usando o W3C CSS Validator. Adiciona uma opção que é visível no menu do botão direito do mouse e no menu "ferramentas". Abre os resultados em uma nova aba.

Inspiration Showcase - Sites #9

noreply@blogger.com (Danilo Ramos) — Wed, 27 Oct 2010 20:51:00 +0000

Desculpem pela demora ^__^ , mas depois de um tempo sem postagens na seção "Inspiratin Showcase" a seção voltou a ativa.
Mais um site, agora é o Blog Avoado enviado pelo Victor Pagani, possui postagens que abordam inspirações, freebies, noticias e tutoriais, muita coisa relacionada a design, um blog com um design simples e bem agradável.

Envie seu blog também para a seção "Inspiration Showcase" !

Verifique se seu site é tableless Saiba se seu site está dentro dessa recomendação da W3C

noreply@blogger.com (Danilo Ramos) — Sat, 23 Oct 2010 15:46:00 +0000

A W3C é um orgão que regulamenta normas para web e propõe em uma de suas normas que os sites sejam "tableless", sendo tableless seu site é indexado com mais facilidade pelos mecanismos de busca a página fica mais leve, torna o site mais compatível com browsers atuais e consequentemente vai estar dentro das web standards.

Na web existe uma boa ferramente pra te auxiliar nisso(...), é o site w3tableless.com onde você pode verificar se sua página é tableless ou não, basta digitar o endereço do seu web site no campo e clicar em "check", se for tableless irá retornar um "Congratulations" pra você. Fica a dica.

Mas se você não sabe o que é um site tableless, recomedo a leitura da postagem "Tableless, conceito e importância" que é um resuminho básico sobre o conceito de tableless.

Como importar o CSS para sua página HTMLImportando através do @import e link

noreply@blogger.com (Danilo Ramos) — Sat, 16 Oct 2010 19:40:00 +0000

Importar um arquivo .css para sua página HTML é bem simples !

Podemos usar dois modos, atraves do @import que é uma propriedade CSS, ou <link> que é uma tag HTML

Usando o @import

Digitamos as tags <style> e dentro dela colocaremos o @import como abaixo, tudo isso logo antes da tag </head>(atenção pessoal iniciante, não é antes da <head> é antes da </head> com uma "/"), e no lugar de meuarquivo.css coloque o nome da sua folha de estilos .css, lembre-se de(...) colocar o CSS na mesma pasta que está o seu HTML, veja:

<html>
<body>  
<head> <title>titulodosite</title> 
...
<style type="text/css">
@import url("meuarquivo.css")
</style>

</head>
<body>
...
</body>
</html>

Usando a tag <link>

O outro modo de importar é usando a tag <link> antes da tag </head>, o nome do seu arquivo .css você coloca no lugar do "exemplo.css", faça como abaixo:

<html>
<head>
<title>titulodosite</title>
... 
<link rel="stylesheet" type="text/css" href="exemplo.css">

</head>
<body> 
...
</body>
</html>

Não se esqueça de colocar o seu arquivo .css na mesma pasta do seu HTML.

Efeito muticores em seus links Um código javascript bem interessante que deixa seus link como um arco-iris

noreply@blogger.com (Danilo Ramos) — Sat, 02 Oct 2010 17:22:00 +0000

Olá ! Encontrei um código muito interessante na web, mais precisamente no blog mybloggertricks.com que deixa seus links (quando está no estado hover) não só com uma cor, mas várias cores que se alternam, um efeito multicolorido, veja a demostração aqui.

Atenção ! Muito cuidado com esse efeito, dependendo do tema do seu site ou blog pode ficar chamativo demais. ^_^

O primeiro passo é copiar o código javascript abaixo, logo antes da tag de fechamento </head> no código do seu site ou blog:

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById) 
window.onerror=new Function("return true")
var objActive;  // The object which event occured in 
var act = 0;    // Flag during the action 
var elmH = 0;   // Hue 
var elmS = 128; // Saturation 
var elmV = 255; // Value 
var clrOrg;     // A color before the change 
var TimerID;    // Timer ID
if (document.all) { 
    document.onmouseover = doRainbowAnchor; 
    document.onmouseout = stopRainbowAnchor; 
} 
else if (document.getElementById) { 
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); 
    document.onmouseover = Mozilla_doRainbowAnchor; 
    document.onmouseout = Mozilla_stopRainbowAnchor; 
}
function doRainbow(obj) 
{ 
    if (act == 0) { 
        act = 1; 
        if (obj) 
            objActive = obj; 
        else 
            objActive = event.srcElement; 
        clrOrg = objActive.style.color; 
        TimerID = setInterval("ChangeColor()",100); 
    } 
}

function stopRainbow() 
{ 
    if (act) { 
        objActive.style.color = clrOrg; 
        clearInterval(TimerID); 
        act = 0; 
    } 
}

function doRainbowAnchor() 
{ 
    if (act == 0) { 
        var obj = event.srcElement; 
        while (obj.tagName != 'A' && obj.tagName != 'BODY') { 
            obj = obj.parentElement; 
            if (obj.tagName == 'A' || obj.tagName == 'BODY') 
                break; 
        }
        if (obj.tagName == 'A' && obj.href != '') { 
            objActive = obj; 
            act = 1; 
            clrOrg = objActive.style.color; 
            TimerID = setInterval("ChangeColor()",100); 
        } 
    } 
}

function stopRainbowAnchor() 
{ 
    if (act) { 
        if (objActive.tagName == 'A') { 
            objActive.style.color = clrOrg; 
            clearInterval(TimerID); 
            act = 0; 
        } 
    } 
}

function Mozilla_doRainbowAnchor(e) 
{ 
    if (act == 0) { 
        obj = e.target; 
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { 
            obj = obj.parentNode; 
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY') 
                break; 
        }
        if (obj.nodeName == 'A' && obj.href != '') { 
            objActive = obj; 
            act = 1; 
            clrOrg = obj.style.color; 
            TimerID = setInterval("ChangeColor()",100); 
        } 
    } 
}

function Mozilla_stopRainbowAnchor(e) 
{ 
    if (act) { 
        if (objActive.nodeName == 'A') { 
            objActive.style.color = clrOrg; 
            clearInterval(TimerID); 
            act = 0; 
        } 
    } 
}

function ChangeColor() 
{ 
    objActive.style.color = makeColor(); 
}

function makeColor() 
{ 
    // Don't you think Color Gamut to look like Rainbow?
    // HSVtoRGB 
    if (elmS == 0) { 
        elmR = elmV;    elmG = elmV;    elmB = elmV; 
    } 
    else { 
        t1 = elmV; 
        t2 = (255 - elmS) * elmV / 255; 
        t3 = elmH % 60; 
        t3 = (t1 - t2) * t3 / 60;
        if (elmH < 60) { 
            elmR = t1;  elmB = t2;  elmG = t2 + t3; 
        } 
        else if (elmH < 120) { 
            elmG = t1;  elmB = t2;  elmR = t1 - t3; 
        } 
        else if (elmH < 180) { 
            elmG = t1;  elmR = t2;  elmB = t2 + t3; 
        } 
        else if (elmH < 240) { 
            elmB = t1;  elmR = t2;  elmG = t1 - t3; 
        } 
        else if (elmH < 300) { 
            elmB = t1;  elmG = t2;  elmR = t2 + t3; 
        } 
        else if (elmH < 360) { 
            elmR = t1;  elmG = t2;  elmB = t1 - t3; 
        } 
        else { 
            elmR = 0;   elmG = 0;   elmB = 0; 
        } 
    }
    elmR = Math.floor(elmR).toString(16); 
    elmG = Math.floor(elmG).toString(16); 
    elmB = Math.floor(elmB).toString(16); 
    if (elmR.length == 1)    elmR = "0" + elmR; 
    if (elmG.length == 1)    elmG = "0" + elmG; 
    if (elmB.length == 1)    elmB = "0" + elmB;
    elmH = elmH + rate; 
    if (elmH >= 360) 
        elmH = 0;
    return '#' + elmR + elmG + elmB; 
}
//]]>
</script>

Em var rate = 20 (bem no início do código) você pode mudar a velocidade com que as cores mudam, nesse caso você mudaria o número 20 por qualquer outro valor. valores maiores aumentam a velocidade e valores menores diminuem.

Feito isso, aproveite, ;) agora qualquer link que você criar em sua página estará com o efeito, veja a demostração aqui.
Espero que você, leitor, tenha gostado.

Google diz que Chrome 7 é 60 vezes mais rapido que a versão atual !

noreply@blogger.com (Danilo Ramos) — Fri, 17 Sep 2010 23:45:00 +0000

A Google produziu na terça-feira uma serie de patches que afetam uma série de vulnerabilidades na versão atual do Chrome e também
avanços na aceleração da nova GPU da versão 7 estão atingindo cerca de 60x mais que na versão 6.
Os engenheiros de software do Google James Robinson e Gregg Tavares escreveram no Blog do Chromium:

"Esse sistema capta os melhores gráficos da API para utilização em cada sistema operacional que suporta Cromium: Windows XP/Vista/7, Mac OS e Linux".

"Esses números iniciais mostram uma melhoria de até 60x na velocidade em relação à versão atual do Google Chrome", acrescentaram eles.

O Chrome tem sido tradicionalmente considerado o navegador para bater, quando se trata de velocidade. Vale também lembrar que a última versão beta do Firefox 4 da Mozilla também usa aceleração de hardware para velocidades mais rápidas.

Gráficos 3D

Além de rápidos avanços no desempenho dos gráficos 2D do Chrome, o Google também está trabalhando em recursos gráficos 3D.

"Estamos animado para dar aos desenvolvedores gráficos 2D rápidos, mas pensamos que hardware de aceleração de gráficos na Web significa dar aos desenvolvedores acesso a uma a gráficos 3D programáveis com WebGL", explicaram Robinson e Tavares.

"Com WebGL e 3D CSS, os desenvolvedores podem criar jogos modernos, galerias de fotos impressionantes, visualizações 3D de dados, ambientes virtuais, eo que mais eles podem sonhar."

Um vídeo no YouTube demonstra os recursos 3D em ação no Chrome. A versão do desenvolvedor do Chrome 7 já está disponível, com uma versão estável é esperada ainda neste outono.

Postagem baseada e traduzida de pcworld.com em inglês .