Diseño de una Página Web en la Plataforma Joomla

Texto completo

(1)DISEÑO DE UNA PAGINA WEB EN LA PLATAFORMA JOOMLA. SEBASTIAN CHACON RODRIGUEZ JORGE ANDRES REYES BERNAL. UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS FACULTAD DEL MEDIO AMBIENTE Y RECURSOS NATURALES PROYECTO CURRICULAR TECNOLOGÍA EN TOPOGRAFÍA BOGOTÁ D.C. 2016 1.

(2) DISEÑO DE UNA PAGINA WEB EN LA PLATAFORMA JOOMLA. SEBASTIAN CHACON RODRIGUEZ CODIGO: 20122031044 JORGE ANDRES REYES BERNAL CODIGO: 20122031014. Proyecto de Grado para optar al título de Tecnólogo en Topografía. Directora: JANNETH PARDO PINZÓN Ing. Catastral y Geodesta. UNIVERSIDAD DISTRITAL FRANSICO JOSÉ DE CALDAS FACULTAD DEL MEDIO AMBIENTE Y RECURSOS NATURALES PROYECTO CURRICULAR DE TECNOLOGÍA EN TOPOGRAFÍA BOGOTÁ D.C. 2016 1.

(3) NOTA DE ACEPTACIÓN. ____________________________________________. ____________________________________________. ____________________________________________. ____________________________________________. ____________________________________________. __________________________________ Firma del Director. __________________________________ Firma del Evaluador. 2.

(4) BOGOTÁ D.C. Día ____ Mes ______ Año_____ ARTICULO 117. La Universidad Distrital Francisco José de Caldas no será responsable de las ideas expuestas por el graduando en el trabajo de grado, según el acuerdo 029 de 1988. Agradecimientos 3.

(5) Quisiéramos expresar nuestro más profundo y sincero agradecimiento a todas aquellas personas que con su ayuda han colaborado en la realización del presente proyecto, en especial a la Ing. Janneth Pardo Pinzón, directora del proyecto, por la orientación, el seguimiento y la supervisión continúa de la misma, pero sobre todo por la motivación y el apoyo recibido a lo largo del desarrollo del proyecto. Así mismo agradecemos al revisor de la tesis Ing. Carlos Rodríguez su conocimiento y orientación fue fundamental para el desarrollo de este proyecto. Quisiéramos hacer extensiva la gratitud a nuestros compañeros de Tecnologia en Topografía por su amistad y colaboración. Un agradecimiento muy especial merece la comprensión, paciencia y el ánimo recibidos de nuestra familia y amigos. A todos ellos, muchas gracias.. 4.

(6) Resumen La gran aceptación de la internet y la gran demanda de este servicio a presentado un nuevo precedente en nuestro modo de informarnos y con la integración de las redes sociales se hace más fácil la interacción con infinidad de personas, es por esto que las comunidades académicas se han visto obligadas a integrarse de forma progresiva a esta nueva era. En este proyecto de grado se ve reflejado la implementación de las TIC mediante el desarrollo de un sitio web para el Proyecto Curricular De Tecnología En Topografía De La Universidad Distrital Francisco José De Caldas, esto para facilitar una comunicación constante con la comunidad educativa, los estudiantes encontraran un espacio para informarse de nuevas noticias del proyecto. Se escogió Joomla Como administrador de contenidos dada la facilidad de manejo y por su alto nivel de aceptabilidad, las ventajas de utilizar el Gestor de Contenidos CMS Joomla! (Content Management System) para crear un sitio web profesional y llamativo.. CMS Joomla permite crear desde la página Web más sencilla hasta crear la página WEB más compleja, Utilizando plantillas programadas y ampliándolas con muchas funcionalidades. Se trata de un sistema auto gestionable y totalmente actualizable en tiempo real con lo cual permite realizar los cambios necesarios a una página Web al instante y alimentarla de contenido. 5.

(7) TectopoUD responde a la necesidad que tiene el proyecto de Tecnología en Topografía de mantener una comunicación constante con la comunidad académica, para esto dispone de distintas herramientas como un chat en línea con el gestor de chat Tawk To el cual funciona de manera gratuita de igual forma existe un formulario de contáctenos con la integración de archivos adjuntos esto para adelantar procesos de manera más rápida y dar una mejor atención a los estudiantes, docentes, aspirantes y demás personas que tengan la necesidad de realizar algún trámite con el proyecto curricular de tecnología en topografía. TectopoUD reúne información de interés para toda la comunidad académica del proyecto curricular de Tecnología en Topografía la cual esta recopilada en cada uno de los menús del sitio web.. PALABRAS CLAVE: Sitio Web, Comunicación, TIC, Comunidad Académica, Joomla, bases de datos. 6.

(8) Abstract. The popularity of the internet and the high demand for this service has presented a new precedent in the way we inform and integration of social networks becomes easier interaction with many people, is why academic communities they have been forced to gradually integrate this new era. In this graduation project implementation of ICT it is reflected by developing a website for Curriculum Project Technology in topography of the District University of Bogotá, this to facilitate constant communication with the educational community, students find a space to learn new project news. Joomla was chosen as content manager given the ease of use and its high level of acceptability, the advantages of using the Content Management System Joomla! (Content Management System) to create a professional and attractive website. Joomla CMS allows us to create from the simplest Web page to create the most complex web page, using programmed templates and extending them with countless features. It is a self manageable and fully upgradeable system in real time which allows the necessary changes to a web page and instantly feed content TectopoUD responds to the need for the project Technology Topography to maintain constant communication with the academic community, for it has different tools like an online chat with the manager chat Tawk To which operates freely equally there 7.

(9) is a form of contact with the integration of attachments this to advance processes faster and provide better service to students, teachers, candidates and others who have a need to do any paperwork with the curricular project technology topography TectopoUD gathers information of interest to the entire academic community of curriculum project Technology in topography which is collected in each of the menus of the website.. KEYWORDS: Web site, Communication, TIC, Academic Community, Joomla, Database.. Contenido 8.

