6.4: Desarrollo web

El desarrollo web es el proceso de tomar diseños web terminados y transformarlos en sitios web interactivos en pleno funcionamiento. El desarrollo es lo que da vida y movimiento a los diseños estáticos, y permite a los usuarios acceder al sitio web a través de sus navegadores web. Esto se hace traduciendo los diseños a lenguajes de codificación web que pueden ser interpretados y mostrados por los navegadores web.

Aprender a codificar tu propio sitio web no está en el alcance de este libro de texto y requiere años de práctica y algunos conocimientos técnicos considerables. Pero podemos enseñarle a comprender los aspectos que intervienen en la creación de un sitio web, el proceso que debe seguirse y cómo ayudar a tomar decisiones clave sobre su sitio web.

Evaluar sus necesidades de desarrollo

Es importante identificar cuáles son sus necesidades de desarrollo, ya que éstas impactan fundamentalmente en las opciones que son más adecuadas para el desarrollo de su sitio. ¿Utilizarás un CMS? ¿Necesitarás una gestión compleja de contenidos? ¿Es para eCommerce, o es simplemente un sitio de folletos? Por ejemplo, si está construyendo un sitio de folletos pequeños, no necesita que alguien presente una solución de desarrollo a medida.

Gestión de contenido

La mayoría de los sitios web hoy en día se construyen utilizando un sistema de gestión de contenido, o CMS. La administración de contenido simplemente significa un sistema para administrar cualquier forma de contenido. Un CMS web es una aplicación de software que ayuda a administrar sus activos digitales y contenido para su sitio web. Necesita facilitar la creación, recolección, gestión y publicación de cualquier material para su sitio.

Administrar un sitio web es colaborativo e involucra a varias personas, en diversos roles, trabajando en el material, como creadores, editores, editores, administradores e incluso visitantes de su sitio. Un CMS proporciona herramientas que permiten a los usuarios con poco conocimiento de lenguajes de programación web o lenguajes de marcado crear y administrar el contenido del sitio web. Un CMS permite a una empresa administrar y actualizar su propio sitio web sin necesidad de un desarrollador web (Johnston, 2015).

Idealmente, el CMS se convierte en un conjunto de procesos automatizados que facilitan el funcionamiento, actualización y gestión de su sitio. El uso de un CMS significa que es más barato y más fácil de actualizar, administrar y crear nuevo contenido ya que los desarrolladores web no son necesarios para cada cambio. Un CMS también permite que el contenido de los sitios web se actualice desde cualquier lugar del mundo mediante el inicio de sesión en el sistema.

eCommerce

El comercio electrónico, o comercio electrónico, se refiere a cualquier comercio de productos o servicios en Internet. Los sitios de comercio electrónico son necesarios en una variedad de negocios, desde el comercio minorista basado en el consumidor, pasando por sitios de subastas, suscripción de música y video, hasta el comercio intercorporativo.

Conoce más en nuestro capítulo de eCommerce.

Sitio del folleto

Un sitio de folletos es un sitio estático. Proporciona contenido que no necesita ser actualizado regularmente, y hay muy poca interacción con el visitante. Un sitio de folletos es esencialmente un folleto de la oferta de una compañía, que proporciona información relevante y datos de contacto a posibles clientes. El sitio no 'hace' nada. El usuario no puede interactuar con el sitio de ninguna manera; no puede realizar pedidos, realizar pagos o interactuar con el sitio.

Figura\(\PageIndex{1}\): Sitio del folleto estático Adaptado de HFM Columbus, 2017

Los sitios de folletos son un medio para lograr que su negocio tenga una presencia en línea de manera rápida y relativamente barata, y si cumple con todos los requisitos de su negocio, entonces un sitio tan simple puede ser suficiente. Considere las limitaciones de un sitio de folletos antes de tomar una decisión, ya que pueden ser difíciles o imposibles de construir más adelante.

Opciones de desarrollo

Al seleccionar cómo proceder con el desarrollo de su sitio web, tiene algunas opciones a su disposición. La elección entre una solución lista para usar y el desarrollo a medida se reduce a cuán flexible es la solución lista para usar. Si se requiere demasiada personalización, o no soporta los requisitos del negocio, puede ser mejor y más barato desarrollar una solución a medida.

Solución lista para usar

El CMS que elija puede ser preconstruido por una empresa o desarrollador externo. Esto se puede comprar como cualquier otro software del mercado. Si bien esta opción puede proporcionar menos funciones personalizadas, es potencialmente una opción más rentable que un CMS a medida. Ciertamente es más rápido si se requiere poca personalización.

Desarrollo a medida

Esto implica un CMS que se construye específicamente para un determinado sitio web. Esta opción está altamente adaptada y personalizada a su sitio web, y puede ser más costosa que otras opciones. Posiblemente sea menos a prueba de futuro, ya que encontrar agencias alternativas para apoyar el código personalizado es un desafío.

Ventajas y desventajas del desarrollo listo para usar y a medida

Cuadro 6.4.1 (Cooper, 2015)

Fuera de la plataforma		A medida
Ventajas	Desventajas	Ventajas	Desventajas
Más barato	Muy complejo con secciones grandes que nunca usarás	Creado específicamente para las necesidades del negocio	Más caro
Software sofisticado debido a la amplia gama de insumos de recursos para el desarrollo	Compromiso de características	A medida y único	Requiere desarrolladores experimentados para mantener
Fácil de encontrar soporte y literatura ampliamente disponible	Se requiere mucho tiempo para aprender y capacitación interna	Personalizada para interactuar con el software que ya usas	Menos pruebas futuras vinculadas a una agencia específica para mantener
Fácil de compartir archivos como software ampliamente utilizado y disponible	Es posible que el flujo de trabajo deba cambiar para cumplir con el diseño	Más intuitivo para la forma de trabajar de su negocio	Gran inversión de tiempo para el desarrollo, pruebas
No se necesita tiempo de la compañía para las especificaciones y las pruebas	Es posible que las funciones que necesita no estén disponibles	Más flexible, se puede modificar y cambiar según sea necesario	Tarda mucho más en implementarse
Disponible antes	Las solicitudes individuales a los desarrolladores en general no tendrán peso	Recibir mejor soporte	Es difícil obtener soporte si el desarrollador no lo proporciona
	Mucho tiempo para tener las cosas arregladas si a través de la corporación que desarrolló el software	Proporcionar una ventaja significativa para el negocio	Difícil elegir desarrollador apropiado que proporcione un software confiable y estable.
	Difícil de obtener ventaja de la competencia	Opción de vender solicitud a terceros (si posee derechos)

Código abierto vs. propietario

Hay muchas opciones de CMS preconstruidas de código abierto disponibles, algunas de las cuales son gratuitas. El código abierto significa que cualquiera puede ver el código con el que está construido el CMS, y puede manipularlo o mejorarlo y compartirlo con todos los demás usando el CMS. Un CMS de código abierto puede ser más rudimentario que las opciones de pago, pero también es fácil de adaptar a sus necesidades, y a menudo hay una comunidad que puede crear las soluciones que necesita.

Algunas soluciones CMS de código abierto ampliamente utilizadas incluyen:

WordPress (www.wordpress.com)

Drupal (www.drupal.com)

Blogger (www.blogger.com)

Joomla (www.joomla.org)

Cuadro 6.4.2 (Robbins, 2015)

Propietaria		Código abierto
Ventajas	Desventajas	Ventajas	Desventajas
Previsibilidad	Menos actuales, así que grandes inversiones en sistemas heredados	Personalización	El costo inicial puede ser alto si desea un producto altamente personalizado
Un montón de opciones	Tarifas de licencia	Flexibilidad	Menos características y características “listas para usar” que necesita pueden ser costosas de crear
Robusto y lleno de características	Soportado únicamente por la empresa que lo vende o sus agentes	Apoyado por una comunidad en línea y no por una empresa	Soporte menos predecible que solo ocurre según sea necesario y no regularmente
Relativamente rentable de implementar	Falta de personalización	Marcos existentes para trabajar	Menos predecible
	Falta de flexibilidad	La nueva tecnología ayuda a mantenerse al día con errores y correcciones
		Eres dueño de las versiones personalizadas

Un CMS debe ser seleccionado teniendo en cuenta los objetivos y funciones del sitio web. Un CMS necesita poder escalar junto con el sitio web y el negocio que soporta, y no al revés. Muchos sistemas de gestión de contenidos se han hecho famosos por ciertas necesidades.

Los ejemplos incluyen:

• WordPress para blogs personales o sitios tipo folleto
• Drupal para sitios comunitarios y editoriales más complejos
• Magento para sitios de comercio electrónico.

Marcos de desarrollo

El back-end de un sitio web se refiere a la capa del lado del servidor. Esta capa está oculta a la vista del usuario. La interacción entre el usuario y el back-end se maneja a través de una capa de presentación conocida como capa frontal o capa del lado del cliente. Un sitio web es un matrimonio entre estas capas (Ferguson, 2016).

Lenguajes y marcos de trabajo de back-end/lado del servidor

