compartidísimo: Diseño

Mostrando entradas con la etiqueta Diseño. Mostrar todas las entradas

17 junio 2015

Crear Secciones en las Plantillas para Agregar Widgets

Ayer o antier (nótese que feliz vivo) vi que Blogger hizo unos cambios en la sección de "Diseño". Ahora cada sección aparece delimitada y se muestra con el nombre del Id con el que fue nombrada. Así que vamos a aprovechar esta novedad para hablar sobre este tema, ¿te apuntas?.

Todas las plantillas de Blogger fueron creadas a partir de secciones, con el fin de facilitarnos a los usuarios incluir widgets fácilmente usando la funcionalidad: "Añadir un gadget" que encontramos en Diseño y con la que probablemente ya estarás muy familiarizado si utilizas el servicio.

Los widgets son esos elementos que seguramente ya has agregado al blog, como por ejemplo: la lista de páginas o una lista de enlaces. Aunque, algunos ya vienen incluidos por defecto al crear el blog, como lo son el widget de la cabecera o el de las entradas del blog.

En la siguiente imagen puedes ver cómo se ve la sección que incluye el widget de las entradas (Blog1), y que fue nombrada como: "main".

Seccion de la pagina principal del blog en Diseño

Es posible crear secciones para agregar widgets desde la sección de Diseño. Para lograrlo, es necesario utilizar código propio de Blogger así como hacemos con el código condicional para incluir o excluir elementos en la plantilla.

Para crear una sección hay que usar una etiqueta llamada: <b:section> y ésta debe llevar una etiqueta de cierre: </b:section>.

Dicha etiqueta: <b:section> es devuelta por Blogger al navegador como una etiqueta: <div>; en otras palabras Blogger convierte su etiqueta <b:section> en un <div> que en HTML es una etiqueta que permite dividir/delimitar el contenido de la página en secciones.

El código de las secciones puede incluir ciertos atributos. Solo uno de ellos es obligatorio, mientras que el resto se pueden agregar de forma opcional si se necesitara.

Puedes ver la lista completa de atributos desde la página de Blogger.

El único atributo obligatorio de una sección es:
-"id", y su valor debe ser un nombre único, es decir, no puede repetirse al igual que ocurre con el id de un div en HTML. Puede ser un nombre que incluya letras y números, por ejemplo, puede nombrarse: "seccion_menu" o "columna1".

Ya sabiendo que la sección debe incluir solo el atributo "id" de forma obligatoria, podemos crear una sección en su forma más simple y el código de ésta se vería más o menos así:
<b:section id='seccion1'></b:section>
O simplemente lo pondríamos así:
<b:section id='seccion1'/>
Ya que en un principio la sección no tendrá ningún widget, es decir, la etiqueta no encierra o envuelve ningún código de un widget.

Una vez agregado el código de la sección en el código fuente de la plantilla, se estará habilitando la funcionalidad de añadir widgets y se podrán agregar desde la sección de Diseño.

seecion que muestra el enlace añadir un gadget

Para definir la apariencia de la sección creada, usamos su id al crear la regla de CSS, del mismo modo que se hace con un <div> en HTML; por ejemplo:

#seccion1 {

width: 100%;

position: relative; 

...

}

Es decir, ponemos la almohadilla: "#" antes del nombre que es "seccion1" que es el valor del atributo: id de la etiqueta: <b:section>.

También podemos definir reglas de CSS para definir la apariencia de la sección si usamos el nombre/valor del atributo "class" (que es opcional), si por ejemplo queremos usar la misma regla para varias secciones.

Código de los widgets de Blogger

Cuando creamos una sección y agregamos un widget usando el enlace: "Añadir un gadget", aparecerá el código del widget dentro de la sección.

Los widgets utilizan una etiqueta denominada: <b:widget>. Puede incluir atributos y solo dos de ellos son obligatorios.

Los atributos obligatorios de la etiqueta: <b:widget> son:

