Creación de popups con JavaScript

del curso: Adobe Dreamweaver CS4 Básico

Comprar

Información sobre este video

Creación de una ventana emergente usando los comportamientos de Dreamweaver. Uso de comportamientos.

Una lección de: Adobe Dreamweaver CS4 Básico

Tanto si posees conocimientos de programación como si no, Adobe Dreamweaver CS4 es la herramienta fundamental para crear webs. Aprende a trabajar con el líder en el mercado, conociendo en profundidad todas las posibilidades que te ofrece.

USD 48.80

Comprar

Cursos similares

En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS4. También se describen los distintos menús y paneles y se muestra cómo modificar el espacio de trabajo.

DESCRIPCIÓN GENERAL DEL PROGRAMA
- Para poder crear un sitio web se pueden llegar a necesitar gran cantidad de archivos. Dreamweaver se ocupa de que el trabajo con todos estos archivos sea lo más fácil posible usando los sitios.
  
  Creación de sitios en Dreamweaver
  
  07:26
- Es importante comprender cómo modificar el espacio de trabajo para que los distintos paneles estén siempre a mano y no estorben.
  
  El entorno de trabajo
  
  08:45
- Un programa tan completo como Dreamweaver necesita de muchos paneles agrupados según funcionalidad. En este vídeo se aprende a manejar estos paneles.
  
  Utilización de los paneles
  
  07:17
- Gracias a las ayudas visuales y de programación el programa evita al usuario la repetición de tareas comunes.
  
  Ayudas visuales y de programación
  
  08:49
- Además de paneles, es necesario el uso de varias barras de herramientas, y es necesario saber cómo están estructuradas para poder optimizar su uso.
  
  Las barras de herramientas
  
  05:25
- Para poder sacarle el máximo partido a un programa, lo mejor es usar los atajos de teclado. Dreamweaver además permite su personalización.
  
  Métodos abreviados de teclado
  
  02:28
Para crear webs es necesario el uso de gran variedad de contenidos que las harán interesantes. En este capítulo se aprende a añadir los distintos tipos de contenido a las páginas HTML.

TRABAJO CON ELEMENTOS GRÁFICOS
- Los textos son la base de casi cualquier sitio web. Por ello es necesario conocer bien las posibilidades de formateo de texto que Dreamweaver ofrece.
  
  TEXTOS
  - Características del texto en la creación y visualización de páginas web. Bases de la creación de texto.
    
    Uso del texto en Dreamweaver
    
    06:35
  - Técnicas de formateo de texto: uso de estilos CSS y de etiquetas.
    
    Formateo de texto con CSS
    
    07:31
  - Conceptos básicos del texto en Dreamweaver: ediciones puntuales, cambios sobre etiquetas, creación de listas, uso de encabezados, inserción de caracteres especiales.
    
    Estrategias de formateo del texto
    
    08:25
  - Control de la codificación de los textos en las páginas web. Las propiedades del documento. Head
    
    Codificación de las páginas web
    
    07:56
- Para poder navegar entre páginas web es necesario que existan Hipervínculos que las comuniquen. En este apartado se aprende a añadir y formatear enlaces.
  
  VÍNCULOS
  - Creación básica de vínculos entre páginas. Vínculos a URL relativas y absolutas.
    
    Creación de Hipervínculos
    
    08:12
  - El formato básico de un enlace normalmente no queda estético en las páginas web. En este vídeo se aprende a formatear los hipervínculos.
    
    Aspecto de los enlaces
    
    03:33
  - Aquí se aprende a añadir enlaces a archivos, PDF, imágenes o a archivos descargables desde internet.
    
    Enlaces de descarga de archivos
    
    01:58
  - En este vídeo se describe cómo añadir enlaces que envíen correos electrónicos y cómo controlar esos envíos.
    
    Enlaces de correo electrónico
    
    03:07
  - Creación de navegación en una misma página web mediante el uso de anclajes con nombre.
    
    Navegación en una sola página
    
    04:51
  - Es muy útil para mejorar el aspecto de un sitio web el uso de imágenes con la función de vínculos. Así no tendremos que depender del texto simple para crear las botoneras de enlaces.
    
    Imágenes como hipervínculos
    
    02:44
