CosasParaMiBlogs

jueves, 12 de diciembre de 2013

Curso Blogger: crea tus contenedores – Virtual

En la anterior entrega aprendimos a crearnuestra primera plantilla.La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger.

Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran paso para configurar el aspecto que tendrá nuestra plantilla.

El término maquetación se suele emplear en el argot informático para referirse a la colocación que tendrán los distintos elementos que conformen el Blog en nuestra página (entre otras muchas más funciones que se aluden a este significado).

Esta vez vamos a ser capaces de decidir qué elementos "contenedores de información" compondrán nuestro blog: una barra lateral, una zona para el cuerpo del blog con las entradas, una cabecera y un pie de página.

NOTA IMPORTANTE:Se evita utilizar terminología compleja o excesivamente técnica en esta guía para acercar con la mayor simplificación posible el código a todas las personas que deseen conocerlo. No se va a utilizar en ningún momento palabras o nomenclatura de programación convencional, esta guía va dirigida a aquellos que no tienen ninguna o poca experiencia en programación de páginas web.

Aprendiendo a "maquetar" y colocar los "contenedores de información" que formarán nuestro Blog:

Como hemos comentado, la información en el Blog se distribuirá en diversas secciones:

Una sección superior que llamaremos cabecera donde podremos poner el título.

Una barra lateral donde colocar los componentes que prefiramos (entradas populares, categorías del blog, publicidad, etc...).

Un cuerpo del Blog donde almacenaremos las entradas.

Un pie de página para la terminación del Blog.

Esta clase de división en "contenedores" es parte del proceso de "maquetación" de la futura presentación del Blog. Decidirá en gran medida cómo se van a mostrar los elementos en la página principal y por tanto es vital antes de continuar con el resto de la plantilla.

¿Cómo se montan estos "contenedores de información"?

Montarlos es muy sencillo, se llamandivy se estructuran así:

div

información dentro del contenedor

/div

Entre la etiqueta de aperturadivy la de cierre/divtendremos lainformación dentro del contenedorque deseamos mostrar a través de él.

Un contenedor puede contener a otros contenedores:

div
Contenedor principal

div

Contenedor 1 (Dentro del Contenedor principal)

/div

div

Contenedor 2 (Dentro del Contenedor principal)

/div

Entre la etiqueta de aperturadivy la de cierre/divtendremos el contenedor principal que dentro contiene entre la nueva etiquetadivy su correspondiente de cierre/divla información delContenedor 1 (Dentro del Contenedor principal).Igualmente el contenedor principal también contiene la información delContenedor 2 (Dentro del Contenedor principal)entre sus correspondientes etiquetas delimitadorasdivy/div.

¿Cómo distingo unos contenedores de otros?, ¿cómo se identifican?

Los contenedores tienen un identificador que debe ser único para que el navegador pueda diferenciarlos y "dibujarlos". El identificador se incorpora así al ejemplo anterior:

div id = "contenedor principal"
Contenedor principal

div id = "contenedor 1"

Contenedor 1 (Dentro del Contenedor principal)

/div

div id = "contenedor 2"

Contenedor 2 (Dentro del Contenedor principal)

/div

El contenedor principal recibe el identificador"contenedor principal"y en su interior, hasta su cierre con/divtiene dos contenedores más:"contenedor 1"y"contenedor 2".

¿Cómo defino el aspecto y presentación que tendrá la información que va dentro de cada contenedor?

Lo haremos por medio del atributo class (clase). Se refiere a una clase que exista en la hoja de estilos. Esto que suena "extraño" es así de sencillo, para entendernos, conceptualmente esto es cómo se hace :

---- HOJA DE ESTILOS CONCEPTUAL ----

#Clase en hoja de estilos para contenedor 1{

ancho:10 píxeles

alto:10 pixeles

color: rojo

}

---- FIN HOJA DE ESTILOS CONCEPTUAL ----

div id ="Clase en hoja de estilos para dar formato al contenedor 1"

div Contenedor principal con el título/div

/div

He delimitado la hoja de estilos con el texto---- HOJA DE ESTILOS CONCEPTUAL ---- y---- FIN HOJA DE ESTILOS CONCEPTUAL ----.

En elcontenedor principalqueremos que se le de el estilo de la#Clase en hoja de estilospara dar formato al contenedor 1(ancho de 10 píxeles,alto de 10 pixeles ycolor: rojo) que contiene el títuloContenedor principal con el título.Es decir, en la hoja de estilos hemos dicho cómo debe dibujarse un título, con qué ancho, alto y color para luego indicar dentro del contenedor que queremos aplicar ese estilo al textoContenedor principal con el títulopor medio de que eldiv id =tiene el mismo nombre que hemos definido para su estilo en la hoja de estilos:Clase en hoja de estilos para contenedor 1.

Así pues, podemos crear estructuras más complejas basándonos en lo anterior, donde podemos "anidar" o meter contenedores dentro de otros para componer como si de un "mecano" se tratara nuestro Blog.

Usando los conceptos aprendidos en nuestra plantilla de pruebas en Blogger:

Si te has creadoun Blog de pruebas, puedes seguir estos pasos y conseguir tener una idea clara de cómo se genera tu plantilla. Si no lo has hecho, puedes leer los pasos para entender cada punto con especial énfasis en el que se explica el código de la plantilla.

En Blogger nos crearemos un contenedor llamado cabecera que contendrá el título y los elementos que conformen esa sección, otro para el cuerpo, otro para la barra lateral y otro para el pie de todo el Blog.

1)En tuBlog de pruebas, ve directamente en el menú de la izquierda a la opción "Plantilla".

2)Si tenías tu Blog de pruebas ya creado, no es necesario que hagas este paso (paso 2). Pulsa el botón gris "Editar HTML" y borra todo el código que aparece en la plantilla (puedes pulsar en Chrome CONTROL+ A y después cuando esté seleccionado todo el código pulsa el botón "Supr" para suprimir el texto seleccionado).

3)Ahora copia el código que te pongo a continuación y pégalo directamente como nuevo código para tu plantilla:

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'

head

titledata:blog.pageTitle//title

