|
|
|
|
|
|
| Friday, September 22, 2006 |
|
El diseño de su sitio
Por javier @ 6:16 AM :: 596 Vistas ::
1 Comentarios :: :: Administrar su web
|
|
Introducción a los "Skins"
Tradicionalmente las empresas de diseño web han confiado sus diseños web a sitios HTML estáticos, no obstante, el consumidor ha visto de forma rápida cuales son los beneficios de disponer de un sitio web dinámico. Para satisfacer esta demanda surge el concepto de SKIN. Un Skin permite al diseñador crear interfaces ricos en diseño que se integran de forma transparente con la aplicación de portal con el objetivo de producir un sitio atractivo para el cliente.
El Término Skin se refiere a una arquitectura de software que ofrece una forma de separar la lógica de la aplicación y el contenido de su presentación. En inglés significa piel y es una forma de decir que a nuestra web le podemos cambiar la piel, como a un camaleón.
El Uso de Skins implica el uso de "Plantillas" en las cuales es donde realmente se separan los atributos de presentación de la lógica de la aplicación. Posteriormente un motor "inteligente" se encargará de ensamblar todos los ficheros en un paquete final. Es esta aproximación en dos fases la que hace posible que diseñadores y programadores puedan realizar su trabajo sin entorpecerse.
Más adelante se explicará el proceso de creación de una plantilla, realmente solo son necesarios ciertos conocimientos de HTML Básico y el objetivo es que en breve sea capaz de crear sus propios skins y aplicarlos en sus sitios.
Tecnología
La abstracción de los elementos de una página puede llevarse a cabo adoptando diferentes estrategias, sin embargo todas ellas incluyen un momento en el que se procesa la presentación gráfica junto a la lógica de la aplicación. Definir cuándo, dónde y cómo es crítico para la solución.
Una técnica bastante popular en muchos lenguajes de “script” es el uso de identificadores en el interface de usuario para representar a los elementos dinámicos. Cuando la página se procesa, estos identificadores son reemplazados por la lógica de aplicación apropiada de forma que se sustituye el identificador por el elemento dinámico. La clave para entender el funcionamiento de los skins está en la frase “Cuando la página se procesa”. Si el reemplazo se llevase a cabo en cada petición a la página, obtendriamos un rendimiento de la aplicación muy bajo. Para evitar esta caida en el rendimiento, la solución adoptada es capaz de pre-procesar y compilar el skin.
Definición del Skin
Otro aspecto importante a considerar es acerca del autor del skin. ¿Quién creará Skins? ¿Qué herramientas utiliza habitualmente?, los análisis en este área han determinado mucho el cómo se han definido los skins.
Como resultado, la solución adoptada permite al diseñador web definir el skin utilizando la tecnología más simple. El HTML es el mínimo común denominador cuando se habla de págs. Web y es el que tiene un soporte más amplio en términos de aplicaciones de diseño. El único problema es que el HTML es estático.Revisando la solución de identificadores descrita arriba, parece util permitir que los diseñadores puedan incluir identificadores en el HTML para representar la funcionalidad dinámica. Esto nos proporciona la abstracción más limpia de la “forma” y la “función”. El fichero de skin podrá modificarse sin afectar a la aplicación y la aplicación podrá ser modificada sin afectar al interface de usuario
Vista Rápida
Uno de los factores que han guiado este sistema es la simplicidad. Este principio tiene diferentes interpretaciones en las diferentes áreas de la aplicación pero en términos de diseño la meta era conseguir exponer una arquitectura compleja de una forma que fuese simple de usar y gestionar. Además un aspecto importante era el rendimiento y velocidad de la aplicación. Las buenas noticias son que se ha conseguido el objetivo.
Para hacer el proceso de crear skins tan simple y flexible como fuera posible a los diseñadores web, se ha decidido usar HTML como base para la definición del skin. Esto permite a los diseñadores usar la herramienta que deseen para la definición del skin. Hemos definido unos identificadores que separan el HTML estático de los elementos. Estos identificadores son únicamente [NOMBRE] con un nombre único para cada elemento del skin. Para mejorar en lo posible el rendimiento proporcionamos un simple mecanismo para subir el skin que además compila el skin en un control para usarlo habitualmente. Este pre-proceso se hace solo cuando el skin se sube por primera vez. Esta tecnica incluye la abstracción necesaria para que el diseñador pueda trabajar indepedientemente del programador.
En términos de diseño, se puede organizar la página de la forma en que se desee, para la inyección de módulos en la página, el diseñador puede crear un ilimitado numero de paneles de paneles de contenido, los cuales se asocian al módulo cuando se guarda en la base de datos.
Esta aproximación libre ofrece lo último en flexibilidad de diseño pero también impone algunas complicaciones en términos de skins “Plug & Play”. Para poder cambiar de un skin a otro, la cantidad y el nombre de los paneles de contenido debe ser consistente en diferentes skins.
Creación de un Skin
No existe un orden particular para este proceso pero el detallado aquí parece ser que es el que funciona mejor.
Configurar el entorno de desarrollo del Skin
Para simplificar el desarrollo del skin recomendamos que utilice la siguiente estructura de carpetas:
Por ej.

