Diseño y Desarrollo Web

COLEGIO DE BACHILLERATO
“TONCHIGÜE”
Decreto Ministerial # 3119 / 21 – Diciembre de 1978
CÓDIGO AMIE: 08H01315 / Distrito 08D03 – Circuito: C08
Tonchigüe – Atacames – Ecuador
MÓDULO DE
Alumno: ………………………………………………
Docente: Madelin Vizcaino Castillo
3ro “A” INFORMÁTICA

“TONCHIGÜE”
2019 -2020
CONCEPTOS BÁSICOS DE WEB

UNA PÁGINA WEB
Está compuesta por uno o varios documentos html relacionados entre sí mediante
hipervínculos (enlaces). Además, estos documentos pueden contener otros elementos como
pueden ser imágenes, sonidos, animaciones multimedia, aplicaciones...

PÁGINA WEB
Documento realizado en HTML y que es parte de un sitio Web. Aparte del HTML se
pueden utilizar otros lenguajes complementarios como PHP, ASP, Javascript...
Se conoce como página Web, página electrónica o página digital a un documento digital

de carácter multimediático (es decir, capaz de incluir audio, video, texto y sus
combinaciones), adaptado a los estándares de la World Wide Web (WWW) y a la que se
puede acceder a través de un navegador Web y una conexión activa a Internet. Se trata del
formato básico de contenidos en la red.
En Internet existen más de mil millones de páginas Web de diversa índole y diverso

