JC - Blog » Diseño Web http://www.juan-calderon.com/blog En la búsqueda Sat, 08 May 2010 04:13:42 +0000 en hourly 1 http://wordpress.org/?v=3.0 Copyright © JC - Blog 2010 juancalderonr@gmail.com (JC - Blog) juancalderonr@gmail.com (JC - Blog) posts En la buacute;squeda JC - Blog JC - Blog juancalderonr@gmail.com No no http://www.juan-calderon.com/blog/wp-content/plugins/podpress/images/powered_by_podpress.jpg JC - Blog http://www.juan-calderon.com/blog 144 144 Introducción a CSS 2.1 http://www.juan-calderon.com/blog/tecnologia/164.html http://www.juan-calderon.com/blog/tecnologia/164.html#comments Fri, 02 Oct 2009 22:45:20 +0000 admin http://www.juan-calderon.com/blog/?p=164 specificity-valueUna de las cosas que con frecuencia pueden ser requeridas por quien quiere involucrarse en el ámbito del desarrollo web con o sin manejadores de contenido, es el uso de las hojas de estilo CSS. La presente es una introducción en extremo básica a este tema, que preparé en función de una charla que di hace poco para el TechDay del grupo Iguana Valley de Ecuador.

Porque hablar de CSS 2.1 y no de la ultima versión CSS 3, pues porque al momento de escribir este artículo la mayoría de los navegadores no son compatibles con esta ultima versión aun en desarrollo.

OBJETIVOS DE ESTE DOCUMENTO

- Conocer que es CSS y para que sirve
- Conocer como asignar estilos a un documento XHTML
- Conocer la estructura básica del código CSS
- Conocer recomendaciones para escribir código CSS

A continuación el desarrollo de estos objetivos.

Esta es la presentación en Prezi de la charla si desean revisarla:

QUE ES CSS

Es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con XHTML.

Es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

PARA QUE SIRVE EL CSS

Sirve para separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo. Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

COMO ASIGNAR ESTILOS A UN DOCUMENTO XHTML

Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.

Incluir CSS en los elementos HTML
Este método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.

Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se deben incluir en la cabecera del documento(sólo dentro de la sección <head>).

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente  de este método es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

Definir CSS en un archivo externo
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML/XHTML enlazan mediante la etiqueta <link>.

Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css

Se pueden crear más de un archivo CSS para un proyecto y cada página HTML puede enlazar tantos archivos CSS como necesite.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:

- rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet

- type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css

- href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

- media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican algunos de los medios CSS.

De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.

ESTRUCTURA BÁSICA DEL CÓDIGO CSS

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS.

Los diferentes términos se definen a continuación:

- Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de “selectores”, un símbolo de “llave de apertura” ({), otra parte denominada “declaración” y por último, un símbolo de “llave de cierre” (}).

- Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

- Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.

- Propiedad: permite modificar el aspecto de una característica del elemento.

- Valor: indica el nuevo valor de la característica modificada en el elemento.

Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor.

Nota Importante: Los selectores XHTML son sustituidos con frecuencia por nombres de clase e identificadores.

Uso de Clases
Se hace creando un nombre definido por el usuario, su sintaxis es un punto(.) antes del nombre definido, sustituye a un selector XHTML o se usa en conjunto con ellos.

Uso de Identificadores
Se hace creando utilizando el nombre de un identificador previamente definido en XHTML, su sintaxis es el signo de número (#)antes del nombre del identificador y sustituye a un selector XHTML o se usa en conjunto con este o las clases creadas previamente.

RECOMENDACIONES PARA ESCRIBIR CÓDIGO CSS

Definir uso para diferentes medios

Los medios más utilizados actualmente son Screen (para definir el aspecto de la página en pantalla),  Print (para definir el aspecto de la página cuando se imprime) y Handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil).

<link rel=”stylesheet” type=”text/css” href=”/css/estilos.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”/css/estilosPrint.css” media=”print” />
<link rel=”stylesheet” type=”text/css” href=”/css/estilosMobil.css” media=”handheld” />

Usar XHTML en lugar de HTML

