1.

Estructurar una página we

Una vez planificada y creada la web, para conseguir buenos resultados hay que renovarla,
corregir errores y mantener el sitio vivo y actualizado, introduciendo mejoras tanto en el
VOCABULARIO
diseño como en la navegación y las herramientas. Enlace o link. Consiste en un texto o
Hay dos razones fundamentales para actualizar con frecuencia la web: en una imagen de un sitio web sobre
el que un usuario puede pinchar para
• Ayuda a fídelízar las visitas. acceder o conectar con otro
• Ayuda a mantener el posicionamiento en los buscadores. documento, generalmente otra
El problema de las páginas es que sean capaces de aportar un contenido adecuado y de página web.
valor que también sea original y único; además, según vaya creciendo la web, hay que
añadir herramientas para facilitar el trabajo y el uso a los visitantes. En el caso de que haya
enlaces web vacíos habrá que suprimirlos o actualizarlos, ya que no llevan a ningún sitio;
esta revisión de enlaces debe ser continua ya que estos enlaces vacíos son muy molestos
para los usuarios. @ WEB
Incluir utilidades, como fotos, un buscador interno, formularios, etc., también aumenta el
En esta dirección de Internet puedes
valor de la web.
escanear tu página web en busca de
También es conveniente incluir una página de contacto para que los visitantes puedan enlaces que no funcionan:
enviar mensajes si lo ven oportuno para informar acerca de los errores que han visto o http://www.lawebera.es/recurso
para sugerir elementos que les gustaría encontrar en la web. s/
herramíentas/enlaces_rotos.php

1.1. Tipos de estructuras

Una página web puede tener diferentes estructuras, veamos las principales (Tabla 4.1):
http://www.gencat.net/di
Desde la página principal o ari
raíz se accede al resto, que
Estructura depende de la principal.
jerárquica o de Está estructurada en niveles
árbol y sub- niveles que enlazan
las páginas.

http://www.formate-gratis.es/cursos-
gratis.html
A partir de la página de
ESCÓJALA CATEGORÍA OE

Estructura inicio, se suceden el resto Página Página Página CURSOS, out UAs u*
IMTERESEH,
de páginas una tras otra, 1 >
lineal CURSOS BASICOS
CURSOS MAMADOS
v.
como si fuera un libro.
V
innova
estrategias
.trate
distancia

http://es.wikiped¡a.org/wiki/W¡kipedia:Portada
■Í9-- .....
Las páginas van enlazadas
Estructura
entre sí formando una red.
en red

Tabla 4.1. Tipos de estructura de una página web.

Í -

ACTIVIDADES1. Comprueba qué estructura tienen las cinco páginas web que
más visitas.

ABC VOCABULARIO
Backup. Copia total o parcial de datos
importantes.
Banner. Formato publicitario que se
utiliza en Internet, insertando una
pieza publicitaria.
GIF (Graphics Interchange Format /
Formato de Intercambio de Gráficos).
Formato gráfico utilizado en Internet
para imágenes y animaciones.
Hosting o alojamiento web. Es
el servicio que provee a los usuarios
de un sistema para poder almacenar
información, imágenes, vídeo
cualquier contenido accesible vía
web.
Sitio web. Conjunto de páginas web
relacionadas entre sí y comunes a un
dominio de Internet o a
subdominio en la World Wide Web
(www) en Internet.
1.2. Clasificación de las páginas web UNIDAD
Las páginas web se clasifican en estáticas o dinámicas según su diseño y estructura.
Páginas estáticas
Una página web estática es una página con contenidos fijos establecidos por el diseñador
y se compone de varios ficheros que no tienen cambios frecuentes.
Los contenidos pueden incluir elementos animados como gifs, banners, vídeos y otros
componentes multimedia.
Las páginas web estáticas son esencialmente informativas y enfocadas a mostrar una
información permanente, en ellas el usuario obtiene información sin poder interactuar con
la página web visitada.
Estas páginas son una opción para aquellos sitios web que ofrecen una descripción general
de sus actividades: como quiénes somos, dónde estamos, qué servicios o productos
ofrecemos, etc.; y son ideales para las empresas o particulares que solo desean informar
o
acerca de sus productos o servicios.
Páginas dinámicas
Son páginas que sufren cambios frecuentes de contenido con un funcionamiento basado
en plataformas gestionadas por usuarios definidos en el sitio, que son los encargados de
administrar y publicar el contenido. Un ejemplo de estas plataformas es WordPress (Fig.
un 4.1).
WORDPRESS.ORG Español
Foros de soporte Guía de traductores Colabora Contacto
¡Bienvenida! ¡Bienvenido!
¡Bienvenid® a WordPress España!
WordPress es una avanzada plataforma semántica de publicación personal orientada a la estética, los estándares web y la usabilidad.
WordPress es libre y, al mismo tiempo, gratuito.
Dicho de forma más sencilla, WordPress es el sistema que utilizas cuando deseas trabajar con tu herramienta de publicación en lugar
de pelearte con ella.
Descargar WordPress 4.1
Descargar .Zip - 6.8 MB
Aquí puedes descargar la versión completa de WordPress en español de España. Para Descargar .tar.gz — 6.3 MB
instalarlo, sigue las instrucciones que encontrarás un poco más abajo.
Más opciones de descarga
También, si lo deseas, puedes descargar el paquete completo y usar solo el archivo de la
■ Otros formatos de archivo
traducción sobre una instalación en inglés. Para ello encontrarás el fichero 'es_ES.no' que • Versiones anteriores
deberás subir a la carpeta '/wp-content/languages/' y, posteriormente, comprobar que en • Versiones Beta & RC
el fichero'wp-config.php' de la carpeta raíz de tu instalación el siguiente valor está definido
Fig. 4.1. Página principal de WordPress, https://es.wordpress.org
La información presentada se genera a partir de una petición del usuario de la página, y
aparece inmediatamente después de una solicitud hecha por el usuario.
Este tipo de página permite almacenar, hacer actualizaciones de la información contenida
en la misma y también modificaciones dinámicas de la estructura y del diseño por parte del
propietario.
Las plataformas se deben actualizar para corregir fallos de seguridad, no solo su estructura
básica, sino también las plantillas y los plugins, esto no ocurre si se tiene un blog, ya que
la propia plataforma realiza las actualizaciones.
Una vez instalada una plataforma en el hostíng no hay que descuidar el contenido,
pudiendo realizar backups de los artículos que se vayan a mostrar e incluso de los
comentarios.
También es necesario hacer backups de la estructura de la página para asegurarse de poder
volver a montar la web con las actualizaciones necesarias, así, al sufrir un posible fallo en
la actualización de la plataforma o en alguno de los plugins, es posible recuperar la
situación anterior al mismo.
Veamos algunos ejemplos de páginas web dinámicas (Tabla

4.2): Portal
Es una página web con una página de presentación
desde la que se accede al resto de servicios. Tiene
acceso a un correo electrónico, buscadores, foros, etc.
Tienda virtual
Estas páginas suelen actualizar su catálogo de
productos con asiduidad. Tienen un diseño atractivo y
funcional.
Weblogs y Bitácoras
El autor suele actualizar los contenidos y los usuarios Yahoo https://es.yahoo.com
añaden comentarios.

Giíca www.perfumesgilca.es

