Fullsix Blog

Hoje encontrei 2 plugins de jquery que achei bastante interessantes pelo que resolvi colocar aqui para que possam ficar também a conhecer e quem sabe talvez utilizar em algum projecto.

Enjoy!

Jquery – Digital Clock (HTC Hero inspired)
http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/

Flip!a jquery plugin
http://lab.smashup.it/flip/

Recomendo também este site bastante interessante que muitos já devem conhecer, mas fica a sugestão na mesma.
http://www.smashingmagazine.com/

Um colega apercebeu-se que quando tentamos partilhar alguns dos nossos sites no Facebook, o conteúdo que o Facebook apresenta deixa muito a desejar:

O que acontexe é que quando se partilha um link no Facebook, o Facebook vai efectuar um pedido à página e tentar extrair a informação mais relevante para a apresentar no post. Neste caso, trata-se um site em flash, pelo que a única informação que o Facebook encontra é a imagem de instalação do plug-in.

Resolvemos este problema adicionando tags meta e link à página. O Facebook interpreta algumas destas tags de forma a apresentar informação mais completa. A informação que podemos adicionar inclui título, descrição e imagem. Neste caso, poderíamos adicionar as seguinte tags à página:

<meta name="title" content="O exemplo de como customizar o post no Facebook" />
<meta name="description" content="Este site descreve como customizar o
            conteúdo do post quando é partilhado no Facebook." />
<link rel="image_src" href="http://www.fullsix.com/pt/img/commun/logo.gif" />

Com estas tags, obtemos o seguinte resultado:

Como se verifica, é bastante simples customizar o aspecto das nossas páginas quando são incluídas no Facebook. Vale a pena gastar 5 minutos a adicionar esta informação para evitar ficar com links sem interesse.

Para mais informações, consultem a lista de tags suportadas pelo Facebook.

Happy coding!

Mesmo para quem já anda nisto há algum tempo aqui fica a dica.

Como todos sabem, tentamos sempre abreviar mais possível uma determinada tag; não só para motivos de rapidez de escrita e clarificação da tag mas também por motivos de peso da folha de estilo.

Neste âmbito, temos usado a tag background que mudou muito desde a sua forma decomposta:

background-attachment:fixed;
background-color:# 00FF00;
background-image: url(“css.gif”);
background-position:left;
background-repeat:no-repeat;

até há sua forma mais abreviada:

background: #00FF00 url(“css.gif”) no-repeat fixed 200px 70px;

em qualquer ordem, podendo ser omitido um mais valores.

No entanto, e para facilitar a leitura imediata da respectiva tag vamos construir sempre por esta ordem:

background: color image repeat attachment position

