documentacion ihm3

44
UNIVERSIDAD AUTONOMA DEL ESTADO DE MEXICO UAEM CENTRO UNIVERSITARIO UAEM VALLE DE CHALCO PROFESOR MARCO ALBERTO MENDOZA PEREZ MATERIA INTERACCION HOMBRE MAQUINA PROYECTO PAGINA WEB EN LA PALATFORMA DE JOOMLA ELABORADO JUAN SANCHEZ HERNANDEZ INGENIERIA EN COMPUTACION TURNO VESPERTINO ICO 7

Upload: coorie100

Post on 13-Jun-2015

172 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Documentacion ihm3

UNIVERSIDAD AUTONOMA DEL ESTADO DE MEXICO UAEM

CENTRO UNIVERSITARIO UAEM VALLE DE CHALCO

PROFESOR

MARCO ALBERTO MENDOZA PEREZ

MATERIA

INTERACCION HOMBRE MAQUINA

PROYECTO

PAGINA WEB EN LA PALATFORMA DE JOOMLA

ELABORADO

JUAN SANCHEZ HERNANDEZ

INGENIERIA EN COMPUTACION

TURNO VESPERTINO

ICO 7

Page 2: Documentacion ihm3

INTRODUCCION

Una página web es el nombre de un documento o información electrónica

adaptada para la World Wide Web y que puede ser accedida mediante un

navegador . Esta información se encuentra generalmente en

formato HTML o XHTML, y puede proporcionar navegación a otras páginas web

mediante enlaces de hipertexto. Las páginas web frecuentemente incluyen otros

recursos como hojas de estilo en cascada, guiones (scripts) e imágenes digitales,

entre otros.

Las páginas web pueden estar almacenadas en un equipo local o un servidor

web remoto. El servidor web puede restringir el acceso únicamente para redes

privadas, p. ej., en una intranet corporativa, o puede publicar las páginas en la

World Wide Web. El acceso a las páginas web es realizado mediante su

transferencia desde servidores utilizando el protocolo de transferencia de

hipertexto

Características

Una página web está compuesta principalmente por información (sólo texto y/o

módulos multimedia) así como por hiperenlaces; además puede contener o

asociar Hoja de estilo, datos de estilo para especificar cómo debe visualizarse, y

también Aplicación informática aplicaciones embebidas para así hacerla

interactiva.

Las páginas web son escritas en un lenguaje de marcado que provee la capacidad

de manejar e insertar hiperenlaces, generalmente HTML.

El contenido de la página puede ser predeterminado página web estática o

generado al momento de visualizarla o solicitarla a un servidor web página web

dinámica. Las páginas dinámicas que se generan al momento de la visualización,

se especifican a través de algún lenguaje interpretado, generalmente JavaScript, y

la aplicación encargada de visualizar el contenido es la que realmente debe

generarlo. Las páginas dinámicas que se generan, al ser solicitadas, son creadas

por una aplicación en el servidor web que alberga las mismas.

Respecto a la estructura de las páginas web, algunos organismos, en especial

el W3C, suelen establecer directivas con la intención de normalizar el diseño, y

para así facilitar y simplificar la visualización e interpretación del contenido.

Una página web es en esencia una tarjeta de presentación digital, ya sea para

empresas, organizaciones, o personas, así como una tarjeta de presentación de

ideas y de informaciones. Así mismo, la nueva tendencia orienta a que las páginas

web no sean sólo atractivas para los internautas, sino también optimizadas

(preparadas) para los buscadores a través del código fuente. Forzar esta doble

función puede, sin embargo, crear conflictos respecto de la calidad del contenido.

Si hablamos de posicionamiento web, una página web es la base para optimizar

todo un sitio web el cual es un conjunto de páginas web.

Page 3: Documentacion ihm3

TEMA DEL PROYECTO

PAGINA WEB DE DESPACHO DE ABOGADOS

Nosotros si lo sabemos!! Más de 500.000 búsquedas relacionadas con abogados

se realizan mensualmente en Google. Muchos despachos de abogados ya estan

presentes en Internet y ganan nuevos clientes con sus página Web.

Propuesta de diseño Web

Características principales.

Diseño a medida y personalizado

Desarrollo escalable

Formulario de contacto

Libertad de formatos, contenidos, colores y estilos.

Asesoramiento personalizado.

Objetivos

Inversión rentable

Solución todo incluido

Puesta en marcha inmediata

Contenido de buscadores.

Page 4: Documentacion ihm3

METODOLOGIA

PAGINA WEB

>> Elección del tipo de Web

Lo primero que se ha de decidir es el tipo de Web que queremos crear, es el punto de partida que afecta a todas las etapas posteriores de creación, realizaremos un diseño, aplicaciones, navegabilidad... adecuadas al tipo de Web seleccionada.

Ejemplos:

Sitio Web comercial . Sitio Web profesional. Sitio Web de información. Sitio Web de ocio.

>> Definición de la Temática

Se ha de definir los temas que se van a exponer en el sitio Web, permitiendo definir términos claves de búsqueda para posteriormente realizar una metodología de posicionamiento.

Page 5: Documentacion ihm3

Sitio Web comercial donde se vende todo tipo de objetos Sitio Web comercial especializado en la compra y venta de pisos. Sitio Web profesional especializado en consultoría de nuevas tecnologías Sitio Web de información acerca del museo del prado.

>> Planteamiento de objetivos

Se han de plantear los objetivos que se quieren alcanzar con la creación del sitio Web, para posteriormente marcar estrategias funcional para la consecución de dichos objetivos.

Dar a conocer el negocio, captación de clientes y generación de nuevos pedidos.

Vender publicidad contextual, banners... para obtener ingresos. Presentar mi Curriculum Vitae en la red.....