(10) 1. INTRODUCCION ......................................................................................... 11. 2. OBJETIVOS. ............................................................................................... 13 2.1. OBJETIVO GENERAL ............................................................................. 14. 2.2. OBJETIVOS ESPECÍFICOS .................................................................... 14. 3. MARCO REFERENCIAL............................................................................. 15 3.1. MARCO LEGAL....................................................................................... 15. 3.1.1. LEY DE PROPIEDAD INTELECTUAL ............................................... 15. 3.1.2. LEY ORGÁNICA DE PROTECCIÓN DE DATOS (LOPD) ................. 16. 3.1.3. LEY DE SERVICIOS DE SOCIEDAD DE LA INFORMACIÓN .......... 16. 3.2 MARCO INSTITUCIONAL UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS FACULTAD DE TECNOLOGÍA EN TOPOGRAFÍA. ......... 17 3.2.1 VISIÓN DEL PROYECTO CURRICULAR DE TECNOLOGÍA EN TOPOGRAFÍA ................................................................................................ 17 3.2.2 MISIÓN DEL PROYECTO CURRICULAR DE TECNOLOGÍA EN TOPOGRAFÍA ................................................................................................ 18 3.2.3. OBJETIVOS DEL PROYECTO CURRICULAR ................................. 18. 3.2.3.1.. Objetivo general ............................................................................. 18. 3.2.3.2.. Objetivos específicos...................................................................... 19. 3.3. MARCO TEÓRICO .................................................................................. 20. 3.3.1. LAS TICS EN LA COMUNICACIÓN Y LA ACADEMIA ...................... 20. 3.3.2. SITIO WEB ........................................................................................ 20. 3.2.3.3.. Tipos de WEB ................................................................................ 21. 3.2.3.3.1.. WEB 1.0 ...................................................................................... 21. 3.2.3.3.2.. WEB 2.0 ...................................................................................... 21. 3.3.3. HOSTING .......................................................................................... 22. 3.3.4. DOMINIO ........................................................................................... 22. 3.3.5. LENGUAJES DE PROGRAMACION ................................................. 23. 3.3.5.1.. HTML.............................................................................................. 23. 3.3.5.2.. HTML5............................................................................................ 24. 3.3.5.3.. CSS ................................................................................................ 24. 3.3.5.4.. Php ................................................................................................. 25 9.

(11) 3.3.5.5.. MySQL ........................................................................................... 25. 3.3.5.6.. FTP................................................................................................. 25. 3.3.5.7.. JOOMLA......................................................................................... 26. 3.3.6. REQUISITOS PARA INSTALAR JOOMLA ........................................ 27. 4.. METODOLOGÍA ......................................................................................... 28. 4.1.. COMPRA HOSTING Y DOMINIO .............................................................. 28. 4.2.. SESIÓN FTP ............................................................................................... 29. 4.2.1. CÓDIGO DE SESIÓN FTP .......................................................................... 30 4.3.. INSTALACIÓN JOOMLA ............................................................................ 32 4.3.1.. PASO 1: DATOS BÁSICOS .............................................................. 32. 4.3.2.. PASO 2: CREACIÓN Y ASIGNACIÓN DE BASE DE DATOS .......... 33. 4.3.3.. PASO 3: INFORMACIÓN GENERAL ................................................ 35. 4.3.4.. PROCESO FINAL DE INSTALACIÓN ............................................... 36. 4.3.5.. DISEÑO ADAPTATIVO WEB RESPONSIVE .................................... 38. 4.3.6.. DISEÑO PAGINA EN CONSTRUCCIÓN .......................................... 38. 4.4.. CREACIÓN DE MENÚS ............................................................................. 40. 4.5.. MÓDULOS, COMPLEMENTOS Y/O PLUGINS ...................................... 42. 4.5.1.. FACEBOOK SLIDER LIKEBOX......................................................... 43. 4.5.2.. JOOMSPIRIT SLIDER IMÁGENES ................................................... 43. 4.5.3.. EASY BLOG ...................................................................................... 44. 5. RESULTADOS ............................................................................................ 46 5.1. GTMETRIX ............................................................................................... 46. 5.2. VIDEO TUTORIALES .............................................................................. 49. 5.3. BACKUP .................................................................................................. 49. 6. CONCLUSIONES........................................................................................ 50. 7. RECOMENDACIONES ............................................................................... 52. 8. BIBLIOGRAFÍA........................................................................................... 53. 9. DOCUMENTACIÓN .................................................................................... 54. 10.

(12) Tabla Contenido Ilustraciones. Ilustracion 1 Características de ColHots1 ............................................................. 28 Ilustracion 2 Archivos de Instalación ..................................................................... 29 Ilustracion 3 Instalación Joomla Paso 1 ................................................................ 32 Ilustracion 4 Creación de base de datos cPanel ................................................... 33 Ilustracion 5 Paso 2 asignación de base de datos ................................................ 34 Ilustracion 6 Paso 3 instalaciones Joomla información general ............................ 35 Ilustracion 7 Eliminar la carpeta de instalación (installation)¡Error! Marcador no definido. Ilustracion 8 Página por defecto Joomla ............................................................... 36 Ilustracion 9 Plantilla ............................................................................................. 37 Ilustracion 10 Diseño adaptativo ........................................................................... 38 Ilustracion 11 Página en construcción ................................................................... 39 Ilustracion 12. Creación de Menús ........................................................................ 40 Ilustracion 13 Menú Estudiantes ->Tesis............................................................... 42 Ilustracion 14 Facebook Slider Likebox ................................................................. 43 Ilustracion 15 Carrusel de imágenes ..................................................................... 44 Ilustracion 16 Modulo administrativo EasyBlog ..................................................... 44 Ilustracion 17 Easy Blog Vista visitante ................................................................. 45 Ilustracion 18 GTmetrix ......................................................................................... 46 Ilustracion 19 Clasificación GTmetrix .................................................................... 46 Ilustracion 20 GTmetrix CSS ................................................................................. 48 Ilustracion 21 Archivos de la pagina ...................................................................... 49. 11.

