Introducción a Dreamweaver cc - (i) La interfaz de usuario

CURSO DE ADOBEDREAMWEAVER CC(Guía de contenidos)

04/2016 - Plácido Luna / http://www.formaciongrafica.net/

01. Introducción¿Qué es Dreamweaver?

Dreamweaver es un software destina-do a la edición de documentos de dis-tintos formatos, casi todos ellos para uso en entorno web, permitiendo au-nar en la misma aplicación, vistas de código y de diseño. Su integración en la Suite de diseño de Adobe, su inte-gración con otros programas con los que se distribuye conjuntamente, y su acercamiento a los estándares web del World Wide Web Consortium (W3C), lo han convertido en uno de los pro-gramas más usados para la creación y edición de sitios web.

http://www.formaciongrafica.net/



El menú principal del programa contie-ne los accesos a la mayoría de las fun-ciones princiales de Dreamweaver.

A la derecha vemos el conmutador de espacios de trabajo, sobre el que habla-remos en clases.

Al momento de abrir o crear un nue-vo documento veremos la barra de herramientas del documento inmedia-tamente debajo de la posición del menú principal.

02. La interfaz de usuario de Dreamweavera. El menú principal

Dreamweaver permite trabajar con múltiples formatos de documentos, tales como: HTML, CSS, JS, SVG, PHP, XML, LESS ó SAS, entre otros:




Esta área de la interfaz de Dreamweaver nos permite “estacionar” (acoplar) aquellas pa-letas de uso frecuente, según el tipo de documento con el que estemos trabajando para tener un rápido acceso a las mismas.Como veremos en clases, podemos dejarlas colapsadas o abiertas, pudiendo cambiar las medidas de las mismas de acuerdo a nuestras necesidades.También es posible alterar la forma en que trabajemos con ellas, acoplándolas conjunta-mente a otras, con el fin de trasladarlas o moverlas en grupo (desde la barra de color gris que veremos sobre las pestañas de títulos), o de forma individual, desde la propia pestaña, la que nos servirá también para, una vez agrupadas, poder separarlas uno o más paneles de los demás.

02. La interfaz de usuario de Dreamweaverb. Dock de paneles acoplables




Este panel, contextual como veremos en clases, permite trabajar las propiedades de varios elementos sobre el documen-to en que estemos trabajando, las eti-quetas, propiedades y otros elementos que tengamos seleccionados. La primera de las imágenes que vemos a la derecha corresponden al panel de propiedades mientras no tenemos nin-gún documento aún abierto en DW, mientras que la segunda muestra el mis-mo inspector de propiedades mientras tenemos seleccionada una etiqueta en un documento HTML5.

i. Inspector de propiedades sin ningún documento activo.

ii. Inspector de propiedades mostrando opciones para una etiqueta HTML5 seleccionada.

02. La interfaz de usuario de Dreamweaverc. El inspector de propiedades




En Dreamweaver podemos crear un nuevo documento: Mediante los atajos de teclado: Ctrl+N ó CMD+N (según sea PC ó Mac) A través del menú principal: Archivo -> Nuevo Desde las opciones vistas en la pantalla 2.a

En todos los casos DW nos ofrecerá optar por los distintos tipos de documentos posi-bles, así como también optar por algunas de las opciones preestablecidas de que el progra-ma dispone (plantillas de inicio, documentos basados en Bootstrap, etc.).

03. Creando un nuevo documento en DWa. Nuevo documento HTML5




Una vez abierto el aspecto de DW cam-bia, mostrando nuevas opciones y aspec-tos en su interfaz gráfica. Al momento de crear un nuevo documento HTML, entre otros, vemos los siguientes:

i. Barra de herramientas del documentoii. Vista preliminariii. Área de códigosiv. Inspector de propiedadesv. Dock de paneles acopladosvi. Selector de etiquetas, etc.

03. Creando un nuevo documento en DW b. Aspecto de DW con un documento HTML5 abierto




Barra de herramientas del documento, en la cual distinguimos la pestaña del nuevo documento abierto (si hubiese más de uno los veríamos uno al costado del otro), y la barra contextual de herramientas

Como vimos antes, esta es el inspector de propiedades mostrando las opciones de una etiqueta HTML5 seleccionada.

03. Creando un nuevo documento en DW c. Herramientas del documento

e Inspector de propiedades




03. Creando un nuevo documento en DW d. Vista previa del documento

En esta zona Dreamweaver es capaz de mostrar una previsualización del documento que estemos diseñando o codificando, cada vez que esta vista sea posible; pudiéndose configurar dos formas de previsualización, con distintas funcionalidades: vista en Vivo y vista de Diseño.




03. Creando un nuevo documento en DW e. Panel de codificación

Esta vista, conmutable, nos permite trabajar sobre el código en Dreamweaver (modo preferido toda vez que esto sea po-sible). En la imagen vemos la edición del código de un nuevo documento HTML5.Debajo de la ventana de codificación vemos, entre otros, al selector de etiquetas, herramienta de gran importancia.




HTML5 (HyperText Markup Langua-ge, versión 5) es la quinta revisión del lenguaje HTML, que, en conjunto con CSS3 y JS, definen los nuevos estánda-res del desarrollo web.Esta nueva versión ha sido desarrollada, y de hecho sigue desarrollándose, para cubrir las nuevas necesidades tecnoló-gicas que impone la realidad actual, con muchas características de desarrollo semántico y de aplicaciones avanzadas que permiten mayor interacción entre el usuario y los contenidos de nuestra web, facilitando simultáneamente la codificación estadarizada de nuestros sitios y aplicaciones.

04. HTML5¿Qué es?




El CSS3 es la nueva revisión para la crea-ción de estilos (Cascade Style Sheet) con los cuales establecer los formatos (apa-riencia) de un documento de HTML, XHTML, etc, aunque éste último haya sido ya sustituído por HTML5.Más en general, su uso también puede extenderse a otros lenguajes, tales como el XML que permite modelar otros ti-pos de documentos.CSS3 incorpora nuevas propiedades y su desarrollo modularizado ha sido pensado para mantener la compatibili-dad con la revisón anterior (CSS2) por el W3C.

05. CSS3¿Qué es?




i. Novedades, ayudas y tutoriales varios con DW CC: https://helpx.adobe.com/es/dreamweaver/topics.html En esta página se tocan temas tales como: - Espacio de trabajo y flujo de trabajo, - Administración de un sitio, - Administración de archivos, - Composición y diseño, CSS, Contenido de página y activos, - Creando vínculos y opciones de navegación, - jQuery, vista previa de documentos, JavaScript, - Uso de plantillas en DreamWeaver, - Sitios web responsivos, sitios, páginas y formularios web dinámicos, - Creación visual de aplicaciones, - Dreamweaver y la accesibilidad, entre otros.

ii. Origen y actualizaciones a las notas de este documento: http://www.formaciongrafica.net/tutoriales-sobre/desarrollo-web/introd...

06. Enlaces recomendadosAyudas oficiales de Adobe y origen

y actualizaciones a este documento.


https://helpx.adobe.com/es/dreamweaver/topics.html

http://www.formaciongrafica.net/tutoriales-sobre/desarrollo-web/introduccion-a-dreamweaver-i

Introducción a Dreamweaver cc - (i) La interfaz de usuario

Documents

Transcript of Introducción a Dreamweaver cc - (i) La interfaz de usuario