Joomla! Joomla! Diseños de sitios Web y Comercio Electrónico

Transcripción

1 Diseños de sitios Web y Comercio Electrónico Universidad Politécnica de Valencia Campus de Gandía

2 Organización del curso viernes 6 sábado 7 viernes 13 sábado 14 viernes 20 Introducción a Instalación en local para usuarios finales Instalación en un servidor de hosting Organización del contenido Administración de Diseño visual (plantillas) Instalación de extensiones sábado 21,27 Tienda Online con VirtueMart viernes 28 Plan de hosting, SEO y publicidad

3 Plantillas Qué son las plantillas? Sitios de plantillas para Joomla Instalar nuevas plant. (sitio, Administración) Creación de nuestra propia plantilla con Artister Editar el código CSS y HTML de una plantilla

4 Qué son las plantillas? Como va hemos visto una parte es el contenido y otra la presentación de este. Cuando diseñados una web, para el usuario final es muy importante su apariencia gráfica. (color, logo.) Cómo cambiamos la apariencia de nuestro portal? Mediante las plantillas Cómo afecta el cambio de plantilla a nuestra web? El aspecto puede cambiar la posición, de los menús de los submenús Para comprobar como afecta el cambio de una plantilla a nuestra web vamos a cambiarla por la otra que existe en nuestro gestor de plantillas.

5 Qué son las plantillas? Plantilla o template Página Web pre-desarrollada que es empleada para aplicar a nuestro sitio el mismo diseño, patrón o estilo. En Joomla existen dos tipos de plantillas: La plantilla del sitio: controla la apariencia del front-end. La plantilla del administrador: controla la apariencia del back-end.

6 Requisitos de las plantillas Los requisitos de una plantilla son principalmente 4 ficheros: Index.php le dice a joomla donde están en la página web los componentes, módulos y el contenido. Se comunica con la BD. TemplateDetails.xml-incluye la lista de todos los elementos que contiene la plantilla de, debe tener listado todos los archivos y que todos los archivos listados existan realmente. Incluye también información de la plantilla, nombre, versión y descripción, como del autor y sobre el copyright. Carpeta CSS- archivos css, como colores, estilos,tamaños de letra. (hojas de estilo en cascada) Carpeta Images-contiene todas las imágenes que utiliza en la plantilla.

7 Tipos de plantillas Plantillas de ancho variable: Tienen la particularidad de amoldarse al ancho de pantalla. Se ven correctamente. El principal inconveniente es que no se pueden utilizar imágenes de un tamaño fijo, porque al cambiar el tamaño del navegador el tamaño de las imágenes no cambia. Plantillas de ancho fijo: Tienen un ancho fijo independientemente del tamaño del navegador. Es el preferido por los diseñadores.

8 Ejemplos de sitios de Plantillas templates.htm Existen muchos más sitios de descarga de plantillas.

9 Descarga de plantillas Las plantillas se pueden crear o utilizar diseños ya creados. Los diseños ya creados pueden ser gratuitos o de pago. Existen infinidad de plantillas gratuitas, pero si alguien quiere una plantilla a medida y/o exclusiva, debe pagar por ello o crearla. Cuando escogemos plantillas debemos fijarnos en la versión que tenemos de Joomla.(por la compatibilidad).

10 Instalar una nueva plantilla EJERCICIO: Buscar una plantilla para su sitio web, tener en cuenta la versión de Joomla. Ir al sitio administrador de nuestro portal web. Pulsar sobre el menú extensiones. Instalar/desinstalar. Subir paquete. Una vez tengamos nuestra plantilla en el servidor, pulsamos sobre extensiones. Elegimos gestor de plantillas y ponemos nuestra nueva plantilla como predeterminada.

