Centrar div verticalmente

http://vanseodesign.com/css/vertical-centering/ 

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 

Como crear un plantilla para Joomla! 3.2.2 desde cero

Esta es una nueva versión de mi post anterior “Como crear una plantilla para Joomla 1.6” y estará basada en la plantilla “protostar” que incluye el nuevo Joomla! Por defecto. En esta guía detallo como crear una plantilla y he trato de incluir solo las partes más elementales de modo que no importa si ya tenías experiencia o apenas vas empezando con Joomla, espero que les sirva a todos.

Lo primero es crear una carpeta con el nombre de la plantilla (en este ejemplo el nombre es jplan_PlantillaPrueba322). Dentro de esta carpeta debemos de crear un archivo llamado templateDetails.xml con un contenido más o menos como el siguiente (adecuándolo a las necesidades de cada quien). Por cierto el DOCTYPE dice 2.5, no se preocupen de eso por ahorita.

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">

<extension version="3.2" type="template" client="site">

<name>jplan_PlantillaPrueba322</name>

<version>1.0</version>

<creationDate>20 Febrero 2014</creationDate>

<author>José Sotero Vibriezca Venegas</author>

<authorEmail></authorEmail>

<authorUrl>http://www.miviaweb.com</authorUrl>

<copyright>Copyright (C) 2014 www.miviaweb.com, Inc. All rights reserved.</copyright>

<description>TPL_PLANTILLAPRUEBA322_XML_DESCRIPTION</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_preview.png</filename>

<filename>template_thumbnail.png</filename>

<folder>css</folder>

<folder>images</folder>

<folder>js</folder>

<folder>language</folder>

</files>

<positions>

<position>banner</position>

<position>debug</position>

<position>position-0</position>

<position>position-1</position>

<position>position-2</position>

<position>position-3</position>

<position>position-4</position>

<position>position-5</position>

<position>position-6</position>

<position>position-7</position>

<position>position-8</position>

<position>position-9</position>

<position>position-10</position>

<position>position-11</position>

<position>position-12</position>

<position>position-13</position>

<position>position-14</position>

<position>footer</position>

</positions>

<languages folder="language">

<language tag="es-ES">es-ES/es-ES.tpl_jplan_PlantillaPrueba322.ini</language>

<language tag="es-ES">es-ES/es-ES.tpl_jplan_PlantillaPrueba322.sys.ini</language>

</languages>

</extension>

Si desean ir un poco más avanzado, en <files> pueden incluir los archivos component.php, error.php, favicon.ico y obviamente copiar estos archivos de la carpeta public_html/ templates/protestar. No olviden incluir los créditos necesarios si copian contenido de otros.

Nuevamente omití  toda la parte de configuración y parámetros para simplificar la creación de nuestra primer plantilla. Sin embargo esta ocasión si incluyo la parte de idiomas para irnos acostumbrando a usarlos.

Bueno creo que cada línea del contenido XML anterior se explica por sí sola, aun así les daré una breve descripción. Lo más importante a cambiar es NAME (nombre de su plantilla) y todo lo de FILES (son libres de agregar o quitar todos los archivos o carpetas que su diseño y plantilla requieran) siempre y cuando mantengan los archivos (index.php, templateDetails.xml, template_preview.png y template_thumbnail.png). Datos personales como AUTHOR, CREATION DATE, DESCRIPTION pues no son esenciales, aun así es bueno que lo hagan para referencia de ustedes mismo. Para los que no tienen experiencia con el diseño de plantillas para Joomla, es recomendable que los POSITION los mantengan como están, ya que estas son las posiciones que se usaran para desplegar los contenidos en la página. Si conforme avanza el desarrollo de la plantilla agregan más archivos o posiciones, no se olviden de regresar a templateDetails.xml y agregar los FILE o POSITION correspondientes. Aquí les dejo la descripción de cada position:

POSITION-0 = "Search"

POSITION-1 = "Navigation"

POSITION-2 = "Breadcrumbs"

POSITION-3 = "Top center"

POSITION-4 = "Unused"

POSITION-5 = "Unused"

POSITION-6 = "Unused"

POSITION-7 = "Right"

POSITION-8 = "Left"

POSITION-9 = "Unused"

POSITION-10 = "Unused"

POSITION-11 = "Unused"

POSITION-12 = "Unused"

POSITION-13 = "Unused"

POSITION-14 = "Unused"

Es recomendable usar el mismo position para cada cosa, así cuando cambiemos de template no hay que estar configurando nuevamente cada módulo.

Ahora debemos agregar los archivos template_thumbnail.png y template_preview.png, cada uno es la imagen de como se ve nuestro sitio (si no cuentan con dichas imágenes, este paso lo pueden realizar al final, solo no se les olvide jejeje). La primera es una imagen PNG de 206x150px, puede ser su logotipo o una imagen en miniatura de la página principal. La segunda puede ser una imagen PNG de 640x388px, también es una impresión de pantalla reducida de como se ve tu plantilla.