Los lenguajes del lado del servidor son los lenguajes de codificación web ocultos que determinan cómo funciona su sitio web y se comunica con el servidor web y su computadora.

Al elegir un idioma del lado del servidor, debe considerar:

Costo: El costo varía dependiendo del idioma que elijas para tu proyecto de desarrollo web, ya que algunos son más intrincados que otros, el desarrollador puede cobrar más. Por lo que el idioma elegido puede influir directamente en el salario del desarrollador. Si la información se procesa donde se encuentra su sitio web, a diferencia de en la computadora del cliente, aumenta los costos. Algunos idiomas también requieren una administración y mantenimiento continuos del sitio web, lo que es un costo adicional a considerar.

Escalabilidad: Al planear un proyecto donde la escalabilidad es un factor, considere si hay desarrolladores fácilmente disponibles para desarrollar en este lenguaje. También averigüe si hay bibliotecas de soporte y marcos disponibles que puedan adaptarse a posibles cambios en su proyecto.

Algunos de los lenguajes más comunes y populares del lado del servidor incluyen PHP, Java, Ruby, .NET y Python. Pide a tu desarrollador web que te asesore sobre el mejor idioma para tu proyecto específico (Ferguson, 2016).

Figura\(\PageIndex{2}\): Logos para algunos lenguajes populares de desarrollo back-end Adapted From Lotusnotus, n.d.

Algunos frameworks de back-end comunes son Django, Zend Framework y Ruby on Rails.

Lenguajes y marcos de desarrollo front-end/lado cliente

Nota

Hay muchos recursos gratuitos en línea que te enseñan a codificar. Uno es Codeacademy: www.codeacademy.com

Los usuarios web han llegado a esperar experiencias ricas e interactivas en línea, y las interfaces de sitios web interactivos son parte de eso. Los lenguajes front-end, o lenguajes del lado del cliente, son lenguajes que se interpretan y ejecutan en el navegador de los usuarios en lugar de en el servidor web.

Estas experiencias van desde animaciones simples hasta interfaces altamente receptivas que requieren la entrada del usuario. Existen varias tecnologías disponibles para crear este tipo de experiencias, cada una con sus propias oportunidades y desafíos.

Al igual que con los lenguajes del lado del servidor, debe considerar algunas propiedades del lenguaje front-end que desea usar. Tenga en cuenta que los lenguajes del lado del servidor y los lenguajes front-end a menudo se usan juntos, ya que todos los proyectos web requieren lenguajes front-end para su desarrollo.

Costo: Los costos de desarrollo de lenguaje front-end son comparativamente más bajos que los costos de backend; aunque los desarrolladores de interfaces enriquecidas a menudo exigen tarifas premium.

Características: Los lenguajes de código abierto HTML, CSS y JavaScript a menudo se utilizan juntos y son compatibles con la mayoría de hardware y software. El contenido desarrollado en estos también es más amigable para los motores de búsqueda. Hoy en día, Flash rara vez se usa a pesar de sus capacidades multimedia interactivas. En muchos casos, se pueden lograr experiencias más ricas con HTML, CSS y JavaScript. Lo que tus usuarios finales podrán ver siempre debe ser la consideración más importante.

Escalabilidad: Dependiendo de las capacidades del dispositivo que ejecuta el idioma, es posible que ciertas funciones no estén disponibles o que cierto código funcione demasiado lentamente para crear una buena experiencia de usuario. El desarrollo del código front-end necesita tener en cuenta todos los dispositivos considerados.

Compatibilidad con el navegador y el sistema operativo: Con los idiomas front-end, debe atender el soporte del navegador y el sistema operativo. Un sitio web se verá diferente en cada navegador y sistema operativo, y esto debe tenerse en cuenta. Si una entidad no se puede mostrar bajo ciertas condiciones, se deben implementar soluciones alternativas. Este suele ser el caso de las versiones anteriores de Internet Explorer.

Software de código abierto o propietario: Cualquier desarrollador puede crear complementos o mejorar el software de código abierto, mientras que el software propietario es propiedad y su uso está restringido. Puede ser más económico de desarrollar en un lenguaje front-end de código abierto como HTML, pero como se necesita HTML para alojar todas las páginas web, a veces se utilizan combinaciones de software de código abierto y propietario. Sin embargo, en la mayoría de los casos y para los idiomas que cubrimos esto no es una consideración importante.

Hay varias opciones de lenguaje front-end para elegir aunque la más popular con diferencia es HTML junto con CSS y JavaScript.

HTML5

