Iniciacion-Web 2 PDF

Iniciacin al diseo y la programacin web
Unidad 1. Proceso del diseo web
SCORM
STANDARD
Realizado segn norma
UNE 66181
Iniciacin al diseo y a la programacin web

INTRODUCCIN
El diseo web consiste en planificar y disear un sitio web. No es slo una aplicacin convencional requiere tener en cuenta
aspectos como:
Navegabilidad
Interactividad
Usabilidad
Arquitectura de la Informacin
Tambin hay aspectos a tomar en cuenta la interaccin con los medios como:
Texto
Imagen
Enlaces
Audio
Vdeo
Un buen diseo con unos contenidos adecuados aumenta la eficiencia de la web, la comunicacin y el intercambio de datos y
establece un mayor contacto entre el diseador web y el usuario.
AL FINALIZAR ESTA UNIDAD SABRS...

Al finalizar esta unidad sabrs...
Conocer la tecnologa que nos rodea y usarla en nuestro beneficio no solo de forma lucrativa, sino desde el
punto de vista empresarial.
Obtener los conocimientos adecuados para que una web sea accesible a los usuarios y de fcil manejo a la
vez que atractiva.

CONOCIMIENTOS PREVIOS Y RECURSOS

A lo largo de esta unidad vamos a trabajar una serie de conceptos que requieren de unos conocimientos previos bsicos
que te permiten el seguimiento del curso sin dificultad. Adems, ponemos a tu disposicin los recursos didcticos necesarios
para poder realizar un ptimo seguimiento.
CONOCIMIENTO PREVIO
En esta unidad se estudian conceptos bsicos que permitan el seguimiento del curso sin dificultad:
Trabajo del diseador.
Consejos para crear una web.
RECURSOS DIDCTICOS
En la unidad se hace uso de numerosos recursos pedaggicos que facilitan el aprendizaje de los conocimientos mostrados:
Definiciones y ejemplos de los principales conceptos.
Actividades para poner en prctica los conocimientos adquiridos.
Autoevaluaciones para comprobar el aprendizaje adquirido.
Resumen de las ideas claves de la unidad.

1.TRABAJO DEL DISEADOR DESDE EL PUNTO DE VISTA DE LA EMPLEABILIDAD

Hoy enda una de las mejores salidas profesionales y del punto de vista de la empleabilidad es el Diseo Web.
Para ello vamos a seguir las pautas adecuadas en este curso y utilizar de forma correcta los medios adecuados para su
realizacin.
Ver que con herramientas concretas podemos realizar una Web de forma sencilla y directa,llegue a los usuarios que navegan
en la red de Internet.
En el siguiente vdeo podr ver la importancia que tiene una web en Internet y sus ventajas:
http://youtu.be/O7GN0D-WWk0
1.1. EMPRESA EN EXPANSIN

Hoy en da todas las empresas que quieren tener relevancia en el mercado necesitan estar en la red de Internet,aunque cada
vez aparecen ms en las RRSS, para abarcar mas campo de accin. Ah entra en el Diseador Web y el programador.
El Diseador Web es aquel que refleja en cuestin de segundos el potencial de la empresa en la red. Cada vez hay ms personas
que ven este campo como una posibilidad de empleo y no slo como algo lucrativo.
Se valora no solo que la web sea informativa, tambin se busca la forma de que sea atractiva al usuario y por lo tanto capta
el inters del usuario web, por lo que hay que realizar tanto un buen diseo y como un buen marketing .
En el siguiente vdeo se puede ver la importancia de una web hecha a medida:
http://youtu.be/oZUSzZFCF-Y
SABAS QUE?
En la actualidad para una empresa es indispensable contar con un sitio web, ya que la red es el medio ms
utilizado por todos los usuarios para buscar informacin y llegar hasta las empresas a las cuales se les va a
comprar un producto o contratar un servicio.

1.2. POTENCIAL DE INTERNET

El potencial y las posibilidades que ofrece Internet son prcticamente infinitas:
Los productos de cualquier empresa pueden estar disponibles para clientes en cualquier parte del planeta.
Los negocios pueden ser de cualquier tamao, desde taller artesano o una gran firma internacional.
Siempre hay espacio para un nuevo negocio.
Es posible empezar con nada o muy poco.
Internet es una gran red en continua expansin y se adapta a las necesidades crecientes de los distintos tipos de usuarios. Y
una de las mayores ventajas es que puedes trabajar desde cualquier lugar del planeta y estar disponible con un solo clic.

1.3. TECNOLOGA Y SU USABILIDAD

Toda pgina web debe cumplir una serie de requisitos para conseguir una experiencia ptima para el usuario, tales como:
Rapidez de carga.
Interfaz sencilla e intuitiva.
Fcil localizacin.
El usuario debe ser capaz de encontrar lo que quiere solo con 3 clics.
Clasificar, jerarquizar y estructurar bien los contenidos.
Todo esto permite que los usuarios satisfagan sus necesidades de informacin de un modo ptimo.

2. CONSEJOS PARA UNA WEB CON XITO

No siempre utilizar la ltima tecnologa es lo ms indicado para triunfar en la red.
Lo primero que tendr que pensar es en nuestros visitantes y no todos tienen el acceso a las ltimas tendencias, en lo que a
lo tecnolgico se refiere.
Si seguimos este consejo podremos mantener una buena interaccin con ellos.
Los mejores sitios web ofrecen material valioso y asistencia de calidad. Para ello debemos tomar en cuenta:
El dominio y Alojamiento.
El contenido.
La Informacin.
Importancia de la pgina principal.
Navegadores y enlaces.
El tiempo.

2.1. DOMINIO Y ALOJAMIENTO

Al realizar un trabajo de diseo y programacin web, se necesita que este se vea en la red de Internet. Para ello son necesarios
tanto el dominio como el Hosting o Almacenamiento, sin los cuales sera imposible que los usuarios visualicen el trabajo
realizado, a continuacin se explican cada uno de ellos y para que sirven.
Un dominio es el nombre que identifica unsitio web y cada dominio tiene que ser nico enInternet. Un soloservidorweb puede
servir mltiplespginas webde mltiples dominios, pero un dominio slo puede apuntar a unservidor.
Hosting o Almacenamiento sirve para almacenar los archivos que componen una pgina web, sus correos electrnicos,
bases de datos, etcAdicionalmente con el hosting se puede instalar paquetes gratuitos tales como los blogs, foros, etc
En el siguiente vdeo se amplia la informacin sobre el dominio y el hosting:
http://youtu.be/wRy_T4p2zO8
UN DATO/EJEMPLO
https://www.andaluciacompromisodigital.org es el nombre de dominio de lapgina web de ACD.
2.2. CONTENIDO
El contenido de una web es el recurso ms importante ya que contiene cualquier cosa que un usuario pueda leer, ver o
escuchar. Es la base para que el usuario no cierre la web y navegue por ella. Los puntos ms relevantes que se deben emplear
se muestran a continuacin, junto con un vdeo explicativo de su importancia.
Para disear una web debe saber de forma concreta y concisa lo que realmente quiere la empresa o persona para la cual va
a realizar este servicio.
Otro punto a tener en cuenta sobre en contenido que va a introducir en la web es que tanto las imgenes, sonidos, vdeos y
textos sean de libre uso, de creacin propia o tomadas de bancos de imgenes y sonidos adquiridas con su compra.
El diseo que realicemos debe ser atractivo e incite al usuario a quedarse en la web y quieran pasar al siguiente nivel dentro
de ella.
En el siguiente vdeo se explica el marketing de contenidos:
http://youtu.be/ANwZNnHP6Qo

ACTIVIDAD
Busca en Internet una web que sea rica en contenidos y comparte dicha web en el tema Actividad 1: Contenido
del foro de actividades, para debatir con los compaeros/as del curso porque te parece interesante.
2.3. INFORMACIN VALIOSA

Los mejores sitios web ofrecen material valioso y asistencia de calidad, esto hace que tenga mayores probabilidades de
mantener a los visitantes de las pginas web.
Hay que tomar en cuenta que la informacin debe ser actual e interesante para el visitante, para que capte su inters.
Si redacta los textos de forma que el visitante se sienta incluidos en ellos y no como si estuviese en un segundo plano,
conseguir que su informacin sea valiosa.
UNA VENTANA AL MUNDO

Listado de las 10 pginas web ms visitadas :
https://www.google.es
https://www.facebook.com
http://www.youtube.com
https://twitter.com
http://www.wikipedia.org
https://login.live.com
https://www.yahoo.com
https://www.linkedin.com
http://www.marca.com

ACTIVIDAD
Visite las diferentes web que estn en la lista de las 10 ms visitadas y comente en el tema Actividad 2: Top
10 visitas del foro de actividades con sus compaeros/as porque cree que son las ms visitadas.
2.4. IMPORTANCIA DE LA PGINA PRINCIPAL

La pgina principal de una web es el reflejo de lo que se va a encontrar en las sucesivas pginas que contiene la web. Es el
primer impacto y debe captar el inters del navegante para que se quede visitando la web. Por ello debemostener en cuenta
diferentes aspectos como:
Adaptar la estructura al pblico objetivo.
Dejar claro el tema de la web.
Un men de navegacin claro y accesible.
Una carga ligera en la que el visitante no tenga que esperar.
PRESTA ATENCIN
Si tomamos en cuenta estos aspectos conseguir una pgina principal exitosa y el visitante se mantendr en
la web por ms tiempo.
10

2.5. NAVEGADORES Y ENLACES
CONCEPTO
Unnavegador, es un software que permite el acceso a Internet, el cual interpreta la informacin de archivos y
sitios web para que puedan ser ledos.Los navegadores ms utilizados son: IE explorer, Chrome, Mozilla Firefox
y Safari.
Navegadores
No todos los visitantes tienen instaladas las ltimas versiones de los programas de navegacin. Por eso, hay que disear
una web teniendo en cuenta este factor.
Tambin existen diferentes programas de navegacin, en los cuales ver que no tiene el mismo aspecto la web, si no
los tiene en cuenta. Esto ocurre porque cada Navegador interpreta de forma diferente los lenguajes que sustentan e influyen
en el aspecto de la web(HTML y CSS).
Lo bueno es que hoy en da, con el nacimiento de los nuevos estndares (HTML5 y CSS3) ha mejorado este aspecto.
Enlaces
Siempre debemos facilitar la navegacin interna de la web.
Incluir datos de contacto para solicitar informacin adicional.
De ser posible incluir un mapa de navegacin del sitio lo mas sencilla posible.
RECUERDA
Los enlaces se puede incorporar a travs de hipervculos o poniendo la URL.
ACTIVIDAD
En Internet existen distintos tipos de navegadores como se expone en el tema. Busque a travs de la red
alguno diferente y comente sobre l en el tema Actividad 3: Navegadores del foro de actividades con sus
compaeros/as en el foro.
11

2.6. EL TIEMPO ES ORO
CONCEPTO
Posicionamiento Web: es elposicionamiento en buscadoresuoptimizacin en motores de bsquedaes el
proceso para que de un sitio web se encuentre en los diferentesbuscadores. Tambin se le denomina, SEO
(Search Engine Optimization). Es comn llamarloposicionamiento web, aunque es tan preciso, ya que engloba
otras fuentes de trfico fuera de los motores de bsqueda.
Se dice que para tener xito en la red hay que estar en los mejores puestos de los motores de bsqueda, esto es algo que
influye para que el visitante le encuentre lo antes posible. Pero si bien es cierto que no slo eso es lo que hace que su web sea
atractiva a los visitantes. Hay que tomar en cuenta que no deber hacer perder el tiempo del usuario que nos visita.
El visitante de una web piensa que su tiempo es oro no se parar en ver y visitar aquellas web que no sean interesantes y les
hagan perder ese valioso tiempo.
En el siguiente vdeo podr ver las tcnicas de posicionamiento:
http://youtu.be/ZOI-lynLujM
12