Implica escribir etiquetas totalmente en minúsculas, cerrar correctamente todas las etiquetas, respetar la jerarquía de anidación, entre otras.

Usar XHTML semántico antes que selectores propios

Dar predominancia al uso de etiquetas XHTML antes que el uso de clases e identificadores

Usar Comentarios

Comentar el código y organizarlo de acuerdo a la sección al que se aplica un estilo

Usar estructura MVC para manejadores de contenido

Para desarrollos con CMSs usar diferentes hojas de estilo de acuerdo a la estructura, por ejemplo comun.css(common.css), estructura.css(layout.css), estilo.css(customize.css)

Para plantillas de manejadores de contenido usar common.css

Si se trabaja con plantillas separadas para cada sección de un sitio web, usar una hoja de estilo común para la definición de los estilos compartidos en todas las páginas.

Especificidad

Conocer la especificidad las reglas CSS, es decir la importancia específica de unas reglas de estilos CSS con respecto de otras. Para esto se pueden dar muchas combinaciones pero los valores de importancia básicos son estos:

- Importancia numérica del atributo style = 1000
- Importancia numérica de un identificador (id) = 100
- Importancia numérica de una clase, pseudo-clase o atributo = 10
- Importancia numérica de un elemento html = 1

La regla CSS que tenga mayor peso de acuerdo a lo anterior será la que se aplique en el browser.

Eso es muy útil una vez que tienes 2 estilos diferentes para un mismo selector que es algo que te sucede con frecuencia en los desarrollos de sitios medianos y grandes.

Aplicar métodos específicos para cada navegador

Conocer métodos para aplicar estilos de acuerdo a cada navegador, la manera no estándar es usando trampas o ( hacks), la manera estándar es mediante la detección del tipo de navegador o motor y creando hojas de estilo para cada cáso específico.

Usar frameworks CSS

Usar frameworks CSS cuando sea posible para agilitar la  aplicación del código, estas aplicaciones traen creada una estructura lista de acuerdo a la necesidad de cada proyecto, esto ayuda muchísimo al inicio rápido de un proyecto, algunos frameworks conocidos son:

My CSS Framework

Modular CSS

BluePrint

YUI CSS Grid

Elements

Validar el código

Validar el código CSS incrementa la posibilidad de que tu desarrollo sea visto en mayor cantidad de navegadores o dispositivos.

Para hacerlo hay cantidades de herramientas en Internet, personalmente uso una extensión de Mozilla Firefox llamada WebDeveloper a mas de permitirme validar el código local y remotamente trae una infinidad de mini aplicaciones de utilidad a la hora de desarrollar sitios web.

Fin de esta parte

Para la introducción a las hojas de estilo estás son algunas ideas que nos ayudarán a profundizar, en el futuro ampliaré la explicación de algunas técnicas en lo que será una continuación a este artículo, espero que les sea de utilidad.

]]> http://www.juan-calderon.com/blog/tecnologia/164.html/feed 0 JOOMLA 1.5: ¿ Que son las Plantillas? http://www.juan-calderon.com/blog/tecnologia/118.html http://www.juan-calderon.com/blog/tecnologia/118.html#comments Sat, 25 Apr 2009 15:30:58 +0000 admin http://www.juan-calderon.com/blog/?p=118 joomla-template JOOMLA 1.5 es una de las plataformas de desarrollo web más difundidas debido a su inmensa cantidad de recursos y a la gran comunidad que tiene apoyando sus aplicativos, los desarrolladores de extensiones por otro lado tienen una beta de negocios muy atractiva en este ámbito, creando y difundiendo posibilidades para un publico objetivo cada vez en aumento en todo el mundo.

QUÉ SON las Plantillas de Joomla?,  brevemente podremos decir que son el aspecto visual del front-end de este framework y tienen la característica de que separan el contenido (artículos escritos o creados por el usuario del sitio) del diseño (colores, organización de imágenes, tipos de letra, etc.), esta particularidad permite que de una manera ágil, se pueda cambiar el aspecto del sitio en base del cambio de una plantilla que tenga otra definición gráfica.  Como un refuerzo al tema de ajax y web2.0, Joomla incorpora en sus últimas ediciones, la plataforma Javascript Mootools.