HTML es el lenguaje para crear sitios web, y HTML5 es la quinta iteración del lenguaje. También es el nombre de una gama de tecnologías que permiten funciones modernas de navegación web. Es una especificación publicada por el cuerpo de estándares web, W3C, que describe qué características están disponibles y cómo usarlas. HTML5 es diferente del software web propietario como Adobe Flash en que la especificación es el resultado de contribuciones de muchas organizaciones y puede ser implementada por cualquier persona sin tener que pagar regalías o tarifas de licencia. Usted, sin embargo, paga por las herramientas de desarrollo proporcionadas por las empresas.

Figura\(\PageIndex{3}\): Los logotipos HTML5, JavaScript y CSS Adaptados De Codecondo, 2016.

HTML5 simplifica muchas tareas comunes al construir una página web, como incluir contenido multimedia, validar formularios, almacenar información en caché y capturar datos de entrada del usuario, como la fecha y la hora.

HTML5 permite a los navegadores reproducir contenido multimedia sin el uso de Flash o un complemento similar. También existe una tecnología llamada Canvas, que permite a los desarrolladores crear experiencias ricas e interactivas sin las restricciones que venían con versiones anteriores de HTML. Por ejemplo, ahora se puede reproducir un video animado en 3D, algo que solía requerir el uso de Flash o Silverlight.

El objetivo es un sitio web que simplemente funcione, sin la necesidad de navegadores o plug-ins particulares para habilitar cierta funcionalidad. Tener una forma estandarizada de implementar características comunes significa que la web es abierta y accesible a todos, independientemente de su competencia.

CSS

CSS significa Hojas de estilo en cascada y es un lenguaje de hojas de estilo utilizado para instruir al navegador sobre cómo renderizar el código HTML. Por ejemplo, el texto plano de una página web se incluye en el código HTML, y CSS define cómo aparecerá. CSS puede establecer muchas propiedades, incluyendo el tamaño, el color y el espaciado alrededor del texto, así como la colocación de imágenes y otros elementos relacionados con el diseño. Los preprocesadores CSS como LESS, SASS y Stylus también están disponibles para hacer CSS más fácilmente mantenible y escalable. Permiten una compilación CSS más funcional. El último estándar de CSS es CSS3. Es compatible con todas las versiones de CSS y proporciona muchas más funciones útiles como efectos de texto, transformaciones 2D/3D y animaciones por nombrar algunas (w3schools, n.d).

JavaScript

Este es el lenguaje más común del lado del cliente utilizado para crear propiedades web ricas y dinámicas. Debido a que es un lenguaje de código abierto, muchos desarrolladores han agregado funcionalidades que se pueden implementar más rápidamente. Por ejemplo, hay más de 1 000 sistemas de galería diferentes creados por desarrolladores de JavaScript para desarrolladores de JavaScript.

Flash

Adobe Flash es un lenguaje para crear experiencias ricas e interactivas. Admite video y a menudo se usa para crear experiencias web similares a juegos. Aunque es ampliamente compatible con los navegadores de escritorio, tiene un soporte limitado (y disminuyendo) en dispositivos móviles y no es utilizable en dispositivos Apple como el iPhone y el iPad. Tiene un historial de ser problemático para el SEO, aunque hay formas de solucionar gran parte de esto.

El uso de flash ha estado en declive desde que se expusieron algunos agujeros de seguridad, y muchos creen que está en camino de salida. En febrero de 2016, Google anunció que sus redes publicitarias, AdWords y DoubleClick, ya no serían compatibles con Flash. Los anuncios tendrían que actualizarse a HTML5 (Google AdWords, 2016). YouTube anunció que ya no estaría usando el reproductor Flash por defecto. Cambió a HTML5 para todos los navegadores más recientes. Adobe descontinuó Adobe Professional CC y lanzó Adobe Animate CC, que ahora es la principal herramienta de Adobe para admitir contenido HTML5. Todavía quedan algunos rastros de Flash ya que todavía se usa como reproductor de video y para la creación de juegos en línea.

Frameworks

Los frameworks son paquetes que se componen de una estructura de archivos y carpetas de código estandarizado (HTML, CSS y JavaScript por ejemplo) que pueden ser utilizados como base para desarrollar sitios web. Esencialmente, los frameworks son plantillas para proporcionar la estructura común para los sitios web para que los desarrolladores no necesiten comenzar de cero cada vez. Los marcos ahorran mucho tiempo y dinero.

Algunos ejemplos incluyen Backbone.js, AngularJS, EmberJS, React.js y las bibliotecas jQuery muy populares. Bootstrap también está aumentando en popularidad como framework front-end.

Mejores prácticas de desarrollo

Meta y personalización de etiquetas de título