(13) 1. INTRODUCCION. Las Tecnologías de la información y comunicación (TIC`s) y los medios Electrónicos como los sitios web y las redes sociales entre otros, se han convertido en los medios de comunicación más usados en la sociedad actual, ya que permiten una comunicación rápida, eficaz y entretenida, lo cual ha generando gran impacto en diversos aspectos de la vida y por supuesto en la academia, ya que las nuevas posibilidades para transmitir la información han transformado la forma de enseñar y se han convertido en una herramienta muy útil para reforzar los procesos pedagógicos. El Proyecto curricular de Tecnología en Topografía de la Universidad Distrital Francisco José de caldas se caracteriza por su constante búsqueda de la excelencia y difusión del conocimiento, por lo cual debe estar siempre a la vanguardia en las nuevas políticas nacionales e internacionales en el campo de la educación. A pesar del considerable crecimiento de la población estudiantil, el reconocimiento cualitativo de los maestros, el impacto de los egresados en el ámbito regional y nacional y la elaboración de documentos con aportes significativos para la comunidad académica, no se ha destinado un espacio virtual específico en el que todos los integrantes del proyecto curricular de Tecnología en Topografía puedan interactuar y comunicarse de una manera más eficiente, por esta razón, se ha podido identificar la necesidad de implementar un sitio WEB, que permita mejorar los procesos de comunicación, dar a conocer los avances en las técnicas de formación pedagógica, informar oportunamente de todas las actividades 12.

(14) curriculares y extracurriculares que sean de interés para los estudiantes y en general fortalecer el proceso de aprendizaje en el proyecto curricular de Tecnología en Topografía. Dicho sitio WEB pretende atraer y mantener una constante comunicación con los integrantes de la comunidad educativa, egresados y personas particulares que de cierta forma realizaran aportes en beneficio de los procesos de formación. Esta implementación pretende estimular a la comunidad educativa y en particular los estudiantes para que les sirva de consulta para las distintas actividades académicas y al mismo tiempo invitarlos a aportar sus ideas para complementar el sitio Web.. 13.

(15) 2. 2.1. OBJETIVOS.. OBJETIVO GENERAL. Diseñar e implementar un sitio Web en la plataforma Joomla, con el fin de fortalecer la comunicación entre la comunidad academica del Proyecto curricular de Tecnología en Topografía.. 2.2. OBJETIVOS ESPECÍFICOS. . Establecer los requerimientos básicos de comunicación de la comunidad educativa del proyecto curricular.. . Diseñar la estructura de un sitio web que permita mejorar la comunicación interactiva de la comunidad académica del proyecto curricular de Tecnología en Topografía.. . Implementar el sitio Web en internet para dar a conocer los procesos de formación pedagógica del proyecto curricular de Tecnología en Topografía.. 14.

(16) 3 3.1. MARCO REFERENCIAL. MARCO LEGAL. Toda página web debe respetar una serie de normas establecidas para dichos sitios. Una página web es una creación intelectual por lo tanto es posible protegerla como propiedad intelectual. Por tal motivo el diseño debe ser de propia autoría y tener licencia de uso de los complementos como plataformas, plantillas o widgets que se usen para el desarrollo del sitio web. Usar complementos de otros sin su autorización o sin licencia es una infracción al derecho de propiedad intelectual. Las leyes comprenden diferentes temas que afectan la operación de los Sitios Web, aunque actualmente no existen normas que estén dedicadas a esta temática en específico, se pueden citar como relacionadas las siguientes: 3.1.1 LEY DE PROPIEDAD INTELECTUAL. La ley de Propiedad Intelectual, define los parámetros de propiedad sobre las creaciones intelectuales. Así mismo, es posible registrar la página web en el registro de propiedad intelectual para de esta manera proteger el diseño, estructura, contenidos publicados, ya sean texto o gráficos. Por tal razón, es necesario tener cuidado con la imágenes que se usen en el sitio web y obtener el permiso para usarlas a menos que sean de licencia de uso libre, ya que el uso de imágenes o texto en un sitio web constituyen actos de reproducción y comunicación pública. (GuiaDigital, s.f.) 15.

(17) 3.1.2 LEY ORGÁNICA DE PROTECCIÓN DE DATOS (LOPD). Ley de Protección de la vida privada en lo referente a datos personales. En general en las páginas web tratan datos que van desde el nombre de una persona hasta un formulario de contacto. La LOPD obliga la custodia, seguridad y manejo adecuado de la información personal, siempre que se manejen datos personales debe cumplirse con los siguientes aspectos: . Fichero de datos registrado en la AEPD. . Seguridad en el tratamiento evitando intromisiones. . Consentimiento y/o autorizaciones de tratamiento en la recogida. . Información de derechos ARCO. . Elaboración de documento de Seguridad (GuiaDigital). 3.1.3 LEY DE SERVICIOS DE SOCIEDAD DE LA INFORMACIÓN. Todo ente que preste un servicio en el que se manipule cualquier tipo de información debe publicitar su actuación evitando responsabilidades que puedan derivarse de su comercio por lo cual debe cumplir los siguientes aspectos:. . Identificación del prestador. . Descripción de su actividad. . Permisos específicos en su caso. . Normas de contratación 16.

(18) . Cumplimiento de la normativa de Consumo (GuiaDigital). Todos. estos. parámetros. se. deben. cumplir. teniendo. en. cuenta. las. condiciones legales que comprenden los sitios web. Ley de marcas y firma electrónica. En materia de. propiedad intelectual cuando los elementos. característicos de la página web alcanzan cierta relevancia es importante protegerlos realizando el registro de la marca y del logotipo para asegurar protección frente al uso ilegitimo de cualquier elemento del sitio web; más aún cuando la imagen se usa para mercadeo y se comercializa. Además, no se debe olvidar obtener las licencias de los diseños para el uso comercial de los mismos y la protección de marca que también protege el dominio del sitio web. 3.2. MARCO INSTITUCIONAL UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS FACULTAD DE TECNOLOGÍA EN TOPOGRAFÍA.. Con el objetivo de mejorar la divulgación de información y de actividades que desarrolla el proyecto curricular de tecnología a topografía y como respuesta a las acciones establecidas en los planes de mejoramiento se hace necesario el diseño de una página web, que se encuentre en el marco de las políticas y la función misional del proyecto curricular de Tecnología en Topografía. 3.2.1. VISIÓN. DEL. PROYECTO. CURRICULAR. TOPOGRAFÍA. 17. DE. TECNOLOGÍA. EN.

(19) Ser un proyecto curricular de alta calidad académica y profesional, que egrese Tecnólogos en Topografía para que por medio del diseño, localización, supervisión e interventoría de obras de infraestructura aporte al desarrollo del país. (Udistrital, s.f.) (Caldas). 3.2.2 MISIÓN DEL PROYECTO CURRICULAR DE TECNOLOGÍA EN TOPOGRAFÍA. El proyecto curricular de Tecnología en Topografía es uno de los programas pioneros de la Facultad del Medio Ambiente y recursos Naturales creado el 6 de agosto de 1948 y tiene como misión formar profesionales integrales con amplio conocimiento en la georreferenciación, tanto en sistemas topográficos como geodésicos, con la aplicación de tecnologías de avanzada que sean capaces de satisfacer las necesidades del país en lo referente a ordenamiento espacial, desarrollando proyectos relacionados con obras de infraestructura y de medio ambiente. (Udistrital). 3.2.3 OBJETIVOS DEL PROYECTO CURRICULAR. 3.2.3.1.. Objetivo general. Formar un profesional integral, desarrollando competencias y promoviendo la construcción de conocimiento que permitan al futuro Tecnólogo en 18.

(20) Topografía actuar con espíritu ético, reflexivo y que sea capaz de analizar, criticar y participar en la solución de problemas sociales e ingenieriles dentro de la cual se encuentra inmerso.. 3.2.3.2. . Objetivos específicos. Orientar a los estudiantes en los conocimientos fundamentales de la topografía para potenciar con ellos las competencias básicas, laborales y ciudadanas en los diferentes campos de desempeño profesional.. . Brindar a los estudiantes las experiencias de aprendizaje práctico fundamental para desarrollar un pensamiento crítico, autónomo y reflexivo.. . Desarrollar competencias para el diseño, ejecución e interventoría de proyectos técnicos orientados al ejercicio profesional en los diversos campos metodológicos de la topografía.. . Generar espacios para emprender trabajo multidisciplinar en donde se establezcan diálogos con estudiantes, profesores e investigadores de otras disciplinas.. . Promover. la construcción de un criterio ético en sus actuaciones. profesionales, y un sentido crítico sobre la realidad nacional, en aras de trascender los principios de la responsabilidad social. (Udistrital, s.f.). 19.

(21) 3.3. MARCO TEÓRICO. 3.3.1 LAS TICS EN LA COMUNICACIÓN Y LA ACADEMIA. Las tics aplicadas particularmente en la academia permiten acceder a toda clase de información de forma rápida y sencilla e incluso generar nuevos contenidos. La web 2.0 ofrece un alto potencial educativo con herramientas como: . Blogs. . Wiki. . Sitios web. . Aplicaciones web. . Redes Sociales. 3.3.2 SITIO WEB. “Un sitio web es un espacio en la World Wide Web que contiene documentos conocidos como páginas web organizados jerárquicamente. Cada documento contiene texto y o gráficos que aparecen como información digital en la pantalla del computador. Un sitio puede contener una combinación entre gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos. Cada sitio web tiene una página de inicio o Home Page, que es el primer documento que ve el usuario cuando entra en el sitio web poniendo el nombre del dominio de ese sitio web en un navegador.. 20.

(22) El sitio normalmente tiene otros documentos adicionales, cada sitio pertenece y es gestionado por un individuo o una organización. Como medio, los sitios web crean y manipulan imágenes digitales y texto, pero un sitio web es también un medio de comunicación. La diferencia principal entre un sitio web y los medios tradicionales es que un sitio web está en una red de ordenadores (Internet) y está codificado de manera que permite que los usuarios interactúen con él” (Hernandez, 2008) 3.2.3.3.. Tipos de WEB. 3.2.3.3.1.. WEB 1.0. La Web 1.0 es una Web que no es compleja y la característica que la resalta como tal es que ésta no se actualiza constantemente sino que es estática, por lo que muchos de sus usos pasan a ser tradicionales y comunes. Esta Web es una de las más básicas que existen, este contiene aplicaciones que son rápidos y fáciles de usar a comparación de otras Web.. 3.2.3.3.2.. WEB 2.0. La web 2.0 se encuentra asociado con un fenómeno social, que a partir de distintas aplicaciones web, se basa en la interacción, con un fin facilitador de información, tratando de generar colaboración y servicios que reemplacen las aplicaciones del escritorio. Además, cabe destacar que la principal característica que posee la web 21.

(23) 2.0, es la sustitución del concepto de web de lectura, por el de lectura-escritura, dónde una serie de herramientas ayudan a que, los procesos de la información que deambulan en torno a la red, puedan utilizarse sin casi ningún tipo de conocimiento técnico. (Maestrojfg). Es importante no confundir multimedia e interactividad, con páginas dinámicas. Una página web estática puede ser multimedia al contener varios tipos de medios vídeo, sonido, imágenes e interactiva a través de enlaces e hipervínculos, sin ser dinámica por si misma. En las páginas dinámicas, el contenido suelen generarse en el momento de visualizarse, pudiendo variar por tanto este, mientras que en las estáticas el contenido suele estar predeterminado.. 3.3.3 HOSTING Es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de “hospedaje o alojamiento en hoteles o habitaciones” donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos etc. en internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web. (Dosd, s.f.). 3.3.4 DOMINIO. 22.

(24) Un dominio es el nombre que identifica un sitio web. Cada dominio tiene que ser único en Internet. Un solo servidor web puede servir múltiples páginas de múltiples dominios, pero un dominio sólo se puede registrar en un servidor. Un dominio se compone normalmente de tres partes: en www.ejemplo.com, las tres uves dobles (www), el nombre de la organización (ejemplo) y el tipo de organización (com). (Masadelante, s.f.) 3.3.5 LENGUAJES DE PROGRAMACION. Un lenguaje de programación es básicamente un sistema estructurado de comunicación, similar al humano, el cual permite dar instrucciones por medio de signos y frases estructuradas. “Un lenguaje de programación es un idioma artificial diseñado para expresar cómputos que pueden ser llevados a cabo por las computadoras. Puede usarse para crear programas que controlen el comportamiento físico y lógico de una máquina, para expresar algoritmos con precisión o como modo de comunicación humana.” (Suarez, 2011) Conocer el funcionamiento de los lenguajes de programación es de vital importancia para el desarrollo del sitio web ya que muchas de las aplicaciones utilizadas se encuentran escritas en este tipo de lenguajes. 3.3.5.1.. HTML. 23.

(25) HTML es el lenguaje con el que se define el contenido de las páginas web, básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc. El HTML es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy fácil de aprender, lo cual permite que cualquier persona cree un sitio web, aunque no tenga conocimientos de programación.. 3.3.5.2.. HTML5. “Es un lenguaje de marcas empleado para estructurar y presentar contenido en la WWW. Como su nombre lo indica es la quinta revisión del estándar HTML y permite soportar lo último en multimedia. De hecho HTML5 agrega elementos como video, audio y también integración para gráficos vectoriales (SVG) y MathML para fórmulas matemáticas. Estas características permiten incluir y controlar contenido multimedia en la web sin tener que recurrir a plugins ni APIs propietarias.” (alegsa) 3.3.5.3.. CSS. Es una herramienta que permite crear sitios web de una manera muy rápida y sencilla permitiendo incluir tipos de letra, fondos, colores, etc.. “Es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta 24.

(26) forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.” (Alegsa, s.f.) 3.3.5.4.. Php. “PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP.” (MaestrosDelWeb) 3.3.5.5.. MySQL. MySQL es un sistema gestor de bases de datos (SGBD, DBMS por sus siglas en inglés) muy conocido y ampliamente usado por su simplicidad y notable rendimiento. Aunque carece de algunas características avanzadas disponibles en otros SGBD del mercado, es una opción atractiva tanto para aplicaciones comerciales, como de entretenimiento precisamente por su facilidad de uso y tiempo reducido de puesta en marcha. Esto y su libre distribución en Internet bajo licencia GPL le otorgan como beneficios adicionales (no menos importantes) contar con un alto grado de estabilidad y un rápido desarrollo. (Casillas, 2007). 3.3.5.6.. FTP. Cuando los visualizadores Web todavía no habían hecho su aparición en Internet, FTP (File Transfer Protocol, o Protocolo de Transferencia de Archivo) ya era una de 25.

(27) las formas más usuales mediante la cual los usuarios de Internet podían transferir archivos desde y hacia sus computadoras. Básicamente, el servicio de FTP se realiza a través de un programa FTP alojado en un servidor -llamado FTP daemonel cual se encarga de gestionar las transacciones que solicita el cliente. Cuando éste se conecta, el daemon le pide que ingrese su nombre de usuario y contraseña, y en caso correcto permite el inicio de las "conversaciones" que darán lugar a las transferencias de archivos, sean éstas de tipo "download" ("bajadas" desde el servidor al computador del cliente) o "upload" ("subidas" desde la máquina del cliente al servidor). 3.3.5.7.. JOOMLA. Joomla es un Gestor de Contenidos para desarrollos web: es una especie de programa para gestionar páginas web. En inglés se denomina CMS (Content Management System). Existen diversos CMS´s de libre difusión (p.ej. Mambo, Drupal, Nucleus, etc.) y Joomla es uno de los más utilizados. Se basa en estándares propios de desarrollos web como XHTML, CSS, JavaScript y PHP. Joomla es una aplicación web, es decir, no se ejecuta en un equipo local sino en un servidor aunque se puede hacer funcionar un equipo local como servidor.. Joomla pertenece a la categoría de software libre: está desarrollado por una comunidad de usuarios que lo mejoran, actualizan y lo ponen a disposición para su uso gratuitamente. Permite publicar sitios web cuyos contenidos cambian continuamente, fáciles de administrar y ampliar sin necesidad de realizar una inversión económica en software. Joomla se distribuye con unos contenidos básicos 26.

(28) y a esta versión de base se le denomina “Joomla nativo”. Joomla nativo está bastante centrado sobre el formato de “artículo”, pero admite muchos otros. Además se está continuamente ampliando a través de nuevos módulos y plantillas que se van publicando periódicamente.. Joomla permite tanto la publicación por parte del gestor de la página web como la interacción de los usuarios de la web a través de publicación de artículos, encuestas o colaboraciones en la gestión del sitio. Es quizás en webs de comunidades donde Joomla se ha hecho más popular. Es decir, aparte de permitir la publicación continua de contenidos nuevos, permite que una comunidad de usuarios interactúe y participe en el sitio. Esto no significa que un sitio Joomla cuente siempre con una comunidad de usuarios: algunos sitios Joomla son administrados por una única persona, aunque esto no es lo habitual.. Joomla es una solución indicada para personas que quieren publicar una web centrándose en los contenidos y dejando que el backup se base en un desarrollo de software libre.. 3.3.6 REQUISITOS PARA INSTALAR JOOMLA. Joomla es una aplicación web, por tanto necesita herramientas para trabajo en entornos web. Para poder instalar Joomla (existen distintas versiones: 1.5 - 1.6, 1.7, 2.5, 3.0, 3..3) es necesario un servidor web Apache (Apache 1.3 o superior ó IIS) dotado de PHP 4.3 o superior según versiones y servidor de bases de datos MySQL 3.2 o superior según versiones. Apache es gratuito y dispone de una 27.

(29) enorme comunidad de usuarios, siendo compatible con Windows, Linux y Mac Os. IIS está indicado y optimizado para Windows, pero muchos usuarios de Windows trabajan con Apache porque es lo más habitual. (aprenderaprogramar). 4. METODOLOGÍA 4.1.. COMPRA HOSTING Y DOMINIO. Para desarrollar la página web del proyecto curricular de Tecnología en Topografía se inició con la compra del servicio de hosting y dominio a través del portal WEB Colombia hosting, el servicio adquirido fue el ColHots1 con las características que se muestran en la Ilustración 1:. Ilustración 1 Características de ColHots1. 28.

(30) Fuente: https://www.colombiahosting.com.co/hosting. 4.2.. SESIÓN FTP. Una vez adquirido el servicio de hosting, se realizó una sesión de FTP (protocolo de trasferencia de archivos) esto por medio del programa File Zilla 3.15.0.2, con el fin de subir los archivos correspondientes de la página como lo muestra la Ilustracion 2.. Ilustracion 2 Archivos de Instalación. 29.

(31) 4.2.1.. CÓDIGO DE SESIÓN FTP. Creada sesión FTP se desarrolló el siguiente código utilizado para acceder a la sesión FTP importándolo desde File Zilla, a través del cual se realizó la transferencia de archivos necesarios para la instalación del aplicativo Joomla <?xml version="1.0" encoding="UTF-8" standalone="true"?> <FileZilla3> <Servers> <Server> <Host>ftp.tectopoud.com</Host> <Port>21</Port> <Protocol>ftp</Protocol> <Type>0</Type> <User>[email protected]</User> <Logontype>2</Logontype> <TimezoneOffset>0</TimezoneOffset> <PasvMode>MODE_DEFAULT</PasvMode> <MaximumMultipleConnections>0</MaximumMultipleConnections> <EncodingType>Auto</EncodingType> <BypassProxy>0</BypassProxy> <Name>ftp.tectopoud.com</Name> <Comments/> <LocalDir/> <RemoteDir/> <SyncBrowsing>0</SyncBrowsing> ftp.tectopoud.com </Server>. 30.

(32) </Servers> </FileZilla3>. De los muchos sistemas que permiten un manejo de contenidos dispuestos en la WEB tales como: wordexpress, magento, prestashop,wix, jimdo. Se escogió Joomla Como administrador de contenidos dada la facilidad de manejo y por su alto nivel de aceptabilidad, las ventajas de utilizar el Gestor de Contenidos CMS Joomla! (Content Management System) para crear una página web profesional y llamativa.. CMS Joomla nos permite crear desde la página WEB más sencilla hasta crear la página WEB más compleja, Utilizando plantillas programadas y ampliándolas con incontables funcionalidades.. 31.

(33) 4.3.. INSTALACIÓN JOOMLA. Se instaló el pack de joomla Versione 3.3 Joomla! Spanish 2005-2016, esto con 3 simples pasos como se muestra a continuación. 4.3.1. PASO 1: DATOS BÁSICOS. Se Ingresan los datos de configuración como: nombre de la página, Meta descripción, Email, usuario y contraseña; la Ilustración 3 denota todos los datos a ingresar. Ilustracion 3 Instalación Joomla Paso 1. 32.

(34) 4.3.2. PASO 2: CREACIÓN Y ASIGNACIÓN DE BASE DE DATOS Se realiza la creación y configuración de base de datos esto en MySql Databases; por lo tanto, se realiza la asignación de permisos, tal como lo muestra la Ilustración 4, la cual fue tomada del cPanel del servicio de hosting y dominio.. Ilustración 4 Creación de base de datos cPanel. 33.

(35) Se realiza el ingreso de Nombre, usuario y contraseña de la base de datos previamente creada en el cPanel de nuestro servicio de hosting así como lo muestra la Ilustración 4. el ingreso de los datos creado esto para establecer una conexión con dicha base de datos. La Ilustración 5 muestra Ilustración 5 Paso 2 asignación de base de datos. 34.

(36) 4.3.3. PASO 3: INFORMACIÓN GENERAL El paso 3 consiste en la aprobación de la información que se ingresó previamente, posterior a esto se realiza la instalación así como lo muestra la Ilustración 6. Ilustración 6 Paso 3 instalaciones Joomla información general. 35.

(37) 4.3.4. PROCESO FINAL DE INSTALACIÓN Luego de instalar Joomla procede a eliminar los archivos de instalación esto se efectúa solo con hacer clic en eliminar la carpeta de instalación (installation) esto como un requerimiento de Joomla. La primera vista de la página es la que muestra la Ilustracion 8, es una página por defecto de joomla la cual no tiene muchas posibilidades de modificación.. Ilustración 7 Página por defecto Joomla. 36.

(38) Implementación de la plantilla Esta es la plantilla implementada para la página WEB del proyecto curricular de tecnología en topografía tal como lo denota la Ilustracion 9, la cual fue descargada y modificada del portal WEB www.rockettheme.com/joomla/templates Copyright © 2007 - 2016 RocketTheme LLC.. Ilustración 8 Plantilla. 37.

(39) 4.3.5. DISEÑO ADAPTATIVO WEB RESPONSIVE Se realizó la adaptación WEB Responsive tal como lo demuestra la Ilustracion 10, lo cual quiere decir que la página web del proyecto curricular se ajustará a cualquier dispositivo sea móvil, Tablet o PC. Ilustración 9 Diseño adaptativo. 4.3.6. DISEÑO PAGINA EN CONSTRUCCIÓN. Se diseñó una página de construcción como lo muestra la Ilustracion 11 esto con el fin de que cuando la página este en remodelación o cambios, se pueda visualizar una página adicional, la cual cuenta con un contador de cuenta regresiva el cual se incrusto en la parte administrativa de la plantilla.. 38.

(40) Ilustración 10 Página en construcción. 39.

(41) 4.4. CREACIÓN DE MENÚS Luego se procedió a la creación de menús y artículos la cual se realiza como lo muestra la Ilustración 11..  Menú: la ruta para la creación de menús es la siguiente (Menú->Menú Principal->Nuevo) Ilustracion 11. Creación de Menús. 40.

(42) 4.4.1.. Título del Menú: Se introduce el nombre del menú que se. quiere darle en este caso es tesis. 4.4.2.. Tipo Elemento Menú: Aquí podemos seleccionar dentro de. una gran gama de opciones el tipo de menú que es (Articulo simple es el documento que queremos adjuntarle a la opción TESIS ). 4.4.3.. Seleccione el Articulo: El articulo o escrito ya lo debemos. tener previamente creado. 4.4.4.. Aplicar: esta opción permite aplicar la creación o modificación. del menú ya descrito, también se puede dar en la opción guardar y cerrar..  Opcional: esta opción sirve para asignarla a una subcategoría es decir (Estudiantes->Tesis) denótese la subcategoría esto quiere decir que el elemento raíz padre o herencia del menú principal es Estudiantes.. 41.

(43) Denótese la Ilustración 12, el menú creado con su correspondiente artículo Ilustración 12 Menú Estudiantes ->Tesis. 4.5.. MÓDULOS, COMPLEMENTOS Y/O PLUGINS. Los complementos de joomla sirven para actualizar y hacer más dinámico nuestro sitio, dichos componentes permiten integrar aplicativos externos como Facebook, Formularios, foros entre otros.. 42.

(44) 4.5.1. FACEBOOK SLIDER LIKEBOX Este complemento nos sirve para integrar la red social Facebook asi como se ve en la Ilustracion 13, las redes sociales son muy importantes ya que son espacios en los cuales se puede difundir de manera fácil y sencilla.. Ilustracion 13 Facebook Slider Likebox. 4.5.2. JOOMSPIRIT SLIDER IMÁGENES Complemento que nos ayuda con el banner en la página principal así como le muestra la Ilustracion 14.. 43.

(45) Ilustracion 14 Carrusel de imágenes. 4.5.3. EASY BLOG Complemento para crear contenidos dinámicos los cuales permiten generar foros de discusión y la integración de cometarios con el plugin Komento. la Ilustracion 15 muestra la parte administrativa y la Ilustracion 16 muestra la vista por el usuario.. Ilustración 15 Modulo administrativo EasyBlog 44.

(46) Ilustracion 16 Easy Blog Vista visitante. 45.

(47) 5 5.1. RESULTADOS. GTMETRIX. GTmetrix es un servicio WEB el cual nos permite realizar una análisis de nuestro sitio WEB para esto solo debemos ingresar desde un navegador al portal esto con la URL (https://gtmetrix.com), tan solo debemos ingresar nuestro nombre de dominio asi como lo muestra la Ilustracion 18. Ilustración 17 GTmetrix. Las siguientes Ilustraciones podemos apreciar los resultados de las pruebas de verificación y validación en la Ilustracion 19 muestra la clasificación de nuestro sitio Ilustración 18 Clasificación GTmetrix 46.

(48) De la clasificación partimos a temas más específicos como lo son el Page Speed, YSlow y CSS o cascada, que son parámetros de evaluación en cada una de sus categorías. 47.

(49) Ilustracion 20 GTmetrix CSS. 48.

(50) 5.2. VIDEO TUTORIALES. En el anexo del documento se encuentran unos videos tutoriales los cuales reflejan el manejo y composición de la página esto para que la pagina siga siendo alimentada por personal del proyecto curricular de tecnología en topografía. 5.3. BACKUP. Se entregan todos los archivos correspondientes a la página los cuales contienen plantillas, módulos, estilos CSS etc. Los archivos están organizados como se ve en la Ilustracion 23. Ilustración 21 Archivos de la página. 49.

(51) 6. CONCLUSIONES.  El desarrollo de un sitio web para el proyecto curricular de tecnología en topografía es muy importante ya que permite una interacción mucho más eficaz entre los miembros de la comunidad educativa estimulando la participación en los procesos académicos del proyecto curricular.  Para todo el proceso de diseño , desarrollo y contenido del sitio web fue de vital importancia el aporte y sugerencias de los mismos estudiantes de tecnología en topografía, ya que aunque el sitio web va dirigido para toda la comunidad del proyecto de Tecnología en Topografía los estudiantes serán los principales beneficiados con el desarrollo del sitio web.  La realización de un diseño adaptativo o WEB responsive es fundamental ya que con el avance de la tecnología y la aparición de diferentes dispositivos para la comunicación es necesario que el sitio web se adapte a cada uno de ellos para que el usuario pueda navegar a través del sitio web de una manera sencilla y eficiente.  La inclusión de la herramienta Google Web Master en el desarrollo del sitio web es muy importante ya que permite que el sitio web tenga un mejor posicionamiento en los motores de búsqueda, para que de esta manera el sitio web sea más fácil de encontrar y se pueda dar a conocer en el ámbito topográfico.  Dadas las exigencias y con el fin de que la página se vuelva informativa en el cual se establezcan foros o mesas de discusión se implementó Easy Blog. 50.

(52) ya que esto nos permite realizar de manera sencilla y dinámica la publicación de artículos que permitan espacios de discusión y/o colaboración.. 51.

(53) 7. RECOMENDACIONES.  Garantizar por parte del proyecto curricular de Tecnología en Topografía, la actualización constante del sitio web.  Es preciso indicar que la página se le debe estar haciendo un chequeo constante esto para disminuir el riesgo de ser vulnerados en seguridad.  Realizar un constante movimiento de artículos para que el SEO (optimización en buscadores) regule las páginas indexadas.  Es importante el uso constante del sitio Web por parte de los docentes. Ya que esto incentiva el ingreso de los estudiantes al sitio web además de permitir una comunicación directa entre estudiantes y porfesores.  El sitio web como herramienta de comunicación es un elemento necesario para el proyecto curricular de Tecnología en Topografía por lo cual es importante utilizarlo de manera responsable.. 52.

(54) 8. BIBLIOGRAFÍA. Educoas.(s.f.) Obtenido de http://www.educoas.org/portal/bdigital/contenido/ valzacchi/ValzacchiCapitulo-12New.pdf cocoate.(s.f.). Obtenido de https://cocoate.com/sites/cocoate.com/files /private/j25es.pdf w3c.(s.f.). Obtenido de http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo alegsa. (s.f.). Obtenido de http://www.alegsa.com.ar/ aprenderaprogramar. (s.f.). Obtenido de http://www.aprenderaprogramar.com/ Caldas, U. D. (s.f.). UDistrital. Obtenido de https://www.udistrital.edu.co/ Casillas, G. y. (2007). En G. y. Casillas, Bases de Datos. Eureka Media. GuiaDigital. (s.f.). Obtenido de GuiaDigital: http://www.guiadigital.gob.cl/ Hernandez, J. (2008). CREAR UN SITIO WEB (PARTE 1). En J. Hernandez, CREAR UN SITIO WEB (PARTE 1). Maestrojfg. (s.f.). Obtenido de https://maestrojfg.wikispaces.com/Web+1.0+ (definici%C3%B3n,+caracter%C3%ADsticas,+ejemplos,+usos+educativos) MaestrosDelWeb. (s.f.). Obtenido de http://www.maestrosdelweb.com/ MASADELANTE.COM. (s.f.). Recuperado el 23 de 02 de 2016, de https://www.masadelante.com/faqs/php Santillán, L. A. (20 de 02 de 2016). www.uoc.edu. Obtenido de http://ocw.uoc.edu/computer-science-technology-and-multimedia/bases-dedatos/bases-de-datos/P06_M2109_02151.pdf Suarez, M. (2011). Introduccion a la Programacion y sus Lenguajes. En M. Suarez, Introduccion a la Programacion y sus Lenguajes. 53.

(55) 9. DOCUMENTACIÓN. A continuación se anexa un listado de cada uno de los videos tutoriales que contiene el documento con su respectiva descripción, estos videos tutoriales se encuentran alojados en la página y solo pueden ser vistos por el administrador del sitio.. 1. Introducción a Joomla (Front-end y Back-end) Este video contiene una explicación rápida y breve de que es joomla como se usa las facilidades y las muchas aplicaciones y configuraciones que podemos llegar hacer a este gestor de contenido.. 2. Cpanel La configuración de nuestro Cpanel es muy importante esto se realiza con los datos de nuestro servicio de hosting y dominio que se encuentra en la documentación anexa.. 3. Configuración de joomla Este video se enfoca en la parte del Back-End, como desde allí podemos agregar o quitar palabras claves, meta descripción y todo lo que tiene que ver con para metros básicos de joomla. 4. Gestión de usuarios Esta video está enfocado a la creación, actualización y/o modificación de los distintos usuarios que queramos tener o administrar esto con una pequeña descripción de los roles.. 54.

(56) 5. Gestión de menús La parte de la gestión de menús es una parte fundamental ya que allí vamos a tener todo lo que tiene que ver con los elementos padre y los sub menús dado el caso.. 6. Gestión de artículos Los artículos o contenidos son el cuerpo de joomla y se pueden combinar con distintos componente para que sean más dinámicos y sean más atractivos para el usuario que la visiten.. 7. Gestor de extensiones Ya que joomla es un sistema escalable y auto gestionable podemos agregar distinta extensión, componente y /o plugins esto para dar nuevas aplicaciones o automatizar procesos generar nuevos contenidos de joomla.. 8. Plantilla La plantilla es la parte del Front-end es la primera instancia de todo usuario y es parte fundamental modificar nuestra plantilla con distintos colores y aplicaciones que se encuentran dentro de ellas, cabe aclarar que las plantillas se pueden modificar de manera fácil y rápida e intercambiar distintos tipos de plantilla.. 9. Gestión de módulos (Posiciones) Gestión de módulos no es otra cosa que las posiciones en nuestro Front-end o plantilla podemos agregar y predefinir elementos que se muestren en nuestra página esto nos ayuda para dar nuevos toques a nuestra página.. 55.

(57) 10. Widgetkit Este complemento se una gestor bastante amigable tanto para el usuario como para a el administrador, Widgetkit nos permitirá crear una infinidad de organizaciones para nuestra página enlazándola con distintas redes sociales.. 11. Easy Blog Easy Blog como su nombre no lo indica en un gestor de foros va ser nuestro principal gestor de espacios de discusión permitiendo agregar categorías y tags a nuestros artículos. 12. Google WEB master y Google Analitics La administración adecuada de estas aplicaciones nos proporcionara una infinidad de beneficio s en el SEO y de esta forma posicionar nuestra página en una de las principales de consulta.. 13. Componentes Este video contiene la explicación de todos aquellos componentes en nuestra página.. 56.

(58)