LENGUAJE DE MARCADO,

DISEÑO WEB Y GESTORES DE

CONTENIDO

UNIDAD 5
Servicios de web hosting y
sistemas de gestión de
contenido (CMS)

1
 Sumario

17. WordPress como herramienta de diseño web........................ 3

17.1. Estructura de los directorios de WordPress ........................ 3
17.2.1. Archivos para crear una plantilla ..................................... 6
17.2.2. Archivos que componen una plantilla .............................. 7
17.3. Hojas de estilos para tema personalizado ........................ 10
17.3.1. Archivo style.css para tema personalizado .................... 10
17.3.2. Archivo normalize.css .................................................... 11
17.4. El archivo de funciones de WordPress .............................. 12
17.5. Los sidebars en Wordpress. .............................................. 13
18. Moodle como sistema de gestión del aprendizaje ............... 14
18.1. Primeros pasos con un LMS .............................................. 14
18.1.1. ¿Qué es un LMS? ............................................................ 15
18.1.2. Funciones de un LMS ..................................................... 16
18.1.3. Principales sistemas de gestión de aprendizaje ............ 16
18.1.4. ¿Qué es Moodle? ............................................................ 17
18.1.5. Instalación de Moodle ................................................... 18
19. Introducción a los Wikis ...................................................... 25
19.1 Primeros pasos con un Wiki............................................... 25
19.1.1. ¿Qué es un wiki? ............................................................ 26
19.1.2. Orígenes ........................................................................ 26
19.1.3. Diferencias entre un wiki y un blog ............................... 27
19.2. Introducción a MediaWiki ................................................. 28
19.2.1. Wikitexto ....................................................................... 28
19.2.2. Instalando MediaWiki .................................................... 30
20. Prestashop como plataforma de tiendas en línea ................ 31
20.1. Introducción a Prestashop ............................................... 32
20.1.1. ¿Qué es Prestashop? ..................................................... 32
20.1.2. ¿Por qué Prestashop? .................................................... 33
20.1.3. Principales características de Prestashop ..................... 33
20.1.4. Estructura de directorios de Prestashop........................ 34
20.2. Instalación y configuración de Prestashop ....................... 35

2
 Clase 17|Creando un
tema personalizado con
Wordpress

17. WordPress como herramienta de diseño

web

17.1. Estructura de los directorios de

WordPress
Para trabajar de una manera personalizada con WordPress es necesario conocer
cómo se estructuran los directorios y archivos. Luego de descargar los archivos
de instalación y descomprimirlos podemos visualizar un total de 20 elementos
en su directorio raíz en la versión 4.9.8. y pesan alrededor de 30 MB.

Figura 138. Archivos descomprimidos para la instalación de WordPress

Fuente: Elaboración propia

3
En la figura anterior podemos apreciar una vista completa de los directorios y
archivos de los cuales podemos destacar los siguientes:

Directorio wp-content

Directorio en el cual se almacena todo el contenido

referente a los archivos (no base de datos) que
posee una instalación de WordPress, siendo uno de
los directorios más importantes al momento de
realizar un backup del contenido.

Directorio wp-admin

Directorio en el cual se almacenan los archivos del

back-end de WordPress, los directorios y archivos
generados luego de la instalación por lo general no
deben ser modificados ya que comprometen el
funcionamiento del administrador de WordPress.

Directorio wp-includes

Directorio en el cual se almacena la API y librerías

para el funcionamiento del front-end y el back-end,
dichos archivos por lo general no deben ser
modificados.

17.2. Plantillas de WordPress

Una plantilla, también llamada tema o theme, es la estructura y apariencia en la
que se basa una página web construida con WordPress.

4
Normalmente, poseen por defecto varias páginas web de demostración ya
montadas, lo único que tienes que hacer es escoger un diseño que se adapte al
resultado deseado, y sustituir las fotos y los textos de prueba por los que son
destinados al sitio. Con estas facilidades se pueden crear excelentes sitios web
sin necesidad de ser un informático experimentado.

Tomando en cuenta que existen plantillas de WordPress premium o de paga que

pueden ser adquiridas en sitios como themeforest, poseen plugins de

5
maquetación visual (visual composer) que nos permiten diseñar cada una de las
secciones del sitio web arrastrando y soltando elementos.

