Errores en maquetacionhttp://designersfriend.co.uk/ ejemplo de la maquetacin limpia y estructurada1. No usar muchos div`s y los classes que no sirven

#navbar {height: 20px; }

#navbar div {height: 20px;}

ul.menu .current_page_item a, ul.menu .current-menu-item a {color: #669999 !important;}

ul.menu {list-style: none;}

ul.menu li {background: #FFFFFF;}

ul.menu li.first {border-left: none;}

ul.menu li a {color: #999999;}

#navbar {height: 20px; }

ul.active a {color: #669999 !important;}

#navbar ul {list-style: none;}

#navbar li {background: #FFFFFF;}

#navbar ul li:first-child {border-left: none;}

#navbar li a {color: #999999; }

p {height: 20px; }

p.big {height: 20px;}

p.color-rojo {height: 20px;}

p {height: 20px; }

p>span {height: 20px;}

P+P {height: 20px;}P+P>span {height: 20px;}

2. No usar styles en html

- no recomendado - recomendado

- no recomendado - recomendado y height se pone para el vecino de arriba como margin-bottom o para el vecino de abajo como margin-top!

3. Usar los nombres reales

- no recomendado - recomendado - recomendado - recomendado4. Usar diferentes clases para los grupos de efectos

5. Reglas generales:

1. Definir el estilo de los textos generales tal prrafos como ttulos y ya no usarlo en frontend.css2. Lo ideal es no tener pereza y verificar que css no tenga lneas o bloques de estilos que se repiten(Hay que separar los ttulos y no crear los estilos generales sino que especiales).3. Los estilos: top , left, z-index se usan junto con position(relative, absolute,). Si ningn bloque tiene el estilo position un elemento se posiciona empezando desde 0 0 de la pantalla(funciona diferente con el grid_960 dependiendo de la versin).4. Texto como span, strong, a no pueden tener los estilos como height, margin o cualquier otro que tiene que ver con el bloque. Para poder usar estos estilos tenemos que aplicar el estilo del bloque al texto usando display:block, o podemos reservar ambas caractersticas con display:inline-block. De la misma manera podemos convertir cualquier bloque al text-block usando display:inline.5. Para los mens horizontales podemos usar la opcin float:left(sin poder centrar los elementos dentro de la lista ul, ol ) o display:inline-block(con esa opcin). Ojo. Usando la segunda opcin vamos a tener un margin entre los elementos de la lista cuales podemos quitar (si es necesario) con margin negativo.6. Los botones o links con imagines del fondo mejor centrar verticalmente con line-height, as se respetan los tamaos en cualquier browser. Con los inputs el asunto es totalmente diferente. Los inputs requieren padding y no aceptan line-height.7. Tambin este mismo line-height mejor usar en cada tipo de texto para evitar los problemas en diferentes browsers8. Los elementos first-child, last-child, nth-child(3) se aplica para la lista(table,ul,ol). Tienen que tener en cuenta que cualquier elemento en la lista es un elemento de la lista:

En este caso div es el ltimo elemento en la lista, pero en:

O

Esta jerarqua no se aplicara

9. Les sugiero usar esta pgina http://cssfontstack.com/ para buscar los fuentes predeterminados, porque por ejemplo si queremos usar futura y solo usamos font-family: Futura eso funcionara no en todos sistemas, por ejemplo en Windows XP u otros ms antiguos no hay soporte de este Font por eso hay que usar el Font parecido(eso se puede ignorar si usamos la opcin de @font-face) font-family: Futura, "Trebuchet MS", Arial, sans-serif; - as seria mas correcto.

Esto es un ejemlo del uso de @font-face:@font-face {font-family: 'HelveticaNeueThn'; src: url('../fonts/HelveticaThin/HelveticaNeueThn.eot') format('eot');src: url('../fonts/HelveticaThin/HelveticaNeueThn.eot?#iefix') format('embedded-opentype'),url('../fonts/HelveticaThin/HelveticaNeueThn.woff') format('woff'), url('../fonts/HelveticaThin/HelveticaNeueThn.ttf') format("truetype"), url('../fonts/HelveticaThin/HelveticaNeueThn.svg#HelveticaNeueThn') format('svg');font-weight: normal; font-style: normal;}La carpeta contenedora de los fonts debe tener un .htaccess con este contenido:AddType font/ttf .ttfAddType application/vnd.ms-fontobject .eotAddType font/otf .otfAddType application/x-font-woff .woffAddType application/vnd.ms-fontobject .svgCon este cdigo nosotros declaramos el tipo del archivo que llamamos con @font-face. Si no tenemos este archivo suele pasar que salen mensajes de error en el console. Lo ideal usar google Font porque si usamos un convertidor a veces hay errores de conversin por eso no se muestra buen el fuente.

10. Si queremos centrar la informacin(texto o imagen) verticalmente el bloque que tiene este informacin tiene que tener display:table-cell; y vertical-align:middle; Ojo!!! Si este bloque tiene position absolute o fixed o float vertical-align deja de funcionar, en este caso tendramos que usar otro bloque adicional dentro del bloque. 11. Con el script scrollTo se recomienda siempre indicar axis. Si no lo indicamos en los dispositivos mobiles y tablets el movimiento no es suave. Por ejemlo:$.scrollTo('#home', 800, {axis: 'y'});Con este script si tienen las imagines grandes no es recomendable guardarlas con el efecto progressive, porque empieza trabar el script.

12. Para IE hay que usar un truco para que pueda mostrar placeholder:

// Placeholder fix for IE$('.lt-ie10 [placeholder]').focus(function() {var i = $(this);if(i.val() == i.attr('placeholder')) { i.val('').removeClass('placeholder'); if(i.hasClass('password')) {i.removeClass('password');this.type='password'; } }}).blur(function() {var i = $(this); if(i.val() == '' || i.val() == i.attr('placeholder')) { if(this.type=='password') {i.addClass('password');this.type='text'; } i.addClass('placeholder').val(i.attr('placeholder'));}}).blur().parents('form').submit(function() {//if($(this).validationEngine('validate')) { // If using validationEngine $(this).find('[placeholder]').each(function() {var i = $(this);if(i.val() == i.attr('placeholder')) i.val(''); i.removeClass('placeholder');

})//}});

13. Para IE se puede usar los siuientes hacks:Hakcs es un cdigo especial para css. Que se entiende solo con el browser especifico y que se ignora con otros browsers.

Hacks para IE:\0/ - versin 8-10,@media all and (min-width:0) { \0/ } - versin 9-10,// - versin 7,

#table{border-collapse: separate!important\0/;}

O se puede poner el cdigo

Mozilla hack:@-moz-document url-prefix() {#table{border-collapse: separate!important;}}

6. Grid System 960:Grid es un sistema de bloques hechos con css muchas veces no se usa porque el diseo no tiene margines exactos de GridLos comandos son: grid_x el tamao del bloque con margines, posicionamiento relativo, pegado a la izquierda con la vista de texto alpha_x - margin-left: 0; omega_x - margin-right: 0; prefix_x - padding-left suffix_x - padding-right push_x left positivo pull_x left negativo clear alineacin de los bloques.Con este sistema si tenemos un diseo ideal nunca usaramos los estilos de margines paddings y width, con eso ahorraramos el tiempo de maquetacin y bajaramos el peso del archivo css Pero en la realidad cruel se usa solo en 40% o menos

Se puede usar el sistema dinmica con % o estatica con px. Tambin existe el sitema grid responsive.La lgica es la misma solo que este sistema usa solo % y tiene diferentes mdulos reservados para diferentes dimensiones de la pantalla. El paso es de 5%@media screen {} - css-para descktop@media screen and (min-width: 768px) and (max-width: 1024px) - css-para tablets@media screen and (max-width: 767px) {} - css-para descktop

Yo aparte uso la opcin @media screen and (max-width: 480px) {} para los telfonos antiguos

En el proceso de maquetacin para construir los bloques se usa el mismo sistema (solo podran variar un poco los nombres), lo nico que se aadi son: hide-on-mobile hide-on-desktop hide-on-mobileSe usan para esconder los bloques dependiendo de la resolucin.

Si queremos hacer las fotos dinmicas de tamao cada foto tiene que tener max-width y max-height 100% y usar el script jquery.lazyLoader.js para cargar las fotos diferentes dependiendo de la resolucin de la pantalla. Recomiendo usar mi versin modificada y mejorada un poco, el archivo est en la carpeta d:\xampp\htdocs\gp360\assets\js\Las fotos se manejan con las etiquetas data-img-x donde x es la dimensin de la pantalla, por ejemplo:

$data = array('src' => 'assets/img/styles/nothing.png','alt' => $this->lang->line('design') . ' ' . $this->lang->line('web'),'class'=> 'lazy','data-img-0'=> base_url() . 'assets/img/styles/img1-small.jpg','data-img-481'=> base_url() . 'assets/img/styles/img1-big.jpg',);echo anchor(base_url(),img($data));

6. Select estilizado:Jquery:// select element styling$('.styled').each(function(){var title = $(this).attr('title');if( $('option:selected', this).val() != '' ) title = $('option:selected',this).text();$(this).css({'z-index':10,'opacity':0,'-khtml-appearance':'none'}).after('' + title + '').change(function(){val = $('option:selected',this).text();$(this).next().text(val);})});

Html:

Special FeaturesCable TVChildren's MenuDinnerInternet accessLuchTV with Sky

Css:/* setting the width and height of the SELECT element to match the replacing graphics */select.styled {position: relative;z-index: 10;height: 25px;line-height: 25px;cursor: pointer;}

/* dynamically created SPAN, placed below the SELECT */span.select {position: absolute;bottom: 5px;left: 0px;font-size: 12px;float: left;min-width: 248px;height: 25px;line-height: 25px;text-indent: 5px;background: #fff url(../img/estilos/select2.png) 230px 10px no-repeat;color: #85a911;border: 1px solid #abadb3;cursor: pointer;z-index: 1;}

Para los Radios:http://www.egstudio.biz/custom-radio-buttons-with-jquery/

Consejos para maquetar emails:http://www.scuain.com/blog/?p=35http://www.josebaumbelina.com/20091121/consejos-evitar-problemas-maquetacion-emails/