[Como] Instalar Dreamweaver CS3 en Ubuntu 8.04

Con este super tutorial podremos instalar la mas completa suite de desarrollo web jamas creada nada menos que en Ubuntu Linux.

Comenzando con la instalación: Wine
Lo dicho, utilizaremos Wine a fin de crear un entorno similar a Windows para Dreamweaver. Si ya tienes instalado Wine puedes saltearte este paso, de lo contrario escribimos en una terminal:

sudo apt-get install wine

Y luego:

winecfg

Una vez hecho esto aparecera la ventana de configuración de Wine, hacemos clic en Aceptar para cerrarla. Ahora buscaremos la carpeta .wine en nuestro directorio personal (si no la encuentras, busca en el menú Ver y selecciona la opción Mostrar los archivos ocultos).

Importando Dreamweaver CS3 desde Windows
Para esto es necesario tener una partición con Windows y Dreamweaver instalados. Si no es así, la otra opción es instalar Windows XP con Dreamweaver en una máquina virtual.

Cualquiera sea el camino elegido, hay 5 carpetas esenciales que necesitaremos copiar a Ubuntu:

1. Abrimos el administrador de archivos y buscamos en Windows el directorio C:\Archivos de programa. Copiamos la carpeta ‘Adobe’ con todo su contenido a Ubuntu en /home/nombredeusuario/.wine/drive_c/Archivos de programa.

2. A continuación buscamos también en la partición de Windows el directorio C:\Documents and Settings\nombre_de_usuario_en_windows\Datos de programa (si no encuentras la carpeta Datos de programa, ve a Herramientas > Opciones de carpeta > Ver y selecciona Mostrar todos los archivos y carpetas ocultos) y copia la carpeta ‘Adobe’ con todo su contenido a Ubuntu en /home/nombredeusuario/.wine/drive_c/windows/profiles/All Users/Datos de programa.

3. Nuevamente buscamos en Windows el directorio C:\Archivos de programa\Archivos comunes y copiamos la carpeta ‘Adobe’ con todo su contenidos a Ubuntu en /home/nombredeusuario/.wine/drive_c/Archivos de programa/Archivos comunes.

4. Siguiendo con la partición de Windows buscamos C:\WINDOWS\system32 y copiamos la carpeta ‘Macromed’ con todo su contenido a Ubuntu en /home/nombredeusuario/.wine/drive_c/windows/system32.

5. Por último nos dirigimos a C:\WINDOWS y copiamos la carpeta ‘WinSxS’ con todo su contenido a Ubuntu en /home/nombredeusuario/.wine/drive_c/windows.
A continuación, debemos importar las claves del registro de Dreamweaver a Wine.

Para esto tendremos necesariamente que ingresar a Windows, hacer clic en Inicio > Ejecutar y en el cuadro de texto escribir regedit.

En el panel izquierdo de la ventana emergente, buscamos la ruta HKEY_LOCAL_MACHINE > SOFTWARE > Adobe > Dreamweaver. Una vez que lo hallamos hacemos clic con el botón derecho del mouse en la carpeta ‘Adobe’ y seleccionamos la opción exportar. Guardamos el archivo como dreamweaver.reg.

Copiamos dreamweaver.reg a nuestro directorio personal en Ubuntu.

Ahora necesitaremos convertir el archivo del registro a formato ASCII:

sudo apt-get install recode
recode ucs-2..ascii dreamweaver.reg
wine regedit dreamweaver.reg

Con esto ya hemos importado todos los archivos necesarios desde Windows hacia Ubuntu.
Para probar la instalación:

cd .wine/drive_c/Archivos\ de\ programa/Adobe/Adobe\ Dreamweaver\ CS3/

Y por último:

wine Dreamweaver.exe

Si todo ha ido bien Dreamweaver será ejecutado y tendremos algo como esto:

Adobe Dreamweaver CS3 corriendo en Ubuntu Hardy Heron

Creando una entrada en el menú de aplicaciones
Para crear una entrada en el menú de aplicaciones, haremos clic con el botón derecho del mouse en el menú Aplicaciones y seleccionamos Editar los menús.

Buscamos la entrada Wine > Programs y seleccionamos Elemento nuevo. Escribimos lo siguiente:

Type: Aplicación
Name: Dreamweaver CS3
Command: wine /home/nombredeusuario/.wine/drive_c/Archivos\ de\ programa/Adobe/Adobe\ Dreamweaver\ CS3/Dreamweaver.exe

Clic en Cerrar y listo. Con esto ya deberías tener la nueva entrada en el menu de aplicaciones. También puedes arrastrar la entrada hacia tu escritorio o al panel superior para crear un lanzador.

e-books gratuitos de Dreamweaver y Flash