id: que permite identificar el widget. Puede ser un nombre que incluya letras y números y son exclusivos, es decir no se puede repetir.
type. Cuyo posible valor incluye el nombre del widget que ha definido Blogger y estos son los más comunes que se agregan al blog u otros ya vienen por defecto:

BlogArchive (el widget del Archivo)
Blog (corresponde a las entradas del blog)
Header (el widget de la cabecera)
PageList (lista de páginas)
HTML (para agregar código HTML o JavaScript)
Image (para agregar una imagen)
LinkList ( lista de enlaces)
List (una lista con viñetas)
BlogProfile (perfil del autor)
Navbar (la barra superior de Blogger)
Gadget (los widgets de terceros, es decir, que no son de Blogger)

Todos los tipos de widgets de Blogger están acompañados de un número, empezando por el 1, Por ejemplo: "Blog1" que es el widget de las entradas.

Algunos widgets solo se puede agregar solo una vez, como el widget de lista de páginas, mientras que otros se pueden agregar de forma indefinida y Blogger los va numerando sucesivamente al irse agregando.

El código de un widget puede incluir código HTML además del código de Blogger. Por lo general incluye también código condicional, para mostrar contenido según la configuración de widget. Por ejemplo, se muestra el título si se ha agregado, o se muestra una versión distinta según el tipo de dispositivo con el que es visto el blog, como por ejemplo sucede con el widget de lista de páginas: éste tiene una estructura definida para la plantilla móvil y solo es devuelta por Blogger cuando un usuario visita el sitio usando un dispositivo móvil.

Resumen y Conclusiones

Las secciones de Blogger se crean con el propósito de habilitar la funcionalidad de agregar widgets al blog desde la sección de "Diseño" anteriormente llamada: "Elementos de la página".
El código de las secciones solo sirve para incluir dentro código de widgets.
Para crear secciones es necesario utilizar la etiqueta <b:section>.
Una sección que utiliza la etiqueta <b:section> es devuelta por Blogger como un <div>.
El código de los widgets llevan la etiqueta <b:widget>.
Tanto la etiqueta <b:section> como la etiqueta <b:widget> pueden llevar atributos.
El único atributo obligatorio de la etiqueta <b:section> es "id", mientras que los atributos obligatorios de la etiqueta <b:widget> son "id" y "type".
Los widgets son elementos que agregamos al blog desde la sección de "Diseño", usando el enlace que dice: "Añadir un gadget".
Los widgets pueden incluir código HTML además del código de Blogger (sus propias etiquetas y elementos).

Saber crear secciones resulta muy útil para cualquier diseñador que cree plantillas para otros, ya que ofrece a los usuarios la posibilidad de gestionar el contenido de los mismos fácilmente, sin tener que ingresar al código de la plantilla.

También es útil para cualquier webmaster que personalice su blog y desee sacar provecho de esta funcionalidad.

¿Listo (a) para crear secciones?

Referencia/Fuente:
Etiquetas de elementos de la página para los diseños:https://support.google.com/blogger/answer/46888?hl=es#

Por: Karla Castañeda en 6/17/2015 Seguir leyendo

13 mayo 2015

Novedades en los Códigos Condicionales Blogger (que permiten Mostrar Contenido o Excluirlo )

Recientemente Blogger hizo unos cambios en su código condicional. Ahora, en muchos casos, podemos usar menos código al crear sentencias condicionales, así que pensé que sería bueno dar una repasadita al tema.

Los códigos condicionales de Blogger, resultan muy útiles al personalizar el blog, ya que permiten llevar a cabo determinadas acciones como por ejemplo, incluir o excluir elementos de la plantilla en determinada página.

¿Alguna vez te has preguntado porqué en la página principal los títulos del blog son enlaces que dirigen a una entrada, y una vez que accedes a la página individual, ya no lo son? Pues éso sucede gracias a este código.

Este código se ejecuta del lado del servidor, éso quiere decir que Blogger lo procesa y luego devuelve los resultados al navegador y éste los muestra en pantalla.