<?php

// No direct access.

defined('_JEXEC') or die;

?>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/estilo.css" type="text/css" />

    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/ejemplo.js"></script>    

    <meta http-equiv='Content-Type' content='text/html; charset=windows-1252' />

    <title>Plantilla de prueba desarrollada por www.miviaweb.com</title>

</head>

<body>

<div>

        <div class='Header'>

        Contenido del Header

<jdoc:include type="modules" name="position-0" /><!--SEARCH-->

        </div>

        <div class='menu_tab'>

            <jdoc:include type="modules" name="position-1" /><!--HOR NAV-->

        </div>

<div id='main_content'>

            <jdoc:include type="modules" name="position-2" /><!--Breadcrumbs-->

            <jdoc:include type="modules" name="position-3" /><!--Top center-->

            

            <!-- Left Content -->

            <div id='left_content'>

            <jdoc:include type="modules" name="position-4" />

                <jdoc:include type="message" />

                <jdoc:include type="component" /><!--CONTENT-->

            <jdoc:include type="modules" name="position-5" />

            <jdoc:include type="modules" name="position-6" />

            </div>

            <!-- Right Content -->

            <div id='right_content'>

                <jdoc:include type="modules" name="position-7" /><!--Right-->

                <jdoc:include type="modules" name="position-8" /><!--Left-->

            </div>

            <!-- Footer -->

            <div class='footer'>

            <jdoc:include type="modules" name="position-9" />

                Contenido del Footer

            <jdoc:include type="modules" name="position-10" />

            </div>

            

            <jdoc:include type="modules" name="debug" style="none" />

</div>

</div>

</body>

</html>

En el lugar donde ubiquen la etiqueta jdoc de tipo component (<jdoc:include type="component" />) es donde se desplegaran los artículos que publiquemos. Las etiquetas jdoc de tipo modules (<jdoc:include type="modules" name="position-0" />) sirven para establecer las posiciones donde queramos desplegar diferentes módulos en la página. Si se fijan el atributo NAME corresponde con los POSITION del archivo templateDetails.xml

El diseño de index.php es muy sencillo, ustedes lo pueden hacer tan complicado como deseen. Hay más cosas que le pueden agregar a este archivo, para ello échenle un vistazo a la documentación de Joomla y al archivo index.php de alguna plantilla como protostar que viene con Joomla 3.2.2.

No olviden crear un archivo llamado “index.html” dentro de cada carpeta que creen, esto es para evitar que usuarios o robots mal intencionados puedan listar el contenido de nuestras carpetas. Para el contenido de este archivo basta con poner simplemente “<!DOCTYPE html><title></title>”. La carpeta principal de nuestro template no requiere este archivo porque ya contiene el archivo “index.php” y este hace el mismo trabajo.

A continuación creamos la carpeta “language” (no olvidar el archivo index.html) y dentro de esta a su vez la carpeta “es-ES” (no olvidar el archivo index.html) o el código de idioma que deseen. Dentro de esta última carpeta crear los archivos “es-ES.tpl_jplan_PlantillaPrueba322.ini” y “es-ES.tpl_jplan_PlantillaPrueba322.sys.ini” el contenido de ambos archivos puede ser el mismo:

TPL_PLANTILLAPRUEBA322_XML_DESCRIPTION="Esta es la plantilla de prueba para Joomla! 3.2.2 creada por www.miviaweb.com"

También creamos la carpeta “js” y dentro los archivos “index.html” y “ejemplo.js”, el archivo JavaScript estará vacío en este ejemplo. También creamos la carpeta “images” y dentro solo el archivo “index.html”. Finalmente creamos la carpeta “css” y dentro los archivos “index.html” y “estilo.css”, el archivo CSS estará vacío en este ejemplo.

Listo ya podemos comprimir la carpeta de nuestro template en un ZIP e instalarla en Joomla!

goodui.org - diseño de interfaces

Una página con buenas recomendaciones para el diseño de interfaces. Constantemente actualizada. http://www.goodui.org/

Columnas o div’s que crecen iguales con CSS

Cuando estamos diseñando una página es muy común que deseemos la barra de menú a la izquierda o derecha y el contenido a un lado y que lo queramos hacer SIN tablas. En ocasiones no nos importa si los div’s, pero en otras, por cuestiones de estética deseamos que ambas estén del mismo tamaño y si a esto le agregamos que muchas páginas son de contenido dinámico y no tenemos idea de que tan grande va a crecer el Height de los div’s (y aunque no sean páginas de contenido dinámico puede resultar tedioso poner un Height en cada situación del sitio web) puede resultar un poco frustrante. Sin embargo la solución no es tan complicada como pensamos.

