TRABAJOS ORIGINALES

 

Aplicación del Responsive Web Design en la creación e implementación del sitio Web del Centro de Histoterapia Placentaria

 

Application of Responsive Web Design in the creation and implementation of the website of the Placental Histotherapy Center

 

 

MSc. Yanitza Riccardi Sabatier^I
Dr.C. Rosa Lidia Vega Almeida^II
Dr. Ernesto Miyares Díaz^III

I Especialista en Ciencias Informáticas. Centro de Histoterapia Placentaria "Dr. Carlos Manuel Miyares Cao". E-mail: [e-mail]
II Especialista en Comunicación y Marketing. Centro de Histoterapia Placentaria "Dr. Carlos Manuel Miyares Cao". E-mail: [e-mail]
III Director de Servicios Médicos e Investigaciones. Centro de Histoterapia Placentaria "Dr. Carlos Manuel Miyares Cao" . E-mail: [e-mail]

 

 

---

RESUMEN

La diversidad de dispositivos conectados a Internet ha conllevado en la actualidad a un cambio en la concepción del diseño Web. La navegación, utilizando dispositivos de diferentes resoluciones y tamaños de pantalla, ha modificado de manera radical la experiencia del usuario. El sitio Web del Centro de Histoterapia Placentaria de Cuba creado en el año 2000 y modificado en varias ocasiones, según las tendencias del diseño no está ajeno a esta realidad. El objetivo general de este trabajo es crear e implementar un nuevo diseño del sitio, aplicando la filosofía de Responsive Web Design. Su empleo garantiza la visibilidad del sitio en cualquier dispositivo; ya sea, Smartphone, tableta, computadoras  o  smart TV. El diseño estuvo basado en el patrón Modelo-Vista-Controlador;  en la Vista se concibieron dos interfaces, una para el usuario y otra para el administrador del sitio. El nuevo diseño soluciona el problema de la visibilidad en la gama de dispositivos móviles, permite un mejor posicionamiento del sitio en los buscadores y crea las bases para incorporar nuevos servicios como el Comercio Electrónico.

Palabras claves: diseño web responsive, modelo-vista-controlador, hojas de estilo.

---

ABSTRACT

The diversity of devices connected to the Internet has changed the conception of Web design. The navigation, using devices of different resolutions and screen sizes has radically modified the user experience. The Website of the Placental Histotherapy Center of Cuba, created in 2000 and modified several times according to design trends, is not far of this reality. The general objective of this work is to create and implement a new site design, applying the philosophy of Responsive Web Design, which allows the visibility from devices, such as:  Smartphone, Tablet, computers or smart TV. The design was based on the Model-View-Controller pattern; In Vista, two interfaces were conceived, one for the user and another for the site administrator. The new design solves the problem of visibility in the range of mobile devices, allows a better positioning of the site in the search enginesand creates the bases to incorporate new services such as Electronic Commerce.

Key words: responsive web design, model-view-controller, style sheets.

---

 

 

INTRODUCCIÓN

Desde su surgimiento hasta nuestros días la telefonía móvil ha ido evolucionando vertiginosamente. Los primeros teléfonos móviles aparatosos y pesados solo podían enviar y recibir llamadas y mensajes de texto, no siendo así en la actualidad donde además de tener estas funciones están preparados para brindar otros servicios como: enviar y recibir archivos de manera inalámbrica tanto por Wifi como por Bluetooth, Sistema de Posicionamiento Global (GPS), conexión simultánea y permanente a la red de telefonía e Internet; así como, estar dotados de cámaras para tomar fotografías y grabar videos.

La posibilidad de navegar por Internet, a través de los teléfonos inteligentes o Smartphones revolucionó el diseño Web a partir del año 2007. Con anterioridad los sitios Web solo eran visibles en monitores, que aunque sus tamaños variaban, la diferencia no influía significativamente en el diseño; no siendo así con la introducción de los teléfonos inteligentes y tableta. Ante esta problemática surge un método que da solución a los diferentes tamaños de pantalla. De esta manera, ya en el año2010  Ethan Marcotte definiría por primera vez el término ResponsiveWeb Design.¹