Bitácoras.com www.bitacoras.com

Tabla 4.2. Ejemplos de páginas web dinámicas.

Cuando se crean páginas dinámicas se utilizan lenguajes de programación, que aportan mu-
chísima interacción con el usuario y también una gran capacidad de proceso para generar
contenido. Los lenguajes más utilizados son (Tabla 4.3):
PHP (Hipertext Preprocesor). Lenguaje que permite el uso de bases de datos para almacenar los contenidos.

Del lado del ASP (Active Server Pages). Desarrollado por Microsoft para crear páginas web, permite el acceso a bases de datos.

servidor JSP (Java Server Pages). Desarrollado por Sun Microsystem para crear páginas web dinámicas y aplicaciones para
cualquier dispositivo.

HTML. Indica al navegador dónde colocar cada texto, cada imagen o cada vídeo y la forma que tendrán estos al
ser colocados en la página.

JavaScript. Es utilizado para crear pequeños programas encargados de realizar acciones dentro del ámbito de una
página web.

Del lado del Java Applets. Se trata de pequeños programas hechos en java que se transfieren con las páginas web y que el
cliente navegador ejecuta en el espacio de la página.
Flash. Es un programa para crear efectos especiales en páginas web.

CSS. Permite Incluir márgenes, tipos de letra, fondos, colores... Incluso podemos definir nuestros propios estilos
en un archivo externo a nuestras páginas; así, si en algún momento queremos cambiar alguno de ellos, automáti-
camente se nos actualizarán todas las páginas vinculadas de nuestro sitio. CSS son las siglas de Cascading Style
Sheets, en español Hojas de estilo en cascada.
Tabla 4.3. Lenguajes de programación más utilizados.

87
 CASO PRÁCTICO 1

Vas a crear y diseñar un blog en Wordpress. Para ello vas a
dar de alta una cuenta en Wordpress.com para crear un blog
llamado NUEVO COMERCIO, de tema Sketch, que va a
contener dos artículos:
* El primero con el título «NUEVA TIENDA» y el texto:
«Nuestro comercio lleva vendiendo zapatos desde 1983 en
la calle Nervión 456 de Sevilla. Con esta tienda on-line
nuestros clientes tienen la posibilidad de ver y comprar los
productos en Internet».
• El segundo con el título «GRANDES DESCUENTOS» y el
texto: «A partir del día 24 ofrecemos a nuestros clientes
descuentos en zapatos de temporada de grandes marcas».
En este artículo insertaremos una imagen de zapatos.
Colocarás también en el blog tres widget: Calendario,
Estadísticas del blog y Search (Buscador).

Solución:
Para darte de alta en el servicio accede a www.wordpress.com, donde se te pedirá un nombre para el blog, un correo
electrónico y una contraseña. Elige el tema Sketch y personalizar. Luego utiliza la opción de compartir con Twitter y Facebook.

Fig. 4.2. Nombre y dirección blog. Fig. 4.3. Correo electrónico y contraseña. Fig. 4.4. Titulo del blog.

Fig. 4.5. Elige el tema Sketch. Fig. 4.6. Personalizar Sketch.

Una vez dado de alta el servicio, recibirás un mensaje de confirmación en tu correo electrónico para poder publicar. Para
insertar una imagen:
1. Crea los artículos

2. Arrastra o selecciona el archivo correspondiente.

Fig. 4.7. Primer artículo y segundo articulo.

Fig. 4.8. Insertar objeto. (Continúa!

V
 UNIDAD

CASO PRÁCTIC01
/Continuación]
3. Busca la imagen. 4. Primero sube la imagen y luego la publicas.
ItnwUt vbjclu Insertar objeto «

fr&srjater..» *ut»f -Jrctwc-. 9itA90K* MtOT'WU

GKANOES OtSOJEtíTOS
V^erur 0ei4< URL

J
B / — V t. u - ± ± 2 s 5xB
Aparu-oeioia 2« o*«<*«T>as • <w*v?ot cfcyuc-t oei>cutrvv» en «ym « VnipcaMjOe pjmOcí
nafu*

@ W*m x ÍA una alia h apuntos

S "_

Fig. 4.9. Selección del archivo. Fig. 4.10. Imagen ya insertada en el articulo.
Para poner un comentario: 1. Haz clic en Comentario. 2. Escribe el contenido del comentario y visualízalo.
f□(juÑeíjo* -'^Q. . * • •
~ : : : r. - m -•

O GRANDES DESCUENTOS
m •4-
*
■"□ V *
• »«(:< AL
7
C
’’ HRps.Vn»rtlp*e>v<«m
«J 7> 11 • «CV!Q •f; O Q S|
rt
~tJ7 • ~ —-_gjm
J A*-

o NUEVA TIENDA

Fig. 4.11.
Fig. 4.12. Publicación de un comentario.
Para insertar un widget:
jg Vqnofiiíirm1 « « ~ •• ■ > ■ ' w v <■ M t - .* :
*Q *■ ... ■ y i • _ Resultado final: fl t ü
T

j3fcpnrj«n**m$. JatvV*: %#*tq ' 5J *»C9 <H - E3 NUEVOCOMERCIQ2

• (4- Q M*dcjr*í»r*n A_ D
GRANÜES DtSCUF NTOS
■>.. W C«#~>90 h»at
NUEV0C0VIERCI02

Mi NUEVA VKNOA

f #1 □ A l'h ' « :J$ £3 *

Fig. 4.13. Widgets.

ACTIVIDADES
2. ¿A qué categoría pertenecen las siguientes páginas web? A
aj El Corte Inglés.
a] Un bufete de abogados. b) Ayuntamiento de Ciudad Real.
b] Un supermercado. c] http://www.weblearner.info (web colectiva sobre
teleforma
3. En los siguientes casos de webs dinámicas diferencia ción, LLL, TIC, enseñanza y aprendizaje).
entre
portal, tienda virtual y weblogs: -J
V __
 UNIDAD

CASO PRÁCTIC01

Fig. 4.14. Aspecto del Blog al terminar.

 ABC VOCABULARIO 2. Lenguaje HTML
