Guia Visual
de Creacion
y diseNo Web
Edicion 2012
Miquel Pardo Niebla GUIAS VISUALES
ResPoONSABLE EDrroRtaL:
Victor Manuel Ruiz Calderon
Eva Margarita Garcia
DISENO DE CUBIEI
Pattodis diseno e imagen S.L.U.
Todos los nombres propios de programas, sistemas operativos,
equipos hardware, etc. que aparecen en este libro son marcas
registradas de sus respectivas companias u organizaciones.
Reservados todos los derechos. El] contenido de
esta obra esta protegido por la Ley, que estable-
ce penas de prisién y/o multas, ademas de las
correspondientes indemnizaciones por datos y
perjuicios, paraquienesreprodujeren, plagiaren,
distribuyeren o comunicaren piblicamente, en
todo o en parte, una obra literaria, artistica 0
cientifica, o su transformacion, interpretacién
© ejecucién artistica fijada en cualquier tipo
de soporte o comunicada a s de cualquier
medio, sin la preceptiva autorizacion.
Edicién espanola:
© EDICIONES ANAYA MULTIMEDIA (GRUPO ANAYA, S.A.), 2011
Juan Ignacio Luca de Tena, 15. 28027 Madrid
Deposito legal: M. 19.284-2011
ISBN: 978-84-415-2942-7
Printed in Spain
Impreso en: Lavel, S. A. 1. Introduccion a Internet 6
Fundamentos basicos
de Internet. rm
Internet
La Web.
Paginas y sitios
Como se hace una pagin
URL e hipervinculos.............
Tipos de sitios Web ..
Navegadores .
Internet Explorer.
Firefo:
Safai
Opera
Google Chrome..
Otros navegador
Otros servicios y utilidades
de Internet .........cscsesseeeseeesseeeee 20
Correo electrOmico ........seccccesesseeeeeeees 20
Clientes de correo
y correo Web...
Ejemplo de cliente F
Buscadore:
E] buscador Googl
BIOgS westeseeees
P2P y gestores de descarga
Redes sociales.........65
2. Etapas del desarrollo
de un sitio Web 32
Fases de desarrollo
de un SitiO WeD ......cccceseseeerenees BS
Planificacién .. nisms
Creacién de la estructura |
del sitio... arn Od
Recopilacién y y /preparacion
de contenido: 35
Programacion..
Prototipo.....
Soluciones tecnolog
Implementacion .....
INDICE DE CONTENIDOS
——_—_———_———
Consideraciones para
el disefio de un sitio Web ........ 40
Caracteristicas de un sitio
Web efectivo.............
Diseno modular...
Derechos de autor
Trafico...
Promoci6n y mantenimiento
de un sitio Web ........-
Promocion ..
Motores de busqueda...
Buscadores en castellan
Mantenimiento y actuali
3. Programacion 48
Lenguajes de programaci6n
HTML y XHTML
Javaseri ipt
ProgramaciOn Web .......cc00008+6++7
Titulos y texto...
Hipervinculos y ‘marcador
Imagenes
Lineas y b
Multimedia
Listas.
Tabla:
Formula
Bases de datos
Capas
Marcos
Formato de texto ..
Formato de imagenes
Formatos de pagina...
Moles de estilo en cascada....... 78
d
CSS.. . -78
Forma de aplic eg]
auna pagina Web.... -79
Selectores CSS .....
Prioridad de las reg INDICE DE CONTENIDOS
aaa
El modelo de caja scseesseeeseee
Tipografia y fuentes.
Formato de imagenes.
Formatos de pagina.
Listas...
Hipervinculo.
Formulario:
Tablas....
Scripts y trucos ...........
Precargar imagenes en Javas
Intercambio de imagene:
en Javascript ......
Consultar una base de datos
con ASP
Efecto rollover en CSS
Crear un ment de navegacién
horizontal ews numa OF
Walid acid thesssesessessessversessaesvecces 99
Validacion de paginas Web......0.0.99
4. Editores Web 100
Editores online y de texto....... 101
HTML y Editores online..
Bloc de notas oe
TextEdit y Kate........
Editores WYSIWYG
Dreamweaver
Adobe Contribute
Expression Wek
WebMatrix......
Amaya, 2
NVU.... 4
Otros tipos de editores........... 116
UltraEdit 116
NetObjects Fusion. 118
110
5. Imagenes
y multimedia 120
Contenidos multimedia......... -121
Tipos de contenidos .
Componentes grafico:
Incrustar multimedia
en una pagina Web............2.:02+- 124
Trabajar con color
en una pigina Web
Sistemas de color.
Imagenes ........
Tipos de imagenes para la Web
Ajuste de imagene
Filtros.
Efectos
Disefios 3D con Photoshop CS5
Redimensionar imagenes........
Guardar imagenes para la Web.
Otros objetos multimedia.
GIF animado
Sonidos ..
Video...
Crear una animacién con 1 I
Fotogramas y capas.
Trabajar con imagenes en F
Texto y animaciones.
Publicar una pelicula en Flash... 145
6. Sistemas de gestion
de contenidos 146
BlOgS ........ee00006 seeessenseereseeeessees IAT
Blogger. Crear una cuenta
de Google.... seseee
Blogger. Crear un nuevo ) blo
Publicar entradas en Blogger
Gestionar Blogge
WordPress ....
Publicar entradas en WordPress......
Cambiar el aspecto un blog
WordPress.
Portales ......
Joomla...
Administracin nde Joomla
Gestion de articulos en Joomlz
Crear articulos en Joomla... ats
Gestion de plantillas en Joomla........161
147
148
150
151
153
154 Drupal... ibuscanaunaranaiws 162
Crear eoRIeHIdSS en Drupal...
Temas de Drupal
Software para foros
phpBB
Administrar phpBB,
Crear un foro nuevo en phpBB
Wikis ....
MediaW:
Crear una cuenta en MediaWiki
Crear y editar articulos
en MediaWiki
Ensefianza ......
Moodle - 174
Crear un nuevo curso en n Moodle 176
Editar un curso Moodle. ae 77
+178
178
-166
166
168
170
172
173
Comercio electrénico
Magento
INDICE DE CONTENIDOS
i
Cambiar el idioma de Magento........ 180
Gestion de clientes 0.0... eee LBL
7. Recursos 182
Generales. 183
WebExperto
Sitios Espafia.com
Tutoriales .........
ABCdatos
La Webera.
WebEistilo «00.0.0...
Imagenes ¢ iconos..
La ciudad de las foto.
Foto Gratis.es ......
Fuentes ...........cceeeeee sesseseseesesss19O
Letramania .
Megafuentes Capitulo 1
INTROGUCCION
A INTERNET 1. InTRODUCCION A INTERNET
Internet
Internet, la Red 0 la Autopista
de las comunicaciones, es un
conjunto de redes descentrali-
zadas de ordenadores configu-
rados para comunicarse entre si
mediante un "lenguaje comin"
o protocolo. De esta forma, es
posible mantener conectados
de manera casi inmediata,
compartiendo informacidn, or-
denadores situados en lugares
muy distantes del planeta.
Los origenes de Internet se remontan al ano 1969, en el que la Agencia de Proyectos
de Investigacion Avanzados de Defensa (DARPA) de los Estados Unidos, establecié la
primera conexién entre ordenadores que se denominé ARPANET. El objetivo de esta
red primigenia era descentralizar la informacion militar estratégica de forma que cada
componente de la red pudiera acceder a dicha informacién de manera independiente
al resto de las maquinas. Asi pues, si cualquiera de los nodos de la red era destruido o
dejaba de funcionar, el resto de los componentes seguirian siendo totalmente funcio-
nales. La primera conexién de ordenadores se establecié entre las Universidades de
California y Utah.
Nota: Literalmente, TCP/IP significa protocolo de control de transmisién
(TCP) y protocolo de Internet (IP).
Las conexiones entre ordenadores se establecen por medio de una serie de protocolos
TCP/IP, unos "lenguajes comunes" que hablan todos los ordenadores conectados a
Internet. El mas popular de todos ellos es el protocolo http, que se utiliza para acceder
alas paginas Web.
Otros protocolos y servicios de amplia difusién en Internet son el correo electronico
(protocolo SMTP), la transmision de archivos (a través de protocolos como FTP y P2P),
los chat (IRC) 0 la telefonia IP (VoIP).
Segtin datos del Banco Mundial, en el afio 2008 por cada 100 habitantes del planeta
23,9 contaban con acceso a Internet. En nuestro pais, esta cifra ascendia a un 55,4 por
ciento. El ntimero total de usuarios de Internet a nivel mundial en 2008 fue de casi
1.600 millones de personas (algo mas de 25 millones en Espafia).
FUNDAMENTOS BASICOS DE INTERNET vi Guia Visuat DE Creacion y piseNo Wes. Epicion 2012
La Web
Probablemente uno de los servicios mas utilizados de Internet sea la Web o World Wide
Web (WWW o W3). La Web esta formada por un conjunto de protocolos mediante los
cuales es posible compartir informacion entre ordenadores gracias a un formato de
archivo que se conoce como de hipertexto. Este es un formato de archivo que permi-
te recorrer facilmente un conjunto de documentos enlazados a través de una serie de
enlaces, hipervinculos o referencias cruzadas.
La Web esta basada en el desarrollo de Internet y empezé a
formarse en Suiza a principios de 1990 en la Organizaci6n
Europea para la Investigacion Nuclear (CERN). Tim Berners-
Lee es considerado como el creador de la Web.
El protocolo sobre el que se fundamente la Web es http
(Protocolo de Transferencia de Hipertexto), que especifica
la forma en la que se comunican el ordenador donde se al-
macena un archivo Web (servidor) y el ordenador en el que
se desea consultar dicho archivo (cliente).
Tim O'Reilly acuno en el alo 2004
el término Web 2.0 que define una
segunda generacion de la Web en
la que predominan los servicios ba-
sados en comunidades de usuarios
como las redes sociales, los blogs 0
los wikis, cuyo objetivo es promo-
ver el intercambio de informacién
entre los usuarios de Internet.
En 2006 se habla por primera vez de Web 3.0,
en un articulo elaborado por Jeffrey Zeldman
asociando esta terminologia a nuevas tecnolo-
gias tales como AJAX. No obstante, hoy en dia
no existe unanimidad respecto a la definicién
de este término.
FUNDAMENTOS BASICOS DE INTERNET 1. InTRODUCCION A INTERNET
SS )
Paginas y sitios Web
Una pagina o documento Web es todo archivo electrénico con un formato apropiado
para su transmision a través de los protocolos de la Web. Su principal caracteristica es
la utilizacion de enlaces o hipervinculos, referencias cruzadas que sirven para interco-
nectar unos documentos con otros a través de la Red.
La programacién de una pa-
gina Web normal se realiza
mediante lenguajes de progra-
macion estandar como HTML
y XHTMLy puede incluir fun-
ciones especiales desarrolladas
en otros lenguajes de progra-
macion tales como Javascript,
PHP, ASP, ete.
Pracacen we
toma
Dense an
Tasceesinnd
estioanes
sceacnes ped
Un sitio Web es un conjunto de paginas Web relacionadas
entre si y agrupadas alrededor de un dominio de Internet
(un fragmento de la Red identificado con diversos dispo-
sitivos o equipos conectados a Internet). La navegacion a
través de las distintas paginas de un sitio Web se realiza ha-
bitualmente por medio de enlaces o hipervinculos, aunque una
pagina Web también puede contener vincu-
los a otros sitios Web y dominios diferentes,
& En un clasificacién generalista, las paginas
i Web se pueden divi-
dir en estaticas (de contenido predeter-
minado 0 dinamicas (con un contenido
cambiante generado en el momento de
ser solicitadas).
Generalmente, cualquier pagina
Web esta compuesta tanto por
texto como por otros elementos
multimedia tales como imagenes,
sonido y videos 0 animaciones.
FUNDAMENTOS BASICOS DE INTERNET Guia VisuAL DE CREACION Y DISENO Wes. Epicion 2012
Cémo se hace una pagina Web
Toda pagina Web es un documento electrénico (un archivo) elaborado mediante un
lenguaje de programaci6n (generalmente HTML, lenguaje de marcado de hipertexto, u
otros lenguajes especializados como Javascript para generar contenidos dindmicos) cuyo
objetivo es describir la estructura, contenido y formato de dicho documento.
Estos archivos se copian 0 "publican" en un ordenador especial conectado a Internet (co-
nocido como servidor) donde quedan a disposicion de cualquier usuario de la Red. Desde
el ordenador de cualquier usuario (ordenador cliente), se puede realizar una peticion de
consulta de dichos archivos. Dicha peticion se realiza a través de un programa especial
conocido como navegador 0 explorador Web que, a su vez, se encargaré de interpretar el
cédigo almacenado en la pagina Web y de representarla en la pantalla del ordenador.
Nota: Para poder acceder a cualquier pagina Web, sera necesario conocer
su direcci6n URL, una direccién que representa su ubicacién dentro del en-
tramado de servidores y paginas Web de Internet.
Los distintos elementos de una pagina Web (texto, hipervinculos, imagenes, ete.) se
representan, describen o formatean mediante etiquetas HTML, palabras clave del len-
guaje encerradas entre corchetes angulares (< y >).
La primera especificacién del lenguaje HTML la deseribié Tim Berners-Lee en el afio
1991 y estaba compuesta por un total de 22 elementos.
En 1995, la organizacién conocida como W3C (World Wide Web Consortium) desarrollé
el borrador de la version 3.0 del lenguaje HTML. Esta organizacién adopté desde enton-
ces la labor de desarrollar, mantener y hacer ptblicos los distintos estandares evolutivos
que han ido apareciendo del lenguaje. En diciembre de 1999, el W3C publicé una versién
en castellano de su recomenda-
cién sobre la especificacién de
HTML 4.01, que es la versién
actualmente reconocida como
estandar.
En la actualidad, se desarro-
lla el borrador de la version
HTML 5, entre cuyas mejo-
ras se encuentra el manejo de
cédecs para contenidos Web,
etiquetas para manejar gran-
des conjuntos de datos visores
para formulas matematicas y
graficos vectoriales, etc.
10 FUNDAMENTOS BASICOS DE INTERNET 1. INTRODUCCION A INTERNET
URL e hipervinculos
Toda pagina o documento Web
esta representado de forma
tinica por una direcci6n URL
(uniform resource locator, lo-
calizador uniforme de recursos),
similar a una direccién postal
ordinaria que describe la ubica-
cién exacta en la que se encuen-
tra dentro de la red de Internet.
Asi pues, para consultar una
pagina determinada desde un
navegador Web, sera necesario
especificar su direccién URL o
utilizar un hipervinculo, un ele-
mento HTML de otra pagina donde se haya especificado la direcci6n URL de la nueva
pagina a la que se desea acceder. La estructura genérica de una direcci6n URL es:
er ed
poe)
[Ncreative Suite
] ‘ronnnca rama mao phesg
| | ESCUELA 2.0 | @)Form:
como por ejemplo, http: //www.anayamultimedia.es/cgi-bin/main.pl.
esquema equipo ubicacion
http : //www.anayamultimedia.es/cgi-bin/main.pl
carpeta archivo
* esquema generalmente indica el protocolo de red necesario para el documento o
recurso. Normalmente es ht tp (protocolo de transferencia de hipertexto) para pa-
ginas Web, aunque también pueden usarse esquemas como https (sistema ht tp
con seguridad afiadida), ftp (para transferencias de archivos), file (recursos
disponibles en el propio ordenador donde se encuentra el navegador), ete.
* equipo es un nombre o direcci6n IP de un servidor especifico en Internet con el
que deseamos comunicar.
* carpeta/archivo es la carpeta dentro del sistema de archivos del ordenador
servidor y el nombre del archivo, de manera similar a como especificamos una di-
recci6n de recurso en el explorador de archivos de un ordenador.
Cuando se especifica una URL a una pagina o recurso dentro de otra pagina, se usa el
término enlace, vinculo o hipervinculo. Estos vinculos pueden asociarse a un texto (me-
diante un formato distinto de texto, tradicionalmente en color azul y subrayado), aso-
ciado a una imagen 0, en general, sobre cualquier elemento incluido en dicha pagina.
FUNDAMENTOS BASICOS DE INTERNET ata Guia Visuat DE CREACION Y DISENO Wes. Epicion 2012
eo
Tipos de sitios Web
Una agrupacién de documentos o paginas Web que se almacenan en un mismo servidor
se conoce con el nombre de "sitio Web". Algunos de los principales tipos 0 categorias
de sitios Web que se pueden encontrar en la Red son:
+ Escaparates comercia-
les: son sitios donde se
muestran los servicios 0 pro-
ductos que ofrece una deter-
minada empresa o profesional.
Habitualmente, forman parte
de la imagen corporativa de la
propia empresa, son un com-
ponente mas de una campaiia
publicitaria o de promocién de
marca a nivel global o, incluso,
disponen una plataforma de
comercio electrénico desde la
Deporte Idiomas eaivaitdada
Cocina Danza
Teatro
bY = eb Nai
Lot anuncion de tslocadad de
Peers
eet
Pe ai
(eect)
Clete
Pon tuanuncio:
GRATIS en
ch \ame>
que se desarrolla la actividad
economica de dicha empresa. Para que uno de estos sitios Web tenga éxito, deben in-
cluir informacién que ayude a los visitantes a conocer la empresa y sus productos.
* Portales 0 sitios Web de contenidos: muestran informacién sobre un tema
especifico o sobre diferentes temas relacionados 0 no entre si. Pueden ser porta-
les horizontales con todo tipo de informaciones variopintas como el de Yahoo!
(http://www. yahoo .es)overticales, portales desarrollados alrededor de un tipo de
informaci6n como el del Consejo Superior de Deportes (ht tp: //www.csd.gob.es).
Un tipo particular de portal de contenidos son los blogs.
+ Comercio electrénico: sitios dedicados ala compraventa de servicios 0 productos
como Amazon (http: //www.amazon.com)o eBay (http: //www.ebayanuncios.
es/ebay).
+ Comunidades: sitios donde los visitantes participan de una manera activa
creando sus propios contenidos. Ejemplos de este tipo de comunidades son los
foros o las redes sociales: YouTube (http://www. youtube.com) o Facebook
(http://www. facebook.com).
+ Buscadores: sitios especificamente disefiados para la bisqueda de informacion en
Internet (también conocidos como motores de busqueda). Algunos buscadores muy
conocidos son Google (http: //www.google.es) o bing (http: //www.bing.
com), aunque muchos portales como Yahoo! también incluyen sus propios motores
de biisqueda.
12 FUNDAMENTOS BAsicos DE INTERNET Internet Explorer
1. IntTRODUCCION A INTERNET
=———————————— SE
Es el navegador Web desarrollado por Microsoft. Generalmente todas las versiones del
sistema operativo Windows incluyen en su instalacion predeterminada la version co-
rrespondiente de este navegador. Actualmente, la ultima versién de Internet Explorer
es la 9 (en etapa de release candidate en el momento de publicar este libro).
Como novedades de esta versién podemos destacar:
* Un disefio simplificado, una
interfaz de usuario compacta
que maximiza el espacio dispo-
nible en Ja pantalla del ordena-
dor para mostrar el contenido
de las paginas Web.
+ Sivisitamos con frecuencia un
determinado sitio Web, po-
demos anclarlo facilmente a
la barra de acceso rapido de
Windows 7, arrastrando su
icono desde Internet Explorer
hacia la barra de tareas del sis-
tema operativo.
+ Ungestor de descargas mantiene una lista de todos los archivos que se estan des-
cargando desde Internet.
+ Una presentacién de pestanas compacta.
* La barra de direcciones permite realizar directamente bisquedas en Internet.
* Una nueva barra de notifica-
ciones nos informara de cual-
quier cireunstancia que afecte
directamente a la operacién
de navegacién que estemos
realizando en cada momento y
tomar decisiones sobre ellas.
Para mas informacion sobre
Internet Explorer 9, visite la
Web de Microsoft en la direc-
ciénhttp://www.microsoft.
com/es/es/default.aspx.
LG el t=
Sus sitios més populares
a 4 ® =
eieae Googe besa tag \ecalzador
cana de tees
You might also like
- 2992 1 PreviosmaybaDocument70 pages2992 1 PreviosmaybaAguss BosseroNo ratings yet
- Clase 1Document3 pagesClase 1Aguss BosseroNo ratings yet
- Base de Datos I Clase 03Document13 pagesBase de Datos I Clase 03Aguss BosseroNo ratings yet
- Base de Datos I SQL DinamincoDocument13 pagesBase de Datos I SQL DinamincoAguss BosseroNo ratings yet
- Acoplamiento CohesionDocument24 pagesAcoplamiento CohesionAguss BosseroNo ratings yet
- Base de Datos I Clase 01Document19 pagesBase de Datos I Clase 01Aguss BosseroNo ratings yet
- P1 Guia de Trabajos Practicos v180526Document15 pagesP1 Guia de Trabajos Practicos v180526Aguss BosseroNo ratings yet
- P1 Clase01Document25 pagesP1 Clase01Aguss BosseroNo ratings yet
- P1 Clase03Document25 pagesP1 Clase03Aguss BosseroNo ratings yet
- Programación IDocument6 pagesProgramación IAguss BosseroNo ratings yet