El Responsive Web Design (RWD) es un método para diseñar sitios Web de apariencia flexible. Este no se basa únicamente en anchos de pantallas fijos sino que es capaz de detectar el ancho de pantalla y ajustar el diseño para proveer una visualización adecuada en cada dispositivo.¹

El Centro de Histoterapia Placentaria "Dr. Carlos Manuel Miyares Cao", de La Habana, Cuba,  pertenece a la OSDE "BioCubaFarma" y tiene como misión: investigar, producir y comercializar medicamentos y cosméticos derivados de la placenta humana; así como la prestación de servicios médicos especializados en Dermatología. Esta institución en aras de promocionar sus servicios y productos, desde el año 2000 dispone de un sitio web, el cual se ha modernizado de acuerdo a las tendencias del diseño Web.

Después del surgimiento de los teléfonos inteligentes y las tabletas con posibilidades de navegación por Internet su visibilidad estuvo afectada. En este caso, su diseño basado en tablas en su última versión impedía que su contenido estuviera disponible en dispositivos móviles.

Ante la necesidad de garantizar la visualización, a través de todos los dispositivos con acceso a Internet, surge el presente trabajo que responde al siguiente objetivo general: crear e implementar el sitio Web del Centro de Histoterapia Placentaria, utilizando la filosofía de Responsive Web Design.

 

MATERIALES Y MÉTODOS

Responsive Web Design: Aproximación teórica

El sitio presentado utiliza la técnica de Responsive Web Design para dar respuesta al crecimiento acelerado del uso de dispositivos móviles con acceso a Internet. El diseño responsive puede manejar la visualización Web tanto de escritoriocomo de dispositivos móviles,  a través de sus tres ingredientes técnicos: las rejillas de fluidos, las imágenes flexibles y las consultas de medios de comunicación. El World Wide Web Consortium (W3C)^I  se muestra a favor del principio "OneWeb", lo que significa poner a disposición de los usuarios de terminales móviles la misma información y servicios que las computadoras de escritorio, enla medida de lo posible.²  Esto no significa que la información y su representación sean exactamente las mismas para todos los dispositivos, ya que las cualidades de éstos y el contexto en que son empleados son diferentes,y por lo tanto habrá servicios e información más apropiados para unos contextos que para otros.  Con una sola versión en HTML y CSS^II se cubren todas las resoluciones de pantalla desde televisores, computadoras de escritorio hasta tabletas yteléfonos inteligentes. El RWD consiste en una combinación de diseño, plantillas flexibles y un uso inteligente de reglas de CSS. ^3,4

Otros investigadores además de Ethan Marcotte han dado su propia definición de RWD.Knight refiere que el RWD es el enfoque que sugiere que el diseño y eldesarrollo deben responder al comportamiento y al entorno del usuario,basándose en el tamaño de la pantalla, la plataforma y la orientación.⁵ Snell expone que el RWD provee una experiencia positiva e intuitiva independientemente del dispositivo, sin requerir sub-dominios separados para los dispositivos móviles. Para todo esto se hace uso de las reglas de CascadingStyle Sheets (CSS) Media Queries, lo cual permite que los elementos se adapten al ancho y orientación de los dispositivos.⁶

El RWD se hace posible gracias a la introducción de las Media Queries en las propiedades de los estilos CSS en su versión número 3. Las Media Queries son consultas de las características del medio donde se está visualizando una Web y sirven para definir estilos condicionales, que se aplican la resolución y el tamaño de pantalla.⁷

Las Media Queries fueron incluidas como parte de la especificación de CSS 2,pero solo soportaba consultas tales como screen y print. Su uso más común fue para crear una versión para imprimir los sitios Web.⁷