El lenguaje HTML es un lenguaje de marcas de hipertexto (Hypertext Markup
Tag o etiqueta. Es una marca que Languaje) que se refiere al lenguaje de marcado para la elaboración de páginas
delimita una región en los lenguajes web.
basados en XTML.
Está constituido por una serie de etiquetas o tags que permiten definir la estructura de la
Script. Programas usualmente
página y su contenido, ya sea este texto o imágenes. Se puede escribir en cualquier editor
pequeños que ejecutan generalmente
básico, como el Bloc de notas (Fig. 4.15) de Windows o Kate de Linux (Fig. 4.16), y el archivo
tareas muy específicas.
generado debe guardarse con la extensión .html.
aUTUafjiJ¡»<» (Error tí1 ¿Ct>*9óóa Ü» p'OJuít>M)
» ai “
-^
troco . Cu«AoOt
G 4- C fi L' kM?*«fitor.org £■
AÁ . - {** Ruuy •
Jl 5**"> Mwt» * tivíC Úf tvAiS M * * ;
3 fancoWitfm** , *********** dt*\ 0 trv»4*m3n*n«l< £J MUtantM *0 H*4w*i>«r
«rM» tom» .» turf» C3 <Mr»v*K».com | UW Q RMMUI
M. id* vtow Proj«<t« Bookmarkt Sttttom TaoH SitUrtgt Ht’.p

tí Untitkd O umitkd (3) o Untitl«d(2

** Untrtfád
¡•¡ESESEMB
r UfX«]«d(2)

Lint 8. Cokwrtn 39 INSCKT Soft Tftfc»; 4 (1) v UT*8 ^ Norm

4% S*ar<h *ndR«plaet

rj“ Bloc de notas de windows | Kate de linux

Fig. 4.16. Kate de Linux.
Las etiquetas pueden describir la apariencia de un documento o hacer referencia a un tipo
de programa llamado script.
La presentación de la página depende del navegador o browser utilizado, que es el que
Fig. 4.15. Bloc de notas de Windows.
interpreta los tags; por eso el mismo documento ofrece un resultado diferente en la
pantalla según se visualice con un navegador u otro, ya que HTML se limita a describir la
estructura y el contenido de un documento, y no el formato de la página y su apariencia.
Para incorporar un elemento externo, este no se inserta en la página sino que se añade
una referencia a su ubicación mediante texto y el navegador une los elementos para
visualizar la página.

2.1. Historia de HTML

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, que trabajaba en la
Organización Europea para la Investigación Nuclear (CERN), propuso un nuevo sistema de
«hipertexto» para compartir documentos. Estos sistemas habían sido desarrollados años
antes, y, en el ámbito de la informática, el hipertexto permitía que los usuarios accedieran
a la información relacionada con los documentos electrónicos que estaban visualizando.
Tras finalizar el desarrollo de su sistema de «hipertexto», Tim Berners-Lee lo presentó en
una convocatoria organizada para crear un sistema de hipertexto para Internet. Tim contó
con la ayuda del ingeniero de sistemas Robert Cailiiau y ambos presentaron la propuesta
ganadora, llamada World Wide Web (W3).
En 1991 se publicó el primer documento con la descripción de HTML con el nombre HTML
Tags (Etiquetas de HTML).
En 1993 se realizó, por parte del organismo Internet Engineering Task Forcé (IETF), la
primera propuesta oficial para convertir HTML en un estándar, consiguiéndose avances
importantes, como definir las etiquetas para imágenes, las tablas y los formularios; pero
ninguna de las dos propuestas realizadas como estándar (llamadas HTML y HTML+) se
convirtieron de forma oficial en un estándar.
En 1995, el IETF organiza un grupo de trabajo de HTML, después del cual se consiguió
publicar, en septiembre de ese año, el estándar conocido como HTML 2.0, siendo, a pesar
del nombre de su versión 2.0, el primer estándar oficial del lenguaje HTML.

90
 UNIDAD ¡
2.2. Evolución de HTML
En la Tabla 4.4 se recoge la evolución de HTML.
HTML 2.0 En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial
de HTML, es decir, el HTML 1.0 no existió como estándar.
HTML 3.2 La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML publicada por el W3C
(World Wide Web Consortium). Esta revisión incorporó los últimos avances de las páginas web desarro-
lladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.01 HTML 4.01 se publicó en diciembre de 1999. Desde esta publicación, el W3C se centró en el desarrollo
del estándar XHTML.

HTML 5.0, HTML 5.1 y HTML El consorcio internacional W3C marcó las siguientes fechas para liberación de los estándares de
5.2 especificación: 2014/2015 para HTML 5.0, 2016 par a HTML 5.1 y 2019 para HTML 5.2
Tabla 4.4. Evolución de HTML.

2.3. Crear una página web

Los documentos HTML (Fig. 4.17) deben seguir una estructura en cascada compuesta por
etiquetas. Cada etiqueta está delimitada por los signos < > y puede escribirse en
mayúsculas o en minúsculas, el signo que cierra la etiqueta se indica con la barra /.
Fig. 4.17. Página web http://www.elpais.com en formato HTML.
<HTML>, </HTML>. Indica que el documento es una página web escrita en HTML Se puede utilizar el atributo lang="es"
para indicar el idioma de la página.
• <HEAD> , </HEAD>: cabecera o encabezado de la página. Incluye las definiciones generales que afectarán a todo el
documento.
• <TITLE> , </TITLE>: título. Especifica el título de la página que van a mostrar los navegadores, los marcadores en
favoritos y los buscadores.
• <BODY> ,</BODY>: cuerpo. Comprende el contenido de la página.
Para texto y formatear:
- <p>, </p>: etiqueta utilizada para contener un párrafo de texto.
- <strong>, </strong>: el texto comprendido entre estas dos etiquetas aparecerá en negrita, también se puede utilizar
<b>, </b>.
- <u>, </u> - el texto que está en el interior aparece subrayado.
- <em>, </em> - el texto contenido entre ambas etiquetas se mostrará en cursiva, también se puede utilizar <i>,
</i>.
El siguiente tag es el más importante, ya que permite enlazar unas páginas con otras:
• <a href:dirección webx/a>
Se pueden introducir comentarios útiles para el diseñador de la página, pero que no se enseñen en el navegador, con la
etiqueta <\-COMENTARIO->.
 UNIDAD ¡

2.4. Notepad++
Fig. 4.18. Logo de Notepad++ (Fig. 4.18) es un editor de texto y de código fuente libre con soporte para
Notepad++. varios lenguajes de programación.

CASO PRÁCTICO 2 Descárgalo gratuitamente desde la página web http://notepad-

plus-plus.org/ e instala Notepad++. Solución:

1. Dirígete a la web, descarga el instalador y elige el idioma.
IVnuibv'tl Ñu». «=*• ■■ mrn

«tt Tlpiv * TixWv>i--Kw ^rv

Fig. 4.19. Proceso de descarga.

2. Sigue los pasos del proceso de instalación. "¿ir-" »r,v^ / -

jbi ■S-

fe -
i ------
(taojM'&rtkoi'lif b
vMv'tvwHi MMU,
ñ-
...
W

3. Al terminar verás el programa instalado y cómo se ve. 1. Haz

2. Escribe el contenido del comentario y visualízalo.
clic en Comentario. *
J J A » ct ¿OiS.unídAd 4J ju »corwftkto T/rtoyjWbrt
-Ó 4
Ct 2CiS_unidad 4_T>»w♦ corrido \7 novtaftbrt • Microsoft Word _
OJ C\ProgtwiFite*Qctt;\Ntt*p»d»*\<hingelog *Nottfrtd** O
A. ^ M S - 7 - il i AaBbC
• *AaBbC
A/«ify«MtbCtí A*fcbCcDLoflfcfci
|<HX 6uK*f V«i Cotifttttf* . T* CtWtfcjrKfcftM*trt> £jttvt*f Ptuc« WfiHM T
“ ,ÜBQ ..»'**■;P«il«'tal* - 3SIE» 1 ffinüja !*»
V * <8l«istil«t6ndeMoííiWKl**v$.69—
K aCompletando
H- a*v f«*tur*
el Asistente de *aa bag ti***:

' ^l ^ j j
~ de Notep«<H+
Instalación >w v«.6.9IIutttu,° ‘ s
*•.».* ►*» MK> ROM: ** I» n* cccss*Bt ccwsir.il bug tfckt th« :
Wfcenfc. cca Mil pyUibn p»t*on Í6r tunetioa Jfjuaíiol
U*t. i
»i*k« íewv*’ fc*ekgíe*tftf colear trfcn*p&r*r/t tüí
— íunctionU*t «tv ftJitur*; *pf¿y **v tu* d*f*uit mWftO* 6»
rntttd a«v Flx c&lcui piiint* tkc-cttz büQ Mtltí) tistx not woik
■
laduflcd pluaifcs:
1, DSjwUCtotc* vJ.Í.12
5. .yppm 0,24.1
3, XppC*J>bxt *0.2,6
4. Eluda Hir.igtir ¿,o*8
Í» CDR'rtítlí 3,&

Fig. 4.20. Proceso de instalación. r¡j=n

«, Mía* Tool 1»#
... - ■ •

tí
vi t**M vth
j. Jr ~
_i_ ........... íüiía
Fig. 4.22. Resultado final.
Fig. 4.21. Ejecutar/Terminar.
 4 i|R
UNIDAD

CASO PRÁCTICO
3 Solución: darás el archivo con el nombre nuevaweb y la extensión
CASO PRACTICO3: Con Notepad++ vas a crear una página
.html. Al finalizar ejecutarás el archivo con el navegador Chrome:
web que lleve como título «HOLA» y que contenga el texto
«MI PRIMERA PÁGINA». Guar-

Primero abre Notepad++ y, en un nuevo archivo, escribe en cada línea las instrucciones, al
finalizar guarda el archivo con la extensión .html y ejecútalo con Chrome.
Instruccio
<body> <htm
<p>MI PRIMERA PÁGINA <strong>WEB</strong> <hea
</p> </body> <title
</html> </he
t (iniHaM.i \ “i i >-rt>í/irtUA t 7 ív.Ánffél'M
U¡J CAt^rográiYi f-uei(X&)\Nc
[Wi U O ’ ü m J j ¿ » Cl ¿01 Sjjr.'dAd - tomado 1? noviembre
•rtéw 2 - Nótepád* ♦ lAdtitinistrttor)
. Artíwó tdftar fcxcár Vitíá Cc<lrtR»t>6n ltri£ui¿r
a _ „/:a® . .o att a v * *
M.hto (jttvtar PhjQinA yeotama T
aFji&iKt3H¿);!»!«a'i«s4í H-
<M- “* r.—— Noh2p¿d»*tAdnunlsUator]—^l:vSÜI|
7^. j s^ts] _______________ / M>] fcvjUáf VUUCtxJ,T>éA6Wi CóM.QurKJfrn MKro

* £* y ¡g á»

Fig. 4.23. Abre Notepad++ y un archi

* s» úb Jf J Jl * CE 20lS.un¡d*d 4J„«» - comido \7 novitmbr* |"“®* I j J ¿ t rtMiíjuiUiAi

*ric*v 2 * Kcftpad* ♦ [Administrador)
Cuárdir torto
¿
I Ccd.Tióoán LtAáoV* C</»t=frjrK»6ft M»<r<> l^cvttr fcugu* u
VtttJ*» t i > O*OS*- ► Oocwm*«tai v £, mEVx

, ^ 4.rr~“’' Afcfir lü c»r{*U

I‘ OrgarhUf» Ul*vac«rp«U lo~to il
rf««o»*rt5bco ***»
ST *
iOftttftMdf»
«f í.vOott* *»""* f«*U<1< 'TÍ' (l«iiOíf <}*(« d.t«>
.4 OtcArpM ^ uneitwertoeortóde con:**•<} _
W £W>f>Ua
«t
J 6o*rd*
__________________
2 ÚUfcttKWve
íkiirCM IM copia
MctxieUpkH
tcmc_
K» *> &V6* i!
GukrdttKXK»
IK«Í«
-
A On*Ofiv* CUriMCxJM
CtrwtnXx
•4 6fup6 **« bí^*í

\tr\ptimk thon,
): escrita fit** t-VK*f>0*,lO3
Abrtr KxK» lü*
*rcf«y&* r«i*fiW
umpur Ittf* O*
fcrthfvc* rK*nt«

Jflifltti; 119 twt I Ln.fl C<X:« S*( 0|0

Fig. 4.25. Selecciona Archivo > Guard

C.\Usm\SANTlACOi>sldGp\nxi«vavití)h!ml Notíf>id»^ (Adrr^isUitorl U-) Sin tlulo -
Pí.nt
AftfWve Mittf 8»at*í VrtU Cod¡íiC»Ci6« Itflomí» Ccrt«ur*ü6»i MKfO ¡t». »■>]YtfW**»
— :■ u ■ n
y’^.ANVODQQ4-Z
í
v C«W [ C:*J< , oie . .a *%»;»«* «^i ^ aai^ (jtdtt.
Uuntlt w cw»Aa*SKti+y
1—*
CM
,•
fHvffix CttltAí^SM?»!

\OüOOOO -£»--«*
ifcjritn if\ g Cwj*Art.SJ^R_]

----- lAltyp**r>
líunch
iKmoi m M
S*t»fi
Chrí-M*
■ ^S
r*»»! G«phph»!í
GoogK ., _ .Atv>n
int_»cnp!
O SÍJP
NOflUáHWWrW
bn r PO
**.*
Síírth AÜ» ^
Wrtop«li»
SwiCK Cn*Jo*«»l Ah*»r
lOMlCEFlE r m' t
{COmnoAButmt
Lhngu«9« C ttrt*
CtÍMS<níia4*rJ
'c«c»4* sv* SWL
r
1^*8
MfcWOMtH

« 7 nt a * T» • CfVfii

Fig. 4.27. Guarda el archivo.

93
 CASO PRÁCTICO 4

Generarás una página web con Notep, con el título «Lavadora»y que contenga la
imagen de este electrodoméstico. Además, añadirás al pie un enlace a la página web
de RTVE. Cuando termines, llama web2 al archivo, que llevará la extensión .html, y
ábrelo con Internet Explorer (IE).

Solución:
¡Auioíf »o3(

C'itkttW»1 c.rri.'/n
. ,,CUAKEFR.E(\cn\*k*.’ctfi»k«)
Primero descarga desde la web la imagen de una lavadora y guárdala en el escritorio ii B
con el nombre «lavadora» y con el formato .jpg. ¿AlC0>nm4< Bcí'nt 11 On*tf¡é<!
IknguM í* Ctt* c PA{Cof**Scnp<*l«
(•
Ifrü't* p* f A' H9-' ***■’’ t*t* tí)

Abre Notepad++ y escribe las instrucciones: e aC*it»0*

StyM Sí^m
<html> F>w f ctt) .Opíojfifnmoj f

<head> d)
3^2 j F oiVm louti* m Cl’.toc- J9Q '<M.* C*)
U-'M
<title> IMAGEN</title> MI -• SBSWT.
</head> C=£J V WS*vi**fjr«,’
rí,r»í*«i)
fiibtioitcftt
<body> i*í
£t»*qih
<p>IMAGEN EN LA WEB </p> f>Q

¡£3 Jyecutar...
1 !j»r*S*-
F5

<¡mg src= "C:\Documents and Settings\Escritorio\lavadora.jpg" títle=Lavadora> E3l!

VWPV8»*Urp»mrÍM>)
Launch in Firefox
_____Loatójitiüai_ _. ,
Ctrl f Alt *Shift*X
Ventana ?
<a href=http://www.rtve.es target="_blank">television</a> Launchin íE Ctrl*Alt*Shift*l

1 Launch in Cbrome Ctri+AIt+Shíft+R

</body> Launch in Safari

Get php hdp
Ctrl*Aft*$hift*f
Alt+Fl

</html> Google Search

WiJdpeclia Search
Ait*f2
Alt+F3
ox*. jpg Open file Alt*F5

Una vez que accedes a la web, al pasar el ratón por encima de la imagen, podrás ver Open in another instante AltfFó

r. Send vía Outlook Ctrl ♦Alt tShift+O

el título, sí pinchas en el enlace, se abrirá la web de RTVE.

* **

1. Escribe las instrucciones y guarda el archivo como html (menú Archivo>Guardar

como).
2. Ejecútalo con Internet Explorer (IE).
Fig. 4.29. Pasos necesarios para conseguir que, al
acercar el ratón a la imagen, se vea el título y, al hacer
clic en el enlace, se abra la página web.
lAdtSfcf.M».*.*».' ¿¿b) r-t rLtKxrt* V* C *»rn)

- CASO PRÁCTICO 5 Además, debes incluir la imagen de una televisión (con el

Vas a elaborar una página web con Notepad++ que llevará
por título «TELEVISIONES RAÚL». Mostrará el texto
«GRANDES OFERTAS EN TELEVISIONES» (con los palabras «en
televisiones» en negrita).
título 500) y un enlace con la palabra oferta que conducirá a
la página web www.mediamarkt.es. AI finalizar el trabajo,
guarda el archivo con el nombre TELEVISIÓN y ejecútalo en
Internet Explorer.

2. Ejecutar en Internet Explorer.

■ * . * ' \ 'T£l£VsSlONESRAUl - . nmnm
C tí ^TlAGO,MDfM^>nvf/Do<um«moi/T£LEV!SiONíS HTML
coi]
•I
*n S U M O 2 ¡ m B f a ; B » n « ¿ 0lH««eíteíi O- EcL. 0 He:kuna«r«AA. Daa:ov«íoce_ □ t'íoitocc'n IB. J H M d ü « ■.
j GRANDES OFERTAS IN TXLIVIMONXS