17.2.1. Archivos para crear una plantilla

Un punto muy importante que tenemos que tomar en cuenta es que WordPress
instala todas sus plantillas en el directorio themes que se encuentra en wp-
content.

Al desarrollar un tema personalizado se necesita crear una carpeta dentro del

directorio themes con el nombre de nuestro tema tomando en cuenta no utilizar
caracteres especiales. Luego de establecer la carpeta para el tema personalizado
procedemos a acceder a ella y crear los siguientes archivos básicos:

index.php

Archivo esencial ya que WordPress buscará este archivo en caso de no localizar

ninguna plantilla como página de inicio y a la vez es un archivo requerido

style.css

Además de ser el archivo principal para definir los estilos que utilizaremos, es
donde especificaremos los parámetros principales de la plantilla. En este

6
momento, ya tenemos los archivos mínimos indispensables para crear un tema
y que WordPress lo detecte.

17.2.2. Archivos que componen una plantilla

header.php

En este archivo, indicaremos la cabecera que será común en la navegación de

la plantilla como, por ejemplo, todo lo que contiene la etiqueta <head> o el
menú de navegación principal.

footer.php

Al igual que en el caso del archivo header.php, este será común en toda la
plantilla. En él indicaremos la información que estará siempre presente en el pie
de página (por ejemplo, el copyright, los enlaces a la información legal, redes
sociales, etc.).

7
sidebar.php

Este archivo está pensado para mostrarlo a modo de barra lateral (sobre todo
cuando se trata de un blog) o con widgets (por ejemplo, un buscador, un listado
de categorías o los posts más visitados).

front-page.php

Es la plantilla que WordPress carga por defecto como página de inicio. Está
especialmente pensada para que sea un listado de posts; es decir, la portada de
un blog.

home.php

Será la plantilla que mostrará WordPress en caso de tener activa la opción

Mostrar página estática como página de inicio. Este archivo está pensado para
casos en los que la página de inicio es una página estática, como puede ser la
página de inicio de un sitio corporativo.

single.php

Es la plantilla que muestra un post completo por defecto.

page.php

Éste es el archivo de plantilla que mostrará por defecto cualquier página que
agreguemos, siempre y cuando no se le haya especificado una plantilla.

category.php

Sirve para mostrar un listado de posts de una categoría específica.

8
comments.php

Es la plantilla a la que llamaremos dentro de single.php para poder añadir

comentarios a nuestros posts.

search.php

Esta plantilla es la que mostrará WordPress cuando se lleve a cabo una

búsqueda.

404.php

Se trata de la plantilla que se mostrará cuando un enlace esté roto o no funcione.

functions.php

Este archivo nos permitirá crear zonas de menú y de widgets, así como
personalizar algunos parámetros que WordPress trae por defecto.

9
17.3. Hojas de estilos para tema personalizado

17.3.1. Archivo style.css para tema

personalizado

Editar directamente el CSS de tu tema (style.css) no es la solución más limpia.

Tanto si es un tema premium como un tema gratuito o un tema personalizado,
podemos perder algunos cambios cuando wordpress se actualice.

Hay que tener mucho cuidado con las puntuaciones y los cierres de reglas. Dejar
una llave abierta u olvidar un punto y coma puede hacer tu hoja de estilos ilegible
para los navegadores.

Existen otros métodos y alternativas: principalmente plugins que permiten

definir una hoja de estilos, o algún tema que trae consigo un campo para las
modificaciones que queramos realizar.

10
 En el siguiente enlace puedes encontrar una serie
de plugins para insertar CSS en nuestros temas
de wordpress: CSS perzonalizado.

Es importante identificar los elementos de nuestro sitio web para comenzar a

aplicar estilos específicos a cada uno. Para ello, nos ayudaremos del inspector
de nuestro navegador.

Una vez identificado el elemento que queremos editar, necesitamos conocer sus
clases y nombre de selector para aplicarle el estilo deseado.

17.3.2. Archivo normalize.css

Normalize es un fichero CSS que apenas ocupa 8

KB, cuyo principal objetivo es mantener los estilos
similares en los navegadores, ya que cada uno
agrega sus propios estilos por defecto, por ejemplo
te suelen agregar distintos paddings, margins,
font-sizes,etc. Con Normalize CSS lo que hacemos
es regularizarse y que nuestra web se vea igual
independientemente del navegador donde se
visualice. Además, está preparado para adaptarse
completamente a HTML5.