La versión CSS 3 incluye consultas más específicas basadas en las característicasde los dispositivos como el ancho, alto y capacidad de colores. Las MediaQueries no afectan al HTML solo a los estilos aplicados a las páginas y utiliza las CSS. Los navegadores empezaron a darle soporte en el 2009,permitiendo que se pudieran añadir a los sitios Web diferentes plantillas (layouts) para disímiles tamaños de pantallas sin tener que crear nuevos sitios Web. El uso de Media Queries soluciona cambiar cualquier aspecto relacionado con el estilo de un sitio Web, no solamente el número de columnas sino también se pueden mover objetos, cambiar la fuente del texto, mostrar u ocultar contenido, ajustar márgenes y cualquier otro estilo que se pueda aplicar con CSS.^8-10

El Responsive Web Design trabaja con porcentajes para establecer el anchode cada elemento del layout, lo que facilita que los contenedores seanmás adaptables, fluidos y no dependan de un ancho fijo, además se ahorra el despliegue de barras deslizadoras.^1,3

Con el uso de RWD se reducen los costos de creación y mantenimiento del sitio, pues el diseño de las pantallas es similar entre dispositivos de distintos tamaños. Desde el punto de vista de la optimización de motores de búsqueda solo aparece una URL en los resultados, con lo cual se ahorran redirecciones y fallos que sederivan de éstas. Su aplicación evita errores al acceder al sitio desde los llamados social links; es decir, desde enlaces que los usuarios comparten en redes sociales, tales como: Facebook o Twitter, en las que pueden existir errores, dependiendo de qué enlace se copió y desde qué dispositivo se accedió.^8-10

Google recomienda que se use el RWD para crear páginas Web, debido a que la utilización de esta técnica mejora el posicionamiento y optimiza el sitio en los motores de búsqueda. El Diseño 100% responsive se encuentra entre los  factores que Google considera que influyen en el posicionamiento de los sitios web.^11,12

A través de su uso Googlebot puede obtener el contenido de una forma más eficiente, actualizando rápidamente los cambios que se realicen en el índice de Google.

Framework

En este trabajo se utilizan para el diseño y programación del sitio los framework Symfony para PHP y Bootstrap para CSS. Symfony se emplea para la programación en PHP del sitio pues se utiliza una base de datos. PHP(acrónimo recursivo Hypertext Preprocessor) es un lenguaje de código abierto muy popular, especialmente adecuado para el desarrollo Web y puede ser incrustado en HTML. Su empleo en este sitio se debe a que entre sus principales características se destaca su potencia, alto rendimiento, facilidad de aprendizaje y escasez de consumo de recursos.^13,14

Como gestor de base de Datos

Como Gestor de Base de Datos (SGBD) se utiliza el MySQL (software de código abierto). MySQL es un sistema de administración de bases de datos relacional que permite velocidad y flexibilidad. Es muy utilizado en aplicaciones Web de diversas plataformas, pero su popularidad está ligada a PHP, pues comúnmente están combinados. ¹⁴

MySQL es un SGBD multiusuario y multiplataforma. Se caracteriza por transacciones y claves foráneas, conectividad segura, replicación, búsqueda e indexación de campos de texto y es el soporte de múltiples motores de almacenamiento, permitiéndole al usuario escoger el más conveniente para cada tabla de la base de datos. En aplicaciones Web hay baja concurrencia en la modificación de datos, el entorno es intensivo en lectura de datos, lo que hace a este gestor como el ideal para este tipo de aplicaciones.¹⁵

Se utiliza Apache, como servidor Web de código abierto para plataformas Unix (GNU/Linux25, etc.), Windows, Macintosh, entre otras. Apache implementa el protocolo HTTP y la noción de sitio virtual. Es uno de los servidor es más utilizados por los desarrolladores de aplicaciones Web y sirve principalmente, para enviar páginas Web estáticas y dinámicas. Posee mensajes de error altamente configurables, bases de datos de autenticación y es modular y extensible.¹⁶

 