I ea

* .,j_. • b •*
4 |

94
 CASO PRÁCTICO 4

Solución:
1. Instrucciones.

Fig. 4.30. Código HTML y resultado del mismo en el navegador.

95
 3. Creación de páginas web
UNIDAD j

Un editor web es una aplicación que permite crear, editar y guardar una página web. Hay
tres VOCABULARIO
categorías:
WYSIWYG (What You See Is What You
• Editores de texto. Permiten editar el código fuente, un ejemplo es el bloc de notas de
Get). Lo que ves es lo que obtienes. Al
Windows, guardar el archivo con la extensión .html y abrirlo con un navegador.
escribir se ve el resultado final.
• Editores de HTML. Funcionan igual que un editor de texto, pero tienen opciones más
CSS. Lenguaje de hojas de estilos
avanzadas, como, por ejemplo, abrir y editar varios ficheros a la vez, colorear los códigos
creado para controlar el aspecto o
de las páginas para facilitar su comprensión, soportar otros lenguajes de programación
presentación de los documentos
con los que se puede llegar a trabajar en el desarrollo de páginas web, etc. El archivo se
electrónicos definidos con HTML y
puede enlazar con la dirección de una página web por medio del botón Enlace
XHTML.
(normalmente tiene forma de cadena).
• Editores WYSIWYG. Permiten editar el código fuente y a la vez ver cómo la página quedaría
en un navegador* Además, estos editores tienen opciones para realizar tareas
adicionales, como tablas o elementos animados. Igual que con los editores HTML, se
puede enlazar con una página web por medio del botón Enlace.
Los programas más utilizados son (Tabla 4.5):

Gratuitos
Dreamweaver Es un editor de fuente abierta, su principal ventaja es
Es una aplicación destinada a la construcción, diseño y su capacidad WYSIWYG y su sencillez, también dispone de
edición de sitios, vídeos y aplicaciones web basados en plantillas con páginas estándar prediseñadas. El primer paso
estándares. es organizar los archivos, creando carpetas para incluir en
Kompozer ellas las imágenes, los elementos multimedia, etc.; y el
segundo, nombrar la página principal como índíce.
----- - --------
T
, --------------------------------------------- ------ -------------------------------------------------------------
]
y— -------------------- --- -------------- ,

ir i’*-1'--•—i — •
http://www.adobe.com/es/products/dreamweaver.ht http://kompozer.sourceforge
ml
.net/

WebSite X5 Professional Es un programa gratuito con una doble función, editor

web y navegador, que permite generar páginas en HTML
Permite crear páginas web de aspecto profesional gracias a su
y XHTML, hojas de estilo CSS, y ofrece la posibilidad de
gran cantidad de diseños y funciones.
imprimir partes diferenciadas de una web.

http://www.websitex5.com/es/professionaI.html
^ Amaya

Tabla 4.5. Programas más utilizados en la creación de páginas web.

 CASO PRÁCTICO 6

