View
27
Download
0
Category
Preview:
Citation preview
CENTRO DE EDUCACIN TCNICA PRODUCTIVO
PRIVADO SAN PEDRO
CARRERA TCNICA : COMPUTACIN E INFORMTICA
DOCENTE: RAL : FERRA REYES, RAL
ALUMNO :
2012
Ral Ferra Reyes Docente
El diseo web es una actividad que consiste en la planificacin, diseo e
implementacin de sitios web. No es simplemente una aplicacin del diseo
convencional, ya que requiere tener en cuenta la navegabilidad, interactividad,
usabilidad, arquitectura de la informacin y la interaccin de medios como el
audio, texto, imagen, enlaces y vdeo. Se lo considera dentro del diseo
multimedia.
CONCEPTOS BSICOS
a. Pgina Web
Qu es una pgina web: Una pgina web es un documento electrnico
diseado para el World Wide Web (Internet) que contiene algn tipo de
informacin como texto, imagen, video, animacin u otros. Una de las
principales caractersticas de las pginas web son los Hipervnculos tambin
conocidos como links o enlaces y su funcin es la de vincular una pgina con
otra.
Las pginas web pueden estar almacenadas en un equipo local o un servidor
web remoto. El servidor web puede restringir el acceso nicamente para
redes privadas, p. ej., en una intranet corporativa, o puede publicar las
pginas en la World Wide Web.
b. Servidor Web
La principal funcin de un servidor Web es almacenar los archivos de un sitio
y emitirlos por Internet para poder ser visitado por los usuarios. Bsicamente,
un servidor Web es una gran computadora que guarda y transmite datos va
Internet. Cuando un usuario entra en una pgina de Internet su navegador se
comunica con el servidor enviando y recibiendo datos que determinan qu es
lo que ve en la pantalla. Por eso decimos que los servidores Web estn para
almacenar y transmitir datos de un sitio segn lo que pida el navegador de un
visitante.
Ral Ferra Reyes Docente
c. Hosting
El alojamiento web (en ingls web hosting) es el servicio que provee a los
usuarios de Internet un sistema para poder almacenar informacin, imgenes,
vdeo, o cualquier contenido accesible va web. Es una analoga de
"hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un
lugar especfico, en este caso la analoga alojamiento web o alojamiento de
pginas web, se refiere al lugar que ocupa una pgina web, sitio web,
sistema, correo electrnico, archivos etc. en internet o ms especficamente
en un servidor que por lo general hospeda varias aplicaciones o pginas web.
Las compaas que proporcionan espacio de un servidor a sus clientes se
suelen denominar con el trmino en ingls web host.
El hospedaje web aunque no es necesariamente un servicio, se ha convertido
en un lucrativo negocio para las compaas de internet alrededor del mundo
Se puede definir como "un lugar para tu pgina web o correos electrnicos",
aunque esta definicin simplifica de manera conceptual el hecho de que el
alojamiento web es en realidad espacio en Internet para prcticamente
cualquier tipo de informacin, sea archivos, sistemas, correos electrnicos,
videos etc.
d. Navegador web.
Un navegador o navegador web (del ingls, web browser) es una aplicacin
que opera a travs de Internet, interpretando la informacin de archivos y
sitios web para que podamos ser capaces de leerla (ya se encuentre sta
alojada en un servidor dentro de la World Wide Web o en un servidor local).
El navegador interpreta el cdigo, HTML generalmente, en el que est escrita
la pgina web y lo presenta en pantalla permitiendo al usuario interactuar con
su contenido y navegar hacia otros lugares de la red mediante enlaces o
hipervnculos entre los ms usados tenemos: Internet Explorer, Mozilla
Firefox, Opera Web browser.
Ral Ferra Reyes Docente
e. Buscador web
Un motor de bsqueda, tambin conocido como buscador, es un sistema
informtico que busca archivos almacenados en servidores web gracias a su
spider (o Web crawler). Un ejemplo son los buscadores de Internet
(algunos buscan nicamente en la web, pero otros lo hacen adems en
noticias, servicios como Gopher, FTP, etc.) cuando se pide informacin sobre
algn tema. Las bsquedas se hacen con palabras clave o con rboles
jerrquicos por temas; el resultado de la bsqueda es un listado de
direcciones web en los que se mencionan temas relacionados con las
palabras clave buscadas.
Los buscadores en Internet, son programas o aplicaciones que residen en un
sitio o pgina web, los cuales, al ingresar palabras en sus recuadros de
bsqueda, operan dentro de la base de datos del mismo buscador y recopilan
todas las pginas que contengan informacin relevante y relacionada con lo
que se busca; de hecho este es el principal desafo que enfrentan las
compaas que brindan este servicio, el ser capaces de brindar un orden al
verdadero ocano de informacin que es la web (hablamos de red o web
tambin para referirnos a la Internet). Las palabras que ingresamos en los
recuadros para buscar se denominan en el medio "palabras clave", o
"keywords" en ingls, por su importancia para obtener la informacin
necesaria de la gran base de datos que maneja cada buscador.
HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las
pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite
escribir texto de forma estructurada, y que est compuesto por etiquetas, que
marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no slo se compone de texto, puede contener
imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como
un documento multimedia.
Ral Ferra Reyes Docente
Los documentos HTML deben tener la extensin html o htm, para que puedan ser
visualizados en los navegadores (programas que permiten visualizar las pginas
web).
Los navegadores se encargan de interpretar el cdigo HTML de los documentos,
y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado.
1. Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que
componen un documento HTML. Existen dos tipos de etiquetas, la de
comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo est delimitada por los caracteres < y >. Est
compuesta por el identificador o nombre de la etiqueta, y puede contener
una serie de atributos opcionales que permiten aadir ciertas propiedades.
Su sintaxis es:
2. Estructura de una pgina web
La estructura bsica de una pgina es:
...
...
3. Cabecera de la pgina
La cabecera de la pgina se utiliza para agrupar informacin sobre ella,
como puede ser el ttulo.
Est formada por las etiquetas y . La etiqueta va
justo debajo de la etiqueta .
Ral Ferra Reyes Docente
Por ejemplo:
...
...
Entre las etiquetas y , las etiquetas que podemos
encontrar y ms se utilizan son:
, ,
4. Ttulo de la pgina
El ttulo de la pgina es el que aparecer en la parte superior de la ventana
del navegador, cuando la pgina est cargada en l. Para asignar un ttulo
a una pgina es necesario escribir el texto deseado entre las etiquetas
y .
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las
etiquetas y .
Por ejemplo:
Curso de HTML
...
Ral Ferra Reyes Docente
5. Cuerpo del documento
El cuerpo del documento contiene la informacin propia del documento, es
decir lo que queremos que se visualice, el texto de la pgina, las imgenes,
los formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas
y , que van justo debajo de la cabecera.
Por ejemplo:
Curso de HTML
...
A travs de la etiqueta es posible establecer el color o la imagen de
fondo de la pgina. El color de fondo puede establecerse a travs del
atributo bgcolor, al que es posible asignarle un color representado en
hexadecimal o por un nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una pgina sea de color
azul, tendremos que escribir:
...
...
Ral Ferra Reyes Docente
6. Saltos de lnea
En general, cuando trabajamos con un editor de texto se produce un salto
de lnea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento
HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en
el navegador. Para que se produzca el salto de lnea en el navegador, en
lugar de pulsar la tecla INTRO hay que insertar la etiqueta donde se
desee que se produzca el salto.
La etiqueta no precisa ninguna etiqueta de cierre. No hay que insertar
la etiqueta despus de ella, ya que dicha etiqueta no existe.
Por ejemplo, para insertar el texto:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:
Queridos usuarios,tengo el placer de comunicaros que hay una
nueva sección.
7. Sangrado de texto
La sangra es una especie de margen que se establece a ambos lados del
texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas
y .
Esta etiqueta en un principio se defini para delimitar citas pero que como
la mayora de los navegadores resuelven la cita incluyendo un sangrado
del texto, su uso para sangrar texto se ha generalizado.
El uso de la etiqueta obliga a que el texto aparezca en una
nueva lnea.
Insertando el texto entre varias etiquetas y se
consigue que los mrgenes sean mayores.
Por ejemplo, para insertar el texto:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva seccin.
Ral Ferra Reyes Docente
Habra que escribir:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.
8. Formatear el texto ...
Las propiedades del texto pueden modificarse a travs de la etiqueta
. Para ello, podemos insertar el texto entre las etiquetas y
, especificando algunos de los atributos de la etiqueta:
Ejemplo
Hola a todos
9. Prrafos ...
El texto de una pgina puede agruparse en prrafos. Para ello, el texto de
cada uno de los prrafos debe insertarse entre las etiquetas y .
No es necesario insertar la etiqueta para que un nuevo prrafo
aparezca debajo del anterior, ya que las etiquetas y hacen que se
cambie de lnea automticamente.
Atributo Significado Posibles valores
face Fuente nombre de la fuente, o fuentes
color color del texto nmero hexadecimal o texto
predefinido
size tamao del texto valores del 1 al 7, siendo por
defecto el 3.
Ral Ferra Reyes Docente
Tambin es posible cambiar la alineacin del texto de cada prrafo. Para
ello se modifica el valor del atributo align, cuyos valores pueden ser left
(izquierda), right (derecha), center (centrado) o justify (justificado).
Por ejemplo, para insertar el texto:
Bienvenidos a mi pgina.
Aqu encontraris cursos de formacin muy interesantes.
Habra que escribir:
Bienvenidos a mi pgina.
Ral Ferra Reyes Docente
DREAMWEAVER CS3
Dreamweaver CS3 es un software fcil de usar que permite crear pginas web
profesionales. Las funciones de edicin visual de Dreamweaver CS3 permiten
agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de
programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc., de una forma muy sencilla y visual.
1. El entorno del Dreamweaver CS3
Formato de texto
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas
visualizar el inspector de propiedades que se encuentra normalmente en la
parte inferior de la ventana, y que tiene el siguiente aspecto:
Ral Ferra Reyes Docente
Si no te aparece, puedes
mostrarlo a travs del men
Ventana, con la opcin
Propiedades.
2. Configuracin de un sitio local
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s,
con un diseo similar o un objetivo comn. Es necesario disear y planificar
el sitio web antes de crear las pginas que va a contener.
Una vez creadas las carpetas que formarn un sitio local, ya es posible
definir el sitio en Dreamweaver.
Para ello hay que dirigirse al men
Sitio, a la opcin Administrar sitios....
Recuerda que a travs del panel
Archivos, pestaa Archivos, se puede
acceder a cada uno de los sitios
creados y a la opcin Administrar
sitio.
En el caso de haber seleccionado la
opcin Administrar sitios, aparece
una ventana que contiene la lista de sitios locales definidos con
anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se
mostrar la misma ventana en la que definir las caractersticas del sitio.
3. Estilos CSS. Introduccin
En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos
que pueden aplicarse al texto seleccionado.
Ral Ferra Reyes Docente
Los estilos CSS estn en hojas de estilo de actualizacin automtica
(tambin denominadas Hojas de Estilo en Cascada) se utilizan para
combinar una serie de atributos del texto, como pueden ser el color o el
tamao, de modo que no sea necesario asignar estos atributos uno a uno
cada vez que se desee repetir la asignacin de esos mismos valores a
otras partes del texto. Tambin algunas de sus opciones pueden utilizarse
para definir atributos de imgenes y otras caractersticas que no permitan
definir los estilos HTML en versiones anteriores, como el color de fondo
para el texto, etc.
Para crear un Estilo CSS personalizado:
a. En el documento, se selecciona el texto al que se desea aplicar
caractersticas concretas.
b. En el inspector de propiedades se modifican todas las propiedades de
formato de texto, se establecen los atributos de la fuente y del prrafo
que queramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre
Estilo1 o Estilo2 o Estilo3,... segn los nombres de los estilos ya
creados.
4. Hiperenlaces
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al
ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es
posible asignar un vnculo a un texto, a una imagen, o a parte de una
imagen
Tipos de enlaces
Ral Ferra Reyes Docente
Existen diferentes clases de rutas de acceso a la hora de definir los
vnculos.
a. Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la
ruta completa del archivo.
La ubicacin es en Internet, por ejemplo, http://www.google.com, o
http://www.misitio.com/pagina/pagina1.html.
b. Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el
documento actual, pero partiendo del directorio en el que se
encuentra el documento actual.
Si queremos referirnos a carpetas que estn por encima del nivel
donde nos encontramos deberemos utilizar ..
Por ejemplo, imagina que estamos en la siguiente direccin
http://www.misitio.com/pagina/informacion/index.html. En esta
pgina queremos mostrar una imagen que se encuentra en la
carpeta http://www.misitio.com/pagina/secciones/seccion1.html,
cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo
referencia al nivel superior (http://www.misito.com/pagina/) para
poder ir luego a la carpeta secciones.
El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacin,
subimos un nivel y luego nos movemos dentro de la carpeta
secciones para mostrar el archivo seccion1.html.
c. Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el
documento actual.En este mtodo los enlaces se crean indicando la
ruta a partir de la raz del sitio.
En el ejemplo anterior si tuviesemos definido como sitio la carpeta
Ral Ferra Reyes Docente
http://www.misitio.com/, un enlace en cualquier pgina del sitio a
http://www.misitio.com/pagina/secciones/seccion1.html se creara
como /pagina/secciones/seccion1.html.
Como puedes ver ahora el vnculo a un archivo en todas las pginas
es igual porque se define dependiendo del sitio raz y no de la
ubicacin donde se encuentra.
Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del
actual o de otro diferente. Para ello el vnvulo debe ser
nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a travs del men
Insertar, opcin Anclaje con nombre.
Podramos referenciar de este modo a un anclaje llamado parte2 de
la siguiente forma: ../secciones/seccion1.html#parte2
5. Imagen de sustitucin. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sita
sobre ella. Este tipo de imagen suele utilizarse en los mens o en los
botones para desplazarnos a travs de distintas pginas.
Para insertar un rollover hay que dirigirse al men Insertar, Objetos de
Imagen, a la opcin Imagen de sustitucin. En la nueva ventana hay que
especificar la imagen original y la de sustitucin.
Ral Ferra Reyes Docente
Es preferible que la opcin Carga previa de imagen de sustitucin est
activa. Si se activa, la imagen de sustitucin se carga cuando se carga la
pgina, de este modo se evitan las demoras debidas a la descarga de la
imagen cuando llega el momento de que aparezca.
6. Botones Flash
Existen otra serie de imgenes especiales, similares a los rollovers, que
suelen utilizarse para crear mens, como pueden ser los botones Flash.
Aqu tienes un ejemplo de botn Flash. Sita el puntero sobre l para ver
qu es lo que ocurre.
Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la
opcin Botn Flash, aparecer el siguiente cuadro de dilogo:
A travs de Estilo: puede seleccionarse uno de los distintos formatos de
botn que se ofrecen.
Ral Ferra Reyes Docente
En esta misma ventana hay que especificar tambin el Texto que mostrar
el botn (Texto del botn:), as como el nombre con el que ser guardado
(Guardar como:) y el vnculo asociado (Vinculo: y Destino:).
Es preferible guardar los botones Flash en el mismo directorio que los
documentos HTML, en lugar de la carpeta destinada a almacenar
imgenes, ya que de no ser as es posible que al intentar asignar un
vnculo dentro del propio sitio, Dreamweaver no permita guardar el botn
con ese vnculo en una ubicacin diferente de la de dicho documento.
Recuerda que los botones deben guardarse con la extensin SWF.
Recommended