Este tema es importante para los usuarios Joomla así que haré un resumen de las características fundamentales después del salto.

Por lo dicho anteriormente, las plantillas están también en la mira de desarrolladores y diseñadores gráficos que crean versiones comerciales cada cual mas impactante que otra, a favor o a pesar de esto hay muchos sitios que contienen plantillas gratuitas para Joomla y que promueven el uso y la expansión de estas “camisas” para Joomla.

Muy convenientes en su momento las plantillas gratuitas para encontrar una solución rápida a la necesidad de presencia en la red, tienen también limitantes propias de su propio origen, ajustarlas a una imagen corporativa si bien no es complicado tiene la consecuencia de la pérdida de exclusividad, pues libres como son las plantillas alguien mas podrá usarlas en otro sitio sin mayores cambios, de allí que el resultado final de esto sea encontrar sitios gemelos en diseño pero de tópicos diversos, si bien esto no es una desventaja en si misma, el hecho de querer promocionar un sitio en internet suele venir de la mano con el control del impacto que recibe el cliente y para esto no hay nada mejor que la originalidad.

Modificar las plantillas profundamente puede ser un trabajo mas bien arduo que se equipara al de la creación desde cero de una plantilla original, por esta razón es que los desarrolladores web serios optan por la opción de la creación de una plantilla única en la mayoría de los casos.

Forjarse en la creación es lo mas saludable no es fácil ni mucho menos y dependiendo de la curva de aprendizaje a la que se ve uno sometido que por cierto procede de varias vertientes PHP – PHOTOSHOP – CSS – XHTML – JAVASCRIPT es mas bien un trabajo prolongado que va dejando frutos con el tiempo, pero como en todo espacio, el talento puede traer mejores resultados cuando se suma al conocimiento de cualquier disciplina, no se puede ser creativo si no se tiene la noción clara de la herramienta, eso te permite perfilar tu arte y bueno en cuestiones de talento crear matices que los hay para todo y para todos.

QUE SE NECESITA TENER Y CONOCER PARA EMPEZAR A CREAR UNA PLANTILLA

(1) Una INSTALACION DE JOOMLA en un

(2) SERVIDOR WEB o en un SERVIDOR PERSONAL en tu equipo, de estos hay varios que incluyen combos completos que traen todo lo necesario para la ejecución del servidor (PHP-APACHE-MYSQL) dos de los más conocidos son XAMP y WAMP los hay en versiones para diferentes plataformas finalmente como en todo es cuestión de gustos, yo utilizo mucho el WAMP.

(3) Conocimiento mínimo de PHP, XHTML y CSS.

(4) Conocimiento mínimo de DISEÑO GRÁFICO en ordenador, PHOTSHOP, GYMP u otro editor de imágenes y los formatos de imagen estándar.

(5) Conocimiento de los ARCHIVOS QUE COMPONEN LA PLANTILLA  en Joomla así como nociones de MODULOS y COMPONENTES.

(6) Conocimiento de LAS DECLARACIONES JDOC para ubicar módulos contenido y otros elementos en el archivo index.php

CUALES SON LOS ARCHIVOS Y CARPETAS QUE COMPONEN UNA PLANTILLA EN JOOMLA

(1) El archivo “index.php” que provee la estructura lógica para el despliegue y posicionamiento de módulos y componentes.

(2) El archivo “component.php” que contiene la lógica para el despliegue de páginas de impresión amigable, enviar este enlace a un amigo, etc.

(3) La carpeta CSS que contiene los archivos de hojas de estilo del sitio.

(4) El archivo “templateDetails.xml” que es archivo encargado de contener la meta-data de la plantilla, dentro de él encontraremos secciones como INFORMACION GENERAL, ESTRUCTURA DE ARCHIVOS, LENGUAJES, POSICIÓN DE MÓDULOS y PARÁMETROS. Los datos anteriores son utilizados por el instalador de Joomla y por el administrador de plantillas para completar los detalles referentes al usuario, sitio y configuración inicial del front-end.

