Documentacion ihm3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Documentacion ihm3

on

  • 297 views

 

Statistics

Views

Total Views
297
Views on SlideShare
297
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Documentacion ihm3 Document Transcript

  • 1. 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
  • 2. INTRODUCCIONUna página web es el nombre de un documento o información electrónicaadaptada para la World Wide Web y que puede ser accedida mediante unnavegador . Esta información se encuentra generalmente enformato HTML o XHTML, y puede proporcionar navegación a otras páginas webmediante enlaces de hipertexto. Las páginas web frecuentemente incluyen otrosrecursos 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 servidorweb remoto. El servidor web puede restringir el acceso únicamente para redesprivadas, p. ej., en una intranet corporativa, o puede publicar las páginas en laWorld Wide Web. El acceso a las páginas web es realizado mediante sutransferencia desde servidores utilizando el protocolo de transferencia dehipertextoCaracterísticasUna página web está compuesta principalmente por información (sólo texto y/omódulos multimedia) así como por hiperenlaces; además puede contener oasociar Hoja de estilo, datos de estilo para especificar cómo debe visualizarse, ytambién Aplicación informática aplicaciones embebidas para así hacerlainteractiva.Las páginas web son escritas en un lenguaje de marcado que provee la capacidadde manejar e insertar hiperenlaces, generalmente HTML.El contenido de la página puede ser predeterminado página web estática ogenerado al momento de visualizarla o solicitarla a un servidor web página webdiná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, yla aplicación encargada de visualizar el contenido es la que realmente debegenerarlo. Las páginas dinámicas que se generan, al ser solicitadas, son creadaspor una aplicación en el servidor web que alberga las mismas.Respecto a la estructura de las páginas web, algunos organismos, en especialel W3C, suelen establecer directivas con la intención de normalizar el diseño, ypara 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 paraempresas, organizaciones, o personas, así como una tarjeta de presentación deideas y de informaciones. Así mismo, la nueva tendencia orienta a que las páginasweb 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 doblefunció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 optimizartodo un sitio web el cual es un conjunto de páginas web.
  • 3. TEMA DEL PROYECTO PAGINA WEB DE DESPACHO DE ABOGADOSNosotros si lo sabemos!! Más de 500.000 búsquedas relacionadas con abogadosse realizan mensualmente en Google. Muchos despachos de abogados ya estanpresentes en Internet y ganan nuevos clientes con sus página Web.Propuesta de diseño WebCaracterí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.
  • 4. METODOLOGIA PAGINA WEB>> Elección del tipo de WebLo primero que se ha de decidir es el tipo de Web que queremos crear, es el puntode partida que afecta a todas las etapas posteriores de creación, realizaremos undiseñ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áticaSe ha de definir los temas que se van a exponer en el sitio Web, permitiendodefinir términos claves de búsqueda para posteriormente realizar una metodologíade posicionamiento.
  • 5.  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 objetivosSe han de plantear los objetivos que se quieren alcanzar con la creación del sitioWeb, para posteriormente marcar estrategias funcional para la consecución dedichos 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.....>> EscalabilidadLa escalabilidad se define como las visiones a corto y largo plazo acerca denuestro sitio Web , si a lo largo del tiempo queremos ampliar nuestro sitio Web connuevas aplicaciones, nuevas paginas, actualizaciones constantes...>> Definición del diseñoDependiendo del tipo de Web, la temática seleccionada, los objetivos planteados yla escalabilidad definida, estamos preparados para definir sobre papel el diseño dela Web, incluyendo los fondos, tipos de letras, botones, formularios, links, plantillas,aplicaciones , de tal forma que obtengamos "storyboard "de los elementos ydiseñ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 implementarCreació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ónque se va a ofrecer.>> Aplicaciones WebCreación de las aplicaciones que contendrán nuestro sitio Web, encuestas, foros,soporte al cliente, pedidos on-line, mediante programación especifica y creaciónde bases de datos.
  • 6. >> PosicionamientoUna vez que tenemos terminado nuestro sitio Web lo que queremos es que encualquier buscador, especialmente google, aparezcamos en las primerasposiciones para recibir mas visitas a nuestra Web.Es este punto donde se ha de implementar una metodología especifica paraalcanzar un posicionamiento optimo, definiendo las palabras claves de búsqueda,creación de archivos robots.txt.>> TesteoRealización de pruebas para comprobar la usabilidad y correcto funcionamiento denuestro sitio, no queremos mostrar paginas con links rotos, paginas en con unformato diferente a las anteriores, aplicaciones no funcionales....ya que aportanuna imagen negativa y harán que los visitantes no vuelvan a nuestra pagina.Mantenimiento y explotación de la página web>> Ampliaciones y actualizacionesEs muy importante ofrecer información novedosa que atraiga y fidelice a nuestrosvisitantes o clientes, es importante definir una pagina de novedades o noticiasdonde los visitantes obtengan rápidamente las informaciones novedosas yaprecien que el sitio Web se mantiene "vivo" y puede ofrecerle nuevos servicios.>> PosicionamientoEl arte del posicionamiento es una metodología que requiere un seguimiento parapoder posicionarnos y mantenernos en los primeros puestos de los buscadores,gran parte de nuestro éxito depende del numero de visitas que reciba la Web.>> MarketingRealizar una estrategia de marketing para dar a conocer nuestra Web ya puedeser mediante publicaciones en periódicos, panfletos, links de otras Web....>> MantenimientoRealización de programas de mantenimiento para que nuestra Web este enfuncionamiento durante toda su vida.
  • 7. ARQUITECTURA PARA PROYECTOS DE DESARROLLO JOOMLACuando 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 SoftwareLibre por un freelance (en nuestro caso Joomla) con otros proyectos dondeintervienen equipos completos de desarrollo.Es decir, si necesitamos un equipo de profesionales formado por analistas yprogramadores, maquetadores, diseñadores, etc... Todos ellos coordinados por unjefe de proyecto, y deseamos además poder tener un control tanto de la calidaddel producto resultante como de la evolución del mismo a lo largo del tiempo paradar respuesta a las futuras necesidades de nuestros procesos de negocio,necesitamos sin duda utilizar alguna de las metodologías existentes para eldesarrollo 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 desarrollointeractivo y la construcción de prototipos. siendo los siguientes sus principiosbá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.
  • 8. 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 haadecuado esta metodología a las necesidades de los desarrollos tanto delFramework como del portal de este CMS.Uno de los primeros pasos para poder comenzar a desarrollar es el disponer deuna infraestructura bien definida y que facilite los siguientes aspectos: Control de versiones Prototipados operativos Despliegues automatizados Pruebas unitarias automatizadas Pruebas funcionales automatizadas Integración ContinuaPara ello, Complusoft, configura en sus grandes clientes un entorno similar elmostrado en el siguiente gráfico:
  • 9. 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
  • 10. 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:
  • 11. 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 datosdiferentes (falseando información si así se requiere para ajustarse a la legislacióndel país del cliente (p.e. LOPD o LSSI en España), servidores de correo (reales osimulados) diferentes para evitar los envío de correos a usuarios reales durantelas pruebas, pero que permitan medir la carga que estos envíos generan, sistemasde copias de seguridad independientes, etc...Solo de esta manera podemos abrodár un proyecto de larga duración y/o latenciabajo Joomla con la misma calidad y seguridad que si lo realizáramos conproductos privativos en los que se exigiera este mismo tipo de arquitectura.
  • 12. 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
  • 13.  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.
  • 14. DIAGRAMA DE CLASES
  • 15. DIAGRAMA DE FLUJO DEL SISTEMA INICIO MENSAJE DE ERRORENTRAR AL SISTEMA DE PASSWORD INGRESAR NO RECHAZO DE DATOS PASSWORD PASSWORD SIUTILIZAR LA PÁGINA WEBREGISTRAR USUARIOSADMINISTRAR PAGINA FIN
  • 16. DIAGRAMA DE CASOS DE USO DEL PAGINA WEB
  • 17. DISEÑO DE INTERFAZ DE USUARIODe acuerdo a la figura de abajo me base para realiza la interfaz de ususario deacuero 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áginaPosition-1. Es el menú superior contiene los botones o enlaces principalesPosition-2 Títulos de los artículos.Position-7 Sobre el sitioPosition-4 Formulario de accesoPosition-5 TestimoniosPosition-14 Enlaces de ayudaPosition-12 Contenido e imagen principalPosition-6, Position-3, Position-8 Comerciales Opcional
  • 18. GLOSARIO Y REFERENCIAS1. 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
  • 19. 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).
  • 20. 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. REFERENCIAShttp://www.joomla24.com/http://www.joomlaspanish.org/http://www.joobi.co/http://comunidadjoomla.org/http://www.shape5.com/http://www.artisteer.com/?p=joomla_templateshttp://extensions.joomla.org/
  • 21. 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 elfuncionamiento 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 puedenasesorarme? 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
  • 22. 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.
  • 23. COMO INSTALAR JOOMLAIntroducciónEn este tutorial vamos a poner en marcha el gestor de contenidos Joomla! 1.5 enun equipo para hacer nuestros desarrollos web. El tutorial comprende tres fases:preparar el sistema para instalación de Joomla; instalar el CMS; y aplicarconfiguraciones posteriores.PrerrequisitosEn 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 correctofuncionamiento. Los usuarios con experiencia pueden probar con otras versionessi lo desean. Asimismo hay que tener cuidado de que los cortafuegos u otrosoftware 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.5Instalación del servidorJoomla! 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 yefectiva es, sin duda, a través de XAMPP. Para su descarga e instalaciónrecomiendo utlizar el siguiente tutorial de mi compañero Alfonso: XAMPPVemos que Alfonso realiza la instalación de XAMPP en C:xampp, aunque cadacual puede escoger otro directorio (en mi caso es C:Herramientasxampp); encualquier caso, a nuestra localización la denominaremos XAMPP_HOME a lolargo de este tutorial. Nótese que usando Windows Vista es recomendableque XAMPP_HOME no esté dentro de ningún directorio protegido del sistemaoperativo, como C:Windows, C:Archivos de Programa, etc.Instalación de las MySQL GUI ToolsXAMPP ofrece un cliente para administrar la base de datosdenominada phpMyAdmin. Personalmente prefiero utilizar lasMySQL GUI Tools,por potencia y simplicidad de manejo. Lo descargamos de la
  • 24. 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.0En la siguiente página nos ofrece registrarnos. Podemos omitirlo pulsando abajoen "No thanks, just take me to the downloads!" y seleccionando en la siguientepágina el enlace HTTP o FTP del país que queramos. Una vez descargado elfichero mysql-gui-tools-5.0-rxx-win32.msi, lo ejecutamos y seguimos los pasosofrecidos por el asistente de instalación.Preparar la base de datosDurante el proceso de instalación de Joomla! tendremos que especificar unusuario de base de datos y un esquema de instalación. En vez de utilizar elusuario root y el esquema de base de datos por defecto, vamos a crear, paranuestro 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 deWindows, 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 yluego en el espacio inferior, botón derecho | Create New Schema:
  • 25. Crear nuevo esquema de base de datos en MySQLEn la ventana emergente introducimos el nombre para nuestro esquema: joomladb2.- Para crear un usuario asociado a la base de datos joomladbAccedemos en el menú izquierdo ahora a User Administration y abajo a la derechapulsamos sobre Add new user, e introducimos los datos:  MySQL User: joomlauser  Password: la que queramosA continuación pulsamos abajo a la derecha en Apply Changes. Pulsamos ahoracon el borón derecho sobre el usuariojoomlauser y activamos Show hosts in userlist, y a continuación Add host from wich the user can connect:
  • 26. Operaciones sobre usuario joomlauserEl host que vamos a añadir es localhost. Una vez lo tengamos, pulsamossobre localhost bajo joomlauser, luego arriba en la pestaña Schema Privileges,luego sobre el esquema joomladb y a continuación pasamos todos los priviliegiosde una columna a otra pulsando sobre el botón etiquetado "<<". Finalmentepulsamos Apply Changes:
  • 27. Pasos para asignar privilegios de joomladb a joomlauser@localhost:Con ello ya tenemos creado una base de datos dedicada para las tablas de nuestainstalación de Joomla! 1.5Configuración del servicio FTPEn nuestra instalación de Joomla! habilitaremos el acceso al sistema de ficherospor FTP. Para ello utilizaremos el servidor FTP FileZilla incluido en XAMPP: Paraello:1.- En el XAMPP Control Panel activamos el checkbox de FileZilla y pulsamosen Aceptar en la ventana emergente
  • 28. Activar checkbox de FileZilla y Aceptar el mensaje2.- A la pregunta Install Service? respondemos Sí: Instalar servicio de FTP Filezilla en Windows3.- A la pregunta Autostart Service? respondemos No (no nos interesa que seinicie a la vez que Windows, sino sólo cuando nosotros queramos):
  • 29. No deseamos que el servicio de FileZilla se arranque automáticamente4.- A la última pregunta de Start Server? podemos decir que Sí, pues lo vamos autilizar en unos minutos. De ahora en adelante podemos levantar o parar esteservicio igual que hacemos con Apache o MySQL desde el XAMPP Control Panel.Segunda parte: instalación de Joomla! 1.5Obtenemos la distribución de Joomla! 1.5 (al elaborar este tutorial la release actuales la 1.5.14) desdehttp://www.joomla.org/download.html, pulsanso sobre ZIP en laversión 1.5.X Full Package del lenguaje English (UK) (luego lo configuraremos ennuestro idioma).En XAMPP_HOMEhtdocs creamos un directorio donde descomprimiremos elcontenido del fichero descargado. En mi caso lo llamare cms, y a estaruta XAMPP_HOMEhtdocscms lo denominaremos JOOMLA_HOME.Accedemos a http://localhost/cms para acceder a la pagina inicial de la instalaciónde Joomla!
  • 30. Paso 1: seleccionamos el idioma a utilizar durante la instalación: Seleccion de idioma para la instalación
  • 31. Paso 2: Joomla! comprueba si nuesto sistema supera los requisitos mínimospara la instalación:Comprobación de requisitos del sistema: arriba obligatorios, abajo recomendados
  • 32. Paso 3: aceptamos los términos de la licencia simplementepulsando Siguiente: Aceptamos los términos de licencia GNU/GPLPaso 4: aportar la información de la base de datos para que Joomla! cree sujuego de tablas.Conforme hemos configurado MySQL en pasos anteriores, los datos a introducirdeberá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
  • 33. Aportar la información de la base de datos MySQLAl pulsar Siguiente tardará unos instantes en avanzar a la siguiente pantalla. Encaso de mensaje de error, revisar los pasos de este tutorial.Paso 5: habilitar la capa de FTP para poder acceder a los archivos deJoomla! 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 elradiobutton No para no habilitar la capa FTP y pulsando sobre Siguiente).Primero vamos a configurar el servidor de FileZilla para que eldirectorio 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álogopara conectarnos a la consola de administración de FileZilla, donde ponemoscomo 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íaconveniente configurar en algún momento FileZilla por motivos de seguridad. Paraconfiguración avanzada, consultar la documenación del FIleZilla FTPServer en http://wiki.filezilla-project.org/Main_Page).
  • 34. En la pantalla de administración, accedemos al menú Edit | Users | General ypulsamos sobre el botón Add de la derecha para añadir un usuario ftp: quellamaremos joomlaftp: Alta de un usuario en FIleZilla FTP Servery aceptamos con OK. A continuación pulsamos sobre nuestro nuevousuario joomlaftp en la columna Users de la derecha, activamos elcheckbox Password y establecemos una contraseña: Establecer contraseña para el usuario joomlaftpPulsamos ahora en la opción de la izquierda Shared folders y a continuación en elusuario joomlaftp de la columna de la derecha. Tras ello pulsamos sobre Add ynavegamos hasta seleccionar nuestro JOOMLA_HOME, y aceptamos. Sobre ellaactivamos todos los checkboxes a su derecha: Read, Write... Create, Delete... :
  • 35. Opciones para establecer el directorio HOME del usuario joomlaftpYa podemos cerrar la consola de configuración de FileZilla pulsando OK en laparte inferior izquierda de la ventana.Volviendo a la pantalla de instalación de Joomla!, en el paso 5, de configuraciónde 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 FTPautomáticamente. Podemos comprobar que los datos son correctos y que se lograla conexión FTP utilizando el botón Comprobar la configuración FTP:
  • 36. Introducir los parametros para la capa FTP de JoomlaPaso 6: configuración inicial de Joomla!Tras pulsar en Siguiente en el paso anterior, en esta pantalla haremos tresoperaciones: 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:
  • 37. Primera configuración de JoomlaPulsamos sobre Siguiente para continuar.Paso 7: finalizar la instalaciónJoomla! nos pide que para finalizar correctamente la instalación, eliminemos eldirectorio JOOMLA_HOMEinstallation. De esta manera no se podrá repetiraccidentalmente o malintencionadamente la instalación: Finalizar el proceso eliminando el directorio installation de JOOMLA_HOME
  • 38. Ahora podemos acceder ya a Joomla! La página inicial del portales http://localhost/cms/: Pagina inicial de Joomla con contenido de ejemploy el acceso al backend de administración del gestores http://localhost/cms/administrator/, con el usuarioadmin y contraseña, la quepusimos en el paso 6:
  • 39. Pantalla de login de la consola de administracion del CMS
  • 40. Panel de administración de Joomla!Ya tenemos Joomla! instalado y preparado para nuestros desarrollos.Tercera parte: configuraciones posterioresEn esta tercera parte veremos cómo configurar Joomla! 1.5 para algunasoperaciones habituales o que pueden resultar interesantes.Todas ellas sonopcionales. 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.5En este ejemplo traduciremos Joomla! al español, pero el procedimiento esidéntico para cualquier otro idioma, y son muchos losdisponibles: http://extensions.joomla.org/extensions/languages/translations-for-joomla.
  • 41. En primer lugar debemos descargar un paquete de idioma, que contendrá lastraducciones. En nuestro caso, pulsaremos en el botón Download del Spanish -Translations for Joomla!: Descarga del paquete de idiomas de JoomlaEn enlace nos llevará a la página de descargas del proyecto encargado de latraducción en JoomlaCode. Descargaremos los ficheros .zip de los idiomascorrespondientes a nuestra versión de Joomla!. Para la versión 1.5.14 de estetutorial, 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.14El cambio de idioma es sencillo. Accedemos al panel de administración de Joomlay usamos el menú Extensions |Install/Uninstall. Usaremos la opción UploadPackage File, seleccionamos uno de las dos descargas y pulsamos en Upload File& Install: Instalar paquete de idiomaRepetimos el proceso con el segundo fichero de idiomas. En cada instalaciónaparecerá un mensaje de confirmación:Install Language Success.
  • 42. Finalmente accedemos al menú Extensions | Language Manager, seleccionamosel radio button de nuestro lenguaje y pulsamos en el icono Default, arriba a laderecha: Establecer el idioma por defecto de JoomlaPara aplicar los cambios, finalizamos nuestra sesión en el panel y volvermos aconectar, seleccionando en la pantalla de login nuestro idioma (o dejar en Defaultya que lo hemos convertido en el idioma de por defecto): Seleccion del idioma del backendEn la parte front, las palabras manejadas por el motor de Joomla serán traducidasa nuestro idioma; el contenido de ejemplo que venía en inglés, sigue apareciendotal 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 eindexación, podemos activar esta opción y el CMS reescribirá las direcciones webde manera estática (sin el paso de parámetros por URL propio de las peticionesGET de HTTP). Para ello en la página inicial del panel de administración pulsamosen el icono Global Configuration(o Configuración Global si hemos traducidoJoomla! al español). Una vez ahí, a la derecha tenemos las opciones, quepodemos activar o desactivar (guardamos las opciones pulsando en el iconode Apply o Save en la parte superior):
  • 43. Mejorar la velocidad de navegación de nuestra webAl 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 queacudir a la base de datos y a disco a recopilar la información necesaria para lapágina solicitada y procesarla para enviar la respuesta a la petición del navegadordel usuario. Eso incluye el contenido en texto, las imágenes, la plantilla, hacerposibles transformaciones de idioma, cargar los módulos activos. Esta situaciónsuele agravarse cuando hay un número alto de usuarios navegandosimultáneamente por nuestra web.Esto puede paliarse si activamos el cacheo, que se fundamenta en que ciertaspartes de las páginas son guardadas en disco ya procesadas, de manera que lasiguiente vez sólo hay que mostrar esta información guardada y no volver aelaborarla o recuperarla de base de datos. La primera vez que se muestra lapágina con ese contenido será cuando se guarde para próximas visitas. Si elcontenido 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 lasopciones de Cache Settings, seleccionando yes y guardando los cambioscon Apply. La cantidad en Cache Time indica el tiempo máximo en minutos quepermitimos para que el contenido recién cacheado se aloje en disco. Si elcontenido de la web cambia muy frecuentemente, habrá que poner un valor bajopara forzar que se cachee el contenido en un tiempo breve y mejorar los tiemposde navegación de los usuarios que están en esos momentos. Si el contenidocambia poco, podemos relajar la condición.
  • 44. Opciones de cache de Joomla!Debemos tener en cuenta que el proceso de cacheo de datos necesita recursosde procesador y disco, por lo que si el servidor está sobrecargado no debemosabusar con valores de tiempo bajos.ConclusiónEn 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 parasacar más partido. Saber qué configuraciones nos son ventajosas dependerá de laweb que desarrollemos con este CMS y los contenidos que aloje.