martes, enero 24, 2012

CSS Inquebrantable

Hola, cumpliendo lo antes dicho aquí me encuentro escribiendo, gracias a que estoy de vacaciones en la espera de mi primer hija, ojala que ya nazca que me tiene con ansias.
En fin, el tema de hoy esta basado en crear una maquetación lo más estable posible para todos los navegadores. La suma de los mismo da la dimensión total real del objeto en navegadores estandar (Firefox, Chrome, Safari) con una cierta variación en IE6, o IE7+ variación no estandar, esto lo comentaremos en el uso de padding y margin.

Un objeto tiene Padding, Margen y Borde, así como ancho y alto, elementales para poder mantener todo en su lugar. Como se muestra en la siguiente imagen.

Fig1. Distribución de un objeto en CSS
Uso de Margen

Descripción: es el espacio que separa a un objeto de otro.
propiedad CSS: margin
Formas de Uso:
margin: arriba derecha abajo izquierda;
ejem: margin:5px 2px 3px 6px;

margin: arriba izquierda abajo. ejem: margin:3px 2px 5px; margen superior 3px, margen izquierdo 2px y margen inferior 5px.
margin: arribaabajo izqder; ejem: margin:5px 7px; Esto indica que el margin superior e inferior sera de 5px mientras que el izquierdo y derecho de 7px.

margin: todos; ejem; 5px; Indica que el margen en todos lados será de 5px; 
Además se puede manipular de manera independiente.
margin-left, margin-right, margin-top. margin-bottom. izquierdo, derecho, superior e inferior respectivamente.
Comportamiento: Se suma al Ancho ó Alto del objeto en todos los navegadores.

Notas. El margen es tomado doble por IE6 ó IE7+ con variacion no estandar, así que se debe tener mucho cuidado pues el margen es tomado doble, por lo cual existen varios metodos para contrarestar este comportamiento, en lo personal hago uso de las siguientes:

Suponiendo un margen izquierdo de 6px;

display:inline-block;
margin-left:6px;

En el ejemplo anterior, agrego un display:inline-block; indica el comportamiento del objeto, en su mayoría esto siempre funciona, pero si acaso falla existe el siguiente:


display:inline-block;
margin-left:6px;
_margin-left:3px;


Además de incluir el display: Se agrega el _margin-left. esto indica que solo en IE6 será leida dicha regla, así que ahí ajustamos para que se vea de la misma manera que en Firefox.


Uso de Padding

Descripcion: Es el espacio que existe entre el limite del objeto y donde inicia el contenido del mismo.
Propiedad CSS: padding
Formas de Uso:
margin: arriba derecha abajo izquierda;
ejem: margin:5px 2px 3px 6px;

padding: arriba izquierda abajo. ejem: padding:3px 2px 5px; margen superior 3px, margen izquierdo 2px y margen inferior 5px.
padding: arribaabajo izqder; ejem: padding:5px 7px; Esto indica que el margin superior e inferior sera de 5px mientras que el izquierdo y derecho de 7px.
padding: todos; ejem; 5px; Indica que el margen en todos lados será de 5px; 
Además se puede manipular de manera independiente.
padding-left, padding-right, padding-top. padding-bottom. izquierdo, derecho, superior e inferior respectivamente.

Comportamiento: Se suma en Ancho ó Alto en navegadores estandar (Firefox, Chrome y Safari, IE7+), y se Resta en IE6 y IE7+ variacion no estandar. 

Notas: El padding resulta ser un poco más estable, son objetos de bloque o de línea, no así con tablas, Expliquemos su uso en los diferentes navegadores. supongamos que necesitamos un div de 350 x 220 px, con 10px de padding en cada lado.


Para Navegadores Estandar:
width:330px;
height:200px;
display:inline-block;
padding:10px;


Para IE6 ó IE7+ variación no estandar:
width:330px;
_width:350px;
height:200px;
_height:220px;
display:inline-block;
padding:10px;


Uso de Bordes 