11
¿Qué hace?

• Al contrario que algunos CSS reset, preserva los valores por defecto
de los navegadores.
• Corrige errores e inconsistencias de los navegadores.
• Normaliza estilos para una amplia gama de elementos HTML.
• Incluso mejora la usabilidad con mejoras sutiles.

A continuación, se muestra un ejemplo de lo que hace normalize con los “input”

de tipo checkbox y radio, en concreto cambia dos propiedades que causan
problemas al utilizar internet explorer, el padding y box-sizing.

17.4. El archivo de funciones de WordPress

WordPress cuenta con el archivo de funciones opcionales “functions.php” el cual

se encuentra disponible para cualquier tema de la plataforma. Para que un tema
funcione, no es necesario que exista este archivo, por eso según el que estemos
utilizando, puede que ya esté creado o bien que se tenga que generar para poder
ampliar el funcionamiento de un blog o una web.

12
Este archivo (functions.php) se utiliza como una biblioteca personal de
funciones, facilitando el ampliar, cambiar o alterar el comportamiento por
defecto de WordPress. Su comportamiento se asemeja al de un plugin,
agregando características y funcionalidad a la web; se puede utilizar también
para definir nuevas funciones PHP como para modificar las que ya incorpora el
sistema.

Cada uno de los temas viene con su propio archivo de funciones; sin embargo,
sólo surtirá efecto el del tema activo. Muchas plantillas (especialmente las
Premium y las más trabajadas) ya vienen con este archivo creado y cargado de
funciones; si este no existe simplemente se debe crear un archivo de texto sin
formato nuevo, llamarlo “functions.php” y guardarlo dentro del directorio de
nuestro tema.

17.5. Los sidebars en Wordpress.

Los sidebar de WordPress o mal llamados “barras
laterales” son zonas que permiten añadir widgets, de
ahí proviene que en inglés también las llaman “widget
ready areas”, zonas donde añadir widgets.

La sidebar principal es una columna que se ubica junto al resto del contenido,
pero denominarla barras laterales no es correcto ya que puede haber más de
una sidebar y pueden ubicarse en casi cualquier parte del sitio

En el siguiente enlace puedes encontrar paso a

paso ejemplos con los archivos a incluir y
modificar para crear nuestro tema: Crear tema
personalizado con Wordpress.

13
 Clase 18|Introducción a
Moodle

18. Moodle como sistema de gestión del

aprendizaje

18.1. Primeros pasos con un LMS

El concepto del sistema de gestión de aprendizaje surgió por la necesidad de

tener proyectos de formación virtual. Dando inicio a la aparición del primer LMS
en el sector de educación superior a finales de los años noventa. A medida
avanza el tiempo este tipo de sistemas forman una parte muy importante de la
tecnología ya que gracias a ellos el aprendizaje es accesible para muchas
personas sin importar la ubicación geográfica de quien imparte y recibe el
conocimiento.

14
Hoy en día, son muchas las instituciones que brindan educación a distancia, esta
se ha convertido en un pilar fundamental del progreso de la educación, ya que
nos facilita el aprendizaje desde casa, sin necesidad de asistir a un lugar físico
para poder estudiar.

18.1.1. ¿Qué es un LMS?

Un LMS o Sistema de Gestión de Aprendizaje es

una aplicación instalada en un servidor,
que administra, distribuye y controla las
actividades de formación de una institución
u organización. Su arquitectura y
herramientas son apropiadas para clases en
línea, así como también para complementar el
aprendizaje presencial. (newwweb, SF, Párr 1).

LMS acrónimo de Learning Management System. Es una un software para la

administración, seguimiento y documentación para impartir cursos educativos o
programas de capacitación o programas de aprendizaje.

Los LMS se enfocan en impartir el aprendizaje en línea y a la vez posee una

variedad de usos, siendo utilizada por lo general como una plataforma para el
contenido en línea, incluyendo cursos para la interacción de sus participantes de
manera dinámica por chat y cursos en los cuales se poseen tableros de mensajes
previamente aprobados por un docente.

