31 de agosto de 2009

Crie o seu favicon (favourite icon) on-line.



Crie o seu próprio favicon on-line sem precisar instalar nenhum programa, favicons são mini icones que servem para identificar determinado site e ficam ao lado da barra de endreço dos browsers mais novos como IE7 e o Firefox 3.



Esse serviço é disponibilizado pelo site favicon.cc.[ext.], lá mesmo você desenha, seleciona as cores,
deixa o seu icone estático ou adiciona animação e depois é só fazer o dowload para o seu pc e usar no seu site ou blog.

Espero que tenha gostado da dica !

30 de agosto de 2009

CSS Tutorial - Drop caps, estilizando a primeira letra do texto.



Já viu aqueles textos onde a primeira letra (letra capitular) é estilizada e maior que resto do texto? Essas são as "Drop caps", muito utilizadas em revistas, vamos fazer isso usando CSS !


Ta aí o nosso parágrafo em HTML onde será aplicado o CSS.

<p class="estilizado">
Esse aqui é um parágrafo estilizado com a pseudo-classe
first-letter, que deixa a primeira letra do texto estilizada.
Esse aqui é um parágrafo estilizado com a pseudo-classe
first-letter, que deixa a primeira letra do texto estilizada.
</p>

Vamos usar a pseudo-classe first-letter para fazer esse efeito na primeira letra do parágrafo.

p.estilizado:first-letter{
font-size: 100px;
float: left;
color: #000099;
}

Resultado:



Essa postagem foi esclarecedora? tem alguma opinião sobre esse post? Suas palavras são bem vindas, comente !

26 de agosto de 2009

Fennec, aposta da Mozilla para dispositivos móveis !



A internet cresce, e o número de meios para se levar a ela cresce junto, um dos mais conhecidos são os dispositivos móveis como os celulares, por exemplo, e nesse meio a aposta da Mozilla para dispositivos móveis é o Fennec, baseado na mesma tecnologia do Firefox herdou varias características como a navegação em abas, campo de endereço inteligente, e outros.




E como é característica da Mozilla, o Fenec é um projeto aberto para que outras pessoas possam fazer parte desse novo navegador (bem que a Microsoft poderia ser assim, mas, os projetos são sempre guardados as sete chaves! )e o usuário ainda terá a possibilidade de adicionar complementos ao browser como no Firefox.

Se quiser dar um preview no browser pode baixar o emulador do Fennec para Windows ou Linux.

Tem alguma opinião sobre esse novo browser, gostou da postagem, comente !

22 de agosto de 2009

O W3C, World Wide Web Consortium.



O World Wide Web Consortium ou W3C foi fundado por Tim Berners-Lee no ano de 1994, é um consórcio de empresas de tecnologia e possui em torno de 500 membros, é apoiado por gigantes da tecnologia como Adobe, Apple, Cisco, Mozilla, Nokia, Microsoft entre outras empresas, desenvolve padrões para a interpretação e criação de conteúdos voltados para a web, é responsável pela recomendação dos padrões para a web.

Para que os sites possam ser acessados por qualquer tecnologia ou pessoa independente de hardware ou software que seja ultilizado (PDAs, celulares, etc.) deve-se seguir os padrões da W3C, os padrões mais conhecidos são o HTML,o XHTML e o CSS, também existem os formatos que são comuns, recomendados e aprovados pela W3C, que são: SVG (desenho vetorial), PNG, HTML, XHTML, XML, etc.

Todo desenvolvedor para web deve seguir, ou pelo menos tentar seguir, os padrões de acessibilidade estabelecidos pelo W3C, porque de outro modo esses desenvolvedores poderão impor algumas barreiras para os visitantes de seu site e até desestimular ocesso a suas páginas. Esses padrões são conhecidos também como "web standards" que tem como objetivo tornar a web acessível a todos.

Segundo o w3c.br a missão do W3C é: "Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo."

E no Brasil...

... o W3C possui escritório no Brasil, e começou a operar desde 1 de novembro de 2007.

Site da W3C: www.w3.org[ext.].
Site do W3C, escritóro do Brasil: www.w3c.br[ext.].

21 de agosto de 2009

CSS Tutorial - Usando uma imagem como marcador em listas.

Vou ensinar agora como colocar uma imagem ou foto no lugar daqueles marcadores normais
como: circle, disc e square usando CSS.

Vamos usar a propriedade list-style-image para fazer isso,
vamos aplicar essa propriedade na tag <li> do HTML:

Vamos aplicar essa propriedade, onde o valor será o endereço da imagem (GIF, JPEG, etc) como mostrado abaixo:

li{list-style-image:url('aqui-o-url-da-imagem.gif');}

Usamos essa propriedade no código HTML:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Vai ficar assim:

Item 1

Item 2

Item 3

Ok, espero que tenha ajudado :)

18 de agosto de 2009

Novo Firefox 3.5.2 lançado !



É lançada a nova versão do Firefox, o 3.5 (mais precisamente 3.5.2), com um motor melhorado que torna o Firefox 3.5 duas vezes mais rápido que o Firefox 3.0 e dez vesez mais rápido que a versão 2.0 facilitando o carregamento de sites com fotos e e-mails. Segundo o site oficial, o Firefox 3.5 inclui o motor TraceMonkey de JavaScript, que melhora o desempenho desse novo navegador. Em relação a segurança o Firefox vem com as tecnologias antiphishing e antiataques atualizadas e a adição da navegação privativa e a opção “Limpar tudo sobre este site”.
Minha opinião: Eu usei essa nova versão do FF e gostei muito, achei rápido mesmo.

Você pode baixar essa nova versão do firefox no site daMozilla[ext.].

17 de agosto de 2009

CSS 3 - novas propriedades, mais facilidade.



O CSS3 vem com tudo, pra facilitar a vida dos web designers, novas propriedades para o desenvolvimento de páginas da web.
Uma das novas propriedades que chamam a atenção é a border-radius a solução para a aquela trabalheira para criar cantos arredondados em boxes com o uso de imagens, essa propriedade cria automaticamente esses cantos arredondados sem o uso de imagens. Outra propriedade interessante é o text-shadow que dá aquele efeito de sombreamento no texto também sem precisar usar imagens.

Abaixo algumas dessas novas propriedades e algumas descrições:

Bordas
* border-image -> insere imagem em uma borda.
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image

* border-corner-image -> insere imagem nos cantos da borda.
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

* border-radius -> cantos arrendandados na borda.
* box-shadow -> insere sombreamento em um box.

Backgrounds
* background-origin and background-clip
* background-size
* multiple backgrounds

Efeitos de texto
* text-shadow -> insere sombreamento em um texto.
* text-overflow
* word-wrap
Vale lembrar que o CSS 3 não é suportado alguns browsers. Se quiser visite o CSS3.info[ext.] para informações mais detalhadas sobre as propriedades citadas acima do CSS3.

12 de agosto de 2009

CSS Tutorial - Personalizando sua caixa de busca Google com CSS.



Se possui uma caixa de busca do Google em seu site você pode estilizar caixa de texto e o botão de envio com CSS.
Vamos ultilizar as seguintes propriedades CSS para estilizar a caixa de texto e o botão de envio:
font-family -> tipo de fonte da caixa de texto e botão.
color -> para a cor da fonte da caixa de texto e botão.
background-color -> para o fundo da caixa de texto e botão.
border -> para cor, espessura e estilo da borda.

Importante: Quando a caixa de busca é carregada, o fundo branco da caixa de texto com o logo Google irá sobrepor a estilização. Para que a estilização da caixa de texto funcione temos que apagar o id="cse-search-box"na tag <form> que se encontra no código da caixa de busca Google.

<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="0157104541029603 ...
<input type="hidden" name="ie" value="UTF-8" /> 
...


Pronto ! sem o id="cse-search-box":

<form action="http://www.google.com/cse">
<div>
<input type="hidden" name="cx" value="0157104541029603 ...
<input type="hidden" name="ie" value="UTF-8" >
...


vamos criar duas classes um para a caixa de texto (class="caixadetexto") e outro para o botão (class="envio"). (coloque os valores que quiser nas propriedades.):

.caixadetexto{
font-family:"Verdana", "Arial";
color:#008cff; 
background-color:#252525;
border:dotted #008cff 1px; 
}

.envio{
font-family:"Verdana", "Arial";
color:#008cff; 
background-color:#252525;
border:solid #008cff 2px; 
}


Agora vamos inserir as classes no HTML da caixa de busca Google. A class="caixadetexto" na tag <input type="text"> (para a estilização da caixa de texto) e a class="envio" na tag <input type="submit"> (para a estilização do botão), veja no exemplo abaixo:

<form action="http://www.google.com/cse">
<div>
<input type="hidden" name="cx" value="01571045410296 ...
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" class="caixadetexto" size="30" />
<input type="submit" name="sa" class="envio" value="Pesquisar !" />
</div>
</form>


