semántica como técnica para un mejor rendimiento en el
TRANSCRIPT
UNIVERSIDAD POLITÉCNICA DE SINALOA
PROGRAMA ACADÉMICO DE INGENIERÍA EN
INFORMÁTICA
Tesina
“Implementación de la maquetación
semántica como técnica para un
mejor rendimiento en el desarrollo
de páginas”
Para obtener la acreditación de las estadías profesionales
y contar con los créditos para el grado de Ingeniero en
Informática.
Autor: Flores Valenzuela Vreni Alina
Asesor: Dr. Ramón Patricio Velázquez Cuadras
Asesor OR: Ing. María del Mar Veloz Huerta
Mazatlán, Sinaloa 05 de diciembre del 2019
2
3
4
5
6
AGRADECIMIENTOS
Agradezco mucho a mi familia por todo su apoyo en todo momento, por estar conmigo
brindándome ánimos para nunca rendirme, por su gran sacrificio para facilitarme el apoyo
económico, gracias a todo lo que han hecho por mí, me han permitido obtener cada uno
de mis logros.
A SOLEMTI que me brindó la oportunidad de desempeñarme profesionalmente y
ser mi base de adquisición de nuevos conocimientos.
7
ÍNDICE TEMATICO
ÍNDICE DE IMÁGENES............................................................................................................................. 10
ÍNDICE DE FOTOGRAFIAS ....................................................................................................................... 11
ÍNDICE DE EJEMPLOS ............................................................................................................................. 11
ÍNDICE DE DIAGRAMAS .......................................................................................................................... 11
RESUMEN .............................................................................................................................................. 12
ABSTRACT .............................................................................................................................................. 12
INTRODUCCIÓN ..................................................................................................................................... 12
Capítulo 1 .............................................................................................................................................. 14
1.1 Antecedentes ............................................................................................................................... 15
1.1.1 Localización ............................................................................................................................... 15
1.1.2 Objetivos y prioridades de la empresa ....................................................................................... 16
1.1.3 Organigrama de la empresa ....................................................................................................... 16
1.1.4 Visión ........................................................................................................................................ 17
1.1.5 Misión ....................................................................................................................................... 17
1.2 Planteamiento del problema ........................................................................................................ 17
1.2.1 Propuesta de investigación ........................................................................................................ 18
1.2.2 Objetivos ................................................................................................................................... 18
1.2.2.1 Objetivo general ................................................................................................................. 18
1.2.2.2 Objetivos específicos .......................................................................................................... 18
1.2.3 Preguntas de investigación ........................................................................................................ 18
1.2.4 Hipótesis ................................................................................................................................... 19
1.2.4.1 Hipótesis general o principal ............................................................................................... 19
1.2.5 Limitaciones y supuestos ........................................................................................................... 19
1.2.6 Relevancia ................................................................................................................................. 19
Capítulo 2 .............................................................................................................................................. 20
2.1 Marco Conceptual ........................................................................................................................ 21
2.1.1 HTML5 ...................................................................................................................................... 21
2.1.1.1 Novedades ......................................................................................................................... 22
2.1.1.2 Nuevas Etiquetas ................................................................................................................ 23
2.1.1.3 Ventajas de usar HTML5 ..................................................................................................... 24
2.1.2 CSS3 .......................................................................................................................................... 26
2.1.2.1 Para qué sirve el CSS3 ......................................................................................................... 27
8
2.1.2.2 Características del CSS3 ...................................................................................................... 27
2.1.2.3 Ventajas y Desventajas del CSS3 ......................................................................................... 28
2.1.2.4 Aplicaciones o usos de css3................................................................................................. 29
2.1.3 JavaScript .................................................................................................................................. 30
2.1.3.1 ¿Para qué sirve JavaScript? ................................................................................................. 30
2.1.3.2 Características de JavaScript ............................................................................................... 31
2.1.3.3 ¿Es compatible con los navegadores? ................................................................................. 32
2.1.4 Plugin y Librería ......................................................................................................................... 32
2.1.4.1 Diferencia entre Plugin y Librería ........................................................................................ 33
2.1.5 BOOTSTRAP ............................................................................................................................... 33
2.1.5.1 Como Funciona ................................................................................................................... 34
2.1.5.2 Origen de Bootstrap ........................................................................................................... 35
2.1.5.3 Características de BOOTSTRAP ............................................................................................ 35
2.1.6 JQUERY...................................................................................................................................... 36
2.1.6.1 ¿Qué nos permite realizar jQuery? ...................................................................................... 37
2.1.6.2 ¿Cómo utilizar jQuery?........................................................................................................ 37
2.1.7 Maquetación Semántica ............................................................................................................ 38
2.1.7.1 ¿Qué es estructura semántica HTML5? ............................................................................... 39
2.1.7.2 Historia de la web semántica .............................................................................................. 39
2.1.7.3 ¿Como funciona la web semántica? .................................................................................... 42
2.1.7.4 Ventajas y Desventajas de la web semántica ....................................................................... 42
2.1.7.5 ¿Cómo debería de ser la web semántica? ........................................................................... 43
2.1.7.6 Principales componentes .................................................................................................... 43
2.1.7.7 Capas de la web semántica ................................................................................................. 44
2.1.8 Maquetación por componentes................................................................................................. 46
2.1.8.1 Metodología BEM ............................................................................................................... 46
2.1.8.2 Ventajas y Desventajas de BEM .......................................................................................... 49
2.1.9 Reglas de Maquetación ............................................................................................................. 50
2.1.10 PHP ......................................................................................................................................... 51
2.1.10.1 Antecedentes ................................................................................................................... 51
2.1.10.2 Ejemplos de sintaxis ....................................................................................................... 54
2.1.11 Frameworks ............................................................................................................................ 55
2.1.12 Codeigniter.............................................................................................................................. 56
9
2.1.12.1 Ventajas de utilizar Codeigniter......................................................................................... 57
2.1.13 Base de datos MySQL .............................................................................................................. 58
2.1.13.1 ¿Para qué se utiliza MySQL? ............................................................................................. 59
2.1.14 Front-End y Back-End .............................................................................................................. 60
2.1.14.1 ¿Para qué sirve el Front-End? ............................................................................................ 61
2.1.14.2 ¿Para qué sirve el Back-End?............................................................................................. 62
2.1.15 Metodología SCRUM ............................................................................................................... 62
2.1.15.1 ¿Qué es la metodología SCRUM? ...................................................................................... 62
2.1.15.2 ¿Cómo funciona? .............................................................................................................. 63
Capítulo 3 .............................................................................................................................................. 66
3.1 Diseño .......................................................................................................................................... 67
3.2 Desarrollo .................................................................................................................................... 68
3.2.1 Herramientas de desarrollo ................................................................................................... 68
3.2.2 Preparación de framework .................................................................................................... 70
3.3 Propuesta de ejemplo (Módulo Agenda) ...................................................................................... 76
3.4 Diseño de base de datos. .............................................................................................................. 76
3.5 Estructurado de directorios .......................................................................................................... 77
3.6 Creación de estructura base para el módulo agenda empleando la maquetación semántica. ....... 78
3.7 Creación del módulo de contactos. ............................................................................................... 79
3.8 Creación del módulo de grupos. ................................................................................................... 81
3.9 Resultados y discusión .................................................................................................................. 84
3.10 Conclusiones .............................................................................................................................. 89
Bibliografías ........................................................................................................................................... 90
Anexos ................................................................................................................................................... 93
Glosario ............................................................................................................................................. 93
10
ÍNDICE DE IMÁGENES
Imagen 2.1 – Logo de HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Imagen 2.2 – Logo de CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Imagen 2.3 – Logo de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Imagen 2.4 - Logo de Bootstrap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Imagen 2.5 – Logo de JQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Imagen 2.6 -Estructura de HTML de bloques en BEM . . . . . . . . . . . . . . . . .47
Imagen 2.7 - Estructura de CSS de bloques en BEM. . . . . . . . . . . . . . . . . . 47
Imagen 2.8 - Estructura de HTML de elementos en BEM. . . . . . . . . . . . . . . . 47
Imagen 2.9 - Estructura de CSS de elementos en BEM. . . . . . . . . . . . . . . . . 48
Imagen 2.10 - Estructura de HTML de modificadores en BEM . . . . . . . . . . . . . 48
Imagen 2.11 - Estructura de CSS de modificadores en BEM. . . . . . . . . . . . . . .49
Imagen 2.12 – Logo de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Imagen 2.13 – Logo de Codeigniter. . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Imagen 2.14 - Ejemplificación de las transacciones de datos en Codeigniter. . . . . .57
Imagen 2.15 - Logo de MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58
Imagen 2.16 – Base de datos en MySQL . . . . . . . . . . . . . . . . . . . . . . . . 60
Imagen 3.1 - Descarga de directorios y archivos de Codeigniter . . . . . . . . . . . . .70
Imagen 3.2 - Estructura del proyecto TesinaEjemplo. . . . . . . . . . . . . . . . . .71
Imagen 3.3 - Configuración del archivo database.php. . . . . . . . . . . . . . . . . . 72
Imagen 3.4 -Tabla de contactos creada en la base de datos tesina . . . . . . . . . . 76
Imagen 3.5 - Directorio de proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Imagen 3.6 - Archivo struct.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
11
Imagen 3.7 - Archivo de agregar_contactos.php. . . . . . . . . . . . . . . . . . . . 80
Imagen 3.8 - Archivo de lista_contactos.php . . . . . . . . . . . . . . . . . . . . . . 80
Imagen 3.9 - Archivo tabla_contactos.php. . . . . . . . . . . . . . . . . . . . . . . . 81
Imagen 3.10 - Archivo add_grupos.php . . . . . . . . . . . . . . . . . . . . . . . . . 82
Imagen 3.11 - Archivo view_grupos.php. . . . . . . . . . . . . . . . . . . . . . . . . 82
Imagen 3.12 - Archivo add_grupos.php. . . . . . . . . . . . . . . . . . . . . . . . . 83
Imagen 3.13 - Archivo header.php. . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Imagen 3.14 - Lista de contactos. . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Imagen 3.15 - Lista de contactos de un grupo. . . . . . . . . . . . . . . . . . . . . . 85
Imagen 3.16 - Flujo extra del navegador al interpretar correctamente lo que se está
mostrando en pantalla (parte 1). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Imagen 3.17 - Flujo extra del navegador al interpretar correctamente lo que se está
mostrando en pantalla (parte 2). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
ÍNDICE DE FOTOGRAFIAS
Fotografía 1.1 - Ubicación de la empresa SOLEMTI (Google maps). . . . . . . . . . . 15
Fotografía 2.1 - Rasmus Lerdorf. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
ÍNDICE DE EJEMPLOS
Ejemplo 2.1 - Mezcla de los modos HTML y PHP . . . . . . . . . . . . . . . . . . . . . . 54
Ejemplo 2.2 - Mostrar información de nuestro formulario . . . . . . . . . . . . . . . . . . 55
ÍNDICE DE DIAGRAMAS
Gráfica 1.1 – Organigrama de la empresa SOLEMTI. . . . . . . . . . . . . . . . . . .16
12
RESUMEN
El presente documento ha sido realizado con la finalidad de acreditar la carrera de
ingeniería en informática en la universidad politécnica de Sinaloa. El contenido expuesto
en el presente trabajo hace mención al uso de herramientas enfocadas al desarrollo web,
las cuales tienen como finalidad un mejor rendimiento en las páginas web utilizando la
técnica de maquetación semántica teniendo como resultado una página con su estructura
definida.
ABSTRACT
This document has been made with the aim of accrediting the career of computer
engineering at the polytechnic university of Sinaloa. The content presented in this paper
refers to the use of tools focused on web development, which aim at better performance
on web pages using the semantic layout technique resulting in a page with its defined
structure.
INTRODUCCIÓN
El diseño gráfico es una profesión cuya actividad es el desarrollo y ejecución de ideas,
hechos y mensajes específicos a grupos sociales determinados en forma gráfica y
visual; así mismo contempla aspectos informativos, estilísticos, de identidad, de
persuasión, tecnológicos, productivos y de innovación. El ambiente competitivo que
caracteriza a la profesión del diseñador gráfico, obliga a los trabajadores, a mantener
una actualización tecnológica continua en lo que la utilización de motores de búsqueda
de bancos de imágenes, texto y tipos de fuentes, algún tipo de programación sencilla
requerida para desarrollo web, etc. El aprendizaje en esta área nunca termina, las
tendencias cambian rápido y las tecnologías ayudan a mejorar día a día.
13
Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas
(<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se
dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es
que generaban una página muy encorsetada, y el código se volvía complejo de entender.
Además, algunos buscadores encontraban problemas al analizar la estructura de la
página.
Actualmente, la maquetación con tablas ha caído en desuso, y se realiza
utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de
las capas en la página se realiza a través de CSS.
14
Capítulo 1
Antecedentes y planteamiento del problema
15
1.1 Antecedentes
SOLEMTI es una empresa de Soluciones Empresariales de Tecnología de Información
que nació en Mazatlan, creada por tres jóvenes entusiasmado por crear un negocio e
impulsar el talento local. Inició ofreciendo servicios de Desarrollo y Diseño de Sitios Web
y Sistemas Web, después se certifica ante IBM como una empresa de Comercio
Electrónico, Marketing Digital y, recientemente Desarrollo de Aplicaciones Móviles.
SOLEMTI cuenta con un historial de antecedentes como una empresa de
soluciones empresariales de tecnología de información. Nacida en el año 2006, su
dedicación constante y eficaz a la resolución de problemas tecnológicos para sus
clientes, la ha catalogado como unas de las empresas con mayor dedicación, versatilidad
e impulsor de talento local.
1.1.1 Localización
SOLEMTI se encuentra ubicado en Calzada Rafael Buelna Tenorio 202 Interior B-3,
Hacienda las Cruces, 82126 Mazatlán, Sinaloa.
Ubicación de la empresa (Google maps)
Fuente: Google maps
Fotografía 1.1
16
1.1.2 Objetivos y prioridades de la empresa
Ser reconocidos como una empresa mazatleca de Soluciones Empresariales de
Tecnologías de Información ofreciendo servicios de Desarrollo y Diseño de Sitios Web,
Desarrollo de Aplicaciones y Sistemas Web. Ofrecer soluciones innovadoras con
tecnologías de información que se adapten a las necesidades de nuestros clientes,
desarrollando y haciendo uso del talento de jóvenes Sinaloenses, siempre enfocados en
crear mejores sistemas de comercio electrónico, estrategias de marketing digital,
increíbles experiencias web y aplicaciones móviles útiles para la vida diaria.
1.1.3 Organigrama de la empresa
A continuación, se muestra el organigrama de la empresa, donde se especifica cada
área con que la empresa cuenta.
Organigrama de la empresa (SOLEMTI)
Fuente: SOLEMTI
diagrama 1.1
17
1.1.4 Visión
Ser preferidos y reconocidos a nivel nacional por el desarrollo de productos y servicios
Web innovadores, propios y de nuestros clientes, con una fuerte participación en el
mercado internacional siempre ofreciendo un ambiente de trabajo que motive el
desarrollo humano y profesional.
1.1.5 Misión
Ser los mejores ofreciendo soluciones web innovadoras, superando las expectativas de
nuestros clientes nacionales e internacionales mediante un equipo comprometido y
capacitado en el uso adecuado de tecnologías de información, siempre buscando crear
una ventaja competitiva a nuestros clientes.
1.2 Planteamiento del problema
En una empresa de desarrollo, todos los proyectos y/o sistemas tienen por objetivos algo
en común, dentro de los cuales está el culminar con la elaboración del sistema o
proyecto y que los mismos satisfagan las necesidades del cliente; pero conforme pasa
el tiempo, las tecnologías tienden a evolucionar, por lo cual los métodos o técnicas que
son empleados para abordar las actividades, pueden resultar eficientes en su momento,
sin embargo, los requerimientos de los clientes pueden ser cada vez más demandantes,
con esto implica a que el personal encargado de desarrollar los proyectos se vea
obligado a incrementar sus capacidades, a adquirir nuevos conocimientos y mejorar sus
técnicas para que así puedan permitirse entregar un producto de forma puntual y
eficiente.
Ya que, si se sigue empleando las mismas técnicas, los sistemas tardaran más
para obtener los resultados deseados, la rapidez y la calidad ya no será la misma,
llevando así que los empleados tengan estrés laboral.
18
1.2.1 Propuesta de investigación
Para solucionar este tipo de problemas, se realizó una investigación de la técnica para
maquetar páginas web de forma semántica y modular, siendo así que las personas o
empleados obtengan más conocimiento y que con la ayuda de esta herramienta la
maquetación sea mucho más eficiente a la hora de trabajarla.
1.2.2 Objetivos
A partir del planteamiento del problema y la propuesta de investigación se definen los
siguientes objetivos.
1.2.2.1 Objetivo general
Generar sitios web empleando técnicas de maquetación semántica que permitan la
estandarización de componentes para lograr un mejor rendimiento durante el desarrollo
ágil.
1.2.2.2 Objetivos específicos
Los siguientes puntos hacen mención a las actividades específicas a realizar para lograr
la meta que plantea el objetivo general.
Aprender e implementar las estructuras de HTML5.
Maquetar un archivo HTML semántica y modularmente.
Desarrollar sitios flexibles y adaptables en dispositivos mobiles y desktop.
Aplicar conocimiento de JavaScript para ofrecer eventos atractivos para el usuario.
1.2.3 Preguntas de investigación
Antes y durante el desarrollo de la investigación sobre la maquetación semántica se
han formulado las siguientes preguntas:
¿Qué es HTML5?
¿Por qué es importante la maquetación o diseño en una página web?
¿Cómo favorece el uso de la semántica al diseño de páginas web?
19
¿En que favorece la creación de contenido por componentes?
1.2.4 Hipótesis
En base a la problemática establecida, la propuesta de investigación y las incógnitas ya
mencionadas, se establece la siguiente hipótesis:
1.2.4.1 Hipótesis general o principal
Manejar un maquetado bien estructurado ayuda a mejorar el rendimiento durante el
desarrollo de páginas web complejas y/o robustas, así como favorece la creación de
contenido por componentes.
1.2.5 Limitaciones y supuestos
Actualmente existen muchas tecnologías y cada vez se crean nuevas o en casos se
actualizan o mejorar las ya existentes, por lo que definir una técnica o definir una
estructura única puede resultar obsoleto en un futuro, teniendo en cuenta la variedad de
herramientas existentes donde cada una de ellas tiene sus objetivos y beneficios, ya sean
únicos o compartidos, es importante estructurar la maquetación para que el lenguaje en
el que se trabaje resulte más fácil la incorporación del sitio web sin la generación de
complicaciones.
1.2.6 Relevancia
Si se estructura bien un sitio web en el maquetado será entendible para todo el equipo
de trabajo y no resultará complicado el desarrollarlo, permitiendo que el equipo trabaje
más rápido. Actualmente los sitios web se enfocan en solucionar problemas o resolver
necesidades, comprendiendo que el cliente o los usuarios se concentran mucho en los
detalles, por ejemplo, si el sitio web no está bien estructurado en algunas plataformas o
no se ve bien en algunos dispositivos móviles como celulares o tablets puede resultar
una mala experiencia para el usuario.
20
Capítulo 2
Estado del arte
21
2.1 Marco Conceptual
A continuación, en el capítulo ll se exponen conceptos e información dedicados a los
lectores, la cual servirá de apoyo para una mejor comprensión de los temas que aborda
la implementación de la maquetación semántica.
2.1.1 HTML5
Durante los últimos años, el estándar HTML5 se ha estado afianzando en muchas
páginas web. HTML5 es un lenguaje markup (de hecho, las siglas de HTML significan
Hyper Text Markup Language) usado para estructurar y presentar el contenido para la
web. Es uno de los aspectos fundamentales para el funcionamiento de los sitios, pero no
es el primero. Es de hecho la quinta revisión del estándar que fue creado en 1990. A fines
del año pasado, la W3C la recomendó para transformarse en el estándar a ser usado en
el desarrollo de proyectos venideros. Por así decirlo, qué es HTML5 está relacionado
también con la entrada en decadencia del viejo estándar HTML 4, que se combinaba con
otros lenguajes para producir los sitios que podemos ver hoy en día. Con HTML5,
tenemos otras posibilidades para explotar usando menos recursos. También entra en
desuso el formato XHTML, dado que ya no sería necesaria su implementación.[1]
Logo de HTML5
Fuente: https://www.genbeta.com/desarrollo/cual-es-el-soporte-de-html5
Imagen 2.1
22
HTML4 fue “declarado” el lenguaje oficial de la web en el año 2000, y tomó una
década para comenzar a implementar el desarrollo de su nueva revisión. Esta nueva
generación de HTML se dice que pronto dominará el desarrollo en internet, pero introduce
algunos cambios importantes que veremos dentro de algunas líneas. Por consecuencia,
para los desarrolladores de sitios web es importante conocer las ventajas de HTML5,
considerando que algunas entidades se están moviendo en esta dirección. [1]
No solamente Google con su navegador Chrome hace unos años, sino también
Adobe hace unos meses, que removió el soporte de Flash para Android para dar paso a
la llegada de HTML5.
Se trata de un sistema para formatear el layout de nuestras páginas, así como
hacer algunos ajustes a su aspecto. Con HTML5, los navegadores como Firefox, Chrome,
Explorer, Safari y más pueden saber cómo mostrar una determinada página web, saber
dónde están los elementos, dónde poner las imágenes, dónde ubicar el texto. En este
sentido, el HTML5 no se diferencia demasiado de su predecesor.[2]
La única diferencia, es el nivel de sofisticación del código que podremos construir
usando HTML5.
2.1.1.1 Novedades
Esta herramienta introduce algunos elementos que hacen que se actualice a los tiempos
que corren. Muchas de las novedades están relacionadas con la forma de construir
websites que se tiene en la actualidad, las novedades son las siguientes:[1]
Inserción de multimedia
Dependencia de los plug-ins
Inserción de Multimedia: Esta novedad contara con etiquetas HTML especiales
para poder ser incluidos, también algunos aspectos de diseño también son incluidos en
el lenguaje, así como también algunos detalles de navegación.
Dependencia de los plug-ins: Con el uso de HTML5, se puede reducir la
dependencia de los plug-ins que tenemos que tener instalados para poder ver una
determinada web. Caso emblemático, el de Adobe Flash, que se ve claramente
23
perjudicado por la instauración de este estándar. Por lo cual esta novedad es también
muy importante para los dispositivos que de forma nativa no soportaban Flash, y que no
soportaban tampoco plug-ins necesarios para hacerlo como, por ejemplo: El Iphone.[1]
Con HTML5 se amplía el horizonte del desarrollo de aplicaciones que pueden ser
usadas en una multiplicidad de dispositivos. Gracias a esto, los usuarios pueden acceder
a las páginas web sin la necesidad de estar conectados a internet.
La funcionalidad de drag and drop, y la edición online de documentos ampliamente
popularizada por Google Docs, también se suman. La geolocalización es uno de sus
puntos fuertes, pero, por otro lado, las etiquetas diseñadas especialmente para el audio
y el video ahorran la necesidad de tener que tener un plug-in de Flash y, al mismo tiempo,
asestan un golpe mortal al producto de Adobe, que cada vez se está usando menos. Sin
embargo, es importante destacar que Flash sigue siendo utilizado.[1]
2.1.1.2 Nuevas Etiquetas
El lenguaje HTML funciona a través de marcas de sentido llamadas etiquetas. Las
etiquetas son la herramienta fundamental para que los navegadores puedan interpretar
el código y permitirnos ver imágenes, texto, párrafo, y estructuras. Los navegadores
vendrían a ser como “traductores” de las etiquetas, y con HTML5, se agregan nuevas
etiquetas para utilizar que nos ahorran el uso de otros productos que se usaban para
complementar y hacer cosas que con el simple HTML no se podían hacer. La sintaxis de
HTML5 se destaca, como dijimos, en el ámbito multimedia, pero son bastantes las
etiquetas introducidas para generar una mejoría.[1]
Con esta herramienta la idea es que podamos visualizar el contenido multimedia
variado que podemos encontrar en el internet aun cuando estamos en dispositivos de
multimedia baja que no podrían soportarlo. No solo se cuenta con etiquetas especiales
como el audio, video y canvas, sino también integración con contenidos de gráficos como
los vectores.[1]
Las más importantes de las nuevas etiquetas creadas son:
24
article: esta etiqueta sirve para definir un artículo, un comentario de usuario o una
publicación independiente dentro del sitio.
header, footer: estas etiquetas individuales ahorran tener que insertar IDs para
cada uno, como se solía hacer anteriormente. Además, se pueden insertar
headers y footers para cada sección, en lugar de tener que hacerlo únicamente en
general.
nav: la negación puede ser insertada directamente en el markup, entre estas
etiquetas, que nos permitirán hacer que nuestras listas oficien de navegación.
section: con esta etiqueta, una de las más importantes de las novedades, se
puede definir todo tipo de secciones dentro de un documento. Por ponerlo de forma
sencilla, funciona de una forma similar a la etiqueta div que nos separa también
diferentes secciones.
audio y video: estas son las dos más importantes etiquetas de HTML5, dado que
nos permiten acceder de forma más simple a contenido multimedia que puede ser
reproducido por casi todo tipo de dispositivos; marcan el tipo de contenido que
estará en su interior.
embed: con esta etiqueta se puede marcar la presencia de un contenido
interactivo o aplicación externa.
canvas: finalmente, esta etiqueta nos permite introducir un “lienzo” dentro de un
documento, para poder dibujar gráficos por vectores; será necesario el uso de
JavaScript.[1]
2.1.1.3 Ventajas de usar HTML5
Es gratuito: No necesitas ningún tipo de programa especial para empezar a
programar en HTML5, incluso puedes hacerlo en un bloc de notas, guardar el
documento como HTML y podrás visualizarlo desde cualquier navegador. Sin
embargo, aunque esto es posible no es realmente recomendable pues en un bloc
de notas no separa las etiquetas del contenido y puede ser más complicado
realizar correcciones.
25
Pero no necesitas ningún software costoso, puedes usar un editor de código
gratuito como Notepad++ que ofrece funciones básicas como diferenciación por
color entre etiquetas y contenido.[2]
Código más ordenado: Debido a la adición de nuevas etiquetas que ayudan a
nombrar partes de la estructura básica de toda página web (como <header>, por
ejemplo), así como la eliminación de ciertas etiquetas, el código HTML se puede
separar fácilmente entre etiquetas y contenido, permitiendo así que el
desarrollador pueda trabajar de manera más efectiva y detectar errores de manera
más rápida.
Las etiquetas son claras y descriptivas, de modo que el desarrollador puede
comenzar a codificar sin ningún problema. Es realmente un lenguaje bastante
sencillo de comprender en esta nueva versión.[2]
Compatibilidad con los ordenadores: Los navegadores modernos y populares
como Chrome, Firefox, Safari y Opera) soportan HTML5, es decir, sin importar qué
navegador empleen tus usuarios el contenido se puede visualizar correctamente.
El único problema sería considerar a usuarios que emplean navegadores más
antiguos, ya que en éstos no todas las nuevas funciones y etiquetas de HTML5
están disponibles.
Puedes verificar qué funciones de HTML5 soporta cada navegador en la
página Can I use y saber de antemano si hay alguna función de tu sitio web que
podría resultar ser un problema en estas versiones pasadas de los navegadores.
También puedes hacer uso de herramientas como Modernizar, que te permiten
determinar la compatibilidad de tu página en diversos navegadores.[2]
Almacenamiento mejorado: Otra nueva adición en HTML5 ha sido el
almacenamiento local que se define a sí mismo como “mejor que las cookies” pues
la información nunca se transfiere al servidor. De esta manera, la información se
mantiene segura. Asimismo, esta nueva característica permite que la información
se mantenga almacenada incluso después de haber cerrado el navegador y como
26
funciona desde el lado de cliente, la información se mantiene a salvo incluso si el
usuario decide borrar sus cookies.[2]
Ya que la información se guarda en el navegador del usuario, da muchas
más posibilidades a las aplicaciones web como por ejemplo el uso de caché que
mejora el tiempo de respuesta de la aplicación.
2.1.2 CSS3
El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que
toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento
estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide
Web Consortium) es el encargado de formular la especificación de las hojas de estilo que
servirán de estándar para los agentes de usuario o navegadores.[4]
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de
un documento de su presentación. La información de estilo puede ser adjuntada como
un documento separado o en el mismo documento HTML. En este último caso podrían
definirse estilos generales en la cabecera del documento o en cada etiqueta particular
mediante el atributo "<style>".[4]
Logo de CCS3
Fuente: https://commons.wikimedia.org/wiki/File:CSS.3.svg
Imagen 2.2
27
2.1.2.1 Para qué sirve el CSS3
El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo
permite que modificando ese documento (la hoja CSS) podamos cambiar la estética
entera de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando
solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen.
CSS es un lenguaje utilizado para dar estética a un documento HTML (colores,
tamaños de las fuentes, tamaños de elemento), con css podemos establecer diferentes
reglas que indicarán como debe presentarse un documento. Podemos indicar
propiedades como el color, el tamaño de la letra, el tipo de letra, si es negrita, si es itálica,
también se puede dar forma a otras cosas que no sean letras, como colores de fondo de
una página, tamaños de un elemento, por ejemplo, el alto y el ancho de una tabla.[5]
2.1.2.2 Características del CSS3
1. Atributo gradiente de colores en borde con CSS y Firefox: Posibilidad de definir el un
gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de
Firefox.
2. Bordes redondeados en CSS 3: Las características de CSS 3 incluyen bordes
redondeados, a través del atributo border-radius, que define la curvatura que debe tener
el borde del elemento.
3. Múltiples imágenes de fondo con CSS: Cómo conseguir que un elemento de la página
tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS
4. Colores RGBA en CSS 3: Veremos qué son los colores RGBA y su notación, que se
incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.
5. Word-wrap en CSS 3: Una propiedad de CSS 3 que sirve para romper las palabras
que son demasiado largas y no caben enteras por la anchura de una caja.[4]
28
6. Textos multi-columna con CSS 3: CSS 3 incorpora nuevos atributos para que el
navegador se encargue de producir texto multi-columna, es decir, que maquete
directamente el texto en varias columnas sin tener que hacer nosotros nada.
7. Bordes con imágenes en CSS 3: El atributo border-image y varios otros de CSS 3
harán posible la utilización de imágenes como bordes de los elementos de la página, sin
código HTML especial, simplemente con hojas de estilo.
8. Sombras en CSS 3 con box-shadow: Crear sombras en CSS3 con el atributo box-
shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar
imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.
9. Resplandor exterior con CSS3: Cómo realizar un elemento que tenga un resplandor
exterior con CSS3 y la propiedad box-shadow.
10. Propiedad background-origin de CSS 3: La propiedad de CSS 3 background-origin
permite decidir la posición de la imagen de fondo con respecto al borde, padding o el
contenido del elemento.
11. Atributos CSS3 overflow-x y overflow-y: Descripción de los atributos de CSS3
overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando
sobrepasa los límites de un contenedor en la horizontal o vertical.
12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y principales
características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía
en una página web.
13. Sombras en el texto con text-shadow de CSS: Cómo aplicar sombras y otros efectos
en los textos con CSS y el atributo text-shadow.[4]
2.1.2.3 Ventajas y Desventajas del CSS3
Ventajas
Se obtiene un mayor control de la presentación del sitio al poder tener todo el
código CSS reunido en uno, lo que facilita su modificación.
29
Se consigue hacer mucho más legible el código HTML al tener el código CSS
aparte.
Pueden mostrarse distintas hojas de estilo según el dispositivo que estemos
utilizando (versión impresa, versión móvil, leída por un sintetizador de voz…) o
dejar que el usuario elija.
Gracias a la técnica CSS Sprites podemos aligerar la carga de nuestro sitio al
juntar todas las imágenes en una.
Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir
varias técnicas (bordes redondeados, sombra en el texto, sombra en las cajas,
etc.) sin necesidad de usar un editor gráfico.[3]
Desventajas
Existen limitaciones que CSS 2.x todavía no permite, por ejemplo, la alineación
vertical de capas, las sombras, los bordes redondeados.
El uso de las tablas nos permitía crear diseños complejos de forma mucho más
sencilla que utilizando CSS, aunque CSS3 está intentando facilitar dicho trabajo.
A veces, dependiendo del navegado, la página que ha sido maquetada con CSS
puede verse distinta.[3]
2.1.2.4 Aplicaciones o usos de css3
1. Botones y HTML: Mostramos algunas insuficiencias del HTML en el diseño de
formularios y en concreto en el retoque de botones de envío de formularios.
2. Botones y CSS: Explicamos las mejoras que pueden obtenerse por el uso de hojas
de estilo en la creación de formularios y, más concretamente, los botones de envío.
3. Botones e imágenes: Como podemos mejorar los botones con el uso de imágenes
en lugar de botones de submit corrientes.
4. Botones, CSS y tablas: Vamos a mejorar los botones normales, que al hacer clic
hacen efecto de pulsación, con imágenes a los lados para mejorar su aspecto.
30
5. Botones, imágenes y eventos: Para que los botones de imagen no ignoren los
eventos de teclado, vamos a utilizar una función JavaScript.
6. Botones, tablas y eventos: Ampliamos el ejemplo anterior para que el texto de los
botones se pueda editar fácilmente, sin perder en presentación.[4]
2.1.3 JavaScript
JavaScript es un lenguaje de programación interpretado en un dialecto estándar
ECMAScript, está basado por prototipos, imperativo, dinámico, sirve como parte del
navegador web permitiendo mejorar su interfaz y logra hacer que las páginas web sean
más dinámicas. Este lenguaje se utiliza más que todo a criterio del cliente, es decir, se
ejecuta en el ordenador y no en el servidor, creando unos efectos atractivos llamativos y
dinámicos a las páginas web. [6]
Logo de JavaScript
Fuente: http://pluspng.com/logo-javascript-png-5664.html
Imagen 2.3
2.1.3.1 ¿Para qué sirve JavaScript?
JavaScript es un lenguaje de programación que permite crear páginas con diseños y
dinámicas asociadas al desarrollo de la web moderna, ya que es uno de los más
utilizados, también crea aplicaciones que interactúen con el usuario y se ejecuten con el
navegador web.
31
Crea todo tipo de programación bien sea pequeños o de objetos complejos, por lo
que es el lenguaje más versátil y estable que se conoce. El lenguaje no tiene nada que
ver con Java, tiene una estructura bastante fácil y de alto nivel, es simple de aprender y
se adapta fácilmente al lenguaje humano ya que está formado por texto y script. [6]
Los scripts son secuencias de comando que se forman desde el lado del cliente y
no del servidor, sin necesidad de desencajar el código para su fuente de ejecución
mediante unos procesos, aunque también se da la transformación de JavaScript para
aplicación desde el lado del servidor, es de muy poco uso, el script representa pequeñas
acciones, eventos o efectos que se acoplan entre sí para crear grandes programas. [6]
2.1.3.2 Características de JavaScript
Estas son algunas características del programa en la implementación que se ajusta en el
estándar ECMAScript:
Imperativo y estructurado: JavaScript es prácticamente compatible con la gran
parte de la estructura de programación C, por ejemplo, (sentencias “f1”, bucles
“for”, sentencias “switch” entre otros), en C, en el ámbito de las variables consigue
el bloque por el cual fueron definidas, aunque en el JavaScript no son compatibles.
Esto ya cambia con la versión ECMAScript 2015, ya que alcanza con una
compatibilidad con block scoping por medio de una palabra clave “let”. Por lo que
JavaScript hace estilo con sentencias y expresiones, una diferencia con respecto
a C es que el punto y la coma en el lenguaje pueden ser omitidos al finalizar
cualquier sentencia.
Tipado dinámico: en la gran mayoría de los lenguajes de scripting, el tipo está
asociado al valor y no a la variable, es decir, una variable “x” en algunos casos
puede estar asociada a un número y más adelante a una cadena, en el lenguaje
de JavaScript es compatible con todo tipo de forma y de objeto, en algunos casos
como duck typing, una manera de saberlo es con palabra clave typeof.[6]
Objetual: el lenguaje está formado en su totalidad por objetos, los objetos son
arrays asociativos, mejorando así la instalación de prototipos, los nombres de los
objetos son claves de tipo cadena: “obj.x= 10 y obj (´x´) = 10 “son equivalentes,
32
sus valores y propiedades pueden ser eliminados, cambiados y creados en tiempo
de ejecución, sin embargo, JavaScript tiene un sinfín de números pequeños de
objetos predefinidos como “function y date”.
Evaluación en tiempo de ejecución: incluye una función “eval” que evalúa las
expresiones habladas como cadena en tiempo de ejecución, por lo que es
recomendable que “eval” se utilice con precaución y así opte por una función
“json.Parse ()” en la medida más segura.
Funcional: Funciones de primera clase: suele tener el nombre de cuidados de
primera clase, por lo que son objetos en sí, que poseen métodos y propiedades
como “call () y. bind ().” Se trata de una función, que logra definirse estando dentro
de otra. Esta función se crea cada vez que una de tipo externo es solicitada como
de forma de clausura, siendo el resultado de evaluar el ámbito de una o varias
variables dependiendo del ámbito externo, incluyendo argumentos de la función y
variables locales externas, sin embargo, el resultado de la clausura forma parte
del interno de cada objeto en función.[6]
2.1.3.3 ¿Es compatible con los navegadores?
El lenguaje JavaScript es soportado por la gran mayoría de los navegadores como
Netscape, Internet Explorer, Mozilla Firefox y Opera. Han surgido varios lenguajes que
son PHP que están del lado del servidor y JavaScript que está del lado del cliente,
también surgió Ajax en acrónimo (Asynchronous JavaScript And XML) el cual es una
técnica para crear aplicaciones interactivas de web y la combina con varias tecnologías:
Implementaciones ECMAScript, es el lenguaje JavaScript.
HTML y Hojas de estilos CSS se genera estilos.
XMLHttp Request es una de las funciones más importantes por lo que intercambia
datos asincrónicamente con el servidor web, mediante PHP Y ASP.[6]
2.1.4 Plugin y Librería
33
Plugin
Los plugin son componentes de código con la finalidad de ampliar la funcionalidad
estándar de tecnologías ya existentes. Funcionan de manera muy parecida a las
extensiones o complementos para los navegadores web y están hechos con la misma
tecnología de su anfitrión, es decir, para el caso de web están programados en PHP, y
usan HTML, hojas de estilo CSS y JavaScript para la parte de interfaz de usuario.
La gracia de los plugin está en que con ellos se puede implementar prácticamente
cualquier cosa que te puedas imaginar.[7]
Librería
En programación, una librería es un archivo o conjunto de archivos que se utilizan para
facilitar la programación. Las librerías, también llamadas "frameworks", consisten en
archivos de código a los que llamamos al principio de la página, por ejemplo, una librería
JavaScript será un archivo en JavaScript que insertamos al principio de la página.
Podemos insertar cualquier archivo al principio de la página, sin embargo, no todos
los archivos pueden considerarse librerías. Para que un archivo sea una librería, este
puede tener que usarse en distintas páginas, no sólo del mismo sitio, sino de varios sitios.
Además, debe modificar el código de tal manera que nos facilite la inserción de nuevo
código en la página.[8]
2.1.4.1 Diferencia entre Plugin y Librería
La principal diferencia entre el Plugin y la librería es que un plugin es una extensión que
mejora las capacidades de una aplicación, mientras que una librería es una colección de
clases y funciones que ayudan a desarrollar un software.[9]
2.1.5 BOOTSTRAP
Bootstrap es un framework para CSS y JavaScript, creado con el objetivo de facilitar la
organización de contenido, la aplicación de estilos y el desarrollo de páginas web
adaptables a dispositivos móviles.
34
El principal beneficio de usar un diseño adaptativo o un “responsive design” es que
el sitio web se adapta automáticamente al dispositivo desde donde se acceda. Lo que se
usa con más frecuencia, el uso de media queries, que es un módulo del CCS3 permite la
presentación de contenido para adaptarse a condiciones como la resolución de la
pantalla, así como las dimensiones del contenido en porcentajes, teniendo como
resultado un a web muy fluida capaz de adaptarse a casi cualquier tamaño de forma
automática.[10]
Fuente: https://fuzati.com/technology/bootstrap-logo/
Imagen 2.4
Bootstrap está formado por una colección de hojas de estilo y funciones JavaScript
auxiliares que permiten construir muy rápidamente un front-end responsive.
Está pensado para trabajar bajo el concepto “mobile first”, es decir, diseñar
pensando ante todo en los dispositivos móviles. A la hora de crear interfaces web, los
diseños creados con esta herramienta son simples, limpios e intuitivos, logrando que los
sistemas tengan más agilidad a la hora de cargar y al adaptarse a otros dispositivos. El
framework trae varios elementos con estilos predefinidos fáciles de configurar: [11]
Botones
Menús desplegables
Formularios incluyendo todos sus elementos e integración jQuery para
favorecer ventanas y tooltips dinámicos.
2.1.5.1 Como Funciona
Entender el funcionamiento de Bootstrap es relativamente sencillo. En líneas generales,
se basa en una estructura dividida en un total de 12 columnas que los desarrolladores
35
pueden gestionar en función de sus necesidades y preferencias, en función de cuatro
tamaños de dispositivo.[12]
2.1.5.2 Origen de Bootstrap
Bootstrap es un framework CSS relativamente nuevo. Su origen se remonta al año 2011.
Fue desarrollado por la compañía Twitter y su principal función era la de dar forma a un
determinado sitio web a través de las librerías CSS, las cuales incluyen una amplia
selección de elementos: botones, cuadros, menús, diferentes tipografías. Tan solo unos
meses después de su lanzamiento, Bootstrap fue liberado con la licencia Mit.[11]
2.1.5.3 Características de BOOTSTRAP
Las principales características de Bootstrap son las siguientes:[11]
Soporte: Esta es una de las principales señas de identidad de Bootstrap, y también
una de sus grandes ventajas. Ofrece un soporte extraordinario con HTML5 y CC3.
Así, los usuarios pueden hacer uso de él con una gran flexibilidad, y obteniendo
unos resultados excelentes.
Sencillo de manejar: Gracias a un sistema GRID que permite realizar un diseño
haciendo uso de 12 columnas para insertar el contenido, los usuarios pueden crear
sitios web responsive de una manera mucho más sencilla e intuitiva.
Imágenes: A la hora de crear contenido adaptado para dispositivos móviles, el
contenido en formato texto es muy importante, pero las imágenes también. Así,
Bootstrap permite insertar imágenes responsive de una forma muy fácil. Basta con
añadir la etiqueta “img-responsive”; de esta manera, las imágenes se adaptan de
manera automática a la pantalla del dispositivo.
36
2.1.6 JQUERY
JQuery es una librería o framework de JavaScript (JavaScript es un lenguaje de
programación muy usado en desarrollo web). Esta librería de código abierto, simplifica la
tarea de programar en JavaScript y permite agregar interactividad a un sitio web sin tener
conocimientos del lenguaje. [13]
Esto ayuda a desarrollar en menor tiempo y más fácilmente. Además, evita tener
que tener un conocimiento profundo para emplear las utilidades de jQuery.[13]
Fuente: https://openclassrooms.com/en/courses/4309491-simplifica-tus-proyectos-con-jquery/4309498-que-es-
jquery
Imagen 2.5
Basados en esta librería, existe una infinita cantidad de plugins (gratis y pagos)
creados por desarrolladores de todo el mundo. Estos plugins resuelven situaciones
concretas dentro del maquetado de un sitio, por ejemplo: un menú responsive, una galería
de fotos, un carrousel de imágenes, un slide, un header que cambia de tamaño, el
deslizamiento del scroll al hacer clic en un botón (anclas HTML), la transición entre
páginas y miles de efectos más. [13]
Cada plugin tiene un sitio web desde donde se pueden descargar sus archivos,
con demos, instrucciones para su implementación, opciones de configuración e
información de las licencias. En la web hay cientos de blogs que recopilan y analizan los
plugins según sus funcionalidades, reuniendo en un sólo post los links a varios plugins
de función similar, lo que facilita mucho la búsqueda. [13]
37
2.1.6.1 ¿Qué nos permite realizar jQuery?
jQuery permite manipular elementos del DOM (textos, imágenes, enlaces, etc.), cambiar
el diseño CSS o realizar peticiones Ajax utilizando instrucciones simples, a través de un
código muy conciso y sencillo.
El lema de esta herramienta es “escribe menos, haz más”. Con esta herramienta
como su lema lo dice se escribe menos código, y los errores serán menos frecuentes es
por esto que la librería se hizo muy popular desde su aparición en el año 2006. [13]
2.1.6.2 ¿Cómo utilizar jQuery?
1. Lo primero que tenemos que hacer es descargarnos este Framework desde la
página de jQuery.
2. Si nos fijamos, tenemos dos opciones para descargar jQuery, comprimido y sin
comprimir. La opción sin comprimir es adecuada para entornos de desarrollo,
mientras que la comprimida es la versión para usar en entornos en producción
pues ocupa menos y acelera la carga de las páginas web.
3. El resultado de la descarga es un archivo con extensión js que guardaremos en
una carpeta de nuestro equipo.[14]
4. Una descargado jQuery ya podemos usarlo y para ello lo deberemos vincular en
la página html el jQuery mediante el tag
5. Ese vínculo conviene colocarlo dentro del body y hacia el final del HTML para no
ralentizar la carga de los contenidos.
6. Si nuestra web está en un hosting, el fichero js deberá subirse al hosting en la
misma carpeta que el HTML.
7. Si no queremos esto, podemos realizar la vinculación a través de Google de la
siguiente manera:
">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">.
8. A partir de este momento, ya podemos empezar a usar jQuery en nuestra página
web.
9. Podemos recurrir a varios tutoriales que hay en la red para conocer las funciones
que aporta jQuery así como el conjunto de plugins basados en el mismo.
38
10. También podemos descargar algún plugin desarrollado sobre jQuery y usarlo.
11. En este caso, también tendremos que vincular dicho plugin dentro de los tags.
12. Otro aspecto a tener en cuenta es que cualquier código relacionado con jQuery o
los plugin que usemos se deberá definir dentro de los tags
13. Es muy recomendable que todo este código se escriba al final de la página HTML
de forma que la carga de la misma sea lo más rápida posible. [14]
Si vamos a usar plugins basados en jQuery podemos encontrarnos con las
siguientes situaciones:
• Que debamos modificar el código HTML para adaptarlo al plugin instalado.
• Que debamos modificar nuestro fichero CSS para añadir las reglas propias del
plugin.
• Que, en cuanto a las imágenes del propio plugin, estas se ubiquen de forma
adecuada en nuestra estructura de directorios para que puedan ser encontradas.[14]
2.1.7 Maquetación Semántica
HTML5 ha supuesto un avance espectacular respecto a versiones anteriores a la hora de
construir páginas web incluyendo un montón de características nuevas que permiten
desde el manejo directo de objetos multimedia hasta la realización de animaciones y
manejo de gráficos sin necesidad de recurrir a scripts. [15]
Más allá de la espectacularidad de estas aportaciones, hay una de las nuevas
características de HTML5 que pese a no ser tan visual ha supuesto un antes y un después
en el desarrollo de internet, me refiero a lo que se ha dado en llamar maquetación
semántica.[15]
39
2.1.7.1 ¿Qué es estructura semántica HTML5?
La web semántica HTML5 o esquemas semánticos HTML5 son como se conoce a la
forma de maquetar el código de tu página según el tipo de contenido que es. Esto se
refiere directamente a que se siguen ciertos patrones definidos, que sean fáciles de
entender para las máquinas. [16]
La semántica HTML es la utilidad que tienen las etiquetas. Las etiquetas se crearon para
realizar unas determinadas funciones.
2.1.7.2 Historia de la web semántica
No hace muchos años, allá en el inicio de la década de 1980, fueron muchos los que
vaticinaron un nuevo mundo. En esa visión, tal vez fundamentada en la aparición de la
informática personal, los seres humanos tendrían acceso a grandes repositorios de
información. La puerta sería la computadora, y los datos, almacenados en soportes de
gran capacidad, ofrecían nuevas posibilidades de integración.
No tardó mucho tiempo en aparecer el concepto de multimedia. Un único soporte
para la información textual y audiovisual, que permitiría la elaboración de productos
cerrados, actualizables con nuevas ediciones. En una sociedad de consumo, se trataba
de un producto más. [17]
La aparición y difusión del CD-ROM como soporte informático contribuyó a la
creación de anuarios, enciclopedias, bases de datos, aplicaciones educativas y
divulgativas, índices de revistas y todo un amplio abanico de aplicaciones que se
actualizaban de forma periódica. En estos entornos, la búsqueda y consulta de
información utilizaba un modelo predictivo y apriorístico. Los usuarios únicamente podían
acceder a la información mediante rutas de acceso más o menos delimitadas por los
diseñadores del sistema. La información podía ser localizada mediante formularios,
clasificaciones y entornos de recuperación cuya dinámica de uso y contenidos sobre los
que se operaban no variaban considerablemente.
Era un escenario en donde las consultas a las bases de datos en línea estaban
reservadas a usuarios muy específicos (generalmente investigadores) y casi siempre a
40
través de un intermediario, un documentalista. Por supuesto la búsqueda de información
se realizaba sobre información textual, generalmente sin estructura e incluso sin formato.
La introducción de Internet en todos los ámbitos de nuestra sociedad, más allá del uso
científico o académico, sólo fue cuestión de tiempo y revolucionó el panorama
anteriormente descrito.[17]
Las aplicaciones como el correo electrónico o la Web, han tomado tanto peso en
el desarrollo de contenidos digitales en línea, las redes sociales, los servicios de la banda
online o la Administración electrónica se hacen impensables sin estas herramientas.
Como consecuencia, la Web se ha convertido en un instrumento de uso cotidiano
para el intercambio de información en nuestra sociedad, llegando a superar a medios
como la televisión, y se ha constituido, junto con el papel, en uno de los medios de
publicación más importante en la sociedad actual.
Por tanto, la Web actual, ha evolucionado hacia usos que han trascendido la idea
original de Tim Berners-Lee. Ya no estamos hablando de un sistema para publicar y
comunicar resultados de experimentos y trabajos de investigación. Sobre aquella Web,
se basada en la interconexión de documentos mediante enlaces de hipertexto, se han
creado nuevas herramientas gracias al desarrollo de lenguajes de programación para la
Web y su integración con sistemas de base de datos. El concepto de Sistema de Gestión
de Contenidos plantea la Web como una plataforma universal para la creación de todo
tipo de herramientas, cuyo uso únicamente precisa del usuario un sólo software esencial:
el navegador Web. Los usuarios comenzaron a interactuar con la Web más allá de la
búsqueda y consulta de información.[17]
Las funcionalidades de creación de contenidos textuales y audiovisuales y la
comunicación entre individuos y grupos cristalizó en una nueva generación de
herramientas conocida como Web 2.0 o Web social, orientadas a facilitar la conexión
entre las personas.
El factor humano dejó de ser un elemento pasivo para convertirse en un agente
activo en la Web. La idea fundamental se centra en el establecimiento de redes o
comunidades de usuarios que trabajan con una serie de servicios basados en
41
aplicaciones Web como los blogs, los servicios de publicación de contenidos multimedia,
las redes sociales o las wikis.[17]
Se trata de un uso concreto de la Web, que fomenta la colaboración para difundir
e intercambiar información de forma rápida y sencilla. Sin embargo, hemos de tener en
cuenta que esta situación implica una serie de problemas derivados de la propia
naturaleza de una Web en la que participan los usuarios. Existen cantidades enormes de
recursos desorganizados, duplicados o desactualizados, entre los que encontrar la
información buscada termina resultando un trabajo arduo. Los motores de búsqueda
Web, aunque han mejorado en los últimos años, continúan catalogando sólo una porción
pequeña de la Web y a veces producen resultados que no son pertinentes y a menudo
inexactos o imposibles de encontrar.
Esto se debe a que la cantidad, estructura y originalidad de contenidos en la Web
no han evolucionado paralelamente a como lo han hecho los procesos de publicación de
los mismos. Existen gran cantidad de páginas duplicadas, puesto que muchos usuarios
prefieren copiar contenidos en vez de referenciarlos con enlaces de hipertexto. Multitud
de páginas hacen un uso incorrecto de metadatos HTML, distorsionando su utilidad en
los procesos de búsqueda. Tampoco es posible distinguir en todos los casos el tipo de
recurso recuperado durante la búsqueda: un documento informativo, una ficha de una
aplicación en un servicio de descarga de pago, una entrada en un foro de debate, etc.
[17]
En este contexto, los buscadores Web son incapaces en ocasiones de ofrecer
unos resultados útiles. Desde el punto de vista de la recuperación de información en la
Web se precisa el uso de metadatos, que apliquen modelos estándar para la descripción
de los recursos. Su desarrollo y uso mejoraría no solamente los buscadores Web, sino
también ampliarían los horizontes de la Web para el intercambio y procesamiento de
datos entre aplicaciones de forma automática. Hace algún tiempo que el XML ha venido
utilizándose para el intercambio de datos a fin de que estos sean interoperables a nivel
sintáctico. Sin embargo, la Web semántica plantea el uso de un modelo de datos básicos
como es el RDF que amplía la interoperabilidad a nivel semántico.
42
Además, la Web semántica se organiza en una estructura multinivel que va desde
la simple descripción de recursos mediante metadatos a la definición de ontologías y
reglas de inferencia. [17]
2.1.7.3 ¿Como funciona la web semántica?
A todos nos ha ocurrido alguna vez que al hacer una búsqueda en Internet nos han
aparecido resultados que, aunque contienen las palabras clave que hemos buscado, no
tienen nada que ver con el tipo de información en la que estamos interesados.
A través de la semántica lo que se busca es eliminar este problema, consiguiendo
que la información que se muestra al usuario se amolde lo máximo posible a lo que de
verdad está buscando. Para ello, la búsqueda se realiza no centrándose únicamente en
los parámetros buscados, sino en la semántica o significado de los mismos.[18]
2.1.7.4 Ventajas y Desventajas de la web semántica
Ventajas
Al incorporar sentido semántico a las palabras, se consigue que la información
contenida en Internet esté mucho mejor organizada, de forma que sea más sencillo
para el usuario acceder a ella.
Al dotar de contenido semántico a la información, los ordenadores estarán más
cerca de desarrollar una inteligencia artificial, al entender el lenguaje humano de
una forma mucho más completa. [18]
Desventajas
Su principal inconveniente es que dotar a todo el contenido que ya está subido a
Internet de contenido semántico, supone una tarea que puede prolongarse en el
tiempo durante años y que además es costosa de llevar a cabo.[18]
43
2.1.7.5 ¿Cómo debería de ser la web semántica?
La web semántica o web 3.0 debería ser capaz de procesar el contenido y razonarlo,
realizando deducciones lógicas a partir de ese mismo contenido, siendo capaz además
de realizar todas esas acciones de forma automática y autónoma.
Es decir, el agente debería entender lo que se le pide, comprenderlo, buscar la
información y deducir si la información que ha encontrado es acorde o no con la búsqueda
que el usuario le ha solicitado que lleve a cabo.[18]
Para que esto pueda ocurrir, es necesario estandarizar varios factores, entre ellos el
alfabeto, el lenguaje, las referencias, el formato, las anotaciones sobre significados de
las palabras, los conceptos generales y las reglas de deducción.
A día de hoy conseguir que un software sea capaz de llevar a cabo todas estas
operaciones y que lo haga además de forma automática y a gran escala, sin ninguna
intervención humana, es muy difícil, por lo que la web semántica por el momento no es
más que una mera teoría, un ideal de lo que debería ser el entorno WWW en un futuro.[18]
No obstante, aunque es cierto que algunas de las herramientas que integrarán la
web 3.0 ya están desarrolladas o en fase de desarrollo, la principal barrera que se va a
encontrar esta nueva forma de concebir Internet es la reticencia de los seres humanos.
Por un lado, porque muchas webs perderían sus ingresos por publicidad y, por otro lado,
porque para que la web pase a ser semántica, es necesario que se traduzca su contenido
a OWL de forma manual, algo a lo que los desarrolladores de páginas web no parecen
estar muy dispuestos.[18]
2.1.7.6 Principales componentes
Entre los principales componentes de la Web Semántica podemos encontrar XML, XML
Schema, RDF, RDF Schema y OWL. La descripción de OWL en inglés
“Ontology Web Language” describe las funciones y relaciones de cada componente de
la Web Semántica:
XML: Provee una sintaxis elemental para las estructuras de contenidos dentro de
documentos.
44
XML Schema: Es un lenguaje para proporcionar y restringir la estructura y el
contenido de los elementos contenidos dentro de documentos XML.
RDF: Es un lenguaje simple para expresar modelos de los datos, que refieren a
los objetos “recursos” y a sus relaciones. Un modelo de RDF-based se puede
representar en sintaxis de XML. [ 19]
RDF Schema: Es un vocabulario para describir propiedades y clases de recursos
RDF-based, con semántica para generalizar-jerarquías de las propiedades y
clases.
OWL: Es un mecanismo para desarrollar temas o vocabularios específicos en los
que podamos asociar esos recursos.
2.1.7.7 Capas de la web semántica
Unicode
Es un estándar cuyo objetivo es proporcionar el medio por el cual un texto en cualquier
forma e idioma pueda ser codificado para el uso informático. El mismo nos permite
mostrar información en cualquier idioma y con la certeza de que no aparezcan símbolos
extraños. [19]
URI
Son cadenas que permiten acceder a cualquier recurso de la Web. En la Web Semántica
las URIs son las encargadas de identificar objetos. Todos los objetos pueden ser
identificados mediante una URI. Si dos objetos cuentan con la misma URI pueden existir
colisiones. El grupo de trabajo del W3C está intentando resolver este problema.[19]
XML+NS+xmlschema
Esta es la capa más técnica de la Web Semántica. En ella se encuentran agrupadas las
diferentes tecnologías que posibilitan la comunicación entre agentes.
45
El XML (Extensible Markup Language) nos ofrece un formato común para el
intercambio de documentos, espacio de nombre (namespaces) (NS) proporciona un
método para cualificar elementos y atributos de nombres usados en documentos XML
asociándolos con espacios de nombre identificados por referencias URIs. XML Schema
es un lenguaje que permite describir la estructura y restringir el contenido de documentos
XML.[19]
RDF+rdfschemar
Está basada en la capa anterior, define el lenguaje universal con el que podemos
expresar diferentes ideas en la Web Semántica. RDF es un lenguaje que define un
modelo de datos para describir recursos mediante tripetas sujeto-predicado-objeto.
Los dos primeros serán URIs y el tercero puede ser URI o un valor literal. RDF
Schema es un vocabulario RDF que nos permite describir recursos mediante una
orientación a objetos. Esta capa no sólo ofrece una descripción de los datos, sino también
cierta información semántica.[19]
Ontology (Ontologías)
Nos permite clasificar la información. Esta capa permite extender la funcionalidad de la
Web Semántica agregando nuevas clases y propiedades para describir los recursos.
Proof (Pruebas)
Se intercambiarán “pruebas” escritas en el lenguaje unificador de la Web Semántica. Este
lenguaje posibilita las inferencias lógicas realizadas a través del uso de reglas de
inferencia.[19]
46
2.1.8 Maquetación por componentes
Se refiere a maquetar una sección independiente, que esta funcione por si sola y que su
estructura sea de tal forma fácil agregar su contenido en cualquier parte y que no interfiera
en otro lado. Un ejemplo de herramienta para trabajar por componentes es: vue, angular,
reajct.
2.1.8.1 Metodología BEM
La metodología BEM divide la interfaz de usuario en bloques independientes para crear
componentes escalables y reutilizables. BEM (Block, Element, Modifier o Bloque,
Elemento, Modificador) es una metodología ágil de desarrollo basada en componentes.
Fue creada por la empresa Yandex para desarrollar sitios en poco tiempo y con un
soporte de largo plazo.[20]
El objetivo final de BEM es dividir la interfaz de usuario en bloques independientes
para crear componentes escalables y reutilizables. Propone un estilo descriptivo para
nombrar cada una de las clases a utilizar, permitiendo así crear una estructura de código
consistente. Para lograr su objetivo, la metodología se centra en la reutilización de código.
Además, busca otorgar un mayor entendimiento hacia qué nos referimos cada vez
que construimos un nuevo proyecto. Como resultado, crea una documentación explícita
en cada nueva declaración. BEM tiene como horizonte modularizar lo máximo posible
cada uno de los bloques de código dispuesto. Se centra en tres parámetros o variables
posibles: Bloques (div, section, article, ul, ol, etc.), elementos (a, button, li, span, etc.) y
modificadores. Estos últimos se definen de acuerdo a la posterior utilización que haga el
desarrollador a cargo.[20]
Bloques: Es un contenedor donde se encontrarán los diferentes elementos. Por
ejemplo, un encabezado (header), una barra lateral (sidebar/aside) un área de contenido
principal (main) y un pie de página (footer), se consideraría cada uno como un bloque. El
bloque de elementos corresponde a la raíz de la clase y deberá ir siempre primero.
Cuando ya está definido es posible nombrar los elementos que compondrán la estructura
final y su contenido. [21]
47
HTML
Fuente: https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/
Imagen 2.6
CSS
Fuente: https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/
Imagen 2.7
Elementos: El elemento es una de las variadas piezas que compondrán la
estructura de un bloque. El bloque es el todo y los elementos son las piezas de este
bloque. De acuerdo a la metodología BEM, cada elemento se escribe después del
bloque padre, usando dos guiones bajos: [20]
HTML
Fuente: https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/
Imagen 2.8
48
CSS
Fuente: https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/
Imagen 2.9
Al convertirse en el centro de los nombres de las clases, los elementos ayudan a
entender cómo estructurar y manejar las hojas de estilos una vez que se empiece a
diseñar el proyecto. Por esto, es importante usar nombres claros y precisos.
Modificadores: El ejercicio de nombrar las clases sirve para que los elementos
puedan repetirse. Si los elementos son los mismos, no será necesario escribir nuevas
clases en otras áreas del sitio. Para modificar el estilo de un elemento específico, existen
los modificadores. Estos se usan agregando un doble guion justo después del elemento
o bloque que se quiere modificar:[21]
HTML
Fuente: https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/
Imagen 2.10
49
CSS
Fuente: https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/
Imagen 2.11
2.1.8.2 Ventajas y Desventajas de BEM
La metodología BEM se encuentra en constante evolución, pero ha demostrado su
eficiencia al establecer una buena jerarquía en el desarrollo de plataformas.[20]
Ventajas
Añade especificidad: Usa un selector único para cada regla, lo que permite
reducirla y hacer menos repeticiones.
Aumenta la independencia: Los bloques se pueden mover a cualquier parte del
documento, sin afectar los estilos.
Mejora la herencia múltiple: Se puede cambiar cualquiera de las tres partidas
sin afectar a las demás.
Permite la reutilización: Es posible reciclar ciertas áreas de código desde un
proyecto hacia otro, esto debido a la no existencia de dependencias mayores en
cuanto a la implementación de cada uno de los bloques estructurados.
Entrega simplicidad: Permite un fácil entendimiento una vez conocido el proceso
lógico sobre el cual se basa. A su vez, las convenciones a la hora de nombrar las
clases permiten tener un control absoluto al saber a qué, quién y hacia dónde
hacemos referencia dentro de una estructura.
Desventajas
Las convenciones pueden ser muy largas.
A algunas personas les puede tomar tiempo aprender la metodología.
50
El sistema de organización puede ser difícil de implementar en proyectos
pequeños.[20]
2.1.9 Reglas de Maquetación
Como suele ocurrir con las cosas de la vida, a la hora de maquetar una página hay que
tener en cuenta una serie de normas. Aunque estas reglas no son estrictas, ayudan a
diseñar las páginas de una forma ordenada y clara. Hay que tener en cuenta que la
página la van a leer personas y, como tales, tienen una psicología que en cierto modo
obedece una conducta concreta. En fin, que estas reglas sirven para entender por qué
se diseñan las páginas de una u otra manera.[22]
Lo más importante es el equilibrio. Una página no puede tener todas las fotos a un
lado y todo el texto en el extremo opuesto, sino que debe haber un equilibrio entre los
elementos que es esparcen en una hoja. De este modo se facilita la lectura. [22]
Los elementos, y esto también es importante, deben tener distintos tamaños. Así,
lo más importante debe ponerse más grande que lo que es menos significativo. Esa es
una manera de llamar la atención del lector sobre lo que nosotros consideramos más
relevante. Por eso, entre las fotos debe haber una más grande, y ésta tiene que estar
acompañada de un gran titular. Con lo anterior, se distribuye el peso en la hoja. Ese peso
no cae de un lado, sino que, al poner elementos visuales como fotografías en lados
opuestos, se crea una balanza de contenido en el interior de la página.[22]
El texto, en cambio, siempre tiene que ser del mismo tamaño (salvo en titulares,
sumarios o ladillos). La regla que hay que aplicar sobre el texto es la de romper la masa
gris que forma dentro de la página. Esto se consigue con los sumarios o dejando espacios
en blanco o intercalando las fotografías en el texto. Así la lectura no se hace pesada sino
amena.
Aunque hay muchas más pautas a la hora de diseñar una hoja, esas son las más
básicas e importantes.[22]
51
2.1.10 PHP
PHP (acrónimo recursivo de PHP: Hypertext Pre-processor) es un lenguaje de código
abierto muy popular especialmente adecuado para el desarrollo web y que puede ser
incrustado en HTML [23].
Es desarrollado hoy en día por The PHP Group aunque carece de una normativa
formal. La Free Software Foundation, por lo tanto, considera la licencia PHP como parte
del software libre.
El lenguaje PHP suele procesarse directamente en el servidor, aunque también
puede usarse a través de software capaz de ejecutar comandos y para el desarrollo de
otra clase de programas.
Una de las ventajas de PHP es su parecido con lenguajes de programación del
tipo estructurado (como Perl y C), lo que ayuda a que los programadores puedan
desarrollar aplicaciones complejas en poco tiempo. [23
Logo de PHP
Fuente: https://es.wikipedia.org/wiki/PHP#/media/File:PHP-logo.svg
Imagen 2.12
2.1.10.1 Antecedentes
PHP tal y como se conoce hoy en día es en realidad el sucesor de un producto llamado
PHP/FI. Creado en 1994 por Rasmus Lerdorf, la primera encarnación de PHP era un
conjunto simple de ficheros binarios Common Gateway Interface (CGI) escritos en el
52
lenguaje de programación C. Originalmente utilizado para rastrear visitas de su
currículum online, llamó al conjunto de scripts “Personal Home Page Tools”, más
frecuentemente referenciado como “PHP Tools”. Con el paso del tiempo se quiso más
funcionalidad, y Rasmus reescribió PHP Tools, produciendo una implementación más
grande y rica. Este nuevo modelo fue capaz de interaccionar con bases de datos, y mucho
más, proporcionando un entorno de trabajo sobre cuyos usuarios podían desarrollar
aplicaciones web dinámicas sencillas tales como libros de visitas. En junio de 1995,
Rasmus» publicó el código fuente de PHP Tools, lo que permitió a los desarrolladores
usarlo como considerasen apropiado. Esto también permitió -y animó- a los usuarios a
proporcionar soluciones a los errores del código, y generalmente a mejorarlo.[24]
Rasmus Lerdorf
Fuente: https://www.flickr.com/photos/arnaudlimbourg/5165138896
Fotografía 2.1
En septiembre de ese mismo año, Rasmus amplió PHP y -por un corto periodo de
tiempo- abandonó el nombre de PHP. Ahora, refiriéndose a las herramientas como FI
(abreviatura de “Forms Interpreter”), la nueva implementación incluía algunas de las
funciones básicas de PHP tal y como la conocemos hoy. Tenía variables como las de
Perl, interpretación automática de variables de formulario y sintaxis incrustada HTML. La
53
sintaxis por sí misma era similar a la de Perl, aunque mucho más limitada, simple y algo
inconsistente. De hecho, para embeber el código en un fichero HTML, los desarrolladores
tenían que usar comentarios de HTML. Aunque este método no era completamente bien
recibido, FI continuó gozando de expansión y aceptación como una herramienta CGI ---
pero todavía no completamente como lenguaje. Sin embargo, esto comenzó a cambiar
al mes siguiente; en octubre de 1995 Rasmus publicó una versión nueva del código.
Recordando el nombre PHP, ahora era llamado (resumidamente) “Personal Home Page
Construction Kit,” y fue la primera versión que presumía de ser, en aquel momento,
considerada como una interfaz de scripts avanzada. El lenguaje fue deliberadamente
diseñado para asemejarse a C en estructura, haciéndolo una adopción sencilla para
desarrolladores familiarizados con C, Perl, y lenguajes similares. Habiendo sido así
bastante limitado a sistemas UNIX y compatibles con POSIX, el potencial para una
implementación de Windows NT estaba siendo explorada. [25]
El código fue completamente rehecho de nuevo, y en abril de 1996, combinando
los nombres de versiones anteriores, Rasmus introdujo PHP/FI. Esta implementación de
segunda generación comenzó realmente a desarrollar PHP desde un conjunto de
herramientas dentro de un lenguaje de programación de derecho propio. Incluía soporte
interno para DBM, 53oogl, y bases de datos Postgres95, cookies, soporte para funciones
definidas por el usuario, y mucho más. Ese mes de junio, PHP/FI brindó una versión 2.0.
Sin embargo, un interesante hecho sobre esto, es que sólo había una única versión
completa de PHP 2.0. Cuando finalmente pasó de la versión beta en noviembre de 1997,
el motor de análisis subyacente ya estaba siendo reescrito por completo. [25]
Aunque vivió una corta vida de desarrollo, continuó gozando de un crecimiento de
popularidad en el aún joven mundo del desarrollo. En 1997 y 1998, PHP/FI tenía un culto
de varios miles de usuarios en todo el mundo. Una encuesta de Netcraft en mayo de 1998
indicó que cerca de 60,000 dominios reportaron que tenían cabeceras que contenían
“PHP”, indicando en efecto que el servidor host lo tenía instalado. Este número se
correspondía con aproximadamente el 1% de todos los dominios de Internet del
54
momento. A pesar de estas impresionantes cifras, la maduración de PHP/FI estaba
condenada por limitaciones; mientras había varios contribuidores menores, aún era
desarrollado principalmente por un individuo [25].
2.1.10.2 Ejemplos de sintaxis
Mezcla de los modos HTML y PHP
Fuente: https://www.flickr.com/photos/arnaudlimbourg/5165138896
Ejemplo 2.1
Donde un resultado del script podría ser:
<h3>strpos() debe haber devuelto no falso</h3>
<p>Está usando Internet Explorer</p>
En vez de usar una sentencia echo de PHP para mostrar algo, salimos del modo
PHP y enviamos solamente HTML. Este es un punto muy importante y potente que se ha
de observar aquí, y es que la fluidez lógica del script permanece intacta. Solamente uno
55
de los bloques HTML terminará siendo enviado al navegador dependiendo del resultado
de strpos(). En otras palabras, depende de si el string MSIE fue encontrada o no [26].
Mostrar información de nuestro formulario
Fuente: http://php.net/manual/es/tutorial.forms.php#example-8
Ejemplo 2.2
2.1.11 Frameworks
Un Framework es un entorno o ambiente de trabajo también conocido como marco de
trabajo para desarrollo; dependiendo del lenguaje normalmente integra componentes que
facilitan el desarrollo de aplicaciones como el soporte de programa, bibliotecas, plantillas
y más. [27]
La mayoría de los frameworks ofrecen una estandarización y/o normalización en
la estructuración de sus componentes y métodos, esto implica que se recomiende o en
otros casos se imponga una programación siguiendo sus normas y con ello se aproveche
al máximo la utilidad de sus herramientas de desarrollo.
Podría resumirse como el entorno pensado para hacer más sencilla la
programación de cualquier aplicación o herramienta actual. Este sistema plantea varias
ventajas para los programadores, ya que automatiza muchos procesos y además facilita
el conjunto de la programación. Es útil, por ejemplo, para evitar el tener que repetir código
56
para realizar funciones habituales en un rango de herramientas, como puede ser el
acceder a bases de datos o realizar llamadas a Internet.[28]
2.1.12 Codeigniter
Codeigniter es un framework para el desarrollo de aplicaciones en php que utiliza el
Modelo Vista Controlador (MVC). Permite a los programadores Web mejorar la forma de
trabajar y hacerlo a mayor velocidad.
Al igual que cualquier framework está pensado para gente que tiene un dominio,
al menos medio, del lenguaje de programación PHP. Siempre hay que controlar PHP lo
mejor posible para empezar a trabajar de forma eficiente con este framework (o cualquier
otro) [29]
Logo Codeigniter
Fuente: https://cdn.freebiesupply.com/logos/large/2x/56oogle56iter-logo-png-transparent.png
Imagen 2.13
El Modelo Vista Controlador es un estilo de programación en el que la aplicación
está dividida en 3 capas:
Modelo: es dónde se procesa y obtienen los datos, la conexión con la database
(DB).
57
Vista: presenta los datos en pantalla, es donde va el código HTML.
Controlador: controla los datos, dicho de forma rápida obtiene datos de un
modelo, los procesa, y se los pasa a la vista.
Ejemplificación de las transacciones de datos en Codeigniter
Fuente: http://www.adwe.es/57oogle/57oogle57iter-framework-php-desarrollo-aplicaciones-web
Imagen 2.14
2.1.12.1 Ventajas de utilizar Codeigniter
Las páginas se procesan más rápido, el núcleo de Codeigniter es bastante ligero.
Es sencillo de instalar, basta con subir los archivos al ftp y tocar un archivo de
configuración para definir el acceso a la db.
Reutilización de código, desarrollo ágil.
Existe abundante documentación en la red.
Facilidad de edición del código ya creado.
Facilidad para crear nuevos módulos, páginas o funcionalidades.
Acceso a librerías públicas y clases. Entre otras, hay librerías para el login, paginado,
calendarios, fechas, etc.
58
Estandarización del código. Fundamental cuando hay que tocar código hecho por
otra persona o cuando trabaja más de una persona en un mismo proyecto.
URLs amigables con SEO. Hoy en día creo que nadie duda de la importancia del
posicionamiento web.
Separación de la lógica y arquitectura de la web, el MVC.
Codeigniter es bastante menos rígido que otros frameworks. Define una manera de
trabajar, pero podemos seguirla o no (esto puede convertirse en un inconveniente
también)
Cualquier servidor que soporte PHP y MySQL sirve para Codeigniter.
Codeigniter se encuentra bajo una licencia open source, es código libre.
2.1.13 Base de datos MySQL
MySQL es un sistema de gestión de base de datos relacional (RDBMS) de código abierto,
basado en lenguaje de consulta estructurado (SQL).
Fuente: https://www.definicionabc.com/tecnologia/mysql.php
Imagen 2.15
MySQL se ejecuta en prácticamente todas las plataformas, incluyendo Linux, UNIX
y Windows. A pesar de que se puede utilizar en una amplia gama de aplicaciones, MySQL
se asocia más con las aplicaciones basadas en la web y la publicación en línea y es un
componente importante de una pila empresarial de código abierto llamado LAMP. [30]
59
LAMP es una plataforma de desarrollo web que utiliza Linux como sistema
operativo, Apache como servidor web, MySQL como sistema de gestión de base de datos
relacional y PHP como lenguaje de programación orientado a objetos (a veces, Perl o
Python se utiliza en lugar de PHP). [30]
MySQL, que fue concebido originalmente por la compañía sueca MySQL AB, fue
adquirida por Oracle en 2008. Los desarrolladores todavía pueden usar MySQL bajo la
Licencia Pública General de GNU (GPL), pero las empresas deben obtener una licencia
comercial de Oracle. [30]
2.1.13.1 ¿Para qué se utiliza MySQL?
El gestor de base de datos es muy utilizado en desarrollo web, ya que permite a los
desarrolladores y diseñadores, realizar cambios en sus sitios de manera simple, con tan
sólo cambiar un archivo, evitando tener que modificar todo el código web. [31]
Esto se debe a que MySQL, trabaja con un sistema centralizado de gestión de
datos, que permite realizar cambios en un solo archivo y que se ejecuta en toda la
estructura de datos que se comparte en la red. Además, permite incluir noticias e
información rápidamente en un sitio web, utilizando un simple formulario, sin tener que
tocar el código del websites. [31]
Cuando se combina con PHP, se convierte en una mezcla poderosa, que siempre
es tomada en cuenta para realizar aplicaciones cliente/servidor, que requieran el uso de
una base de datos rápida, segura y potente. [31]
MySQL, también ofrece la posibilidad de realizar programas o aplicaciones que
requieran acceso a plataformas de base de datos rápidas. [31]
60
Base de datos en MySQL
Fuente: https://culturacion.com/que-es-y-para-que-sirve-mysql/
Imagen 2.16
2.1.14 Front-End y Back-End
Front-End
El Front End es la parte de una web que conecta e interactúa con los usuarios que la
visitan. Es la parte visible, la que muestra el diseño, los contenidos y la que permite a los
visitantes navegar por las diferentes páginas mientras lo deseen. Es una de las dos
mitades en las que se divide la estructura de cualquier página web. [32]
Junto a esta se encuentra el Back End, que es el polo completamente opuesto, la
capa que accede a datos y software en general para su comunicación. Ambas se reúnen
en cualquier site que visite una persona y son las que, trabajando, hacen que funcione
en todo momento tal y como lo hace.
Esta parte es la que engloba y muestra todo el trabajo de diseño web y, por lo
general, reúne en su interior hasta 3 lenguajes de programación diferentes: HTML, CSS
y JavaScript. Cada uno orientado a determinados fines en concreto, se suman para
61
conseguir el resultado final que aparece por la pantalla de cada usuario que entra en una
web, sea cual sea.
Se podría decir que el Front End es como la máscara de una página, pero en
realidad va más allá de eso. Es lo que debe mostrar la identidad corporativa de una
compañía dentro de Internet, la parte que puede atraer o alejar al consumidor cuando
este accede a la página. De ahí que sea tan importante y requiera de tanto esfuerzo. [32]
2.1.14.1 ¿Para qué sirve el Front-End?
El Front End sirve para que un usuario pueda entrar a una web cualquiera, ya que es la
parte que este ve y con la que este interactúa al acceder. Debe estar diseñado para ser
fácilmente utilizable y también muy atractivo. De hecho, de su usabilidad y su estética
depende la imagen que se transmita de la firma en cuestión en el plano digital.[33]
Si consigue una buena experiencia de usuario, puede hacer que este se quede
más tiempo e incluso que traiga a otros, algo que da más visibilidad a cualquier negocio
y, por supuesto, ayuda en la generación de leads.[33]
Back-End
El Back End es la parte trasera de cualquier página web. Se trata de todo el conjunto del
desarrollo que se encarga de que una página funcione y de que lo haga como lo hace,
pero que al mismo tiempo es totalmente invisible para el usuario, que solo ve lo visual y
gráfico.
Su contrapartida es el Front End, que es la mitad con la que interactúa cada
visitante en una web. Ambas, juntas dan forma a todo el conjunto que construye una
página web en la actualidad y lo que permite que, además de la usabilidad, también
pueda hablarse de rendimiento y de comunicación en su interior. [34]
Podemos encontrar muchos tipos de Back Ends diferentes en la actualidad. Por
ejemplo, cualquier página hecha con WordPress, que además lo utilice como CMS, tiene
en él a gran parte de su back End, ya que es lo que se encarga del lado administrativo,
62
de permitir que se elaboren contenidos y, al mismo tiempo, que se gestionen usuarios y
se lleven a cabo otras tareas de carácter interno. [34]
Aquí encontramos lenguajes de desarrollo bastante diferentes a los anteriores,
como pueden ser PHP, Java o .Net. En el Back End se llevan a cabo tareas como la
lógica de la web, las conexiones con bases de datos en el servidor, el uso de librerías o
incluso las operaciones llevadas a cabo por las distintas funciones disponibles.
2.1.14.2 ¿Para qué sirve el Back-End?
Sirve para que el portal funcione como lo hace, que permita desde publicar contenidos
hasta habilitar un botón para que el usuario se registre. En función de cómo esté
construido, puede hacer que una web sea más rápida o no, que sea más completa o
menos, que el usuario quede más o menos satisfecho. [33]
El Back End es una parte fundamental de cualquier web, aunque debe estar
siempre junto con el Front End.
Debido a esto, es algo que influye incluso a ojos de Google y el posicionamiento
web. Tiempos de carga elevados no son buenos para el buscador, y mucho menos la
presencia de código inútil o que realiza operaciones fallidas. Cuidar esta parte trasera de
una web es crucial para el crecimiento de una empresa en internet.[33]
2.1.15 Metodología SCRUM
2.1.15.1 ¿Qué es la metodología SCRUM?
Scrum es una forma de trabajo de la metodología Ágil mediante la cual a través de
prácticas colaborativas se minimizan todo tipo de riesgos en la elaboración de un
proyecto. Ésta tiene su origen en equipos de alta productividad.
En Scrum no se realiza una entrega final del proyecto, sino que se van haciendo
de forma regular entregas parciales, de forma que esto es lo que más beneficia al receptor
del proyecto. Por ello, Scrum está especialmente indicado para entornos complejos,
63
donde los cambios se producen como mucha frecuencia y sobre la marcha y donde la
rapidez, la flexibilidad, la adaptabilidad y la competencia juegan un papel fundamental.
2.1.15.2 ¿Cómo funciona?
El procedimiento en Scrum
Scrum se ejecuta en bloques temporales que son cortos y periódicos, denominados
Sprints, que por lo general de entre 2 hasta 4 semanas, que es el plazo para feedback y
reflexión.
Cada Sprint es una entidad en sí misma, esto es, proporciona un resultado
completo, una variación del producto final que ha de poder ser entregado al cliente con
el menor esfuerzo posible cuando éste lo solicite.
El proceso tiene como punto de partida una lista de objetivos/requisitos que
conforman el plan de proyecto. Es el cliente del proyecto el que prioriza estos objetivos
teniendo en cuenta un balance del valor y el coste de los mismos, es así como se
determinan las iteraciones y consecuentes entregas.
El Sprint
El primer día del Sprint, éste se divide en dos partes:
La selección de requisitos (con una duración de 4 horas máximo): el cliente
determina la lista de requisitos, los cuales son aceptados por el equipo para realizar la
iteración.
La planificación de la iteración (con una duración de 4 horas máximo): el equipo
elabora la lista de tareas a realizar en la iteración para la consecución de los requisitos a
los que se ha comprometido.
Cada día el equipo realiza un Sprint Meeting (con una duración máxima de 15
minutos): en ella cada miembro del equipo realiza una supervisión del trabajo realizado
por los demás para ver si es necesario realizar alguna adaptación que permita cumplir
con el compromiso adquirido.
64
En el Sprint Meeting responde a las siguientes preguntas:
¿Qué he hecho desde la última reunión de sincronización?
¿Qué voy a hacer a partir de este momento?
¿Qué impedimentos tengo o voy a tener?
Durante el Sprint, el Scrum Master se encarga de eliminar los obstáculos que el
equipo no pueda resolver por sí mismo y protege al equipo de injerencias externas que
perturben su compromiso o su productividad.
El último día del Sprint, se realiza una revisión, que tiene dos partes:
Demostración (4 horas máximo): el equipo presenta los requisitos completados de
la iteración, en forma de producto mejorado, realizado con el mínimo esfuerzo. El cliente
realizará un examen objetivo de la iteración, ya desde la primera vez, determinando un
replanteamiento del proyecto.
Retrospectiva (4 horas máximo): el equipo determina y presenta cuáles son los
obstáculos que se ha ido encontrando, siempre con el objetivo de mejorar la
productividad. El Scrum Master se encargará de eliminar dichos obstáculos.
Beneficios de Scrum
Los beneficios que aporta Scrum son, entre otros, los siguientes:
El cumplimiento de las expectativas por parte del cliente: de manera regular, en las demos
de Sprint el Product Owner comprueba que, efectivamente, las expectativas se han
cumplido y proporciona un feedback al cliente.
Flexibilidad ante los cambios: la metodología está pensada para adaptarse a los
cambios, ya sean estos requerimientos del cliente o modificaciones del mercado.
Reducción del Time To Market: el cliente puede empezar a utilizar el producto tras
las primeras iteraciones, con los componentes más importantes, no teniendo que esperar
hasta que se alcance el producto final.
65
Mayor productividad: al equipo se le otorga una autonomía para organizarse, lo
que permite mayor libertad orientada a la productividad sin perderse en protocolos
inservibles o farragosa burocracia.
66
Capítulo 3
Diseño y Desarrollo
67
3.1 Diseño
Considerando la naturaleza en la forma de trabajo de la mayoría de las organizaciones
y/o empresas, se manifiesta el interés de la coordinación entre las actividades de cada
área existente dentro de la compañía, esto implica considerar el esfuerzo en tiempo, así
como la complejidad de trabajo por cada departamento.
Teniendo en cuenta que las áreas más comunes en una empresa enfocada al
desarrollo web son las que se enfocan al diseño, al maquetado (generalizado como Front-
End) y a equipos enfocados a la lógica denominada Back-End. En grandes rasgos, estos
son los 3 principales grupos con los cuales se lleva a cabo del desarrollo de sitios web,
cabe destacar que, de acuerdo al tamaño de la compañía desarrolladora, estos grupos
de equipos se pueden dividir en diferentes departamentos.
Para llevar un control adecuado entre las actividades de estos 3 principales
grupos, se suelen implementar metodologías agiles tales como SCRUM, ya que esta
metodología fomenta el continuo seguimiento al proyecto desde su inicio hasta su cierre
satisfactorio, el cual se logra cuando se alcanzan y/o superan las expectativas de los
clientes.
Las actividades entre los equipos de trabajo tienden a iniciar a la par, atendiendo
puntos específicos en donde ningún área depende directa o necesariamente de otra, con
esto se logra dar un avance significativo.
Al aplicar SCRUM se mejoran las posibilidades de un continuo trabajo entre todas
las áreas, ya que todas las actividades fueron analizadas y organizadas.
Cuando nos enfocamos al equipo de Front-End quienes se encargan de la
maquetación, se depende del resultado del equipo de diseño para aplicar este mismo al
entorno web, donde se involucran metodologías como BEM para mantener una estructura
modular e independiente en lo que se refiere a las etiquetas HTML y hojas de estilo.
68
3.2 Desarrollo
La maquetación semántica pretende ofrecer una estandarización de contenido en los
módulos para que estos se diferencien del resto del sitio.
3.2.1 Herramientas de desarrollo
Para el ejemplo que se mostrara se utilizaron las siguientes herramientas:
Codeigniter: Codeigniter es un entorno de desarrollo abierto que permite crear
webs dinámicas con PHP. Su principal objetivo es ayudar a que los desarrolladores,
puedan realizar proyectos mucho más rápido que creando toda la estructura desde cero,
proveyendo un rico juego de librerías para tareas comúnmente necesarias, así como una
interface simple y estructura lógica para acceder a esas librerías. Permite enfocarse
creativamente en su proyecto minimizando la cantidad de código necesaria para una
tarea dada.
JQUERY: jQuery nos permite agregar efectos y funcionalidades complejas a
nuestro sitio web, como, por ejemplo: galerías de fotos dinámicas y elegantes, validación
de formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra página
y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad que nos
brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la
programación.
HTML: HTML es un lenguaje de marcado descriptivo que se escribe en forma de
etiquetas para definir la estructura de una página web y su contenido como texto,
imágenes, entre otros, de modo que HTML es el encargado de describir (hasta cierto
punto) la apariencia que tendrá la página web.
Esta herramienta sirve para describir la estructura básica de una página y
organizar la forma en que se mostrará su contenido, además de que HTML permite incluir
enlaces (links) hacia otras páginas o documentos.
CSS: Define el estilo y el aspecto de un documento que se ha escrito a través de
un lenguaje. Generalmente, cada una de las reglas CSS que se emplean están
69
compuestas por una serie de propiedades, o properties, que poseen valores con los que
se indica la presentación de todo el contenido dictado en HTML; y, por otra parte,
selectores con los que se indican qué elementos se verán afectados por dichas
propiedades y sus valores.
Todo este conjunto es el que conforma los archivos que se han de indicar a los
navegadores para determinar la apariencia de las páginas web. No obstante, lo
complicado de su manejo y la necesidad de aprender nociones de programación son algo
que suele llevar a muchos a confiar en plantillas predeterminadas u otras soluciones
mucho más cómodas que hacen estas tareas infinitamente más sencillas, aunque
renunciando a la total personalización. De etiquetas, como HTML.
BOOTSTRAP: Se usará para agilizar el diseño y como herramienta para hacer el
sitio responsivo. Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de
crear interfaces web, los diseños creados con Bootstrap son simples, limpios e intuitivos,
esto le da agilidad a la hora de cargar y al adaptarse a otros dispositivos. El Framework
trae varios elementos con estilos predefinidos fáciles de configurar: Botones, Menús
desplegables, Formularios incluyendo todos sus elementos e integración jQuery para
ofrecer ventanas y tooltips dinámicos.
MYSQL: Es un sistema de gestión de bases de datos que cuenta con una doble
licencia. Por una parte, es de código abierto, pero por otra, cuenta con una versión
comercial gestionada por la compañía Oracle. Actualmente, es la base de datos de código
abierto más famosa y utilizada en el mundo entero.
Esta herramienta la utilizaremos para almacenar y administrar datos en bases de
datos relacionales utilizando de entre los diferentes artilugios con los que cuenta con
tablas, vistas, procedimientos almacenados, funciones, etc.
70
3.2.2 Preparación de framework
Codeigniter
En este punto se considera que ya se cuenta con XAMPP instalado en su
ordenador.
Primeramente, se debe acceder a la página oficial de Codeigniter para descargar la
estructura de archivos y directorios que se requieren para trabajar.
Descarga de directorios y archivos de Codeigniter
Fuente: del autor
Imagen 3.1
Una vez descargado Codeigniter, se debe acceder al directorio htdocs ubicado en la ruta
donde se instaló XAMPP, para este caso la ruta es: c:/xampp/htdocs/, se debe crear una
carpeta con el nombre de su proyecto (sin usar espacios) dentro del directorio htdocs (en
este caso la carpeta del proyecto será llamada TesinaEjemplo), posteriormente, después
de crear la carpeta de su proyecto, dentro de ella se deben agregar los archivos
descargados de Codeigniter
71
Estructura del proyecto TesinaEjemplo
Fuente: del autor
Imagen 3.2
. Para concluir con la preparación del proyecto, se deben configurar los siguientes
archivos:
Config.php (ubicado en: TesinaEjemplo/Application/config/config.php).
Database.php (ubicado en: TesinaEjemplo /Application/config/database.php).
routes.php (ubicado en: TesinaEjemplo /Application/config/routes.php).
Para el archivo config.php se editará la ruta base del proyecto, dicha ruta será la principal
con la que se interactuará con los archivos utilizados durante todo el desarrollo.
Se debe localizar la variable $config[‘base_url’] en la cual se modificará con la dirección
de su proyecto, en este caso es un proyecto local montado en XAMPP, por lo que la ruta
será: http://tesina.com.
Dicho lo anterior, el resultado de la modificación del archivo será:
$config[‘base_url’] = “http://tesina.com/”;
72
Para el archivo database.php se deben realizar las siguientes modificaciones:
hostname ruta donde se encuentra la base de datos, en este caso es local
mediante XAMPP, por lo cual es localhost.
Username usuario con el cual daremos acceso a la base de datos (se
recomienda no ser root), en este caso lo es por facilitar la explicación.
Password contraseña del usuario (en este caso root).
Database nombre de la base de datos que se usara en el proyecto.
Configuración del archivo database.php
Fuente: del autor
Imagen 3.3
Por último, en el archivo routes.php se debe localizar la variable
$route[‘default_controller’] en la cual se asignará el nombre del controlador principal el
cual será llamado cuando se ingrese a la página: tesina.com
Dicho lo anterior, el resultado de la modificación será:
$route[‘default_controller’] = “Inicio”;
73
JQUERY
Luego de realizar la búsqueda y comparar los diferentes demos, elegimos el plugin que
queremos instalar en nuestro sitio y descargamos los archivos que lo componen.
Dependiendo de la complejidad, algunos plugins están compuestos por un solo archivo
.js como por ejemplo el deslizamiento del scroll y otros se componen de un grupo de
archivos relacionados entre sí: html, css, js e imágenes con es el caso de una galería de
fotos.
Cada plugin tiene sus instrucciones de instalación propias, escritas por su autor,
pero vamos enumerar los puntos que hay que tener en cuenta durante el proceso:
4) Librería Jquery
Todos los plugins de Jquery necesitan la librería de Jquery para funcionar. La
librería es un archivo .js que se puede descargar desde el sitio oficial: https://jquery.com/
colocar en una carpeta js y luego vincular con una etiqueta <script>, por ejemplo:
Ese vínculo conviene colocarlo dentro del body y hacia el final del HTML para no
demorar la carga de los contenidos. Si descargamos el archivo y lo vinculamos de esa
manera, debemos subir el archivo a nuestro hosting. Otra forma de vincular la librería es
utilizando el servidor de Google. De esta manera no necesitamos descargarla ni subirla
a nuestro servidor. En ese caso, el código es el mismo, pero con ruta absoluta:
<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></scrip
t>
La página donde Google ofrece los vínculos a diferentes recursos es la siguiente:
https://developers.google.com/speed/libraries/#jquery
74
Los archivos.min son archivos que están optimizados (con el código comprimido)
y no son editables, se usan en producción cuando se considera que no es necesario
hacerle modificaciones. La ventaja es que son más livianos y por lo tanto cargan más
rápido.
2) Archivo .js del plugin
Este es el archivo principal del plugin y se obtiene descargando del sitio.
Habitualmente el nombre del archivo coincide con el nombre del plugin, por ejemplo:
<script src=”js/responsiveslides.min.js”></script>
Hay que tener en cuenta que si copiamos este código de las instrucciones de
instalación tenemos que chequear las rutas de los archivos, especialmente el nombre de
las carpetas.
3) Estructura HTML
En algunos casos las instrucciones del plugin sugieren una estructura determinada en
HTML, por ejemplo, que una galería de fotos esté resuelta con listas o con divs o que un
elemento sea identificado con class o con ID. Si en el momento de instalar el plugin ya
tenemos escrito nuestro HTML, es conveniente adaptarlo a la estructura que sugiere el
plugin para asegurarnos de que funcione y no tener que modificar otros elementos como
reglas CSS.
4) Función
La función es un bloque de código JavaScript que contiene instrucciones que necesita el
plugin para ejecutarse. Se escribe dentro del body entre las etiquetas <script></script>.
Puede ir inmediatamente debajo de la estructura HTML del plugin o antes de que cierre
la etiqueta body. Si es posible es mejor colocarla hacia el final del documento para que
la descarga de la página sea más rápida.
<script>
$(document).ready(function() {
$(“#owl”).owlCarousel({
75
autoPlay: 3000,
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
</script>
BOOTSTRAP
Para la instalación de Bootstrap 4 debemos de ir a su página oficial
(https://getbootstrap.com) y una vez allí tenemos la opción o de descargar la versión
actual o de utilizar el CDN, ya es cuestión de como queramos que este en nuestros
proyecto.
En el CDN, pero se pueden descargar los archivos js y css compilados y enlazarlos
como archivos normales en el head de nuestra web. Si queremos usar el CDN solo
tenemos que añadir las siguientes etiquetas en nuestro código: <!--Introducir el css-->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
">
<!--Introducir el javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"><
/script>
MYSQL (GESTOR DE BASE DE DATOS)
Por último, se instalará MySQL que nos ayudará para manejar nuestra base de datos.
La instalación de MySQL es muy similar a la instalación de cualquier otra
aplicación, solamente se requiere descargar el ejecutable, iniciarlo y aceptar las
condiciones, avanzar entre los pasos, definir el puerto dedicado a MySQL (por defecto es
3306).
76
3.3 Propuesta de ejemplo (Módulo Agenda)
Para la propuesta de ejemplo se desarrollará una página web sencilla la cual consiste en
una agenda que permitirá crear grupos y contactos, así como agregar contactos a algún
grupo.
En otras palabras, la página web de la agenda contendrá tres de las principales
funciones básicas de un CRUD (Create, Read, Update and Delete) las cuales son: Crear,
Leer y Eliminar.
3.4 Diseño de base de datos.
Usando un gestor de base de datos (para este caso SQLyog) se creará la base de datos
llamada tesina, la cual contendrá una tabla llamada contactos y algunos atributos como
lo será un ID, el nombre de contacto, apellido y teléfono.
Debido a que se está trabajando con XAMPP, se deben iniciar los servicios de apache y
MySQL.
Tabla de contactos creada en la base de datos tesina
Fuente: del autor
Imagen 3.4
77
3.5 Estructurado de directorios
Una vez cargado y configurado el proyecto de codeigniter, se procederá a organizar, así
como estandarizar el estructurado de directorios (carpetas), esto es con el fin de que
resulte más práctico el identificar de contenidos debido a que estos son formados en base
un criterio en común.
Los directorios más utilizados durante el desarrollo serán: controllers, models,
assets y views, estos serán implementados con una lógica de modelo vista controlador
(MVC).
Donde cada componente tendrá su propio directorio en el cual se alojarán los
contenidos que se relacionan a dicho componente, la naturaleza de estos directorios es
que llevaran por nombre el objetivo de sí mismos.
Directorio del proyecto
Fuente: del autor
Imagen 3.5
78
Ejemplo:
Para el módulo de contacto, existirá un directorio dentro de las vistas el cual llevara
por nombre “Contactos” donde se alojarán todos los archivos que tengan un objetivo
enfocado a los contactos como, por ejemplo, la vista para agregar nuevos contactos, las
listas de contactos, entre otros.
3.6 Creación de estructura base para el módulo agenda empleando la
maquetación semántica.
Para hacer la estructura base del ejemplo de la agenda se creó un archivo struct.php,
este archivo cargara todas las herramientas esenciales para desplegar los contenidos del
proyecto.
El objetivo principal del archivo struct.php es comportarse como un contenedor
padre que servirá de apoyo para el resto de elementos que formaran parte del universo
del proyecto, de esta manera resultará más sencillo el reutilizar las herramientas de uso
genera, evitando la repetición innecesaria de contenido.
Cabe mencionar que para la estructura base se seccionaran los contenidos de
acuerdo a su nivel estructural, esto quiere decir que existirá un archivo el cual se
encargara de contener la cabecera del proyecto, así como todo lo esencial de sí misma,
así como un archivo específico enfocado al footer.
De acuerdo al estructurado de directorios, estos archivos principales y esenciales
serán alojados en la siguiente ruta: views/helpers/*. En esta carpeta (helpers) es donde
se alojará el archivo struct.php
79
Archivo struct.php
Fuente: del autor
Imagen 3.6
3.7 Creación del módulo de contactos.
Los componentes del módulo de contactos, serán agrupados según cuanta
independencia tengan del resto de contenidos que formen parte de los contactos.
Esto quiere decir que se tendrá un archivo dedicado solo a mostrar el listado de
contactos, otro archivo dedicado solamente a gestionar los detalles de los contactos, ya
sea para crear un nuevo contacto o leer uno existente.
80
Archivo agregar_contactos.php
Fuente: del autor
Imagen 3.7
Archivo lista_contactos.php
Fuente: del autor
Imagen 3.8
81
Debido a que el listado de contactos es empleado en diferentes secciones, este
resultara dividido de tal forma que se permita la independencia del componente para listar
a los contactos. Permitiendo utilizar el mismo componente para mostrar diferentes listas
de acuerdo a las necesidades.
Archivo tabla_contactos.php
Fuente: del autor
Imagen 3.9
3.8 Creación del módulo de grupos.
Respetando la estandarización adoptada, para el caso del módulo de grupos no habrá
una excepción, este también será organizado y estructurado de acuerdo a los objetivos
específicos o grupales de su naturaleza.
82
Archivo add_grupos.php
Fuente: del autor
Imagen 3.10
Para este ejemplo, el módulo de grupos tendrá como objetivos el mostrar el listado
de grupos existentes, por lo que existirá un archivo dedicado a gestionar la lista de
grupos, así como también existirá un archivo enfocado a mostrar los detalles de un grupo
incluyendo la lista de los contactos existentes en un grupo específico.
Archivo view_grupos.php
Fuente: del autor
Imagen 3.11
83
Archivo add_grupos.php
Fuente: del autor
Imagen 3.12
Creación de componente para la gestión de grupos y contactos (menú).
Como se mencionó en el punto de la estructura base para el proyecto (struct.php) existirá
un apartado dedicado al almacenamiento y la gestión del menú principal el cual permitirá
navegar entre las dos listas existentes (contactos y grupos). Este menú se encuentra en
la carpeta de Helpers en el archivo header.php
Archivo header.php
Fuente: del autor
Imagen 3.13
84
3.9 Resultados y discusión
Con el ejemplo anteriormente expuesto, se pueden apreciar diferentes puntos
importantes a destacar. Iniciando con la facilidad de relacionar y encontrar cada
contenido gracias a que estos están seccionados y agrupados de acuerdo a sus objetivos,
es aquí donde se destaca lo esencial de estructurar un proyecto de acuerdo a
funcionalidades específicas.
Con lo anterior se entiende que el contenido fue creado de forma modular, donde
cada componente tiene sus tareas asignadas permitiendo ser invocados desde diferentes
contenidos del proyecto sin que la estructura de un archivo genere conflictos con el
contenido que lo invoque. Este claro ejemplo puede ser apreciado en el módulo de
contactos específicamente en el componente dedicado a enlistar a los contactos, el cual
además de cargarse en la sección de contactos, también se invoca en la sección de
grupos para mostrar los contactos pertenecientes a un grupo.
lista de contactos
Fuente: del autor
Imagen 3.14
lista de contactos de un grupo
85
Fuente: del autor
Imagen 3.15
Esta convergencia armónica entre diferentes módulos sin la generación de
conflictos es alcanzable cuando se estructura adecuadamente el contenido de un archivo,
debido a que el proyecto implementa la metodología BEM, resulta sencilla la
diferenciación entre el contenido que pertenece a un módulo sobre el contenido de otro
modulo.
Es bastamente apreciable la maquetación semántica en la estructura definida, así
como en los módulos realizados, ya que esta maquetación se distingue por utilizar las
etiquetas adecuadas al contenido que se desea desplegar en pantalla, así como sirven
de apoyo para la interpretación del navegador.
Un claro ejemplo de esto se puede percibir en el módulo de contactos al momento
de definir la creación de la tabla, donde se implementan etiquetas especificas según sus
objetivos, diferenciando un contenido de otro a nivel de interpretación del navegador,
maximizando la utilidad brindada automáticamente por los exploradores web.
Anteriormente para la creación de una tabla se podría bastar de las siguientes etiquetas:
<table>
<tr>
86
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
<tr>
<td>Vreni</td>
<td>21</td>
<td>669456345</td>
</tr>
</table>
Como se aprecia en el ejemplo anterior, el contenido no resulta fácilmente
comprensible sobre la cabecera y el resto de las etiquetas que forman parte de la tabla.
Caso que resulta diferente en la tabla de contactos del proyecto presentado como
ejemplo, ya que la tabla está desarrollada empleando las etiquetas adecuadas para
diferenciar semánticamente el contenido de la tabla.
Como se expone en la imagen superior, la tabla de contactos está formada por
etiquetas que marcan la diferencia entre la cabecera y el cuerpo de la tabla, además de
esto, la columna que muestra el número telefónico del contacto añade un atributo que
permite al navegador identificar que se trata de un número telefónico, lo cual ofrece la
funcionalidad automática para mostrarte la posibilidad de contactar al número impreso en
pantalla, todo esto sin ser definido explícitamente en nuestras líneas de HTML, si no que
fue proporcionado por las herramientas propias del navegador al interpretar nuestro
maquetado semántico.
87
Flujo extra del navegador al interpretar correctamente lo que se está mostrando
en pantalla (parte 1)
Fuente: del autor
Imagen 3.16
Flujo extra del navegador al interpretar correctamente lo que se está mostrando
en pantalla (parte 2)
Fuente: del autor
Imagen 3.17
88
Todo lo anteriormente mencionado mejora considerablemente el rendimiento
durante el desarrollo ya que se aprovechan al máximo las herramientas ya existentes y
proporcionadas por el navegador utilizado, así como las de terceros.
89
3.10 Conclusiones
Como se pudo observar en esta investigación sobre la técnica de la maquetación
semántica, comprendemos que el uso de esta técnica tiene muchas ventajas ya que
promueve la implementación de etiquetas más específicas con la intención de aprovechar
todas las utilidades ya disponibles por herramientas de terceros o propias del navegador,
además de esto, resulta más sencillo realizar actividades de análisis de consumo para
aplicar otras técnicas como el scraping.
Con lo anterior podemos aceptar como favorable la hipótesis planteada la cual es
“manejar un maquetado bien estructurado ayuda a mejorar el rendimiento durante el
desarrollo de páginas web complejas y/o robustas, así como favorece la creación de
contenido por componentes.”, esto debido a que se concluye ampliamente que la
maquetación semántica ofrece muchas ventajas para el desarrollo web así como también
facilita la programación por componentes gracias a una maquetación clara y bien
estructurada.
Comprendiendo por semántica al hecho de dar sentido a la estructura de las expresiones
y su relación con sus referentes, el interpretar adecuadamente un conjunto de palabras
y signos que aseguren un significado exacto para cada instrucción plasmada en un grupo
de textos, se puede concluir satisfactoriamente a la maquetación semántica como base
fundamental para la interpretación acertada, la cual es detonada por los procesos
empleados mediante los navegadores web, los cuales son encargados de descifrar el
enfoque de un conjunto de etiquetas y plasmarlas en un monitor mostrando como
resultado algo apreciable de forma visual a base del contenido expresado en los archivos
escritos con etiquetas de HTML5.
90
Bibliografías
[1]"Qué es HTML5", Hipertextual, 2019. [Online]. Available:
https://hipertextual.com/archivo/2013/05/entendiendo-html5-guia-para-principiantes/. [Accessed: 07- Nov-
2019]
[2] Definición, "Definición, usos y ventajas del lenguaje HTML5", Blog.aulaformativa.com, 2019. [Online].
Available: https://blog.aulaformativa.com/definicion-usos-ventajas-lenguaje-html5/. [Accessed: 07- Nov-
2019].
[3] Innovadora, Tecnologia. “¿CUÁLES SON LAS VENTAJAS Y DESVENTAJAS DE CSS3?” ¿CUÁLES
SON LAS VENTAJAS Y DESVENTAJAS DE CSS3?, 1 Jan. 1970,
tecnologiainnovadoraunad.blogspot.com/2012/05/cuales-son-las-ventajas-y-desventajas_14.html.
[4]"CSS3 - EcuRed", Ecured.cu, 2019. [Online]. Available: https://www.ecured.cu/CSS3. [Accessed: 07-
Nov- 2019].
[5]"aulaClic. Cursos de Informática gratis y de calidad, con videotutoriales. Cursos on-line de Excel, Access,
Word, Windows, Internet, Photoshop, PowerPoint, Redes telematicas, CorelDraw, Fotografia,
Dreamweaver, ofimática, SQL, tutorial diseño web, Visual basic net", Aulaclic.es, 2019. [Online]. Available:
https://www.aulaclic.es/index.htm. [Accessed: 07- Nov- 2019].
[6]"¿Qué Es JavaScript y Para Qué Sirve?", ParaQueSirven.es, 2019. [Online]. Available:
https://paraquesirven.es/javascript/. [Accessed: 13- Nov- 2019].
[7] Ciudadano2cero.com, 2019. [Online]. Available: https://www.ciudadano2cero.com/que-es-un-plugin-
wordpress/#Que_es_un_pluginexactamente. [Accessed: 13- Nov- 2019].
[8]"Librerías para la programación web", Aprende-web.net, 2019. [Online]. Available: https://aprende-
web.net/librerias/. [Accessed: 13- Nov- 2019].
[9]"What is the Difference Between Plugin and Library - Pediaa.Com", Pediaa.Com, 2019. [Online].
Available: https://pediaa.com/what-is-the-difference-between-plugin-and-library/. [Accessed: 13- Nov-
2019].
[10]"¿Qué es Bootstrap y cómo funciona en el diseño web? - Blog, ARWEB Agencia Digital Costa Rica",
Blog, ARWEB Agencia Digital Costa Rica, 2019. [Online]. Available: https://www.arweb.com/blog/¿que-es-
bootstrap-y-como-funciona-en-el-diseno-web/. [Accessed: 07- Nov- 2019].
[11]"Bootstrap, framework HTML5 para diseño web responsive (I) - Cubic Factory", Cubic Factory, 2019.
[Online]. Available: https://www.cubicfactory.com/bootstrap-framework-html5-para-diseno-web-responsive-
i/. [Accessed: 07- Nov- 2019].
91
[12]"Bootstrap - ¿Qué es y Cómo funciona?", Axarnet, 2019. [Online]. Available:
https://www.axarnet.es/blog/bootstrap/. [Accessed: 07- Nov- 2019].
[13]"Qué es JQuery y cómo implementarlo", Laurachuburu.com.ar, 2019. [Online]. Available:
https://www.laurachuburu.com.ar/tutoriales/que-es-jquery-y-como-implementarlo.php. [Accessed: 07- Nov-
2019].
[14]"Qué es y cómo usar Jquery | CEAC", Ceac.es, 2019. [Online]. Available: https://www.ceac.es/blog/que-
es-y-como-usar-jquery. [Accessed: 07- Nov- 2019].
[15]"Conceptos HTML5. La maquetación semántica", AprenderWeb, 2019. [Online]. Available:
https://cizquierdof.wordpress.com/2015/01/19/conceptos-html5-la-maquetacion-semantica/. [Accessed:
08- Nov- 2019].
[16]"Qué es la estructura web semántica HTML5 y por qué usarla - VicHaunter.org", VicHaunter.org, 2019.
[Online]. Available: https://www.vichaunter.org/desarrollo-web/que-es-la-estructura-web-semantica-html5-
y-por-que-usarla. [Accessed: 10- Nov- 2019].
[17]H. Delgado Rodríguez, "Web Semántica, definición, historia y características", Diseño de Páginas Web,
Sitios de Internet y Posicionamiento SEO akus.net, 2019. [Online]. Available:
https://disenowebakus.net/semantica-web.php. [Accessed: 11- Nov- 2019].
[18]"Qué es la web semántica", Diseño web Madrid, 2019. [Online]. Available: https://webtematica.com/que-
es-la-web-semantica. [Accessed: 11- Nov- 2019].
[19]"Web semántica - EcuRed", Ecured.cu, 2019. [Online]. Available:
https://www.ecured.cu/Web_semántica. [Accessed: 11- Nov- 2019].
[20]N. Ayancán, "Introducción a la metodología BEM para desarrollo front end | IDA Chile", Blog IDA Chile
| Estrategia para el éxito de tu negocio, 2019. [Online]. Available: https://blog.ida.cl/desarrollo/metodologia-
bem-desarrollo-front-end/. [Accessed: 12- Nov- 2019].
[21]"Methodology", methodology/quick-start/, 2019. [Online]. Available:
https://en.bem.info/methodology/quick-start/. [Accessed: 12- Nov- 2019].
[22]"Reglas para maquetar", Webriodismo, 2019. [Online]. Available:
https://webriodismo.wordpress.com/2010/10/23/reglas-para-maquetar/. [Accessed: 12- Nov- 2019].
[23] PHP: ¿Qué es PHP? - Manual. [online]. Disponible en: http://php.net/manual/es/intro-whatis.php.
[24] Pérez Porto, J., & Gardey, A. (2010). Definición de PHP — Definicion.de. [online]. Disponible en:
https://definicion.de/php/.
[25] PHP: Historia de PHP - Manual. [online]. Disponible en: http://php.net/manual/es/history.php.php.
92
[26] PHP: Algo útil - Manual. [online]. Disponible en: http://php.net/manual/es/tutorial.useful.php#example-
6.
[27]"¿Qué son los Frameworks?", PROGRAMACIÓN PARA TODOS, 2019. [Online]. Available:
https://programacionparatodossite.wordpress.com/2016/11/17/que-son-los-frameworks/. [Accessed: 13-
Nov- 2019].
[28]"¿Qué es un Framework y para qué sirve? - Neo Wiki | NeoAttack", Neoattack, 2019. [Online]. Available:
https://neoattack.com/neowiki/framework/. [Accessed: 13- Nov- 2019].
[29]" Fontán, M. (2012). CodeIgniter, un framework PHP para el desarrollo rápido de aplicaciones web. |
ADWE. [online]. Available: http://www.adwe.es/codigo/codeigniter-framework-php-desarrollo-aplicaciones-
web. [Accessed: 20- Nov- 2019].
[30]"¿Qué es MySQL? - Definición en WhatIs.com", SearchDataCenter en Español, 2019.
[Online]. Available: https://searchdatacenter.techtarget.com/es/definicion/MySQL. [Accessed: 20- Nov-
2019].
[31"Qué es y para que sirve MySQL - Culturación", Culturación, 2019. [Online]. Available:
https://culturacion.com/que-es-y-para-que-sirve-mysql/. [Accessed: 20- Nov- 2019].
[32]"¿Que es FrontEnd Y Backend en la programación web? | Ser Programador.es", Serprogramador.es,
2019. [Online]. Available: https://serprogramador.es/que-es-frontend-y-backend-en-la-programacion-web/.
[Accessed: 20- Nov- 2019].
[33]"▷ ¿Qué es Front end y para qué sirve? - Neo Wiki | NeoAttack", Neoattack, 2019. [Online]. Available:
https://neoattack.com/neowiki/front-end/. [Accessed: 20- Nov- 2019].
[34]"¿Qué es el Back End y Front End? - Desarrollo web Madrid", Agencia Inbound Marketing Madrid, 2019.
[Online]. Available: https://nestrategia.com/blog-inbound-marketing/desarrollo-web-back-end-front-end/.
[Accessed: 20- Nov- 2019].
93
Anexos
Glosario
Código
Conjunto de líneas de texto con los pasos que debe seguir la computadora para ejecutar dicho
programa.
Frameworks
Es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de
problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de
índole similar.
Maquetación
Es un oficio del diseño editorial que se encarga de organizar en un espacio contenidos escritos,
visuales y, en algunos casos, audiovisuales (multimedia) en medios impresos y electrónicos,
como libros, diarios y revistas.
Método
Modo ordenado y sistemático de proceder para llegar a un resultado o fin determinado.
Semántica
Se refiere al significado que tienen las estructuras y elementos lingüísticos que la componen, es
decir, se refiere al significado que tienen los elementos.
Software
Es el conjunto de instrucciones que una computadora debe seguir, es decir, todas aquellas
indicaciones sobre lo que tiene que hacer y cómo.
Versátil
Hace referencia a la capacidad de algo o alguien de adaptarse con rapidez y facilidad a distintas
funciones.
Web
Es aquella que consiste en un documento electrónico que contiene información, cuyo formato se
94
adapta para estar insertado en la World Wide Web, de manera que los usuarios a nivel mundial
puedan entrar a la misma por medio del uso de un navegador, visualizándola con un dispositivo
móvil como un smartphone o un monitor de computadora.