RESULTADOS

Como resultado se obtiene un sitio Web institucional, basado en el patrón Modelo-Vista-Controlador. En su capa modelo cuenta con una base de datos relacional compuesta por tablas que permiten la organización de la información en diferentes categorías.

Las categorías fundamentales son: servicios médicos con sus consultas especializadas; productos clasificados en medicamentos, cosméticos y nutrientes; producción científica generada por el Centro; síntesis curricular del Consejo Científico; producción farmacéutica e investigaciones. El contenido del sitio está publicado en los idiomas: español e inglés.

En su capa presentación posee una interfaz gráfica amigable tanto para la vista del usuario que busca información sobre la institución como para el usuario que administra el sitio.

 

Vista Administración

La interfaz de administración se utiliza para actualizar la base de datos, la cual almacena en sus tablas toda la configuración y contenido del sitio. Para interactuar con ella es necesario autenticarse correctamente mediante nombre de usuario y contraseña.

En la página de administración (Figura 1) se pueden configurar las diferentes categorías que conforman el sitio, además del menú horizontal, el deslizador (slider) de la página inicial y los enlaces a sitios externos.

Vista Cliente

Para el diseño de la vista Cliente se concibe una interfaz interactiva, simple y fácil de usar para todo tipo de usuario, lo cual posibilita una adecuada navegación dentro de la aplicación. Se definieron funcionalidades específicas, con una apariencia estándar en las páginas y sus simbologías. Se realizó un uso adecuado del tamaño, color y tipos de fuentes. Los colores utilizados tienen correspondencia con el manual de identidad del Centro.
La mayor parte del contenido del sitio se presenta inicialmente de forma gráfica con fotos de alta calidad. Esto permite atraer desde el punto de vista visual al usuario, que luego puede ampliar los conocimientos con textos más detallados, a través de hipervínculos a otras páginas.

El sitio cuenta con un menú horizontal en la parte superior de todas las páginas, que varía sus opciones, según la categoría que representan. Para  dar una apariencia más atractiva se utilizan instrucciones como carrusel (carousel), lo cual facilita la rotación o activación de imágenes con vínculos a otras páginas.

Los productos que se promocionan se clasifican en medicamentos, cosméticos y nutrientes. Las consultas médicas se organizan, según las patologías que se tratan en la institución y el resto de la información se organiza según la categoría. Esta interfaz permite la interacción con el usuario y su visualización se adapta al dispositivo utilizado. El uso del diseño responsive logra que a medida que aumente o disminuya el ancho de la pantalla, el menú superior-horizontal se visualiza diferente. Si disminuye el tamaño de la pantalla, el menú cambia de horizontal a vertical. Las imágenes aumentan o disminuyen su tamaño sin perder su calidad y visualización completa. En la Figura 2 se muestran diferentes vistas del sitio, utilizando diversas resoluciones de pantalla.

La utilización del patrón Modelo-Vista-Controlador permite la adición de nuevas categorías a la base de datos sin afectar su concepción general. Se prevé la ampliación del sitio con la inclusión del Comercio Electrónico como un nuevo servicio que ofrecerá la entidad, brindando ventajas tanto para el paciente como para la institución.

 

 

DISCUSIÓN

El sitio Web del Centro de Histoterapia Placentaria "Dr. Carlos Manuel MiyaresCao" (www.histoterapia-placentaria.cu) ha transitado por 4 versiones desde su creación en el año 2000. Los diseños se han ido perfeccionando según las tendencias de cada etapa, desde la utilización de marcos (frames) hasta tablas en su penúltima versión. En los momentos actuales, donde la navegación a través de dispositivos móviles está en constante crecimiento, se impone un nuevo diseño que responda a dichas especificaciones. La aplicación del Responsive Web Design en al diseño actual soluciona el problema de la visibilidad del sitio desde cualquier dispositivo con acceso a Internet.