RESUMEN
En este primer tema hemos visto como Internet es un medio atractivo para muchos usuarios y lo cual genera un nuevo campo
de trabajo cada vez ms demandado y en auge.
Los consejos prcticos para hacer que su web sea todo un xito, tanto en el contenido, como en los aspectos relacionados con
la usabilidad de la web lo cual har que el resultado sea interesante para los visitantes de las diferentes web que realicemos.
Tales como el contenido que debemos introducir en la web ya sea texto, imgenes, sonidos, vdeos o animaciones.
Por ltimo resaltar los distintos Navegadores ms importantes que se utilizan hoy en da como son:
IE explorer.
Chrome.
Mozilla Firefox.
Safafi.
13

Unidad 2. Aspectos previos al diseo
SCORM
STANDARD
UNE 66181

PRESENTACIN
Los aspectos claves para realizar una web de forma correcta son las siguientes:
Investigacin y Recopilacin.
Estructuracin de una web.
Contenido de una web.
Teora del color.
Tipografa.
Si las sigue y es minucioso en su desarrollo podr conseguir el xito en su elaboracin.

Conocer los aspectos previos antes de realizar una web, elaborar el contenido y su estructura adecuada,
aadiendo de forma objetiva lo que el cliente desea o saber las necesidades y realizarla de manera personal.
15


A lo largo de esta unidad vamos a trabajar una serie deconceptosque requieren de unos conocimientos previosbsicos que
te permiten el seguimiento del curso sin dificultad. Adems, ponemos a tu disposicin losrecursos didcticos necesariospara
poder realizar un ptimo seguimiento.
CONOCIMIENTO PREVIO
En esta unidad se estudianconceptos bsicos que permitan estructurar sin dificultad el trabajo a realizar:
Como realizar un buen diseo.
Estructura y maquetacin de una web.
Uso correcto del color y la tipografa.
RECURSOS DIDCTICOS
En la unidad se hace uso de numerososrecursos pedaggicosque facilitanel aprendizajede los conocimientos
mostrados:
Definicionesyejemplosde los principales conceptos.
Actividadespara poner en prctica los conocimientos adquiridos.
Autoevaluacionespara comprobar el aprendizaje adquirido.
Resumen de las ideas clavesde la unidad.
16

1. PASOS PARA EL PROCESO DE UN BUEN DISEO

Antes de comenzar a trabajar en la web tendr que tener en cuenta ciertos aspectos para realizar un buen diseo, todos
ellos sumados hacen que se realice un proceso adecuado para que se obtenga un buen resultado a la hora de realizar una
web y contenga un aspecto profesional. En el siguiente punto del tema de esta unidad veremos cada uno de ellos de forma
independiente y los cuales son, a continuacin se exponen dichos pasos:
Investigacin.
Definicin.
Recopilacin.
Interpretacin.
Soluciones.
Propuestas.
SABAS QUE?
Desde que el hombre es hombre ha desarrollado una curiosidad insaciable por conocer historias. Desde las
narraciones junto al fuego en las cavernas hasta las series en Internet siempre estamos dispuestos a escuchar
una buena historia. Escribe tu propia historia en funcin de los objetivos, sector, contexto ya tienes a un
visitante en tu sitio, haz que se interese por lo que tienes que contarle.
17

2. INVESTIGACIN Y RECOPILACIN
Para crear una web en primer lugar tendr que investigar qu desea el cliente y en base a esa informacin tendr que recopilar
el contenido de la misma por medio de: textos, imgenes, sonidos. vdeos.
Estos se van a desarrollar a lo largo del tema concretando los distintos aspectos ya que son fundamentales para realizar una
web tanto creativa como profesional.
UN DATO/EJEMPLO
Esto se puede ver reflejado en la siguiente URL de ACD https://www.andaluciacompromisodigital.org
18

2.1. TEXTOS
Los textos suelen darlos las empresas si son algo muy concreto. A continuacin ver como elaborar cada uno de ellos y su uso
legal.
Deber tener en cuenta que un texto en pantalla, no es igual que en papel, debido a la baja resolucin no lo percibimos igual.
En realidad recorremos la vista de forma rpida por la pantalla y esto hace que la vista salte de un lado a otro sin centrarse
en los detalles.
Recomendaciones del estilo de texto:
Reduzca la longitud del texto.
Una idea por prrafo.
Utilice un estilo directo.
Coloque enlaces para situar al usuario en contexto.
Escoja ttulos explicativos para las pginas.
Encabezados de 2 3 niveles.
Encabezados significativos.
Palabras clave.
Coloque enlaces al final de la frase.
Los enlaces y destinos deben parecerse.
Enlaces con pocas palabras.
EJEMPLO
En esta webhttp://myfavoritething.netpodrs ver reflejado todos los puntos anteriores de forma clara.
ACTIVIDAD
Busca en Internet una web que refleje los puntos destacados en el tema Actividad 1: Textos del foro de
actividades, para debatir con los compaeros/as del curso sobre si se cumplen la mayora de los puntos.
19

2.2. IMGENES
CONCEPTO
La optimizacin de imgenes se puede definir como la reduccin de una imagen en peso la hora de cargar un
web.
Tendr que tener en cuenta que las imgenes que se usen para el diseo web deben tener unas caractersticas especificas ya
que deben cargar de forma rpida y la calidad adecuada para que se vean de forma correcta. Lo primero que hay que ver es
como distinguir los distintos tipos de imagen, para ello tenemos que ver su extensin, que est escrita justo al final del nombre
del archivo y saber si estn el formato correcto para Internet.
Para ello tendr queoptimizar las imgenes y lo lograr al reducir su peso. Esto ayuda a que la velocidad de descarga del
sitio sea ms rpida y que sus visitantes no se cansen de esperar.
En el siguiente vdeo se muestra la forma de optimizar fotografas en tres pasos:
http://youtu.be/ommpKyXJRhA
SABAS QUE?
Segn su peso las imgenes se pueden dividir en:
Pesadas.
Medianas.
Ligeras.
Muy ligeras.
20

2.3. TIPOS DE IMGENES
CONCEPTO
Los formatos o tipos de imgenes que cualquier navegador puede admitir son: .jpg, .gif, .png.
Los siguientes tipos de formatos que se explican a continuacin son los ms usados y que todos los navegadores admiten
sin problemas, a la hora de visualizarse en web. Puede ocurrir que la imagen de un error a la hora de cargar, pero para ello
existen los recursos tales como el texto alternativo que no da una breve descripcin de la imagen, este cdigo se ver en temas
posteriores.
JPG:comprime mucho imgenes,ms que los .gif o los .png. Es excelente para trabajar con fotografas de muchos colores y
texturas, porqu mantiene la calidad. No permite transparencias ni animaciones.
GIF: conserva cada pxel de la imagen original, muy eficiente para grficos sencillos con pocos colores. Permite crear
animaciones y transparencias del 100%.
PNG:es un formato similar al GIF pero no permite crear animaciones, pero permite degradados de transparencias.
En el siguiente vdeo podremos ver como exportar imgenes en diferentes formatos:
http://youtu.be/OGMhDWO38BA
PRESTA ATENCIN
Las imgenes no pueden ser vectoriales ni contener capas. Solo se trabaja con pxeles.
ACTIVIDAD
Buca otros formatos de imagen en Internet que no se reflejen en el tema y crea una definicin en la wiki
Actividad 2: Tipos de imgenes del campus virtual.
21

2.4. SONIDOS
Las audios digitales para web se pueden guardar en distintos formatos y cada uno utiliza un tipo de extensin diferente. Todos
no se pueden escuchar utilizando un mismo reproductor.
Los formatos ms utilizados y universales son:.WAV,.MP3,.OGG.
Como se vio en pantallas anteriores tanto texto como imgenes se tiene que tener en cuenta su uso de forma legal, con los
sonidos ocurre lo mismo, por lo tanto hay que tener mucho cuidado de la fuente que se obtienen, esto se ver dentro de este
tema en puntos posteriores.
En el siguiente vdeo se ve como convertir los diferentes formatos de audio:
http://youtu.be/6cU0s9AOjZI
SABAS QUE?
Exisiten distintos tipos de reproductores: Windows Media Player, QuickTime, WinAmp, Real Player, etc... En
ocasiones algunos de estos reproductores no reproducen todos los formatos de archivos de audio. Cuando esto
ocurre debe descargarse los codec de dicho reproductor. Uno de los mas actualizados hasta el momento es
k-lite.
2.5. VDEOS
A la hora de poner un vdeo dentro de una pgina web no solo se puede realizar por medio de un enlace, tambin se puede hacer
embebiendo el vdeo dentro de ella con una etiqueta<iframe>______</iframe>, esto significa que se puede insertar dentro
de la propia pgina, esto se ver posteriormente en las siguientes unidades del curso.
Tambin, los vdeos digitales al igual que los archivos de imagen y audio tienen varios formatos, los cuales finalizan en
extensiones diferentes. Los ms utilizados son:.AVI,.MPEG,.MOV,.WMV,.RM,.FLV.
As mismo cada tipo de archivo admite en cada momento un cdec de compresin distinto.
Los vdeos al igual que se comenta en las pantallas anteriores relacionadas con los textos, imgenes y sonidos tienen sus
derechos de reproduccin y no se puede poner todo lo que encontremos, porque puede tener derechos de autor. Lo que se puede
poner sin ningn tipo de problema, por ejemplo es un vdeo de elaboracin propia. Hay otros tipos de vdeos que se pueden
utilizar pero se ver en el apartado de usos legales a continuacin dentro de este mismo tema.
22

En el siguiente vdeo explica como instalar el progrmatotal video converter y su uso:

