Fullsix Blog

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.