contenido, provenientes del mundo entero y en los principales idiomas hablados. Esto
representa el principal archivo de información de la humanidad que existe
actualmente, almacenado a lo largo de miles de servidores a lo largo del planeta, a los
que es posible acceder velozmente gracias a un sistema de protocolos de comunicación
(HTTP).
SITIO WEB
Página principal y sus otras páginas, gráficos, documentos, multimedia y otros archivos
asociados que se almacenan en un servidor Web o en el disco duro de un equipo.
HTML
(Lenguaje de marcado de hipertexto) Lenguaje estándar de marcas empleado para
documentos del World Wide Web.
HIPERVÍNCULO
2
“TONCHIGÜE”
Al hipervínculo se le suele llamar "enlace web" o en su versión anglosajona "link". Un
hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o
una ubicación diferente en la misma página. El destino es con frecuencia otra página Web,
pero también puede ser una imagen, una dirección de correo electrónico, un archivo (como,
por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa.
Un hipervínculo puede ser texto o una imagen. lenguaje de programación: Lenguaje con el
que está desarrollada una página web.

EDITOR
Programa utilizado para crear páginas web sin la necesidad de tener que aprender el
lenguaje. Ejemplos: M. FrontPage 2000 y Macromedia Dreamweaver.
SERVIDOR
Máquina conectada a Internet que -entre otros servicios- ofrece albergue para páginas web
haciendo que estén accesibles desde cualquier punto de Internet.
CLIENTE FTP
El Protocolo de transferencia de archivos (en inglés File Transfer Protocol o
FTP) es un protocolo de red para la transferencia de archivos entre sistemas
conectados a una red TCP (Transmission Control Protocol), basado en la
arquitectura cliente-servidor.
Programa que permite conectarse al servidor para publicar páginas web.
HOSTING
Hospedaje web. Espacio de disco donde se almacena las páginas webs para que sean
accesibles a través de Internet.
DOMINIO
Dirección web asociada a una página web. ISP: En el ámbito del desarrollo de sitios web,
se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios
que pueden ofrecer son: conexión a Internet, registro de dominio, hospedaje de sitios web,
servicios de contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre
otros.
URL
(Universal Resource Location / Localizador de recursos universal) Cadena que
proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web,
3
“TONCHIGÜE”
junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso. El tipo más
común de dirección URL es http://, que proporciona la dirección de Internet de una página
Web. Otros tipos de dirección URL son gopher://, que proporciona la dirección de Internet
de un directorio Gopher, y ftp://, que proporciona la ubicación de red de un recurso FTP.
Ejemplos:
http://www.desenredate.com
http://www.google.com
APPLETS
Programas desarrollados con Java para mejorar la presentación de las páginas Web que
realizan animaciones, juegos e interacción con el usuario.

FRAMES
(marcos: Áreas rectangulares que subdividen las ventanas de algunas páginas Web, cada
una de las cuales contiene un documento de hipertexto independiente de los demás.
WEBMASTER
Un web master es el encargado de crear, diseñar, estructurar, maquetar, publicar,
promocionar y mantener un sitio web.
TABLAS
Elemento para distribuir uniformemente y de forma tabulada información en una página
web.
BANNER
Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es
publicidad.
IMAGEN
Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de
Web Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.
Propiedades: Características de un elemento del Web actual, como el título y la dirección
URL de un Web o el nombre y el valor inicial de un campo de formulario. También puede
especificar propiedades para elementos de página como tablas, gráficos y elementos
activos.
Taller 1
4
“TONCHIGÜE”
1.- Es un protocolo que funciona en conjunto con TCP/IP para llevar recursos web al
escritorio
buscador
www
navegador
HTTP
2.- Alojamiento web basado en el tipo de servidor son:

 Hosting Dedicado - Hosting Compartido - VPS Hosting
 Página web - Sitio web - Navegador web
 Servidor Web - Email Hosting
 UNIX - WINDOWS - DOS
3.- Un número único que utilizan los ordenadores para identificar y comunicarse entre sí en
una red informática.
a. ISP
b. Firewall
c. HTTP
d. Dirección IP
4.- Siglas que representan un Localizador Universal de Recursos
a. DNS
b. HTML
c. HTTP
d. URL
5.- ¿Qué significa la sigla WWW?
 Windows Word Wide

 Word Wide Web
 Wiki World Web
 Wendy Winela Wakillo
CONCEPTOS BÁSICOS DE HERRAMIENTAS MULTIMEDIA
5
“TONCHIGÜE”
En el mercado existen infinidad de programas para el tratamiento de Imágenes, el más
utilizado es Adobe Photoshop, seguido de Corel PHOTO-PAINT. En el campo de los
programas para descarga libre o herramientas de software libre destacamos:
Picasa (bajar peso, tratar, cortar, es de Google)

Xn View (permite trabajar hasta 400 formatos de imagen)
Deknop (para hacer banners y botones)
Gif Animator (para hacer banners y gif animados),
Album Shaper (para tratar y retocar imágenes).
LOS FORMATOS DE IMAGEN MÁS UTILIZADOS SON:
JPEG
(Joint Photographic Experts Group)
Es el más usado en las páginas web, debido a su bajo peso, pues comprime
las imágenes con una aceptable calidad. Es ideal para fotografías, más no
para botones, banners y caricaturas o gráficos.
GIF
(Graphic Interchange Format)
Mantiene los colores más vivos. En los sitios web se emplea para banners, botones e
interfaces, al igual que cabezotes e iconos. Su límite de colores es de 256, lo que lo hace
muy básico.
TIF
(Tagged Image File Format)
6
“TONCHIGÜE”
Formato flexible que conserva el mapa de bits o el “ADN” de la imagen. Se usa poco en la
web. Sus principales aplicaciones se dan en los formatos impresos.

LOS AUDIOS
Edición de Audio: La edición de audio es la técnica por medio de la cual se combinan
señales sonoras como voces, música, sonidos para estructurar un mensaje.
Cuando hablamos de programas de edición de audio nos referimos a los diferentes
aplicaciones o software que permiten la manipulación de audio digital, es importante, en
este contexto no perder de vistas el hardware que sirve de plataforma para la ejecución de
dichos programas.

El software de audio libre son programas que pueden ser usados para escuchar, modificar,
crear y componer señales de audio y música. Estos se distribuyen bajo una licencia libre,
por ejemplo GPL (Licencia Pública General)
WAVEPAD
Es un programa editor de sonido para Windows. Este software le permite hacer y editar voz
y otras grabaciones de audio. Usted puede cortar, copiar y pegar partes de grabaciones y, si
lo requiere, adicionar efectos como eco, amplificación y reducción de ruido.
AUDACITY
Es un programa multiplataforma de grabación y edición de sonidos fácil de usar, de libre
uso y de código abierto distribuido bajo licencia GPL. Es uno de editores de audio más
confiavbles y avanzado en la actualidad.
Soporta los formatos: AIFF, AU, Ogg Vorbis, MP3 y WAV

Goldwave
7
“TONCHIGÜE”
Es un editor semiprofesional de sonido para Windows. Permite hacer y editar voz y otras
grabaciones de audio. Permite cortar, copiar y pegar partes de grabaciones y, si lo requiere,
adicionar efectos como eco, amplificación reducción de ruido. Soporta los formatos: WAV,
MP3, OGG, AIFF, AU, VOX, MAT, SND, VOC.
Recordpad
Permite capturar todo tipo de sonido a través de tu PC sin importar la fuente. Permite el uso
del micrófono para crear notas de voz, grabar emisoras y hasta sesiones de karaoke.Trabaja
con los formatos AV, MP3, AIFF. Permite ajustar desde el panel de control el nivel de
compresión deseada (desde 8 hasta 320 kbps)

LOS VIDEOS
La explosión de sitios de redes sociales, tipo YouTube o Hi5 ha despertado una nueva ola
de “gomosos” para editar videos en línea. Ahora, cualquier persona con un teléfono celular,
una cámara fotográfica, una cámara web o una cámara de video puede captar, editar y
publicar su producción en internet.
Los cómplices de este despertar colectivo han sido los dispositivos portátiles y programas
para editar videos, ambos se caracterizan por ser intuitivos y fáciles de usar. En los
programas para editar video hay un elemento fundamental en su masificación: se consiguen
gratuitos en la red, vienen con el sistema operativo o los traen los dispositivos.
Los formatos más usados en la actualidad son:
8
“TONCHIGÜE”
AVI
(Audio Video Interleave)
Es de excelente calidad, pues como lo precisa la sigla logra intercalar
el audio y el video. Es ideal para formatos televisivos, aunque por su
peso y fidelidad no funciona muy bien en internet, así se tenga un
servidor de streaming. Es un formato contenedor, ya que los archivos
pueden estar en programas externos, llamados Códec. Su extensión
es la .AVI
WMV
(Windows Movie Media)
El programa desarrollado por el gigante del software Microsoft para su
sistema Windows es liviano, de buena calidad y fácil de transmitir a los
servidores. El punto débil es que a algunos usuarios no les puede abrir,
pues deben tener instalado Windows. Es de los más usados en el mundo.
Un secreto, cuando los videos se suben a YouTube en éste formato
quedan de mejor calidad. Su extensión es la .WMV
MPEG
(Moving Pictures Expert Group)
Es uno de los formatos más populares en el mundo, pues Sony, Aiwa y Apple, entre otros
titanes han sido sus impulsores. Se emplea en teléfonos móviles y videos de cámaras. Es un
estándar con normas ISO ideado para multidispositivos. Sus extensiones son .mpeg
y .mpg.
9
“TONCHIGÜE”
QT (QuickTime)
Diseñado por Apple para los computadores MAC, opera en multiplataformas, bajo los
formatos qt y .mov. Para ver los videos en estas extensiones se debe descargar un
programa, sino está instalado en el computador.Sus extensiones son .qt y .mov
FLV (Flash Video)

Poco a poco se consolidó en el rey de los videos en internet, por su bajo peso y posibilidad
de que más usuarios puedan verlo, independiente del navegador y sistema operativo que
tengan. Usa la tecnología Adobe Flash Player, la misma del programa para animaciones
Flash. Esta aplicación multimedia reproduce los archivos SWF y está codificado, de
fábrica, para archivos de audio MP3. Lo más acostumbrado en una página web es editar los
videos en formato AVI y luego convertirlos a FLV para ya ser transmitidos a los servidores.
Su extensión es FLV.
10
“TONCHIGÜE”
SOFTWARE DE INTEGRACIÓN MULTIMEDIA
PowerPoint
Entre los muchos programas que permiten la integración de medios, muy seguramente el
más conocido es el Power Point de Microsoft.
Permite incluir sonidos, videos, gráficos e imágenes en diferentes formatos, hasta dotar al
texto de animación y mucho más.
Director MX
Considerada una de las aplicaciones más poderosa en la tarea de integración de medios y
una de las más usadas para la creación de títulos multimedia.
Entre sus características, se destaca que permite la creación de contenido dinámico más
integrado, con un soporte integral audio y animaciones interactivas en 2D y 3D, formatos
de audio y vídeo RealVideo, RealAudio y MP3, mapas de bits, vectoriales, fuentes
personalizadas, archivos Macromedia Flash MX y mucho más.
11
“TONCHIGÜE”
Flash MX
Aunque nació como un software para realizar animación para la WEB y siendo un
excelente programa de dibujo vectorial, puede usarse como software de integración de
medio muy eficiente.
Permite crear animaciones vectoriales profesionales muy optimizadas para páginas web.
También reduce las animaciones a la mínima expresión en cuanto al espacio e incorpora
potentes herramientas de animación y efectos de fácil uso.

Dreamweaver
Es la aplicación de Adobe para la creación de sitios web. Permite llevar a cabo diseños
modernos, atractivos y profesionales, tanto para la WWW como para intranets.
12
“TONCHIGÜE”
APLICACIONES DE EDICIÓN Y DISEÑO DE SOLUCIONES WEB
El diseño efectivo y eficiente de sitios web puede ser una tarea compleja, difícil y larga. De
ahí que las herramientas se conviertan en un elemento clave a la hora de maximizar
nuestros recursos.
Hoy en día el mercado de las herramientas es muy amplio y cubre todo tipo de necesidades,
por eso resulta difícil escoger la adecuada para cada proyecto.
Hoy te quiero enseñar, algunas de las herramientas que podrían facilitar el trabajo.
Adobe Color CC
Si necesitas crear una paleta de color para

tu proyecto Adobe Kuler es tu solución. Una
aplicación de internet de Adobe gratuita,
que te permitirá crear y buscar
combinaciones de colores. Para hacer uso
de esta aplicación deberás estar registrado
como usuario en la página de Adobe, y con
tu usuario y password podrás tener acceso a
él.
Typecast
Esta aplicación te permite trabajar con más de 5.000

fuentes desdeTypekit, Fontdeck, Fonts.com y Google
Web Fonts en un solo panel de control.
El objetivo es poder decidir la tipografía que

utilizarás en los textos que publicarás en la web de
forma sencilla y rápida, de la misma forma que lo
hacemos con los editores de texto y fotografía
tradicionales. Puedes crear columnas de contenido y
alterar la tipografía usada, escogiendo en el menú lateral el proveedor de las fuentes y
escribiendo cualquier tipo de texto para ver los resultados directamente en la web.
13
“TONCHIGÜE”
Mockflow
Te permite montar un prototipo en cuestión de

minutos, online y para multitud de plataformas
diferentes: Android, iPhone, WordPress, Joomla,
Drupal, Facebook… Es muy intuitiva ya que es
tan fácil como hacer drag and drop con los
componentes que te proporciona para construir tu
wireframe.
MANEJADORES DE CONTENIDOS DE IMAGEN, AUDIO Y VIDEO
Gestor de Imágenes.
El Editor de imágenes es la herramienta mediante la cual se puede rotar y voltear, así como
cambiar la apariencia: brillo, contraste, intensidad, aplicar filtros de color, etc. Todos estos
cambios se realizan sobre una copia que hace el programa por lo que la foto original nunca
será modificada.
Gestores Gratuitos. Picasa.

Es el organizador y editor de fotografías de Google. Un programa que destaca por su diseño
elegante y cuidado. El visualizador de imágenes es espectacular, rápido e independiente de
Picasa, aunque es el organizador, que también es editor, el que ofrece las funciones más
interesantes. Cabe destacar la función para crear collages, la creación de vídeos a partir de
tus fotografías y los retoques automáticos de color y brillo, que mejorarán tus fotografías
con un único clic. Además, su integración con Picasa Web te da la posibilidad de publicar
tus álbumes online a plena calidad (hasta 1 Gb). En definitiva, Picasa es el mejor amigo del
fotógrafo aficionado o incluso profesional. Soporta los siguientes formatos: TIF, BMP,
GIF, PSD,PNG, TGA, RAW, AVI, ASF, MPG, WMV
Gimp.
Sin duda estamos ante el mejor editor de imágenes gratuito, que nada tiene que envidiarle a
Photoshop y utilizado por muchos profesionales del diseño. Requiere un periodo de
aprendizaje más largo que los anteriores editores, pero cuenta con muchas funciones. Al
contrario de lo que viene siendo habitual para un programa de Windows, dispone de una
interfaz con múltiples ventanas. Si se desea un entorno más parecido al del Photoshop,
existen dos opciones disponibles: GimPhoto y GimpShop.
14
“TONCHIGÜE”
EVALUACIÓN DE SOLUCIONES WEB
Facilidad de uso.
Esta medida permite evaluar la eficacia en la consulta de información de un sitio Web en

una audiencia específica. Debe considerarse en la fase de planeación y validarse durante el
proceso de diseño y desarrollo.
Navegación
 La ubicación actual del usuario en el árbol de navegación del sitio debe mostrarse con
claridad. (Ejemplo: Alumnos—>Oferta académica—>Licenciatura—>Planes de estudio).
 El enlace a la página principal del sitio debe estar claramente identificado.
 Todas las páginas deben estar enlazadas a la de inicio de su entidad o programa de origen
y a la de la UNAM.
 Las secciones más importantes del sitio deben ser accesibles directamente desde la
página principal.
 Debe incluirse un mapa del sitio en formato html plano.
 Los sitios Web deben incorporar la opción de búsqueda. (Ejemplos: Buscador de Bing,
Buscador de Google, Buscador de Joomla).
 A fin de facilitar la navegación de los usuarios, se aconseja que la estructura de los sitios
Web no exceda los cuatro niveles de consulta. En este sentido, se recomienda incluir el
regreso hacia la página inicial, además de conservar el menú principal en las páginas
internas.
 La estructura de los sitios Web institucionales deberá estar orientada a mostrar la

información y los servicios que la UNAM ofrece a la comunidad a la que están dirigidos,
en vez de presentarla en términos de la estructura organizacional de la Universidad.
 Es recomendable verificar la presencia de páginas huérfanas en el sitio Web, es decir, sin

enlaces desde la página principal del sitio o presentes en algún punto del árbol de
navegación.
Funcionalidad
15
“TONCHIGÜE”
 El sitio debe ser de fácil acceso, incluso para usuarios principiantes.
 Los servicios del sitio Web deben estar claramente señalados.
 Los sitios Web institucionales deberán estar disponibles a toda hora a lo largo del año.
 Los contenidos que requieran incorporar extensiones del navegador (plug-ins) deberán
usarse sólo si agregan alguna funcionalidad que no pueda ser implementada de otra forma,
con objeto de evitar que la página no pueda visualizarse en algunos dispositivos o que el
usuario requiera instalar software adicional.
 Es importante evitar el uso de frames en el sitio Web, puesto que confunden al usuario
cuando realiza impresiones de documentos o durante el guardado de una liga en los
bookmarks. En sustitución de los frames se pueden utilizar elementos “div” olayers.
 Las secciones más relevantes de todos los sitios Web en la UNAM, así como
instrucciones de uso, bases y convocatorias deben contemplar versiones específicas para
impresión.
Control de Usuario
 Es importante que el sitio Web permita al usuario cancelar diferentes operaciones con
facilidad.
 El cierre de sesión de cualquier servicio con autenticación de usuario debe ser claro en
cada página.
 Es recomendable ofrecer al usuario el cambio de tamaño de letra para una mejor lectura
de la información.
 El diseño gráfico del sitio debe brindar relevancia visual a información y servicios
importantes.
 Con el fin de que los usuarios localicen fácilmente lo que buscan, se recomienda agrupar
la información o servicios relacionados:
o En la misma página.
o En el mismo menú.
o En la misma zona dentro de una página.
16
“TONCHIGÜE”
 Se recomienda el manejo de un lenguaje simple, claro y directo, que permita a los lectores
entender el mensaje que se quiere transmitir y comprenderlo de fácil y rápidamente.
 Es conveniente incluir un glosario de términos técnicos cuando se requiera.
 La información debe redactarse en un lenguaje adecuado al tipo de usuario a quién se

dirige el servicio (estudiante, académico, trabajador, sociedad en general).
Claridad Arquitectónica y Visual

 El sitio debe organizarse desde la perspectiva del usuario, de acuerdo con los servicios
que se ofrecen a la comunidad universitaria y a la sociedad en general, para quedar en
segundo término la estructura organizacional.
 El diseño del sitio debe ser sencillo y utilizar en forma moderada elementos decorativos.
 Es conveniente incluir espacio suficiente para evitar que las páginas Web se vean
saturadas.
 Se deben evitar las animaciones innecesarias.
 El uso de colores permitirá distinguir fácilmente los enlaces ya visitados.
 Se recomienda utilizar textos en negritas, mayúsculas y cursivas con moderación.
 Es importante organizar la información incluyendo espacios, colores, bullets, imágenes,

gráficos y otros elementos que faciliten la lectura del contenido.
 Otra forma de agilizar la lectura en las páginas Web es mediante la redacción de párrafos
breves. La información debe presentarse al usuario de forma concreta y concisa. Si aun así,
el texto fuera extenso, se puede organizar con un índice que ligue hacia las diferentes
secciones.
 Los enlaces deben ser visibles para evitar que puedan perderse en el texto.
Versiones en otros idiomas.

 La página principal, así como las de servicios que puedan tener un público extranjero
deben contar, por lo menos, con una versión en idioma inglés, con la finalidad de facilitar
los intercambios y colaboraciones académicas.
 Cuando el sitio Web cuente con versiones en lenguajes diferentes al español, deberá
colocarse un enlace de cambio de idioma mediante texto o imágenes para acceder a éste.
17
“TONCHIGÜE”
 Las traducciones a otros idiomas deben cuidar contexto, redacción y ortografía.
Ayuda en línea y guías de usuario

 El sitio debe diseñarse de forma tal que requiera ayuda e instrucciones mínimas, puesto
que su uso y navegación será sencillo.
 La ayuda e instrucciones, en caso de utilizarse, serán fácilmente localizables.
Retroalimentación del sitio Web

 El usuario siempre estará claro de lo que sucede en el sitio por la incorporación de ayudas
visuales.
 Es importante permitir a los usuarios proporcionar información de sugerencias mediante

correo electrónico o un formulario de comentarios.
 Se recomienda incluir pantallas de confirmación después de que el usuario envía

información a través de formularios, para validar la recepción o el resultado del envío.
 Se sugiere informar a los usuarios si se requiere alguna extensión (”plug-in”) para ver
cierto contenido, aunque éstas serán utilizadas por el desarrollador Web únicamente cuando
agreguen valor al sitio.
 Cada sitio Web deberá incluir la fecha de última actualización.
Coherencia
 Se recomienda utilizar la misma palabra o frase de manera sistemática para describir un
tema.
 Los enlaces deben reflejar el título de la página a la que hacen referencia.
 El título de la página (etiqueta title) estará acorde con su contenido, por lo tanto, debe
cuidarse cuando se utilice una plantilla, modificar el título para cada página creada en el
sitio Web
Prevención y corrección de errores

 Los sitios Web que incorporan servicios incluirán mensajes de error en forma visible.
 Los mensajes de error deben redactarse en un lenguaje sencillo y describir las acciones
que efectuará el usuario para solucionar el problema.
18
“TONCHIGÜE”
 Los mensajes de error deben incorporar un punto de salida claro y proporcionar
información de contacto para la obtención de ayuda.
Interactividad
Uno de los ejes fundamentales que diferencian a Internet de otros medios de comunicación
es la interacción y personalización de la información con el usuario, que permite desarrollar
contenido “en el aire” dependiendo de, por ejemplo, el perfil del visitante o los datos que
completó en un formulario.
El lenguaje para programar páginas, el HTML, es, en sí mismo, estático. Para convertirlo
en una experiencia interactiva, han surgido lenguajes específicos de programación para la
Web, los cuales podemos diferenciarlos en dos tipos:
1. Los que trabajan del lado del cliente (en el navegador del usuario).
2. Los que trabajan en el servidor (donde está alojada la página).
Diseño funcional
Un buen diseño web, estructurado y ordenado complace tanto visual como

«informativamente» a los visitantes. No es secreto que en el vasto universo de la Internet
existen millones y millones de sitios, Blogs, foros y medios electrónicos destinados a los
temas más diversos. Si se crea un website para impulsar cualquier iniciativa, empresa,
fundación, etc., resulta necesario que éste cuente con un diseño funcional, cómodo y útil
para competir contra cualquier adversario y contra los millones de proyectos que se
albergan en la Red.
Tiempo de carga
El tiempo de carga de una página web es cada vez más un elemento fundamental en el
diseño de nuestra página web, tanto para el usuario como para los motores de búsqueda
(Google) a los que todos acudimos para encontrar la información que necesitamos.
El término Web Performance Optimization (WPO), ya es un término popular desde que
Google empezó a darle importancia a la velocidad de carga de nuestra web para el
posicionamiento en el buscador. Calidad de la web se equipará a una web que carga rápido.
HERRAMIENTA DE DESARROLLO WEB DREAMWEAVER
19
“TONCHIGÜE”
El Entorno de Dreamweaver CC
Vamos a ver cuáles son los elementos básicos de Dreamweaver CC: la pantalla, las barras,
los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se
llaman, dónde están y para qué sirven.
La pantalla inicial
Nota: Con la idea de resaltar una de las nuevas características de Dreamweaver, la primera
vez que se abre el programa, presenta el panel Extract, que sirve para obtener recursos de
archivos PSD de Photoshop. La pantalla tiene la siguiente apariencia.
Sin embargo, a menos de que el trabajo con Dreamweaver esté centrado en composiciones
de páginas hechas con Photoshop, lo más probable es que sólo usemos eventualmente este
panel. Además, con la idea de estudiar adecuadamente el entorno de trabajo del programa y
sus elementos más comunes, debemos cambiar al espacio de trabajo denominado Diseño.
Para ello, utilizamos el botón Espacios de trabajo, que se encuentra en la esquina superior
derecha de la ventana de Dreamweaver. Al pulsarlo, se despliega la lista de espacios de
trabajo, en donde debemos cambiar de Extract a Diseño, como en la siguiente imagen.
20
“TONCHIGÜE”
En las siguientes ocasiones que abramos el programa, ya no será necesario conmutar otra
vez de espacio de trabajo. Dreamweaver presenta los elementos de la pantalla tal y como se
utilizaron la última vez.
En la pantalla del espacio de trabajo Diseño, podremos ver sus componentes

fundamentales. Es importante estudiar los nombres de los diferentes elementos para que sea
más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en
general todas las de este curso) puede no coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada
momento y dónde.
1.- Las barras.
2.- Las pestañas de documentos.
3.- La barra de estado.
4.- El panel de propiedades.
21
“TONCHIGÜE”
5.- Área de paneles.
6.- Paneles y ventanas.
7.- Línea inferior de pestañas.
8.- Vista diseño del documento.
9.- Vista código del documento.
La barra de la aplicación.
La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos

la ventana maximizada veremos todos los elementos de la barra ocupando una sola
línea, si no, ocuparán dos líneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte

inferior, Archivo, Edición, Ver, etc), el botón de ajuste de sincronización,
el conmutador de espacio de trabajo y el botón del sistema de ayuda on line.
Más hacia la derecha observamos el conmutador del espacio de trabajo, como un

desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y
su disposición) que podemos guardar y cargar. Lo veremos más adelante, en tanto, ésta
es su imagen desplegada.
Los menús, están agrupados en categorías.
22
“TONCHIGÜE”
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los
diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de
Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envían a
los paneles.
Las pestañas de documento.
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos
permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica
que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando
en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho,
como Cerrar otros archivos.
Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la
hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto
nos ahorrará bastante tiempo.
La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da información

sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar

etiquetas completas. Más a la derecha encontramos tres iconos para ver la página en
tres tamaños de pantalla: móvil, tableta y PC escritorio. Y al final hay otros datos
como el tamaño de la ventana, el tamaño de la página o su codificación.
Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que
podemos ver u ocultar desde el menú Ver → Barras de herramientas.
23
“TONCHIGÜE”
La barra de herramientas estándar.
La barra de herramientas estándar contiene iconos para realizar las acciones más

habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo,
Abrir, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar,
Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el
mundo usa esos comandos directamente con el teclado (Ctrl + Gpara
guardar, Ctrl + C para copiar, etc.)
La barra de herramientas de documento.
La barra de herramientas de documento contiene iconos que nos permiten cambiar

entre las distintas vistas de edición y la vista en vivo, vistas previa en multipantalla,
acceder cómodamente al administrador de archivos y, si está activa la vista en vivo,
botones de navegación de nuestro sitio. Los elementos que presenta dependen de la
vista que estemos utilizando.
24
“TONCHIGÜE”
Inspectores y Paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se
conocen como paneles (ventanas) o inspectores. La diferencia entre panel e inspector
es que, en general, la apariencia y opciones de un inspector cambian dependiendo del
objeto seleccionado, mientras que el panel nos da acceso a opciones generales fijas.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada

uno de los paneles o inspectores. A continuación vamos a ver el inspector de
Propiedades y más adelante veremos el panel Insertar.
El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto

seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los
elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento
seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrará su
ubicación, dimensiones, peso, clase, etc...
En otros elementos, como párrafos y estilos, este panel puede mostrar dos tipos de
propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la
página Web que estemos diseñando.
Área de paneles.
En la parte derecha de la pantalla tenemos el área o pila de paneles.
25
“TONCHIGÜE”
Inicialmente, el área de paneles contiene unos determinados elementos, pero

podemos quitar y poner los elementos que queramos. Para quitar un elemento del
área de paneles basta hacer clic con el botón derecho sobre su nombre para que
aparezca un menú con la opción Cerrar. Para añadir un elemento al área de paneles
hay que ir al menú Ventana y hacer clic en el elemento que queramos añadir, si el
elemento se abre en una ventana flotante, bastará arrastrarlo al área de paneles.
Paneles.
Una vez tenemos el áea de paneles con los elementos que más nos interesen, podemos
abrirlos o desplegarlos de tres formas.
Abrir el panel dentro del área de paneles. Para ello primero hay que expandir el área
de paneles pulsando el botón de la parte superior derecha , a continuación, basta
con hacer clic en algún panel para que se abra dentro del área de paneles. Para cerrar el
panel hacer doble clic o volver a contraer el área de paneles.
Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del área

de paneles. Los distintos paneles del área de paneles quedan como fichas. Para acceder
a otro panel basta con hacer clic en la ficha correspondiente, de ese modo, podemos
conmutar de un panel a otro.
26
“TONCHIGÜE”
Abrir el panel al lado del área de paneles. Para ello hay que partir del área de
paneles sin expandir, y al pulsar en un panel, este se abrirá pegado al lado, como
vemos en la siguiente figura.
27
“TONCHIGÜE”
Abrir como panel flotante. Para ello hay que pinchar en el título del panel y arrastar
el panel fuera del área de paneles, el panel se puede colocar en cualquier zona de la
pantalla, incluso fuera de la pantalla de Dreamweaver. Al hacer doble clic en el título
del panel, este se contrae pero sigue flotando en la misma posición. Para expandirlo,
volver a hacer doble clic. En al siguiente imagen vemos el panel Archivos flotando y
expandido.
28
“TONCHIGÜE”
Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.
El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el

menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes,
enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
29
“TONCHIGÜE”
Como vemos en las imágenes, es posible configurar este panel para verlo como menú
(imagen anterior), como panel flotante o como una barra de herramientas integrada en la
ventana de trabajo (imagen siguiente)
Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, te

recomendamos el avanzado Personalizar el área de trabajo .
Línea inferior de pestañas.
En al parte inferior de la pantalla tenemos una línea que contiene varias pestañas (Buscar,
Validación , ... )
Para abrir una pestaña basta hacer clic sobre ella, para cerrarla hacer doble clic en su
título.
30
“TONCHIGÜE”
Estas pestañas se pueden configurar de forma similar a como acabamos de ver con el
área de paneles. Es decir, se pueden añadir y quitar, convertir en flotantes, etc.
Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra
de documento:
La vista Diseño
La vista Diseño permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
31
“TONCHIGÜE”
La vista Código
La vista Código se utiliza para poder trabajar en un entorno totalmente de programación,

de código fuente. No permite tener directamente una referencia visual de cómo va
quedando el documento según se va modificando el código.
El código que vemos es el que genera Dreamweaver al editar el contenido en la

vista Diseño.
Introducción
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un

diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes
de crear las páginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para
contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear
32
“TONCHIGÜE”
nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los
archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio

remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la
copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio
remoto.
La organización de los archivos en un sitio permite administrar y compartir archivos,

mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el
servidor, etc.
La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que

cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese
nombre.
Crear o editar un sitio web sin conexión a Internet
Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos
la carpeta raíz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o

directamente a Nuevo sitio.
33
“TONCHIGÜE”
Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios
definidos.
En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que

contiene la lista de sitios locales definidos
34
“TONCHIGÜE”
Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos
ver en la imagen.
Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos
cuatro botones que nos permiten borrar un sitio, editarlo, duplicarlo y
exportarlo.
A continuación tenemos otros dos botones:
- Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro

ordenador.
- Nuevo sitio. A continuación explicaremos esta opción.
En la parte inferior derecha tenemos el botón Listo que nos abrirá el sitio seleccionado
Tanto si se pulsa el botón Nuevo sitio, como si se elige el botón Editar, se mostrará la

misma ventana en la que definir o modificar las características del sitio.
35
“TONCHIGÜE”
Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte

izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista

haciendo clic en ella.
Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y
de momento son las únicas que cambiaremos:
Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo
único que empleemos de momento:
 Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo
en la lista de sitios.
 La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco
duro local. La carpeta puede contener ya archivos o no.
Estas dos características son las imprescindibles para definir un sitio local. El resto son
opcionales, y de momento no nos interesan, ya que estamos definiendo el sitio local, y no
es necesario establecer los datos del servidor en el que estará el sitio remoto.
Después de rellenar los datos pulsamos el botón Guardar y abrimos el sitio.
36
“TONCHIGÜE”
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar

sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el

menú desplegable Archivos.
Para practicar realiza el ejercicio paso a paso Crear un sitio web local. En este ejercicio,
configuraremos un sitio que iremos completando más adelante.
Ver el sitio
El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más

importantes de Dreamweaver, ya que nos da acceso a los archivos del sitio.
En este caso vemos todos los documentos creados en nuestro

sitio buscar.htm, estilococina.htm, menu.htm, index.htm y las
carpetas imagenes, media y Templates.
37
“TONCHIGÜE”
Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una
vista a otra hay que pulsar sobre el botón que aparece en la parte superior del panel y
de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el
del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el
servidor de pruebas o las bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la

derecha) con nuestros archivos.
Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se

relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde
38
“TONCHIGÜE”
Dreamweaver, automáticamente actualizará todas las referencias a ese
archivo (enlaces desde otras páginas, origen de la imagen, etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se

mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que
Dreamweaver simplemente no encontrará la página.
Al modificar algún objeto que es referenciado por algún otro documento, se muestra una
ventana similar a ésta, que indica los documentos que hacen referencia a dicho objeto, y
que pueden ser actualizados para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si

tenemos configurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo
cual podemos establecer desde el menú Edición, opción Preferencias,
categoría General.
Subir archivos al servidor
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas)
deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente.
Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir
subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede
hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como
se encuentra en tu carpeta del disco duro. Si no, los enlaces no funcionarán
correctamente, y es posible que algunas imágenes no se muestren.
39
“TONCHIGÜE”
Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará tu
servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos
gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en
el Explorador de Windows) y, obviamente, nos es mucho más útil para subir los
archivos.
Uno de los programas gratuitos más utilizados es FileZilla, desde su página web podrás
descargarte el programa.
Una vez instalado, abre el programa y haz clic en Archivo → Gestor de sitios y luego
en Nuevo sitio para configurar un nuevo sitio FTP.
Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus
páginas: Servidor, Usuario y Contraseña.
40
“TONCHIGÜE”
Rellena los campos y haz clic en Conectar. Se conectará automáticamente y podrás ver
una carpeta donde podrás copiar los archivos que hayas creado.
La parte central de la pantalla estará dividida en dos columnas. A la izquierda, la

marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de
nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el
servidor FTP.
Ahora no tenemos más que arrastrar los archivos del sitio local al remoto para subirlos, o
del remoto al local, para descargarlos al equipo.
Verás cómo el programa empieza a copiar la información de tu disco a Internet.
Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra
de direcciones de tu navegador (Firefox, Internet Explorer...) ¡y verás el sitio en
Internet!
41
“TONCHIGÜE”

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el

servidor. Busca la carpeta html, public_html o httpdocs y sube tus archivos allí.
Propiedades del documento
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un
mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las páginas a través del cuadro de
diálogo Propiedades de la página.
Este cuadro se puede abrir de tres modos diferentes:
 Pulsar la combinación de teclas Ctrl + J.

 Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
 Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá
al final del menú contextual la opción Propiedades de la página.
Se abrirá el cuadro de diálogo siguiente:
42
“TONCHIGÜE”
Las propiedades están organizadas en categorías.
En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las

propiedades:
 Fuente de página: es el tipo de letra que le aplicaremos al texto.

 Tamaño: es el tamaño de la fuente que aplicaremos al texto.
 Color del texto: es el color de la fuente.
 Color del fondo: permite especificar un color de fondo para el documento, pero
dicho color solo se mostrará en el caso de no haber establecido ninguna imagen
de fondo.
 Imagen de fondo: permite especificar una imagen de fondo para el documento.
Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de
fondo tener en cuenta que según los colores de la imagen será necesario
establecer unos u otros colores para el texto, así como que no es conveniente
tener un gif animado como fondo.
43
“TONCHIGÜE”
 Repetir: permite especificar si queremos que la imagen de fondo se repita o no.
Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos
que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si
queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si
queremos que se repita en vertical, entonces seleccionamos repeat-y.
 Márgenes: permiten establecer márgenes en el documento, es decir, la distancia
entre donde empieza el contenido de la página y la ventana del navegador.
En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos

las propiedades:
 Imagen de fondo: permite especificar una imagen de fondo para el documento.

Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de
fondo tener en cuenta que según los colores de la imagen será necesario
establecer unos u otros colores para el texto, así como que no es conveniente
tener un gif animado como fondo.
 Fondo: permite especificar un color de fondo para el documento, pero dicho
color solo se mostrará en el caso de no haber establecido ninguna imagen de
fondo.
44
“TONCHIGÜE”
 Texto: es el color de la fuente.
 Vínculos: es el color que mostrará el texto de los vínculos.
 Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
 Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón
hace clic sobre el mismo.
 Márgenes: permiten establecer márgenes en el documento, es decir, la distancia
entre donde empieza el contenido de la página y la ventana del navegador.
Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es
que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo
hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a
limitar el HTML al contenido, y no al diseño. Por eso, te desaconsejamos su uso.
En la categoría Vínculos (CSS) encontramos las propiedades:
 Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.

 Tamaño: es el tamaño del texto de los vínculos.
45
“TONCHIGÜE”
 Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir
entre el texto normal y los vínculos que sirven de enlace a otras páginas.
 Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al
usuario si unos vínculos ya han sido visitados o no.
 Vínculos de sustitución: es el color del texto del vínculo cuando situamos el
ratón encima del vínculo.
 Vínculos activos: es el color de los vínculos activos.
 Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo
asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de
estilo por ejemplo para que no aparezca subrayado.
En la categoría Encabezados (CSS) encontramos la propiedad:
 Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto de propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y
color que queremos aplicar a cada tipo de encabezado.
46
“TONCHIGÜE”
En la categoría Título/Codificación encontramos la propiedad:
 Título: es el título del documento, que aparecerá en la barra de título del

navegador y de la ventana de documento de Dreamweaver
En la categoría Imagen de rastreo encontramos las propiedades:
 Imagen de rastreo: permite establecer una imagen como fondo del documento,

pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca
en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear
el documento.
 Transparencia: permite establecer la opacidad de la imagen de rastreo.
Los colores
Para asignar colores es posible desplegar una paleta de colores como ésta. Al

seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la
parte inferior, pero también es posible ver el valor en modelos de color distintos: RGBa y
HSLa.
En esta nueva versión de Dreamweaver es posible utilizar una amplia gama de colores
para nuestra página web, para ello puedes utilizar los controles de la paleta y hacer clic
en el color deseado.
47
“TONCHIGÜE”
Los colores pueden asignarse a través de los botones: .
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y

también en algunas ventanas que permiten especificar propiedades (sobre todo
propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de
la página, que vimos en este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro
gris , lo que hace que se despliegue la paleta de colores. El otro modo es
introduciendo directamente el número hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color
azul con valor #39F, el botón quedaría del siguiente modo: .
En la web, los colores se representan por la cantidad que contienen de los colores
primarios aditivos (Rojo, Verde y Azul).
Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a
la F (A=10, B=11, ..., F=16).
El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su
intensidad total.
Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al
rojo, el segundo al azul y el último al verde.
En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este
caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores
#FF22AA y #F2A son el mismo
Sincronización de la configuración de sitio.
Como mencionamos en la unidad 1, es posible adquirir Dreamweaver en varias

modalidades, pagando el total del costo o por cuotas mensuales. Además, puede
adquirirse en paquete con otros programas de Adobe o incluso aislado. En cualquier
caso, adquirimos también una cuenta de Creative Cloud, que es un conjunto de servicios
48
“TONCHIGÜE”
de Adobe en la nube, con el que podemos tener acceso a características específicas de
Dreamweaver.
En el caso que nos ocupa en esta unidad, la cuenta de Creative Cloud, a la que entramos
con nuestro ID y contraseña de Adobe, nos permite utilizar Dreamweaver en dos
equipos. Si hemos comenzado la configuración de un sitio local, podemos sincronizar esa
configuración con Creative Cloud y utilizar cualquiera de esos dos equipos
indistintamente para continuar nuestro trabajo, siempre y cuando estén sincronizados.
También se sincronizan las preferencias que hayamos establecido en los equipos, como
la personalización del espacio de trabajo, el juego de colores en la vista Código, etcétera.
Para establecer el modo en el que se van a sincronizar los equipos con Creative Cloud y,
por tanto, entre sí, debemos abrir el cuadro de diálogo del menú Edición,
opción Preferencias.
En la ventana Categoría, debemos elegir Ajustes de sincronización.
49
“TONCHIGÜE”
Si deseamos mantener siempre sincronizados nuestros equipos de trabajo, entonces

debemos activar la casilla Activar sincronización automática. Dreamweaver
sincronizará con la nube cada 30 minutos siempre y cuando haya una conexión a Internet
funcionando.
También podemos elegir qué ajustes se van a sincronizar.
50
“TONCHIGÜE”
 Preferencias de aplicación (Colores y estructura del código de las páginas,
diseños CSS preestablecidos y muchos otros parámetros que se establecen en las
diversas categorías de este mismo cuadro de diálogo).
 Métodos abreviados de teclado (en caso de que hayamos decidido crear métodos
abreviados personalizados).
 Configuración del sitio (que son todos los parámetros de nuestro sitio que
estudiamos en esta unidad).
 Espacios de trabajo.
Como puede verse, tenemos también dos botones, uno de ellos, para Sincronizar la
configuración ahora y otro para Administrar nuestra cuenta de Adobe, a la que nos
referiremos en el siguiente apartado.
También podemos iniciar la sincronización de la configuración del sitio pulsando el

botón que está en la esquina superior derecha de la ventana de Dreamweaver, junto al
botón de ayuda en línea .
O bien, utilizando el menú Edición, con la opción donde aparece nuestro ID de Adobe, el

cual despliega un submenú para sincronizar.
Puede ocurrir, sin embargo, que hagamos cambios en las preferencias del programa o en
la configuración del sitio, en el segundo equipo y no queramos que éstas sustituyan a las
del primer equipo al sincronizarse. O bien, que deseemos restablecer las preferencias en
ambos equipos a partir de la que tengamos en la nube. Cuando hay conflicto entre
51
“TONCHIGÜE”
configuraciones, todo depende de la manera en que esté configurada la resolución de
conflictos en el cuadro de diálogo.
Como puedes ver, hay tres opciones: Preguntar mi preferencia, que nos dará la
oportunidad de decidir qué configuración se sobrepone en cada caso (si la local o la de la
nube), o bien, si siempre se sincroniza una u otra.
Finalmente, cabe reiterar que aquí se trata de la sincronización de las preferencias del
programa y de la configuración del sitio por crear que hemos visto en esta unidad. En
ninguno de los dos casos se trata de los archivos que conforman nuestra página web,
como son los archivos HTML, las imágenes, los archivos de estilo CSS, etcétera.
Sin embargo, Creative Cloud también nos da herramientas para que podamos disponer de
nuestros archivos desde cualquier dispositivo utilizando la nube. Para ello también sirve
nuestra cuenta de Adobe. Veámoslo en el siguiente apartado.
BIBLIOGRAFIA
https://concepto.de/pagina-web/#ixzz60MFEV1Yd
52

Diseño y Desarrollo Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño y Desarrollo Web

Cargado por

Copyright:

Formatos disponibles

COLEGIO DE BACHILLERATO

3ro “A” INFORMÁTICA

CONCEPTOS BÁSICOS DE WEB

Se conoce como página Web, página electrónica o página digital a un documento digital

En Internet existen más de mil millones de páginas Web de diversa índole y diverso

2.- Alojamiento web basado en el tipo de servidor son:

 Windows Word Wide

CONCEPTOS BÁSICOS DE HERRAMIENTAS MULTIMEDIA

Picasa (bajar peso, tratar, cortar, es de Google)

LOS FORMATOS DE IMAGEN MÁS UTILIZADOS SON:

FLV (Flash Video)

SOFTWARE DE INTEGRACIÓN MULTIMEDIA

Hoy te quiero enseñar, algunas de las herramientas que podrían facilitar el trabajo.

Si necesitas crear una paleta de color para

Esta aplicación te permite trabajar con más de 5.000

El objetivo es poder decidir la tipografía que

Te permite montar un prototipo en cuestión de

MANEJADORES DE CONTENIDOS DE IMAGEN, AUDIO Y VIDEO

Gestores Gratuitos. Picasa.

EVALUACIÓN DE SOLUCIONES WEB

Esta medida permite evaluar la eficacia en la consulta de información de un sitio Web en

 El enlace a la página principal del sitio debe estar claramente identificado.

 Debe incluirse un mapa del sitio en formato html plano.

 La estructura de los sitios Web institucionales deberá estar orientada a mostrar la

 Es recomendable verificar la presencia de páginas huérfanas en el sitio Web, es decir, sin

 Los servicios del sitio Web deben estar claramente señalados.

o En la misma zona dentro de una página.

 Es conveniente incluir un glosario de términos técnicos cuando se requiera.

 La información debe redactarse en un lenguaje adecuado al tipo de usuario a quién se

Claridad Arquitectónica y Visual

 Se deben evitar las animaciones innecesarias.

 El uso de colores permitirá distinguir fácilmente los enlaces ya visitados.

 Se recomienda utilizar textos en negritas, mayúsculas y cursivas con moderación.

 Es importante organizar la información incluyendo espacios, colores, bullets, imágenes,

Versiones en otros idiomas.

Ayuda en línea y guías de usuario

 La ayuda e instrucciones, en caso de utilizarse, serán fácilmente localizables.

Retroalimentación del sitio Web

 Es importante permitir a los usuarios proporcionar información de sugerencias mediante

 Se recomienda incluir pantallas de confirmación después de que el usuario envía

 Cada sitio Web deberá incluir la fecha de última actualización.

 Los enlaces deben reflejar el título de la página a la que hacen referencia.

Prevención y corrección de errores

Un buen diseño web, estructurado y ordenado complace tanto visual como

HERRAMIENTA DE DESARROLLO WEB DREAMWEAVER

En la pantalla del espacio de trabajo Diseño, podremos ver sus componentes

1.- Las barras.

2.- Las pestañas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

6.- Paneles y ventanas.

7.- Línea inferior de pestañas.

8.- Vista diseño del documento.

9.- Vista código del documento.

La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte

Más hacia la derecha observamos el conmutador del espacio de trabajo, como un

Los menús, están agrupados en categorías.

Las pestañas de documento.

Esta barra la encontramos debajo de la ventana de documento, y nos da información

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar

La barra de herramientas estándar.

La barra de herramientas estándar contiene iconos para realizar las acciones más