http://youtu.be/yIdaIgyS-44
PRESTA ATENCIN
AVI(Audio Video Interleaved = Audio y Video Intercalado)
MPEG(Moving Pictures Expert Group = Grupo de Expertos de Pelculas)
MOV(http://www.apple.com/es/quicktime)
WMV(http://www.microsoft.com/windows/windowsmedia/es)
RM(http://spain.real.com)
FLV(http://www.adobe.com)
2.6. USO LEGAL DE TEXTOS, IMGENES, SONIDOS Y VDEOS.

Se puede utilizar cualquier recurso que se encuentre en Internet?Puedo usar un recurso con Copyright?Todos los recursos
que estn en la red son gratuitos?. Estas preguntas siempre surgen a la hora de crear una web o incluso un cliente puede
comentarlo, cuando se hable con el.
Dentro del mundo de los derechos de autor, las licencias Creative Commons se permite que se usen recursos que otras
personascomparten y tambin que compartamos recursos propios reservandoalgunos derechos como el reconocimiento de la
autora de la obra.
La correcta utilizacin de cada tipo de archivo se encuentra en el siguiente enlace.
Todos los textos e imgenes que se utilicen dentro de una web deben ser de libre uso y a su vez deber siempre poner de donde
se ha extrado la fuente. Mencionado el autor y la fuente de donde se ha utilizado.
Podr usar contenido de webs como:
http://recursosdidacticos.es/textos
www.sxc.hu
http://www.sonidos-gratis.com
23

RECUERDA
Nunca debe usar textos e imgenes que contengancopyright.
3. ESTRUCTURA DEL DISEO DE UNA WEB
CONCEPTO
El proceso de identificar la forma que tendr una pgina web que se est desarrollando. Es la diferencia entre
estructura y diseo de una web.
Las pginas web se pueden estructurar de diferentes formas para que se aprecie de forma clara y visual al navegante todo lo
que se muestra en ella.
Las estructuras del diseo web son las siguientes:
Estructuras estndares.
Bloque de navegacin izquierdo.
Bloque de navegacin superior.
Bloque de navegacin derecho.
Combinacin de los bloques.
Pie de pgina.
Pgina principal.
24

En la siguientes imgenes se muestra de la web de ACD, ejemplos sobre la estructura:

Cabecera:
Men
Contenido
25

Pie de pgina:
3.1. ESTRUCTURAS ESTNDARES

Uno de los aspectos ms importantes es la estructura de una pgina web es decidir dnde posicionar los diferentes elementos
dentro de ella:
Mens de navegacin.
Enlaces a otras pginas web.
El contenido que van a consultar los navegantes.
Existen diversos tipos de estructuras estndares de pginas web que especifican la posicin de los mens de navegacin y el
contenido.
En el siguiente vdeo se muestran varios tipos de estructuras web:
http://youtu.be/GRkT9SY-Wg4
PRESTA ATENCIN
Los mens de navegacin suelen posicionarse en los mrgenes de la pgina en las estructuras estndares
posicionan los mens de navegacin arriba o en los laterales.
3.2. BLOQUE DE NAVEGACIN IZQUIERDO

El bloque de navegacin situado a la izquierda de su web, permite presentar muchos mens o enlaces, pues cada lnea puede
ser un enlace.
Tambin se puede poner un men desplegable que se puede extender fuera del marco izquierdo, lo cual no supone un
problema ya que aunque salga de el, el usuario puede verlos dentro de una barra de desplazamiento vertical.
26

Este mtodo es ideal si los mens son administrables, pues el diseo no se ver muy afectado si aumentan o disminuyen el
nmero de enlaces.
En el siguiente vdeo se muestra como se realiza un men desplegable en dreamweaver:
http://youtu.be/Ra3SKby4g64
EJEMPLO
Ejemplo de bloque de navegacin a la izquierda:guiadiseo.com
3.3. BLOQUE DE NAVEGACIN SUPERIOR

El bloque de Navegacin Superior es ideal si el sitio web no tiene demasiadas secciones, es muy claro a la hora de visualizarse
y muy recurrido en web claras y atractivas visualmente.Estos mens se sitan en lnea,ocupan mucho espacio y pueden
desplegarse en submens para no ocupar espacio visual.
En el siguiente vdeo tenemos un ejemplo de como realizar un men horizontal con css, en temas posteriores se vera el lenguaje
css:
http://youtu.be/oZa2Ut8u2S0
EJEMPLO
Ejemplo de bloque de navegacin arriba:http://www.apple.es
3.4. Bloque de navegacin derecho

El bloque de navegacin derecho tiene las mismas ventajas que el men situado a la izquierda, pero se usa menos ya que la
lectura que se hace es siempre de izquierda a derecha.
El bloque denavegacinsituado a la derecha de su web, permite presentar muchos mens o enlaces, pues cada lnea puede
ser un enlace.
Tambin se puede poner un men desplegable que se puede extender fuera del marco derecho, lo cual no supone un
problema ya que aunque salga de l, el usuario puede verlo dentro de una barra de desplazamiento vertical.
27

Este mtodo es ideal si los mens son administrables, pues el diseo no se ver muy afectado si aumenta o disminuye el
nmero de enlaces.
EJEMPLO
Ejemplo de bloque de navegacin a la izquierda:http://www.narfstuff.co.uk
3.5. COMBINACIN DE LOS BLOQUES

La combinacin de los anteriores bloques de navegacin se usa cuando se tienen muchos enlaces que representar. Se puede
usar cualquier combinacin como:
Arriba e izquierda.
Arriba y derecha.
Arriba, izquierda y derecha.
Izquierda y derecha.
Estas combinaciones se utilizan cuando los mens se agrupan en dos o tres grandes grupos.
EJEMPLO
Ejemplo de combinacin de bloques:http://www.apple.es
28

3.6. PIE DE PGINA
CONCEPTO
Se denomina pie de pgina a la informacin, datos, comentarios, aclaraciones, ejemplos, notas de editores,
etc...que se anotan al final de la pgina, en un espacio separado del resto del texto.
El pie de pgina es muy importante en las estructuras de los webs actuales.En este bloque de navegacin se repiten los
mens de navegacin, para que el visitante no tenga que hacer todo el recorrido a la parte superior de la web. Tambin se
situar los enlaces deaviso legal,copyright, redes sociales (facebook, RSS, twitter,etc...) o los datos de direccin y contacto.
Pulsa aqu para ver 30 excelentes ejemplos de como aprovechar un pie de pgina.
EJEMPLO
Ejemplo de pie de pgina:http://yuruinspires.com
ACTIVIDAD
Busca en Internet pginas que tengan pies de pginas interesantes y puedas comentar con tus compaeros/as
del curso la funcionalidad que tienen en la Actividad 2: Pie de pgina en el foro.
29

3.7. PGINA PRINCIPAL
DEFINICIN
Lapgina de iniciooportadaes laURLo archivo local que carga cuando se inicia unnavegador web, siendo
la primera pantalla que aparece al usuario.
La pgina principal o de inicio es la primera web que se presenta al navegante, es determinante para que el usuario siga
navegando por medio de ella a las dems web que estn enlazadas a ella, por lo cual tenemos que tener en cuenta aspectos
importantes de la unidad anterior, la cual nos mencionaba las pautas a seguir para que el diseo sea un buen diseo y sea
interesante.
Es un caso especial, en la que no existe una estructura estndar, perotambin se puede estructurar de un modo estndar.
En la gran mayora de sitios web, la pgina principal no se disea para presentar contenido. Lo que representa en ella es una
presentacin ya sea de escaparate a una empresa como a una web personal.
Tambin se presentan los mens o enlaces a las diferentes pginas o secciones de la web de forma distinta.
En el siguiente enlace se amplia esta informacin, pulsa aqu.
EJEMPLO
Ejemplo de pgina principal:http://gnosh.co.uk
ACTIVIDAD
Busque a travs de la red de Internet una pgina principal que cumpla los requisitos de un buen diseo,
comparte el enlace y justifique las razones de su eleccin, en el tema Actividad 3: Pgina principal, del foro
de actividades.
30

4. CONTENIDO DE UNA WEB
CONCEPTO
La maquetacin es la distribucin de los elementos en una pgina web.
La maquetacin se puede dividir en tres partes:

Encabezado.
Columnas.
Pie de pgina.
Hace unos aos la maquetacin de las pginas web se realizaba utilizando tablas. Actualmente, la maquetacin con tablas
ha cado en desuso y se utilizan lascapas.
Estas capas se llaman divisiones o contenedores.
SABAS QUE?
Aunque no es obligatorio poner pie de pgina en una pgina web s que es aconsejable, ya que aparte de
mostrar informacin concreta, establece una delimitacin del final del documento.
4.1. MAQUETACIN DEL TEXTO

La correcta maquetacin de textos y listados ayudan a crear una presentacin de los contenidos, limpia, clara y precisa, algo
que se est destacando desde el comiezo del curso, ya que es la forma en que el navegante puede ver de forma rpida a un
golpe de vista todo el conjunto que se atractivo y se quede visitando la web. Por ello es recomendable tener control sobre
sus principales propiedades, los mrgenes, justificados, sangrados, alineaciones, proporciones, etc. Las hojas de estilo en
cascada, tambin denominadas CSS, ayudan en este propsito,el cual se mostrar en unidades posteriores.
Primero deber ajustar es eltamao de la tipografa, no debe ser ni muy pequea ni demasiado grande. No deber utilizar
menos de 12pxeles, ni ms de 16 pxeles de alto, por lo que el margen ideal para jugar est entre los 13 y los 15 pxeles de
alto en cualquier web.
31

El texto est compuesto por diferentes prrafos, deben estar claramente marcados, separados y facilitar la lectura en
bloques. Hay que evitar que el lector se canse o se pierda. Es recomendable que el espaciado entre prrafos sea del doble que
entre las lneas del texto general.
No hay que utilizarcolores inadecuadospor ser bonitos o llamativos. Si es un texto demasiado saturado y contrastado con el
fondo puede provocar dificultad de lectura.
En el siguiente vdeo se muestra una maquetacin bsica en HTML y CSS:
http://youtu.be/ZUGWwVUrHWo

Introducir el contenido del enlace: http://www.eduteka.org/Netiqueta.php3
4.2. MAQUETACIN DE IMGENES

En Internet no se tiene tanta cuenta de las imgenes que se ponen y se puede aprovechar el impacto visual de la web ms de
lo que se piensa. Tenemos que tener en cuenta que no se puede tomar cualquier fotogrfia ya que puede estar protegida por
los derechos de autor
Siguiendo los siguientes pasos podr obtener un gran resultado:
Tener una buena paleta de colores adecuada a la marca y al mensaje.
Tener una buena historia que contar.
Seleccionar imgenes impactantes y originales para contar la historia.
Nombrar, describir y etiquetar de forma exhaustiva las imgenes.
En el siguiente vdeo se muestran sitios libres para descargar imgenes y como usarlos:
http://youtu.be/CXZbaONWA08
32

5. TEORA DEL COLOR

Vdeo explicativo sobre la teora del color. En l encontrar las pautas adecuadas para su uso y aplicacin dentro de la web.
http://youtu.be/vGh-Sg7Dh1k
6. TIPOGRAFA
La palabara tipografa procede de la unin de tres componentes: el vocablo tipos el cual significa molde, el concepto
graphos que se traduce como escribir o grabar y el sufijo ia que es equivalente a cualidad o accin.
Se conoce como tipografa a la destreza, el oficio y la industria de la eleccin y el uso de tipos, para desarrollar una labor
de impresin. Se trata de una actividad que se encarga de todo lo referente a los smbolos, los nmeros y las letras de un
contenido que se imprime en soporte fsico o digital.
En el siguiente vdeo se muestra como descargar una fuente de forma gratuita:
http://youtu.be/cyAcadPHM3o
6.1. FUENTES, FAMILIAS Y CLASIFICACIN TIPOGRFICAS

Porfuente tipogrficase entiende al estilo o apariencia de un grupo de caracteres, nmeros y signos, con caractersticas
comunes.
Mientras quefamilia tipogrfica, es un conjunto de tipos basado en una misma fuente con algunas variaciones, tales como,
el grosor y la anchura, pero manteniendo caractersticas comunes.
Cada fuente y familia tipogrfica tiene caractersticas que la distinguen entre otras, que las hace nicas y le da personalidad
al texto.
Para entender diferencias entre las familias tipogrficas dividiremos las diferentes tipografas en las siguientes categoras:
Serif.
Sans Serif.
Manuscritas.
Exhibicin.
Smbolos.
Ejemplo
Introducir el contenido del enlace indicado: www.dafont.com/es
33

6.2. SERIF
Esta tipografa crea el efecto de tranquilidad, autoridad, dignidad y firmeza; contiene un pequeo embellecimiento llamados
pies. Estos permiten al ojo seguir la lnea fcilmente, sobretodo en bloques de texto amplios.
Otra particularidad de las fuentes serif, es que las letras redondas como la o, c, p, b, etc., tienen que ser un poco ms grandes
porque visiblemente parecen ms pequeas cuando se agrupan en una palabra.
La tipografa Serif se clasifican en:
Romanas.
Glfico.
Caligrficas.
EJEMPLO
Este tipo de fuentes se pueden encontrar de forma gratuita en la siguiente web: http://www.1001freefonts.com
Este dipo de fuentes son relativas a los tipos serif: Book Antiqua, Bookman Old Style, Courier, Courier New,
Garamond, Georgia, Lucida Bright, MS Serif, New York, Times, Times New Roman y Palatino.
34

SABAS QUE?
Las fuentes serif o de adorno son originarias del pasado, cuando las letras se cincelaban en bloques de piedra.
Por lo que resultaba muy difcil que los bordes de las letras fueran rectos. As que se desarroll una tcnica
donde las letras presentaban en sus extremos unos remates muy caractersticos, conocidos con el nombre de
serif.
6.3. SANS SERIF

Del francsSans sin Serif, serifa o patines. Las fuentes Sans Serif no tienen pies, es decir, no tienen remates en sus extremos.
Las fuentes Sans serif, etruscas o de palo seco, hacen su aparicin en Inglaterra durante el siglo XIX. Entre sus trazos
gruesos y delgados no existe contraste, sus vrtices son rectos y sus trazos uniformes
Este tipo de fuente crea el efecto de modernidad, sobriedad, alegra y seguridad. Es ms neutra, pero dificultan la lectura de
textos largos, as que se usan para textos cortos como etiquetas, embalajes, rtulos y medios digitales.
En esta web podrs encontrar tipos de fuentes sans serif, pulsa aqu.
EJEMPLO
Aqui podemos ver algunos ejemplos de tipografa sans serif: Arial, Chicago, Mnaco, Tahoma, Helvtica,
Verdana y Univers.
6.4. MANUSCRITAS
Las fuentes manuscritas o script parecen cursivas o de caligrafa. En el diseo de una presentacin digital, las reservamos
para acentuar el ttulo principal, o la firma del autor.
La tipografa manuscrita se divide en:
Brush.
Caligrfica.
Canciller.
35

Casual.
Formal.
Semi-formal Grfico.
Monolnea..
EJEMPLO
Estos angunos tipos de fuentes manuscritas o script: Aelfa, Belphebe, Brush, Edwardian Script, English,
Killigraphy, Medieval Victoriana y Vivaldi.
6.5. EXHIBICIN
Las fuentes de Exhibicin son las que tienen mayor atraccin de todas las categoras. La forma del carcter puede sugerir una
poca o perodo de tiempo, otras otorgan mayor personalidad.
Son una tipografa decorativa:
Antigua.
Art Nouveau.
Art Deco.
Exhibicin.
Grune.
Fantasa, etc...
Las fuentes de la exhibicin se utilizan nica y exclusivamente para el ttulo.
EJEMPLO
Las ms conocidas: Terminator, Star Wars, Final Frontier y Jokerman, creadas por la industria del entretenimiento,
el arte y la tecnologa., Killigraphy, Medieval Victoriana y Vivaldi.
36

6.6. SMBOLOS
Las fuentes de smbolos o Dingfonts y Dingbats, incluyen smbolos, muestras, logotipos, ornamentos, imgenes y otros
caracteres no alfabticos. Se utilizan para enfatizar, para vietas y decoraciones.
Caps-Fontbats, letras capitulares y letras especiales construidas con dibujos o que los incluyen.
En el siguiente vdeo podr ver una presentacin de fuentes tipogrficas:
http://youtu.be/iwIy0enG6uU
SABAS QUE?
En 1880, un dingbat era un ornamento o un espaciador usado en la composicin tipogrfica. Algunos
fabricantes llaman a estas colecciones Wingdings.
6.7. COLOR TIPOGRFICO

Para conseguir una buena legibilidad cuando utilizamos los distintos tipos de fuentes debemos equilibrar el y color
cuidadosamente y tomar en cuenta las siguientes propiedades:
Tono: el color posee una serie de propiedades que le hacen variar de aspecto y que definen su apariencia final. Una
propiedad del tono es el matiz el cual se define como un atributo de color que nos permite distinguir el rojo del azul, y se
refiere al recorrido que hace un tono hacia uno u otro lado del circulo cromtico, por lo que el verde amarillento y el verde
azulado sern matices diferentes del verde.
Valor: es el trmino que se usa para describir si un color es mas claro u oscuro, esto y se refiere a la cantidad de luz
percibida.
Intensidad: tambin se le denomina Croma, representa la pureza o intensidad de un color particular, la viveza o palidez
del mismo, y puede relacionarse con el ancho de banda de la luz que se visualiza. Los colores puros del espectro estn
completamente saturados. Un color intenso es muy vivo. Cuanto ms se satura un color, mayor es la impresin de que el
objeto se est moviendo.
En el siguiente video se muestran los diferentes tonos de un color:
http://youtu.be/0xy5b8UJ-XI
37

PRESTA ATENCIN
Si tenemos un color de fondo claro hay que poner una tipografa oscura para tener mas legibilidad y si el fondo
es oscuro la tipografa debe ser clara.
6.8. UTILIZACIN CORRECTA

Para una utilizacin correcta de de las tipografas se deben seguir los siguientes pasos para su correcta utilizacin:
No mezclar tipografas: Si se mezclan varios tipos de tipografa no comunicamos lo que queremos decir de forma clara y
perdemos la unidad del mensaje.
Cuidado con los estilos: La negrita, el subrayado, el uso de maysculas, el tachado, etc.El uso abusivo de ellas hace
que el texto pierdadistincin.
Optar siempre por la legibilidad: Una tipografa debe de ser legible por ello es mejor no aadir texturas, sombras o colores
que dificulten su lectura y comprensin.
Kerning y Karting: El espaciado y el interlineado al acercar o alejar loscaracteres sin querer, puede perder la armona
del texto y la legibilidad.
EJEMPLO
En el siguiente enlace puede acceder a errores tipogrficos ms comunes, pulse aqu.
ACTIVIDAD
Busque a travs de la red de Internet errores tipogrficos y expongalo en el foro actividades con sus compaeros,
en el tema Actividad 4: Errores tipogrficos.
38

RESUMEN
En este tema se han desarrollado los aspectos previos a tener en cuenta para realizar un diseo en web de forma correcta,
siguiendo los parmetros de recopilacin e investigacin de todo el contenido.
Los usos legales de textos, imgenes, sonidos y vdeos. As como las estructuras de las pginas segn nuestro diseo y
contenido de la misma.
Otro aspecto importante a tomar en cuenta son la maquetacin de textos e imgenes y los colores que se deben usar en la
web y sus diferentes usos, con ejemplos bien explicados en cada tema.
Por ltimo la explicacin de la tipografa adecuada y sus tipos.
DE ACTUALIDAD
Dnde realizar un registro de la propiedad intelectual (copyright).
http://www.mcu.es/propiedadInt/CE/PropiedadIntelectual/PreguntasFrecuentes/RegistroPropiedadIntelectual.
html
39

Unidad 3. Editores de cdigo y editores web
SCORM
STANDARD
UNE 66181

PRESENTACIN
El tema que compete a este apartado muestra el cdigo bsico para realizar una web completa, sus puntos a destacar son
los siguientes:
HTML: que es, para que sirve, las versiones que hay en la actualidad y compatibilidad con los diferentes navegadores.
Estructura de una pgina: como estructurar una web con las diferentes etiquetas de las que estn compuestas.
Como interpreta el cdigo html a la hora de escribir un texto para que se muestre tal como lo diseamos.
Los enlaces, imgenes, tablas y estilos que podemos crear con html y css.

Crear una pgina web completa, por medio del lenguaje html. Escribiendo su lenguaje con la estructura
correcta por medio de etiquetas, atributos y valores.
41


A lo largo de esta unidad vamos a trabajar una serie deconceptosque requieren de unos conocimientos previosbsicos
que te permiten el seguimiento del curso sin dificultad. Adems, ponemos a tu disposicin los recursos didcticos
necesariospara poder realizar un ptimo seguimiento.
CONOCIMIENTO PREVIO
En esta unidad se estudianconceptos avanzadosque requieren de unos conocimientos previos bsicos que
se han visto anteriormente:
Investigacin y recopilacin de informacin.
Estructura de una pgina web en html.
HTML+ CSS.
RECURSOS DIDCTICOS
En la unidad se hace uso de numerososrecursos pedaggicosque facilitanel aprendizajede los conocimientos
mostrados:
Definicionesyejemplosde los principales conceptos.
Actividadespara poner en prctica los conocimientos adquiridos.
Autoevaluacionespara comprobar el aprendizaje adquirido.
Resumen de las ideas clavesde la unidad.
Mapa Conceptual
42

1. HTML
Unapgina web puede construirse con un simple editor de texto, tal como el bloc de notas que nos proporciona Windows. Con
el conocimiento adecuado del lenguaje HTML y sus etiquetas se puede crear una pgina web, este proceso se le denomina,
crear pginas web a sangre.
Una vez controlando el entorno y las bases principales previas a la realizacin de la pgina web, es conveniente disponer de
programas que nos faciliten la tarea. Un documento hipertexto no slo se compone de texto, contiene imgenes, sonido, vdeos,
etc.
Los documentos HTML deben tener la extensinhtmlohtm, para que puedan ser visualizados en los navegadores, que se
encargan de interpretar dicho cdigo de los documentos y mostrar a los visitantes el cdigo interpretado.
Editores web de pago ms populares
Editores web gratuitos ms populares
Dreamweaver
Amaya
FrontPage, reemplazado por Expression Web y SharePoint

Designer.
Aptana
CoffeeCup HTML Editor

HomeSite
Mozilla Composer
Nvu
SeaMonkey Composer
1.1. VERSIONES DE HTML

HTML fue desarrollado por Tim Bernes-Lee pero debido al rpido crecimiento de la web, surgi la necesidad de crear un
estndar para que tanto los programadores como los navegadores pudieran basarse en unas mismas normas para escribir
HTML.
Cada versin de HTML establece unas normas respecto a cules son las etiquetas vlidas y cmo se deben escribir.
Los estndares oficiales HTML son:HTML 2.0,HTML 3.2,HTML 4.0,HTML 4.01,HTML 5. En la actualidad se usa HTML 5.
Un estndar es un conjunto de reglas normalizadas que describen los requisitos que deben ser cumplidos, con el objetivo de
establecer un mecanismo base para permitir que distintos elementos hardware o software que lo utilicen, sean compatibles
entre s.La finalidad de los estndares es la creacin de una web universal, accesible, fcil de usar y en la que todo el mundo
pueda confiar.
43

El W3C se gua por los principios de accesibilidad, internacionalizacin, e independencia de dispositivo. Hace que el acceso a
la web sea posible desde cualquier lugar, en cualquier momento y utilizando cualquier dispositivo.
PRESTA ATENCIN
Para que los navegadores identifiquen el primer html, este debe llamarse index.
1.2. NAVEGADORES Y COMPATIBILIDAD
CONCEPTO
El navegador instalado en el ordenador es el que interpreta el cdigo HTML de la pgina en la red de Internet.
Por lo que podra ocurrir que dos visitantes visualicen de forma distinta la misma pgina, ya que si son
distintos navegadores o versiones diferentes del mismo, se visualizarn de diferente forma.
Los navegadores hoy en da pretenden ser compatibles con la ltima versin de HTML. Para ello es necesario actualizar el
navegador para que pueda ser compatible con esta ltima versin. Si el navegador est actualizado interpretar un mayor
nmero de etiquetas, si no la reconoce la ignora y el efecto no quedara reflejado en la pgina web.
Tambin puede ocurrir que alguna etiqueta solo sea interpretada por un navegador en concreto y por lo tanto se ver diferente
en una navegador que en otro.
44

PRESTA ATENCIN
El reto del diseador de pginas web es hacer que las pginas sean ms atractivas usando todo el potencial
del lenguaje HTML y tiene que tomar en cuenta todos estos puntos de compatibilidades para que los visitantes
vean la pgina web tal como la ha diseado.
1.3. ETIQUETAS
CONCEPTO
Las etiquetas delimitan cada uno de los elementos que componen un documento HTML.
Existen 2 tipos de etiquetas:

Comienzo.
Cierre.
La etiqueta de comienzo se representa entre los smbolos:
<
>
La etiqueta de final se representa entre los smbolos:
</
>
Las etiquetas estn compuestas por el nombre de la etiqueta y en el caso de la etiqueta de comienzo puede contener atributos,
los cuales permiten aadir propiedades. La etiqueta de cierre no contiene nunca atributos.
Sintaxis de etiqueta de comienzo:<etiquetaatributo1=..... atributo2=..... ...>
Sintaxis de etiqueta final:</etiqueta>
45

Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre,
a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar
etiquetas entre otras etiquetas de comienzo y de cierre.
Ejemplo de una etiqueta de apertura y cierre:
<body> contenido de la etiqueta body </body>
2. ESTRUCTURA DE UNA PGINA
PRESTA ATENCIN
Los smbolos < >, se encuentran en el teclado en la parte izquierda, al lado de la tecla shift.
La estructura de una pgina web se basa en:

Etiquetas.
Atributos.
Valores.
Las etiquetas son las que componen la estructura del cdigo, los atributos son las caractersticas que se visualizarn cuando
el navegador las interprete, por ltimo el valor es la especificacin de cada atributo.
En el siguiente vdeo se puede ver como crear una estructura html y como ver el cdigo fuente de una web.
http://www.youtube.com/watch?feature=player_embedded&v=sOyA84uhoCQ
46

2.1. ETIQUETAS BSICAS

La estructura bsica de una web en HTML es la siguiente:
<html>: Representa la raz de un documento HTML. Esta etiqueta comprende todo el contenido que va a aparecer dentro
de la pgina web.
<head>: Etiqueta de cabecera que incluye enlaces a, o definiciones de, scripts y hojas de estilo. Dentro de ella se situan
algunas etiquetas como <title>contenido del ttulo de la web</title>.
<title>: Define el ttulo del documento, este se muestra en a barra de ttulo del navegador. Se situa siempre dentro de la
cabecera o etiqueta <head>_____</head>.
<body>:Es el contenido principal del documento, slo puede existir uno. Est situado despus de la etiqueta de cierre </
head>
Todas ellas tienen un etiqueta de comienzo y cierre.
EJEMPLO
Abrir el Bloc de notas y escriba, en el documento en blanco, el texto siguiente:
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body>
<font>Hola, esta es mi primera pgina web.</font>
</body>
</html>
Guarda el documento con la extensinhtm o html y al abrirlo, lo har en el navegador y se podr visualizar el
cdigo html interpretado.
47

2.2. ESTRUCTURA DE UNA WEB EN HTML
CONCEPTO
En el cdigo html se pueden distinguir dos partes:
Lacabecera. Es la seccin comprendida entre<head>y</head>. En ella se encuentra siempre el ttulo entre
las etiquetas<title>y</title> esta etiqueta designa el ttulo de nuestra pgina y este se muetra en la parte
superior del navegador.
Elcuerpo(<body> y </body>) del documento html. Es aqu donde debemos colocar el contenido de nuestra
pgina: texto, fotos, etc.
Todos los documentosHtmltienen la estructura que se muesta a continuacin:

<html>
<head>
<title>Ttulo de la pgina</title>
........
</head>
<body>
Aqu ira el contenido de la pgina
</body>
</html>
ACTIVIDAD
En un archivo TXT realiza la estructura bsica de una pagina HTML utilizando el cdigo mencionado en el
apartado anterior y sbelo a la tarea: Actividad 1: estructura HTML del campus virtual.
48

2.3. COLORES HEXADECIMALES
CONCEPTO
El cdigo de color hexadecimal se compone de:
Almohadilla (#).
Seis dgitos (del 0 al 9) o letras (de la A a la F).
Existen ms de 1.000 cdigos hexadecimales y no es fcil calcular qu cdigo hexadecimal corresponde a un color especfico.
Para agregar un color de fondo a una pagina html se inserta el atributo dentro de la etiqueta <body>:
<body bgcolor=color de fondo>
Ejemplo:
<body bgcolor=#000000>
Posteriormente se ver que los colores y los atributos de los elementos se aaden a las hojas de estilo CSS.
EJEMPLO
Blanco: #ffffff
Negro: #000000 (ceros)
Rojo: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarillo: #ffff00
SABAS QUE?
Que existen herramientas online para capturar los colores que vemos en pantalla, como por ejemplo ColorZilla
de Filezilla.
En el siguiente enlce encontrars extensiones de Google Chrome que facilitan la tarea de diseo web.
49

2.4. ETIQUETA <META>
CONCEPTO
La etiqueta<meta>se utiliza para aadir informacin sobre la pgina, la cual es utilizada por los buscadores,
buscando coincidencias con lo que el usuario pretende encontrar.
A travs de esta etiqueta pueden especificarse los atributosnameycontent.

name:tipode informacin.
content:valorde dicha informacin.
Los tipos de informacin ms utilizados son los siguientes:
Tipo
Significado
author
Autor de la pgina
classification
Palabras para clasificar la pgina en los buscadores
description
Descripcin del contenido de la pgina
generator
Programa utilizado para crear la pgina
keywords
Palabras clave
La etiqueta<meta>no necesita etiqueta de cierre y debe estar entre las etiquetas<head>y</head>.
EJEMPLO
<html>
<head>
...
<metaname=authorcontent=nombre del autor>
<metaname=descriptioncontent=Curso de HTML>
<metaname=keywordscontent=cdigo HTML etiqueta pgina web curso>
</head>
50

3. EL TEXTO
Cuando se escribe un texto en html hay que tener en cuenta que el idioma espaol tiene letras que en este lenguaje no estn
contempladas, para que salgan de forma correcta hay que escribirla en forma de cdigos.
Para dar formato al texto se vern las etiquetas y atributos para ello, se crearn separadores, tipos de sagrado, resaltados y
prrafos. Diferentes tipos de encabezados tan importantes para realizar los ttulos y subttulos.
Tambin las marquesinas es un punto a resaltar ya que es la forma de dar interaccin y destacar un texto dentro de la pgina
web.
Deber tener en cuenta que un texto en pantalla, no es igual que en papel, debido a labaja resolucinno lo percibimos igual.
En realidad recorremos la vista de forma rpida por la pantalla y esto hace que la vista salte de un lado a otro sin centrarse
en los detalles.
Recomendaciones delestilo de texto:
Reduzca la longitud del texto.
Una idea por prrafo.
Utilice un estilo directo.
Coloque enlaces para situar al usuario en contexto.
Escoja ttulos explicativos para las pginas.
Encabezados de 2 3 niveles.
Encabezados significativos.
Palabras clave.
Coloque enlaces al final de la frase.
Los enlaces y destinos deben parecerse.
Enlaces con pocas palabras.
EJEMPLO
Para mostrar el signo < debemos escribir<o< son tipos de caracteres especiales.
51

3.1. CARACTERES ESPECIALES

Los caracteres <.....> son de inicio y fin de etiqueta por lo que si queremos ponerlos en un texto la forma correcta sera la
siguiente:
<Se representa con<
>Se representa con>
Existen una serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de lay lasletras
acentuadas, las cuales tienen unos caracteres especiales para ser representados.
A continuacin se representa una relacin de estos caracteres especiales y su representacin:
Carcter
Representacin
Carcter
Representacin
<
<
€
>
>
ç
á
Ç
Á
ü
é
Ü
É
&
&
í
¿
Í
¡
ó
"
Ó
·
ú
º
Ú
ª
ñ
¬
Ñ
©

®
PRESTA ATENCIN
Se pueden aadir comentarios aclaratorios dentro del cdigo. Para insertar comentarios dentro del cdigo hay
que poner el texto entre.
El cdigo insertado entre estos smbolos no se visualiza en los navegadores.
52

3.2. ESPACIOS EN BLANCO Y SALTOS DE LNEA

Cuando se inserta texto html hay que tener en cuenta que si se escriben varios espacios en blanco seguidos, slo se mostrar
uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos
por&nbs.
Para que se produzca un salto de lnea en el navegador se inserta la etiqueta <br> para que se produzca el salto, la tecla
INTRO que se usa normalmente en los editores de texto no se refleja en los navegadores. La etiqueta <br> no precisa una
etiqueta de cierre.
PRESTA ATENCIN
La etiqueta</br>no existe.
3.3. TEXTO PREFORMATEADO

Para que un texto aparezca en el navegador tal como lo hemos diseado se insertan las etiquetas<pre>y</pre>.
Utilizando estas etiquetas el navegador con toda seguridad mostrar todos los espacios en blanco que se inserten en el texto,
as como todos los saltos de lnea resultantes de pulsar la teclaINTRO, sin la necesidad de utilizar la etiqueta<br>.
El inconveniente de las etiquetas <pre>y</pre>no se pueden incluir las etiquetas
<img>,<object>,<big>,<small>,<sub>ni<sup>.
EJEMPLO
Texto a insertar:
Este texto, para que salga con este formato
en el navegador HAY QUE PONER LA ETIQUETA de preformateado.
Texto HTML:
<pre>Este texto, para que salga con este formato
en el navegador HAY QUE PONER LA ETIQUETA de preformateado.</pre>
53

3.4. SEPARADORES
CONCEPTO
La forma de hacer separaciones dentro de una pgina web es poniendo una lnea horizontal, que se denomina
separador. Para insertarla hay que poner la etiqueta<hr>. Esta etiqueta no precisa ninguna etiqueta de
cierre.
El separador tiene distintos atributos:

align(alineacin dentro de la pgina).
width (ancho).
size(alto).
noshade(eliminar sombreado).
Los valores de estos atributos son:
aling:left(izquierda),right(derecha),center(centro).
width:un nmero, acompaado de % cuando se desee que sea en porcentaje.
size: un nmero.
noshade: no tiene valor.
EJEMPLO
Para poner esta lnea hay que escribir lo siguiente:
<hralign=leftwidth=300%size=5noshade>
54

3.5. DESTACADOS
CONCEPTO
Se suelen representar con tabulaciones a la izquierda y derecha y normalmente se utiliza para maquetar citas.
Toda los prrafos de esta naturaleza se colocan entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, de
ese modo se consigue que el texto se presente con mrgenes a ambos lados.
El uso de la etiqueta<blockquote>obliga a que el texto aparezca en una nueva lnea.

Insertando el texto entre varias etiquetas<blockquote>y</blockquote>se consigue que los mrgenes sean mayores.
EJEMPLO
Texto html:
Diseñador web,
<blockquote>
<blockquote>
así quedaría el texto con sangrado.
</blockquote>
</blockquote>
As quedara el texto en el navegador:
Diseador web,
as quedara el texto con sangrado.
55

3.6. FORMATO
CONCEPTO
Las propiedades del texto se modifican con la etiqueta <font> y </font>, donde se inserta el texto entre ella.
Atributos:
face (fuente).
color (color del texto).
size (tamao del texto).
Valores:
face: nombre de la fuente o fuentes.
color: nmero hexadecimal o texto predefinido.
size: valores del 1 al 7, aadiendo + - delante del valor.
PRESTA ATENCIN
Es posible definir una fuente para todo el documento,esto se realiza mediante la etiqueta<basefont>despus
de la etiqueta<body>.
Esta etiqueta no necesita cierre, y permite modificar los mismos atributos del texto que la etiqueta<font>.
56

3.7. RESALTADO
Existen etiquetas para aplicar diferentes estilos al texto, por lo general se usa para el resaltado. Estos pueden agruparse
segn vayan asociados al tipo de letra o a la informacin que represente el texto.
Etiquetas asociadas al tipo de letra:
Etiquetas asociadas al tipo de informacin:
<b> (negrita).
<cite>(cita).
<i>(cursiva).
<code>(ejemplo de cdigo).
<u>(subrayado).
<dfn>(definicin).
<s>(tachado).
<del>(eliminado).
<tt>(teletipo).
<em>(nfasis).
<big>(aumenta el tamao de la fuente).
<ins>(insertado).
<small>(disminuye el tamao de la fuente).
<kbd>(teclado).
<samp>(muestra).
<strong>(destacado).
<sub>(subndice).
<sup>(superndice).
<var>(variable).
RECUERDA
No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre y que pueden aplicarse varias
etiquetas al mismo texto.
57

3.8. PRRAFO
El texto de una pgina puede agruparse en prrafos, este va entre las etiquetas<p>y</p>. No es necesario poner la etiqueta
<br> porque las etiquetas de prrafo hacen que el texto salga tal como lo escriba.
Se puede cambiar la alineacin del texto de cada prrafo, si se modifica el valor del atributo align: sus valores
sonleft(izquierda), right(derecha), center(centrado) ojustify(justificado).
Tambin se puede cambiar la alineacin del texto es mediante las etiquetas<div>y</div>, tambin se usa el atributoalign.
Tanto la etiqueta<div>, como la<p>, se utilizan para agrupar bloques de texto, la diferencia es la separacin entre ellos.
ACTIVIDAD
Busca una pgina en Internet en la que se vea claramente el uso de los diferentes tipos de formatos de texto
y comprtelo con el resto de compaeros/as en el tema Actividad 2: prrafos del foro de actividades del
campus virtual.
3.9. ENCABEZADO Y MARQUESINAS
DEFINICIN
Los encabezados se uilizan para establecer los ttulos de las pginas web. Sus caractersticas son el tamao
de la letra, el tipo de resaltado y la separacin existente entre el texto y los elemento que tiene encima y debajo
de l.
Hay seis tipos de encabezados: Todas estas etiquetas tienen una etiqueta de cierre y es posible darles el atributo aling.
Etiqueta
Ejemplo
<H1>
Ttulo 1
<H2>
Ttulo 2
<H3>
Ttulo 3
<H4>
Ttulo 4
<H5>
Ttulo 5
<H6>
Ttulo 6
58

CONCEPTO
Lasmarquesinasson lneas que pueden desplazarse de un lado a otro de la ventana para ellos se puede poner
texto, imgenes, talas y otros elementos entre las etiquetas <marquee>y</marquee>.
La marquesina por defecto, se desplaza de derecha a izquierda indefinidamente, pero estas propiedades pueden variar.
El atributobehaviormodifica el tipo de movimiento, sus valores:
alternate(de lado a lado de la ventana, como si rebotara en los extremos).
scroll(de un lado a otro, continuamente).
slide(de un lado a otro, pero una sola vez).
El atributodirectionmodifica el tipo de direccin, sus valores:
down(de arriba a abajo).
up(de abajo a arriba).
right (de derecha a izquierda).
left(de izquierda a derecha).
Es posible establecer un color de fondo, a travs del atributobgcolor.
59

4. HIPERENLACES
CONCEPTO
Definicin de hiperenlace.
Existen distintos tipos de hiperenlaces, vnculos o enlaces. Se desarrollarn a lo largo de este tema los
siguientes puntos a destacar:
Hiperenlace.
Tipos de referencias.
Destino del enlace.
Puntos de fijacin.
Otros tipos de enlaces.
4.1. HIPERENLACE <A>

Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo.
Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las
etiquetas<a>y</a>.
A travs del atributohrefse especifica la pgina a la que est asociado el enlace, la pgina que se visualizar cuando el
usuario haga clic en el enlace.
60

4.2. TIPOS DE REFERENCIAS

Hay 4 tipos de referencias de vnculos con el atributo href:
1. Referencia absoluta: este hiperenlace conduce a una ubicacin externa al sitio en el que se encuentra el documento. En
este caso hay que comenzar la referencia con http://,el nombre del dominio y algunas veces el nombre de la pgina. Si no
se escribe el nombre de la pgina se cargar la de inicio asociada al dominio.
2. Referencia relativa al sitio: esta referencia lleva un documento situado dentro del mismo sitio que el documento actual.
3. Referencia relativa al documento: lleva a un documento situado dentro del mismo sitio que el documento actual, pero
partiendo del directorio en el que se encuentra el actual.
4. Punto de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el
vnculo debe ser nombre_de_documento#nombre_de_punto.
ACTIVIDAD
Ya haz visto los diferentes tipos de enlaces, explica para que utilizaras cada uno de estos enlaces y comprtelo
con el resto de compaeros/as en el tema Actividad 3: tipos de deferencia del foro de actividades del campus
virtual.
61

4.3. DESTINO DEL ENLACE
CONCEPTO
El destino del enlace indica la ventana donde se abrir la pgina web vinculada.
Para indicarlo, se realiza por medio del atributotargetcon siguientes valores:

_blank: abre en una nueva ventana del navegador.
_parent:abre en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
_self:es la opcin predeterminada, abre en el mismo marco o ventana que el vnculo.
_top abre en la ventana completa del navegador.
4.4. PUNTOS DE FIJACIN

Cuando se tiene un documento extenso, dividido en varios apartados dentro de la misma pgina web, se debe facilitar la
navegacin al visitante dirigindolo al apartado deseado, en lugar de ir al comienzo del documento.
Para ello se utilizan las anclas, o puntos de fijacin, muy tiles a la hora de crear ndices.
Un ancla necesita que se inserten las<a>y</a>con el atributoname, estepuede tomar cualquier valor inventado por el
usuario.
PRESTA ATENCIN
No se debe introducir caracteres extraos para que el cdigo sea limpio y se interprete de forma correcta.
62

4.5. OTROS TIPOS DE ENLACES

Existen otros tipos de enlaces que no llevan a otra pgina web, son:
Correo electrnico.
Vnculo a ficheros para descarga.
Vnculo vaco.
Ver a continuacin las diferentes caractersticas de dichos enlaces:
Correo electrnico: abre la aplicacin Outlook para escribir un correo electrnico, para ello la referencia del vnculo debe
sermailto:direcciondecorreo.
Vnculo a ficheros para descarga: el valor del atributo href es una pgina web, pero tambin puede ser un fichero
comprimido, una hoja de Excel, un documento Word, un documento pdf, etc. Cuando el vnculo no es a una pgina web,
aparecer un cuadro de dilogo que pide al usuario permiso para descargar el fichero en su ordenador.
Vnculo vaco: si pulsa sobre un enlace vaco no abre ninguna pgina ni archivo, pero el formato es el mismo que el
de cualquier otro enlace. El vnculo debe ser el smbolo almohadilla #. Este tipo de enlace es til al trabajar con
comportamientos javascript.
5. IMGENES
Las imgenes son un apartado muy importante dentro del la pgina web, Est ms que comprobado y avalado por las
estadsticas, que una web con fotos de calidad, que ilustren de verdad lo que contamos, recibir muchas ms visitas que
una pgina web con fotos de baja calidad (pequeas, pixeladas, etc.)para que est bien estructurada hay que destacar los
siguientes aspectos:
Imagen.
Formatos de imgenes.
Texto alternativo.
Borde.
Tamao.
Alineacin.
RECUERDA
Siempre que utilices imgenes de Internet debes cerciorarte de que estas no tienen derechos de autor,
optimizarlas para web y asignarles la etiqueta ALT que consite en una descripcin de la misma.
63

5.1. IMAGEN <IMG>

Las imgenes se usan e incorporan a las pginas web para mejorar su apariencia y dar mayor informacin visual al visitante.
As, resultar ms atractiva y se podr visualizar el contenido con mayor rapidez.
Para ello es necesario inserta la etiqueta <img>, la cual no necesita cierre. Su atributo es src y se representara de la
siguiente forma:
<imgsrc=ubicacin y nombre de la imgen.extension>
PRESTA ATENCIN
Para trabajar de una forma ordenada, es recomendable que todos los documentos html se encuentren en un
mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como
puede ser una carpeta destinada a almacenar imgenes.
5.2. FORMATOS DE IMAGEN

Existen muchos y diversos tipos de formatos de imgenes, pero los recomendados para una web son tres tipos:
.jpg
.gif
.png
PRESTA ATENCIN
La resolucin adecuada para que funcionen de forma adecuada y no pese demasiado la pgina web es de 72
pxeles por pulgada. Esto hace que la pgina web se vea de forma fluida y no tarde demasiado en cargar y el
visitante no tenga que estar esperando eternamente para poder visitarla.
64

5.3. TEXTO ALTERNATIVO

Hay veces que una imagen no es visualizada por el navegador. Esto puede ocurrir cuando el valor del atributo (src) no est bien
especificado. Tambin puede que no encuentre la carpeta de imgenes y aparezca un recuadro blanco con una X roja, junto con
el nombre de la imagen.
PRESTA ATENCIN
Puede mostrar un texto en vez el nombre de la imgen que deseemos aadiendo el atributo alt, por ejemplo:
<img src=nombre de la imagen alt=texto alternativo>
El texto alternativo se muestra tambin al situar el puntero sobre la imagen.
5.4. BORDE
Al visualizar una pgina en un navegador las imgenes aparecen sin borde alrededor, pero es posible establecer uno a travs
del atributoborder. Este puede tomar valores numricos, que indican el grosor en pxeles del borde.
EJEMPLO
<imgsrc=carpeta donde se aloja/nombre de la imagen.extensinborder=nmero para el grosor>
Para realizar un vnculo sobre una imagen y no se desea que se muestre el borde, es necesario
establecerborder=0.
5.5. TAMAO
Cuando se inserta una imagen en una pgina web esta se muestra de tamao original, pero se puede modificar su tamao
una vez insertadas por medio de los siguientes atributos:
width: anchura.
height: altura.
El valor de estos atributosha de ser un nmero, acompaado de % cuando se desee que sea en porcentaje con respecto a la
pgina.
65

PRESTA ATENCIN
Lo que realmente se debe hacer antes de insertar una imagen de forma correcta es tratarla con un editor de
imgenes antes de ponerla en la pgina web.
5.6. ALINEACIN
CONCEPTO
La alineacin de las imgenes se realiza con respecto a la lnea de texto en la que se encuentra y el atributo
para realiazarlo esalign.
Los valores del atributoalign son:

absbottom:inferior absoluta.
absmiddle:medio absoluta.
baseline:lnea de base.
bottom: inferior.
left: izquierda.
middle: medio.
right: derecha.
texttop:texto superior.
top: superior.
PRESTA ATENCIN
Si la imagen es muy grande, conviene dejarla aislada del texto.
66

6. HTML + CSS
CONCEPTO
Los estilosCSS(Cascading Style Sheets) son hojas de estilo de actualizacin automtica.
Se utilizan para definir estilos que se aplicarn a las pginas web de nuestro sitio y define caractersticas que los estilos html
no pueden.
Definen estilos independientes o estilos asociados a determinadas etiquetas.El inconveniente que tiene trabajar con hojas
de estilos es que algunos navegadores no las soportan y las ignoran.
Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y pueden guardarse con la
extensin TXT.
6.1. ESCRIBIR EL CDIGO HTML

Para realizar una hoja de estilo,la sintaxis es muy parecida a html.
Lo primero es poner el nombre del estilo y entre llaves, especificar la lista de propiedades (en minsculas) que se corresponden
con dicho estilo. Cada una de estas propiedades tiene que tener un punto y coma detrs, y los valores se asignan con dos
puntos.
El nombre del estilo puede ser un nombre inventado por nosotros,pero lo normal es que ponga el nombre de una etiqueta html.
Para poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de una etiqueta seguida de
un punto.
EJEMPLO
body {background-color:#006699;font-family:Arial,Helvetica;}
.texto {font-family:Arial,Helvetica;font-size:18px;}
67

6.2. COLORES
El colortiene valor un nmero en hexadecimal. Sus propiedades son:
Color de fondo:background-color.
Imagen de fondo:background-image. La ruta y el nombre de la imagen han de aparecer entre parntesis, despus de la
palabraurl.
Color del borde:border-color.
En el siguinte video desarrolla una breve introduccin sobre el uso del color en el diseo web.
http://www.youtube.com/watch?feature=player_embedded&list=PL6g31gcyn9V8CvNdq8KIB9YHCIe7E3D15&v=teW0H1GFRys
6.3. TIPO DE LETRA

Aqu se muestran los diferentes estilos y valores que pueden tomar con respecto al tipo de letra:
Familia de la fuente:font-family. Puede tomar como valor varios nombres de fuentes, separados por comas.
Grosor del texto:font-weight. Sus ser:bold(negrita),bolder(mas negrita),lighter(ligera) o un nmero del100al900.
Tamao de la fuente:font-size. Valor numrico.
Espacio entre lneas:line-height.Valor numrico.
Espacio entre caracteres:letter-spacing.Valor numrico.
Estilo de la fuente:font-style. Valoritalic, texto en cursiva.
Decoracin de la fuente: text-decoration. Valores none (ninguno), underline (subrayado), line-through (una lnea
encima),overline(tachado) oblink(parpadeo).
Transformar el texto:text-transform. Valorcapitalize(la inicial de cada palabra aparecer en maysculas),uppercase(todo
en maysculas) olowercase(todo en minsculas).
Alineacin del texto:text-align. Valorcenter(centrado),left(izquierda),right(derecha) ojustify(justificado).
Sangrado del texto:text-indent.Valor numrico.
PRESTA ATENCIN
Si se aplicanonea los hiperenlaces, puede evitarse que aparezcan subrayados.
68

6.4. BARRA DE NAVEGACIN

Algunos sitios web tienen un men al principio o en un lado de la pgina.
A continuacin se podr ver con un sencillo ejemplo para realizar una barra de navegacin bsica.
Los mens son una parte muy importante de un sitio web, ya que guan al usuario para encontrar o dirigirse al apartado que
ms le interese a la vez que nos ayudan a organizar la informacin en diferentes secciones o apartados.
En el siguiente enlace se muestra como realizar una barra de navegacin.
6.5. DAR ESTILO A LOS ENLACES

Con CSS es posible manejar la apariencia de los enlaces.
Tachado:
a:visited {
text-decoration: line-through;
}
Subrayado personalizado:
a:visited {
border-bottom: 1px dotted #6c6c6c;
text-decoration: none;
}
Icono lateral:
a:visited {
padding-right: 12px;
background: url(http://bp0.______.com/icono-visitado.gif) no-repeat 100% 50%;
}
Texto indicativo:
a:visited:after {
content: (YA VISITADO); font-size: 60%;
text-transform: uppercase; color: #777;
}
69

ACTIVIDAD
Crea un ejemplo de estilo para los enlaces en un archivo TXT y sbelo a la tarea Actividad 4: estilos de los
enlaces del campus virtual.
6.6. LNEA HORIZONTAL

Ver la forma de crear una lnea horizontal<hr />de una pgina web, lo dividiremos en tres apartados:
Tamao:widthyheight.
Color:colorybackground-color.
Alineacin:margin-left,margin-rightywidth.
EJEMPLO
La lnea se sita a partir del centro.
hr {
background-color: red;
height: 10px;
margin-left: 50%;
width: 25%;
}
70

6.7. HOJA DE ESTILO EN UN ARCHIVO SEPARADO

Cuando se quiere que un sitio comparta el mismo estilo se debe colocar la hoja de estilo en un archivo separado, haciendo
que todas las pginas estn enlazadas a esa hoja.
EJEMPLO
miestilo.css
Ambos archivos, mipagina.html y miestilo.css, deben estar juntos.
Para separar la hoja de estilo del archivo html, hay que crear un archivo de texto que est vaco y editarlo. Cuando se guarde
se debe hacer con la extensin css.
6.8. VINCULAR HOJA DE ESTILO

Para incluir las propiedades de una hoja de estilo en un documento hay que vincularla a l. Un documento puede tener varias
hojas de estilo vinculadas y hay que insertar la etiqueta<link>en el documento, entre las etiquetas<head>y</head> y
nonecesita etiqueta de cierre.
Los siguientes atributos especifican como vincularlo:
href:se especifica la hoja de estilo que se va a vincular al documento.
rel:se tiene que especificar que se est vinculando una hoja de estilo, por lo que su valor ha de serstylesheet.
type:se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo que su valor ha de sertext/css.
EJEMPLO
<linkhref=miestilos.txtrel=stylesheettype=text/css>
71

RESUMEN
En este tema se han desarrollado los temas relativos al diseo y realizacin de una web por medio del cdigo html y las hojas
de estilo css. Viendo desde el comienzo del lenguaje y su estructura por medio de los siguientes temas:
HTML.
Estructura de una pgina.
El texto.
Hiperenlaces.
Imgenes.
HTML+CSS.
72

Unidad 4. Herramientas para el diseo web
SCORM
STANDARD
UNE 66181

PRESENTACIN
En este tema ver desarrollado los siguientes puntos, en cada uno de sus aspectos, tanto definidos como prcticos:
Servidores locales y remotos.
Editoresweb.
Editores de imgenes.
Conexin a un FTP.

Manejar las aplicaciones necesarias para publicar pginas web en Internet y los distintos servidores que
existen en el mercado, asi como los programas en los que podremos realizar la estructura y el diseo.
74


A lo largo de esta unidad vamos a trabajar una serie deconceptosque requieren de unos conocimientos previosbsicos
que te permiten el seguimiento del curso sin dificultad. Adems, ponemos a tu disposicin los recursos didcticos
necesariospara poder realizar un ptimo seguimiento.
CONOCIMIENTO PREVIO
En esta unidad se estudianconceptos bsicosque permitan el conocimiento para integrar una web en la red
de Internet:
Tipos de servidores.
Software bsico y profesional.
Editores de imagen.
Servidores FTP.
RECURSOS DIDCTICOS
Entre losrecursosque forman esta unidad podrs encontrar:
Mapa conceptual de la unidad.
Definiciones,ejemplos, recuerda...
Autoevaluaciones para que puedas realizar un seguimiento de tu propio aprendizaje.
Actividadesintercaladas en el contenido.
Resumen con lasideas clave de la unidad.
75

1. SERVIDORES
CONCEPTO
Un servidor, como la misma palabra indica, es un ordenador o mquina informtica que est al servicio de
otras mquinas, ordenadores yclientes,los cuales les suministran a estos informacin.
En este apartado de la unidad se destacan los siguientes puntos que se explicarn en los siguientes puntos detallados del
tema:
Es imprescindible?: es necesario tener un servidor.
Los servidores locales: que es y para que sirve.
Servidores remotos: para que necesito un servidor con estas caractersticas.
Tipos de servidores: servidores del mercado actual
76

1.1. ES IMPRESCINDIBLE?
La primera cuestin a plantear es: Es imprescindible un servidor?
No es indispensable si trabajamos de forma local, pero ahorra situaciones desagradables con respecto a los enlaces situados
en nuestras pginas web y al subir dicha web a la plataforma que se aloje en el servidor es necesario e imprescindible.
Un servidor local permite acceder de forma local a nuestro sitio web, es decir, en su ordenador tan como lo hara a travs de
Internet, con una direccin tipo:
http://misitio/paginas.htm.
Si el lenguaje a utilizar es para desarrollar pginas con lenguaje PHP, el servidor local si es indispensable.
En el mercado existen muchos programas para montar un servidor local. El ms extendido es Apache, tanto por su fcil manejo
como por ser software libre. Adems, no ocupa mucho espacio y no exige operaciones complicadas para su instalacin ni
configuracin.
ACTIVIDAD
En el siguiente enlace visita la web del servidor apache y una vez instalado comenta con tus compaeros la
experiencia y las posibles dudas que surgiesen en el proceso de instalacin en el tema Actividad 1: Servidores,
del foro de actividades.
1.2. SERVIDOR LOCAL

Un servidor puede ser un equipo o un programa que responde a peticiones que le hagan.
Existen dos tipos de servidores:
Locales.
Remotos.
Unservidor localse instala por medio de un programa para probar y navegar la pgina web desde nuestro equipo personal.Las
pginas se acceden siempre mediante una direccin o url, el acceso para navegar en el equipo se conoce comolocalhost.
En el siguiente vdeo se mostrar como instalar un servidor local:
http://www.youtube.com/watch?feature=player_embedded&v=5MFZVam67As
77

PRESTA ATENCIN
Localhost es un nombre reservado que tienen todas las computadoras, router o dispositivo que disponga de
unatarjeta de red ethernetpara referirse a s mismo. El nombrelocalhostes traducido como ladireccin
IP127.0.0.1.
1.3. SERVIDOR REMOTO

Unservidor remotoes una combinacin de hardware y software, que permite elacceso remoto aherramientas o informacinque
residen en una red de dispositivos.
Esto quiere decir que un servidor remoto es un equipo que permite que otros se conecten a ste.Los servidores de acceso
remoto tambin son llamados servidores de comunicaciones o Remote Access Server/Service (RAS)
Cuando se accede a una pgina web, en la URL, o en el campo donde se pone la direccin, sepide a un servidor que a travs
de la red traiga esa pgina web.Para acceder a los ficheros de una pgina web que estn almacenados en un servidor remoto,
no se ponehttp://si no que se utilizaftp://antes de cualquier direccin, pues se le indica que lo que se quiere es estar en un
servidor y no en la web.
78

1.4. TIPOS DE SERVIDORES

Dentro de este tema se ha visto los servidores tanto local como remotos, ahora se mostrar una lista diversos tipos
deservidoresdel mercado actual:
Plataformas de Servidor (Server Platforms):un trmino usado a menudo como sinnimo de sistema operativo,es decir,el
motor que dirige el servidor.
Servidores de Aplicaciones (Application Servers):designados a veces como un tipo demiddleware(softwareque conecta
dos aplicaciones), los servidores de aplicaciones ocupan una gran parte del territorio entre los servidores de bases de datos
y el usuario.
Servidores de Audio/Video (Audio/Video Servers): los servidores de audio/vdeo aaden capacidades multimedia a los
sitios web permitiendo mostrar contenido multimedia en forma de flujo continuo (streaming) desde elservidor.
Servidores de Chat (Chat Servers): los servidores de chat permiten intercambiar informacin a una gran cantidad de
usuarios ofreciendo la posibilidad de conectarse en tiempo real.
Servidores de Fax (Fax Servers):unservidorde fax es una solucin ideal para organizaciones que tratan de reducir el uso
del telfono pero necesitan enviar documentos por fax.
ServidoresFTP(FTP Servers):uno de los servicios ms antiguos deInternet,File Transfer Protocolpermite mover uno o ms
archivos.
Servidores Groupware (Groupware Servers):Un servidor groupware es unsoftware diseado para permitir colaborar a los
usuarios, sin importar la localizacin, vaInterneto va Intranet corporativo y trabajar juntos en una atmsfera virtual.
Servidores IRC (IRC Servers):opcin para usuarios que buscan la discusin en tiempo real, Internet Relay Chat consiste en
varias redes de servidores separadas que permiten que los usuarios conecten el uno al otro va una red IRC.
Servidores de Listas (List Servers): los servidores de listas ofrecen una manera mejor de manejar listas de correo
electrnico, bien sean discusiones interactivas abiertas al pblico o listas unidireccionales de anuncios, boletines de
noticias o publicidad.
Servidores de Correo (Mail Servers): casi tan cruciales como los servidores web, los servidores de correo mueven y
almacenan elcorreo electrnicoa travs de las redes corporativas (va LANs y WANs) y a travs deInternet.
Servidores de Noticias (News Servers):los servidores de noticias actan como fuente de distribucin y entrega para los
millares de grupos de noticias pblicos actualmente accesibles a travs de la red de noticias.
Servidores Proxy (Proxy Servers):los servidores proxy se sitan entre un programa del cliente (unnavegador) y un servidor
externo (servidor web) para filtrar peticiones, mejorar el funcionamiento y compartir conexiones.
Servidores Telnet (Telnet Servers):este servidor permite a los usuarios entrar en un ordenador husped y realizar tareas
como si estuviera trabajando directamente en ese ordenador.
79

Servidores Web (Web Servers):Bsicamente, un servidor web sirve contenido esttico a un navegador, carga un archivo y lo
sirve a travs de la red al navegador de un usuario. Este intercambio es mediado por el navegador y el servidor que hablan
el uno con el otro mediante HTTP.
El siguiente vdeo explica grficamente los tipos de servidores, ampliando esta informacin:
http://www.youtube.com/watch?feature=player_embedded&v=7d2aq_RRQz0
2. EDITOR DE PGINAS WEB

Los editores de pginas web son muy diversos, pero podemos catalogarlos en dos tipos:
Software bsico para edicin web.
Software libre y de pago para edicin web.
Estos se vern en los siguientes puntos de este tema donde se destacarn algunos de los ms utilizados y demandados por
los diseadores y programadores web.
En el siguiente vdeo se muestran diferentes herramientas utilizadas por los diseadores web:
http://www.youtube.com/watch?feature=player_embedded&v=Weyqth9MtF0
PRESTA ATENCIN
Todos los editores de pginas web tienen la misma funcin y es poder crear de forma atractiva una web, donde
el visitante acceda a la informacin que se contiene en ella. El editor ms bsico que existe es el bloc de
notas.
80

2.1. SOFTWARE BSICO PARA EDICIN WEB

El desarrollo web tiene multidud de lenguajes (HTML, CSS, Javascript, PHP, Java). En este curso nos ocupamos exclusivamente
del lenguaje HTML y CSS. Para ello necesitamos un editor web para realizar el diseo web.
Son muchos los editores web existentes en el mercado (Dreamweaver, Front Page, CoffeCup HTML Editor, Homesite), todos
aunque con aspectos diferentes y algunas salvedades distintas, tienen el mismo fin comn y es editar pginas web.
Para saber cul se debe utilizar, depende del entorno en que se trabaje y el trabajo especfico que se realice.
En la siguiente imagen se muestran los iconos de Dreamweaver y Front Page respectivamente.
EJEMPLO
El programa Dreamweaver utiliza dos modos de visin a la hora de disear, una vista de diseador; la cual no
usa cdigo y otra vista de programador; esta vista se utiliza para introducir cdigo a modo de programacin.
81

2.2 SOFTWARE LIBRE Y DE PAGO PARA EDICIN WEB

Hoy en da existen distintos tipos de software con los cuales realizar una pgina web, estos se adaptan a las necesidades de
cada diseador o programador web, hay software de pago que si se utiliza para fines comerciales deben estar registrados.
Hoy en da tambin existe software libre que tiene las mismas prestaciones o similares con las que se pueden realizar las
pginas web. En referencia a este tema si debemos usar un software u otro es eleccin del diseador o programador web y sus
preferencias.
Los Software ms notables en el mercado hoy en da son:
CoffeeCup HTML:ha quedado un tanto desfasado, aunque sigue siendo muy vlido como editor HTML.
Adobe Dreamweaver:es muy similar al anterior pero con mayores prestaciones y tiene un soporte mejorado para los CSS,
es el ms usado por los diseadores web.
Amaya:Es un navegador y un editor web, que permite editar directamente cualquier pgina web que se visualice.
Aptana: viene con cliente FTP y depurador de Javascript. Es el editor web ms completo del mercado y es libre.
Zend Studio:Tiene autocompletado de cdigo HTML.
PRESTA ATENCIN
A pesar de la extensa variedad de productos que existen, slo unos pocos son los ms usados por
los diseadores web porque dan las prestaciones que necesitan como: CoffeeCup HTML, Adobe
Dreamweaver,Amaya,Aptana,Zend Studio.
82

3. EDITOR DE IMGENES
Los editores de Imgenes son muy necesarios para optimizar las pginas web. Existen en el mercado infinidad de ellos, tanto
software libre como de pago.
Se destaca sobre todos ellos, tanto por ser el ms difundido como por sus prestaciones, el programa Adobe Photoshop, es el
ms utilizado por los diseadores web profesionales.
Pero se analizar otro tipo de software ms asequible, para todos los usuarios.
En el siguiente enlace podr utilizar un editor de imgenes gratuito online, pulse aqu.
EJEMPLO
No olvidemos que en los editores de imgenes tenemos que tener en cuenta aspectos de la unidad anterior de
que extensiones deben tener los archivos para ser subidos a la web.
En la actualidad los ms usados son, .jpg, .gif, png.
3.1. SOFTWARE PARA EDICIN DE IMGENES

El editor de imgenes ms sonado es Adobe Photoshop pero no es el nico que existe en el mercado, hay otros que podemos
utilizar, algunos de ellos y sus caractersticas se presentan a continuacin:
Pixlr.com: retoques bsicos como el tamao, rotar, recortar, etc y otros ms especficos como polarizar, cambiar brillo y
saturacin, seleccin mgica, etc...
BeFunky.com: se puede dibujar con componentes disponibles como rostros, fondos, cuerpos....
Flauntr.com: se compone de varios mdulos especializados para incluir texto, adaptar fotos para mviles, crear perfiles para
redes sociales, etc...
FunPhotoBox.com: para realizar montajes fotogrficos.
Lunapic.com:recortar, escalar, aadir texto, gradientes de color, animaciones, ajustes de brillos y contrastes.
83

3.2. HERRAMIENTAS DE EDICIN DE IMAGEN

En este apartado veremos la comparativa de dos programas de los ms usados para optimizar imgenes para web, uno de
software de pago como es Adobe Photoshop y otro de software libre como es la herramienta Gimp.
Adobe Photoshop es una aplicacin para la creacin, edicin y retoque de imgenes. Es desarrollado por la compaa Adobe
Systems. Se lanz originalmente para computadoras Apple, pero luego salt a la plataforma Windows.Los formatos de
Photoshop son PSD y PDD, que guardan capas, canales, guas y en cualquier modo de color. Photoshop tambin soporta
otros formatos como PostScript, EPS, DCS, BMP, GIF, JPEG, PICT, PIFF, PNG, PDF, IFF, PCX, RAW, TGA, Scitex CT, Filmstrip,
FlashPix.
Gimp:es un programa que sirve para la edicin y manipular de imgenes. Actualmente se encuentra publicado bajo la
licencia GPL (GNU General Public License). Es un software multiplataforma ya que se puede utilizar en varios Sistemas
Operativos. La primera versin fue desarrollada para sistemas Unix, inicialmente fue pensada especficamente para GNU/
Linux y actualmente existen versiones totalmente funcionales paraWindowsy para Mac OS X.
Este programa de licencia libre es una buena opcin para los desarrolladores y diseadores. Y muchos aseguran que es una
buena competencia para Adobe Photoshop.
Los formatos utilizados por gimp son:JPG PNG TIFF GIF XCF
En la siguiente imagen se muestran los iconos de Photoshop y Gimp respectivamente.
ACTIVIDAD
Busca en internet ejemplos de otras herrmientas que sirvan para editar imgenes y comprtelo con el resto
de compaeros/as en el tema Actividad 2: Herramientas de edicin de imagen del foro de actividades del
campus virtual.
84

4. SERVIDOR FTP
DEFINICIN
El significado de FTPes File Transfer Protocol (Protocolo para la Transferencia de Archivos). FTP esun software
que se ejecuta en un servidor conectado a Internet.
La conexin a un servidor FTP se realiza mediante programas llamados Clientes de FTP. Existen mltiples clientes FTP en
Internet, los cuales son tanto de pago como libres.
En el siguiente vdeo se muestra que es un servidor FTP y se amplia la informacin a otros tipos de servidores mencionados
anteriormente:
http://www.youtube.com/watch?feature=player_embedded&v=nChrp28qK64
4.1. CONEXIN A UN SERVIDOR FTP

En Internet existen muchos programas o clientes para transferir archivos por FTP, algunos de software libre
mas usados son:
Filezilla(Windows, linux y mac).
Cyberduck(Mac).
Hay bastantes ms como por ejemplo:CuteFTP Pro,FTP Voyager, anyclient, phpfilenavigator, turboftp, etc.....
Para instalar un servidor FTP, tan slo hay que seguir las pautas de una instalacin sencilla. Una vez instalado y abierto el
programa se encuentran los siguientes parmetros:
Host Address: ftp.tudominio.com.
User Name: UserID de tu cuenta.
Password: Password de tu cuenta.
FTP port: 21
85

Por ltimo presionar el botn Connect para realizar la conexin.

Al obtener una conexin con el servidor aparece el Sito Remoto y el listado del contenido.
La transferencia de archivos se puede realizar de varias formas depende del programa de ftp que se esta usando, por lo
general se pueden transferir de las las siguientes formas:
Dando doble click sobre el archivo deseado.
Seleccionar uno o varios archivos y con click derecho seleccionar Upload.
Seleccionar uno o varios archivos y arrastarlos al recuadro del servidor o computadora segn sea el caso. Este ltimo punto
es ms utilizado en casi todos los casos.
En el siguiente vdeo se muestra como instalar y utilizar un servidor FTP:
http://www.youtube.com/watch?feature=player_embedded&v=H0QQlEUvo_M
PRESTA ATENCIN
Todos los servidores FTP requieren los datos mencionados y estar conectados con el servidor.
4.2. ENCONTRAR SERVIDORES FTP PBLICOS

Hoy en da, se encuentran miles de servidores FTP disponibles en la red, donde se aloja informacin como: documentos, vdeos,
pelculas, software entre otros.
Aunque los servidores se encuentren publicados en Internet, no siempre es fcil encontrarlos. Para ello existe un buscador de
servidores FTP llamadoNAPALM FTP.
NAPALM FTP nos permite realizar bsquedas cruzadas y personalizadas.

Este enlace nos lleva a Napalm FTP:http://www.search-ftps.com/
86

RESUMEN
En esta unidad se han visto herramientas muy necesarias para la realizacin de una web, aqu pudo ver la forma de encontrar
tanto el software, como su utilizacin.
Destacando:
Tipos de servidores, locales y remotos. Aprendi como instalar un servidor y como usarlo.
El software bsico, libre y de pago para editar. Son tan validos unos como otros, es cuestin de gustos el que se elija ya que
hay una amplia gama de ellos.
Los servidores FTP,su conexin y como encontrar servidores de de FTP pblicos.
87
Recursos y tendencias de empleabilidad online

Sigue la actualidad de Andaluca Compromiso Digital
FIN
Web
www.andaluciacompromisodigital.org
Correo electrnico
andalucia.compromisodigital@juntadeandalucia.es
Facebook
www.facebook.com/andaluciacompromisodigital
Twitter
cv@andaluciacompdig

Iniciacion-Web 2 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Iniciacion-Web 2 PDF

Caricato da

Copyright:

Formati disponibili

Iniciacin al diseo y la programacin web

Unidad 1. Proceso del diseo web

Realizado segn norma

Iniciacin al diseo y a la programacin web

AL FINALIZAR ESTA UNIDAD SABRS...

Iniciacin al diseo y a la programacin web

CONOCIMIENTOS PREVIOS Y RECURSOS

Iniciacin al diseo y a la programacin web

1.TRABAJO DEL DISEADOR DESDE EL PUNTO DE VISTA DE LA EMPLEABILIDAD

1.1. EMPRESA EN EXPANSIN

Iniciacin al diseo y a la programacin web

1.2. POTENCIAL DE INTERNET

Iniciacin al diseo y a la programacin web

1.3. TECNOLOGA Y SU USABILIDAD

Iniciacin al diseo y a la programacin web

2. CONSEJOS PARA UNA WEB CON XITO

Iniciacin al diseo y a la programacin web

2.1. DOMINIO Y ALOJAMIENTO

Iniciacin al diseo y a la programacin web

2.3. INFORMACIN VALIOSA

UNA VENTANA AL MUNDO

Iniciacin al diseo y a la programacin web

2.4. IMPORTANCIA DE LA PGINA PRINCIPAL

Iniciacin al diseo y a la programacin web

2.5. NAVEGADORES Y ENLACES

Iniciacin al diseo y a la programacin web

2.6. EL TIEMPO ES ORO

Iniciacin al diseo y a la programacin web

Iniciacin al diseo y la programacin web

Realizado segn norma

Iniciacin al diseo y a la programacin web

AL FINALIZAR ESTA UNIDAD SABRS...

Iniciacin al diseo y a la programacin web

CONOCIMIENTOS PREVIOS Y RECURSOS

Iniciacin al diseo y a la programacin web

1. PASOS PARA EL PROCESO DE UN BUEN DISEO

Iniciacin al diseo y a la programacin web

Iniciacin al diseo y a la programacin web

Iniciacin al diseo y a la programacin web

Iniciacin al diseo y a la programacin web

2.3. TIPOS DE IMGENES

Iniciacin al diseo y a la programacin web

Iniciacin al diseo y a la programacin web

En el siguiente vdeo explica como instalar el progrmatotal video converter y su uso:

2.6. USO LEGAL DE TEXTOS, IMGENES, SONIDOS Y VDEOS.

Iniciacin al diseo y a la programacin web

3. ESTRUCTURA DEL DISEO DE UNA WEB

Iniciacin al diseo y a la programacin web

En la siguientes imgenes se muestra de la web de ACD, ejemplos sobre la estructura:

Iniciacin al diseo y a la programacin web

3.1. ESTRUCTURAS ESTNDARES

3.2. BLOQUE DE NAVEGACIN IZQUIERDO

Iniciacin al diseo y a la programacin web

3.3. BLOQUE DE NAVEGACIN SUPERIOR

3.4. Bloque de navegacin derecho

Iniciacin al diseo y a la programacin web

3.5. COMBINACIN DE LOS BLOQUES

Iniciacin al diseo y a la programacin web

3.6. PIE DE PGINA

Iniciacin al diseo y a la programacin web

3.7. PGINA PRINCIPAL

Iniciacin al diseo y a la programacin web

4. CONTENIDO DE UNA WEB