11 Instalar una plantilla descargada EJERCICIO: Suponemos que tenemos la plantilla escogida en el ejercicio anterior. Vamos a cambiar la plantilla por otra bajada de internet Nos introducimos en el menú extensiones/ instalardesinstalar (examinamos y la subimos) Según la plantilla será compatible o no. Si nos da error de compatibilidad, nos iremos al gestor de plugins y habilitaremos el modulo plugin legacy. Ahora volveremos a instalar la plantilla y la elegiremos como predeterminada. Comprobaremos su resultado en la página de nuestro navegador.

12 Editar una plantilla Para poder editar una plantilla podemos hacerlo directamente desde Joomla. Para editar una plantilla pinchamos sobre el nombre, dentro del gestor de plantillas. Se pueden editar en html o css (No es el lugar más adecuado, se vera a continuación otra alternativa). Algunas plantillas nos dejan cambiar ciertas parámetros de su configuración dentro del gestor de plantillas.

13 Creación de una plantilla con Artister Vamos a utilizar el Artister, (uno de los muchos que existen) para generar una plantilla en Joomla desde cero. Ejercicio: -Accede a: -Descarga e instala el software Artister -Elege crear una plantilla para Joomla. -Una vez terminada expórtala a zip. -Instálala en tu sitio Joomla para ver el resultado.

14 Plantillas Qué son las plantillas? Sitios de plantillas para Joomla Instalar nuevas plant. (sitio, Administración) Creación de nuestra propia plantilla con Artister Editar el código CSS y HTML de una plantilla Las tecnologías Web básicas Estructura de una plantilla Joomla Web Developer Toolbar Modificar una plantilla Joomla

15 Tecnologías Web básicas HTML CSS XML XHTML

16 HTML HiperText Markup Language Permite representar una página web. Principal culpable del éxito de Internet Creado en 1989 por Tim Berners-Lee (CERN). Ver: Anexo-A Tutorial HTML

17 Características de HTML Una página ha de poderse representar en diferentes dispositivos. Deja gran libertad al navegador.

18 Hojas de estilo en Cascada (CSS) HTML fue diseñado inicialmente, como un esquema de representación orientado a la estructura: <h1>esto es un título</h1> En versiones sucesivas se introdujeron tags orientado al diseño: <font size=5 face=impact> Diseños más atractivos, aunque difíciles de ver en otros dispositivos: Móvil, texto, TV, sintetizador, buscador

19 Hojas de estilo en Cascada (CSS) Permitir a personalizar el aspecto visual de la página, pero sin romper el esquema de representación orientado a la estructura.

20 Cambiar los estilos con CSS CSS h1 { font-size: large; font-family: Impact; } HTML <h1>esto es un título</h1>

21 Cómo asignar atributos a tags h1 {color: purple;} h2 {color: purple;} h3 {color: purple;} ó h1, h2, h3 {color: purple;} ó h1,a {color: purple; background: white;} h3 {color: white;} h1, h3 {background: green;} b {color: red; background: white;}

22 La etiqueta link <link rel="stylesheet" type="text/css" href="fichero.css" title="título de estilo">

23 La etiqueta link <link rel="stylesheet" type="text/css" href="fija.css" title="default"> <link rel="alternate stylesheet" type="text/css" href="alternativa1.css" title="vista de impresión > <link rel="alternate stylesheet" type="text/css" href="alternativa2.css" title="vista decorada">

24 Los atributos Existen gran cantidad de atributos que pueden ser aplicados a la mayoría de tags HTML ejemplo: css_largo.css Ver: Anexo-B CSS

25 El atributo CLASS <p class="cita">en en lugar de...</p>.cita {font-weight:bold; color:red;} Si queremos que solo se pueda aplicar a <p>..</p>: p.cita {font-weight:bold; color:black;}

26 El atributo ID <p id="primer-parrafo"> Primer párrafo en negrita. </p> #primer-parrafo {font-weight: bold;} Si queremos atributos adicionales para <p>..</p>: #primer-parrafo p {color:red;}

27 El tag HTML <div> Hoy en día las pg. Web suelen tener una estructura compleja. Hasta hace poco era frecuente hacer estas divisiones usando tablas. Hoy día es mejor utilizar el tag <div> que permite hacer una división lógica de la página.

28

29

30 body {padding:0; margin:0;background:url(images/body_bg.gif)} div, h1, h2, p, form, label, input,img {margin:0; padding:0;} ul {margin:0; padding:0; list-style-type:none;} #header {width:778px; height:49px; background:url(images/header.jpg) 0 0 no-repeat; padding:385px 0 0 0; margin:0 auto;position:relative;} #header ul.nav {width:538px; height:28px; padding:0; margin:0;} #header ul.nav li {float:left; padding:0; margin:0;} #header ul.nav li a {display:block; height:28px; padding:0 11px 0 11px; background-color:#ffffef; color:#523500; font:bold 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; margin:0 1px 0 0; float:left;} #header ul.nav li a:hover { background:url(images/nav_hover.gif) 0 0 repeat-x #FFFEEF; color:#fff;} #header ul.nav li.home {display:block; height:28px; float:left; margin:0; padding:0 11px 0 11px; background:url(images/nav_hover.gif) 0 0 repeat-x #FFFEEF; color:#fff; font:bold 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none;}

31 Ventajas CSS Programadores -> HTML Diseñadores ->CSS Menor tamaño de las páginas. Los motores de búsqueda funcionan mejor: ficheros HTML pequeños y bien estructurados. Potencia el etiquetado basado en estructura.

32 XML Extensible Markup Language No es un lenguaje de marcado del estilo de HTML meta-lenguaje que nos permite definir nuevos lenguajes de marcado: Publicar e intercambiar contenidos de bases de datos. Formatos de mensaje entre aplicaciones. Descripción de contenidos. Un fichero de configuración. Representar cualquier tipo de información en general.

33 XHTML HTML no sigue las especificaciones XML. Paso lógico HTML en XML -> XHTML En la versión 1.0 no aumenta las funcionalidades Ventajas: Mezclar con distintos formatos XML Más restrictivo, menos trabajo al navegador Podemos usar herramientas para XML

34 Estructura de una plantilla Joomla

35 Estructura de una plantilla Joomla La estructura básica de un template de Joomla 1.5.x consta de: Carpetas: css: Es la carpeta que contiene los estilos en cascada del template. html: Esta carpeta posee los archivos que funcionaran como plantilla especifica para módulos y componentes (nueva característica). Su uso no es prioritario. images: Contendrá las imágenes usadas para el diseño. Archivos: index.php: El archivo principal, contendrá todo el HTML y directivas PHP de para cargar el contenido.

36 Estructura de una plantilla Joomla templatedetails.xml: Determinante para que la plantilla sea reconocida en la administración del CMS. Posee diversos datos como licencia, autor, , etc. Además en ella estarán los parámetros de la plantilla y las posiciones de módulos disponibles. template_thumbnail.png: Es la imagen que actuará como preview en la administración. params.ini: Contendrá los valores para configurar los parámetros del template. Si la plantilla no posee parámetros para configurar, este archivo no será necesario. template.css: Es el estilo en cascada principal que se encuentra dentro de la carpeta 'css'. Anteriormente este archivo tenia el nombre de template_css.css. favicon.ico: El icono que usaremos en nuestro sitio. imagenes varias: Conformaran el diseño de la plantilla de ser necesarias.

37 Web Developer Toolbar Herramienta útil para inspeccionar estilos CSS Firefox 3.x Firefox 4.x

38 Modificar una plantilla Joomla EJERCICIO: Instala la plantilla: platonic.zip Inspecciona sus ficheros Con Web Developer Toolbar inspecciona sus estilos Modifica ciertos aspectos de la plantilla Cambiar el logo por el fichero rana.jpg. Ajusta el alto para el logo (ID #header y #logo) Modifica el color del texto que aparece sobre el logo Trata de cambiar otros elementos