DISEÑO DE UNA PAGINA WEB EN LA …repository.udistrital.edu.co/bitstream/11349/7240/1/DISEÑO DE...
57
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
Transcript of DISEÑO DE UNA PAGINA WEB EN LA …repository.udistrital.edu.co/bitstream/11349/7240/1/DISEÑO DE...
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
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
2
NOTA DE ACEPTACIÓN
____________________________________________
____________________________________________
____________________________________________
____________________________________________
____________________________________________
__________________________________
Firma del Director
__________________________________
Firma del Evaluador
3
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
4
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.
5
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
6
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.
7
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
8
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
9
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
10
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
11
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
12
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
13
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.
14
2 OBJETIVOS.
2.1 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.
15
3 MARCO REFERENCIAL
3.1 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.)
16
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
17
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 DE TECNOLOGÍA EN
TOPOGRAFÍA
18
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
19
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.)
20
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.
21
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
22
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
23
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
24
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
25
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
26
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 daemon-
el 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
27
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
28
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
29
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
30
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>
31
</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.
32
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
33
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
34
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
35
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
36
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
37
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
38
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.
39
Ilustración 10 Página en construcción
40
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
41
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.
42
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.
43
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.
44
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
45
Ilustracion 16 Easy Blog Vista visitante
46
5 RESULTADOS
5.1 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
47
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
48
Ilustracion 20 GTmetrix CSS
49
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
50
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
51
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.
52
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.
53
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-de-
datos/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.
54
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.
55
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.
56
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.