(ex: background: #00FF00 url(“css.gif”) no-repeat fixed left top;)

Assim seguimos a ordem de prioridade de baixo para cima:

- Cor de fundo;

- Qual a imagem;

- Repete-se ou não;

- Como é que ela deve estar no ecrã (fixa ou com scroll);

- Qual o seu posicionamento;

Neste último podem usar a nomenclatura normal letf, right, top, bottom, center;

ou o posicionamento por pixéis separado espaços. Aqui tem um exemplo de todos esses elementos:

Left:

left top

left center

left bottom

center:

center top

center center

center right

right:

right top

right center

right bottom

uma declaração:

left

center

right

pixel:

-10px -20px (left top)

150px 10px (left top)

210px 100px (left top)

Percentagem:

50% 10% (left top)

100% 30% (left top)

45% 100% (left top)

A aplicar na seguinte forma e como exemplo: background: #000000 url(“image.gif”) no-repeat fixed 200px 70px;

Se por acaso, por alguma razão, for necessário um posicionamento para os quatro pontos (left, top, right, bottom) deve se separa esse posicionamento do resto da nomenclatura:

Ex:

background: #00FF00 url(“css.gif”) no-repeat fixed);

background-position: (10px 10px 10px 10px);

Sendo a sua ordem em pixéis : (top right bottom left).

Isto deve-se ao facto de a nomenclatura de posicionamento abreviada não suportar os 4 elementos de uma vez só.

Aqui vai uma abreviação dos níveis e a respectiva check list a aplicar aos sites que devam tere acessibilidade.

Nota: geralmente usa-se até ao 2 nível. Só em casos extremos o 3.

Check list das Regras para Acessibilidade

Ora aqui vai a revisão da estrutura e nomenclaturas para sites e css:

Assim, qualquer site deve começar sempre com esta estrutura de pastas:

- Html

                + images

                + swf

                + scripts

                + pdf

+ videos

+ sons

Nota: dependendo do projecto várias destas pastas podem ser omitidas quando não são necessárias (para projectos .net esta estrutura não se aplica: é defenida pelo server side mediante as necessidades).

Para a nomenclatura das imagens existe estes sufixos a ter em conta:

                bg_name            (backgrounds)

                pub_name         (banners publicitários)

txt_name           (texto)

bot_name          (botões)

icon_name         (icons)

sep_name          (separadores)

img_name          (fotos)
dummy_name (elementos gráficos que estão em vez de e que devem ser apagados no futuro)

Para os css, aqui vai o exemplo de como deve ser feitos as nomenclaturas de css da qual já falamos:

CSS:

.newsletter{ margin:6px; padding:6px;}

.newsletter h2{ padding:0px; margin:0px; color:#000000; font-size:14px; margin-bottom:5px;}

.newsletter .txt{ color:#000000; font-size:11px;}

.newsletter .email{}

.newsletter .email input{ font-size:11px; color:#555555; padding:0px; margin:0px; border: 1px solid #CCCCCC; vertical-align:middle; width:186px;}

.newsletter .email img{ vertical-align:middle;}

.events{ width:264px; height:115px; background:url(../images/bg_smalblue.gif) no-repeat left top; padding:6px; margin:6px;}

.events h3{ font-size:14px; font-weight:bold; color:#000000; padding:0px; margin:0px; margin-bottom:5px;}

.events ul{ list-style:none; margin:0px; padding:0px;}

.events li a{ font-size:11px; color:#000000; position:relative; display:block; text-decoration:none;}

.events li a:hover{ *text-decoration:underline;}

.events span{ font-weight:bold; color:#FFFFFF;text-decoration:none; cursor:pointer;}

.events span + span{ position:absolute; right:0px;}

.events .others{ margin-top:5px;}

HTML:

    <div class=”homeBoxNormal”>

      <div class=”newsletter”>

         <h2>NEWSLETTER</h2>

            <div class=”txt”>Receba toda a informa&ccedil;&atilde;o sobre padel, em 1&ordf; m&atilde;o:</div>

            <div class=”email”><input name=”" type=”text” />

            <img src=”images/bot_ok.gif” width=”28″ height=”15″ /></div>

        </div>

       <div class=”events”>

        <h3>PR&Oacute;XIMOS EVENTOS</h3>

          <div class=”list”>

            <ul>

               <li><a href=”#”><span>22-23 Set </span>5&ordf; Etapa do Circuito Nacional<span> [+]</span></a></li>

               <li><a href=”#”><span>05-07 out </span>Campeonato  Nacional<span> [+]</span></a></li>

               <li><a href=”#”><span>20-25 nov </span>Campeonato Europa<span> [+]</span></a></li>

               <li><a href=”#”><span>20-28 Dez </span>4&ordf; Etapa do Circuito Nacional<span> [+]</span></a></li>

             </ul>

            <div class=”others”><a href=”#”><img src=”images/bot_ver_todos.gif” /></a></div>

          </div>

        </div>

    </div>

Nota: como podem reparar a estrutura n é feita apartir da raiz “homeBoxNormal” por forma a permitir o uso da componente newsletter e eventos em qualque lado.

Ainda assim, apesar desta estrutura de css permitir o uso repetido do mesmo nome para classes, tentem não abusar do mesmo nome.
O dreamweaver não gosta muito disso e baralha-se um bocado apesar de nos browsers ficar tudo bem.