- Utilización de las imágenes para mejorar el diseño de nuestras páginas web. Formateo de imágenes. Uso de imágenes interactivas.
  
  IMÁGENES
  - Vinculación de imágenes a los archivos HTML usando Dreamweaver.
    
    Inserción de imágenes en HTML
    
    04:07
  - Modificación de las propiedades de la etiqueta img. Formateo de imágenes.
    
    Modificación de las imágenes
    
    06:49
  - Minimización del ancho de banda consumido en nuestras webs mediante la optimización del ancho de banda desde Dreamweaver.
    
    Optimización de imágenes
    
    05:18
  - Adobe integra en sus suites el Adobe Bridge que simplifica la tarea de ordenar y controlar los archivos de nuestros sitios.
    
    Gestión de imágenes con Adobe Bridge
    
    03:58
  - Uso de imágenes de sustitución para crear botones.
    
    Imágenes de sustitución
    
    03:40
  - Integración de Dreamweaver y Photoshop para vincular imágenes a sus archivos originales Actualización de imágenes transformadas.
    
    Integración de Dreamweaver y Photoshop CS4
    
    05:21
  - Creación de mapas de zonas interactivas en imágenes complejas.
    
    Imágenes con zonas interactivas
    
    03:30
- Hoy en día, internet es mucho más que una serie de páginas con textos e imágenes. En estos vídeos se aprende a añadir animación, vídeo y sonido a los archivos HTML.
  
  MULTIMEDIA
  - Descripción de los tipos de archivo incrustables desde Dreamweaver. Descripción del uso de plugins.
    
    Uso de archivos multimedia
    
    04:49
  - Vinculación de archivos de Flash en las páginas HTML. Propiedades de los SWF insertados.
    
    Archivos SWF de Flash
    
    06:45
  - Adición de archivos de vídeo a las páginas web. Uso de archivos de vídeo y de archivos de vídeo de Flash (FLV).
    
    Archivos de vídeo
    
    05:25
  - Vinculación simple de archivos de sonido a las páginas HTML. Uso de plugins.
    
    Archivos de sonido
    
    01:42
Los estilos CSS van mucho más allá del simple formateo del HTML con etiquetas. En este capítulo se aprende a usar los estilos CSS para mejorar el diseño de las páginas web.

ESTILOS CSS
- Descripción de los estilos CSS. Uso básico de Dreamweaver con CSS.
  
  Uso de estilos CSS
  
  00:00
- Formateo de texto con estilos CSS. Uso de los estilos CSS.
  
  Formateo de texto con CSS
  
  00:00
- Uso de reglas CSS para formatear todo tipo de elementos en Dreamweaver.
  
  Elementos gráficos y CSS
  
  02:41
- Reglas CSS avanzadas para la creación de vínculos. Creación de botoneras basadas en texto.
  
  Formateo de vínculos con CSS
  
  06:19
- Buenas técnicas para trabajar con Dreamweaver y CSS: vistas de código y diseño vertical; uso de los paneles de CSS. Uso del navegador de código
  
  Manejo de estilos CSS
  
  04:08
El uso de formularios es fundamental para crear webs dinámicas en las que se pueda recuperar información del usuario. Uso de formularios en Dreamweaver CS4.

FORMULARIOS
- Creación de formularios para enviar información desde páginas web. Gestión de los datos enviados.
  
  Creación de formularios
  
  04:28
- Envío de textos desde formularios. Campos de texto, campos de contraseña, áreas de texto.
  
  Campos de texto
  
  07:18
- Creación de listas de opciones no excluyentes. Uso de casillas de verificación (checkboxes).
  
  Casillas de verificación
  
  02:44
- Creación de listas de opciones. Uso de botones de opción (radiobuttons).
  
  Botones de opción
  
  04:32
- Uso de desplegables en formularios. Listas y menús.
  
  Menús desplegables y listas
  
  03:57
- Creación de combos con enlaces para crear menús de salto de una manera rápida y fácil.
  
  Menús de salto para navegar
  
  01:34
- Creación de campos de selección de archivos para subirlos al servidor.
  
  Subir archivos desde formulario
  
  03:28
- Uso de campos ocultos para enviar información sin molestar al usuario.
  
  Utilización de campos ocultos
  
  02:50
- Creación de botones en formularios. Embellecimiento de formularios.
  
  Mejora de del aspecto de los formularios
  
  08:34
Para colocar los distintos elementos visuales donde queremos usar HTML, es necesario el uso de tablas y etiquetas DIV.

MAQUETACIÓN DE PÁGINAS HTML
- Organización de datos usando listas. Uso de CSS con las listas.
  
  Formateo de listas
  
  05:58
- Descripción de las distintas estrategias de diseño: usando tablas o etiquetas DIV. Hojas de estilo CSS.
  
  Descripción de las técnicas de diseño
  
  04:24
- Utilización de tablas para organizar los datos y los contenidos visuales. Propiedades de las tablas.
  
  USO DE TABLAS
  - Descripción básica de los atributos de las tablas. Modificación simple de las tablas. Formateo de filas, columnas y celdas.
    
    Descripción y formateo de las tablas
    
    09:38
  - Creación de tablas complejas de manera automática mediante la importación de datos guardados en archivos externos.
    
    Importación de datos
    
    04:14
  - Ordenación de los datos de las tablas. Criterios de ordenación. Mejora del aspecto de las tablas de datos.
    
    Ordenación de tablas
    
    01:40
- Uso de etiquetas DIV y de estilos CSS para controlar la posición de los distintos elementos de las páginas HTML.
  
  USO DE ETIQUETAS DIV
  - Uso de etiquetas DIV con posicionamiento absoluto para crear web complejas.
    
    Etiquetas DIV PA
    
    06:46
  - Uso de las plantillas basadas en DIV y CSS que suministra Dreamweaver.
    
    Plantillas basadas en DIV y CSS
    
    04:43
- Uso de imágenes de rastreo para el diseño de páginas web.
  
  Uso de imágenes de rastreo
- Uso de Adobe Fireworks para diseñar HTML y cómo exportar de HTML desde este programa.
  
  Creación de HTML desde Fireworks
  
  03:00
- Ejemplos de creación de diseños en HTML usando div y div PA combinados con clases. Herramientas de maquetación con CSS
  
  EJEMPLOS PRÁCTICOS DE DISEÑO
  - Adición de etiquetas DIV y control del CSS que les dan el aspecto final a nuestra web.
    
    Diseñando con etiquetas DIV y CSS
    
    12:56
  - Colocación de elementos con posicionamiento absoluto. Uso de Adobe Dreamweaver para controlar sus propiedades visualmente.
    
    DIV de posicionamiento absoluto y CSS
    
    07:39
  - Modificación del aspecto variando los CSS que controlan el diseño del HTML.
    
    Aplicación de estilos CSS para diseñar
    
    03:40
En webs complejas es necesario minimizar tanto el tiempo de trabajo como el ancho de banda. Para ello es importante el uso correcto de los IFRAMES y de los marcos.

DIVISIÓN DE HTML EN IFRAMES Y MARCOS
- Uso de IFRAMES como sustituto de los marcos. Carga de páginas HTML dentro de mis HTML. Formateo de IFRAMES.
  
  Uso de IFRAMES
  
  04:45
- Uso de marcos. Creación de páginas complejas usando múltiples archivos HTML.
  
  Uso de marcos
  
  03:50
- Maquetación web usando marcos. Control del aspecto de los marcos.
  
  Maquetación mediante marcos
  
  03:17
- Uso de enlaces entre distintos marcos. Formateo avanzado de webs usando marcos.
  
  Vínculos usando marcos
  
  02:51
El lenguaje HTML simplemente sirve para mostrar visualmente elementos en el navegador. Dreamweaver en combinación con JavaScript nos ofrece múltiples herramientas que permiten el uso de JavaScript sin necesidad de tener conocimientos de él.

JAVASCRIPT
- Herramientas de programación con JavaScript en Dreamweaver. Uso de comportamientos.
  
  PROGRAMACIÓN DE JAVASCRIPT
  - Programación con JavaScript en Dreamweaver. Herramientas de programación.
    
    Uso de JavaScript
    
    03:57
  - Creación de una ventana emergente usando los comportamientos de Dreamweaver. Uso de comportamientos.
    
    Creación de popups con JavaScript
    
    04:44
  - Uso de comportamientos para validar formularios.
    
    Validación de formularios
    
    04:36
  - Control de la navegación dependiendo de la versión de navegador. Comprobación de plugins.
    
    Detección de plugins y navegadores
    
    03:09
  - La versión CS4 ha hecho un gran esfuerzo para mejorar el proceso de trabajo con Javascript y CSS. Descripción del uso de las nuevas herramientas.
    
    Adobe Dreamwever CS4 y javascript
    
    07:48
- Reutilización de código. Uso, modificación y creación de fragmentos de código reutilizables.
  
  FRAGMENTOS
  - Descripción del panel de fragmentos. Uso de los fragmentos.
    
    Descripción de los fragmentos
    
    03:41
  - Creación y modificación de fragmentos. Ejemplos de fragmentos.
    
    Modificación de fragmentos
    
    05:51
  - Creación de código complejo usando fragmentos. Control de errores de JavaScript usando el navegador.
    
    Creación de elementos con fragmentos
    
    03:47
- Creación de elementos interactivos basados en AJAX. Uso de los elementos suministrador por Dreamweaver.
  
  SPRY
  - AJAX es la suma de varias tecnologías, principalmente JavaScript, XML y CSS. En este vídeo se describen los principios básicos de AJAX y Dreamweaver.
    
    Descripción de AJAX
    
    03:36
  - Elementos de formulario SPRY. Formularios autovalidados.
    
    Elementos de formularios Spry
    
    12:51
  - Menús y paneles de fichas SPRY. Creación y formateo.
    
    Menús Spry
    
    07:09
  - Uso de componentes de AJAX para organizar grandes cantidades de datos en poco espacio: desplegables, pestañas y acordeones SPRY.
    
    Organización de datos en paneles Spry
    
    04:22
  - Creación y formateo de la herramienta de creación de tooltips Spry.
    
    Creación de tooltips con Spry
    
    06:04
  - Uso de elementos SPRY para la importación dinámica de datos para su presentación en páginas web.
    
    Catálogos de datos con conjuntos de datos SPRY
    
    05:34
Control del sitio local y de los archivos en el servidor remoto. Uso de plantillas y biblioteca para automatizar el diseño de múltiples páginas web.

ADMINISTRACIÓN. PLANTILLAS Y BIBLIOTECA
- Adobe Dreamweaver está formado por un editor de páginas web y un organizador de sitios para el control de los archivos del sitio web. Aquí se aprende a configurar sitios y preparar el sitio en el servidor remoto.
  
  ADMINISTRACIÓN DE SITIOS
  - Configuración de sitios. Conexión del sitio local con el servidor remoto. Subida de archivos al servidor.
    
    Configuración de los sitios
    
    11:00
  - Opciones de protección de archivos, sincronización y notas informativas para el trabajo en equipo.
    
    Protección de archivos y notas de diseño
    
    07:28
  - Uso del panel de activos para tener siempre a mano todo tipo de elementos útiles en nuestros sitios
    
    Panel de activos
    
    02:51
  - Exportación de sitios para su configuración en otros ordenadores.
    
    Exportación de sitios
    
    02:10
  - Control del aspecto del panel de archivos y las preferencias relacionadas
    
    Configuración avanzada de sitios
    
    02:33
- La utilización de plantillas hace que la tarea de crear y modificar páginas HTML similares sea algo simple y automático.
  
  PLANTILLAS Y BIBLIOTECA
  - Creación de plantillas para la reutilización de diseños y la automatización de los cambios de maquetación.
    
    Creación y uso de las plantillas
    
    09:55
  - Anidación entre plantillas. Plantillas anidadas en otras para crear apartados con diseños dependientes.
    
    Plantillas anidadas
    
    08:23
  - Corrección de errores provocados por el uso de código CSS y javascript en plantillas.
    
    Código externo incrustado en plantillas
    
    02:50
  - Control sobre las etiquetas y sus atributos usando los atributos editables.
    
    Creación de atributos editables
    
    03:18
  - Creación de regiones opcionales para mostrar u ocultar elementos en archivos dependientes de plantillas.
    
    Regiones opcionales
    
    02:29
  - Creación de regiones repetidas para controlar elementos de apariencia controlada mediante plantillas, repetidas un número indefinido de veces.
    
    Regiones repetidas
    
    01:34
  - Manipulación de los archivos dependientes de plantillas. Separación de archivos.
    
    Archivos dependientes de plantillas
    
    02:00
  - Creación, modificación y reutilización de elementos de biblioteca en sitios de Dreamweaver.
    
    Elementos de biblioteca
    
    04:04
Herramientas globales de control de la calidad del código generado.

HERRAMIENTAS DE CÓDIGO
- Herramientas de control de la codificación en Adobe Dreamweaver CS4.
  
  Codificación del HMTL
  
  08:24
- Optimización del HTML generado por otros programas, o de HTML ensuciado en el proceso de diseño.
  
  Optimización del HTML
  
  02:12
- Herramientas de búsqueda de errores en el código.
  
  Validación del código
  
  06:49
- Herramientas de comprobación de la compatibilidad del código en diferentes versiones de navegadores.
  
  Compatibilidad con navegadores
  
  01:54
- Búsqueda de enlaces problemáticos.
  
  Control de enlaces rotos
  
  02:50
- Generación de informes sobre errores y advertencias en todo el código del sitio.
  
  Informes del sitio
  
  03:09
- Herramienta de buscar y reemplazar para localizar y cambiar textos, etiquetas o atributos repetidos.
  
  Buscar y reemplazar
  
  02:53
Fundamentos de la creación de aplicaciones de servidor mediante Adobe Dreamweaver.

SITIOS DINÁMICOS
- Descripción básica de las aplicaciones de servidor. PHP y ASP.NET. Directivas de instalación.
  
  Configuración del equipo
  
  07:26
- Descripción de la configuración de Adobe Dreamweaver para trabajar con sitios dinámicos. Configuración de la base de datos.
  
  Configuración del sitio y base de datos
  
  09:58
- Además de la posibilidad de programar normalmente, Adobe Dreamweaver también ofrece elementos dinámicos prediseñados como juegos de registros o formularios de inserción. Ejemplo práctico de uso.
  
  Creación de PHP. Ejemplo sencillo
  
  08:55