La variedad de dispositivos con acceso a la Web ha conllevado a una filosofía de diseño más compleja. La incorporación de nuevos elementos y propiedades, a través de HTML5 y CSS3 han propiciado diseños más flexibles, adaptables y con elementos de animación y formas más creativos pero a la vez más complejos.

Las nuevas especificaciones como la inclusión de las Media Queries, los prefijos para asegurar compatibilidad con navegadores, entre otras, hacen más costoso en tiempo y esfuerzo la elaboración de una hoja de estilos desde cero para cada proyecto. Para facilitar este trabajo nacen los frameworks CSS.

Los frameworks son un conjunto estandarizado de conceptos, prácticas y criterios para abordar un tipo común de problema, que pueden servir de referencia para ayudar a resolver nuevos problemas de naturaleza similar. En el diseño Web se define como un paquete compuesto por una estructura de archivos y carpetas de código estandarizado (HTML, CSS, Java Script) que pueden ser utilizados como plataforma para comenzar a construir un sitio. Los frameworks CSS son hojas de estilos ya testadas por equipos y diseñadores, listas para ser usadas como base en una maquetación Web, sin necesidad de escribir todo desde cero. Estas librerías parten de una base sólida, por lo que el diseñador puede centrar más sus esfuerzos en detalles que en la estructura lógica del sitio.¹⁷

Framework CSS

En la actualidad existe una gran variedad de frameworkCSS para diseño responsive, entre los más conocidos se encuentran Bootstrap, Foundation, Semantic, Pure CSS, Ulkit, Skeleton, YAML 4, Kube, Milligram,Materialize, Gumby, Blueprint, Bluetrip, Groundwork, ResponsiveAEON, entre otros.

Si se necesita un framework compatible con la mayoría de los navegadores y que además incorpore reglas para prácticamentetodos los estilos se puede seleccionar Bootstrap, incluido en Symfony;el cual constituye un conjunto de herramientas de código abierto. Bootstrapes un potente framework de front-end, elegante e intuitivo, permite un desarrollo web rápido y fácil. Construido en Twitter por @mdo y@fat, Bootstrap utiliza LESS CSS, se compila a través de Node yse gestiona a través de GitHub. La principal fuerza de Bootstrapes su enorme popularidad, ofrece muchos más recursos que otros framework como artículos, tutoriales, plug-ins, extensiones de terceros, constructores de temas, etc.

Sin embargo, si se pretende dar solución a un proyecto rápido que no fue este caso, además en el que no se requieran complicaciones y se desee cierto grado de fiabilidad se puede seleccionar Pure CSS.Si el proyecto se basa en un estilo muy concreto como lo es material design, entonces se podría usar Materialize, que incluye todo lo necesario para maquetar la web o app, usando las tipografías, cards y estilos recomendados por Google. Si se necesita proporcionar una configuración mínima de estilos para un punto de partida rápido y limpio se puede utilizar Milligram, este resuelve uno de los problemas que más se critica a los grandes frameworks, la posibilidad de cambiar entre grid de 12 columnas a 10 columnas, e incluso combinar ambas. Si seprecisa de un framework elegante y minimalista  puede utilizar ResponsiveAeon.Si utiliza un sitio grande puede emplear Foundation, que ha sido empleado en muchos sitios como Facebook, Mozilla, Ebay, Yahoo! y NationalGeographic.¹⁷

Framework PHP

Existen además Framework para PHP, entre los más conocidos se encuentran: Laravel, Phalcon, CakePHP, Codeigniter, Symfony, Yii, Zend, Aura, FlightPHP,FuelPHP, entre otros. Estos frameworks han proporcionado a los desarrolladores de PHP una base para la construcción de aplicaciones web de alto rendimiento. Los frameworks PHP potencian el proceso de programación, ayudan a escribir y estructurar el código, utilizan en su gran mayoría el patrón Modelo-Vista-Controlador (MVC) y a través de ellos sepueden escalar proyectos, lo que contribuyó de manera significativa en el diseño de nuestro sitio.^{18- 20}