(5) El archivo Template thumbnail.[jpg,png,gif] es el mosaico de nuestra plantilla que permitirá saber de un vistazo que estilo gráfico y colores tiene, al hacer una selección en la administración de plantillas.

(6) La carpeta IMAGES que contiene todos los bitmaps que incluiremos en la plantilla

LAS DECLARACIONES JDOC Y SU USO EN INDEX.PHP

(1) La declaracion COMPONENT <jdoc:include type=”component” /> aparece solo una vez en index.php y es la declaración que muestra el contenido general del sitio en Joomla

(2) La declaracion HEAD <jdoc:include type=”head” /> aparece solo una vez en index.php y es la declaración que muestra el contenido de los estilos, script y elementos-meta que contiene el sitio

(3) La declaración MESSAGE <jdoc:include type=”message” /> aparece solo una vez y muestra los mensajes de error de una página, el estilo del mensaje de error se puede cambiar en el URL “templates\system\css\system.css”

(4) La declaración MODULES  soporta diversa maneras de escritura en base a este modelo <jdoc:include type=”modules” name=”" style=”" /> en donde NAME es la posición del nombre ( como las que se definieron en templateDetails.xml ) y STYLE es el tipo de formato que se usará para mostrar el módulo, aqui unos ejemplos de uso de esta declaración:

<jdoc:include type=”modules” name=”debug” />
<jdoc:include type=”modules” name=”icon” />
<jdoc:include type=”modules” name=”left” style=”rounded” />
<jdoc:include type=”modules” name=”left” style=”xhtml” />
<jdoc:include type=”modules” name=”right” style=”xhtml” />
<jdoc:include type=”modules” name=”status”  />
<jdoc:include type=”modules” name=”syndicate” />
<jdoc:include type=”modules” name=”title” />
<jdoc:include type=”modules” name=”toolbar” />
<jdoc:include type=”modules” name=”top” />
<jdoc:include type=”modules” name=”top” style=”xhtml” />
<jdoc:include type=”modules” name=”user1″ style=”xhtml” />
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
<jdoc:include type=”modules” name=”user3″ />
<jdoc:include type=”modules” name=”user4″ />

EL LAYOUT O LA ORGANIZACION DE LOS MODULOS

Una vez que se conoce el uso de las declaraciones JDOC es mas fácil entender la organización de los módulos que se han llamado a través de ellas, aquí un ejemplo de una organización típica:

PosicionesJoomla

COMO INSTALAR UNA NUEVA PLANTILLA EN JOOMLA

Luego de haber trabajado en una plantilla por un corto tiempo necesitamos verla funcionando para esto tendremos que seguir algunos pasos:

(1) Comprimir la plantilla creada, seleccionamos la carpeta que contiene los archivos y subcarpetas propios de la plantilla y generamos un archivo comprimido con el nombre de la plantilla.

(2) Instalar la plantilla, Ingresamos en la administración de Joomla hasta el menú EXTENSIONES y seleccionamos la opción INSTALAR DESINSTALAR, en la pantalla aparecerá una opción llamada SUBIR PAQUETE que trae a su vez un botón de examinar que te permite buscar el archivo comprimido de tu plantilla en tu equipo, cuando lo hayas encontrado selecciónalo para definir la ruta del archivo y usa el botón SUBIR ARCHIVO E INSTALAR para instalarla, una vez instalada la plantilla Joomla te dará un mensaje de aviso con fondo celeste que indica que tu plantilla ha sido instalada con éxito.

(3) Administrar la plantilla, para esto Ingresamos en la administración de Joomla hasta el menú EXTENSIONES y seleccionamos la opción ADMINISTRADOR DE PLANTILAS, aquí verás una lista de las plantillas disponibles y podrás definir tu plantilla como la que debe ser usada por defecto, cuando conozcas un poco este administrador podrás seleccionar mas de una plantilla para tu sitio o restringir el uso de una plantilla específica para ciertas páginas, secciones o categorías.