Usándolo, podemos por ejemplo optimizar el encabezado del título del blog haciendo que en la página principal el título tenga una etiqueta h2 y al ingresar al post una etiqueta h1 (así como lo tengo en mi blog), también podemos excluir elementos de una manera eficiente, mostrar elementos en páginas con determinada etiqueta, cerrar comentarios automáticamente y mucho más.

En resumen y dicho de una forma breve, los códigos condicionales son una serie de instrucciones que ejecuta Blogger y permiten incluir contenido en el blog o excluirlo.

Cómo luce el código condicional

Formato
Una expresión condicional simple, que solo incluye una sola condición tiene el siguiente formato:

 <b:if cond='condición'>

[contenido que se va mostrar]

</b:if>

Si se cumple la condición, entonces se mostrará el contenido que pusimos dentro de ésta.

Dicho código está compuesto de una etiqueta b:if, y debe llevar una etiqueta de cierre </b:if>.

En las condiciones se usan ciertos elementos que permite devolver un resultado. Por ejemplo: <data:post.title/> devuelve el título de las entradas. Estos elementos tienen un formato: <data:name/>, en donde name es el nombre de la información que se va a utilizar.

Algunos datos pueden utilizarse en todo el blog, mientras que otros están reservados para usarse solo en un widget específico.

Puedes ver la lista maestra de todos los datos disponibles para los widgets de Blogger en su página.

Una novedad interesante, es que el código también puede incluir etiquetas b:elseif, además de la b:else, aunque ambas son opcionales. La primera sirve para mostrar contenido si aún no se ha mostrado contenido usando b:if, por otro lado b:else muestra contenido cuando no se cumplieron ninguna de las condiciones b:if o b:elseif previa (s).

Algo que ahora también resulta interesante, es que podemos simplificar las condiciones cuando usamos b:if o b:elseif si utilizamos: or y and dentro de la condición.

Con esta nueva posibilidad, nos estaremos ahorrando algunos caracteres (menos caracteres al final de cuentas es igual a un menor tamaño de nuestro documento/plantilla) y el código resultante es más legible.

Usando etiquetas b:if y b:elseif y b:else.

Formato

 <b:if cond='condition'>

  [contenido que se va mostrar si se cumple la condición]

<b:elseif cond='otra condition'>

  [contenido que se va mostrar si no se ha cumplido ninguna condición "if" ni "elseif"]

<b:else/>

  [contenido a mostrar si no se cumple ninguna condición "if" ni "elseif"]

</b:if>

Ejemplo de código condicional que usa las etiquetas b:if b:elseif y b:else y que se usa en las plantillas para el título de los entradas.

<b:if cond='data:post.title'>

<h3 class='post-title entry-title' itemprop='name'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

Antes de la actualización las plantillas usaban todo este código condicional para lograr lo mismo:

<b:if cond='data:post.title'>

<h3 class='post-title entry-title' itemprop='name'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<b:if cond='data:blog.url != data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

Los dos códigos arrojaran el mismo resultado, que es el título del post con una etiqueta h3 y que figura como enlace a la entrada, siempre y cuando no esté en la página individual. La diferencia es que el primero es más compacto, ya que con la nueva etiqueta b:elseif y el operador and se simplificó el código.

Lista de código condicional que resultan muy útil

Si la página actual es una página de Inicio

<b:if cond='data:blog.url == data:blog.homepageUrl'>[contenido]</b:if>

Si la página actual es una página estática

<b:if cond='data:blog.pageType == "static_page"'>[contenido]</b:if>

Si la página actual es una entrada individual

<b:if cond='data:blog.pageType == "item"'>[contenido]</b:if>

Si la página actual tiene determinada URL (especificamos la URL)

<b:if cond='data:blog.url == "URL_de_la_Página"'>[contenido]</b:if>

Si la página actual es una página no encontrada o de Error 404

<b:if cond='data:blog.pageType == "error_page"'>[contenido]</b:if>

Si la página actual en una página de archivo:

<b:if cond='data:blog.pageType de archivo == "archive"'>[contenido]</b:if>