Descripción: Muestra una franja visible al rededor del objeto.   
Propiedad CCS: border
Formas de uso
border: ancho tipo color;
ejem: border:5px solid #FF0000;
El resultado es un borde de 5px con el estilo solido en color rojo.
A diferencia de los margenes y paddings; los bordes se definen solamente de dos formas: todos o uno especifico, así como sus propiedades por separado.
border-left: 5px solid #FF0000; borde izquierdo
border-right: 5px solid #FF0000; borde derecho
border-top: 5px solid #FF0000; borde superior.
border-bottom: 5px solid #FF0000: borde inferior.
border-top-style: solid; estilo del borde superior.
border-bottom-style: solid; estilo del borde inferior.
border-left-style:solid; estilo del borde izquierdo.
border-right-style:solid; estilo del borde derecho.
border-top-color: #FF0000; color del borde superior.
border-bottom-color: #FF0000; color del borde inferior.
border-left-color: #FF0000; color del borde izquierdo
border-right-color: #FF0000; color del borde derecho.
Los diferentes estilos de borde que son aceptados en todos los navegadores son:

  • solid
  • dotted
  • double
  • dashed
  • groove
  • ridge
  • inset
  • outset

Comportamiento: inestable con tablas pero muy estable en todos los navegadores en objetos de bloque como los divs.


Notas. Recuerda que el borde se suma al tamaño definido en width y height del objeto.


Si queremos que un objeto mida 750px por 580px, ancho alto respectivamente, y es necesario un padding izquierdo de 10px y un borde de 3px, además de un margen derecho de 2px, y padding general de 5px. Como se hará el CSS. Tomando en cuenta las notas anteriores esto se definiría así:


Para Navegadores estándar:
ancho=ancho total - padding izquierdo - padding derecho - borde izquierdo - borde derecho- margen izquierdo - margen derecho.
width=750px-10px - 5px -3px - 3px - 0px -2px;
width:727px;


Para IE6 ó IE7+ variación no estándar.
ancho= 750 - borde-izquierdo - borde - derecho - margen izquierdo - margen derecho.
width=750px - 3px - 3px - 0px - 2px;
width:742px;


Mientras que el alto estará de la siguiente manera para navegadores estandar:
alto= alto total - borde superior - borde inferior - margen superior - margen inferior - padding superior - padding inferior;
height=580px - 3px - 3px - 0px  - 0px - 5px - 5px;
height:564px;


En tanto que en IE6 ó IE7+ variación no estándar:
alto=alto total - alto total - borde superior - borde inferior - margen superior - margen inferior;
height=580px - 3px - 3px - 0px - 0px;
height:574px;


Una vez calculado el ancho y alto aremos el css general.


Navegadores estándar:
div.contenido { 
 width:727px; _width:742px;
 height:564px; _height_574px;
 display:inline-block;
 overflow:hidden;
 padding:5px; padding-left:10px;
 margin: 0px; margin-right:2px;
 border:3px solid #FF0000;
}
En esta ocasión el overflow: hidden; nos sirve para mantener el contenido dentro, y que si este excede el tamaño definido en ancho y alto no se muestra, es optimo para evitar desbordamientos.


Uso de Overflow
El overflow indica el comportamiento que tendrá el objeto contenedor respecto al contenido del mismo, si se fuerza y solo se muestra en un ancho y alto establecido, o si mostrará barra de desplazamiento, también ayuda a contener a objetos flotantes (aquellos con propiedad float). Los tipos de comportamiento son:


visible. El contenido se sale del contenido si este excede el tamaño, valor default.
hidden: El contenido solo se muestra dentro del contenedor, sin exceder el tamaño, también ayuda a contener a elementos flotantes.
scroll: Siempre se muestran las barras de desplazamiento.
auto: Muestra las barras según sea necesario; es decir si el contenido no se excede se muestra normal, si se excede en ancho se muestra la barra inferior. Y si se excede en alto se muestra la barra derecha de desplazamiento. Finalmente si se excede en ancho y alto se muestran ambas barras de desplazamiento.


Uso de float
La propiedad float permite, flotar elementos, hacia la derecha o hacia la izquierda o quizás eliminar un float que esta por herencia.
float: left;  /*Flota el elemento a la izquierda*/
float:right; /*flota el elemento a la derecha*/
float:none; /*Elimina el float*/


Nota: Esto puede ser útil cuando tenemos varios objetos seguidos uno de otro.
digamos que tenemos un espacio de 750px y queremos dos objetos seguidos uno de 400px y otro de 300px, con una separación de 50px. Esto lo podemos resolver de dos formas.



objeto uno


objeto dos


Forma 1.
div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:left; oveflow:hidden; display:inline-block; margin-left:50px; }


Forma 2

div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:right; oveflow:hidden; }



Ambas formas dan el mismo resultado, depende del acomodo que tenga el encargado de la maquetación, ahora veremos el clear, esté nos permite trabajar en casos más específicos combinando el float


Uso de clear
El clear como su traducción literal lo dice sirve para limpiar. Pero, ¿Qué limpia?. Limpia los objetos flotantes, supongamos que en el ejemplo anterior no importa que sobre los 50px, y queremos un objeto de 50px en la parte inferior junto con otro de 650px, Los objetos flotantes por si solos mientras que haya espacio tienden a colocar uno tras otro los objetos, solo hay salto de línea cuando ya no alcance el tamaño. Para resolver dicho problema usaremos una de las siguientes tres opciones que nos presenta el clear.
left. limpia el flotante en izquierda.
right. limpia el flotante en derecha
both. limpia el flotantes en ambos lados.
none. no limpia nada, esto en caso de eliminar la propiedad por herencia.


Entonces tendremos una estructura de la siguiente manera:




objeto uno


objeto dos


objeto dos


objeto dos







div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:left; oveflow:hidden; }
div.contenedor .dos { width:50px; float:left; oveflow:hidden; clear:left; }
div.contenedor .dos { width:700px; float:left; oveflow:hidden; }




Uso de display
El display indica como se comporta el objeto a la hora de mostrarse. Los distintos valores son:

  • inline
  • block
  • list-item
  • run-in
  • inline-block
  • table
  • inline-table
  • table-row-group
  • table-header-group
  • table-footer-group
  • table-row
  • table-column-group
  • table-column
  • table-cell
  • table-caption
  • none
  • inherit












Sin embargo las más usadas son:
none. no se muestra el objeto.
inline. para listas
block. para que objetos que se comportan como objeto de línea, se comporten como un blouqe, tales como las a, p, span, label, etc.
inline-bloque. Objetos que tienen un comportamiento de bloque, en listas, además sirve para igualar el margen en todos los navegadores.


Uso de position
La propiedad position ayuda a establecer el enfoque del objeto, como sera su posición, por default estatica. Estas son las diferentes posiciones.
Fig2. Posiciones. Elemento tomado de www.cssblog.es. click a imagen para mayor referencia.
Bien tomando en cuenta esta tabla, debo mencionar que los objetos que están en relative sirven de base para un objeto que esta en absolute. Además que las posiciones deben establecerse con las propiedades left, top, botttom o right.





hey