¿Por qué las tablas no son una solución? Bueno pues por que como comenta Pedro CM en su blog: “Es más fácil renderizar un contenido con div's que con tablas. Los div's son más rápidos, semánticos y accesibles.”.

Caso

Supongamos que tenemos un div Container y dentro de este 2 div’s, uno con la clase Side para el menú y otro con la clase Content para el contenido de la pagina. Además queremos que Side esté a la derecha de Content y que ambos crezcan del mismo tamaño.

Solución 1

Mas fácil de lo que podemos pensar es simplemente asignar table-cell a la propiedad display de las clases Side y Content y eso es todo, obtendríamos un resultado como la imagen 01.

Opcionalmente podemos asignar el valor table a la propiedad display de la clase Container para obtener un resultado como la imagen 02.

imagen 01

imagen 01

Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.Container
{
background-color:Red;
display:table;
}

.Side
{
background-color:blue;
display:table-cell;
}

.Content
{
background-color:Green;
display:table-cell;
}
</style>
</head>
<body>

<div class="Container">
<div class="Side">texto <br />texto <br />texto <br />texto <br /></div>
<div class="Content">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>

</body>
</html>

Solución 2

Desafortunadamente la solución uno no funciona con Internet Explorer 6, lastima era algo muy fácil. Aunque la verdad yo ya casi no diseño para ie6 (salvo algunas solicitudes especiales) pues el número de usuarios de ie6 ya no es el mismo que hace 3 años. Personalmente prefiero usar la solución uno, pero es cuestión de cada quien cual usar. El ejemplo de la solución 2 lo vi en: http://www.cssblog.es/columnas-equilibradas-en-css/

codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD = XHTML 1.0=20 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<style type="text/css">
body
{
background-color:Yellow;
}

#caja_izq
{
width: 850px;
margin: 20px auto;
color: #fff;
background-color: #4c9ab1;
overflow: auto;
}

#caja_der
{
width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}

.columna_izquierda
{
width: 280px;
float: left;
padding: = 20px;
position: relative;
margin-left: -350px;
}

.columna_derecha
{
width: 450px;
float: left;
padding: = 20px;
}
</style>
</head>
<body>

<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">texto <br />texto <br />texto <br />texto <br /></div>
<div class="columna_derecha">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>
</div>

</body>
</html>

Herramientas de desarrollo en IE9

Por ahí en un foro me pidieron que si les podía explicar cómo usar las herramientas de desarrollo de Internet Explorer. Bueno aquí está un mini tutorial.

1 - Entra a la página con la que estés trabajando (en este caso google.com)
2 - Presiona F12 o ve al menú Herramientas y selecciona Herramientas de desarrollo o has click en el engrane (esquina sup der) y has click en Herramientas de desarrollo
3 - Has click sobre el botón que tiene un apuntador
4 - En la página has click sobre el elemento que quieres inspeccionar

Listo, a continuación puedes ver el código fuente de tu página, puedes cambiar valores de los atributos de las etiquetas, puedes ver los estilos que tiene cada etiqueta, puedes cambiar estos valores o desactivarlos y todos los cambios que hagas se reflejan inmediatamente en la página.

También puedes ver y depurar el código JavaScript y agregar atributos. A continuación dejo algunas imágenes para que quede todo más claro.

Crear una paleta de colores

Kuler es una herramienta de adobe que permite tanto extraer una paleta de colores de una imagen (como mostrábamos en el post anterior) o crearla tú mismo. Adicionalmente kuler te muestra varias paletas prediseñadas por otros usuarios.

Esta herramienta es muy sencilla de utilizar, simplemente entras en http://kuler.adobe.com y presionas “Create”, en “Select a rule” tienes 7 opciones, selecciona la que más se adecue a tus necesidades.

En el círculo de colores mueve lo puntos seleccionando los colores que desees y hasta que estés satisfecho. Para cada color puedes aumentar o disminuir el brillo en la barra que está justo debajo.

Finalmente aquí están 2 páginas que te pueden servir de utilidad:

http://www.imageandart.com/tutoriales/teoria/esquemas_color/index.html es una sencilla página donde te da una pequeña descripción de cada esquema básico del color, así como un ejemplo.

Color in motion es una interesante página donde de forma muy creativa te muestra las propiedades de cada color, es una buena forma de saber por ejemplo que sentimientos representa cada color, o que color debes usar si quieres transmitir sensación de comodidad, calor, educado, formal, etc.

Como extraer la paleta de colores de una imagen

¿Eres de los que tiene problemas a la hora de elegir colores para una página web? ¿O simplemente deseas extraer la paleta de colores de una imagen? Bueno esta herramienta te puede facilitar mucho al vida, simplemente seleccionas la imagen que desees y le das “Upload and process” y listo! Te muestra el color dominante de la imagen, así como una paleta de colores con los 10 más comunes. Adicionalmente te da la opción de descargarla en 2 formatos.

Ha si, la herramienta online se llama: whats its color