Si la página actual es una página de inicio, o página de archivo o página de etiquetas o página de un búsqueda

<b:if cond='data:blog.pageType == "index"'>[contenido]</b:if>

Si la página actual es una entrada ó una página (una sola condicional para aplicar en dos tipos de página)

<b:if cond='data:blog.pageType in {"static_page", "item"}'>[contenido]</b:if>
que sería lo mismo que:

<b:if cond='{"static_page", "item"} contains data:blog.pageType'>[contenido]</b:if>

Así como usamos el operador: == que se significa: igual a, podemos usar != que significa lo contrario (no igual o desigual) para cambiar la condición.

Por ejemplo:
Si la página actual no es una página estática y no es una entrada individual (útil cuando usamos resúmenes automáticos en todas las páginas del blog, excepto por la página individual)

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>[contenido]</b:if>

Ejemplos de Usos

Aplicar CSS. Por ejemplo, vamos a imaginar que quieres que el color de fondo del blog cambie al estar en las páginas estáticas y en las entradas.

Para tal caso habrá de definir la regla de CSS para que ésto ocurra y ponerla dentro del código condicional, y lo haríamos así en las nuevas plantillas, y lo pondríamos después ]]></b:skin>

<b:if cond='data:blog.pageType in {"static_page", "item"}'><!--Si el tipo de página actual es una página estática, o una página individual-->

<style>body{background-color:green}<!--Se aplica un color verde al fondo--></style>

</b:if>

Para las viejas plantillas (de diseño como mínima, etc.) habrá que usar <style type="text/css"> en lugar de <style> para que valide según las especificaciones de la W3C.

Mostrar un elemento solo en la página principal. Imagina que quieres mostrar un elemento como un slideshow solo en la página principal. Para lograrlo creamos la condición y ponemos dentro el CSS y el script:

 <b:if cond='data:blog.url == data:blog.homepageUrl'>

<style>...</style>

<script>...</script>

</b:if>

Luego creamos la condición para el HTML, por ejemplo, supongamos que lo pusimos en una sección debajo de la cabecera:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id="seccion_slider">

...

</div>

</b:if>

De ese modo, tanto el CSS, el script como el HTML del slideshow se cargan solo en la página de inicio.

Ocultar/Excluir la columna lateral del blog en las páginas estáticas.
Si bien podemos ocultar la columna lateral del blog usando un display:none podemos hacerlo de forma más eficiente, si creamos una condición para que no se muestre en la página estática, y lo hacemos si envolvemos el código b:if en toda la estructura de la columna lateral.

Eso quiere decir que todos los elementos que estén en la columna lateral, no van a ser descargados por el navegador, a diferencia de usar display:none, en donde si se descargan pero no se muestran porque lo evitamos con ese CSS.

<b:if cond='data:blog.pageType != "static_page"'><!--Si la página actual no es una página estática, entonces se muestra la columna lateral-->

<aside>

...

</aside>

</b:if>

Como puedes ver el código condicional te ofrece un montón de posibilidades en el diseño del blog y en su optimización ;)

Referencias
Etiquetas de Blogger para Diseño del centro de ayuda oficial Blogger
Códigos de información de "Diseños" del centro de ayuda oficial Blogger
Entradas relacionadas de terceros que te recomiendo:
Uso de condicionales en Blogger
Usar condiciones

Por: Karla Castañeda en 5/13/2015 Seguir leyendo

17 abril 2015

¡Imagen Nueva en el Blog!

Tenía tiempo queriendo trabajar en el nuevo diseño del blog y hoy después de varias horas de trabajo, ¡tengo imagen nueva! ¡Al fin se respira un aire nuevo por aquí! ☺

Para ser honesta, casi termino no teniéndolo ya que empecé por convertir en un diseño adaptable (que pueda ser visto en distintas resoluciones de pantalla y distintos dispositivos) la plantilla que tenía anteriormente. Habiéndolo hecho y estando probándola en las herramientas de desarrollo de Chrome me dije: ¿Cómo está éso de que vas a seguir con el mismo diseño? ... Si ya tenía planes de cambiarlo hace tiempo...