El CMS que haya seleccionado o creado debería permitirle ingresar sus propias metaetiquetas para cada página, así como permitir la personalización completa de las etiquetas de título para cada página. Es importante tener en cuenta que Google ya no usa metaetiquetas de palabras clave para clasificar (Lincoln, 2015).

URLs

En lugar de usar parámetros dinámicos, el CMS debería permitir URL limpias mediante la reescritura del lado del servidor. Las URL limpias consisten solo en la ruta a una página web sin código adicional. Una URL limpia podría verse así: example.com/cats, mientras que una URL sucia podría verse así: example.com/index. php`page=cats. Debe permitir la creación de URLs que sean:

• estático
• reescribible
• rico en palabras clave.

Tenga cuidado al crear URL limpias, descriptivas y dinámicas a partir del contenido de CMS. Si utilizas un encabezado de noticias, por ejemplo, 'Tormenta', como parte de tu URL (www.site.com/cape/storm) y alguien cambia el encabezado a 'Tornado' (www.site.com/cape/tornado), esto alterará la URL y los motores de búsqueda la indexarán como una página nueva, pero con el mismo contenido que la URL que tenía el encabezado anterior. Tenga esto en cuenta antes de agregar parámetros dinámicos a sus URL.

Navegación Personalizable

Un buen CMS permitirá flexibilidad a la hora de crear la arquitectura de información para un sitio web. A los efectos de agregar contenido adicional para los motores de búsqueda, un CMS no debe exigir que todas las páginas de contenido estén enlazadas desde la navegación de la página de inicio. También es necesario tener en cuenta consideraciones de respuesta para los dispositivos móviles.

El CMS necesita tener un buen soporte para administrar consideraciones de SEO como la reescritura de URL y evitar problemas de contenido duplicado.

Nombramiento de imágenes personalizables y etiquetas alt para imágenes: Un buen CMS te permitirá crear etiquetas alt personalizadas y atributos de título.

administración de robots.txt: los archivos robot.txt son archivos.txt que restringen a los motores de búsqueda la indexación de ciertas páginas de información Asegúrese de que pueda personalizar el robots.txt a sus necesidades, o que esto al menos se pueda administrar usando las metaetiquetas.

Por último, es muy importante usar un CMS que admita estándares compatibles con HTML y CSS, ya que sin él, las inconsistencias pueden ser renderizadas en varios navegadores. También asegura un tiempo de carga más rápido y un ancho de banda reducido, facilita el mantenimiento del marcado, respalda los esfuerzos de SEO y garantiza que cada visitante de un sitio web, sin importar qué navegador esté usando, podrá ver todo en el sitio.

Desarrollo para múltiples pantallas

Nota

Lee más sobre esto en el capítulo Diseño de experiencia de usuario.

El acceso a Internet ha cambiado drásticamente en los últimos años. El escritorio ya no es el único o incluso el principal medio de acceder a la web. El uso de Internet móvil superó al escritorio en 2014 y continúa creciendo año tras año, mientras que el uso de escritorio está disminuyendo (Chaffey, 2016).

Debido a esto, es importante que todas las marcas sean accesibles en dispositivos móviles. Como aprendió en el capítulo Diseño de experiencia de usuario, los dispositivos móviles pueden caer en una variedad de categorías, y no todos los dispositivos móviles tienen las mismas características y tamaño de pantalla. Esto significa que los sitios web deben diseñarse para que sean accesibles y estén optimizados para una variedad de tamaños de pantalla y dispositivos.

El desarrollo para una variedad de pantallas y móviles requiere una comprensión de las oportunidades y desafíos que presenta la tecnología móvil. Los desafíos incluyen lo obvio, como una pantalla más pequeña y limitaciones de navegación, diferentes sistemas operativos así como problemas más complejos como formatos de archivo y restricciones de ancho de banda.

Dispositivos móviles

Un dispositivo móvil es un dispositivo pequeño con funcionalidad similar a una computadora. Permite una conexión a Internet y diversas características como Bluetooth, NFC, Wi-Fi y GPS. Estos incluyen teléfonos inteligentes y PDA (MDN, 2016). Recuerde, el móvil va más allá de solo el teléfono móvil, también considere tabletas, consolas de juegos, netbooks, wearables y una gama de otros dispositivos habilitados para la web.

Las limitaciones con el desarrollo para una variedad de dispositivos [c head]

Debido a las limitaciones de tamaño de las pantallas de los dispositivos móviles, se deben tener en cuenta diversas consideraciones para permitir que su sitio web se renderice correctamente.

Los diseños CSS fluidos permitirán al sitio manipular sus contenidos en función del tamaño de la pantalla. Además, las consultas de medios CSS pueden usar estilos de destino para un ancho de pantalla, altura y densidad de píxeles específicos.

Trabajar con pantalla táctil significa que no funcionará ningún efecto de desplazamiento. Se debe permitir un espacio adecuado alrededor de las entradas debido a que el área táctil de los dedos de algunos usuarios es más grande que el cursor del mouse.

Las imágenes deben optimizarse para pantallas móviles y restricciones de ancho de banda.

Nota

Una gran herramienta de compresión JPEG/ PNG en línea es TinyPNG.org. Simplemente sube tus imágenes y deja que las compriman por ti (MDN, 2016).

Enfoques de desarrollo

Desarrollo móvil especializado

Los dispositivos móviles permiten a los usuarios acceder a información sobre tu marca en movimiento. Debido a que la penetración móvil es muy pesada y muchos usuarios de todo el mundo accederán primero a Internet y principalmente a través del móvil (Chaffey, 2016), cada sitio web debe diseñarse pensando en el dispositivo móvil. Las interfaces de sitios web móviles exigen un enfoque más simple y una consideración del tamaño de pantalla y el método de entrada. Un diseño específico para varios tamaños de pantalla móvil en forma de un diseño adaptativo puede ser una opción. Sin embargo, Google prefiere sitios receptivos a adaptativos, por lo que crear un sitio adaptativo puede no estar dentro del mejor interés de su negocio en términos de SEO.

Una aplicación móvil nativa es un software diseñado para ayudar a los usuarios a realizar tareas particulares. Los ejemplos incluyen una herramienta para verificar el clima, una calculadora de combustible o una aplicación de aerolíneas para facturar o rastrear el progreso del vuelo.

Las aplicaciones móviles se pueden vender o poner a disposición de forma gratuita. Muchos desarrolladores crean aplicaciones para obtener ingresos, mientras que las aplicaciones gratuitas que ofrecen valor a los usuarios suelen ser patrocinadas por marcas o publicidad. Una app puede ser una excelente herramienta para conectar con tu cliente.

La diferencia clave entre las aplicaciones nativas y los sitios web optimizados para dispositivos móviles es que las aplicaciones nativas están diseñadas para teléfonos y sistemas operativos particulares y tienen que descargarse en el dispositivo móvil. Mientras que a los sitios web optimizados para dispositivos móviles se puede acceder a través de cualquier dispositivo móvil habilitado para Internet. Dicho esto, las aplicaciones móviles pueden permitir una mayor integración con el dispositivo y de ahí una mejor experiencia de usuario, dependiendo de la complejidad de la funcionalidad.

Figura\(\PageIndex{4}\): Un ejemplo de una aplicación de marca de iTunes App Store Adapted From Screenshot, aplicación de la marca Kellogs en itunes store, 2016

Es una buena idea enfocarse en sitios optimizados para dispositivos móviles cuando se dirige a un grupo más amplio y construye una aplicación cuando se desea llegar a un nicho o audiencia objetivo.

Algunas marcas aún crean un sitio mobi separado solo para sus usuarios móviles, pero esto está pasando de moda a medida que aumenta el acceso a Internet vía móvil. Google recomienda sitios receptivos como mejores prácticas.

Nota

Lea más sobre la optimización móvil en el capítulo Canales y aplicaciones móviles.

Un sitio receptivo

Un sitio web receptivo es un sitio web que cambia su diseño dependiendo del dispositivo en el que se muestre para que se vea de una manera en una computadora de escritorio, pero luego se adapta al tamaño de pantalla y diseño más pequeños en una tableta o teléfono móvil. De esta manera, un solo proyecto de desarrollo puede atender múltiples factores de forma de dispositivo.

Figura\(\PageIndex{5}\): Diseño web receptivo en una variedad de dispositivos Adaptados desde la fundación de diseño Interaction, 2017

Un sitio web receptivo no es lo mismo que un sitio web adaptativo. Un sitio receptivo utiliza el espacio de pantalla del navegador para determinar cómo refluir el contenido de diseño original que probablemente fue optimizado para escritorio, mientras que un sitio adaptativo proporciona un diseño específicamente personalizado para el dispositivo que está utilizando. El diseño de un sitio adaptativo requiere múltiples tamaños de diseño fijo, generalmente los seis anchos de pantalla más comunes, y el relevante se implementa dependiendo del tamaño de pantalla del dispositivo.

Muchos usuarios prefieren el diseño responsive ya que proporciona familiaridad, uniformidad e inconsútil, que son consideraciones importantes en la experiencia del usuario (Soegaard, 2016). El diseño responsivo debe ser compatible con dispositivos móviles. Esto ayuda a mantener la usabilidad cuando se vuelve a fluir para la pantalla de un dispositivo móvil.

Los diseños adaptables requieren más mano de obra y son más caros. Como enfoque se está utilizando cada vez menos. Aunque los profesionales de la industria a menudo prefieren sitios adaptativos, la preferencia de la industria no se traducirá en listados más altos en SERP, mientras que la metodología de clasificación de Google favorece el

Nota

Intenta visitar http://roxik.com/cat/ y cambia el tamaño de tu navegador para ver al gato cambiar de forma en función del ancho de la pantalla. Este es un gran ejemplo ilustrativo de un diseño fluido sensible.

Crear un sitio web receptivo significa que solo necesita construir un sitio web para toda la gama de dispositivos, desde el escritorio hasta el móvil. Esto puede ser un ejercicio técnicamente desafiante y requerirá mucha planificación por adelantado para asegurarse de que el sitio se muestre correctamente en cada dispositivo.

Aquí hay una tabla que compara las fortalezas y debilidades relativas de cada opción. No hay una respuesta correcta o incorrecta sobre cuál elegir. Elige la opción que mejor se adapte a tu marca, público objetivo y objetivos digitales.

Cuadro 6.4.3

	Fortalezas	Debilidades
Sitios adaptativos específicos para dispositivos móviles	Diseño que mejor se adapta al tamaño de la pantalla Más estéticamente agradable y proporcionar una mejor experiencia de usuario Totalmente optimizado para dispositivos móviles	Google prefiere sitios receptivos Necesita al menos 6 diseños de tamaño de pantalla específicos diferentes Caro Trabajo intensivo
Aplicación nativa	Se pueden crear herramientas versátiles y creativas Interactivo y divertido Puede crear valor agregado real a través de enfoques innovadores que no son posibles a través de un navegador web Ideal para tareas frecuentes o rutinarias Promover la lealtad a la marca Permite el acceso a funciones principales del teléfono como GPS, cámara, etc. Podría generar ingresos como una 'aplicación pagada' Beneficio de desempeño en algunos casos	No funciona en teléfonos con funciones Se necesitan diferentes versiones para diferentes marcas y modelos de teléfonos Proceso de desarrollo completamente diferente y complejo El usuario debe elegir descargarlos Es posible que los usuarios sin almacenamiento telefónico adicional no tengan suficiente espacio para instalar la aplicación Todas las aplicaciones deben pasar por tiendas formales de aplicaciones y deben aprobarse en algunos casos Los cambios deben publicarse a través de actualizaciones de versión
Sitio receptivo	El dispositivo es una solución 'agnóstica' Un sitio consistente accesible a través de muchos dispositivos Un conjunto de datos para trabajar Opción preparada para el futuro que funcionará en la mayoría de los dispositivos Preferido por Google y puntajes altamente en algoritmos para SEO Los usuarios prefieren la uniformidad y consistencia de los sitios receptivos utilizados en todos los dispositivos	Podría ser complejo de desarrollar El sitio necesita un enfoque de denominador común más bajo para atender a todos los dispositivos Puede que no funcione correctamente en todos los tamaños y formas de dispositivos Aún no hay una forma estándar acordada de desarrollar sitios receptivos

Diseño para múltiples tamaños de pantalla

Diseñar un sitio que se muestre de manera consistente en múltiples dispositivos y tamaños de pantalla es difícil, pero comprender y apegarse a los estándares web lo acercará a este objetivo.

Diseña tu sitio para que la información que tus usuarios quieran no solo esté en exhibición, sino que también sea fácil de acceder. El espacio limitado de pantalla es valioso, por lo que no necesariamente puede tener la navegación completa del sitio en cada página. Una arquitectura de información bien pensada es esencial para garantizar que hagas el uso más lógico de la navegación en línea con lo que necesitan los visitantes de tu sitio.

Estándares

Actualmente existen pocos estándares para garantizar que su diseño se optimice en múltiples pantallas. Crear contenido que incluya imágenes, texto y más allá que se pueda formatear correctamente en la mayoría de los dispositivos móviles, o al menos legible en teléfonos donde el formato es defectuoso, todavía no es del todo posible. Por lo tanto, hay una cierta cantidad de prueba y error involucrados en el diseño de un sitio optimizado en una variedad de dispositivos. Sin embargo, el proceso ciertamente vale la pena, considerando que hay 4.7 mil millones de suscriptores móviles únicos, y la mayoría de estos están accediendo a la web móvil (GSMA Intelligence, 2016).

Los estándares web son administrados por el W3C. Los estándares fueron creados para promover el consenso, la equidad, la rendición de cuentas pública y la calidad. Cumplir con los estándares web significa que el sitio utiliza código válido y se adhiere a las estipulaciones del W3C. Lee más sobre estándares web en https://www.w3.org/standards/ about.html.

Los emuladores de teléfonos móviles le permiten ver cómo se formateará su sitio web de trabajo en curso, dependiendo del dispositivo que esté emulando. Se ha sugerido que nada puede reemplazar las pruebas en dispositivos móviles reales, así que si estás haciendo las pruebas, recluta contactos con diferentes teléfonos para mostrarte la diferencia en pantalla. Algunos emuladores:

• BrowserStack — www.browserstack.com
• TestiPhone — www.testiphone.com
• Emulador de teléfono móvil — para Samsung, iPhone, BlackBerry y otros - www.mobilephoneemulator.com

Safari en el iPhone se puede probar con el simulador IOS.

Diseño Responsive

Los sitios web receptivos están diseñados para una variedad de anchos de pantalla. Al decidir si crear un sitio receptivo o adaptar sitios de escritorio, considere primero a su cliente:

• ¿Cuánto del tráfico de tu sitio web proviene de dispositivos móviles específicos? Si este es un porcentaje grande, considere construir un sitio receptivo diseñado para una visualización óptima en tamaños de pantalla móviles.
• ¿Tus usuarios de escritorio tienen los mismos objetivos que tus usuarios móviles? Aquí debes tener en cuenta tus CTA, menús desplegables y similares y asegurarte de que puedan ser accedidos correctamente por el dispositivo correspondiente.
• ¿Cuál es tu presupuesto y qué tan rápido necesitas construir tu sitio web? Los sitios web receptivos tardan un tiempo en construirse y pueden ser costosos. Podrías ahorrar dinero a largo plazo siguiendo esta ruta, pero hay una inversión inicial considerable.
• ¿Tiene un sitio existente y se puede convertir en un sitio web receptivo, o será necesario reconstruirlo (Du Plessis, 2012)?
• El diseño responsivo viene con un poco de terminología, pero deberías estar familiarizado con tres conceptos clave.

Rejilla flexible

Los sitios web típicos están diseñados como bloques grandes, centrados y de ancho fijo. Con diseño responsive, los elementos de la página como el encabezado, el texto o copia, la imagen principal y otros bloques de información están dispuestos en una cuadrícula de columnas que tienen espaciado predefinido. Cada elemento se relaciona proporcionalmente con los demás elementos. Esto permite que los elementos se reorganicen o redimensionen en relación entre sí, ya sea que la pantalla sea pequeña o enorme y la calidad de la pantalla sea alta o baja. Aunque este sistema permite flexibilidad, una pantalla extremadamente estrecha puede hacer que el diseño se rompa. En este caso podemos hacer uso de media queries.

Figura\(\PageIndex{6}\): Rejilla flexible utilizada en el diseño responsivo. Adaptado De igentics, 2017

Consultas de medios

Las consultas de medios son bits de código que permiten a los sitios web pedir a los dispositivos información sobre ellos mismos. El estilo de sitio web que mejor se adapte al dispositivo se selecciona luego de una lista de estilos definidos en un CSS. Las consultas de medios solicitan información sobre el tamaño de la ventana del navegador del dispositivo, la orientación (horizontal o vertical) y la calidad de visualización de la pantalla.

Nota

¿El diseño responsive es adecuado para su empresa o cliente? Vea cómo algunas empresas abordaron esta pregunta aquí: www.zdnet. com/does-yourcompanys-websiteneed-responsivedesign-7000021417

Imágenes flexibles

Las imágenes están diseñadas para moverse y escalar con la rejilla flexible. La rapidez con que se carga el sitio web es una consideración importante, por lo que las imágenes de alta calidad están disponibles para pantallas más grandes y las imágenes de menor resolución están disponibles para pantallas más pequeñas. Partes de las imágenes también se pueden mostrar para pantallas más pequeñas para mantener la calidad de la imagen. Las imágenes pueden incluso ocultarse por completo. La optimización de imágenes se realiza en CSS, que consulta la altura de la pantalla, el ancho y la relación de píxeles del dispositivo y luego ajusta las imágenes en consecuencia (MDN, 2016).

Para obtener más información sobre sitios web receptivos, vea Métodos para móviles (Responsive vs Adaptive) de Brian Wood Training: https://www.youtube.com/watch?v=IgojC1D3QpU [Consultado el 30 de octubre de 2017