>> Escalabilidad

La escalabilidad se define como las visiones a corto y largo plazo acerca de nuestro sitio Web , si a lo largo del tiempo queremos ampliar nuestro sitio Web con nuevas aplicaciones, nuevas paginas, actualizaciones constantes...

>> Definición del diseño

Dependiendo del tipo de Web, la temática seleccionada, los objetivos planteados y la escalabilidad definida, estamos preparados para definir sobre papel el diseño de la Web, incluyendo los fondos, tipos de letras, botones, formularios, links, plantillas ,aplicaciones , de tal forma que obtengamos "storyboard "de los elementos y diseño que queremos implementar en nuestro sitio Web.

Producción y creación del sitio pagina web

>> Diseño visual y creación de la información a implementar

Creación del esqueleto de la Web, tablas, encabezados, espacio para imágenes, texto, botones...

Creación de las imágenes que acompañara a nuestro sitio Web, logos, cabeceras, fotografías, además del proceso concepción y materialización de la información que se va a ofrecer.

>> Aplicaciones Web

Creación de las aplicaciones que contendrán nuestro sitio Web, encuestas, foros, soporte al cliente, pedidos on-line, mediante programación especifica y creación de bases de datos.

Page 6: Documentacion ihm3

>> Posicionamiento

Una vez que tenemos terminado nuestro sitio Web lo que queremos es que en cualquier buscador, especialmente google, aparezcamos en las primeras posiciones para recibir mas visitas a nuestra Web.

Es este punto donde se ha de implementar una metodología especifica para alcanzar un posicionamiento optimo, definiendo las palabras claves de búsqueda, creación de archivos robots.txt.

>> Testeo

Realización de pruebas para comprobar la usabilidad y correcto funcionamiento de nuestro sitio, no queremos mostrar paginas con links rotos, paginas en con un formato diferente a las anteriores, aplicaciones no funcionales....ya que aportan una imagen negativa y harán que los visitantes no vuelvan a nuestra pagina.

Mantenimiento y explotación de la página web

>> Ampliaciones y actualizaciones

Es muy importante ofrecer información novedosa que atraiga y fidelice a nuestros visitantes o clientes, es importante definir una pagina de novedades o noticias donde los visitantes obtengan rápidamente las informaciones novedosas y aprecien que el sitio Web se mantiene "vivo" y puede ofrecerle nuevos servicios.

>> Posicionamiento

El arte del posicionamiento es una metodología que requiere un seguimiento para poder posicionarnos y mantenernos en los primeros puestos de los buscadores, gran parte de nuestro éxito depende del numero de visitas que reciba la Web.

>> Marketing

Realizar una estrategia de marketing para dar a conocer nuestra Web ya puede ser mediante publicaciones en periódicos, panfletos, links de otras Web....

>> Mantenimiento

Realización de programas de mantenimiento para que nuestra Web este en

funcionamiento durante toda su vida.

Page 7: Documentacion ihm3

ARQUITECTURA PARA PROYECTOS DE DESARROLLO JOOMLA

Cuando abordamos un proyecto de desarrollo basado en el CMS Joomla,

debemos hacerlo igual que si de cualquier otro proyecto de desarrollo se tratara.

Un error muy común es el de comparar los desarrollos realizados con Software

Libre por un freelance (en nuestro caso Joomla) con otros proyectos donde

intervienen equipos completos de desarrollo.

Es decir, si necesitamos un equipo de profesionales formado por analistas y

programadores, maquetadores, diseñadores, etc... Todos ellos coordinados por un

jefe de proyecto, y deseamos además poder tener un control tanto de la calidad

del producto resultante como de la evolución del mismo a lo largo del tiempo para

dar respuesta a las futuras necesidades de nuestros procesos de negocio,

necesitamos sin duda utilizar alguna de las metodologías existentes para el

desarrollo del software.

En la actualidad la tendencia es basarse en el Desarrollo Rápido de Aplicaciones,

esta es una metodología de desarrollo de software, que implica el desarrollo

interactivo y la construcción de prototipos. siendo los siguientes sus principios

básicos:

Objetivo clave es para un rápido desarrollo y entrega de una alta calidad en un

sistema de relativamente bajo coste de inversión.

Intenta reducir el riesgos inherente del proyecto partiéndolo en segmentos

más pequeños y proporcionar más facilidad de cambio durante el proceso de

desarrollo.

Orientación dedicada a producir sistemas de alta calidad con rapidez,

principalmente mediante el uso de iteración por prototipos (en cualquier etapa

de desarrollo), promueve la participación de los usuarios y el uso de

herramientas de desarrollo computarizadas. Estas herramientas pueden incluir

constructores de Interfaz gráfica de usuario (GUI), Computer Aided

Software Engineering (CASE) las herramientas, los sistemas de gestión de

bases de datos (DBMS), lenguajes de programación de cuarta generación,

generadores de código, y técnicas orientada a objetos.

Page 8: Documentacion ihm3

Hace especial hincapié en el cumplimiento de la necesidad comercial,

mientras que la ingeniería tecnológica o la excelencia es de menor

importancia.

Control de proyecto implica el desarrollo de prioridades y la definición de los

plazos de entrega. Si el proyecto empieza a aplazarse, se hace hincapié en la

reducción de requisitos para el ajuste, no en el aumento de la fecha límite.

En general incluye Joint application development (JAD), donde los usuarios

están intensamente participando en el diseño del sistema, ya sea a través de

la creación de consenso estructurado en talleres, o por vía electrónica.

La participación activa de los usuarios es imprescindible.

Iterativamente realiza la producción de software, en lugar de enfocarse en un

prototipo.

Produce la documentación necesaria para facilitar el futuro desarrollo y

mantenimiento.