Con el editor web Kompozer vas a crear una página web, de separación): filete de
titulada «RESTAURANTE MOLINER», que incluya una relación MENU SEMANAL merluza
de los días de la semana y los menús para esos días; crearás Martes Ensalada
enlaces internos desde los días que aparecen al comienzo a) Domingo
de la página hasta su menú correspondiente. Al final de la y ternera
b) Lunes
página añadirás un enlace a la dirección www.elmundo.es.
Cuando termines, darás al archivo el nombre web Kompozer c) Martes
y harás clic en Navegar. Lunes Lentejas y
El texto contenido en la página será el siguiente (ten en Domingo pollo
cuenta que entre cada menú diario debes dejar varias líneas
Macarrones y

Solución:
i-HS. ZT

■B—BBH
Fig. 4.31. Abre Kompozer Fig. 4.32. Añade el Titulo

Fig. 4.34. Selecciona las palabras, agrega y coloca los enlaces Ínter- Fig. 4.35. Enlaza cada día del comienzo de la página con su día de nos
menú.

96
 ' 3 *■> Í A* B IV lili JS A^¡mrA
y*: ' g| rHUSTA^UMlÍMcÍMt [ ** 'í ' fj - ' «• * MmmKji. O•
ii MENTÍ
0 n * u # 1 7 F2«e ármate* 1 SEMANAL A

Q>
(SLoaei tnt.c<k«o* el ledo •
p«r« ¿«nlfrcc Ub<K>ón
M «rb<*
Intreduít» m 0r«tCiÓn
SlNUtn wtb. wí ¡ocd, un«
dirtcó¿*t d< <e*r*>
1 ekrtf6"Ko 0 k*kcȒ><
• tf rnfr « un interno[[dkión9c*br<tn
rwvid*.-Ó*
J1
, .Mml> . --- .ItU
.. ___ ____
t“?*1 s/:18 > >' 12*T. 1 U
1 1 J 1j 1*y*«» J . El
bttpc/’Apww
Fig. 4.36. Sitúa el cursor donde irá el enlace a la web y créala.
.t*rnjnóó*4 * Fig. 4.37. Al finalizar, haz clic en Guardar y Navegar.
U Ü?. »i • \é Are-t en
0* U s*pn«

97
4. Elección del servidor para alojar páginas web servidor es el ordenador donde
se ejecuta el servidor HTTP.
4 IIINR
Hasta ahora hemos abierto las páginas creadas con el navegador desde el explorador de —o'Jo1
archivos. Pero nuestros clientes no estarán delante de nuestro ordenador, que además UNIDAD

apagaremos cuando terminemos la jornada.

Un servidor es un ordenador conectado las 24 horas, que posee un disco duro con una
gran capacidad y una velocidad alta para Internet. Cuando un usuario visita una web lo que
hace es acceder a estos ordenadores, exactamente al que alberga la web. VOCABULARIO
Cuando un servidor ofrece un espacio para una página web deja ese espacio en un disco FTP (File Transfer Protocol).
duro para que se coloquen los archivos en su web. Para subir esos archivos se suele usar Protocolo de transferencia de
un programa FTP. archivos.
Es necesario distinguir entre «servidor HTTP» (Apache o IIS) y «servidor». El servidor HTTP
es el software que atiende las conexiones desde los navegadores de los clientes, y el

4.1.Características de los servidores

Las características de los servidores son (Tabla 4.6):
Alojamiento web Es el espacio que cede un servidor a los usuarios para poder alojar
(hosting) información, imágenes, vídeo o cualquier contenido accesible vía web.
Archivos FTP Es aconsejable que permíta subir o bajar archivos con FTP.

Publicidad Los servidores gratuitos incluyen publicidad en la web generada, entorpe-

ciendo la navegación. Sí el servidor es de pago no incluye publicidad.
Dirección Localizador uniforme de recursos (Uniform resource locator). Es una se-
(URL)
cuencia de caracteres que responden a un formato estándar y que per-
miten la clasificación de recursos subidos a Internet para su descarga y
utilización.

Tasa de La web ocupa lo que ocupan los archivos que la forman (en kilobytes) más
transferencia imágenes, música, archivos que bajen los visitantes, etc.
mensual Cuando un usuario web visita la página, el servidor donde esté alojada
descarga todos los kilobytes de los archivos que está visitando.
Los servidores gratuitos ofrecen una tasa de transferencia de alrededor de
1 Gb, y los de pago mucho más.

Lenguajes Lenguajes de lado servidor son aquellos lenguajes reconocidos, ejecuta-

dos e interpretados por el propio servidor y que se envían al cliente en un
formato comprensible para él. Las páginas que se ejecutan en el servidor
pueden realizar accesos a bases de datos, conexiones en red y otras tareas
para crear la página final que verá el cliente. Muy utilizados para el desa-
rrollo de páginas dinámicas son ASP y PHP .

Panel de control Es un software que provee una interfaz gráfica para la administración de
(cpanel) los servicios del servidor, permitiendo realizar tareas como administrar
archivos, cuentas FTP, correos electrónicos y bases de datos.
Tabla 4.6. Características de los servidores.

4.2.Tipos de alojamiento web

La diferencia entre los tipos de alojamiento está en:
• La posibilidad de disfrutar de una máquina (real o virtual) capaz de soportar la
instalación de un servidor web o cualquier otro (servidor FTP, servidor SMTP, etc.) y si esa
máquina es administrada por ti o por la empresa de alojamiento.
* No disponer de una máquina, sino ser uno más (un host virtual) en un servidor HTTP
gestionado por la empresa de alojamiento web. En este caso el servicio puede ser gratuito
(a cambio de incrustar publicidad).

98
 Los principales tipos de alojamiento web son (Tabla 4.7):
Hosting Los proveedores de alojamiento gratuito Ventajas
CASO PRÁCTICO 7 requieren
......
normalmente poner sus propios Interesante para realizar pruebas y aprender, además permite man-
^jj^ostin^er

anuncios en el sitio alojado de forma gratui- tener

— - -------------------------------------------------------------------------------------------------------------- --------

Hosting Web Gratis 00 un entorno real a coste cero.

ta y tienen limites muy grandes de espacio y
gratuito de tráfico. Desventajas
t.-HJdUu: JGti. 11 ¿íliu: 10SC1;. PHP,

Capacidad de proceso muy pequeña, memoria baja y limitaciones de

MySQL Cio¿»dor de Sitios, r
iFn F.'íp.mcl y Sin Pul)l!cidjdf*«

los recursos de espacio en disco o de la transferencia mensual.

Fig. 4.38. Pasos para registrarte en Hostinger.
* Hosting Cuando un mismo servidor aloja a cientos Ventajas
de sitios web de diferentes clientes. Este Se adapta muy bien a las necesidades de uso personal, profesional
alojamiento web también tiene algunas y del pequeño negocio. Opción muy económica.

compartido restricciones con respecto a qué se puede Desventajas

hacer exactamente, aunque estas no son en Proveedores que apuran tanto el número de clientes y recursos que
ninguna manera tan importantes como en el acaban con servidores infradímensionados, con problemas de lenti-
gratuito. tud y paradas de servicio.

Hosting VPS Consiste en poner a disposición del cliente Ventajas

(Virtual un servidor exclusivo, pero no de máquina Posibilidad de adaptarse a la demanda; si se necesita ampliar los
Prívate física sino de máquina virtual, con diferen- recursos, el proveedor puede aumentarlos inmediatamente. Al no
tes niveles de recursos (potencia de proce- ser compartido, el servidor no se ve afectado por picos de actividad
sador, memoria, etc.), para que el cliente de otros clientes.
pueda elegir el que mejor se ajuste a sus
Server) necesidades. Desventajas
Mayor complejidad técnica en la administración del servidor solo al
alcance de personas con buenos conocimientos técnicos. Aumento
de precio.
Hosting Ofrecen un soporte integral que no se limita Ventajas
especializado/ a los servidores, sino que incluye el soporte
Mejor funcionamiento de la aplicación web (velocidad, estabilidad,
técnico para garantizar el correcto seguridad...).
funcionamiento de estas aplicaciones.
gestionado Desventajas
Aumento de precio.

Usa tecnologías propias de la nube repar- Ventajas

tiendo el servicio prestado entre varias má Seguridad y gran flexibilidad para crecer fácilmente.

Cloud hosting quinas físicas. Es típica la tarificación por Desventajas

consumo. Precio más elevado que las opciones de hosting compartido.

Servidor Máquina física en las instalaciones del proveedor.

dedicado

Tabla 4. T. Tipos de alojamiento web.

Vas a registrar un hostíng gratuito en http://www.hostinger.es, lo llamarás

nuevocomercio.
1. Sigue los pasos para la creación.

(Continúa] ___/
 UNIDAD V/ W
CASO PRÁCTICO 7

(Continuación]
2. Una vez creado, recibirás un mensaje en el e-mail que has 3. Luego activamos la cuenta y elegimos Gratis:
facilitado.

^ostine*- Nueva Cuenta de Hosting

Oi Construir SHjO'

ce stfrcttorw d* Hpjtinf
ríUjr ^ O É?
cacera
Grats Prem um Errprejaria!

33 Gjr.* Dí^ro!
0,00 £ EW 2,41 € rm í 5,63 € mm
Cu**** * luí
jrr.pos tefrí *• IQO^ikAntfxnMliAntfi ‘ tnn<H Oro» U^SQl
» ;tnn^p«NV>Ml

<é / <* Scrtpu

ft«orn*ndarn # K»o 0* po«v>0 Cr«K‘ / « Corree.
oi *««*» SS* G.V*|>*io

Fig. 4.40.

4. Configúralo con el subdominio y la contraseña 5. Y ya tienes tu hosting:

| ----
^eȒln
**r

- -H.
zxzz:-

— caí 1
Fig. 4.41. Proceso de descarga.
Fig. 4.42. Resultado final.

CASO PRÁCTICO 8

Sube archivos al hosting ^^ostlnger

nuevocomercio2. Una vez hayan subido
1. Sí accedes a Por favor imcia sesión los archivos, estos se
na
http://cpanel.hostínger. es/, se te muestran así:
solicitará el correo electrónico y la
contraseña con la que configuraste
la cuenta..
Fig. 4.43. Al entraren ‘w*,> ~r " " podrás
Archivos, ,, d* a JL °
acceder al Administrador desoc-v**
archivos
2. Elige el idioma y ZL . &e j¡
¿ftlcsti Aiin.' üO AíCftWus
sube los archivos. namr

JL Q% B rf ;_é_
*B• *
o u -• ü o |
^.8k•■ JL i
Fig. 4.44.
Administrador de Fig. 4.45. Archivos.
archivos.

ACTIVIDADES
4.Crea en Hostinger www.hostinger.es un hosting gratuito que lleve por nombre la inicial de tu nombre y tu primer apellido.

j
 UNIDAD V/ W
CASO PRÁCTICO 7

5. Accede a http://cpanel.hostinger. es y, tras entrar con tu correo y contraseña, sube a tu hosting de Hostinger un
archivo HTML que guardes en el disco duro del ordenador.

j
5.Publicación de páginas web vía FTP UNIDAD

El protocolo FTP (File Transfer Protocol, protocolo de transferencia de archivos] sirve para
enviar y descargar archivos entre un cliente y un servidor, siendo una forma rápida de
transferir archivos entre dos ordenadores que estén comunicados.
Un FTP es tanto el protocolo mediante el que se transmiten archivos en Internet, como la
aplicación que permite la comunicación entre el usuario y el servidor. Existen programas
para realizar estas funciones, como FileZilla (Fig. 4.46), Cute FTP y Ws FTP.
Lo normal suele ser que una vez diseñada la página web en el disco duro del ordenador del
diseñador, este la envíe al servidor web junto con los archivos de referencia (imágenes,
sonidos, etc.).

La subida de archivos al servidor se puede realizar por medio de un programa FTP,

efectuándose de modo autentificado (por medio de un nombre de usuario y contraseña),
debiendo obtener los siguientes datos del administrador del servidor:

Dirección del URL del servidor FTP. ftp.dominio.com

servidor FTP

Usuario y Datos de la cuenta Usuario: usuario@dominio.com

contraseña que es necesario
Contraseña: al menos debe tener 6 caracteres de
proporcionar para
números y letras combinados.
realizar una subida
autentificada.

Dirección del URL del servidor web http://www.dominio.com

servidor HTTP que permitirá
acceder a las pági-
nas usando el na-
vegador.

Tabla 4.8. Datos del servidor FTP.

Para obtener la entrada desde un programa FTP cliente se necesita un nombre de usuario
y una contraseña que garantice cierta seguridad en el momento de acceder a los ficheros
ubicados en el servidor.
La mayoría de los servidores publican mediante FTP, y una minoría con http. La publicación
es sencilla, el sitio ftp no es más que una carpeta, y lo que se hace es copiar los archivos
desde la carpeta del ordenador y pegarlos en la carpeta del sitio ftp, como si fueran dos
carpetas del ordenador, parando y reanudando cuando se desee.

5.1Filezilla
Es una aplicación gratuita para la transferencia de archivos por FTP y es tanto un programa
cliente de FTP, con el que se podrá conectar con otros servidores para descargar o subir
ficheros, como un servidor de FTP, para que otras personas puedan conectarse y descargar
o subir archivos.
No hay que confundir Filezilla con Filezilla Server, este último es tanto un programa cliente
de FTP, con el que podremos conectarnos con otros servidores para descargar o subir
ficheros, como un servidor de FTP, para que otras personas puedan conectarse a nuestro
PC y descargar o subir archivos a nuestra máquina.
En la pantalla de Filezilla se rellenan los datos de servidor, nombre de usuario y contraseña.
Ahora se accede al sitio FTP, como se haría para acceder a cualquier otra carpeta del disco
duro o en red, se pueden abrir archivos o copiar y pegar archivos de otros lugares.
La pantalla de Filezilla se compone de: del directorio actual en el sistema local.
0 /T\ File?
(T)Menú: muestra todos los comandos de la aplicación disponibles. Archivo V.^ón Ver Transferencia Ser

(2) Barra de herramientas: desde la que se realizan las operaciones

más habituales.
S e r v i d o r ^ — N o m b r e de

(3) Barra de conexiones rápidas: permite introducir los parámetros de r (4 )

conexión básicos.
Sitio local: | \ ✓ —s
(4) Panel de registro de mensajes: aparecen todos los mensajes y co- ci A Este equipo (5

mandos intercambiados con el servidor FTP. ¿ ^ 0:

é. ¡U O (Acer) —

(5) Explorador local de archivo: permite visualizar el árbol de directo- Nombre de ar~ Tamaño- Tipo de are-
rios del sistema local donde está el cliente FTP. seo local Di jeo extrae Unidadde-

(ó) Explorador remoto de archivos: permite visualizar el árbol de di- 3 directorios

rectorios del sistema remoto donde se conecta el cliente FTP.

(7) Lista local de archivos: proporciona la lista de ficheros y carpetas
Servidor/Archivo local Direc- Archivo r

{§) Lista remota de archivos: muestra la lista de ficheros y directorios del

directorio actual en el sistema remoto. Archivos en cola Transferencias fallida

(9) Panel de cola de transferencia: ofrece en tiempo real el estado de cada transferencia activa o en cola.
Fig. 4.46. Pantalla de F

CASO PRÁCTICO 9
Ahora, subirás a tu cuenta de hosting un archivo con Filezilla. Para ello, primero abre Filezilla y, a
continuación:

1. Escribe el nombre del host FTP, el usuario FTP y la contra- 2. Haz clic con el botón derecho en el
archivo y súbelo.
seña que recibiste en el e-mail de activación de Hostinger, 0 u7l0360l00@ftpsirureta.esy es - FileZ>í!a — bÉÜÍB a

y pulsa en Conexión rápida.

Archivo Edición Ve* Transferencia Servidor Marcadores Ayuda
i'.‘ - F" 1 P ; ,1 P* A
0 u710360100igftpsirureta.es/cs - FHeZfíla Servidor ftp-Siruret*.esy.«* Nombre de usuario: u7103$0100 Contraseña: Puerto: Conexión
Arctwo Edición Vef Transferencia Servidor Marcares rápida
[slado Sernoor no seguro, no soporta TT? sobre RS. a Estado Conectado
Ayuda 1,1 - ■* ° *• *> Estado Recuperando e! listado de» directono- Estado Oirectoiy listing of 7puol*cvMml4
Servidor. ftp.SirufcMxsy.ei Nomprede usuario: u710360t00 ! Contrasete ••«•*•••« successfut
EjUdo. Servidor tvo seguro, no soporta FTP sobre US.
Estado: Conectado
,Eítadot Recuperando ei listado detditedoríoL- Sitio «ocal: | CA0sers\SANTlA60\0owrtfo«)j\ v Sitio remoto: | /pub<<_htmt v
Estado Dítectory f istrng of ypublicJAmr successte ék ¡ Documents a >* Oo^nloads 2 f
* t. unidad 3 H ¿3 Üropbox v t* i- ptiWiC.html
■ Este; equipo
¿J H(Acer)
■fe
ijl .“hombre de ar_ Tomafto - Tipo tíeaíc_ Todifk^ Nombre- T*moflo_ Tipo de _ Ultima mod_
e_ TamaiSo- T.pod Última 43201S-12we_ 17920 . A 14 Permisos Pr 1
Microsoft E~ 11/t2/3 12^ 1 Guara.- Carpeta _ 03/02/2015- 07SS ^ l tmb
C*rpeta_ 03/02/201S- 07SS Carpeta- 03/02/2015- 0777 Carpeta _ 02/02/2015- 14 12^.
íamafto- Tipa de 0755 1* AAadir^rclwos a la cola Edición 1517- v Carpeta _ 03/02/2015- 0777 T L Carpeta _
are. 02/02/20*5.. 0755 V-
1 ardvvo w* ^ ^
3 directorios 3 directorios 3 directorios
DisCoex
íraJ- Servidor/Archivo local 0¡rec_ Aicmv© remoto TamaAo Pnon_. F.xtado
UrvdAd Se*rfdor/ A< Orate directory and enter Tamafto fVion- Estado
de - »t Actualizar
------ Renombrar
Transferencias satisfactoria:
S Cola: vacía
1
Trartsíerenoaífai
.J
Fig. 4.47. Cómo conectar via FTP. Fig. 4.48. Subirán archivo.
- Q. EE9ZE
3. Finalmente, comprueba en el hosting :: m te © m m
que sí se haya subido. PiartüiasoeS^tos
Pro^'ooc'-wf
0.’: THM
petf:-í.>\
S*tx)
Administrador de Archivos
Uo

» Archivos EJ Cop-a'/ ¡Je B éb A

m
J
xjk*r»dad
CoeT’tósí-rP

FTP

AtfTy obrador dC

Rej.«ro de frrereí

a Bases De Datos

Fig. 4.49. Comprobación final en el Administrador

de archivos.
V
----------------------------------------------------------------------------------------------------------------
 UNIDAD

SÍNTESIS
Tipos de estructuras

Estructurar una página web corporativa

Clasificación de
las páginas web

Historia de HTML

Evolución de
HTML

Lenguaje HTML

Crear una página web

Mantenimiento Notepad++
de una página
web

Creación de páginas web

Características de los
servidores
Elección del servidor para alojar páginas web
Tipos de alojamiento web

N
Publicación de páginas web vía FTP ----->í Filezilla
VJ
V
J
COMPRUEBA TU APRENDIZAJE
Redactar sentencias en lenguaje de etiquetas de
hipertexto (HTML).
1. ¿Cómo se añade un elemento externo a una web por
medio de HTML?
2. ¿Qué es un script?
3. ¿Cuál es la principal ventaja del editor Kompozer?
4. ¿Qué son los tags?
Utilizar programas comerciales para crear los
ficheros que componen las páginas web.
5. ¿Qué nombre tiene el primer estándar oficial del
lenguaje HTML?
6. ¿Qué crees que debes hacer si quieres modificar un
archivo en un servidor?
7. En una página dinámica, ¿quién se encarga de
administrar y publicar el contenido?
8. ¿Cómo se clasifican las páginas web?
9. En un lenguaje HTML, ¿qué describen las etiquetas?
10.¿Qué es un editor web?
</script>
< script type=" t ext/java se r i pt " >
//<!—
var _gaq _gaq || []; document.observe('dom:loaded', functioní)
í . gaq.push(['_setAccount', 'UA-86235-1']);
Registrar la dirección de páginas web con dominio
propio o con alojamiento gratuito.
11. ¿Para qué empresas son ideales las páginas estáticas?
12. ¿Cuál es la diferencia entre los tipos de alojamiento?
13. ¿Qué desventajas tiene un hosting gratuito?
14. ¿Qué entiendes por tasa de transferencia mensual?
15. En un blog, ¿quién realiza las actualizaciones para
corregir fallos de seguridad?
16. ¿Qué ventajas tiene un hosting VPS?
17. ¿Por qué crees que las páginas estáticas no tienen
cambios frecuentes?
18. ¿Cómo definirías un hosting?
19. Cita uno de los motivos para mantener una web
actualizada.
Enviar los ficheros web creados al servidor de
Internet mediante programas especializados en esta
tarea.
20. ¿Para qué sirve el protocolo FTP?
21. ¿Qué se requiere para el acceso a través de FTP cliente?
22. ¿Qué permite hacer la aplicación Filezilla?
21
 (functionO {
var ga = document,createElement('script'); ga.typ^ =
'text/jav ga.src = ('https;' == document.location.protocol
7uhttps://ss var g =
document.getElementsByTagName('script' ;;rOJ; g.par })();

var IpLanguage = 'english'; var IpUnit

= '¡stock'; var IpLoginFlag = 'O';
IpLoglnFlag = ’T;
var IpVisitorID = '4766120';
var IpMemberName = 'buchachon';
var IpMemberFirstName = 'Buchachon';
var IpMemberLastName = 'Petthanya';

_gaq.push([' setDomainName',
'.¡stockphoto.com']);
_gaq.push(['_setAllowLinker', truel);
_gaq.push(['_setAllowHash', false]);
_gaq.push(['_setVar','logged-¡n']);
_gaq.push(['_trackPagevíew']);
 4 «la
UNIDAD. u

í 3RÁCTICA FINAL

> pro-

s? Eres el propietario del comercio Iluminación Miguel, situado en la comunidad autónoma de Madrid, y quieres tener una página la calle
? Meseta 12 de Madrid, dedicado a la venta de lámparas en en Internet, pero sin gastar mucho dinero.

Los artículos que comercializas son:

:orre- LÁMPARAS DE SALÓN LÁMPARAS DE HABITACIÓN

O CEO
. Techo clásica halógena • juvenil
De pie Mesit Para realizar esta práctica
cam urbano a
tienes que descargar desde el
-
CEO las cuatro imágenes de
lámparas.
ictua-

ernet

•nte?

Cuestiones
1. Seleccionar un tipo de servidor y de aloja-
miento web.
2. Diseñar con Notepad++ una página web.
3. Crear una imagen con Gimp.
Pautas para resolver la práctica
• Para seleccionar el tipo de servidor debes
tener en cuenta el tipo de comercio y las
limitaciones económicas.
• La web diseñada por Notepad++ tendrá:
- El nombre de la empresa.
- Las imágenes de los artículos y sus títulos
(para que al acercar el ratón aparezca ese tí-
tulo).
- Un enlace a la web: www.leroymerlin.es
• La imagen Gimp debe contener un salón con
cuatro lámparas. Encima de cada una de ellas
aparecerá su nombre (utiliza para ello el
botón Texto).

23