La elección del framework para desarrollar una aplicación web depende de cuan cómodo y entendible sea para el desarrollador,de cuan útil sea para el proyecto y de qué tiempo puede ahorrarse en lograr el resultado final. Actualmente no hay muchas diferencias significativas entre los frameworks, son todos bastante completos y no muy complejos de usar. Para su selección se podría tener en cuenta la velocidad de instalación, la complejidad al configurarlos, el consumo de recursos, la integración con otros frameworks y sistemas, y el mejor soporte a largo plazo. Otros elementos a tener en cuenta pudieran ser: persistencia, navegación contextual, cache, Ajax, MVC y versión de PHP.^21,22

En este trabajo se utiliza el framework PHP Symfony 2, el cual se integra con el framework CSS Bootstrap para dar una estructura y diseño más profesional al sitio, resolviendo el problema de la visualización en cualquier dispositivo con acceso a internet.  Symfony 2.4 (Open Source) está diseñado para optimizar el desarrollo de aplicaciones web y se basa en el patrón Modelo-Vista-Controlador (MVC).

El patrón MVC logra una independencia total entre la lógica de negocio y la presentación. Su aplicación permite la separación de vistas, controladores y modelos, facilitando de este modo que las correcciones solo se hagan en un solo lugar. Su uso adiciona nuevas vistas sinnecesidad de paralizar todo el sistema. Se admite el uso de multilenguaje y la aplicación de distintos diseños de presentación sin alterar la lógica de negocio. La separación de capas como presentación, lógica de negocio, acceso a datos es fundamental para el desarrollo de arquitecturas consistentes, reutilizables y de fácil mantenimiento, lo que al final resulta en un ahorro detiempo.²³

Symfony es un completo framework que separa la lógica de negocio, la lógica de servidor y la presentación de laaplicación web. Proporciona varias herramientas y clases encaminadas a reducir el tiempo de desarrollo de una aplicación compleja, además automatiza las tareas más comunes, permitiendo al desarrollador dedicarse por completo a los aspectos específicos de cada aplicación. Symfony está desarrollado completamente en PHP5.3. y se utiliza en sitios web de comercio electrónico de primer nivel, ²⁴objetivo que se pretende lograr en un mediano plazo en el Centro de Histoterapia Placentaria. 

Symfony es compatible con la mayoría de gestores de bases de datos, como MySQL, PostgreSQL, Oracle y Microsoft SQL Server. Se puede ejecutar tanto en plataformas *nix (Unix, Linux, etc.) como enplataformas Windows. En este trabajo se utiliza el gestor MySQL.

La utilización del framework Symfony integrado con Bootstrap en este proyecto permiten el desarrollo de la aplicación web con los requerimientos deseados como visibilidad y navegabilidad, además de una nueva imagen acorde a las tendencias del diseño actual.

 

CONCLUSIONES

El trabajo desarrollado permite dar solución a la problemática de la visualización del sitio Web institucional en la gama de dispositivos móviles con la utilización del Responsive Web Design, a partir del uso del framework Symfony integrado con Bootstrap. A la vez, la aplicación del patrón Modelo-Vista-Controlador facilita la actualización y mantenimiento del sitio de una forma sencilla y en un reducido espacio de tiempo. Consecuentemente, la implantación de este nuevo diseño permite mayor promoción de la actividad que realiza el Centro en particular los servicios médicos, la comercialización de productos y las investigaciones científicas. De esta manera, el  diseño concebido crea las bases para adicionar nuevos servicios de valor agregado como el Comercio Electrónico.

 

REFERENCIAS BIBLIOGRÁFICAS

1.  Marcotte E. Responsive Web Design. New York: A Book Apart; 2010 [Consultado: 16 de Diciembre de 2016]. Disponible en: http://www.reprosol.be/sites/reprosol.beta.the-aim.be/files/responsive-webdesign(ethan-marcotte).pdf