15
18.1.2. Funciones de un LMS
La función principal de un LMS es administrar materiales y actividades con fines
educativos para los usuarios que forman parte de un LMS.

Realizar evaluaciones con calificación automática luego que un usuario final

realice una actividad previamente creada por un usuario con rol de
docente/administrador de la plataforma, además posee la capacidad de generar
reportería con los datos recopilados de las evaluaciones y clases impartidas entre
otras funciones específicas que desarrollaremos a lo largo de la clase.

18.1.3. Principales sistemas de gestión de

aprendizaje.

Sistemas propietarios o bajo licencia

Blackboard (https://www.blackboard.com/index.html): Es una plataforma

estadounidense que integra un ambiente de enseñanza y aprendizaje en línea.
Se caracteriza por impartir y distribuir contenidos en distintos formatos (texto,
sonido y video), realizar evaluaciones en línea, llevar el seguimiento académico
de los participantes, asignar tareas y permitir el trabajo colaborativo.

16
WebCT: Es un sistema comercial de aprendizaje virtual online sus herramientas
son muy flexibles para el diseño de clases lo cual hace este entorno muy
atractivo tanto para principiantes como usuarios experimentados en la creación
de cursos en línea. Los instructores pueden añadir a sus cursos de WebCT varias
herramientas interactivas tales como: tableros de discusión o foros, sistemas de
correos electrónicos, conversaciones en vivo (chats), contenido en formato de
páginas web, archivos pdf entre otros.

Sistemas de código abierto

Dokeos (https://www.dokeos.com/): Es una sencilla y poderosa herramienta
web que facilita un aprendizaje rápido gracias a una amplia gama de
herramientas de formación, capacitación y entrenamiento. Es el primer sistema
de gestión del aprendizaje que integra autoría en línea, interacción, seguimiento
y videoconferencia en un mismo lugar.

Las aulas virtuales de Dokeos benefician a la comunicación entre alumnos y

tutores a través de un ambiente de trabajo colaborativo que estimula la
participación y agiliza el proceso formativo.

Sakai (https://sakaiproject.org/): Es un software educativo de código abierto

que posee múltiples funcionalidades de comunicación entre profesores y
alumnos, lector de noticias RSS, distribución de material docente, realización de
exámenes, gestión de trabajos entre otros.

18.1.4. ¿Qué es Moodle?

Moodle es una plataforma de aprendizaje diseñada
para proporcionarles a educadores,
administradores y estudiantes un sistema
integrado único, robusto y seguro para crear
ambientes de aprendizaje personalizados. Usted
puede descargar el programa a su propio servidor
web, o pedirle a uno de nuestros Moodle Partners
que le asista. (Moodle, 2018, Párr 2).

17
18.1.5. Instalación de Moodle
Es necesario tomar en cuenta los recursos que posee el servidor en el cual se
implementará una instalación de Moodle en su última versión ya que solicita
como mínimo PHP 7.0 y que posea protocolo HTTPS. Dichas características
forman el mejor escenario para utilizar al máximo las características que nos
ofrece Moodle.

Para iniciar con la instalación de Moodle se necesita descargar el paquete de

instalación de la página oficial de moodle, luego descomprimirlo y cargar los
directorios y ficheros en el servidor que se utilizará para alojar el sitio. Por medio
del navegador accedemos al nombre de dominio o dirección IP del servidor para
visualizar la pantalla de inicio de la instalación, en la cual nos solicita que
seleccionemos el idioma que deseamos en nuestra instalación.

Figura 139. Pantalla inicial de la instalación de Moodle

Fuente: Elaboración propia

A continuación, nos muestra un formulario en el cual nos solicita confirmar las

rutas para iniciar la instalación tales como dirección web, dirección de Moodle y
directorio de datos, con una breve descripción de cada uno de los campos.

18
 Figura 140. Pantalla de confirmación de rutas para la instalación de Moodle
Fuente: Elaboración propia

Posterior a ello, nos solicita que elijamos el tipo de controlador de base de datos
dependiendo del tipo de base de datos que utilizaremos en la instalación.

Figura 141. Apartado para seleccionar el controlador de base de datos

Fuente: Elaboración propia

19
A continuación, nos muestra un pequeño formulario para ingresar la información
de base de datos, usuario, contraseña, servidor de base de datos, prefijos de las
tablas, puerto de la base de datos y socket Unix que se utilizarán al momento
de la instalación.

Figura 142. Pantalla de la información de base de datos para la instalación de

Moodle
Fuente: Elaboración propia

Al enviar la información nos muestra los términos y condiciones para iniciar

con la instalación, luego de leerlos procedemos a dar clic en continuar.

20
 Figura 143. Pantalla para aceptar los términos y condiciones de Moodle
Fuente: Elaboración propia

Luego nos muestra una lista con todos los servicios verificados los cuales serán
utilizados por Moodle.

Figura 144. Pantalla para verificar los servicios de Moodle

Fuente: Elaboración propia

21
Al finalizar con la instalación nos muestra un listado de todos los componentes
que han sido instalados y luego de verificar que todos están correctamente
instalados damos clic en continuar.

Figura 145. Pantalla para verificar los componentes de Moodle

Fuente: Elaboración propia

A continuación, muestra un formulario con el usuario y contraseña para ingresar

al administrador de Moodle y correo electrónico para enviar la información
proporcionada en este formulario.

Figura 146. Pantalla para crear el usuario administrador de Moodle

Fuente: Elaboración propia

22
A continuación, muestra un formulario en el cual nos solicita la información sobre
el título y descripción del sitio.

Figura 147. Pantalla de la información general de Moodle

Fuente: Elaboración propia

Al finalizar nos muestra el escritorio del administrador de Moodle.

Figura 148. Pantalla principal de Moodle

Fuente: Elaboración propia

23
Para Los Contenidos:

18.2. Creación de categorías, cursos,

estudiantes y materiales, 18.2.1.
Categorías de cursos, 18.2.2. Cursos,
18.2.3. Estudiantes, 18.2.4. Lecciones,
18.2.5. Tareas, 18.2.6. Materiales
estáticos, 18.2.7. Materiales interactivos
podrán ser visualizados en el siguiente
documento adjunto clase 18

Para ver una descripción detallada de todos los

recursos para lecciones disponibles en moodle,
ingresa aquí: Recursos

Para ver una descripción detallada de cada una

de las actividades te recomendamos el siguiente
enlace: Actividades

24
 Clase 19|Introducción a
los Wikis

19. Introducción a los Wikis

19.1 Primeros pasos con un Wiki

Wiki es “la base de datos en línea más simple que pueda funcionar". Se
trata de un tipo de página web que brinda la posibilidad de que multitud
de usuarios puedan editar sus contenidos a través del navegador web, con
ciertas restricciones mínimas. De esta forma permite que múltiples
autores puedan crear, modificar o eliminar los contenidos. Se puede
identificar a cada usuario que realiza un cambio y recuperar los contenidos
modificados, volviendo a un estado anterior. Estas características facilitan
el trabajo en colaboración, así como la coordinación de acciones e
intercambio de información sin necesidad de estar presentes físicamente
ni conectados de forma simultánea. El ejemplo más conocido y de mayor
tamaño de este tipo de páginas web es la enciclopedia colaborativa
Wikipedia (www.wikipedia.org). A favor: Es una fuente de información y
bibliográfica de construcción colectiva. Problemas: La información
publicada puede provenir de fuentes erróneas o no válidas.
Solución/recomendaciones: Es recomendable trabajar criterios sobre el
empleo de fuentes de información confiables y formas de validar los
contenidos. (Wikipedia, 2018, Pars. 9).

25
19.1.1. ¿Qué es un wiki?
El término wiki (proviene del hawaiano wiki, “rápido”)
alude al nombre que recibe una comunidad virtual,
cuyas páginas son editadas directamente desde el
navegador, donde los mismos usuarios crean,
modifican, corrigen o eliminan contenidos que,
generalmente, comparten. No tiene por qué ser
necesariamente un sitio en la web, puesto que hay
wikis instalables para uso en el escritorio de un
computador personal. (Wikipedia, 2018, Pars. 1)

19.1.2. Orígenes

El origen de las wikis está en la comunidad de patrones de diseño, cuyos

integrantes los utilizaron para escribir modelos de programación. La
primera WikiWikiWeb fue creada por Ward Cunningham, quien inventó
y dio nombre al concepto wiki, y produjo la primera, implementación de
un servidor WikiWiki para el repositorio de patrones del Portland (Portland
Pattern Repository) en 1995. En palabras del propio Cunningham, una
wiki es «la base de datos en línea más simple que pueda funcionar» (the
simplest online database that could possibly work). (Wikipedia, 2018,
Pars. 4).

26
19.1.3. Diferencias entre un wiki y un blog
Tabla 12. Diferencias entre un wiki y un blog

El blog El wiki
Es personal, aparentemente menos Puede ser personal, pero está
colaborativo. La entrada pertenece a abierto a la colaboración.
su editor (algo que no tiene por qué
ser así, si por ejemplo hay un autor
colectivo).
Se supone que el texto es estático, El propósito es crear un documento.
una vez publicado, el post no cambia
(no es del todo cierto, pero si es lo
que se espera) El discurso es
espontáneo, no revisable y
permanente.
Tiende a ser un “largo pergamino” Se estructura en páginas.
(el texto se extiende hacia arriba y
hacia abajo).
Presenta un “modo discusión” Es hipertextual por definición.
(ThreadMode): monólogo con Palabras o frases del texto
comentarios de la audiencia. convertidos en enlaces dan pie a
nuevas páginas.

Es cronológico: lo último aparece Es atemporal: cambia no por el

primero. tiempo sino por su desarrollo.
Es inmediato: escrito en el El texto es examinado, revisado,
momento/escrito sobre el momento. cambia y puede ser cambiado.
Los enlaces sirven para conectar con
el exterior del blog.

Fuente: Elaboración propia

27
19.2. Introducción a MediaWiki

MediaWiki es software libre que funciona en el servidor

y está licenciado bajo la Licencia Pública General de
GNU (GPL). Está diseñado para funcionar en una
enorme granja de servidores para un sitio web que
recibe millones de visitas al día. (MediaWiki, 2018,
Párr. 3).

MediaWiki es una implementación de wiki extremadamente potente,

escalable y con multitud de características que utiliza PHP para procesar
y mostrar los datos almacenados en una base de datos, tal como MySQL.
(MediaWiki, 2018, Párr. 4).

Las páginas usan el formato wikitexto de MediaWiki, de forma que los

usuarios que no tienen conocimientos de HTML o CSS puedan editarlas
fácilmente. (MediaWiki, 2018, Párr. 5).

19.2.1. Wikitexto

Un wikitexto es un texto elaborado mediante un lenguaje de marcado

especial para la creación de páginas wikis, en servidores que tengan
instalado algún software para wikis.

28
El lenguaje de marcado para wikis se denomina lenguaje wikitexto y no
existe un estándar que defina su sintaxis, sus características y su
estructura, como la tiene el lenguaje HTML. Por el contrario, depende del
software wiki utilizado.

En algunos programas wikis se acepta el uso de algunas marcaciones de

HTML o de otros lenguajes de marcado. Esto también depende de las
restricciones del propio sitio, que permiten o no ciertas marcaciones.

Entre los lenguajes wikitexto está el estándar de MediaWiki, en el que las

marcaciones se logran a partir de una sintaxis sencilla. Por ejemplo, para
crear un hiperenlace, se agrega las marcaciones [[ (abrir corchetes)
seguido por el nombre del enlace interno y finalizado por ]] (cerrar
corchetes). O para resaltar en negrita una cadena de caracteres se usa
las marcaciones de comillas simples ('').

La Wikipedia usa el software MediaWiki, en el cual también se aceptan

muchas marcaciones HTML. (Wikipedia, 2017).

Figura 159. Ejemplo de la edición de una página en MediaWiki

Fuente: Wikipedia

29
19.2.2. Instalando MediaWiki

Accede al siguiente enlace para que puedas ver

un manual de instalación de la documentación
oficial de MediaWiki
https://www.mediawiki.org/wiki/Manual:Installati
on_guide/es (MediaWiki,2018).

En el siguiente enlace podrás encontrar un

manual con las configuraciones de MediaWiki
https://www.mediawiki.org/wiki/Manual:Configur
ing_MediaWiki/es

30
 Clase 20|Introducción a
las tiendas en línea

20. Prestashop como plataforma de tiendas en

línea

El comercio electrónico se ha convertido en la actualidad en una necesidad para

muchos negocios y en un beneficio para los usuarios que disfrutan de realizar
sus compras en una tienda en línea. Observemos, entonces, que, con el cambio
en los hábitos de consumo de las personas, el ecommerce pasa a ser una
excelente opción para quienes desean crear un negocio propio y al mismo tiempo
tener la flexibilidad que el mercado digital proporciona.

31
En esta era digital, el comercio en línea se ha convertido en uno de los principales
canales de ventas de muchas empresas ya que por medio de la accesibilidad que
permite a los usuarios, se obtienen resultados de una forma acelerada.

Existen muchas opciones para montar una tienda en línea, entre ellas tenemos:
• Utilizando la combinación de WordPress y el plugin de woocommerce
• Utilizando temas completos de woocommerce
• Utilizando la plataforma Shopify
• Desarrollando con nuestro propio código todos los módulos tanto de back-
end como front-end.
• Utilizando la plataforma CMS orientadas a tiendas en línea como Magento,
Opencart y Prestashop

20.1. Introducción a Prestashop

20.1.1. ¿Qué es Prestashop?

32
Prestashop es una plataforma para eCommerce completa, un CMS para creación
de tiendas online sencilla y potente que cuenta con todos los módulos necesarios
para brindar una experiencia de usuario agradable tanto para compradores como
para los administradores de la tienda.

20.1.2. ¿Por qué Prestashop?

Prestashop se convierte en la opción preferida por

muchos ya que cuenta con una gran variedad de
módulos gratuitos que permiten suplir las necesidades
de los diversos escenarios de venta en línea. Además,
al ser una plataforma de código abierto, su uso en la
comunidad de desarrolladores se ha popularizado
permitiendo el desarrollo de nuevas funcionalidades y
un soporte muy amplio en diversos idiomas.

20.1.3. Principales características de Prestashop

Dentro de las principales características de Prestashop, están:
• Creación de productos
• Seguimiento de pedidos
• Navegación en catálogos de productos, filtros
• Creación de ofertas, cupones
• Estadísticas y reportes
• Integración con gateways de pago
• Gestión de clientes

33
20.1.4. Estructura de directorios de Prestashop

Prestashop está construido con estructura Modelo Vista Controlador (MVC),

cuenta con varias familias de directorios, los más comunes son:

/admin, contiene todos los archivos relacionados con el panel principal de

administración, es decir, nuestro back-end.

/controllers, contiene todos los archivos controladores de prestashop, dentro

de la estructura MVC, estos archivos no deben modificarse ya que son los
archivos principales y cualquier adición, función o modificación que desee
incluirse, debe hacerse fuera de esta carpeta, por medio de clases, por ejemplo.

/config, contiene todos los archivos de configuración de Prestashop,

generalmente no deben modificarse a menos que tengamos un grado de
conocimiento avanzado en la plataforma. Algunos valores de estos archivos se
pueden modificar/controlar desde el back-end web.

/img, contiene todas las imágenes que por defecto trae Prestashop así como
todas las imágenes de productos, categorías u otras imágenes que se utilizan en
la tienda.

/localization, contiene los archivos de idioma, monedas, impuestos, entre

otros referentes a la localización de la tienda.

/themes, en esta carpeta es donde se pueden agregar nuevas plantillas a

utilizar en nuestra tienda en línea.

34
 20.2. Instalación y configuración de Prestashop

A continuación, brindamos dos métodos para instalar Prestashop para dos

ambientes diferentes, el primero es para instalarlo en un ambiente local, ya sea
en nuestra máquina de uso personal o en un servidor al que tengamos acceso.
La otra es por medio del gestor de paquetes Softaculous el cual es uno de los
sistemas para instalar CMS y otros paquetes desde un cPanel.
Instalación local

Para la instalación local puedes ingresar al

siguiente enlace de la página oficial de
Prestashop la cual contiene una guía bastante
detallada y funcional: Instalación de Prestashop.

Instalación en un cPanel por medio de Softaculous

Una vez dentro de la plataforma de administración cPanel, en el buscador

escribimos Soft y aparecerá el apartado de Apps Installer.

Figura 160. Pantalla del cPanel con el buscador y el enlace a Softaculous

Fuente: Elaboración propia

35
Damos clic en Softaculous Apps Installer y este nos lleva a su catálogo de scripts
clasificados por categorías, buscamos la categoría Comercio electrónico y
luego buscamos Prestashop.

Figura 161. Consola de administración de Softaculous

Fuente: Elaboración propia

Luego seleccionamos Prestashop y damos clic en el botón Install now

Figura 162. Instalación de Prestashop

Fuente: Elaboración propia

36
Este abre el cuadro de diálogo principal para la instalación

Figura 163. Parámetros de la instalación de Prestashop

Fuente: Elaboración propia

En este formulario debemos seleccionar el dominio sobre el cual vamos a instalar

Prestashop, podemos definir el usuario para ingresar al back-end de
administración y la contraseña, finalmente damos clic a instalar y listo, ya
tenemos nuestro Prestashop instalado.

Los contenidos: 20.2.1. Panel de administración, 20.2.2 Cambio de

idioma, 20.3. Configuración de la tienda, 20.3.1. Creación de categorías,
20.3.2. Creación de productos, 20.4. Administración de inventarios y
precios, 20.4.1. Precios especiales, 20.4.2. Inventario, 20.5.
Configuración de moneda e impuestos, 20.6. Configuración de pagos,
20.7. Pedidos y facturación podrán ser visualizados en el siguiente
documento adjunto clase 20.

37
 Referencias citadas en la UNIDAD 5
Acerca de Moodle, Moodle. (2018).

Recuperado de

https://docs.moodle.org/all/es/Acerca_de_Moodle

Wiki, Wikipedia. (2018).

Recuperado de

https://es.wikipedia.org/wiki/Wiki

Wikitexto, Wikipedia. (2017).

Recuperado de

https://es.wikipedia.org/wiki/Wikitexto

¿Qué es MediaWiki?, MediaWiki. (2018).

Recuperado de

https://www.mediawiki.org/wiki/Manual:What_is_MediaWiki%3F/es

MediaWiki, MediaWiki. (2018).

Recuperado de

https://www.mediawiki.org/wiki/MediaWiki/es

Área administrativa de prestashop, Prestashop. (2018).

Recuperado de

http://doc.prestashop.com/pages/viewpage.action?pageId=28016743

38
 Glosario de los términos citados en
la UNIDAD 5
Widget Una pieza de código que es usado en una página web o
app brindando al usuario un cambio visual de una parte
o elemento específico de la pantalla del pc, smartphone
o tablet del usuario.

Sidebar Es un área de un sitio web que contiene una serie de

widgets agrupados para presentar información y enlaces
a los usuarios
LMS Learning Management System (Sistema de gestión de
aprendizaje)

GNU El nombre del Proyecto GNU proviene del acrónimo

recursivo GNU's Not Unix («GNU No es Unix»).

CSV Comma Separated Values, formato de archivo donde los

valores se encuentran divididos por un separador
definido, generlamente por la coma “,”

MVC Modelo Vista Controlador es un estilo de arquitectura de

software que separa los datos de una aplicación, la
interfaz de usuario, y la lógica de control en tres
componentes distintos.
Gateway de Proveedor de servicios que procesa pagos por medio de
pago tarjetas de crédito usado generalmente en sitios de
comercio electrónico.

39
 Enlaces por UNIDAD 5

En el siguiente enlace puedes encontrar una serie de plugins para insertar CSS
en nuestros temas de wordpress: CSS perzonalizado.

En el siguiente enlace puedes encontrar paso a paso ejemplos con los archivos
a incluir y modificar para crear nuestro tema: Crear tema personalizado con
Wordpress.

Para ver una descripción detallada de todos los recursos para lecciones
disponibles en moodle, ingresa aquí: Recursos

Para ver una descripción detallada de cada una de las actividades te

recomendamos el siguiente enlace: Actividades

Accede al siguiente enlace para que puedas ver un manual de instalación de la

documentación oficial de MediaWiki
https://www.mediawiki.org/wiki/Manual:Installation_guide/es
(MediaWiki,2018).

En el siguiente enlace podrás encontrar un manual con las configuraciones de

MediaWiki https://www.mediawiki.org/wiki/Manual:Configuring_MediaWiki/es

Para la instalación local puedes ingresar al siguiente enlace de la página oficial

de Prestashop la cual contiene una guía bastante detallada y funcional:
Instalación de Prestashop.

40