Diseñar el Skin
Puede crear diseños sin ningún tipo de limitación. Habitualmente se realizan los prototipos iniciales utilizando herramientas profesionales de tratamiento de imágenes ("Adobe Photoshop" u otros paquetes). Una cosa que se ha de tener en cuenta es que cuando creemos el skin, se han de incluir todos los elementos del interface en el diseño. Esto incluye elementos estáticos como imágenes, archivos flash , texto pero también incluye los elementos activos como el Link de "Entrar", la caja de búsqueda, el sistema de menús etc. Próximamente podrá encontrar una lista completa de elementos que pueden incluirse en el diseño. A estos elementos también se les conoce como "Objetos del Skin" y los veremos mas adelante.
Seleccionar un Editor de HTML Y Crear La Plantilla
Si tiene conocimientos básicos de HTML, de tablas y de CSS, podrá crear un Skin. Un editor como "Macromedia DreamWeaver" o Microsoft "FrontPage" o "HotMetal" etc. lo hace particularmente fácil pero de hecho es HTML y podría crearlo con el bloc de notas si conoce su sintaxis. El HTML debe estar "bien formado" es decir, todos los atributos deben estar cerrados (Si abre una marca
), además no puede haber espacios alrededor de los signos "=" y los valores de los atributos han de estar entre comillas, por ej:
. Cualquier Editor de HTML de los nombrados anteriormente podrá manejar esto por Ud.
Ud. Creará una página llamada por ej. MiPortal.html y dentro incluirá el diseño. Donde quiera por ej. poner el sistema de menús pondrá [SOLPARTMENU], donde quiera que aparezca espacio para un panel de contenido pondrá [CONTENTPANE], hay diferentes elementos y pondremos una lista más adelante.
Si quiere utilizar estilos css, añadalos todos en un fichero llamado skin.css y colóquelo en el raiz del skin.
Si en su diseño piensa utilizar mas de dos paneles de contenido, lo cual por otra parte es lo más normal, también necesitará conocer detalles acerca del fichero skin.xml
Gestionar los gráficos
Los gráficos son parte integral del skin. Para que el Skin pueda encontrar los ficheros debe especificar las referencias a las imágenes con un formato especifico. Por lo general la mejor solución es poner las imágenes en la misma carpeta que el Skin. Esto no quiere decir que sea obligatorio hacerlo así ya que el motor puede reconocer todas las subcarpetas que Ud. especifique, pero es lo más efectivo. Ud. preocúpese unicamente de que los gráficos esten o en la misma carpeta o en una subcarpeta, no los ponga demasiado separados.
Añadir objetos al Skin y Paneles de Contenido
Los objetos del "Skin" son objetos que se muestran de forma dinámica en la página. Simplemente ha de escribir entre corchetes un elemento en la plantilla para que el motor haga el resto, por ej. Ud pondría [SOLPARTMENU] ó [LOGIN] en los sitios donde le interese que aparezcan estos elementos "dinámicos". Además de estos objetos del "Skin" también está el concepto de paneles de contenido. Los paneles de contenido son los contenedores donde se inyectan los módulos. Como mínimo ha de existir un panel de contenido llamado "ContentPane" en nuestro skin. Los paneles de contenido no necesitan ser contiguos y si no contienen nada, simplemente no aparecen. Los objetos del "Skin" también soportan el concepto de "Instancias con nombre". Por ejemplo si quiere tener dos controles de menú en su skin, puede especificar [MENU:1] y [MENU:2] en su plantilla. En la mayoría de los casos solo necesitará usar una sola instancia del objeto y es correcto llamarla con su especificación simple, en el anterior ejemplo sería [MENU]. Sin embargo el uso de instancias con nombre es particularmente util para los paneles de contenido ya que en la mayoría de los casos tendrá mas de uno. En este caso usted utilizará [CONTENTPANE:1], [CONTENTPANE:2], [CONTENTPANE3]... A pesar de que recuerde que ha de tener uno llamado [CONTENTPANE], ya que es el por defecto del sistema.
Crear hojas de estilo
El software utiliza una especificación de hojas de estilo en cascada que proporciona numerosas ventajas al diseñador. Utilice CSS siempre que pueda para establecer imágenes de fondo, colores, tipografías etc. Añada los estilos que necesite en un fichero llamado skin.css y coloquelo en el raiz del portal.
Empaquetar el Skin
Para preparar la publicación haga un fichero ZIP que contenga en su raiz todos los archivos htm, imágenes y css que ha utilizado en su skin y llámelo como quiera que se llame su Skin, por ejemplo "disenygalactic.zip"
Publicar el Skin
|
|
|
|
|
| Comentarios |
Por
javier @
Saturday, June 16, 2007 3:13 AM
|
|
Este documento es quizá demasiado técnico para un usuario administrador. Próximamente cambiaremos este documento por otro más general...
|
|
|
Click here to post a comment
|
|
|
|
|
|
|
|