2.  Stánescu I, Stefan A, Roceanu I, Stefan V, Hamza-Lup F. Mobile Knowledge Management Toolkit. In: Remenyi D. The Proceedings of the 8^th European Conference on e-Learning. Italy: University of Bari; 2009. England: Academic Publishing Limited, 2009 [Consultado:16 de Febrero de 2017]. Disponible en: https://books.google.com.cu/

3. Manso Y, Cañizares R, Febles JP. Diseño web adaptativo para la plataforma educativa ZERA. Revista Cubana de Ciencias Informáticas. 2016;  10(2); [Consultado: 4 de Diciembre de 2016]. Disponible en: http://scielo.sld.cu/scielo.php?script=sci_arttext&pid=S2227-18992016000200008

4. Díaz J.  Diseño web responsive: mejores prácticas. 2013. [Consultado: 4 de Febrero de 2017]. Disponible en: https://www.emenia.es/diseno-web-adaptativo-mejores-practicas/

5.  Knight K. Responsive WebDesign: What It Is and How to Use It. Smashing eBook │Bestof Smashing Magazine. 2011. [Consultado: 4 de Diciembre de 2016]. Disponible en: https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

6.  Snell J. Flexible Everything: Getting Responsive With Web Design. Computers in Libraries. 2013; 33(3): 12-16. [Consultado: 4 de Diciembre de 2016]. Disponible en: https://www.questia.com/magazine/1G1-324982793/flexible-everything-getting-responsive-with-web-design

7. Álvarez M. CSS Media Queries. 2015. [Consultado: 4 de Diciembre de 2016]. Disponible en: https://desarrolloweb.com/articulos/css-media-queries.html   Pallavi Y, Paras N. Designing Responsive Websites Using HTML And CSS. International Journal of Scientific & Techology Research. 2014; 3(11). [Consultado: 4 de Diciembre de 2016]. Disponible en: http://www.ijstr.org/final-print/nov2014/Designing-Responsive-Websites-Using-Html-And-Css.pdf

9.   Subić N, Krunić T, Gemović B. Responsive web design – Are we ready for the newage?  Journal of Applied Knowledge Management. 2014; 2(1). [Consultado: 4 de Diciembre de 2016]. Disponible en: http://www.iiakm.org/ojakm/articles/2014/volume2_1/OJAKM_Volume2_1pp93

10. Hussain A, Mkpojiogu E. The effect of Responsive WebDesing on the user experience with laptop and smartphone devices. Jurnal Teknologi (Sciences & Engineering). 2015; 77(4): 41-7. [Consultado: 4 de Diciembre de2016]. Disponible en: https://www.researchgate.net/publication/284714212_The_effect_of_responsive_web_design_on_the_user_experience_with_laptop_and_smartphone_devices

11. Dean B. Google's 200 Ranking Factors. 2016. [Consultado: 2 de Mayo de 2016]. Disponible en: http://bmhf.bm/wp-content/uploads/2016/10/testing.pdf

12. Maksimava M. Google's 9 major ranking signals: Whatthey are and how to check your site against them. SEOPowerSuite. 2016. [Consultado: 4 de Octubre de 2017]. Disponible en: https://www.link-assistant.com/news/ranking-factors.html?utm_source=searchenginejournal&utm_campaign=searchenginejournal&utm_medium=text&utm_content=ranking-factors-main

13. Achour M, Betz F, Dovgal A, Lopes N, Magnusson H, Richter G, Seguy D, Vrana J. Manual de PHP. 2004. [Consultado:4 de Diciembre de 2016]. Disponible en: http://www1.herrera.unt.edu.ar/biblcet/wp-content/uploads/2014/12/Manual-de-PHP-Oficial-21-02-2005-3214-paginas-espa%C3%B1ol-spanish.pdf