Veamos que pasa con estas dos versiones de CSS
Forma 1
div.contenedor { width:750px; height:350px;  }
div.contenedor .absoluto { width:50px; height:50px; background:red; color:#FFF; line-height:50px; font-size:14px; font-family:Arial, Verdana, "Times New Roman", font-weight:bold; position:absolute: left:10px; top:10px;  }


Forma 2

Forma 1
div.contenedor { width:750px; height:350px; position:relative;  }
div.contenedor .absoluto { width:50px; height:50px; background:red; color:#FFF; line-height:50px; font-size:14px; font-family:Arial, Verdana, "Times New Roman", font-weight:bold; position:absolute: left:10px; top:10px;  }



Como veras el comportamiento deseado se encuentra en la forma dos, y es la correcta.


Notas Finales. Recuerda todos estos tips, son muy valiosos y si tienes dudas, pregunta y con gusto te respondo, no olvides agregarme.


Por ultimo estas propiedades utiles.
font-size. tamaño de la fuente
font-family. estilo de la fuente (verdana, arial u otra)
font-weight. Estable si estará negrita (wight), normal u 700, 300 la fuente en grosor.
line-height. El tamaño del interlineado.
text-align. la alineación del contenido. left, right, center o justify.
background. relleno del objeto
background: color imagen repetir-imagen posición-horizontal posición-vertical;
background: #FFF img(../img/fondo.png) no-repeat left top;
background-position. posición del fondo si es imagen
background-color. color de fondo
background-image. fondo de imagen
background-repeat. comportamiento al repetir imagen


Si deseas alinear un objeto te recomiendo esta forma.



hola mundo



div.contenedor { width:1200px; overflow:hidden; text-align:center; font-size:12px; font-family:Arial, Verdana, Tahoma; }
div.contenedor centrar { margin:0px auto; width:960px; height:800px; background:red; }


Saludos.


Sigueme: @dzipiri
o en http://www.facebook.com/JulianTunKu
http://www.linkedin.com/in/juliantun

Gracias por su lectura, agradecere tu comentario, atte The Dzip.

domingo, enero 15, 2012

Herramientas indispensables para el desarrollo Web

Hola Amigos, que puedo decir después de tanto tiempo ausente. Les contaré que llevo 2 años en desarrollo Web basado en HTML, JS y CSS, he adquirido grandes conocimientos los cuales aprovechando estoy de vacaciones me gustaría compartir.

Herramientas generales.

Color Cop

Esta herramienta es muy útil para selección de colores, ya que es una pequeña ventana sobrepuesta, solo basta con arrastrar la pipeta para seleccionar el color de cualquier ventana y automaticamente lo copiara, la desventaja es que es solo para Windows, la recomiendo ya que agiliza esta tarea, que generalmente se hacia con ColorZilla para Firefox.

Notepad++

El Id para desarrollo queda a gusto de cada quien, sin embargo uno de mis favoritos es Notepad++, Fácil de instalar, ligero y rápido, colorea sintaxis de HTML, JS, CSS y más, lo recomiendo altamente. 

Herramientas de desarrollo web para Firefox

Firebug

Esta herramienta es muy completa para desarrolladores, muy completa, con inspeccionador de CSS, JS, HTML, RED entre otros. La recomiendo pues ayuda a verificar la maquetación. insertar css, así como JS.

Measure It

Esta funje como regla, ayuda a medir, para alinear objetos es útil, sin embargo, en lo particular casi no lo utilizo, pero lo comento por si alguien lo necesita.


Screen Capture Elite

Ayuda a Capturar pantalla, muy útil para esos pantallazos que aveces se necesitan en juntas, además de que lo acabo de descubir pues yo usaba Sreen Grab, sin embargo con las nuevas versiones de Firefox este dejo de funcionar.

Bien estas son las que considero más utiles para lo que desarrollo hasta el momento, si tienes otra no dudes en comentar y recomendar, hagamos una comunidad de conocimientos.


Herramientas de desarrollo Web para Internet Explorer

Internet Explorer trae herramientas para desarrolladores Web ya incluidas, sin embargo no son tan buenas como el Firebug, basta con presionar F12 para que se muestre la barra de desarrollo. tiene explorador DOM, manipulación de HTML, CSS y JS, sin embargo he aquí algunas herramientas que me han servido.


CompanionJS

Esta herramienta indica donde hay un error en JS, en lo particular me gusta utilizar y probar los scripts en IE, ya que la conbinación de IE (suceptible a errores de JS) y CompanionJs (buena en indicar el error línea y posible falla) hacen mejor el ambiente de pruebas.

DebugBar

Complementa la selección del explorador DOM de IE.

IETester

Ayuda a dar una idea del renderizado de diversas versiones de IE.

Notas.
-Mi recomendación para verificar estilos y maquetación que se genera al vuelo con JavaScript o JQuery, es realizar los cambios requeridos hasta el punto que se desea revisar, luego activar la barra de IE (F12).
-Recuerda que tanto IE Tester como las diversar combinaciones de Renderizar con la barra de IE no es exacto a como se vería el render en la versión original.
-Revisa todas las combinaciones de renderización IE8 IE8, IE8 no estandar.


No comento sobre más herramientas ya que es muy probable que si funciona en IE y Firefox funciona en todo lo demás, pero también hay que revisar en chrome y si se ve bien el es seguro que estará bien en Safari y Opera.


El siguiente tema será. Creando CSS inquebrantable.


Y te recuerdo cometa y comparte, 


Sigueme: @dzipiri
o en http://www.facebook.com/JulianTunKu
http://www.linkedin.com/in/juliantun


Gracias por su lectura, agradecere tu comentario, atte The Dzip.