Saltar al contenido principal
LibreTexts Español

6.5: El proceso de desarrollo web

  • Page ID
    67529
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    En esta sección se analiza el proceso de construcción de un sitio web desde la perspectiva del cliente.

    clipboard_e992702f244f8f2360355002940d03755.png
    Figura\(\PageIndex{1}\): El proceso de desarrollo web

    Paso 1: Descubrimiento y planeación

    Planear un sitio web comienza con la investigación de su mercado, sus usuarios, sus competidores y su negocio. Si ya tiene un sitio web, puede usar los datos de análisis web existentes para comprender qué tan bien está satisfaciendo las necesidades de sus usuarios. También vale la pena ejecutar algunos laboratorios de usuarios para ver cómo los usuarios interactúan con su sitio existente. Eche un vistazo al capítulo de Investigación de mercados para una discusión detallada de esto.

    Nota

    Lee más sobre esto en el capítulo Investigación de mercados.

    Preguntas clave que debes hacer.

    Negocios: ¿Cuáles son sus objetivos de negocio? ¿Cómo debería ayudarte esta propiedad digital a lograr esos objetivos? (Por ejemplo, ¿debería generar leads para que le den seguimiento? ¿Es una tienda de comercio electrónico?)

    Usuarios: ¿Quiénes son tus usuarios, tus clientes potenciales? ¿Qué problema necesita tu sitio web para ayudarles a resolver? Por ejemplo, para recopilar información de viaje en un solo lugar, como con www.tripit.com. [Consultado el 30 de octubre de 2017]

    Nota

    Lea más sobre los usuarios en el capítulo Diseño de experiencia de usuario.

    Esta investigación te ayuda a planificar tu sitio web estratégicamente, asegurando que esté alineado tanto con las necesidades del usuario como con los objetivos de negocio.

    En investigación y planeación, también debes llegar a comprender qué tareas o acciones deben hacer los usuarios en tu sitio web. Estos suelen estar en línea con sus objetivos de negocio. Algunas tareas que un usuario puede necesitar hacer incluyen verificar la disponibilidad de un hotel, suscribirse a un boletín informativo o imprimir información.

    Antes de que comience cualquier proyecto de diseño web, decida para qué navegadores, sistema operativo y dispositivos desarrollará. Por lo general, para los navegadores se utiliza lo último, más uno antes. Para los dispositivos, iOS y Android son bastante diferentes así que si estás optimizando para ambos esto puede ser bastante caro. La tecnología se mueve tan rápido que no puede mantenerse al día con los últimos sistemas operativo y dispositivos.

    Elegir un nombre de dominio

    Los nombres de dominio son importantes. Forman parte de la URL de un sitio web. Un nombre de dominio se ve así: www.miempresa.com

    En esto se puede incluir mucha más información. Los nombres de dominio pueden contener la siguiente información: subdominio.dominio.tld/directory

    Dominio — el nombre de dominio registrado del sitio web

    Subdominio: un dominio que forma parte de un dominio más grande

    TLD: el dominio de nivel superior, el más alto en la jerarquía de nombres de dominio

    directorio — una carpeta para organizar el contenido

    El TLD puede indicar el país en el que se registra un dominio y también puede dar información sobre la naturaleza del dominio.

    com — el TLD más común

    co.za, .co.uk, .com.au — estos TLD dan información del país

    .org — utilizado por organizaciones sin fines de lucro

    .gov — utilizado por los gobiernos

    .ac — utilizado por instituciones académicas

    Los nombres de dominio deben estar registrados, y en la mayoría de los casos hay una tarifa por hacerlo. Muchos proveedores de hosting registrarán nombres de dominio en tu nombre, pero también puedes hacerlo tú mismo.

    Los nombres de dominio deben ser fáciles de recordar y, si es posible, incluir palabras clave de búsqueda importantes para su negocio. Por ejemplo, si estuvieras construyendo un sitio web para tu restaurante llamado Omega, www.omegarestaurant.com podría ser una mejor opción que www.omega.com ya que contiene la palabra clave importante 'restaurant'.

    UX y estrategia de contenido

    También es necesario recopilar, analizar y trazar qué contenido se necesita en el sitio web. Este contenido se estructura luego en un proceso llamado arquitectura de la información. Un mapa del sitio debe reflejar la jerarquía de contenido en el sitio web y la navegación (cómo los usuarios se abren paso a través de un sitio web).

    Nota

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

    clipboard_e0433b0870e704933ff553a537c3c6c05.png
    Figura\(\PageIndex{2}\): Un wireframe bosquejado de cómo serán las páginas web y cómo se vincularán entre sí Adaptado De Onextrapixel, 2010
    Nota

    Consulte este enlace (designmodo. com/wireframingprototypingmockuping/) para una buena explicación sobre las diferencias entre wireframing, prototipado y burlas.

    clipboard_e7270d15da3fbc6b60476539ec8bf065b.png
    Figura\(\PageIndex{3}\): Un ejemplo de un wireframe contra cómo se ve el sitio web final Adapted From Wirify, 2017

    Al mismo tiempo, considera qué contenido quieres incluir en tu sitio. ¿Será un sitio relativamente estático que no cambia a menudo, o necesitará un CMS editable para agregar y actualizar regularmente contenido, como publicaciones de blog, imágenes y productos?

    Nota

    Eche un vistazo a la discusión sobre cómo elegir un sitio web estático frente a un CMS anteriormente en este capítulo

    En caso de que el sitio web sea lo suficientemente grande como para requerirlo, se debe crear un documento de especificación funcional, utilizando toda la información recopilada hasta el momento. Este documento debe detallar los requisitos de desarrollo para el sitio web y puede ser utilizado para comunicar cualquier restricción específica de diseño.

    Ahora es el momento de pasar de la planeación a la construcción.

    Visibilidad en buscadores

    El tráfico de los motores de búsqueda es vital para un sitio web; sin él, lo más probable es que el sitio nunca cumpla con sus funciones de marketing. Es esencial que los motores de búsqueda puedan ver todo el sitio web públicamente visible, indexarlo completamente y considerar su relevancia para las palabras clave elegidas.

    La optimización de motores de búsqueda (SEO) tiene su propio capítulo en este libro de texto, pero aquí están las consideraciones clave para el desarrollo y diseño web.

    Nota

    Lee más sobre esto en los capítulos Redacción digital y Optimización de motores de búsqueda.

    En el desarrollo web, la copia que se muestra en la página web debe mantenerse separada del código que le dice al navegador cómo mostrar la página web. Esto significa que la araña del motor de búsqueda podrá discernir fácilmente qué contenido va a ser leído y por lo tanto escaneado por la araña y qué texto es una instrucción para el navegador. Las hojas de estilo en cascada (CSS) pueden encargarse de eso.

    Si el buscador no puede ver el texto en la página, significa que no puede rastrear e indexar esa página.

    Paso 2: Diseño

    El diseño suele ocurrir antes del desarrollo. De acuerdo con los pasos explicados anteriormente en este capítulo, el diseñador transformará los wireframes y los materiales básicos de planificación en diseños bellamente diseñados. Estas son imágenes estáticas que muestran cómo se verá el sitio web una vez que esté codificado.

    Paso 3: Desarrollo

    La fase de desarrollo suele iniciarse una vez que se termina el diseño. Los desarrolladores a veces comienzan su participación tan pronto como la etapa de estructura metálica mediante la creación de prototipos de baja fidelidad para apoyar el proceso de pruebas de usuario. Normalmente, el desarrollador utiliza las plantillas de diseño para codificar el sitio web real, utilizando el lenguaje front-end que hayas elegido. El desarrollo del lado del servidor y las consideraciones de CMS también pueden ser parte de esta fase.

    Paso 4: Prueba y lanzamiento

    Una vez que hayas planeado un sitio increíble, lo diseñaste maravillosamente, lo construiste hábilmente y lo llenaste con una copia fantástica, ¡es hora de probarlo completamente y luego tomarlo en vivo!

    Las pruebas son una parte importante del desarrollo y diseño de sitios web, y deben llevarse a cabo durante todo el proceso de planeación, diseño y construcción, dejando solo pruebas de control de calidad final (QA) antes de que el sitio entre en funcionamiento. Los sujetos de prueba deben ser usuarios potenciales reales del sitio web, no solo miembros del equipo de desarrollo. El sitio debe probarse en todos los navegadores y dispositivos comunes para asegurarse de que se vea y funcione como debería en todos ellos. Todos los enlaces deben probarse para asegurarse de que funcionan correctamente, y siempre es una buena idea obtener una verificación final de toda la copia antes de que se publique.

    Herramientas como el validador HTML del W3C, validator.w3.org deben usarse para validar tu HTML. Ver más sobre pruebas en la Sección 6.7 Aseguramiento de la calidad.

    Asegúrese de que sus etiquetas de seguimiento de análisis web estén en su lugar, después de lo cual será el momento de llevar su sitio en vivo. Ahora, debe pasar a dirigir el tráfico a su sitio recién lanzado, ahí es donde todas las tácticas Engage en este libro de texto son útiles.


    This page titled 6.5: El proceso de desarrollo web is shared under a CC BY-NC-SA 3.0 license and was authored, remixed, and/or curated by Rob Stokes via source content that was edited to the style and standards of the LibreTexts platform; a detailed edit history is available upon request.