Pronto, com essa tecnica a sua caixa de busca fica personalizada,

Dica: se quizer deixar sua caixa de busca com os cantos arredondados, aplique as propriedades desse tutorial: CSS Tutorial - bordas com cantos arredondados, sem o uso de imagens

7 de agosto de 2009

A importância dos "agregadores de notícias" para seu site ou blog !



Se você é dono de um site ou blog sabe que depois de oferecer boa informação, conseguir muitas visitas é um dos objetivos, ver aquele contadorzinho indo de 100 a 1000 em poucos dias é quase que um troféu, mas nem sempre apenas cadastrando seu site em sistemas de busca como Google ou Yahoo! vai tornar o seu blog visível e com um alto número de visitas, um meio efetivo de conseguir visitas e pessoas que realmente querem ler seus artigos é ultilizando os "agregadores de notícias" como o Linkk, Rec6, Digg, Pigg, Total News, Reddit, etc.
Agregadores de notícias são sites que reúnem uma grande quantidade de notícias que são postadas pelos proprios usuários, você se cadastra gratuitamente nesses sites (pelo menos os citados são de graça :) ) e adiciona os posts do seu blog/site que são exibidos com o título, uma breve descrição e o link que vai direto para a postagem de seu blog ou site.
Milhares de pessoas acessam esses sites agregadores todos os dias, ou seja, muitas vão ver suas postagens e você tem um alta chance de ter varios usuários entrando em seu blog, por isso é bom colocar notícias com um bom conteúdo e sem erros de português, coisas assim podem deixar seus visitantes com uma má impressão de seu blog toda vez que o ver.
Depois de ter um site ou blog com um belo visual e principalmente, bom conteúdo, adicionar seus posts em sites desse tipo é uma boa para ganhar um alto número de visitas. E você, acha que o uso desses sites agregadores de notícias ocasiona o alto número de visitas em um site ou blog? Deixe seu comentário.

6 de agosto de 2009

Valide o seu XHTML com o Markup Validation Service.



Quer saber se seu XHTML está correto? Valide com o Markup Validation Service[ext.], um serviço da W3C que analiza o código da sua página e exibe em que linhas os erros foram encontrados (se ouver erros, é claro) e as possíveis soluções para os erros do código.
Esse serviço ainda disponibiliza um selo como esse () para as páginas que não apresentam erros, no caso de XHTML.

5 de agosto de 2009

Parceria

Políticas de parceria:

Seja um parceiro do "CSS Orbit", através da troca de links ou banner, seu link é divulgado na lista de parceiros do site CSS Orbit.

Entre em contato através do e-mail:

contato[arroba]cssorbit.com

Atenção: informe seu e-mail, seu nome e o link do site !

Muitos sites exigem que você tenha um alto número de visitas ou determinado Page Rank para poder ser um parceiro, aqui você não precisa se preocupar com isso, aceitamos parceria de qualquer site/blog que possua um bom visual e um bom conteúdo relacionado a design, html, css, jquery, web design ou ilustrações.

O link deve ficar nesse formato: #CSS {O}rbit

Banner 120x60:
Banner 120x120:




As políticas de parceria podem mudar sem prévio aviso.

3 de agosto de 2009

Saiba que sites andam copiando o conteudo do seu site.



Vasculhando a web encontrei um site interresante, o "Copyscape"[ext.]. Proteja-se contra o plágio, veja que sites andam copiando seu conteúdo sem sua autorização com esse serviço on-line, digite o endereço de seu site no Copyscape e se houverem sites na web com o seus textos, será exibido em uma lista com os links desses sites e um trecho do texto supostamente copiado. Se você andava querendo saber que "sitezinhos" andam copiando seus posts, o Copyscape é uma boa ferramenta para saber. Espero que essa dica tenha ajudado :-]

2 de agosto de 2009

Um dos mais populares browsers para celular do mundo, Conheça o Opera Mini.


O Opera Mini chega a sua versão 4.2 e possui mais de 20 milhões de usuários, é um dos browsers para celular mais populares do mundo. Segundo o site oficial, o Opera Mini foi criado para velocidade, as páginas da web são comprimidas em torno de 90% de seu tamanha original, e você que gosta de um novo visual tem a possibilidade da troca de skins do navegador. Outra coisa interessante, quando uma página é visitada, usando o opera mini, é mostrado para o usuário um "overview" do site onde também é sugerido onde você pode começar sua leitura. O Opera mini é gratuito.