Descargar de aquí los archivos para la práctica
https://www.dropbox.com/sh/lglfmclj76zgo85/7gBMpWOl-T
lunes, 18 de noviembre de 2013
martes, 8 de octubre de 2013
Clases disponibles para la maquetación CSS con 960 Grid System
Las clases CSS que define este framework CSS son bastante sencillas de entender y de utilizar en nuestros diseños. Además, dado que son realmente pocas, no tendremos problemas en dominarlas todas y utilizarlas con soltura. En este artículo queremos ofrecer unas explicaciones detalladas sobre las distintas clases que incorpora 960 Grid System, para que podamos utilizar el framework sin problemas y podamos entender también los próximos artículos, en los que veremos un ejemplo de diseño.
Class container_xx:
Esta clase sirve para definir un contenedor, donde colocaremos luego todos los contenidos de nuestro diseño. Existen dos tipos de contenedores, de 12 y 16 columnas, que se forman con las clases container_12 y container_16.
Class grid_xx:
La clase grid_xx define un elemento del diseño que será colocado en un contenedor y ajustado a la rejilla que forma 960 Grid System. El valor "xx", de grid_xx, expresa el tamaño de la rejilla que se está definiendo. A un número mayor, más anchura se dedicará a este elemento. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas. Por ejemplo, con grid_1 se obtendrá un elemento con una anchura igual a un doceavo del espacio total de la página, con grid_8, obtendríamos un elemento de anchura igual a 8 doceavos del espacio y así.. En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.
Estas son las clases principales.
Ahora veamos otras clases que sin lugar a dudas también nos vendrán bien y tendremos que saber utilizar para implementar diseños medianamente avanzados con el framework CSS.
Class alpha y class omega:
Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los márgenes de los distintos elementos anidados. Como deberíamos saber ya, las clases grid_xx tienen un margen de 10 píxeles a la izquierda y la derecha. Por ejemplo grid_12 que utiliza todo el ancho de la página, en realidad tiene 940 píxeles, que es el resultado de a 960 restarle 10 píxeles de margen a la izquierda y otros 10 a la derecha. Si metemos unos grid_xx dentro de otros, los márgenes de los grid_xx anidados van incrementándose y esto nos haría que los espacios disponibles no fueran suficientes para contener todos los elementos. Con las clases alpha y omega lo podremos solucionar. Quizás se lo logre explicar con una imagen:
En la imagen anterior vemos 4 capas, a las que les hemos puesto un color de fondo para saber dónde están. La primera, arriba del todo con fondo rosa es la cabecera, que no nos interesa mucho para la explicación, pero nos viene bien verla para hacernos una idea de los espacios. Luego tenemos la Capa1, con color azul, que contiene a la Capa2, con color verde, que a su vez contiene a la Capa3, con color de fondo gris. Quizás en mi maquetación desearía que la Capa3 estuviera alineada en la vertical con la capa de cabecera, pero realmente debido a los márgenes de las capas 2 y 3, se deja ver un espacio vacío que tiene los fondos de las capas que se están por debajo de la Capa 3.
Estos espacios vacíos seguramente no nos molesten sólo estéticamente, sino que podría ocurrir que las distintas grid que hemos colocado en el diseño no tengan el espacio suficiente para posicionarse correctamente. Al perder 10 + 10 píxeles por esos márgenes, puede que no quepan todas las cajas colocadas en el diseño con las clases grid_xx.
En fin, que para solucionar este problema, se deben colocar las clases alpha y omega. La clase alpha sirve para eliminar el margen de 10 píxeles a la izquierda y la clase omega para eliminar el margen de 10 píxel de la derecha. Estas dos clases debemos utilizarlas siempre que tengamos un grid_xx que tenga a su vez otros grid_xx anidados. El primer grid_xx hijo debería tener también la clase alpha y el que coloquemos como último debe tener también la clase omega.
Class prefix_xx:
Esta clase sirve para anclar una grid_xx dejando un espacio vacío a la izquierda. Por ejemplo, prefix_1 haría que la grid tuviera el espacio libre de la anchura de 1 columna a la izquierda. Esto nos sirve en el momento que queramos dejar un espacio antes de meter una capa con grid_xx que no queremos que empiece a la izquierda del todo. Veamos esta imagen:
Observamos el espacio vacío a la izquierda de la capa que aparece abajo con fondo blanco y borde gris. Ese espacio vacío lo hemos conseguido metiendo la clase prefix_5 a la capa. Ahora bien, este espacio vacío también se cuenta como espacio de la capa, lo que veremos mejor si colocamos un color de fondo a la capa sobre la que hemos aplicado el prefix_5, como aparece en esta imagen:
Class suffix_xx:
De una manera similar a prefix_xx, la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. La capa tendrá una anchura definida con la clase grid_xx y luego con suffix_xx podremos hacer que tenga espacio adicional vacío a la derecha. Lo veremos mejor con una imagen.
En la imagen anterior podemos ver como el contenido de la capa de fondo rosa se coloca dejando un espacio vacío a la derecha. Al definir la capa hemos colocado una clase grid_8, para una anchura de 8 columnas y luego una clase suffix_1, para un espacio en blanco a la derecha de 1 columna. En la práctica, el espacio total que estoy ocupando es 9 columnas (8 por definir grid_8 mas 1 por definir suffix_1), luego la siguiente capa, donde he puesto la palabra "buscador" tal como se ve en la imagen, tendrá una anchura de 3 columnas. Esto para mi diseño de container_12, que estará ocupando la anchura completa, sumando el grid_8 + suffix 1 de la primera capa, mas el grid_3 de la segunda.
Otra aplicación de los conceptos
Una vez más, contruiremos la estructura por partes, comenzando por la cabecera. Se insiste en que este ejemplo simplemente nos sirve para aprender el manejo de las clases del framework, incorporando ejemplos de uso de todos los tipos de clases disponibles, aunque a veces no tenga mucho sentido haber hecho las cosas tal cual aparecen.
Se le colocan en todas las capas del diseño un identificador (atributo id), para luego poder aplicarle estilos con CSS.
Para que se vea la estructura de contenidos que vamos a tener, muestro una imagen donde está la maquetación de la página, donde cada capa la hemos colocado con un color distinto y donde en el texto de la capa hemos colocado el identificador (atributo id) de esa capa.
Como se debe hacer con el framework 960 Grid System, todo el contenido del sitio se tiene que colocar dentro de una capa con clase container_xx. En nuestro diseño utilizaremos el formato de 12 columnas, por lo que utilizaremos la class CSS container_12.
<div class="container_12">
...
</div>
Colocamos ahora los contenidos en el contenedor, empezando por la cabecera de la página, que tiene dos capas, una con un texto a la izquierda y otra con otro texto a la derecha. La capa de la izquierda (id=cabecera) tiene una anchura de 8 columnas y un espacio vacío a la derecha de 1 columna. Para definir la anchura colocamos la class CSS grid_8 y para definir el espacio en blanco a la derecha, de una columna de anchura, se coloca la clase suffix_1.
<div id="cabecera" class="grid_8 suffix_1">
...
</div>
<div id="buscador" class="grid_3">
...
</div>
A continuación de la cabecera, como hemos visto en el código anterior hemos colocado el DIV con id "buscador", que tiene una anchura de tres columnas.
En total, en esta fila donde aparece la cabecera y el buscador, hemos utilizado 8 espacios en la cabecera por grid_8 y 1 de espacio en vacío a la derecha de la cabecera con suffix_1. Luego hemos colocado el buscador, ocupando un espacio de 3 columnas. En total 8 + 1 + 3 = 12, que es el total de espacio que tenemos disponible en un container_12.
Para continuar vamos a colocar un DIV con la class "clear". Esto se tiene que hacer justo después de cada una de las filas del diseño y la razón de ello es que las clases grid_xx tienen un float left y con este clear se consigue romper este estilo, de modo que la siguiente fila comience desde la izquierda.
<div class="clear"></div>
La siguiente parte del diseño tenemos dos columnas principales. En la primera columna tenemos a su vez otras tres columnas anidadas. Esto lo hacemos así a propósito para poner en marcha las clases alpha y omega explicadas en el artículo anterior.
Como habíamos explicado, para gestionar los márgenes de las distintas capas grid_xx, cuando están anidadas como en este caso, tenemos que poner la clase alpha en la primera capa anidada y la clase omega en la última capa anidada.
Así pues, tendremos una capa con id "izq", con espacio de 9 columnas y dentro de ésta, otras tres capas anidadas con espacios de 4, 3 y 2 columnas, donde tendremos que utilizar las clases omega y alpha comentadas antes. Tendremos que colocar después de estas tres columnas anidadas un DIV con class="clear", para que podamos seguir metiendo contenidos en la dentro de la capa id "izq", que aparezcan después de las tres columnas anidadas.
<div class="grid_9" id="izq">
<div class="grid_4 alpha" id="izq1">
...
</div>
<div class="grid_3" id="izq2">
...
</div>
<div class="grid_2 omega" id="izq3">
...
</div>
<div class="clear"></div>
...
</div>
<div class="grid_3" id="der">
...
</div>
<div class="clear"></div>
Después de la capa de 9 columnas de anchura con id "izq", hemos colocado para completar el espacio una capa lateral de anchura de 3 columnas. Entre todas las capas de esta fila tenemos pues, una de 9 columnas a la izquierda y otra de 3 columnas a la derecha, que hace un total de 12 columnas de anchura.
Como se ha visto en el anterior código, después de esta fila hemos colocado otro DIV con class="clear", para poder comenzar la siguiente columna desde el principio.
Para acabar tenemos el pie de página. El pie lo hemos hecho con una única capa de 7 columnas de anchura, con la particularidad que hemos dejado un espacio vacío a la izquierda de 5 columnas, que se consigue con la clase prefix_5. En total tenemos 7 columnas de espacio + 5 columnas vacías = 12 columnas del container_12.
Esto se consigue con el siguiente código:
<div class="prefix_5 grid_7" id="pie">
pie
</div>
Acabamos con un nuevo DIV class="clear", para colocar antes del cierre del cuerpo de la página.
Para que se vea más fácilmente el esquema creado para hacer la estructura de filas y columnas de este ejemplo, pongo a continuación el código completo del cuerpo de esta página:
<div class="container_12">
<div id="cabecera" class="grid_8 suffix_1">
<p>Cabecera</p>
</div>
<div id="buscador" class="grid_3">
<p>Buscador</p>
</div>
<div class="clear"></div>
<div class="grid_9" id="izq">
<div class="grid_4 alpha" id="izq1">
<p>izq1</p>
</div>
<div class="grid_3" id="izq2">
<p>izq2</p>
</div>
<div class="grid_2 omega" id="izq3">
<p>izq3</p>
</div>
<div class="clear"></div>
<p>
Contenido de la capa izq, que aparecerá debajo de las 3 columnas anidadas.
</p>
</div>
<div class="grid_3" id="der">
<p>der</p>
</div>
<div class="clear"></div>
<div class="prefix_5 grid_7" id="pie">
<p>pie</p>
</div>
<div class="clear"></div>
</div>
Para conseguir los colores de fondo y los bordes en las capas lo hemos hecho aplicando estilos CSS a través de los identificadores (atributo id) configurados en las distintas capas y aplicando estilos a la etiqueta P, como se puede ver a continuación.
<style type="text/css">
p{
border: 1px solid #999;
padding: 5px;
margin: 0px;
}
#cabecera{
background-color: #ffcccc;
}
#buscador{
background-color: #ccffcc;
}
#izq{
background-color: #e0e0ff;
}
#izq1{
background-color: #ccccff;
}
#izq2{
background-color: #9999ff;
}
#izq3{
background-color: #6666ff;
}
#der{
background-color: #dedede;
}
#pie{
background-color: #ff8800;
}
</style>
Con esto ya hemos visto un primer ejemplo completo de maquetación CSS a través del framework 960 Grid System.
Class container_xx:
Esta clase sirve para definir un contenedor, donde colocaremos luego todos los contenidos de nuestro diseño. Existen dos tipos de contenedores, de 12 y 16 columnas, que se forman con las clases container_12 y container_16.
Class grid_xx:
La clase grid_xx define un elemento del diseño que será colocado en un contenedor y ajustado a la rejilla que forma 960 Grid System. El valor "xx", de grid_xx, expresa el tamaño de la rejilla que se está definiendo. A un número mayor, más anchura se dedicará a este elemento. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas. Por ejemplo, con grid_1 se obtendrá un elemento con una anchura igual a un doceavo del espacio total de la página, con grid_8, obtendríamos un elemento de anchura igual a 8 doceavos del espacio y así.. En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.
Estas son las clases principales.
Ahora veamos otras clases que sin lugar a dudas también nos vendrán bien y tendremos que saber utilizar para implementar diseños medianamente avanzados con el framework CSS.
Class alpha y class omega:
Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los márgenes de los distintos elementos anidados. Como deberíamos saber ya, las clases grid_xx tienen un margen de 10 píxeles a la izquierda y la derecha. Por ejemplo grid_12 que utiliza todo el ancho de la página, en realidad tiene 940 píxeles, que es el resultado de a 960 restarle 10 píxeles de margen a la izquierda y otros 10 a la derecha. Si metemos unos grid_xx dentro de otros, los márgenes de los grid_xx anidados van incrementándose y esto nos haría que los espacios disponibles no fueran suficientes para contener todos los elementos. Con las clases alpha y omega lo podremos solucionar. Quizás se lo logre explicar con una imagen:
En la imagen anterior vemos 4 capas, a las que les hemos puesto un color de fondo para saber dónde están. La primera, arriba del todo con fondo rosa es la cabecera, que no nos interesa mucho para la explicación, pero nos viene bien verla para hacernos una idea de los espacios. Luego tenemos la Capa1, con color azul, que contiene a la Capa2, con color verde, que a su vez contiene a la Capa3, con color de fondo gris. Quizás en mi maquetación desearía que la Capa3 estuviera alineada en la vertical con la capa de cabecera, pero realmente debido a los márgenes de las capas 2 y 3, se deja ver un espacio vacío que tiene los fondos de las capas que se están por debajo de la Capa 3.
Estos espacios vacíos seguramente no nos molesten sólo estéticamente, sino que podría ocurrir que las distintas grid que hemos colocado en el diseño no tengan el espacio suficiente para posicionarse correctamente. Al perder 10 + 10 píxeles por esos márgenes, puede que no quepan todas las cajas colocadas en el diseño con las clases grid_xx.
En fin, que para solucionar este problema, se deben colocar las clases alpha y omega. La clase alpha sirve para eliminar el margen de 10 píxeles a la izquierda y la clase omega para eliminar el margen de 10 píxel de la derecha. Estas dos clases debemos utilizarlas siempre que tengamos un grid_xx que tenga a su vez otros grid_xx anidados. El primer grid_xx hijo debería tener también la clase alpha y el que coloquemos como último debe tener también la clase omega.
Class prefix_xx:
Esta clase sirve para anclar una grid_xx dejando un espacio vacío a la izquierda. Por ejemplo, prefix_1 haría que la grid tuviera el espacio libre de la anchura de 1 columna a la izquierda. Esto nos sirve en el momento que queramos dejar un espacio antes de meter una capa con grid_xx que no queremos que empiece a la izquierda del todo. Veamos esta imagen:
Observamos el espacio vacío a la izquierda de la capa que aparece abajo con fondo blanco y borde gris. Ese espacio vacío lo hemos conseguido metiendo la clase prefix_5 a la capa. Ahora bien, este espacio vacío también se cuenta como espacio de la capa, lo que veremos mejor si colocamos un color de fondo a la capa sobre la que hemos aplicado el prefix_5, como aparece en esta imagen:
Class suffix_xx:
De una manera similar a prefix_xx, la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. La capa tendrá una anchura definida con la clase grid_xx y luego con suffix_xx podremos hacer que tenga espacio adicional vacío a la derecha. Lo veremos mejor con una imagen.
En la imagen anterior podemos ver como el contenido de la capa de fondo rosa se coloca dejando un espacio vacío a la derecha. Al definir la capa hemos colocado una clase grid_8, para una anchura de 8 columnas y luego una clase suffix_1, para un espacio en blanco a la derecha de 1 columna. En la práctica, el espacio total que estoy ocupando es 9 columnas (8 por definir grid_8 mas 1 por definir suffix_1), luego la siguiente capa, donde he puesto la palabra "buscador" tal como se ve en la imagen, tendrá una anchura de 3 columnas. Esto para mi diseño de container_12, que estará ocupando la anchura completa, sumando el grid_8 + suffix 1 de la primera capa, mas el grid_3 de la segunda.
Otra aplicación de los conceptos
Una vez más, contruiremos la estructura por partes, comenzando por la cabecera. Se insiste en que este ejemplo simplemente nos sirve para aprender el manejo de las clases del framework, incorporando ejemplos de uso de todos los tipos de clases disponibles, aunque a veces no tenga mucho sentido haber hecho las cosas tal cual aparecen.
Se le colocan en todas las capas del diseño un identificador (atributo id), para luego poder aplicarle estilos con CSS.
Para que se vea la estructura de contenidos que vamos a tener, muestro una imagen donde está la maquetación de la página, donde cada capa la hemos colocado con un color distinto y donde en el texto de la capa hemos colocado el identificador (atributo id) de esa capa.
Como se debe hacer con el framework 960 Grid System, todo el contenido del sitio se tiene que colocar dentro de una capa con clase container_xx. En nuestro diseño utilizaremos el formato de 12 columnas, por lo que utilizaremos la class CSS container_12.
<div class="container_12">
...
</div>
Colocamos ahora los contenidos en el contenedor, empezando por la cabecera de la página, que tiene dos capas, una con un texto a la izquierda y otra con otro texto a la derecha. La capa de la izquierda (id=cabecera) tiene una anchura de 8 columnas y un espacio vacío a la derecha de 1 columna. Para definir la anchura colocamos la class CSS grid_8 y para definir el espacio en blanco a la derecha, de una columna de anchura, se coloca la clase suffix_1.
<div id="cabecera" class="grid_8 suffix_1">
...
</div>
<div id="buscador" class="grid_3">
...
</div>
A continuación de la cabecera, como hemos visto en el código anterior hemos colocado el DIV con id "buscador", que tiene una anchura de tres columnas.
En total, en esta fila donde aparece la cabecera y el buscador, hemos utilizado 8 espacios en la cabecera por grid_8 y 1 de espacio en vacío a la derecha de la cabecera con suffix_1. Luego hemos colocado el buscador, ocupando un espacio de 3 columnas. En total 8 + 1 + 3 = 12, que es el total de espacio que tenemos disponible en un container_12.
Para continuar vamos a colocar un DIV con la class "clear". Esto se tiene que hacer justo después de cada una de las filas del diseño y la razón de ello es que las clases grid_xx tienen un float left y con este clear se consigue romper este estilo, de modo que la siguiente fila comience desde la izquierda.
<div class="clear"></div>
La siguiente parte del diseño tenemos dos columnas principales. En la primera columna tenemos a su vez otras tres columnas anidadas. Esto lo hacemos así a propósito para poner en marcha las clases alpha y omega explicadas en el artículo anterior.
Como habíamos explicado, para gestionar los márgenes de las distintas capas grid_xx, cuando están anidadas como en este caso, tenemos que poner la clase alpha en la primera capa anidada y la clase omega en la última capa anidada.
Así pues, tendremos una capa con id "izq", con espacio de 9 columnas y dentro de ésta, otras tres capas anidadas con espacios de 4, 3 y 2 columnas, donde tendremos que utilizar las clases omega y alpha comentadas antes. Tendremos que colocar después de estas tres columnas anidadas un DIV con class="clear", para que podamos seguir metiendo contenidos en la dentro de la capa id "izq", que aparezcan después de las tres columnas anidadas.
<div class="grid_9" id="izq">
<div class="grid_4 alpha" id="izq1">
...
</div>
<div class="grid_3" id="izq2">
...
</div>
<div class="grid_2 omega" id="izq3">
...
</div>
<div class="clear"></div>
...
</div>
<div class="grid_3" id="der">
...
</div>
<div class="clear"></div>
Después de la capa de 9 columnas de anchura con id "izq", hemos colocado para completar el espacio una capa lateral de anchura de 3 columnas. Entre todas las capas de esta fila tenemos pues, una de 9 columnas a la izquierda y otra de 3 columnas a la derecha, que hace un total de 12 columnas de anchura.
Como se ha visto en el anterior código, después de esta fila hemos colocado otro DIV con class="clear", para poder comenzar la siguiente columna desde el principio.
Para acabar tenemos el pie de página. El pie lo hemos hecho con una única capa de 7 columnas de anchura, con la particularidad que hemos dejado un espacio vacío a la izquierda de 5 columnas, que se consigue con la clase prefix_5. En total tenemos 7 columnas de espacio + 5 columnas vacías = 12 columnas del container_12.
Esto se consigue con el siguiente código:
<div class="prefix_5 grid_7" id="pie">
pie
</div>
Acabamos con un nuevo DIV class="clear", para colocar antes del cierre del cuerpo de la página.
Para que se vea más fácilmente el esquema creado para hacer la estructura de filas y columnas de este ejemplo, pongo a continuación el código completo del cuerpo de esta página:
<div class="container_12">
<div id="cabecera" class="grid_8 suffix_1">
<p>Cabecera</p>
</div>
<div id="buscador" class="grid_3">
<p>Buscador</p>
</div>
<div class="clear"></div>
<div class="grid_9" id="izq">
<div class="grid_4 alpha" id="izq1">
<p>izq1</p>
</div>
<div class="grid_3" id="izq2">
<p>izq2</p>
</div>
<div class="grid_2 omega" id="izq3">
<p>izq3</p>
</div>
<div class="clear"></div>
<p>
Contenido de la capa izq, que aparecerá debajo de las 3 columnas anidadas.
</p>
</div>
<div class="grid_3" id="der">
<p>der</p>
</div>
<div class="clear"></div>
<div class="prefix_5 grid_7" id="pie">
<p>pie</p>
</div>
<div class="clear"></div>
</div>
Para conseguir los colores de fondo y los bordes en las capas lo hemos hecho aplicando estilos CSS a través de los identificadores (atributo id) configurados en las distintas capas y aplicando estilos a la etiqueta P, como se puede ver a continuación.
<style type="text/css">
p{
border: 1px solid #999;
padding: 5px;
margin: 0px;
}
#cabecera{
background-color: #ffcccc;
}
#buscador{
background-color: #ccffcc;
}
#izq{
background-color: #e0e0ff;
}
#izq1{
background-color: #ccccff;
}
#izq2{
background-color: #9999ff;
}
#izq3{
background-color: #6666ff;
}
#der{
background-color: #dedede;
}
#pie{
background-color: #ff8800;
}
</style>
Con esto ya hemos visto un primer ejemplo completo de maquetación CSS a través del framework 960 Grid System.
martes, 1 de octubre de 2013
Ejemplo de framework CSS - 960gs
Grid 960 es un framework de css que facilita la maquetación a un estándar de 960px. En este tutorial vamos a crear un página utilizando este framework.
PARA EMPEZAR, ¿QUÉ ES 960 GRID?
960 Grid es un framework de CSS que nos facilita la vida (si lo sabemos utilizar). Este grid se creó por la necesidad de tener un “estándar” en el ancho de los sitios web. En nuestros días ya es sólo un pequeño porcentaje de usuarios que utilizan resolución de 800 x 600 pixeles, mientras la mayoría ya utiliza resoluciones de 1024 x 768 px o mayores. Es por eso que un grupo de personas decidió crear este sistema de maquetado basado en 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestros layout de una forma simple y rápida.
CONOCIENDO EL GRID
Como les mencionaba, podemos utilizar 12 o 16 columnas para crear nuestros layouts, cada una de las columnas tiene un margen izquierdo y derecho de 10px, para crear 20px de separación entre columnas. Sabiendo esto, decimos que si utilizo 12 columnas, cada columna será de 60px cada una y sí utilizo 16 columnas, el ancho de cada una será de 40px, tal como se ve en la página demo. Podrán observar una gama de combinaciones para darse una idea de como trabaja este framework.
Veremos ahora como es que se divide el grid en una configuración de 12 columnas:
- 60px
- 140px
- 220px
- 300px
- 380px
- 460px
- 540px
- 620px
- 700px
- 780px
- 860px
- 940px
Como verán, cada una de las filas lleva un número, que será el identificador; es decir, el ancho de la columna corresponde al número de a la par. Y se forma así: grid_xx donde “xx” es el numero de la lista. Pero,¿Cómo 960 grid sabe sí utilizo 12 o 16 columnas? Simple, tiene una clase .container_yy, donde “yy” es el numero de columnas que voy a utilizar.
Vamos a crear una página web con utilizando este framework y 12 columnas.
MAQUETANDO CON 960 GRID
Grid de 12 columnas
La verdad es muy sencillo maquetar así, y al observar la imagen nos damos una idea de como hacerlo. Para los fines de este tutorial, vamos a crear un layout para un sitio ficticio llamado Vos-Voz (no se me ocurría otro nombre).
Hay unos puntos importantes antes:
- Incluir text, reset y 960 css’s en el html
- Hay que colocar un <div class=”clear”></div> despues de cada fila, esto se debe a que cada columna está con un float:left
- Usaremos los id para diferenciar un div de otro
Comenzamos el esqueleto del layout, creamos los espacios que necesitamos para colocar los artículos. Como podrán darse cuenta, tenemos un mini-menú en la parte superior con dos opciones, luego nuestro logotipo, después el menú principal y por último el contenido que está subdividido en dos columnas, donde la columna izquierda está dividida por dos columnas más. Hasta abajo tenemos nuestro footer y eso es todo.
<div id="top">
<!--empiezo con mi contenedor de 12 columnas-->
<div class="container_12">
<!--agrego un div que va ha estar ubicado 720px a la derecha y va tener un ancho de 220px-->
<div class="grid_3 prefix_9">
</div><!--grid_3-->
<div class="clear"></div>
</div><!--container_12-->
</div><!--top-->
<!--luego creo otro contenedor de 960px-->
<div class="container_12" id="bodyMain">
<!--agrego un div de 960px, recordemos que son 940px los que podemos utilizar, por los márgenes-->
<div class="grid_12" id="header">
<a id="logo" title="Vos-Vos" href="#"></a>
<img id="ciudad-logo" alt="VV City" src="images/ciudad-logo.gif"/>
</div>
<div class="clear"></div>
<!--hago lo mismo para el menu, ya que se despliega por todo el layout-->
<div class="grid_12" id="menu">
</div><!--menu-->
<!--lo mismo ... observen que cada uno de los grid_12 tienen un ID que les da su estilo-->
<div class="grid_12" id="contentMain">
<!--separo en una columna de 620px y le agrego el alpha porque es la primera columna-->
<div class="grid_8 alpha">
<!--divido en 2, como se dan cuenta la primera tiene alpha-->
<div class="grid_4 alpha">
</div>
<!--la ultima tiene el omega-->
<div class="grid_4 omega">
</div>
</div>
<!--tenia una columna de 620px, esta es de los restantes 940px-->
<div class="grid_4 omega">
</div>
<div class="clear"></div>
</div><!--contentMain-->
<div class="clear"></div>
<!--como se dan cuenta, aquí muevo mi div de 300px o grid_4 ocho columnas a la derecha (640px)-->
<div class="grid_4 prefix_8" id="footer">
</div><!--footer-->
</div><!--bodyMain-->
Ahora es tiempo de colocarle los estilos a nuestros div con ID, para que podamos empezar a ver las clases.
div.spacer{
height: 1em;
}
#top{
width:100%;
background:#29231e;
position:relative;
top:0;
left:0;
}
#top ul{
margin:10px 0 10px 0;
color:#FFFFFF;
}
#top ul li{
display:inline;
}
#bodyMain{
background:url(../images/nubes-background.jpg) top center no-repeat;
}
#rss{
background:url(../images/rss-logo.gif) no-repeat right;
padding:5px 30px 5px 0;
}
a#logo{
background:url(../images/vos-voz.gif) no-repeat;
width:470px;
height:92px;
float:left;
margin-top:150px;
}
img#ciudad-logo{
float:left;
}
#header{
border-bottom:5px solid #29231e;
}
Ya tenemos la parte superior y el icono de rss en, ahora agregamos los elementos del menú:
<div class="grid_12" id="menu">
<ul>
<li>Portada</li>
<li>Noticias</li>
<li>Miembros</li>
<li>Promociones</li>
<li>Contáctanos</li>
</ul>
</div><!--menu-->
Le damos la clase a los items del menú, recordemos que tenemos un fondo celeste en el fondo, por eso, usaremos el grid_12 que ocupa los 940px:
#menu{
background:#e7f7fb;
}
#menu ul{
padding-top:10px;
margin-bottom:10px;
}
#menu ul li{
display:inline;
font:20px bold Arial, Helvetica, sans-serif;
}
Es hora de darle estilos al footer, simplemente haremos que tenga la licencia Creative Commons, un simple texto.
<div class="grid_4 prefix_8" id="footer"> <p>www.vos-voz.com. Licencia por Creative Commons.</p> </div><!--footer-->
Agreguen Lorem para los textos, recuerden que sus imágenes deben de ser del ancho de sus columnas, menos 20px que son los márgenes. Probarlo en todos los exploradores y si funciona está todo listo.
Un posible resultado final:
CONOCIENDO LAS CLASES
container_yy : Donde “yy” puede ser 12 o 16, que son el número de columnas que trabajaremos.
grid_xx: Donde “xx” será la cantidad de columnas que utilizaremos para algún proposito, la idea es formar 12 columnas en total, Ej. tengo una columna “grid_8″ y luego otra “grid_4″, entonces ya tengo mis 12 columnas.
prefix_xx: Este se utiliza para mover “xx” columnas a la derecha es decir (como en la parte del footer en nuestro layout) moví 8 columnas o 640px a la derecha y mi div tiene una anchura de 4 columnas o 320px a los cuales debemos quitar 20px a cada uno; por el gutter o espaciamiento que les mencionaba.
suffix_xx: Es muy parecido a prefix_xx, simplemente que en este caso el margen es a la derecha. Digamos que necesito una columna hasta la izquierda y que mi segunda columna esté 160px (2 columnas) a la derecha de esta, entonces simplemente le agrego el suffix_2 en este caso.
alpha: Es el inicio, se utiliza cuando tenemos dos o mas columnas y deseamos que una esté a la par de la otra, entones a la primera se le añade esta clase, que elimina el margen de 10px en el lado izquierdo.
omega: Es el final, se utiliza como el alpha pero la diferencia es que esta clase se añade a la última columna para eliminar el margen derecho de 10px.
martes, 24 de septiembre de 2013
Pequeña introducción a PHP y formulario de contacto
PHP es un lenguaje de scripting que permite la generación dinámica de contenidos en un servidor web. El significado de sus siglas es Page HyperText Preprocessor. Entre sus principales características cabe destacar su potencia, su alto rendimiento, su facilidad de aprendizaje y su escasez de consumo de recursos.
El código PHP puede incluirse dentro del código html de la pagina. Para delimitar la seccion de codigo PHP podemos hacerlo de varias formas:
-Usando las etiquetas <?php y <?
-Usando las etiquetas <? y ?>
-Mediante <script languaje="php"> </script>
El funcionamiento de las páginas en PHP alojadas en un servidor es el siguiente:
-El navegador del cliente solicita el documento PHP.
-Llega la solicitud del servidor y el servidor localiza el documento, lanza el intérprete de PHP y ejecuta todo su codigo.
-Una vez ejecutado el código se genera el resultado en HTML y lo devuelve al servidor para que lo transfiera al cliente.
-El servidor transfiere el resultado en HTML y es mostrado en el navegador del cliente.
Variables
Una variable podría definirse como una posición de memoria creada para introducir o asignar cualquier valor o dato. Durante la ejecución del script el valor de la variable puede "variar"(valga la redundancia) tanto de tipo como de valor. En PHP (al igual que en JavaScript) no hace falta declarar la variable ya que simplemente anteponiendo el caracter $ al nombre de la variable estamos indicando que es una variable.
Otro hecho que cabe destacar a la hora de programar en PHP y la declaración de variables es que PHP es un lenguaje "CASE SENSITIVE" es decir que diferencia entre mayúsculas y minúsculas y debido a esta razón no sería lo mismo $miVariable=valor; que $MiVaRiABle=valor; ya que PHP lo interpretaría como dos variables completamente diferentes.
Los tipos de datos posibles que puede almacenar una variable son los siguientes :
Integer Números enteros positivos y negativos
Double Números decimales o de coma flotante
String Cadenas de texto
Boolean Valores True o False
Array Tipo especial de colección de valores
Object Tipo especial de dato complejo
En capítulos posteriores daremos cabida a los dos últimos tipos de datos(array y object) que aqui no han sido explicados ni comentados apenas.
Convertir tipos
PHP es un lenguaje que realiza la conversión de tipos en función de los operandos y del operador. De esta forma si intentamos sumar la cadena '10' y el número 20 la acción que realizaría sería convertir la primera variable a numérica y de esa forma podría sumar 10+20=30.
Aparte de que PHP en algunos casos realiza la conversión existen dos funciones especiales del propio lenguaje las cuales nos permiten saber el tipo de variable que estamos usando y también pueden convertir el tipo de variable:
gettype() Recibe el tipo de variable que es
settype($variable,'tipo variable') Transforma el tipo de variable del modo actual a el modo que le introduzcamos.
Variables características de PHP
argv Array de argumentos pasados en la ejecución del script.
$_SERVER['argc'] Número de parametros pasados al script en su ejecución.
$_SERVER['PHP_SELF'] Nombre del script que se está ejecutando
$_COOKIE Array asociativo de pares (clave,valor) pasados a través de cookies
$_GET Array asociativo de pares (clave,valor) pasados a través de GET
$_POST Array asociativo de pares (clave,valor) pasados a través de POST
$_FILES Array asociativo que contiene información de los ficheros recibidos mediante POST
$_ENV Array asociativo de pares (clave,valor) del entorno
$_SERVER Array asociativo de pares (clave,valor) del servidor
$_SESSION Array asociativo de pares (clave,valor) de sesion
Constantes
Son valores que se van a mantener constantes a lo largo de la ejecución del script y que posiblemente queramos usar a lo largo del script un gran número de veces. Para ello usamos la siguiente sintaxis:
<? define("nombre de la constante", valor); ?>
Mi primer script PHP
Una vez que ya tenemos instalados PHP y MySQL , y el servidor Apache configurado para usarlos, podemos comenzar a escribir nuestro primer script en PHP.
Ejemplo script php
<html>
<body>
<?php
$myvar = "Hola. Este es mi primer script en PHP \n";
//Esto es un comentario
es mi primer script en PHP n";
//Esto es un comentario
echo $myvar;
?>
</body>
</html>
Una vez escrito esto lo salvamos en un fichero con la extensión php, y lo colocamos en nuestro servidor, http://mi_servidor/php/test.php . Ahora si ponemos esta URL en nuestro navegador veremos una línea con el texto "Hola. Este es mi primer script en PHP" .
Lo primero que apreciamos en el script son sus delimitadores. En la primera línea del script vemos <?php que nos indica que comienza un script en PHP, y en la última colocamos ?> para indicar el final del script. Hay que destacar que todas las líneas que se encuentre entre estos delimitadores deben acabar en punto y coma , excepto las sentencias de control (if, swicht, while, etc.).
Como en toda programación, es importante poner muchos comentarios, para lo cual si queremos comentar una sola línea tenemos que poner al principio de la línea // , si lo que queremos es comentar varias utilizaremos los delimitadores /* - */ .
Para que el servidor envié texto utilizaremos la instrucción echo , aunque también podemos utilizar printf de uso similar al del C o Perl .
Finalmente, vemos que la palabra myvar comienza con el signo dólar ( $ ) . Este símbolo le indica a PHP que es una variable. Nosotros le hemos asignado un texto a esta variable, pero también pueden contener números o tablas (arrays). Es importante recordar que todas las variables comienza con el signo dólar . También habréis observado que el texto que le asignamos a la variable termina con \n , esto no se imprime sirve para indicarle al navegador una nueva línea.
Script para enviar e-mail
El código PHP, necesario para esto, se compone básicamente de las siguientes partes:
En PHP, podemos obtener la información que nos envía otra pagina mediante POST, que es un sistema de envio de datos. La orden que utilizamos para obtener la información se llama $_POST.
Tal como se comenta al crear el formulario HTML, cada campo tiene un nombre que lo identifica. Los campos son: nombre, empresa, mail, mensaje
El código completo de este archivo send.php es el siguiente:
El "." suma dos cadenas o strings. Las cadenas son una sucesión de caracteres entre comillas simples o dobles.
El símbolo ".=" significa que le agrego a una variable $header en este caso, el resultado de lo que tenía antes MAS lo que está del otro lado del signo ".="
< ?php
$nombre = $_POST['nombre'];
$mail = $_POST['mail'];
$empresa = $_POST['empresa'];
$header = 'From: ' . $mail . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";
$mensaje = "Este mensaje fue enviado por " . $nombre . ", de la empresa " . $empresa . " \r\n";
$mensaje .= "Su e-mail es: " . $mail . " \r\n";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " \r\n";
$mensaje .= "Enviado el " . date('d/m/Y', time());
$para = 'info@tusitio.com';
$asunto = 'Contacto desde Taller Webmaster';
mail($para, $asunto, utf8_decode($mensaje), $header);
echo '&estatus=ok&';
?>
Como dijimos, por medio de $_POST, obtenemos los datos enviados desde el formulario, estos datos se guardan en variables, que son posiciones de memoria que mantendrán la información mientras la procesamos. Es así entonces que tomamos el campo $_POST['nombre'] en la variable $nombre, y lo mismo con $mail y $empresa con los respectivos campos $_POST['mail'] y $_POST['empresa'].
Todo e-mail, es conveniente que tenga una cabecera con los datos mínimos para identificar, quien lo envía, el programa que lo genero, el formato de los datos del e-mail, etc. Esto es lo que generamos en las siguientes 4 líneas de nuestro código, o sea la Cabecera del e-mail., que la guardamos en la variable $header.
La primer línea arma el remitente, para esto se escribirá From: emailremitente@servidor.com que obviamente no es ese que menciono, esto es solo un ejemplo y si prestamos atención lo que dice el código es: From: $mail, esto significa que $mail, como es una variable tomara ahí el e-mail. ingresado en nuestro formulario.
La sigueinte línea X-Mailer, indica el programa usado para envía este e-mail., siempre usen lo mismo tal como esta ahí, cuando usen lenguaje PHP. Las líneas 3 y 4 indican el formato del e-mail., esas también usenlas iguales copien eso directamente.
Deben notar que al final de cada línea hay un " \r\n", esto indica un Salto de Línea, es simplemente para que lo que viene luego de ese código siga en el renglón de abajo.
Bien, la parte mas importante de este ejemplo es la del mensaje mismo, y es lo que sigue y se forma en la variable $mensaje, ahí se escribe un texto que suma el contenido de $nombre y $empresa, para armar una frase coherente tipo así: "Este mensaje fue enviado por José Pérez, de la empresa Empresa S.A." y salta a la siguiente línea y abajo escribe: "Su e-mail es: joseperez@susitio.com", salta un renglón y abajo escribe: "Mensaje: todo el texto que ingresamos del mensaje", completando eso, abajo del renglón, con la fecha de envio.
Las siguientes líneas son el destinatario, que se almacena en la variable $para y el asunto que se guarda en la variable $asunto. Estos dos renglones ustedes pueden personalizarlos a gusto según el caso.
Por ultimo se ejecuta la orden PHP, que permite el envio del mensaje, esta orden se llama mail y se le debe indicar de esta forma y en este orden:
mail(destinatario, asunto, mensaje, cabecera)
Que como vemos y como tuvimos la precaución de guardar todo en variables, sera muy sencillo hacer la línea tal como esta ahí, de la siguiente manera:
mail($para, $asunto, utf8_decode($mensaje), $header);
Por ultimo lo que se escribe es un echo "&estatus=ok&", que en el formulario flash se utiliza para saber si el envio fue correcto.
En nuestro ejemplo de Formulario HTML, podemos sustituir eso con un mensaje de éxito tipo: echo "Mensaje enviado correctamente", en lugar de echo "&estatus=ok&"
El código PHP puede incluirse dentro del código html de la pagina. Para delimitar la seccion de codigo PHP podemos hacerlo de varias formas:
-Usando las etiquetas <?php y <?
-Usando las etiquetas <? y ?>
-Mediante <script languaje="php"> </script>
El funcionamiento de las páginas en PHP alojadas en un servidor es el siguiente:
-El navegador del cliente solicita el documento PHP.
-Llega la solicitud del servidor y el servidor localiza el documento, lanza el intérprete de PHP y ejecuta todo su codigo.
-Una vez ejecutado el código se genera el resultado en HTML y lo devuelve al servidor para que lo transfiera al cliente.
-El servidor transfiere el resultado en HTML y es mostrado en el navegador del cliente.
Variables
Una variable podría definirse como una posición de memoria creada para introducir o asignar cualquier valor o dato. Durante la ejecución del script el valor de la variable puede "variar"(valga la redundancia) tanto de tipo como de valor. En PHP (al igual que en JavaScript) no hace falta declarar la variable ya que simplemente anteponiendo el caracter $ al nombre de la variable estamos indicando que es una variable.
Otro hecho que cabe destacar a la hora de programar en PHP y la declaración de variables es que PHP es un lenguaje "CASE SENSITIVE" es decir que diferencia entre mayúsculas y minúsculas y debido a esta razón no sería lo mismo $miVariable=valor; que $MiVaRiABle=valor; ya que PHP lo interpretaría como dos variables completamente diferentes.
Los tipos de datos posibles que puede almacenar una variable son los siguientes :
Integer Números enteros positivos y negativos
Double Números decimales o de coma flotante
String Cadenas de texto
Boolean Valores True o False
Array Tipo especial de colección de valores
Object Tipo especial de dato complejo
En capítulos posteriores daremos cabida a los dos últimos tipos de datos(array y object) que aqui no han sido explicados ni comentados apenas.
Convertir tipos
PHP es un lenguaje que realiza la conversión de tipos en función de los operandos y del operador. De esta forma si intentamos sumar la cadena '10' y el número 20 la acción que realizaría sería convertir la primera variable a numérica y de esa forma podría sumar 10+20=30.
Aparte de que PHP en algunos casos realiza la conversión existen dos funciones especiales del propio lenguaje las cuales nos permiten saber el tipo de variable que estamos usando y también pueden convertir el tipo de variable:
gettype() Recibe el tipo de variable que es
settype($variable,'tipo variable') Transforma el tipo de variable del modo actual a el modo que le introduzcamos.
Variables características de PHP
argv Array de argumentos pasados en la ejecución del script.
$_SERVER['argc'] Número de parametros pasados al script en su ejecución.
$_SERVER['PHP_SELF'] Nombre del script que se está ejecutando
$_COOKIE Array asociativo de pares (clave,valor) pasados a través de cookies
$_GET Array asociativo de pares (clave,valor) pasados a través de GET
$_POST Array asociativo de pares (clave,valor) pasados a través de POST
$_FILES Array asociativo que contiene información de los ficheros recibidos mediante POST
$_ENV Array asociativo de pares (clave,valor) del entorno
$_SERVER Array asociativo de pares (clave,valor) del servidor
$_SESSION Array asociativo de pares (clave,valor) de sesion
Constantes
Son valores que se van a mantener constantes a lo largo de la ejecución del script y que posiblemente queramos usar a lo largo del script un gran número de veces. Para ello usamos la siguiente sintaxis:
<? define("nombre de la constante", valor); ?>
Mi primer script PHP
Una vez que ya tenemos instalados PHP y MySQL , y el servidor Apache configurado para usarlos, podemos comenzar a escribir nuestro primer script en PHP.
Ejemplo script php
<html>
<body>
<?php
$myvar = "Hola. Este es mi primer script en PHP \n";
//Esto es un comentario
es mi primer script en PHP n";
//Esto es un comentario
echo $myvar;
?>
</body>
</html>
Una vez escrito esto lo salvamos en un fichero con la extensión php, y lo colocamos en nuestro servidor, http://mi_servidor/php/test.php . Ahora si ponemos esta URL en nuestro navegador veremos una línea con el texto "Hola. Este es mi primer script en PHP" .
Lo primero que apreciamos en el script son sus delimitadores. En la primera línea del script vemos <?php que nos indica que comienza un script en PHP, y en la última colocamos ?> para indicar el final del script. Hay que destacar que todas las líneas que se encuentre entre estos delimitadores deben acabar en punto y coma , excepto las sentencias de control (if, swicht, while, etc.).
Como en toda programación, es importante poner muchos comentarios, para lo cual si queremos comentar una sola línea tenemos que poner al principio de la línea // , si lo que queremos es comentar varias utilizaremos los delimitadores /* - */ .
Para que el servidor envié texto utilizaremos la instrucción echo , aunque también podemos utilizar printf de uso similar al del C o Perl .
Finalmente, vemos que la palabra myvar comienza con el signo dólar ( $ ) . Este símbolo le indica a PHP que es una variable. Nosotros le hemos asignado un texto a esta variable, pero también pueden contener números o tablas (arrays). Es importante recordar que todas las variables comienza con el signo dólar . También habréis observado que el texto que le asignamos a la variable termina con \n , esto no se imprime sirve para indicarle al navegador una nueva línea.
Script para enviar e-mail
El código PHP, necesario para esto, se compone básicamente de las siguientes partes:
- Obtener la información del formulario
- Preparar el texto del mensaje
- Definir la cabecera del e-mail
- Enviar el e-mail
En PHP, podemos obtener la información que nos envía otra pagina mediante POST, que es un sistema de envio de datos. La orden que utilizamos para obtener la información se llama $_POST.
Tal como se comenta al crear el formulario HTML, cada campo tiene un nombre que lo identifica. Los campos son: nombre, empresa, mail, mensaje
El código completo de este archivo send.php es el siguiente:
El "." suma dos cadenas o strings. Las cadenas son una sucesión de caracteres entre comillas simples o dobles.
El símbolo ".=" significa que le agrego a una variable $header en este caso, el resultado de lo que tenía antes MAS lo que está del otro lado del signo ".="
< ?php
$nombre = $_POST['nombre'];
$mail = $_POST['mail'];
$empresa = $_POST['empresa'];
$header = 'From: ' . $mail . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";
$mensaje = "Este mensaje fue enviado por " . $nombre . ", de la empresa " . $empresa . " \r\n";
$mensaje .= "Su e-mail es: " . $mail . " \r\n";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " \r\n";
$mensaje .= "Enviado el " . date('d/m/Y', time());
$para = 'info@tusitio.com';
$asunto = 'Contacto desde Taller Webmaster';
mail($para, $asunto, utf8_decode($mensaje), $header);
echo '&estatus=ok&';
?>
Como dijimos, por medio de $_POST, obtenemos los datos enviados desde el formulario, estos datos se guardan en variables, que son posiciones de memoria que mantendrán la información mientras la procesamos. Es así entonces que tomamos el campo $_POST['nombre'] en la variable $nombre, y lo mismo con $mail y $empresa con los respectivos campos $_POST['mail'] y $_POST['empresa'].
Todo e-mail, es conveniente que tenga una cabecera con los datos mínimos para identificar, quien lo envía, el programa que lo genero, el formato de los datos del e-mail, etc. Esto es lo que generamos en las siguientes 4 líneas de nuestro código, o sea la Cabecera del e-mail., que la guardamos en la variable $header.
La primer línea arma el remitente, para esto se escribirá From: emailremitente@servidor.com que obviamente no es ese que menciono, esto es solo un ejemplo y si prestamos atención lo que dice el código es: From: $mail, esto significa que $mail, como es una variable tomara ahí el e-mail. ingresado en nuestro formulario.
La sigueinte línea X-Mailer, indica el programa usado para envía este e-mail., siempre usen lo mismo tal como esta ahí, cuando usen lenguaje PHP. Las líneas 3 y 4 indican el formato del e-mail., esas también usenlas iguales copien eso directamente.
Deben notar que al final de cada línea hay un " \r\n", esto indica un Salto de Línea, es simplemente para que lo que viene luego de ese código siga en el renglón de abajo.
Bien, la parte mas importante de este ejemplo es la del mensaje mismo, y es lo que sigue y se forma en la variable $mensaje, ahí se escribe un texto que suma el contenido de $nombre y $empresa, para armar una frase coherente tipo así: "Este mensaje fue enviado por José Pérez, de la empresa Empresa S.A." y salta a la siguiente línea y abajo escribe: "Su e-mail es: joseperez@susitio.com", salta un renglón y abajo escribe: "Mensaje: todo el texto que ingresamos del mensaje", completando eso, abajo del renglón, con la fecha de envio.
Las siguientes líneas son el destinatario, que se almacena en la variable $para y el asunto que se guarda en la variable $asunto. Estos dos renglones ustedes pueden personalizarlos a gusto según el caso.
Por ultimo se ejecuta la orden PHP, que permite el envio del mensaje, esta orden se llama mail y se le debe indicar de esta forma y en este orden:
mail(destinatario, asunto, mensaje, cabecera)
Que como vemos y como tuvimos la precaución de guardar todo en variables, sera muy sencillo hacer la línea tal como esta ahí, de la siguiente manera:
mail($para, $asunto, utf8_decode($mensaje), $header);
Por ultimo lo que se escribe es un echo "&estatus=ok&", que en el formulario flash se utiliza para saber si el envio fue correcto.
En nuestro ejemplo de Formulario HTML, podemos sustituir eso con un mensaje de éxito tipo: echo "Mensaje enviado correctamente", en lugar de echo "&estatus=ok&"
viernes, 20 de septiembre de 2013
Formularios HTML
Un formulario puede insertarse en un documento HTML a través del elemento HTML form que actuará como contenedor para todos los elementos de entrada. Toda la información recolectada por un formulario puede ser enviada a un agente procesador (un archivo conteniendo un script hecho especialmente para procesar esta información) que usualmente va especificado en el atributos "action". Lo que el agente procesador haga con la información y cómo la maneje es un tema que no será tratado en este sitio ya que no pertenece al estándar HTML. Para manejar la información de un formulario debes usar un script del lado servidor.
También puedes especificar cómo la información será enviada en el valor del atributo "method": "post" (los datos del formulario son adjuntados al cuerpo del mismo) ó "get" (los datos del formulario son adjuntados a la URL). Se supone que el agente procesador sabe cuál es el método de envío del formulario.
De este modo, un formulario simple puede tener la siguiente declaración:
<form method="post" action="handler.php">
...Controles...
</form>
Elementos de entrada
La mayoría de los controles de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y también del tipo de información que pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos mediante el uso de cuatro elementos:
- el elemento HTML input
- el elemento HTML button
- el elemento HTML select
- el elemento HTML textarea.
Como regla general para todos los controles, el atributo "name" identificará la información para el agente procesados, y su valor dependerá de la naturaleza del control (algunas veces, como en las casillas de verificación o botones radio, será el contenido del atributo "value").
Entrada textual
Existen tres tipos de entrada textual que pueden recolectar información.
Entrada de línea
Este control recolecta información textual en una sola línea, lo que significa que el usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea (en la mayoría de los formularios, la tecla "enter" presionada en uno de estos campos, envía el formulario que lo contiene).
Este control es insertado en documentos HTML usando el tag HTML input con el valor "text" en su atributo "type". El valor inicial, mostrado cuando la página se carga, puede ser definido usando el atributo "value".
Código
<form method="post" action="agente.php">
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aquí" />
</form>
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aquí" />
</form>
Vista
Ingresa un texto:
Entradas de password
Este control actúa exactamente como el de entrada de línea con la excepción de que "esconde" los caracteres ingresados mostrándolos como puntos o asteriscos para evitar que los usuarios ven su contenido.
Es definido utilizando el valor "pass" en el atributo "type", y su valor inicial puede ser definido usando el atributo "value". Es comúnmente usado para el ingreso de contraseñas.
Código
<form method="post" action="agente.php">
Ingresa tu contraseña: <input name="contrasena" type="password" value="123456" />
</form>
Ingresa tu contraseña: <input name="contrasena" type="password" value="123456" />
</form>
Vista
Ingresa tu contraseña:
Entrada de multilínea
Este control permite a los usuarios ingresar texto en una o más líneas. se inserta utilizando el tag HTML textarea y puede ser usado para recolectar reportes, comentarios, cartas, etc. En este tag, el contenido será el texto inicial.
Código
<form method="post" action="agente.php">
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea>
</form>
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea>
</form>
Vista
Ingresa tus comentarios:
Nota que los tributos "rows" y "cols" establecen las dimensiones de la caja de texto.
El valor pasado al agente procesador será el texto ingresado, es decir, el contenido de la caja de texto.
Opciones
Los autores pueden también dejar que sus visitantes elijan opciones preestablecidas de una lista. Esto puede lograrse usando uno de los tres controles siguientes, que pueden construir diferentes tipos de listas de opciones.
Casillas de verificación
Una casilla de verificación es una opción simple que puede tomar uno de dos valores: "marcado" ó "no marcado" ("checked" ó "unchecked"). Las casillas de verificación pueden ser agrupadas visualmente formando listas de opciones, pero cada una de ellas es tratada individualmente.
Este control es insertado mediante el tag HTML input con el valor "checkbox" en su atributo "type". Inicialmente, la casilla aparece sin marcar a menos que lo especifique de otra forma usando el atributo booleano (verdadero o false) "checked". Recuerda, que para lograr un código correcto en XHTML necesitas definir al atributo booleano con sus nombres como valores (por ejemplo, checked="checked").
Código
<form method="post" action="agente.php">
Selecciona tus intereses:<br />
<input name="cbipeliculas" type="checkbox" />Películas<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>
Selecciona tus intereses:<br />
<input name="cbipeliculas" type="checkbox" />Películas<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>
Vista
Selecciona tus intereses:
Películas
Libros
Internet
Películas
Libros
Internet
En este caso, el valor pasado será booleano y representará el estado de la opción (marcado o no marcado). Dependiendo del agente procesador puede ser "on/off", "checked/unchecked", "true/false", etc.
Botones radio
Los botones radio trabajan de la misma forma que las casillas de verificación con una pequeña diferencia: los botones radio que comparte el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar más de una a la vez. Esto significa que cuando un usuario elige una opción, las demás son automáticamente deseleccionadas.
El valor inicial para el grupo depende del navegador (la mayorñia muestra todos los controles sin marcar). Esto puede ser cambiado usando el atributo booleano "checked".
Código
<form method="post" action="agente.php">
Selecciona tu actividad favorita:<br />
<input name="intereses" type="radio" value="rbipeliculas" />Películas<br />
<input name="intereses" type="radio" value="rbilibros" />Libros<br />
<input name="intereses" type="radio" value="rbiinternet" checked="checked" />Internet
</form>
Selecciona tu actividad favorita:<br />
<input name="intereses" type="radio" value="rbipeliculas" />Películas<br />
<input name="intereses" type="radio" value="rbilibros" />Libros<br />
<input name="intereses" type="radio" value="rbiinternet" checked="checked" />Internet
</form>
Vista
Selecciona tu actividad favorita:
Películas
Libros
Internet
Películas
Libros
Internet
Para botones radio el valor pasado al agente procesador es el contenido del atributo "value" de la opción seleccionada, lo que significa que una lista con muchos botones radio solo pasará un valor.
Listas
Estas listas pueden ser construídas utilizando tres elementos: el elemento HTML select (contenedor principal), el elemento HTML option (opción simple) y el elemento HTML optgroup (grupo de opciones). El último elemento es el único prescindible para construir este tipo de listas.
Los controles de lista pueden ser usadas para recolectar información al igual que los botones radio (sólo una opción) o como casillas de verificación (múltiples opciones), dependiendo de la presencia del atributo booleano "multiple". Como en los controles anteriores, el valor inicial de los elementos HTML option puede ser establecido a "seleccionado" usando el atributo booleano "selected".
Código
<form method="post" action="agente.php">
Elije solo una opción, como en los botones radio:
<select name="entradalista">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option selected="selected">Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br />
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):<br />
<select name="entradalista[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option>Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
</form>
Elije solo una opción, como en los botones radio:
<select name="entradalista">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option selected="selected">Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br />
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):<br />
<select name="entradalista[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option>Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
</form>
Vista
Elije solo una opción, como en los botones radio:
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):
Para la primera lista sin el atributo "multiple", el valor pasado al agente procesador será la opción seleccionada, pero para el segundo ejemplo el valor pasado será un arreglo (array) con los valores de las opciones seleccionadas. Es por esto que, para listas con el atributo "multiple" presente, debes agregar los corchetes("[]") al final del nombre del tag HTML select. El valor individual pasado en ambos casos es el contenido del atributo "value" si el mismo está presente, y el contenido del elemento si no (de las opciones seleccionadas).
Botones
Un botón es un dispositivo primordialmente diseñado para realizar una acción con el formulario que lo contenga. De echo, existen dos tipos básicos de botones: para enviar el formulario y para reestablecerlo (devuelve todos los campos a sus valores iniciales). Existe sólo un tipo más de botón que no posee una acción predefinida (la misma debe ser especificada con un lenguage del lado cliente).
Los botones pueden insertarse a través del tag HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML button (botones de contenido).
Botones de envío
Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es insertado utilizando el tag HTML input con el valor "submit" en su atributo "type".
Código
<form method="post" action="agente.php">
<input type="submit" value="Enviar este formulario" />
</form>
<input type="submit" value="Enviar este formulario" />
</form>
Vista
Botones de reestablecimiento
Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con el tag HTML input con el valor "reset" en su atributo "type".
Código
<form method="post" action="agente.php">
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="reglas" checked="checked" /> Acepto las relgas<br />
<input type="reset" value="Reestablecer todos los campos a su valor predeterminado" />
</form>
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="reglas" checked="checked" /> Acepto las relgas<br />
<input type="reset" value="Reestablecer todos los campos a su valor predeterminado" />
</form>
Vista
Acepto las relgas
En el ejemplo anterior, puedes probar la funcionalidad del botón cambiando los valores de los elementos y presionando el botón para reestablecer los campos a sus valores iniciales.
Botones de imagen
Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Otra particularidad es éstos envían además las coordenadas donde ha ocurrido el click cuando el formulario fue enviado, tomadas desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1"las coordenadas serán enviadas en la forma "boton1.x" y "boton1.y").
Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type".
Código
<form method="post" action="agente.php">
<input type="image" src="/img/p/tutorials/forms/3/submit.png">
</form>
<input type="image" src="/img/p/tutorials/forms/3/submit.png">
</form>
Vista
Botones de contenido
Los botones de contenido pueden ser usados como botones de envío o reestablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Pero su características es que permite a los autores inserta contenido dentro de los mismos. Esto significa que una porción de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).
Código
<form method="post" action="agente.php">
<button type="button">
El <b>tag HTML button</b><br />
permite contenido.
</button>
</form>
<button type="button">
El <b>tag HTML button</b><br />
permite contenido.
</button>
</form>
Vista
Entrada de archivos
La entrada de archivos puede ser utilizada para subir archivos al servidor. Este control muestra una caja de texto donde el usuario debe especificar la ruta del archivo (que será adjuntado localmente por el navegador) que será enviado al servidor. De este modo los autores pueden pedir a los visitantes que envíen archivos de sus computadoras a través de la página. El control habitualmente muestra un botón para elegir el archivo visualmente.
Nota que para los formularios con subida de archivos debes especificar el valor "multipart/form-data" en el atributo "enctype" del tag HTML form, de otro modo, el archivo no será enviado.
Código
<form method="post" action="agente.php" enctype="multipart/form-data">
Ingresa el archivo: <input name="imagen" type="file" />
</form>
Ingresa el archivo: <input name="imagen" type="file" />
</form>
Vista
Ingresa el archivo:
Etiquetando elementos
Las etiquetas de los elementos pueden hacer que tu página luzca mejor y sea más funcional en agentes de usuario visuales (cuando un visitante hace click en la etiqueta, el enfoque pasa automáticamente al control asociado), pero éstas sin duda harán una gran diferencia para personas con discapacidades o con navegadores no visuales. Una etiqueta establece una relación entre un control y una porción de texto (que se supone, establece un "título" para el control).
Las etiquetas pueden insertarse con el elemento HTML label y son asociados a los controles mediante el atributo "for", que debe coincidir con el valor del atributo "id" en el control.
Código
<form method="post" action="agente.php">
<label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br />
<label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br />
Género:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br />
<input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label>
</form>
<label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br />
<label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br />
Género:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br />
<input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label>
</form>
Vista
Género:
viernes, 13 de septiembre de 2013
martes, 10 de septiembre de 2013
martes, 20 de agosto de 2013
Séptima Clase - Terminología CSS y DIVs
Términos comunes de CSS
Además de los términos HTML, hay algunas comunes términos CSS que usted querrá familiarizarse con. Cuanto más se trabaja con HTML y CSS de las más estos términos se convertirá en segunda naturaleza.
Selectores
Un selector determina exactamente qué elemento, o elementos, los estilos correspondientes se aplicarán a. Los selectores pueden incluir una combinación de diferentes IDs, clases, tipos y otros atributos - todo dependiendo de lo específico que usted desea ser. Los selectores pueden ser identificados como todo lo que viene antes del primera llave, { .
p { ... }
Propiedades
Una propiedad determina el estilo que se aplicará a un elemento. Las propiedades pueden ser identificados como el texto que viene inmediatamente antes de los dos puntos. Hay un abundante número de propiedades que se pueden utilizar, y continuamente se están añadiendo otros nuevos.
p {Color: # ff0;fuente-size : 16px ;}
Valores
Un valor determina el comportamiento de una propiedad. Los valores pueden ser identificados como el texto en el medio de los dos puntos y punto y coma.
CSS Estructura y sintaxis
p {Color: # ff0;font-size : 16px ;}
CSS funciona mediante el uso de selectores para aplicar estilos a los elementos HTML. Todos los estilos en cascada CSS, que permite diferentes estilos que se heredan de múltiples elementos.
Como un ejemplo, es posible establecer un estilo para todo el texto en una página para ser de un color específico, tamaño, y peso. A continuación, mediante un selector más específico que el estilo puede ser sobreescrito por un elemento único.
Como un ejemplo, es posible establecer un estilo para todo el texto en una página para ser de un color específico, tamaño, y peso. A continuación, mediante un selector más específico que el estilo puede ser sobreescrito por un elemento único.
p {Color: # ff0;font-size : 16px ;}
Largo vs Corto
En CSS hay varias maneras diferentes para declarar los valores de una propiedad. Con CSS de sintaxis larga, se apilan las múltiples declaraciones, una tras otra para cada propiedad y su valor. Con CSS abreviado se utiliza una propiedad y la lista de varios valores. Lo mejor es usar CSS abreviado, ya que requiere menos código. No todas las propiedades CSS son compatibles con el abreviado así que asegúrese de que está utilizando la propiedad y estructura de valores correcta.
/ * Modo largo * /p {padding-top : 10px ;padding-right : 20px ;padding-bottom : 10px ;padding-left : 20px ;}/ * Modo corto * /p {padding : 10px 20px ;}/ * Modo corto * /p {padding : 10px ;}
Comentarios en HTML y CSS
HTML y CSS le dan la posibilidad de dejar los comentarios en el código. Estos comentarios se pueden utilizar para ayudar con la organización, establecer recordatorios y administrar el código más eficaz. Los comentarios se hacen especialmente útil cuando hay varias personas trabajando en el mismo código. Cualquier contenido envuelto en comentarios no se representará en la página.
Comentarios HTML envuelven el contenido a partir de
<- y terminan con -> . comentarios CSS envuelven el contenido empezando por / * y terminan con * / .Selectores
Selectores, como se mencionó anteriormente, son el factor determinante en cuanto a qué elementos se van a ser estilizada. De este modo, es importante para entender completamente cómo utilizar selectores y cómo se pueden aprovechar. Algunos de los selectores más comunes incluyen elementos, los ID y las clases, o alguna combinación de los tres.
Type selectors
Los "type selectors" son el selector más básico. Basta nombrar a los elementos elementos sin los atributos para aplicar el estilo. Este tipo de selectores se prefieren siempre que sea posible, ya que requieren menos código y son fáciles de manejar.
HTML
CSS
<p> ... </ p>
Selectores de Clase
p { ... }
Selectores de clases le permiten aplicar el mismo estilo a un conjunto de elementos, dándoles todo lo mismo atributo de clase. Las clases se indican en el CSS mediante la identificación de la clase con un punto inicial. Está permitido usar el mismo atributo de clase en múltiples elementos de una página.
HTML
CSS
<Div class = "increible" > ... </ div>
Selectores ID
. increíble { ... }
Selectores de ID son similares a los selectores de clase sin embargo que se utilizan para dirigir sólo un elemento único a la vez. En lugar de utilizar el atributo de clase, IDS, naturalmente, utilizar el atributo ID. En lugar de un período de, al igual que con las clases, los ID se denotan mediante la identificación de la identificación con el símbolo de sostenido líder. IDs sólo pueden utilizarse una vez por página e idealmente deben ser reservados para elementos significativos.
HTML
CSS
<Div de id = "shayhowe" > ... </ div>
Combinación de selectores
# Shayhowe {... }
Una belleza de CSS es la capacidad de combinar selectores y heredar estilos. Esto le permite comenzar con un selector más genérico y su forma de ser más específicas como sea necesario. Además, puede combinar diferentes selectores a ser tan específico como usted desee.
Suma de selectores
ul # li sociales {padding : 0 3px ;}ul # sociales li a {height : 17px ;width : 16px ;}ul # li.tumblr sociales a {background : url ( 'tumblr.png' ) 0 0 no-repeat ;}
Los selectores pueden ser extremadamente poderosos y los selectores mencionados anteriormente son sólo el comienzo. Se disponen de muchos selectores avanzados. Antes de poner nombres aleatorios a un elemento, comprobar si existe alguno que permita seleccionarlo por uno. También es importante mencionar que no todos los selectores de avanzar en el trabajo en todos los navegadores, especialmente con los nuevos selectores introducidas en CSS3. Si el selector no parece estar funcionando comprobar si el navegador lo soporta de manera adecuada.
Tutorial sobre DIVs
Posicionamiento de los DIVs
Suscribirse a:
Comentarios (Atom)