Acaban de salir 2 libros de diseño disponibles para su descarga gratuita en la colección de Portafolio Blog.

El primero nos enseña a utilizar el programa Dreamweaver MX, un editor de códigos muy utilizado por los programadores web.

El segundo explica de forma sencilla las herramientas de Macromedia Flash MX, ideal para aprender flash y aplicarlo de forma correcta en una web.

Descargar libro Dreamweaver MX
Descargar libro Macromedia Flash MX

Aprender CSS en Dreamweaver CS3

Introducción

* Historia y el por qué de CSS
* La importancia de una buena escritura de XHTML

Funcionamiento

* Entendiendo y armando una regla CSS
* Formas de Aplicar el CSS en un documento
* Sobre la herencia y la cascada
* Elementos con que se relaciona CSS
* El modelo de caja

CSS y Dreamweaver

* Creación y Edición de estilos CSS con Dreamweaver CS3
* Edición directa en el código fuente usando Dreamweaver CS3
* El administrador de estilos CSS de Dreamweaver CS3

Aplicando CSS a

* textos
* vínculos
* listas
* imágenes
* tablas
* listas
* formularios

Diagramación de páginas

* páginas fijas
* páginas líquidas
* páginas elásticas
* páginas híbridas
* Elementos de Interfaz

Validación de CSS

* La importancia de la definición del documento html para css
* La importancia de saber las caracteristicas de los navegadores
* Validando con Dreamweaver
* Uso del validador de W3C
* Uso del check browser compatibility y el consejero CSS
* Los hacks y sus problemas con la validación.

CSS y otros Medios

* Uso de CSS en otros dispositivos
* XML y CSS

Acceder al curso

Manual Adobe Dreamweaver CS3

Tipo de Manual: PDF
Cantidad de Páginas: 1212
Idioma: Inglés
Peso del archivo: 22,49 MB.

ÍNDICE DEL MANUAL DE ADOBE DREAMWEAVER CS3

Acknowledgments
Introduction
Part I: Laying the Groundwork in Dreamweaver CS3
Chapter 1: What’s New in Dreamweaver CS3
Chapter 2: Introducing Dreamweaver CS3
Chapter 3: Touring Dreamweaver
Chapter 4: Setting Your Preferences
Chapter 5: Setting Up Sites and Servers
Part II: Designing and Crafting Core Pages
Chapter 6: Accessing the Code Directly
Chapter 7: Building Style Sheet Web Pages
Chapter 8: Working with Text
Chapter 9: Inserting Images
Chapter 10: Establishing Web Links
Part III: Adding Advanced Design Features
Chapter 11: Working with Divs and AP Elements
Chapter 12: Using Behaviors
Chapter 13: Setting Up Tables
Chapter 14: Interactive Forms
Chapter 15: Creating Lists
Chapter 16: Using Frames and Framesets
Chapter 17: Working with Timelines
Chapter 18: Powering Ajax Pages with Spry
Part IV: Incorporating Dynamic Data
Chapter 19: Establishing Connections and Recordsets
Chapter 20: Making Data Dynamic
Chapter 21: Managing Data
Chapter 22: Working with Live Data
Chapter 23: Crafting Multiple-Page Applications
Part V: Including Multimedia Elements
Chapter 24: Adobe Photoshop, Fireworks, and Bridge Integration
Chapter 25: Inserting Flash and Shockwave Elements
Chapter 26: Adding Video to Your Web Page
Chapter 27: Using Audio on Your Web Page
Part VI: Enhancing Productivity and Web Site Management
Chapter 28: Using Dreamweaver Templates
Chapter 29: Using Repeating Elements
Chapter 30: Maximizing Browser Targeting
Chapter 31: Building Web Sites with a Team
Chapter 32: Integrating with XML and XSLT
Part VII: Extending Dreamweaver
Chapter 33: Customizing Dreamweaver
Chapter 34: Handling Server Behaviors
Part VIII: Appendix
Appendix A: What’s on the CD-ROM?
Bonus Chapters
Bonus Chapter 1
Bonus Chapter 2
Index
End-User License Agreement
ix

Descargar Manual Adobe Dreamweaver CS3

Tips para Dreamweaver CS3

En el siguiente artículo presentamos algunos consejos útiles para los usuarios de Dreamweaver CS3.

Dreamweaver es una poderoso Editor WYSIWYG de páginas web. Este producto fue creado por Macromedia y luego adquirido por Adobe. La última versión de este producto Adobe Dreamweaver CS3, incorpora muchas mejoras que hacen que nuestro trabajo sea más sencillo y ahorra tiempo en el desarrollo de proyectos.

Esta poderosa herramienta es muy utilizada por los programadores y diseñadores web, entre los lenguaje que podemos utilizar para crear nuestros sitios web se encuentran (HTML, ColdFusion, PHP, ASP, XSLT, CSS, JavaScript, XML, JSP, ASP .Net).