Complusoft, como Platinium Developement Sponsor del proyecto Joomla ha

adecuado esta metodología a las necesidades de los desarrollos tanto del

Framework como del portal de este CMS.

Uno de los primeros pasos para poder comenzar a desarrollar es el disponer de

una infraestructura bien definida y que facilite los siguientes aspectos:

Control de versiones

Prototipados operativos

Despliegues automatizados

Pruebas unitarias automatizadas

Pruebas funcionales automatizadas

Integración Continua

Para ello, Complusoft, configura en sus grandes clientes un entorno similar el

mostrado en el siguiente gráfico:

Page 9: Documentacion ihm3

Veamos ahora cada una de las partes con cierto detalle.

El núcleo:

El corazón de todo es un servidor web Nginx. ¿Porqué este y no un servidor

Apache? La respuesta es sencilla sobre Nginx podemos configurar un sistema

Page 10: Documentacion ihm3

de alta disponibilidad, con balanceo de carga, separando los servidores de

contenidos dinámicos de los que únicamente entreguen contenidos estáticos.

De manera que, además el sistema quede preparado para una migración

sostenida a la nube.

Es también parte de este corazón es el servidor de MySQL. O más

específicamente la granja de servidores que sincronizados entre ellos, cuando

es necesario, dan servicio a los diferentes entornos donde se despliega el

portal del cliente.

Un intérprete de PHP, se encargará de la ejecución de las páginas que deba

servir Nginx. Con los módulos necesarios para que Joomla pueda desplegar

toda la potencia que necesite el cliente, pero eliminando todos aquellos que

sin aportar ninguna valor añadido signifiquen un aumento de carga del

sistema o el más mínimo riesgo en cuanto a la seguridad se refiere.

Completa, por último este "core", el servidor NFS responsable del intercambio

de ficheros entre el resto de los aplicativos que componen el gráfico anterior.

La zona de desarrolladores:

Cada desarrollador dispone de un entorno IDE donde se encuentran

integradas las herramientas de gestión del control de versiones, así como

diversas utilidades que facilitan el desarrollo de las extensiones para Joomla.

Todos ellos centralizados en un servidor GIT que se conecta al servidor de

NFS del núcleo para volcar las versiones validadas por cada miembro del

equipo .

La zona de Integración Continua:

Se configura una herramienta de despliegue, así como un gestor de

Integración Continua responsables de los lanzamientos de las pruebas

unitarias (PHPUnit y JUnit) y de las funcionales (Selenium), así como de los

despliegues programados entre los diferentes entornos.

De esta manera simplificamos la fase de pruebas unitarias de los equipos de

desarrollo en una primera integración entre los diferente desarrolladores, así

como las futuras pruebas de usuario al automatizar aquellas pruebas

funcionales que son de obligado cumplimiento todas y cada una de las veces

que se modifique el proyecto Joomla.

Por último la zona de entornos:

Page 11: Documentacion ihm3

Disponemos de cuatro entornos diferenciados y aislados entre ellos. Al ser

Joomla un gestor de contenidos, se produce una situación particular en la

retroalimentación desde el entorno de Producción hacia los demás. Es

necesario , para la reproducción de determinadas circunstancias que

periódicamente se realice una copia con los datos falseados hacia el entorno

de Preproducción. Estos facilita la reproducción de las situaciones no

deseadas que por el uso se puedan producir por parte de los gestores de

contenidos sobre el sistema en explotación.

Un entorno imprescindible el de I+D+I posibilita enormente la evaluación

previa de extensiones y soluciones funcionales. Una vez identificadas estas se

procede a la repetición de las mismas en el entorno de desarrollo

integrándose estas en el ciclo habitual del equipo desde ese momento. Este

entorno suele tener un nivel de contaminación alto por residuos resultantes de

las constantes pruebas, por lo que existen procedimientos de restauración del

mismo desde el entorno de desarrollo, refrescando únicamente aquellos

cambios que tras las pruebas de integración ya se encuentra en su fase beta

(entorno de preproducción).

Pero centrémonos en el entorno que más estrés recibe por parte de nuestro

equipo: El de desarrollo. Un entorno en constante evolución donde se

incorporan los cambios tras las pruebas unitarias, y sobre el que se ejecutan

de forma automatizada pruebas de integración y funcionales. Un entorno

desde el que los desarrolladores reciben información de "debug" exactamente

igual que lo hacen de su entorno privado de desarrollo pero con la interacción

de sus cambios con el resto de los realizados por todo el equipo.

Un último entorno, el de Preproducción (o beta) facilita que le usuario pueda

realizar pruebas exactamente igual que lo haría en su sistema productivo pero

sin el riesgo de parar el mismo.

Todos estos entornos se configuran de manera que utilicen bases de datos

diferentes (falseando información si así se requiere para ajustarse a la legislación

del país del cliente (p.e. LOPD o LSSI en España), servidores de correo (reales o

simulados) diferentes para evitar los envío de correos a usuarios reales durante

las pruebas, pero que permitan medir la carga que estos envíos generan, sistemas

de copias de seguridad independientes, etc...

Solo de esta manera podemos abrodár un proyecto de larga duración y/o latencia

bajo Joomla con la misma calidad y seguridad que si lo realizáramos con

productos privativos en los que se exigiera este mismo tipo de arquitectura.

Page 12: Documentacion ihm3

FUNCIONES DE JOOMLA

Publicación de Contenidos: Joomla permite crear páginas ilimitadas y

editarlas desde un sencillo editor (similar a un procesador de textos) que

permite formatear los textos con los estilos e imágenes deseados.

Integración multimedia de imágenes, videos, documentos, flash,..

Editor de texto sencillo y potente

Generación automática de PDF, o versión para imprimir

Automatización de la publicación de artículos

Archivo e historial

Diseño web basado en Plantillas: Joomla da una enorme versatilidad a la

hora de crear un diseño profesional. Los contenidos y el diseño gráfico se

tratan de manera independiente, de manera que se puede cambiar totalmente

el aspecto de un sitio sin necesidad de volver a maquetar los contenidos.

Diseño profesional muy versátil

Páginas hechas bajo estándares XHTML/CSS de W3C

Gestión unificada del portal: Todo el sitio se gestiona desde una Panel de

Administración unificado, fácil de usar pero enormemente sólido y potente.

Potente administración de usuarios y niveles de acceso

Organización del Sitio Web: Joomla está preparado para organizar

eficientemente los contenidos del sitio lo que facilita la navegabilidad para los

usuarios y permite crear una estructura sólida, ordenada y sencilla para los

administradores.

Jerarquía de contenidos sencilla

Page 13: Documentacion ihm3

Navegación y menús totalmente editables

Disposición de módulos de contenidos modificables

Funcionalidad: Joomla ofrece la posibilidad de instalar, desinstalar y

administrar componentes y módulos, que agregarán servicios de valor a los

visitantes de su sitio web.

Valoración de contenidos, Encuestas, Feed de Noticias, Banners,

Estadísticas

Más de 2000 extensiones disponibles.

Page 14: Documentacion ihm3

DIAGRAMA DE CLASES

Page 15: Documentacion ihm3

DIAGRAMA DE FLUJO DEL SISTEMA

INICIO

ENTRAR AL SISTEMA

INGRESAR

DATOS

PASSWORD

NO RECHAZO DE

PASSWORD

UTILIZAR LA PÁGINA

WEB

SI

MENSAJE DE ERROR

DE PASSWORD

REGISTRAR USUARIOS

ADMINISTRAR PAGINA

FIN

Page 16: Documentacion ihm3

DIAGRAMA DE CASOS DE USO DEL PAGINA WEB

Page 17: Documentacion ihm3

DISEÑO DE INTERFAZ DE USUARIO

De acuerdo a la figura de abajo me base para realiza la interfaz de ususario de

acuero a la pagina web que es la firma de abogados.

Position-13 Es el menú de navegación contiene los botones o enlaces principales.

Position-0 Es el buscador de la página

Position-1. Es el menú superior contiene los botones o enlaces principales

Position-2 Títulos de los artículos.

Position-7 Sobre el sitio

Position-4 Formulario de acceso

Position-5 Testimonios

Position-14 Enlaces de ayuda

Position-12 Contenido e imagen principal

Position-6, Position-3, Position-8 Comerciales Opcional

Page 18: Documentacion ihm3

GLOSARIO Y REFERENCIAS

1. Internet El termino Internet es una unión de dos palabras del idioma inglés: Inter: Entre y Net: Red. En resúmen es la Comunicación entre Redes de Computadoras, que permite una gran variedad de servicios a la gente y a las empresas, facilitando enormemente las comunicaciones y acortando las distancias.

2. Web La palabra WEB es el término más usado para referirse al World Wide Web que es la Red Mundial de páginas o Documentos de texto entrelazados. Un documento entrelazado no es más que un documento que contiene enlaces a otros documentos o páginas de texto. También se le conoce con el nombre de documento de Hipertexto.

3. Email El término email viene de las palabras electronic mail del Inglés, que significan correo electrónico. Es una forma de comunicación escrita donde el mensaje se transporta de un computador a otro usando usando las facilidades de las redes de computadoras.

4. Joomla Permite crear páginas ilimitadas y editarlas desde un sencillo editor (similar a un procesador de textos) que permite formatear los textos con los estilos e imágenes deseados.

5. Pagina web Una página web es el nombre de un documento o información electrónica adaptada para la World Wide Web y que puede ser accedida mediante unnavegador . Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación a otras páginas web medianteenlaces de hipertexto. Las páginas web frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones (scripts) e imágenes digitales, entre otros.

6. Diagrama de Caso de Uso es una especie de diagrama de comportamiento. UML mejorado El Lenguaje de Modelado Unificado define una notación gráfica para representar casos de uso llamada modelo de casos de uso. UML no define estándares para que el formato escrito describa los casos de uso, y así mucha gente no entiende que esta notación gráfica define la naturaleza de un caso de uso; sin embargo una notación gráfica puede solo dar una vista general simple de un caso de uso o un conjunto de casos de uso. Los diagramas de casos de uso son a menudo confundidos con los casos de uso. Mientras los dos conceptos están relacionados, los casos de uso son mucho más detallados que los diagramas de casos de uso.

7. Diagrama de Flujo es la representación gráfica del algoritmo o proceso. Se utiliza en disciplinas como programación,economía, procesos industriales y psicología cognitiva.En Lenguaje Unificado de

Page 19: Documentacion ihm3

Modelado (UML), un diagrama de actividades representa los flujos de trabajo paso a paso de negocio y operacionales de los componentes en un sistema. Un diagrama de actividades muestra el flujo de control general.Estos diagramas utilizan símbolos con significados definidos que representan los pasos del algoritmo, y representan el flujo de ejecución mediante flechas que conectan los puntos de inicio y de fin de proceso.

8. Diagrama de clases es un tipo de diagrama estático que describe la

estructura de un sistema mostrando sus clases, atributos y las relaciones

entre ellos. Los diagramas de clases son utilizados durante el proceso de

análisis y diseño de los sistemas, donde se crea el diseño conceptual de la

información que se manejará en el sistema, y los componentes que se

encargaran del funcionamiento y la relación entre uno y otro.

Representación de: - Requerimientos en entidades y actuaciones. - La

arquitectura conceptual de un dominio - Soluciones de diseño en una

arquitectura - Componentes de software orientados a objetos.

9. Sistema (del latín systēma, proveniente del griego σύστημα) es un objeto

compuesto cuyos componentes se relacionan con al menos algún otro

componente; puede ser material oconceptual. Todos los sistemas tienen

composición, estructura y entorno, pero sólo los sistemas materiales tienen

mecanismo, y sólo algunos sistemas materiales tienen figura (forma).

Según el sistemismo, todos los objetos son sistemas o componentes de

otro sistema. Por ejemplo, un núcleo atómico es un sistema material físico

compuesto de protones y neutrones relacionados por la interacción nuclear

fuerte; una molécula es un sistema material químico compuesto

de átomos relacionados por enlaces químicos; una célula es un sistema

material biológico compuesto de orgánulos relacionados por enlaces

químicos no-covalentes y rutas metabólicas; una corteza cerebral es un

sistema material psicológico (mental) compuesto de neuronas relacionadas

porpotenciales de acción y neurotransmisores; un ejército es un sistema

material social y parcialmente artificial compuesto

de personas y artefactos relacionados por el mando, el abastecimiento,

la comunicación y la guerra; el anillo de los números enteros es un sistema

conceptual algebraico compuesto de números positivos, negativos y

el cero relacionados por la suma y lamultiplicación; y una teoría científica es

un sistema conceptual lógico compuesto

de hipótesis, definiciones y teoremas relacionados por la correferencia y

la deducción (implicación).

Page 20: Documentacion ihm3

10. Usuario Según la Real Academia Española (RAE), usuario es «aquél que

usa algo» o «que usa ordinariamente algo».1 Esto se opone a los conceptos

de web semántica, web 2.0 y 3.0, trabajo colaborativo, ya que la realidad

actual prima a los ciudadanos como emisores y no solo como receptores

que «usan» los medios.Es preferible, por tanto, hablar de actores,

sujetos, ciudadanos, etc. para referirse a las personas que interactúan en

las redes digitales. En informática este término se utiliza con especial

relevancia.

REFERENCIAS

http://www.joomla24.com/

http://www.joomlaspanish.org/

http://www.joobi.co/

http://comunidadjoomla.org/

http://www.shape5.com/

http://www.artisteer.com/?p=joomla_templates

http://extensions.joomla.org/

Page 21: Documentacion ihm3

MANUAL DEL USUARIO

1. Propósitos De esta guía

Los sitios web de la red son espacios dirigidos a la divulgación, la colaboración y el intercambio de información.

Debido a la importancia que van adquiriendo los medios virtuales interactivos en el diseño de los sitios y en la difusión de la información científica, se hace necesario garantizar la efectividad de su desarrollo para un mayor beneficio de los usuarios. En este sentido la Guía de usuario para la construcción de los sitios web de Información, en la herramienta joomla , tiene por objeto servir de apoyo y orientación a los responsables del desarrollo de los sitios, a partir de una serie de pautas dirigidas a lograr una uniformidad en su diseño y organización de la información. Las orientaciones, aquí expuestas, no sustituyen las consultas de los grupos Editor y Asesor, de los sitios web, al Equipo de Desarrollo y Construcción de los sitios de especialidades; integrados por los departamentos: Servicios de Información y Diseño Web de Información; sin embargo, es un documento de consulta permanente para el desarrollo de los sitios. 2. Planificación De esta guía. El primer paso es la planificación estratégica del sitio web. Consiste en establecer las bases para la construcción de los contenidos y servicios interactivos del sitio, su misión, visión; así como, el tiempo de realización y desarrollo. Para la planificación se deben hacer una serie de preguntas generales en torno a la creación del sitio web, que pueden ser de gran utilidad:

- ¿Cuáles deben ser sus propósitos - ¿Quiénes son mis principales usuarios? - ¿Cuáles son los principales recursos de información disponibles para el funcionamiento del sitio web? - ¿Qué contenidos y servicios serán más útiles para mis usuarios? - ¿Qué frecuencia de actualización tendrán los contenidos? - ¿Quiénes forman parte de proceso de evaluación del sitio y cómo pueden asesorarme?

3. Identificación de los Contenidos. Antes de comenzar a construir el sitio se definen sus propósitos. Este es un elemento que se define en las primeras etapas, con el fin de evitar

Page 22: Documentacion ihm3

rectificaciones innecesarias durante el proceso de diseño en etapas posteriores. Los contenidos que formarán parte del sitio dependerán en gran medida de sus objetivos, así como también, deberán estar en correspondencia con los propósitos generales.

4. Es importante conocer, al menos, una panorámica general de las necesidades de información de los usuarios para los que será construido el sitio, de manera que la relación entre ambos (usuario y sitio) sea positiva y satisfactoria.

Es conveniente aclarar que este no es un proceso que se realiza una sola vez. Los usuarios, sus necesidades y el contexto varían. Por lo tanto, conocer las principales necesidades de información o inquietudes de los usuarios respecto al sitio, debe ser un proceso cíclico que garantice su efectividad.

5. Estructura. Una actividad previa a la organización de los contenidos es su clasificación. Esta consiste en separar, diferenciar o delimitar elementos del mismo tipo de acuerdo con sus atributos, propiedades comunes o rasgos diferenciales.

Clasificar los distintos elementos que conformarán el sitio permite establecer una distribución adecuada en grupos homólogos, garantizando al usuario una navegación ordenada y lógica en el sitio.

Page 23: Documentacion ihm3

COMO INSTALAR JOOMLA

Introducción

En este tutorial vamos a poner en marcha el gestor de contenidos Joomla! 1.5 en un equipo para hacer nuestros desarrollos web. El tutorial comprende tres fases: preparar el sistema para instalación de Joomla; instalar el CMS; y aplicar configuraciones posteriores.

Prerrequisitos

En este tutorial manejaremos las siguientes versiones de software:

XAMPP 1.7.1 Joomla! 1.5.14 Stable MySQL GUI Tools 5.0 Windows Vista SP2 (32 bits)

Con lo anterior y las explicaciones que van a continuación se asegura un correcto funcionamiento. Los usuarios con experiencia pueden probar con otras versiones si lo desean. Asimismo hay que tener cuidado de que los cortafuegos u otro software de seguridad no bloqueen las conexiones de red de todo lo aquí explicado.

Primera parte: preparar el equipo para la instalación de Joomla 1.5

Instalación del servidor

Joomla! requiere de un servidor web con soporte adicional de PHP y MySQL; además utilizaremos las características de FTP. La instalación más rápida y efectiva es, sin duda, a través de XAMPP. Para su descarga e instalación recomiendo utlizar el siguiente tutorial de mi compañero Alfonso: XAMPP

Vemos que Alfonso realiza la instalación de XAMPP en C:\xampp, aunque cada cual puede escoger otro directorio (en mi caso es C:\Herramientas\xampp); en cualquier caso, a nuestra localización la denominaremos XAMPP_HOME a lo largo de este tutorial. Nótese que usando Windows Vista es recomendable que XAMPP_HOME no esté dentro de ningún directorio protegido del sistema operativo, como C:\Windows, C:\Archivos de Programa, etc.

Instalación de las MySQL GUI Tools

XAMPP ofrece un cliente para administrar la base de datos denominada phpMyAdmin. Personalmente prefiero utilizar lasMySQL GUI Tools, por potencia y simplicidad de manejo. Lo descargamos de la

Page 24: Documentacion ihm3

páginahttp://dev.mysql.com/downloads/gui-tools/5.0.html en su versión Windows (x86). Pulsamos en "Pick a mirror" a la derecha:

Descarga de MySQL GUI Tools 5.0

En la siguiente página nos ofrece registrarnos. Podemos omitirlo pulsando abajo en "No thanks, just take me to the downloads!" y seleccionando en la siguiente página el enlace HTTP o FTP del país que queramos. Una vez descargado el fichero mysql-gui-tools-5.0-rxx-win32.msi, lo ejecutamos y seguimos los pasos ofrecidos por el asistente de instalación.

Preparar la base de datos

Durante el proceso de instalación de Joomla! tendremos que especificar un usuario de base de datos y un esquema de instalación. En vez de utilizar el usuario root y el esquema de base de datos por defecto, vamos a crear, para nuestro Joomla!:

Un esquema de base de datos llamado joomladb Un usuario de MySQL llamado joomlauser con permisos sobre el esquema

anterior.

Para ello iniciamos la aplicación MySQL Administrator desde el menú inicio de Windows, y en la pantalla de conexión situamos los valores:

Stored Connection: podemos dejarlo vacío Server Host: localhost Port: 3306 Username: root Password: la que hayamos definido (si hemos seguido el tutorial

de Alfonso de XAMPP). Si no, dejar el campo vacío.

y pulsamos OK.

1.- Para crear un nuevo esquema de base de datos, pulsamos sobre Catalogs y luego en el espacio inferior, botón derecho | Create New Schema:

Page 25: Documentacion ihm3

Crear nuevo esquema de base de datos en MySQL

En la ventana emergente introducimos el nombre para nuestro esquema: joomladb

2.- Para crear un usuario asociado a la base de datos joomladb

Accedemos en el menú izquierdo ahora a User Administration y abajo a la derecha pulsamos sobre Add new user, e introducimos los datos:

MySQL User: joomlauser Password: la que queramos

A continuación pulsamos abajo a la derecha en Apply Changes. Pulsamos ahora con el borón derecho sobre el usuariojoomlauser y activamos Show hosts in user list, y a continuación Add host from wich the user can connect:

Page 26: Documentacion ihm3

Operaciones sobre usuario joomlauser

El host que vamos a añadir es localhost. Una vez lo tengamos, pulsamos sobre localhost bajo joomlauser, luego arriba en la pestaña Schema Privileges, luego sobre el esquema joomladb y a continuación pasamos todos los priviliegios de una columna a otra pulsando sobre el botón etiquetado "<<". Finalmente pulsamos Apply Changes:

Page 27: Documentacion ihm3

Pasos para asignar privilegios de joomladb a joomlauser@localhost:

Con ello ya tenemos creado una base de datos dedicada para las tablas de nuesta instalación de Joomla! 1.5

Configuración del servicio FTP

En nuestra instalación de Joomla! habilitaremos el acceso al sistema de ficheros por FTP. Para ello utilizaremos el servidor FTP FileZilla incluido en XAMPP: Para ello:

1.- En el XAMPP Control Panel activamos el checkbox de FileZilla y pulsamos en Aceptar en la ventana emergente

Page 28: Documentacion ihm3

Activar checkbox de FileZilla y Aceptar el mensaje

2.- A la pregunta Install Service? respondemos Sí:

Instalar servicio de FTP Filezilla en Windows

3.- A la pregunta Autostart Service? respondemos No (no nos interesa que se inicie a la vez que Windows, sino sólo cuando nosotros queramos):

Page 29: Documentacion ihm3

No deseamos que el servicio de FileZilla se arranque automáticamente

4.- A la última pregunta de Start Server? podemos decir que Sí, pues lo vamos a utilizar en unos minutos. De ahora en adelante podemos levantar o parar este servicio igual que hacemos con Apache o MySQL desde el XAMPP Control Panel.

Segunda parte: instalación de Joomla! 1.5

Obtenemos la distribución de Joomla! 1.5 (al elaborar este tutorial la release actual es la 1.5.14) desdehttp://www.joomla.org/download.html, pulsanso sobre ZIP en la versión 1.5.X Full Package del lenguaje English (UK) (luego lo configuraremos en nuestro idioma).

En XAMPP_HOME\htdocs creamos un directorio donde descomprimiremos el contenido del fichero descargado. En mi caso lo llamare cms, y a esta ruta XAMPP_HOME\htdocs\cms lo denominaremos JOOMLA_HOME.

Accedemos a http://localhost/cms para acceder a la pagina inicial de la instalación de Joomla!

Page 30: Documentacion ihm3

Paso 1: seleccionamos el idioma a utilizar durante la instalación:

Seleccion de idioma para la instalación

Page 31: Documentacion ihm3

Paso 2: Joomla! comprueba si nuesto sistema supera los requisitos mínimos

para la instalación:

Comprobación de requisitos del sistema: arriba obligatorios, abajo recomendados

Page 32: Documentacion ihm3

Paso 3: aceptamos los términos de la licencia simplemente

pulsando Siguiente:

Aceptamos los términos de licencia GNU/GPL

Paso 4: aportar la información de la base de datos para que Joomla! cree su

juego de tablas.

Conforme hemos configurado MySQL en pasos anteriores, los datos a introducir deberán ser:

Tipo de base de datos: mysql Nombre del servidor: localhost Nombre del usuario: joomlauser Contraseña: la que pusimos al dar de alta el usuario joomlauser Nombre de la base de datos: joomladb

Page 33: Documentacion ihm3

Aportar la información de la base de datos MySQL

Al pulsar Siguiente tardará unos instantes en avanzar a la siguiente pantalla. En caso de mensaje de error, revisar los pasos de este tutorial.

Paso 5: habilitar la capa de FTP para poder acceder a los archivos de

Joomla! mediante este protocolo.

Para nuestros desarrollos en un equipo local no suele ser necesario, pero aquí dejo explicado cómo se hace (este paso puede omitirse, seleccionando el radiobutton No para no habilitar la capa FTP y pulsando sobre Siguiente).

Primero vamos a configurar el servidor de FileZilla para que el directorio JOOMLA_HOME esté accesible vía FTP. En elXAMPP Control Panel, pulsamos sobre el botón Admin... a la derecha de Filezilla. Nos aparece un diálogo para conectarnos a la consola de administración de FileZilla, donde ponemos como Server Address: 127.0.0.1 y como puerto, el mostrado por defecto: 14147. No es necesario introducir contraseña de administración (aunque sería conveniente configurar en algún momento FileZilla por motivos de seguridad. Para configuración avanzada, consultar la documenación del FIleZilla FTP Server en http://wiki.filezilla-project.org/Main_Page).

Page 34: Documentacion ihm3

En la pantalla de administración, accedemos al menú Edit | Users | General y pulsamos sobre el botón Add de la derecha para añadir un usuario ftp: que llamaremos joomlaftp:

Alta de un usuario en FIleZilla FTP Server

y aceptamos con OK. A continuación pulsamos sobre nuestro nuevo usuario joomlaftp en la columna Users de la derecha, activamos el checkbox Password y establecemos una contraseña:

Establecer contraseña para el usuario joomlaftp

Pulsamos ahora en la opción de la izquierda Shared folders y a continuación en el usuario joomlaftp de la columna de la derecha. Tras ello pulsamos sobre Add y navegamos hasta seleccionar nuestro JOOMLA_HOME, y aceptamos. Sobre ella activamos todos los checkboxes a su derecha: Read, Write... Create, Delete... :

Page 35: Documentacion ihm3

Opciones para establecer el directorio HOME del usuario joomlaftp

Ya podemos cerrar la consola de configuración de FileZilla pulsando OK en la parte inferior izquierda de la ventana.

Volviendo a la pantalla de instalación de Joomla!, en el paso 5, de configuración de FTP, ahora ya podemos introducir los siguientes datos:

Seleccionamos el radiobutton Sí (para habilitar la capa FTP) Nombre de usuario FTP: joomlaftp Contraseña de FTP: la que hemos definido hace unos instantes Ruta a la carpeta de Joomla desde la raíz FTP: /

Esta ruta podemos ponerla nosotros o pulsar en el botón Encontrar la ruta FTP automáticamente. Podemos comprobar que los datos son correctos y que se logra la conexión FTP utilizando el botón Comprobar la configuración FTP:

Page 36: Documentacion ihm3

Introducir los parametros para la capa FTP de Joomla

Paso 6: configuración inicial de Joomla!

Tras pulsar en Siguiente en el paso anterior, en esta pantalla haremos tres operaciones:

1. poner un nombre a nuestra web en el cuadro de texto Nombre de sitio web (e.g. joomla_adictos)

2. Introducir un correo electrónico válido y una contraseña, que se asociarán al usuario admin de Joomla, el adminsitrador inicial.

3. Instalar datos de ejemplo. Activamos el radiobutton Instalar contenido de ejemplo predeterminado y pulsamos en el botón Instalar los datos de ejemplo predeterminado. Cuando este botón se convierta en el texto "Datos de ejemplo instalados", habrá finalizado al operación:

Page 37: Documentacion ihm3

Primera configuración de Joomla

Pulsamos sobre Siguiente para continuar.

Paso 7: finalizar la instalación

Joomla! nos pide que para finalizar correctamente la instalación, eliminemos el directorio JOOMLA_HOME\installation. De esta manera no se podrá repetir accidentalmente o malintencionadamente la instalación:

Finalizar el proceso eliminando el directorio installation de JOOMLA_HOME

Page 38: Documentacion ihm3

Ahora podemos acceder ya a Joomla! La página inicial del portal es http://localhost/cms/:

Pagina inicial de Joomla con contenido de ejemplo

y el acceso al backend de administración del gestor es http://localhost/cms/administrator/, con el usuarioadmin y contraseña, la que pusimos en el paso 6:

Page 39: Documentacion ihm3

Pantalla de login de la consola de administracion del CMS

Page 40: Documentacion ihm3

Panel de administración de Joomla!

Ya tenemos Joomla! instalado y preparado para nuestros desarrollos.

Tercera parte: configuraciones posteriores

En esta tercera parte veremos cómo configurar Joomla! 1.5 para algunas operaciones habituales o que pueden resultar interesantes.Todas ellas son opcionales. Veamos tres:

Instalar paquetes de idioma para trabajar con Joomla en nuestro lenguaje Activar URL amigables para mejorar el posicionamiento en

buscadores (Search Engine Optimization, SEO [PDF]) Mejorar la velocidad de navegación utilizando la caché

Vamos con ello.

Instalación de idiomas para el font y backend de Joomla! 1.5

En este ejemplo traduciremos Joomla! al español, pero el procedimiento es idéntico para cualquier otro idioma, y son muchos los disponibles: http://extensions.joomla.org/extensions/languages/translations-for-joomla.

Page 41: Documentacion ihm3

En primer lugar debemos descargar un paquete de idioma, que contendrá las traducciones. En nuestro caso, pulsaremos en el botón Download del Spanish - Translations for Joomla!:

Descarga del paquete de idiomas de Joomla

En enlace nos llevará a la página de descargas del proyecto encargado de la traducción en JoomlaCode. Descargaremos los ficheros .zip de los idiomas correspondientes a nuestra versión de Joomla!. Para la versión 1.5.14 de este tutorial, ofrecen la traducción por separado en dos ficheros: es-ES_joomla_lang_admin_1.5.14v1.zip (113.55 Kb) y es-ES_joomla_lang_site_1.5.14v1.zip (51.16 Kb)):

Paquetes de idiomas de la versión 1.5.14

El cambio de idioma es sencillo. Accedemos al panel de administración de Joomla y usamos el menú Extensions |Install/Uninstall. Usaremos la opción Upload Package File, seleccionamos uno de las dos descargas y pulsamos en Upload File & Install:

Instalar paquete de idioma

Repetimos el proceso con el segundo fichero de idiomas. En cada instalación aparecerá un mensaje de confirmación:Install Language Success.

Page 42: Documentacion ihm3

Finalmente accedemos al menú Extensions | Language Manager, seleccionamos el radio button de nuestro lenguaje y pulsamos en el icono Default, arriba a la derecha:

Establecer el idioma por defecto de Joomla

Para aplicar los cambios, finalizamos nuestra sesión en el panel y volvermos a conectar, seleccionando en la pantalla de login nuestro idioma (o dejar en Default ya que lo hemos convertido en el idioma de por defecto):

Seleccion del idioma del backend

En la parte front, las palabras manejadas por el motor de Joomla serán traducidas a nuestro idioma; el contenido de ejemplo que venía en inglés, sigue apareciendo tal cual (el texto publicado depende de su autor).

URL amigables y posicionamiento en buscadores (SEO)

Para que los buscadores encuentren URL adaptadas para su reconocimiento e indexación, podemos activar esta opción y el CMS reescribirá las direcciones web de manera estática (sin el paso de parámetros por URL propio de las peticiones GET de HTTP). Para ello en la página inicial del panel de administración pulsamos en el icono Global Configuration(o Configuración Global si hemos traducido Joomla! al español). Una vez ahí, a la derecha tenemos las opciones, que podemos activar o desactivar (guardamos las opciones pulsando en el icono de Apply o Save en la parte superior):

Page 43: Documentacion ihm3

Mejorar la velocidad de navegación de nuestra web

Al navegar por nuestra web con Joomla! podemos notar ciertos retrasos (delays) en las transiciones de páginas. Esto se debe a que el motor del CMS tiene que acudir a la base de datos y a disco a recopilar la información necesaria para la página solicitada y procesarla para enviar la respuesta a la petición del navegador del usuario. Eso incluye el contenido en texto, las imágenes, la plantilla, hacer posibles transformaciones de idioma, cargar los módulos activos. Esta situación suele agravarse cuando hay un número alto de usuarios navegando simultáneamente por nuestra web.

Esto puede paliarse si activamos el cacheo, que se fundamenta en que ciertas partes de las páginas son guardadas en disco ya procesadas, de manera que la siguiente vez sólo hay que mostrar esta información guardada y no volver a elaborarla o recuperarla de base de datos. La primera vez que se muestra la página con ese contenido será cuando se guarde para próximas visitas. Si el contenido de esa página cambiase por algún motivo, Joomla cacheará automáticamente.

Lo activamos en el panel de administración | Global Configuration | System, en las opciones de Cache Settings, seleccionando yes y guardando los cambios con Apply. La cantidad en Cache Time indica el tiempo máximo en minutos que permitimos para que el contenido recién cacheado se aloje en disco. Si el contenido de la web cambia muy frecuentemente, habrá que poner un valor bajo para forzar que se cachee el contenido en un tiempo breve y mejorar los tiempos de navegación de los usuarios que están en esos momentos. Si el contenido cambia poco, podemos relajar la condición.

Page 44: Documentacion ihm3

Opciones de cache de Joomla!

Debemos tener en cuenta que el proceso de cacheo de datos necesita recursos de procesador y disco, por lo que si el servidor está sobrecargado no debemos abusar con valores de tiempo bajos.

Conclusión

En este tutorial se ha querido dar una visión completa de la instalación de Joomla, y hacer ver que, aun estando listo para ser utilizado, podemos hacer tuning para sacar más partido. Saber qué configuraciones nos son ventajosas dependerá de la web que desarrollemos con este CMS y los contenidos que aloje.