(4) Visualizarla en tu browser, usa mas de uno para comprobar que los estilos se ven bien por lo menos en los navegadores más conocidos.

ENLACES SOBRE EL TEMA

El sitio de documentacion de Joomla en Inglés
El manual de desarrollo de la Comunidad Joomla en español

Bien, seguiremos tratando el tema de plantillas de Joomla 1.5 en el futuro para destacar uno u otro aspecto interesante del uso de ellas, si tienen consultas déjenlas en los comentarios que yo trataré de resolverlas de la mejor manera a la brevedad posible, suerte en la creación.

]]> http://www.juan-calderon.com/blog/tecnologia/118.html/feed 0 Arte Digital – Nico Di Mattia http://www.juan-calderon.com/blog/diseno/71.html http://www.juan-calderon.com/blog/diseno/71.html#comments Wed, 25 Mar 2009 22:54:58 +0000 admin http://www.juan-calderon.com/blog/?p=71 Nico Di MattiaQuedo tremendamente impresionado con el talento de este artista, llegué a su blog de casualidad mediante una entrada de un video de Speed Painting sobre Megan Fox la chica de transformers.

http://nicodimattia.files.wordpress.com/2009/02/meganfox.jpg

Unos cuantos clics después me quedaba azorado con la calidad de sus ilustraciones y caricaturas.

No ubico bien la nacionalidad pero escribe su BLOG en inglés y español, realmente gratificante, échenle un vistazo.

]]> http://www.juan-calderon.com/blog/diseno/71.html/feed 1 Presentación en Barcamp Quito http://www.juan-calderon.com/blog/tecnologia/67.html http://www.juan-calderon.com/blog/tecnologia/67.html#comments Sun, 22 Mar 2009 14:50:13 +0000 admin http://www.juan-calderon.com/blog/?p=67 JuanPixel tuvo el agrado de participar en el Barcamp Quito este 21 de Marzo.

La organización estuvo muy bien y las charlas tambien, lamentablemente no pude asistir a muchas de ellas pero tengo muy buenas referencias de las que fueron ofrecidas en la mañana los dos auditorios.

El evento estuvo cubierto en línea y aquí les dejo la dirección del Blog para que tengan acceso a las otras presentaciones.

Espero que estas iniciativas del Grupo Web 2.0 Ecuador sigan beneficiandonos a todos los interesados en tecnología y se cree una comunidad fuerte que nos mantenga a la vanguardia ahora que hay tanto por conocer en esta área.

Sigue leyendo para encontrar las presentaciones usadas en el Barcamp, después del salto de página.

Presentaciónes usadas en el Barcamp Quito – JuanPixel

Plantillas Joomla15

Manual Plantillas Joomla 15

View more documents from Barcamp Quito.
]]> http://www.juan-calderon.com/blog/tecnologia/67.html/feed 4 Buen diseño en la red para todos los gustos http://www.juan-calderon.com/blog/diseno/47.html http://www.juan-calderon.com/blog/diseno/47.html#comments Mon, 27 Nov 2006 05:49:04 +0000 JC http://www.juan-calderon.com/blog/?p=47 Algunos enlaces con diseños interesantes y uso de buenas prácticas de XHTML+CSS en algunos casos y Flash en otros:

BestWbGalleryLa mejor galería de diseño web que he encontrado en los últimos tiempos.

LinkAki a BestWeb Gallery

CSSElite

Diseños basados en el estándar CSS, trae recursos útiles.

LinkAki a http://www.csselite.com

El siguiente enlace trae los nominados a aparecer en un libro cuyo objetivo es publicar anualmente una guía de los mejores sitios de la red y promover el uso de estándares.

LinkAki a http://webdesignbook.net/nominees/


NetDiverAcá un reconocido sitio de inspiración de muchos diseñadores en la red, también trae muchos recursos.

LinkAki a http://www.netdiver.net


DesignInteract

Por último, el sitio de la semana elegido por la revista CommArts, la sección de archivo trae los sitios elegidos en semanas anteriores.

LinkAki a designinteract.com/sow/

]]> http://www.juan-calderon.com/blog/diseno/47.html/feed 0