Razones que plantea Adobe por las cuales debemos actualizar:

• Estructura Spry para Ajax
• Datos Spry
• Objetos Spry
• Efectos Spry
• Integración con Adobe Photoshop® y Fireworks®
• Comprobación de compatibilidad con el explorador
• Sitio web CSS Advisor (Asesor de CSS)
• Diseños de CSS
• Gestión de CSS
• Adobe Device Central CS3

Definir Sitio:

Definir un sitio nos ayuda a administrar de una forma más fácil nuestro sitio web, ya sea local o remoto. También nos posibilita el uso de “Templates”, crear caché de nuestro sitio entre otras posibilidades. Para ello debemos ir a la ventana “Files” u oprimir la tecla “F8”.

Uso de Templates:

El uso de Templates nos ayuda a mantener una plantilla de nuestro sitio. Esto nos posibilita el no tener que modificar todo el sitio cuando necesitamos realizar cambios. Para ello debemos seleccionar regiones editables.

• Make Template: esta opción nos permite salvar nuestra página web como plantilla, podemos definir su nombre. El sitio con el cual usaremos la plantilla.
• Editable Region: con ésta opción podemos definir las regiones que serán editables en el sitio. Debemos tener en cuenta que las regiones no editables deberán modificarse desde la plantilla.

Para crear una página desde la platilla es necesario crear un nuevo documento y seleccionar desde plantilla, luego nos mostrará una lista de las plantillas que hemos creado.

Chequear la compatibilidad de las páginas Web:

El verificar nuestro sitio es un paso importante ya que nos ayuda a comprobar si el mismo es compatible o no, con la mayoría de los navegadores. Con la opción “Check Browser Compatibility” podemos verificar la compatibilidad. Nos mostrará los resultados en la ventana de resultados.

Podemos configurar los navegadores con los cuales analizaremos la compatibilidad y su versión, para ello solo debemos ir a “Settings”.

Validación de documentos:

Debemos tener en cuenta lo útil y necesario que es el realizar validaciones de nuestro sitio. Podemos configurar las validaciones de los documentos en “Settings”.

Estas validaciones se realizan en el documento actual, en el sitio completo que tenemos definido, o seleccionar los ficheros que deseamos validar.

Usar HTML en caracteres especiales:

En muchas ocasiones encontramos páginas web que en lugar de mostrarnos los caracteres especiales como vocales con tildes (á, é, í, ó, ú) muestras caracteres extraños ilegibles . Para que esto no ocurra debemos sustituirlo por su código HTML.

Entre los caracteres especiales que más usamos encontramos:

• á - á
• é - é
• í - í
• ó - ó
• ú - ú

Estos caracteres especiales los podemos encontrar en la pestaña “Text” que se encuentra en la ventana “Insert”.

Es muy aconsejable usarlos siempre que necesitemos insertar estos tipos de caracteres.

Usar la Regla:

Esta importante opción que muchas veces pasamos por alto nos ayuda a mantener una alineación de nuestro diseño.

Si pinchamos la regla con el clic izquierdo del mouse y arrastramos hacia el área de trabajo, nos mostrará unas líneas que nos ayudarán a mantener en alineación los objetos de nuestro diseño.

Usar hojas de estilos CSS:

Es muy útil tener organizado los estilos en un fichero. En la esta ventana CSS se encuentra en la parte derecha de Dreamweaver, también podemos activarla con las teclas “Shift+F11”.

Con los botones de la parte inferior derecha podemos:

• Adjuntar una hoja de estilo externo.
• Agregar una nueva regla.
• Editar regla.
• Eliminar regla.

Vincular hojas de estilos a nuestras páginas del sitio nos ayuda a no repetir los códigos, y al realizar un cambio solo hacerlo en el fichero CSS.

Vista previa:

Esta opción nos permite tener una vista previa de nuestras páginas web. En la lista de navegadores podemos seleccionar el navegador con el que deseamos realizar la vista previa. También podemos Editar esta lista en la opción “Edit Browser List”.

Dreamweaver CS3 incorpora una nueva opción que nos permite tener una vista previa de nuestra Web en diferentes marcas y modelos de teléfonos celulares, esta opción se llama “Preview in Device Central”.

Barra de código:

Esta barra nos permite varias opciones como:

• Crear nuevo documentos.
• Colapsar código completo.
• Colapsar código seleccionado.
• Expandir todo.
• Seleccionar código.
• Mostrar número de líneas.
• Señalar código no válido.
• Crear comentario.
• Borrar comentario.
• Mover estilos a un fichero externo.
• Alinear código.
• Aplicar formato al códigos.

Utilizar Spry framework para AJAX:

Entre las mejoras incorporadas en Dreamweaver CS3 en esta nueva versión, se encuentran el SPRY framework para AJAX.

El Spry framework para Ajax esta compuesto por librerías Javascript para proveer funcionalidades en el diseño Web.

Los Spry de Datos nos permite mostrar datos desde un XML. Veremos en varios pasos como crearlo. Primeramente debemos definir los “Spry XML Data Set”, en este caso hemos utilizado el xml de Maestros del Web.

Pasos 1 : Spry XML Data Set

Definir el XML del cual podremos leer los datos.

• Data Set Name: Aquí definiremos el nombre, podemos definir el que deseemos. En este caso usamos “MaestrosDelWeb”.
• XML Source: Ruta donde se encuentra el XML, del cual se leerán los datos (preferiblemente debe estar dentro del directorio del sitio).
• Get schema: Al presionar este botón se verifican los elementos que contiene.
• Row element: Seleccionamos los elementos a mostrar. En este caso seleccionamos “item”, ya que son solo esos datos los que necesitamos leer.
  También podemos definir el tipo de datos, dirección, el tiempo en que se refrescaran los datos.
• Luego presionamos el botón “OK”, si todo esta correcto.

Paso 2 : Spry Region. Insertar la región de los Spry

Aquí se definirá el contenedor de los datos, el tipo, y el “Spry Data Set” a utilizar. En el paso anterior lo definimos con el nombre “MaestrosDelWeb”.

Spry Repeat. Mostrar los diferentes registros o item del XML. Si agregamos directamente los “Spry Repeat” sin seleccionar los “Spry Region” este nos preguntará si deseamos agregarla. Como es un paso necesario debemos agregarla.

Si solo deseamos mostrar un solo registro o item del XML no necesitamos usar los “Spry Repeat”. Estos nos permitirán recorrer todos los item del XML, para poder mostrarlos.

Pasos 3 : Insert Spry Repeat List. Insertar en forma de lista

Esta opción nos permite insertar los datos provenientes del xml en forma de lista. Podemos seleccionar el contenedor. El nombre del Spry de Datos “MaestrosDelWeb” y los datos que mostraremos. Estos podemos agregarlos de uno en uno si queremos mostrar varios. Insert Spry Table. Insertar en forma de tabla.

Y esta opción para resolver nuestros problemas cuando queremos mostrar nuestros datos en forma de tabla.

• Spry Data Set: Seleccionamos el nombre de nuestro Spry de Datos.
• Columns: Agregamos/Quitamos columnas, y la cambiamos de posición.
• Luego oprimimos OK.

Las otras opciones podemos ajustarlas a nuestro gusto, estilos y demás. Estos también pueden ser insertados por la Ventana de Aplicación “Bindings”, podemos mostrarla de forma rápida con las teclas “Ctrl+F10”. Podemos marcarlos y arrastrarlos.

Con los Spry de Validación podemos validar Campos de Texto, Listas Desplegables, Checkbox. Esta importante función nos brinda la posibilidad de validar los formularios de nuestro sitio web de parte del cliente, sin necesidad de realizar un POST a nuestro sitio.

Al seleccionar esta opción, podemos seleccionar el tipo de validación del campo, que puede ser Correo Electrónico, Dirección IP, Fecha, URL, Código Postal, etc. Podemos definir el formato con el que se va a validar. Definir una cantidad mínima y máxima de caracteres.

Los Spry Layout, nos brindan la posibilidad de crear interfaces de usuarios más dinámicas mediante componentes AJAX.

• Spry Menu Bar: nos brindan la posibilidad de crear menús horizontales y verticales. En las propiedades podemos configurarlo y adaptarlo a nuestras necesidades.



• Spry Tabbed Panels: como su nombre lo indica podemos crear paneles tabulados de una forma muy fácil.
• Spry Accordion, con esta opción podemos crear menú en forma de Acordión.
• Spry Collapsible Panel, nos permite crear paneles plegables, con los mismos podemos mostrar y ocultar información al seleccionarlos.

Esperamos que estos tips les permitan hace buen uso de las diferentes opciones que brinda Adobe Dreamweaver CS3 y compartan su experiencia en los comentarios en el uso del programa.

Video Tutorial en Español de Dreamweaver CS3

Dreamweaver CS3 no sólo supone la primera versión del potente programa de diseño web desde que está bajo el tutelaje de su nuevo propietario, Adobe, sino que también se trata de la primera versión que funciona de forma nativa en los Mac basados en procesadores Intel.

Dreamweaver CS3 ofrece nuevas herramientas para diseñadores y también una muestra de cómo pueden beneficiarse los usuarios de Dreamweaver de la integración con el resto de los programas que componen la Creative Suite.

Aqui el videotutorial..

Dreamweaver CS3