Flujo de trabajo de alto nivel que describe el diseño y el desarrollo de sitios web con Dreamweaver

Este artículo le ayuda a comprender cómo se completan las diferentes etapas o fases de desarrollo web con Dreamweaver.

Nota:

En este artículo se asume que tiene un nivel de conocimiento de básico a intermedio del dominio de la web, HTML, CSS y JavaScript.

  1. El primer paso en el desarrollo web es la fase de planificación en la que se analizan las necesidades de la audiencia y los requisitos técnicos y de marketing. También se recopila la información necesaria para diseñar y publicar su sitio web y obtener las respuestas a preguntas como estas:

    • ¿Qué proveedor de servicios puedo elegir para alojar el sitio web? ¿Puedo acceder al servidor de publicación para cargar archivos?
    • ¿Qué nombre de dominio utilizar para el sitio web?
    • Si se están migrando sitios web existentes a Dreamweaver, ¿dónde están almacenados actualmente los archivos y activos? ¿Puedo acceder al servidor donde se almacena esta información?
    • Si se desea una página web dinámica, ¿qué servidor puedo utilizar para comprobar si los datos se muestran dinámicamente? ¿Tengo los detalles del servidor de aplicaciones web que deseo utilizar para cargar los datos dinámicos?
    • ¿Qué tipo de activos son necesarios para el sitio web?
    • ¿Se diseñarán estos activos a partir de cero? Si los activos ya existen, ¿puedo acceder a ellos?
    • ¿Qué aplicaciones quiero utilizar para diseñar activos?
    • ¿Quiero crear un sitio web adaptable? 

    Si ya tiene un conocimiento claro de la página web que desee desarrollar y cómo y dónde desea hospedarla, y ha elegido Dreamweaver y Creative Cloud para el proceso de desarrollo web, continúe con el paso siguiente.

  2. Compruebe si tiene todos los activos necesarios para el sitio web. Reúnalos y organícelos juntos en sus carpetas locales o en las Bibliotecas Creative Cloud de Adobe.

  3. Cree un nuevo documento al utilizar Dreamweaver con:

    • Un nuevo documento en blanco
    • Plantillas de inicio empaquetadas con Dreamweaver, o 
    • Archivos de plantilla (*.dwt) de terceros

    Nota:

    Si no está familiarizado con Dreamweaver o solo tiene un conocimiento básico del desarrollo web, las plantillas de inicio son una gran ayuda para empezar a diseñar páginas web.

    Incluso si tiene previsto empezar desde cero, es conveniente que observe estas páginas para comprender los elementos de un buen diseño de páginas web.

  4. Tómese unos minutos para familiarizarse con el espacio de trabajo de Dreamweaver. Encuentre un espacio de trabajo que le guste y defina un tema de color. Reorganice los distintos paneles de la forma que más le convenga.

  5. Configure el sitio en Dreamweaver. Configure una estructura de carpetas con archivos y activos. Una vez que haya organizado la información y determinado una estructura, podrá comenzar a crear el sitio. (Consulte Acerca de sitios de Dreamweaver.)

    En esta etapa, es una buena idea configurar también las conexiones con servidores remotos y servidores de prueba de configuración (si tiene contenido dinámico). 

  6. Comience a programar sus páginas web en Vista de código o a diseñarlas en Vista de diseño/en vivo.

    Si tiene intención de utilizar composiciones de Photoshop, también puede extraerlas en Dreamweaver y trabajar con ellas. Para obtener más información sobre el trabajo con composiciones de Photoshop, consulte Extract en Dreamweaver CC.

    Añada elementos de diseño, como texto, imágenes, imágenes de sustitución, mapas de imágenes, colores, películas, sonido, vínculos HTML, tablas y mucho más.

  7. Diseñe la apariencia de su página web con CSS. 

    En Dreamweaver, puede trabajar con CSS de varias formas:

    • Puede introducir manualmente el código CSSPara obtener información sobre las funciones de codificación de Dreamweaver que le ayudan a introducir manualmente el código CSS, consulte Entorno de programación en Dreamweaver.
    • Si no está muy familiarizado con la creación de páginas de CSS, también puede utilizar el Panel Diseñador de CSS para facilitar la creación de CSS. Para obtener más información, consulte Diseño de páginas con el Diseñador de CSS.
    • Si prefiere trabajar con Sass y Less, Dreamweaver también admite esa opción, lo que le permite incluir archivos Sass y Less en el sitio de Dreamweaver y trabajar con ellos. Dreamweaver los compila automáticamente (también puede elegir compilarlos manualmente) y ver los resultados de los cambios en CSS en tiempo real.Para obtener información sobre el uso de archivos Sass y Less con Dreamweaver, consulte Preprocesadores de CSS.
  8. Configuración de una aplicación web para crear contenido dinámico.

    Muchos sitios web contienen páginas dinámicas que permiten a los visitantes ver información almacenada en bases de datos y que suelen permitirles añadir y editar información. Para crear esas páginas, debe configurar primero un servidor y una aplicación web, crear o modificar un sitio de Dreamweaver y conectarse a una base de datos. Para obtener más información, consulte Sitios, páginas y formularios web dinámicos.

  9. Creación de páginas dinámicas.

    En Dreamweaver se pueden definir diversas fuentes de contenido dinámico, incluidos juegos de registros extraídos de bases de datos, parámetros de formularios y componentes JavaBeans. Para añadir el contenido dinámico a una página, basta con arrastrarlo a ella.

    Puede configurar su página de manera que los registros de la página aparezcan de uno en uno, o varios a la vez, mostrar varias páginas de registros, añadir vínculos especiales para pasar de una página de registros a la siguiente (o a la anterior) y crear contadores para que los usuarios puedan llevar un control de los registros. Para obtener más información, consulte Sitios, páginas y formularios web dinámicos.

  10. Prueba, vista previa y publicación del sitio web. 

    A medida que cree las páginas, debe obtener una vista previa para ver que la página web progresa de acuerdo con el diseño. Puede escribir código en la vista dividida para ver el código y la vista en vivo en paralelo.

    También puede obtener la vista previa de las páginas web en tiempo real en un dispositivo (si está creando sitios web adaptables) o en un navegador.

    Si no necesita una experiencia de vista previa dinámica, puede usar la vista previa normal en el explorador.

    Si ya ha definido conexiones con servidores remotos, para publicar el sitio web deberá grabar los archivos en el servidor remoto.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea