Dreamweaver es el más famoso de los editores WYSIWYG. No, no se me trabó el teclado, WYSIWYG significa “What You See Is What You Get”, es decir “Lo que ves es lo que obtienes”. Este es un editor de sitios web que no requiere conocimientos amplios de programación. En este artículo te cuento qué es Dreamweaver, para qué sirve y todo lo que tienes que saber sobre este software que te será súper útil si eres programador o diseñador web.
¿Qué es Dreamweaver?
Adobe Dreamweaver CC es la combinación entre un editor WYSIWYG y un editor HTML convencional. Es un software IDE (Entorno de Desarrollo Integrado), es decir, un software para el diseño de páginas web y aplicaciones, que permite editar y previsualizar los cambios en tiempo real.
Dreamweaver admite HTML, CSS, JavaScript y otros lenguajes de programación. Trabaja con la estructura de Adobe Creative Cloud, por lo que puedes incluir otras herramientas del entorno de Adobe y mejorar tu productividad.
Características de Dreamweaver
Dreamweaver te permite crear tu página web como otros editores en los que puedes escribir tu código como si fuera un texto. Pero tiene una característica especial que permite usar el método de drag and drop (arrastrar y soltar). Esta característica permite mover elementos a través del tablero de diseño y ver los cambios en vivo.
Además de esta característica, tiene otras propiedades que lo hacen único. Veamos cuáles son las más importantes.
1. Interfaz visual amigable para novatos
Es verdad que la primera vez que abres Dreamweaver te sientes un poco abrumado. Pero la característica de drag and drop para mover e insertar elementos HTML y la cantidad de tutoriales que existen en distintos idiomas, hacen que en poco tiempo un principiante ya pueda construir una sitio web básico con código HTML. Al trabajar en paralelo con el código y el resultado del mismo, puedes ver en cuál de los elementos del sitio estás haciendo las modificaciones, lo que facilita el trabajo.
A medida que vas adquiriendo experiencia y estudiando los tutoriales sentirás que la interfaz visual de Dreamweaver se hace cada vez más fácil de dominar, y no necesitarás una curva de aprendizaje tan grande como con otros editores.
Te comparto un artículo en el que explicamos cuánto se tarda en aprender a programar.
2. Editor de código incorporado
El editor de código incorporado que trae Dreamweaver es potente y eficiente para programadores avanzados. Entre sus propiedades más destacadas están el resaltado de sintaxis, que permite a través de diferentes colores distinguir entre distintos elementos, como etiquetas, variables, IDs y clases, entre otros elementos. Estas ayudas visuales sirven para disminuir la cantidad de errores y acelerar el desarrollo web.
Los programadores también agradecen las sugerencias de código y la posibilidad de autocompletar de forma inteligente. Por ejemplo, si quieres incluir una imagen, solo deberás poner img y al hacer clic en tu tecla Tab ya aparecerá <img src=”” alt=””>.
3. Es compatible con Git
Desde Dreamweaver puedes realizar las acciones más comunes para trabajar con Git, como son push, pull y commit.
4. Comunidad Dreamweaver
Como otros productos de Adobe, Dreamweaver tiene detrás una gran comunidad, por lo que dispones de un foro donde podrás hacer tus consultas para sacarte dudas y aprender de gente con más experiencia en este software.
5. Extensiones y librerías
Como otros editores, Dreamweaver tiene sus propias librerías, que pueden ser muy útiles para acelerar la creación de código. Una de las extensiones más populares es Campaign, que se usa para campañas de correo electrónico personalizados.
Las Bibliotecas Creative Cloud también disponen de distintas configuraciones para elegir entre diferentes colores. Además de contar con colecciones de gráficos e imágenes que podrás incorporar a tu sitio web.
6. Chromium Embedded Framework (CEF) integrado
Esta integración le permite al IDE de Adobe controlar la carga de recursos, los menús contextuales, la navegación y otras actividades con el mismo rendimiento y las mismas tecnologías de HTML5 que tiene Google Chrome.
7. Creación de sitios a partir de plantillas
Esta es una característica genial de Dreamweaver. Tiene plantillas prediseñadas que puedes elegir para crear tu propio sitio web. Entre otras ventajas, esto te permite ahorrar mucho tiempo, ya que gran parte del código ya está escrito. Además, te permite ver cómo quedará el sitio antes de comenzar a trabajar.
Para elegir una de estas plantillas alcanza con hacer 4 pasos: Abrir el menú File, luego New, elegir la opción Starter Templates y finalmente desplegar el menú Basic Layouts. Cuando hagas clic en Create tendrás en tu editor todo el código de esa plantilla y verás el resultado en la preview.
Si te dedicas al diseño web, te dejo un artículo con las preguntas más frecuentes que tendrás que responder en una entrevista.
8. Vista previa en tu teléfono móvil
Dreamweaver te permite ver en tiempo real cómo está quedando el sitio en dispositivos móviles. Hoy la mayoría de la gente accede a la web a través de sus celulares, por lo que es fundamental tener un sitio que sea responsive y se adapte a distintas pantallas.
Con Dreamweaver puedes ver si tu sitio se ve bien con unos simples pasos. Debes ir a Real-time preview y con tu teléfono escanear un código QR, o directamente en un navegador escribir la dirección URL que aparece junto al código. Y a partir de ese momento podrás ver cómo se refleja cada cambio en tu móvil.
9. Publicar desde Dreamweaver
Además de las facilidades que tiene para editar, Dreamweaver te facilita una de las tareas más molestas de la programación. El software viene con la función de transferencia de archivos FTP integrada.
Para poder publicar desde Adobe Dreamweaver solo necesitas tener un plan de hosting activo y una cuenta FTP. Podrás crear una conexión directa con el server, lo que no solo te permitirá publicar directamente, sino que también te permitirá realizar cambios en el código que impactarán de manera directa en el sitio almacenado en el server.
¿Cómo funciona el sistema de arrastrar y soltar?
Dreamweaver tiene un menú de Insert, donde encontrarás los distintos elementos necesarios para crear una página web, como Header, Heading: H1, Navigation (para botones de navegación), Paragraph y Unordered List. Es tan sencillo como abrir el panel de Insert, buscar el elemento que necesitas, completar una configuración y al hacer clic en Aceptar, ya tendrás agregado el código del elemento y podrás verlo en la previsualización. Luego podrás moverlo y cambiarlo de lugar.
Otra propiedad de este software que ayuda a los diseñadores web principiantes es el manejo de CSS. No es necesario escribir cada una de las características de estilo que quieres cambiar en un elemento, sino que cuenta con una serie de menús de estilos, es decir, tiene un menú para el Texto, otro para el Layout, y otro para Border. En cada menú verás las opciones que se pueden modificar de cada elemento, así que no es necesario recordarlas, sino que debes escribir los valores para cada una.
¿Cuánto cuesta Dreamweaver?
La mayoría de los IDEs son gratuitos, no es el caso de Dreamweaver. Este editor de Adobe tiene un costo que puede parecer elevado para quienes recién están empezando. La licencia mensual es de $35,99 dólares. Por suerte existen diferentes planes y promociones. Por ejemplo, tiene un plan anual para empresas en el que el costo mensual queda en $20,99. El costo para estudiantes es el mismo.
Otra opción es comprar un paquete que incluye todas las aplicaciones de Adobe Creative Cloud, que además de Dreamweaver incluye Photoshop, Acrobat Reader, Illustrator y muchos más programas exclusivos de Adobe. Existe la posibilidad de comprar la licencia de este paquete con un plan anual, que tiene un costo de 40 dólares mensuales.
Crédito editorial imagen principal: ©sharafmaksumov/123RF.COM