Así que, en ese momento, decidí no esperar más y volverlo prioridad absoluta y ponerme a trabajar en ello al 100% dedicando todo mi tiempo libre disponible.

El diseño de la plantilla es adaptable. Éso quiere decir que van a cambiar ligeramente como se muestran los elementos en la plantilla, con el fin de que puedan ser vistos cómodamente en los distintos dispositivos tanto de escritorio como móviles.

telefono inteligente y laptop

He comprobado el resultado desde las herramientas de desarrollo de Chrome, y usando una de mis herramientas favoritas: http://quirktools.com. También en mis dispositivos móviles, sin embargo, no estoy exenta a que se me haya pasado algo, así que agradezco enormemente que me hagas llegar cualquier observación sobre algún error, con el fin de corregirlo.

Espero que puedas navegar cómodamente en el contenido, esa es la idea. Cualquier sugerencia o comentario que favorezca el uso del blog no dudes en hacérmela llegar. ¡Gracias!.

Los colores

Los colores principales que componen la plantilla son los siguientes.

paleta de colores

Color web de izquierda a derecha: #414141, #F66, #005970, #F6F6F6, #FEFEFE.

Algunos acentos con el color de fondo: #CFF5FE

Compatibilidad

Internet Explorer 9+, Google Chrome, Firefox y principales navegadores modernos.

Créditos y Agradecimientos

Quiero agradecer enormemente el hecho de que otros nos faciliten la tarea en el desarrollo de nuestras ideas ahorrándonos tiempo y más trabajo.

Sigo usando el script de Oloblogger para el resumen automático de las entradas que con algunos pequeños cambios, se adapta bien a lo que buscaba. Además, es más rápido y eficiente que otros scripts que circulan por ahí, según algunas herramientas que uso.

Utilizo la fuente Roboto servida desde Google Fonts API.

Utilizo también Animate CSS para algunas animaciones.

También quiero aprovechar para agradecer a Codrops y CSS Tricks, sitios en los que he aprendido varias técnicas y trucos que me fueron muy útiles en el proceso de desarrollo del diseño de mi plantilla.

Por supuesto también agradezco y muchísimo al mismísimo Blogger, que gracias a su tecnología es posible tener un sistema sencillo para poder administrar los contenidos del blog y facilita la inclusión y exclusión de gadgets y otros elementos.

Lo que sigue

Estaré trabajando en algunos detalles, por ejemplo la página de error 404, la página de formulario de contacto, entre otras páginas que aun tengo pendientes.

Voy a buscar la forma de mejorar el rendimiento del blog al usar la fuente roboto, que descargo desde la librería de fuentes de Google. Ya que al usarla me baja el puntaje en pagespeed bastante...

Y ¡qué siga la fiesta! que yo tengo muchas ganas de bailar ;)

¿Te gusta la nueva imagen del blog? No dudes en hacerme llegar tus comentarios, ya sean públicos o privados con el fin de mejorar y ofrecerte una navegación cómoda. ¡Recibe un abrazo fuerte!

Por: Karla Castañeda en 4/17/2015 Seguir leyendo

29 abril 2012

Truco rápido y sencillo para que el ancho de un elemento en un diseño fijo, se vea completo en la ventana del navegador

Una página con un diseño fijo, es aquel que utiliza un ancho comúnmente definido en pixeles (px). En este tipo de diseños, no cambia el ancho de la página si es visto en distintas resoluciones de pantalla, siempre se mantiene igual, por lo que, si el blog o página es visto en una resolución de pantalla "menor" al ancho que se tiene definido en dicha página, se formará una barra de desplazamiento horizontal para permitir desplazar la página horizontalmente y verla completa.

Si en dicho diseño, se tienen ciertas secciones como la cabecera, con un ancho definido de 100% para que éste ocupe el 100% de la ventana del navegador, al ser vista la página en resoluciones menores que el ancho definido de la página o blog, el fondo de dicha sección no se verá completa, ya que el navegador la cortará, por decirlo así, pues tomará en cuenta la resolución de pantalla en que sea visto.

Nota: Esto no ocurrirá si la cabecera o la sección además de tener definido un ancho en 100% tiene también definida una posición "fixed", es decir, que siempre se mantiene visible al desplazar la página hacia abajo. A ésto se le conoce comúnmente como: "que flota".

Para ilustrar lo que estoy diciendo, en la siguiente imagen se muestra el diseño de una página con diseño fijo. Tiene 960px (pixeles) de ancho, y tiene una cabecera o header (en inglés) con un ancho de 100% lo que hace que éste ocupe el total del ancho de la ventana del navegador.

A continuación puedes ver una simulación de cómo se vería el mismo diseño, pero visto en una resolución de pantalla de 800 pixeles.

Como puede apreciarse en la simulación, el fondo de la cabecera (header) no se verá completo a la derecha, puesto que la resolución de pantalla es menor que el ancho de la página.

También, la barra de desplazamiento horizontal aparecerá por la misma causa, aunque ésto último sólo se soluciona si todo el blog es fluido (usa porcentajes) o es un diseño de respuesta (responsive en inglés) que es aquel que cambia según la resolución de pantalla del usuario y por supuesto, esté bien diseñado, ya que, puede ser que en un diseño de respuesta se forme una barra de desplazamiento horizontal si algún elemento se está desbordando, es decir si está desplazado a la derecha y rebasa el ancho de la ventana del navegador.

Si el ancho de la página es todavía más grande, por ejemplo de 1200 pixeles, la barra de desplazamiento horizontal se activará desde una resolución menor a dicha medida.

La solución.
Lograr que el fondo del elemento definido con 100% de ancho se vea completo, es más fácil de lo que imaginas, y funcionará incluso en Internet Explorer 7. Sólo necesitas definir un ancho mínimo en el cuerpo de la página o documento, y lo harías así

body {
min-width:980px;
}

El valor del ancho mínimo, que en el código anterior se muestra como 980 pixeles, deberá ser igual al ancho del blog o página.

Pero, ¿a quién le interesa si se ve o no completo el fondo de ciertos elementos en una resolución menor de 800 pixeles? suponiendo que el ancho de la página mide 960 pixeles...

No es para preocuparse tanto, puesto que la mayoría de tabletas o tienen una resolución superior de 1024 pixeles de ancho, aunque si las hay de menor resolución, y siendo ésta una solución tan simple, creo que vale la pena implementarla.

Luego veremos cómo crear un diseño que pueda adaptarse a las distintas resoluciones de pantalla de los internautas, así que tienes que estar atento (a) ;)

Referencias:
Ver más información sobre la propiedad min-width.

Por: Karla Castañeda en 4/29/2012 Seguir leyendo

15+ Impresionantes Diseños de Páginas Web Alineadas a la Izquierda

Todas las páginas web, por defecto muestran su contenido alineado a la izquierda de la ventana del navegador, aunque es posible centrarlo muy fácilmente con CSS.

A continuación verás algunos sitios web muy monos, con diseños que muestran la página alineada a la izquierda, es decir, el contenido no está centrado horizontalmente tomando en cuenta la ventana del navegador.

Un punto que pudiera entrar a discusión es, si debería usarse este tipo de alineación en diseños fijos, (aquellos que mantienen su ancho independientemente de la resolución de pantalla en que se vea), ya que en resoluciones de pantalla muy grandes, quedará mucho espacio vacío a la derecha.

¿A ti te gusta más un diseño con el contenido centrado, o lo prefieres alineado a la izquierda?, Siéntete libre de expresar tu punto de vista ;)

1. Squarespace

Código de los widgets de Blogger

Resumen y Conclusiones

Cómo luce el código condicional

Lista de código condicional que resultan muy útil

Ejemplos de Usos

Ejemplos de páginas de error 404 Ilustradas

Ejemplos de páginas "Error 404" con animación

Ejemplos de páginas de "Error 404" ilustradas o no, más sencillas o minimalistas