b:skin![CDATA[/*

/b:skin

/head

body
data:blog.title/

div id="cabecera"

b:section id="header" class="header" showaddelement="yes" /

/div

div id="cuerpo"

b:section id="main" class="main" showaddelement="yes" /

/div

div id="barra-lateral"

b:section id="sidebar" class="sidebar" showaddelement="yes" /

/div

div id="pie"

b:section id="footer" class="footer" showaddelement="yes" /

/div

/body

/html

Explicación detallada de cada parte del código:

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
:Esta etiqueta le informa al navegador de que se está trabajando con una página XHTML. Esta información la pasamos por alto para no añadir complejidad a la guía. Simplemente debes saber que le indica al navegador con qué tipo de código va a trabajar para que sepa interpretarlo. En otras guías más complejas abordaremos este punto.

html
xmlns
:Esta etiqueta informa de que en su interior y hasta donde llegue su cierre/htmllo que hay dentro es el código XHTML que conforma la página que estamos construyendo, la plantilla, la base de todo el Blog.

head:Esta etiqueta le informa al navegador de que dentro de ella se compondrá el apartado "head", cabeza en inglés. Dentro de él está la cabecera del XHTML que estamos formando. La parte de códigotitletítulo/titleexpresa que en el interior de la etiquetatitlehasta que se cierre con/titletendremos el título que queramos ponerle a la página. Como cualquier otra etiqueta elheaddebe cerrarse con su etiqueta con/indicando que se cierra la etiqueta:head.Dentro detitley su cierre/titleencontramos el códigodata:blog.pageTitle/:
En XHTML se hace referencia al atributodata:para poner delblogel.pageTitle,el título de la página. Así pues, será el título de la página que aparecerá en la barra de título de tu navegador. Coincidirá con el del nombre del Blog.

body:Es el cuerpo la plantilla que estamos creando. Va desde donde ponemos la etiquetabodyhasta donde aparezca su cierre/bodycon su correspondiente/.En su interior hemos escritodata:blog.title/:
En XHTML se hace referencia al atributodata:para poner delblogel.title. Así pues, será el título del Blog que aparecerá como texto dentro de la página principal del Blog. Si os dais cuenta, al estar en elbodyserá texto que aparecerá en el navegador "dentro del cuerpo" del propio Blog.

Los contenedores añadidos al código general en esta entrega del cursillo:

div id="cabecera"
b:section id="header" class="header" showaddelement="yes" /

/div

Asi estamos creando un contenedor para la cabeceradiv id="cabecera"que contiene en su interiorb:section id="header" class="header" showaddelement="yes" /una sección de identificadorheaderyclaseheaderque le dice a Blogger que en su interior se encontrará todo lo correspondiente a la zona de cabecera.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamecabecerapara delimitar su ancho, alto, etc...

div id="cuerpo"
b:section id="main" class="main" showaddelement="yes" /

/div

Asi estamos creando un contenedor para la parte principal del blog, su cuerpodiv id="cuerpo"que contiene en su interiorb:section id="main" class="main" showaddelement="yes" /una sección de identificadormainyclasemainque le dice a Blogger que en su interior se encontrará todo lo correspondiente a las entradas del Blog.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamecuerpopara delimitar su ancho, alto, etc...

div id="barra-lateral"
b:section id="sidebar" class="sidebar" showaddelement="yes" /

/div

Asi estamos creando un contenedor para una barra lateral del blog,barra-lateralque contiene en su interiorb:section id="sidebar" class="sidebar" showaddelement="yes" /una sección de identificadorsidebaryclasesidebarque le dice a Blogger que en su interior se encontrará todo lo correspondiente a la barra lateral Blog.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamebarra-lateralpara delimitar su ancho, alto, etc...

div id="pie"
b:section id="footer" class="footer" showaddelement="yes" /

/div

Asi estamos creando un contenedor para el pie del blog,pieque contiene en su interiorb:section id="footer" class="footer" showaddelement="yes" /una sección de identificadorfooteryclasefooterque le dice a Blogger que en su interior se encontrará todo lo correspondiente al pie del Blog.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamepiepara delimitar su ancho, alto, etc...

/bodyy/htmlcierran el cuerpo de la plantilla y la plantilla respectivamente.

4)Pulsa "Guardar Plantilla". Te debe haber quedado algo como lo que ves en la pantalla a continuación:

¡Eso es todo!, en la próxima entrega empezamos a jugar con los estilos para darle un poco de forma a la plantilla.

Donate Car To Charity CALIFORNIA DONATE CAR FOR TAX CREDIT DONATE CARS IN MA DONATE YOUR CAR SACRAMENTO HOW TO DONATE A CAR IN CALIFORNIA DONATE YOUR CAR FOR KIDS,CAR INSURANCE QUOTES COLORADO ,NUNAVUT CULTURE,DAYTON FREIGHT LINES HARDDRIVE DATA RECOVERY SERVICES,DONATE A CAR IN MARYLAND,MOTOR REPLACEMENTS,CHEAP DOMAIN REGISTRATION HOSTING,DONATING A CAR IN MARYLAND Mundial Football Los Abogado de lesiones personales en Chicago,FIFA World Cup son muy buenos en chicago y nos ofrecen una Cotizacion de seguro y Cotizacion de Seguro de Vida y Cotizacion de seguro de coches,mesotelioma. Y visitar mesothelioma lawyers o tambien podriamos visitar mesothelioma symptoms y lexington law tambien many people lexington law firm and merlin olsen mesothelioma many people mesothelioma trial lawyers and atlanta mesothelioma lawyers Mesothelioma law firm, massachusetts mesothelioma attorney EEUU,Selling annuity payments for cash,Sell my structured settlement,Sell structured settlement,Structured settlement,Structured settlement companies,Sell my annuity payments lump sum,Car accident lawyer Denver,Accident injury attorneys,Sell my annuity

martes, 10 de diciembre de 2013

desde0

Curso Blogger: Crea tu primera plantilla – cancer – coche – Shipping

Comprender el funcionamiento de la plantilla de Blogger te abre las puertas a un nuevo nivel de conocimiento en la herramienta, pasas de ser un usuario estándar a convertirte en un usuario avanzado. Es muy distinto trabajar con la plantilla de Blogger sin saber qué está sucediendo "detrás" que sabiendo qué sucede y cómo controlarlo para conseguir el efecto que te propones.

Hicimos un primer acercamiento a laestructura de una página HTML y de qué está compuesta para poder comprender con mayor facilidad ahora cómo funciona el XHTML de la plantilla de Blogger.

Vamos a dar luz a esas sombras que puedes tener de "qué es esta parte del código de la plantilla" o "para qué sirve" poco a poco, sin emplear lenguaje técnico, sólo con el ánimo de que todos lleguemos a conocer en mayor profundidad el funcionamiento de este fantástico medio de comunicación proporcionado por Google.

NOTA IMPORTANTE: En todas las entradas del cursillose evita utilizar terminología compleja o excesivamente técnica. Se trata de acercar con la mayor simplificación posible el código a todas las personas que deseen conocerlo. Si eres un purista o un experto en la materia, es posible que incluso te resulte aburrido. No se va a utilizar en ningún momento palabras o nomenclatura de programación convencional, esto va dirigido a aquellos que no tienen ninguna o poca experiencia en programación de páginas web y desean conocer cómo funciona su herramienta preferida: Blogger.

La teoría necesaria para encarar la práctica:

Los que lo deseéis podéis crearos un Blog de pruebas para experimentar lo que vamos explicando. Es muy recomendable porque como más se aprende es practicando, pero si no queréis dar el paso, simplemente podéis leer la guía para haceros a la idea de cómo se compone la plantilla.

Para crearos un Blog desde cero que os sirva de pruebas, podéis realizaresta guía.

¿Cómo se programa en XHTML ó HTML?, el nivel más mínimo de la estructura, la etiqueta:

El XHTML es el "lenguaje" en el que nos basamos para escribir en Blogger. Al igualque explicamos con el HTML,Una página XHTML posee una estructura clara que le indica al navegador dónde está la "cabecera" de la página, el cuerpo de la página y su final. Toda la estructura se compone con etiquetas:

etiqueta /etiqueta

El cuerpo de la plantilla se compone de un conjunto de "etiquetas" cuyo comienzo y final se acompañan del símbolo "menor que"y el símbolo "mayor que".Ambos caracteres delimitan el cuerpo de la etiqueta. Dentro de ella se escriben "palabras clave" que el navegador interpreta como "normas" para montar una página.

Normalmente, en HTML las etiquetas llevan una etiqueta de aperturaetiquetay otra de cierre/etiquetaque suele llevar una/para indicar que la etiqueta se está cerrando. En XHTML la terminación o cierre de una etiqueta se puede realizar en la propia etiqueta
etiqueta/o con una etiqueta de cierre.

¿Porqué XHTML?, ¿Cómo funciona el código en Blogger?:

Simplificando al máximo, tanto el HTML como el XHTML son lenguajes de marcado (de etiquetas) que al final es interpretado por el navegador. La diferencia fundamental entre ambos es que en el XHTML las etiquetas que se utilizan pueden ser propias de quien las utiliza:

Blogger contiene etiquetas y funciones propias que se escriben en XHTML y que luego se interpretan en una página HTML:

Un ejemplo práctico para comprenderlo perfectamente:

Lo que enHTML se escribiría para poner el título así:

head

tittle esto es el título de la página /tittle

/head

EnXHTML deBlogger se escribiría así para meterlo dentro de sus propias etiquetas:

head

titledata:blog.pageTitle/ /title

/head

En ambos ejemplos de código se escribe prácticamente lo mismo, estudiemos las diferencias, son muy sencillas, ¡verás qué fácil!:

head/headEn HTML y XHTML de Blogger se escriben las etiquetas que indican la parte de cabecera de la página.head(cabeza en inglés) expresa la zona de la página donde se van a colocar aspectos que corresponden a la cabecera. En este caso, dentro de la cabecera de una página se suele poner el títulotittle.Así pues entre la etiqueta que marca el comienzo de la cabeceraheady la que marca su final/head,en su interior se escribe el título remarcado entre la etiquetatittley/title.

En el HTML convencional entretittley/titlese escribe el título "esto es el título de la página" como vemos en el ejemplo, pero en el XHTML se referencia adata:blog.pageTitle/.

En XHTML se hace referencia al atributodata:para solicitar delblogel.pageTitle,el título de la página. En XHTML se interpreta cada comandodata:luegoblogy después.pageTitlepara terminar pasándole al navegador una página HTML en la que si le das a "ver código fuente" aparecerá lo mismo que en el ejemplo HTML:

head

tittlelo que el Blog tenga en su atributo data para el título de la página/tittle

/head

Así pues, aunque en la plantilla escribesdata:blog.pageTitle/cuando ves el código que ha interpretado finalmente el navegador, ves ya el HTML:tittleesto es el título de la página/tittle.

Esto permite a Blogger mantener un código más limpio y unificado de cómo debe ponerse el título de un Blog accediendo a sus datos, en lugar de que cada Blog utilice su propio HTML para componerse el título a su gusto. Es por un lado más cerrado pero por otro más limpio, fácil de leer y estandarizado para todos. ¿A que es más sencillo de lo que pensabas?.

Aprendiendo a hacer tu primera plantilla "vacía", con sólo el texto: ¡Hola mundo!.

Si te has creadoun Blog de pruebas, puedes seguir estos pasos y conseguir tener una idea clara de cómo se genera tu plantilla. Si no lo has hecho, puedes leer los pasos para entender cada punto con especial énfasis en el que se explica el código de la plantilla.

1) En tuBlog de pruebas, ve directamente en el menú de la izquierda a la opción "Plantilla".

2)Pulsa el botón gris "Editar HTML" y borra todo el código que aparece en la plantilla (puedes pulsar en Chrome CONTROL+ A y después cuando esté seleccionado todo el código pulsa el botón "Supr" para suprimir el texto seleccionado).

3)Ahora copia el código que te pongo a continuación y pégalo directamente como nuevo código para tu plantilla:

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'

head

titledata:blog.pageTitle//title

b:skin![CDATA[/*

/b:skin

/head

body
data:blog.title/
b:section class='header' id='header'/
/body

/html

Explicación detallada de cada parte del código:

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
:Esta etiqueta le informa al navegador de que se está trabajando con una página XHTML. Esta información la pasamos por alto para no añadir complejidad a la guía. Simplemente debes saber que le indica al navegador con qué tipo de código va a trabajar para que sepa interpretarlo. En otras guías más complejas abordaremos este punto.

html
xmlns
:Esta etiqueta informa de que en su interior y hasta donde llegue su cierre/htmllo que hay dentro es el código XHTML que conforma la página que estamos construyendo, la plantilla, la base de todo el Blog.

head:Esta etiqueta le informa al navegador de que dentro de ella se compondrá el apartado "head", cabeza en inglés. Dentro de él está la cabecera del XHTML que estamos formando. La parte de código titletítulo/titleexpresa que en el interior de la etiquetatitlehasta que se cierre con/titletendremos el título que queramos ponerle a la página. Como cualquier otra etiqueta elheaddebe cerrarse con su etiqueta con/indicando que se cierra la etiqueta:head.Dentro detitley su cierre/titleencontramos el códigodata:blog.pageTitle/:
En XHTML se hace referencia al atributodata:para poner delblogel.pageTitle,el título de la página. Así pues, será el título de la página que aparecerá en la barra de título de tu navegador. Coincidirá con el del nombre del Blog.

body:Es el cuerpo la plantilla que estamos creando. Va desde donde ponemos la etiquetabodyhasta donde aparezca su cierre/bodycon su correspondiente/.En su interior hemos escritodata:blog.title/:
En XHTML se hace referencia al atributodata:para poner delblogel.title. Así pues, será el título del Blog que aparecerá como texto dentro de la página principal del Blog. Si os dais cuenta, al estar en elbodyserá texto que aparecerá en el navegador "dentro del cuerpo" del propio Blog.

Blogger obliga a que como mínimo dentro de una plantilla de un blog, aunque esté "vacía" como mínimo exista una sección:
Las secciones en el XHTML de Blogger indican "divisiones", "secciones" dentro de una página. Se hacen secciones para almacenar en su interior "barras laterales", "menús", "anuncios"... cada sección contendrá en su interior "Widgets" que compondrán los componentes que forman el Blog. En este caso, como en esta entrada de la guía no vamos a entrar en el capítulo de los Widgets, dejamos vacía la sección:
b:section class='header' id='header'/

b:sectionindica que estamos abriendo sección y que termina con el cierre de etiqueta/.Se puede terminar tambiéncerrando la etiquetab:sectioncon y poneindo después/b:section.

class='header'indica que estamos abriendo sección de la claseheadero cabecera del blog. Este nombre es libre, aunque en Blogger se suele utilizar como iremos viendo en otras entradas"navbar" (barra de navegación), "header" (cabecera), "main" (principal), "sidebar" (barra lateral) y "footer" (pié) para referenciar a distintas clases de secciones que pueden manejarse dentro de un blog.
id='header'Establece el nombre o identificador (id) que se le pone a lab:section,es decir, el nombre que se le pone a la sección. Este nombre no se puede repetir en toda la plantilla para ninguna sección.

/bodyy/htmlcierran el cuerpo de la plantilla y la plantilla respectivamente.

4) Pulsa "Guardar Plantilla". Te debe haber quedado algo como lo que ves en la pantalla a continuación:

5)Por último si le das al botón "Ver Blog" verás que aparece el texto del título del Blog. ¡Tu primera plantilla desde cero, creada y entendida por ti!, ¡enhorabuena!:

Eso es todo, si has comprendido este punto, ya estás listo para ¡saltar a los widgets!... en la próxima entrega.

Si hay algo que no te haya quedado claro o que desees cambiar en la guía para que se comprenda mejor, por favor coméntalo, esta guía es para ti para que te sea lo más sencillo posible.

Donate Car To Charity CALIFORNIA DONATE CAR FOR TAX CREDIT DONATE CARS IN MA DONATE YOUR CAR SACRAMENTO HOW TO DONATE A CAR IN CALIFORNIA DONATE YOUR CAR FOR KIDS,CAR INSURANCE QUOTES COLORADO ,NUNAVUT CULTURE,DAYTON FREIGHT LINES HARDDRIVE DATA RECOVERY SERVICES,DONATE A CAR IN MARYLAND,MOTOR REPLACEMENTS,CHEAP DOMAIN REGISTRATION HOSTING,DONATING A CAR IN MARYLAND Mundial Football free legal advice,FIFA World Cup cheap web hosting donde me dieron un available domain name,cheap domain name registration,pero salio muy caro y mejor me hice student credit card ,accept credit pero me recomendaron mejor utilizar credit counseling service donde tienen un mejor soporte y credito support stocking pero mejor me compre un linux hosting y mejor me afilie a affiliate programs pero buy �web position gold�,microsoft certification,Mesothelioma law firm,Selling annuity payments for cash,Sell my structured settlement,Sell structured settlement,Structured settlement,Structured settlement companies,Sell my annuity payments lump sum,Car accident lawyer Denver,Accident injury attorneys,Sell my annuity

lunes, 9 de diciembre de 2013

CSS, Trucos

Numerando con CSS. Secciones de un artículo con HR – Hard drive

Con CSS se pueden hacer muchísimas cosas pero a veces es difícil imaginar la aplicación práctica que cubre precisamente lo que queremos conseguir. En esta entrada veremos una de esas tonterías que de cuando en cuando se me ocurren y que puede servir para ir separando los distintos apartados de una entrada mediante barras de separación horizontal (hr), pero con la peculiaridad de que incorporarán automáticamente un número ordinal.

Para ello echaré mano de uno de los valores que podemos usar en la propiedadcontent y que es el denominadocounter. Este funciona tal y como nos anticipa su traducción, como un contador, y cómo su uso es muy sencillo, aprovecharemos principalmente para verlo con un poco de detalle.

La primera consideración es quecounter sólo puede ser usado como valor de los pseudoelementos:before o:after, por lo que será añadido respectivamente al principio o al final de la caja que lleve el selector principal.

Supondremos que lo que queremos es añadir un ordinal delante de cada elemento de determinada lista (li). Es algo poco eficaz porque con usar listas ordenadas (ol) ya lo tendríamos, pero lo hago sólo para poder ilustrar esto con un ejemplo.

Yo he bautizado el contador con el nombrecontadorlista, pero como con cualquier variable, cada cual le puede llamar como guste.

Los contadores pueden ser diversos así que en un principio necesitamos usar dos propiedades, una para nombrar cada contador y especificar su formato (counter) y otra que indicará en qué selector hay que ir sumando haciendo referencia al nombre del contador. Esta segunda se denominacounter-increment.

Supongamos un HTML como el siguiente:

ul class="listanumerada"
 liContenido uno/li
 liContenido dos/li
 liContenido tres/li
 liContenido cuatro/li
/ul

Para que a esa lista en concreto se le añada automáticamente un número delante de cada elemento, tendríamos que usar algo como esto:

ul.listanumerada li:before {
content: counter(contadorlista);
counter-increment: contadorlista;
}

Ahí lo que estamos indicando es que queremos insertar un contenido que será precisamente un contador llamadocontadorlista y que además, cada vez que "pasemos" por un nuevo elemento de lista, el contador se incremente y así se vayan generando los ordinales (1, 2, 3, 4, etc.) para cada uno de ellos.

Como hemos usado:before, el número se añadirá justo antes del contenido del elemento de lista.

Pero falta un detalle para que todo funcione bien y es que tenemos que poner a cero el contador en alguna parte, realmente en una caja que localizamos por el nombre de su selector.

Esto se logra concounter-reset, que se puede poner en cualquier selector siempre que sea antecesor, pero para que quede el código más junto y comprensible para futuras modificaciones, la puesta a cero la haremos al nivel del contenedor de la lista; en el ejemploul (ul.listanumerada):

ul.listanumerada {
counter-reset: contadorlista;
}

Pues ya lo tenemos todo, así que con el HTML que vimos antes y esas dos reglas CSS que puse después, nos debería salir algo como esto:

Contenido uno
Contenido dos
Contenido tres
Contenido cuatro

De la misma manera podéis numerarspan,div,p, o cualquier otro tipo de elemento con un determinado nombre y lo único que habría que tener en cuenta es lo de usar en el lugar adecuadocounter-reset,counter ycounter-increment.

Hay una cosa más y es que en elcontent se puede añadir texto y ciertos símbolos junto con el contador. De esa manera podremos insertar un espacio en blanco tras el número para evitar lo que nos pasó antes y que no salga tan pegado. También podemos meter en número entre paréntesis o añadir la palabra "Capítulo" con declaraciones como estas:

content: "(" counter(contadorlista) ") ";
...
content: "Capítulo " counter(contardorlista);

Y no sólo podemos poner números. Los estilos para el contador se pueden configurar desdecounter y sus valores coinciden con los que se pueden usar en listas ordenadas. Los más comunes son:

decimal: números decimales comenzando por el 1 (1, 2, 3, 4...)
decimal-leading-zero: idem pero con tantos ceros a la izquierda como sean necesarios para que todos tengan la misma cantidad de caracteres (para listas de entre 100 y 999 elementos sería: 001, 002, 003, 004... 099, 100, 101...)
lower-roman: números romanos en minúsculas (i, ii, iii, iv...)
upper-roman: idem en mayúsculas (I, II, III, IV...)
lower-latin: letras en minúsculas (a, b, c, d...)
upper-latin: idem en mayúsculas (A, B, C, D...)

El valor deseado habría que añadirlo con una coma tras el nombre que le dimos al contador:

content: counter(contadorlista, lower-latin);

Una vez que sabemos todo esto, ya es fácil darle estilo a la etiquetahr de manera que cada vez que añadamos una en una entrada, automáticamente incluya un ordinal como se puede ver en este mismo post (I a VI).

.post-body {
counter-reset: numeros;
}
.post-body hr {
height: 4px;
margin: 40px 0 20px;
border: 0;
text-align: center;
background: #999;
}
.post-body hr:after {
content: "Capítulo " counter(numeros, upper-roman);
counter-increment: numeros;
position: relative;
top: -8px;
padding: 4px 12px;
font-size: 12px;
color: #fff;
background: #999;
border-radius: 0;
}

Tras insertar lo anterior en nuestro CSS, cualquier separación horizontal (hr) que añadamos dentro de una entrada, nos aparecerá con un número generado automáticamente.

Lo suyo sería que probarais variaciones para usarlo con vuestras recetas, novelas, manuales de instrucciones, etc. y para ello, he preparado esteCodePen con algunas pequeñas variaciones sobre este. No olvidéis que igual que aquí lo utilizo conhr, se podría hacer igual con cualquier otra etiqueta o selector.

MESOTHELIOMA LAW FIRM DONATE CAR TO CHARITY CALIFORNIA HARDDRIVE DATA RECOVERY SERVICES DONATE A CAR IN MARYLAND DONATING A CAR IN MARYLAND,DONATE CARS ILLINOIS,CRIMINAL DEFENSE ATTORNEYS FLORIDA ,BEST CRIMINAL LAWYER IN ARIZONA STRUCTURED ANNUITY SETTLEMENT,ASBESTOS LAWYERS,NUNAVUT CULTURE,DAYTON FREIGHT LINES ,Bextra Bankruptcy Dental Plan Private JetPero tuve que ser Mundial Football consolidating FIFA World Cup web host rating,register web address,online psychology degree,her first lesbian sex, make extra money ,make money fast and easy,addwords y mejor obtuve un credit application,visa gift carda,Mesothelioma law firm,voip phone service,Selling annuity payments for cash,Sell my structured settlement,Sell structured settlement,Structured settlement,Structured settlement companies,Sell my annuity payments lump sum,Car accident lawyer Denver,Accident injury attorneys,Sell my annuity

Donate Car To Charity CALIFORNIA DONATE CAR FOR TAX CREDIT DONATE CARS IN MA DONATE YOUR CAR SACRAMENTO HOW TO DONATE A CAR IN CALIFORNIA DONATE YOUR CAR FOR KIDS,CAR INSURANCE QUOTES COLORADO ,NUNAVUT CULTURE,DAYTON FREIGHT LINES HARDDRIVE DATA RECOVERY SERVICES,DONATE A CAR IN MARYLAND,MOTOR REPLACEMENTS,CHEAP DOMAIN REGISTRATION HOSTING,DONATING A CAR IN MARYLANDNos ofrece Mundial Football eloan com, FIFA World Cupuna gran variedad para contratar mesothelioma info y obtener un equity line of credit y una buena estructura de negocio SEO consolidate loans y visitar su casa matriz Mesothelioma law firm,home equity loans domain name search Selling annuity payments for cash,Sell my structured settlement,Sell structured settlement,Structured settlement,Structured settlement companies,Sell my annuity payments lump sum,Car accident lawyer Denver,Accident injury attorneys,Sell my annuity

anti spam appliance WordPress themes for designers Best social media platforms Hire php programmers massage school dallas texas email bulk service Car Insurance Quotes Utah Cheap car insurance in Virginia dui lawyer scottsdale NEUSON car accident lawyers Make money online Australia domain name yahoo Dwi lawyer Dayton Freight Lines Online casino low credit line credit cards royalty free images stock refinance with bad credit World trade center footage DALLAS MESOTHELIOMA ATTORNEYS Social media campaigns Low credit line credit cards Best Criminal Lawyers in Arizona Casino business administration masters Bankruptcy lawyer Car Donate Virtual Data Rooms Neuson Casino reviews google adsense Online Criminal Justice Degree Best social media platforms for business Mobile casino Annuity Settlements Forex Trading Platform Insurance Hire php developers CHEAP CAR INSURANCE IN VIRGINIA Attorney Criminal Defense Attorneys Florida Live casino Social media platforms for business Criminal lawyer Better Conference Calls offshore accident lawyer Met auto HOME PHONE INTERNET BUNDLE Custom WordPress theme designer DUI lawyer Paperport Promotional Code Injury Lawyers small business administration sba PHD IN COUNSELING EDUCATION Christmas cards Asbestos Lawyers Life Insurance Co Lincoln new mexico mesothelioma lawyer Computer science classes online mesothelioma care Auto Mobile Insurance Quote Photo Christmas cards Cheap Auto Insurance in VA illinois law lemon CAR DONATE bowne virtual data room mesothelioma lawsuits NUNAVUT CULTURE Service business software World Trade Center Footage Criminal defense lawyer new york mesothelioma law firm Php programmers for hire Hire php developer Psd to html compare life assurance Home phone internet bundle Car Insurance Companies ONLINE COLLEDGES Php programmers mesothelioma lawyer dallas PSYCHIC FOR FREE EMAIL BULK SERVICE How to Donate A Car in California Seo companies houston mesothelioma attorney Mesothelioma Law Firm Social media tools webex costs cheap domain registration hosting Proud Italian cook Cheap Car Insurance in Virginia wisconsin mesothelioma attorney Donating a Car in Maryland Donate your Car for Money New social media platforms holland michigan college Futuristic architecture Best Seo company Nunavut culture DONATE YOUR CAR SACRAMENTO Business finance group BETTER CONFERENCING CALLS futuristic architecture Social media strategies Car Insurance Quotes PA Motor Replacements Cheap Car Insurance for Ladies donate car for tax credit criminal defense federal lawyer anti spam exchange server Seo services Hard drive data recovery services Business management software mesothelioma help personal injury lawyer Seo company Online Christmas cards Met Auto Custom Christmas cards earthlink business internet DONATE YOUR CAR FOR KIDS WordPress hosting Donate Your Car Sacramento Donate cars in ma Psd to WordPress Html email Social media examiner business voice mail service CHEAP DOMAIN REGISTRATION HOSTING Social media management Tech school canada personals yahoo Social media platforms car insurance quotes mn ONLINE MOTOR INSURANCE QUOTES Donate car for tax credit paperport promotional code Gas/Electricity WordPress theme designers WORLD TRADE CENTER FOOTAGE Home Phone Internet Bundle Italian cooking school Adobe illustrator classes Learning adobe illustrator mesothelioma attorney Donate your car for money Car insurance quotes Utah Online College Course accident attorney san bernardino Donate Car to Charity California mesotheioma structered settlement Donate Car for Tax Credit Car Accident Lawyers home phone internet bundle Donate Cars in MA sell structured settlement calculator Sell Annuity Payment MESOTHELIOMA LAW FIRM mesotheliama mesothelioma lawyer chicago Email Bulk Service Donate Your Car for Kids Structures Annuity Settlement phd in counseling education Car Insurance Quotes Colorado PhD in counseling education Nunavut Culture Hard drive Data Recovery Services Donate a Car in Maryland Cheap Domain Registration Hosting Car insurance in South Dakota Donate Cars Illinois Car Insurance Quotes structured settlement buyers Online colledges mesothelioma lawyers san diego Holland Michigan College car donate Online Motor Insurance Quotes Motor Insurance Quotes CAR INSURANCE QUOTES PA Online Colleges buying structured settlements buy gift card Online Classes STRUCTURED ANNUITY SETTLEMENT motor insurance quotes structured settlement brokers integrated ehr Massage School Dallas Texas Psychic for Free Donate Old Cars to Charity mesothelioma attorney illinois mesothelioma claims Low Credit Line Credit Cards Cheap domain registration hosting Criminal defense attorneys Florida asterisk call center software domain yahoo Dallas Mesothelioma Attorneys Car Insurance Quotes MN boca raton personal injury attorney mesothelioma lawyer california motorcycle accident lawyer san diego event management security Forensics Online Course Donating Used Cars to Charity

CosasParaMiBlogs

jueves, 12 de diciembre de 2013

Curso Blogger: crea tus contenedores – Virtual

Aprendiendo a "maquetar" y colocar los "contenedores de información" que formarán nuestro Blog:

¿Cómo se montan estos "contenedores de información"?

¿Cómo distingo unos contenedores de otros?, ¿cómo se identifican?

¿Cómo defino el aspecto y presentación que tendrá la información que va dentro de cada contenedor?

Usando los conceptos aprendidos en nuestra plantilla de pruebas en Blogger:

martes, 10 de diciembre de 2013

Curso Blogger: Crea tu primera plantilla – cancer – coche – Shipping

La teoría necesaria para encarar la práctica:

Aprendiendo a hacer tu primera plantilla "vacía", con sólo el texto: ¡Hola mundo!.

lunes, 9 de diciembre de 2013

Numerando con CSS. Secciones de un artículo con HR – Hard drive

Popular Posts

Blogger news

Labels

Blog Archive