Hui dia, tots som conscients que la majoria de webs han de complir un conjunt d’estàndards en relació a codi, accessibilitat i usabilitat. És per açò que els navegadors entendran aqueixa programació de forma òptima per a mostrar-la al usuari. L’ús de fulles d’estil per a readaptar el disseny web a l’aspecte funcional dels nostres projectors es converteix en un factor determinant.

CSS3 codi programació

font: Jeffrey Zeldman

L’ús de trucs, tècniques ja avançades, blocs de codi i recursos de programació web possibiliten la visualització de grups de capes, aplicacions i altres elements en les nostres webs que, principalment, depenen de la forma d’interpretar i executar per part del navegador aqueixes fulles d’estils en cascada (CSS).

CSS3 reticles programació web

font: Jeffrey Zeldman

Les recomanacions que des de diversos organismes professionals es realitzen per a un eficaç funcionament dels nostres llocs web i, la forma en què s’adapten completament a les necessitats de l’usuari, al costat dels requisits tecnològics, converteixen als estils web en un pilar central.

CSS3 reticles disseny web

font: Serge Kij

– En cap concepte utilitzes Flaix: utilitza-ho per a un objecte o element determinat en la web. La major part de dispositius i usuaris actualment no té per què disposar de la versió actualitzada de Adobe i, en ocasions, resulta violent descarregar aplicacions contra la nostra voluntat. Google mai ha sigut amic de Flaix i dels llocs web desenvolupats en aquest llenguatge de programació. El posicionament de text pla i imatges, concebut com una pel·lícula amb bucles, sense identificar parts de codi.

Referències i llibres CSS3

font: Joseph Casabona

– Dissenya contorns blancs sobre les fotografies: si intentes donar un gir creatiu a l’hora de presentar imatges en una web, aposta per un nou concepte de programació. Tracta de triar un simple codi que siga capaç de mostrar un marc al voltant de les fotografies sense haver d’editar-les en Photoshop o Corel Photo Paint. El marc blanc que imita els contorns d’imatges polaroid pot ser similar a aquest codi:

Plantilla disseny web CSS3

font: AALISHAN MATRIX

.photo {border:4px solid #FFF}

<img sr=”imagenes/mimagen.jpg” class”photo”>

Utilitza ombres en textos, en imatges o en tots dos: a més, en ocasions es pot optar per emprar estils web totalment fora de programes de disseny gràfic 2D, i fins i tot 3D. Amb estils CSS es poden arribar a dominar ombres projectades sobre objectes o altres elements. La forma en la qual s’incrementa el contrast d’objectes flotants sobre el Background de la pàgina o, fins i tot sobre altres elements, es pot realitzar emprant codi alternatiu de forma personalitzada.

Efecte ombres estils CSS·

fpnt: Jeffrey Zeldman

img.dropShadow {background: miweb(imagenes/dropShadow.gif) right bottom no-repeat}

Utilitza class=”dropShadow” sobre l’etiqueta <img> en cadascuna de les teues fotografies, coneixent l’ample i alt lleugerament menors que l’ombra creada, per a gaudir d’aquest genial efecte.

Identifica amb color les anotacions respecte al codi de programació: a l’hora de reprendre un projecte elaborat per un tercer, no ens agradaria enfrontar-nos a un projecte del que no entenem absolutament gens i ni tan sols saber per on començar-ho. La indentació del codi i la distinció de línies de comentari emprant colors ajuda a situar-nos entre el maremagnum d’etiquetes per a així poder localitzar la part que volem editar.

CSS3 Style Sheet

font: Jeffrey Zeldman

// Forma en la qual el formulari de contacte s’envia

  • echo’<p>’ has enviat el següent missatge a’;
  • echo $recipient;
  • echo’:<br/><em>
  •  echo stripslahes($_GET[‘sender_message’]);
  • echo ‘</em></p>’;

– Centra el teu contingut web emprant divs: que el contingut i el contenidor d’un lloc web comence en la cantonada superior esquerra del nostre navegador no pot arribar a irritar més a un usuari. Després de moments de confusió, el nostre instint visual es dirigirà al costat dret del monitor a la recerca de contingut Background, en aquest cas buit. La comoditat de l’usuari i l’adaptació als temps són fonamentals avui dia, per tant, tracta de partir d’un eix central en el navegador web i que els elements del Body aconseguisquen expandir-se cap als costats i cap avall. Posiciona el div del contenidor en el centre, però mai utilitzant <div align=”center”>. Açò provocarà que tot el text i imatges se centren i no és el que pretenem. Per a centrar únicament el contenidor del teu web utilitza el següent codi:

Centrar contingut en CSS3

font: Linux Screenshots

.contenedor {

position: absolute;

top:0px;

magin-left: auto;

margin-right: auto;

}

No tingues por a inspirar-te i aprendre d’experts i professionals. Ah, i per favor, maqueta en columnes: la maquetació de la premsa escrita pot ser el millor referent per la seua atracció sobre els lectors, així que intenta dissenyar el contingut utilitzant files i columnes per a situar el text i les i imatges del teu web. La cohesió, coherències i disposició ben executada d’informació ha de crear fluxos per a no produir rebots visuals en l’usuari que està visitant la teua pàgina. Dues o tres columnes podria ser un bon començament per a la maquetació de continguts. Tan sol has de disposar la informació que desitges en els emplaçaments triats.

Maquetació 4 columnes div

font: Serge Kij

<div id=”col1″>Contenido columna 1</div>

<div id=”col2″>Contenido columna 2</div>

<div id=”col3″>Contenido columna 1</div>

#col1 {float: left; width:20%;}

#col2 {float: left; width:60%;}

#col3 {float: left; width:20%;}

Des de juanjook.com m’esforce perquè tots els projectes online s’ajusten als estàndards de html i de estils css, s’adapten a les exigències de les aplicacions i els usuaris. La presentació professional i cohesionada de continguts utilitzant classes, id, divs u fulles d’estils en un document extern és més que una obligació en el treball diari amb el client. Elabora la teua pròpia fulla d’estils CSS i mostra-la de manera que altres professionals, a més dels navegadors, la puguen entendre.