14. Rodríguez JA. Tutorial de PHP y MySQL Completo. 2000. [Consultado: 20 de Diciembre de 2016]. Disponible en: http://realpv.hol.es/PHPyMySQLmascotas.pdf

15.  Sánchez J. MySQL Guía rápida. 2013. [Consultado: 4 de Diciembre de 2016]. Disponible en:http://www.cartagena99.com/recursos/programacion/apuntes/mysql.pdf

16. Mohammed J. La biblia del servidor Apache. 2003. [Consultado: 4 de Diciembre de 2016]. Disponible en: https://yexia.files.wordpress.com/2010/09/mohammed-j-kabir-la-biblia-del-servidor-apache-21.pdf

17. Nilesh J.  Review of different responsive CSS front-end Frameworks. Journal of Global Research in Computer Science. 2014; 5(11). [Consultado: 10 de Febrero de 2017]. Disponible en: https://pdfs.semanticscholar.org/d9b2/d41c7b9b7433a33344bad41f4ddab883cf8b.pdf

18. Das R, Prasad L. Comparison of Procedural PHP with Codeigniter and Laravel Framework. International Journal of Current Trends in Engineering & Research. 2016; 2(6): 42–8.  [Consultado: 4 de Junio de 2017]. Disponible en: http://www.ijcter.com/papers/volume-2/issue-6/comparison-of-procedural-php-with-codeigniter-and-laravel-framework.pdf

19. Samra J. Comparing Performance of Plain PHP and Four of Its Popular Frameworks. [Proyecto de Tesis.] Suecia: Linnaeus University; 2015. [Consultado: 4 de Diciembre de 2016]. Disponible en: https://www.diva-portal.org/smash/get/diva2:846121/FULLTEXT01.pdf

20. Mendoza I. Definición de un Framework para aplicaciones Web con navegación sensible aconcerns. [Tesis de Maestría]. Argentina: Universidad Nacional de La Plata. [Consultado: 4 de Junio de 2017]. Disponible en: http://sedici.unlp.edu.ar/bitstream/handle/10915/4192/Documento_completo.pdf?sequence=1

21. Porebski B, Przstalski K, Nowak L. Building PHP Apllications with Symfony, CakePHP and Zend Framework. Indiana: Wiley Publishing, Inc, 2011. [Consultado: 4 de Diciembre de 2016]. Disponible en: http://blogs.wrox.com/files/2013/05/Building-PHP-Applications-w-Cake---Ch4.pdf

22. Prokofyeva N, Boltunova V. Analysis and Practical Application of PHP Frameworks in Development of Web Information Systems. Procedia Computer Science. 2017; 104:51–6. [Consultado: 12 de Junio de 2017]. Disponible en: https://www.researchgate.net/publication/313488649_Analysis_and_Practical_Application_of_PHP_Frameworks_in_Development_of_Web_Information_Systems

23. Leff A, RayfieldJ T. Web-Application Development Using the Model/View/Controller Design Pattern. Proceeding EDOC '01 Proceedings of the 5th IEEE International Conference on Enterprise Distributed Object Computing. Washington DC, USA: EEE Computer Society,2001. [Consultado: 20 de Diciembre de 2016]. Disponible en: http://dl.acm.org/citation.cfm?id=650161

24. Eguiluz J. Desarrollo web ágil con Symfony2. 2012. [Consultado: 4 de Diciembre de 2016]. Disponible en: http://allmastersolutions.com/shared/Desarrollo Agil-Symfony-2-1.pdf

 

 

Recibido: 14 de enero de 2018.

Aprobado: 12 de marzo de 2018.

---

[I] El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones Miembro, personal  a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares Web. Liderado por el inventor de la Web Tim Berners-Lee y el Director Ejecutivo (CEO) Jeffrey Jaffe, la misión del W3C es guiar la Web hacia su máximo potencial. Tomado de: https://www.w3c.es/Consorcio/

[II] Hojas de Estilo en Cascada (Cascading StyleSheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. Tomado de: https://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo