Cmo se hace el

mantenimiento de
una pgina web?
En esta unidad

APRENDERAS A
Redactar sentencias en lenguaje de etiquetas de
hipertexto (HTML).
Utilizar programas comerciales para crear los
ficheros que componen las pginas web.
Registrar la direccin de pginas web con dominio
propio o con alojamiento gratuito.

Enviar los ficheros web creados al servidor de

Internet mediante programas especializados en
esta tarea.
Incluir en la web enlaces de inters, capaces de
generar trfico orientado e interesado en lo que se
ofrece.

ESTUDIARS
La estructura de una pgina web corporativa.
El lenguaje HTML.
La creacin de pginas web con los editores web
ms usuales.
La eleccin del servidor para alojar pginas web. La
publicacin de pginas web va FTP.

Y SERS CAPAZ DE
Realizar el mantenimiento de una pgina web
corporativa, la tienda electrnica y el catlogo on-
line, utilizando aplicaciones informticas
y lenguajes especficos.
 1. Estructurar una pgina web UNIDA
D

Una vez planificada y creada la web, para conseguir buenos resultados hay que
renovarla, corregir errores y mantener el sitio vivo y actualizado, introduciendo
VOCABULARIO
mejoras tanto en el diseo como en la navegacin y las herramientas. Enlace o link. Consiste en un texto
Hay dos razones fundamentales para actualizar con frecuencia la web: o en una imagen de un sitio web
sobre el que un usuario puede
Ayuda a fdelzar las visitas. pinchar para acceder o conectar
Ayuda a mantener el posicionamiento en los buscadores. con otro documento, generalmente
El problema de las pginas es que sean capaces de aportar un contenido adecuado y otra pgina web.
de valor que tambin sea original y nico; adems, segn vaya creciendo la web, hay
que aadir herramientas para facilitar el trabajo y el uso a los visitantes. En el caso de
que haya enlaces web vacos habr que suprimirlos o actualizarlos, ya que no llevan a
ningn sitio; esta revisin de enlaces debe ser continua ya que estos enlaces vacos
son muy molestos para los usuarios. @ WEB
Incluir utilidades, como fotos, un buscador interno, formularios, etc., tambin aumenta
En esta direccin de Internet
el valor de la web.
puedes escanear tu pgina web en
Tambin es conveniente incluir una pgina de contacto para que los visitantes puedan busca de enlaces que no fun-
enviar mensajes si lo ven oportuno para informar acerca de los errores que han visto o cionan:
para sugerir elementos que les gustara encontrar en la web. http://www.lawebera.es/recurso
s/
herramentas/enlaces_rotos.php
1.1. Tipos de estructuras
Una pgina web puede tener diferentes estructuras, veamos las principales (Tabla 4.1):
http://www.gencat.net/di
Desde la pgina principal ari
o raz se accede al resto,
Estructura que depende de la
jerrquica o de principal. Est estruc-
rbol turada en niveles y sub-
niveles que enlazan las
pginas.
http://www.formate-gratis.es/cursos-gratis.html
A partir de la pgina de
ESCJALA CATEGORA OE

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

http://es.wikipeda.org/wiki/Wkipedia:Portada
9-- .....
Las pginas van enlaza-
Estructur
das entre s formando una

a en red
red.

-
Tabla 4.1. Tipos de estructura de una pgina web.

ACTIVIDADES1. Comprueba qu estructura tienen las cinco pginas web que ms

visitas.
 1.2. Clasificacin de las pginas web
ABC VOCABULARIO
Las pginas web se clasifican en estticas o dinmicas segn su diseo y estructura.
Backup. Copia total o parcial de
Pginas estticas
datos importantes.
Una pgina web esttica es una pgina con contenidos fijos establecidos por el
Banner. Formato publicitario que se diseador y se compone de varios ficheros que no tienen cambios frecuentes.
utiliza en Internet, insertando una
Los contenidos pueden incluir elementos animados como gifs, banners, vdeos y otros
pieza publicitaria.
componentes multimedia.
GIF (Graphics Interchange Format /
Las pginas web estticas son esencialmente informativas y enfocadas a mostrar una
Formato de Intercambio de
informacin permanente, en ellas el usuario obtiene informacin sin poder interactuar
Grficos). Formato grfico utilizado
con la pgina web visitada.
en Internet para imgenes y
animaciones. Estas pginas son una opcin para aquellos sitios web que ofrecen una descripcin
general de sus actividades: como quines somos, dnde estamos, qu servicios o
Hosting o alojamiento web. Es
productos ofrecemos, etc.; y son ideales para las empresas o particulares que solo
el servicio que provee a los usua-
desean informar acerca de sus productos o servicios.
rios de un sistema para poder
almacenar informacin, imgenes, Pginas dinmicas
vdeo o cualquier contenido Son pginas que sufren cambios frecuentes de contenido con un funcionamiento
accesible va web. basado en plataformas gestionadas por usuarios definidos en el sitio, que son los
Sitio web. Conjunto de pginas web encargados de administrar y publicar el contenido. Un ejemplo de estas plataformas es
relacionadas entre s y comunes a WordPress (Fig. 4.1).
un dominio de Internet o a un
subdominio en la World Wide Web WORDPRESS.ORG Espaol
(www) en Internet.
Foros de soporte Gua de traductores Colabora Contacto

Bienvenida! Bienvenido!
Bienvenid a WordPress Espaa!

WordPress es una avanzada plataforma semntica de publicacin personal orientada a la esttica, los estndares web y la
usabilidad. WordPress es libre y, al mismo tiempo, gratuito.

Dicho de forma ms sencilla, WordPress es el sistema que utilizas cuando deseas trabajar con tu herramienta de publicacin en
lugar de pelearte con ella.

Descargar Descargar WordPress 4.1

.Zip - 6.8 MB

Aqu puedes descargar la versin completa de WordPress en espaol de Espaa. Para instalarlo, Descargar .tar.gz 6.3 MB sigue las
instrucciones que encontrars un poco ms abajo.
Ms opciones de descarga
Tambin, si lo deseas, puedes descargar el paquete completo y usar solo el archivo de la traduccin sobre una
Otros formatos de archivo
instalacin en ingls. Para ello encontrars el fichero 'es_ES.no' que debers subir a la carpeta '/wp- Versiones anteriores
content/languages/' y, posteriormente, comprobar que en el fichero'wp-config.php' de la carpeta raz Versiones Beta & RC de tu instalacin el
siguiente valor est definido

Fig. 4.1. Pgina principal de WordPress, https://es.wordpress.org

La informacin presentada se genera a partir de una peticin del usuario de la pgina,

y aparece inmediatamente despus de una solicitud hecha por el usuario.
Este tipo de pgina permite almacenar, hacer actualizaciones de la informacin
contenida en la misma y tambin modificaciones dinmicas de la estructura y del
diseo por parte del propietario.
Las plataformas se deben actualizar para corregir fallos de seguridad, no solo su
estructura bsica, sino tambin 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 hostng no hay que descuidar el contenido,
pudiendo realizar backups de los artculos que se vayan a mostrar e incluso de los
comentarios.
Tambin es necesario hacer backups de la estructura de la pgina para asegurarse de
poder volver a montar la web con las actualizaciones necesarias, as, al sufrir un
posible fallo en la actualizacin de la plataforma o en alguno de los plugins, es posible
recuperar la situacin anterior al mismo.
 4 lilil
Veamos algunos ejemplos de pginas web dinmicas (Tabla UNIDAD
-o-Jo4

4.2): Portal
Es una pgina web con una pgina de presentacin
desde la que se accede al resto de servicios. Tiene
acceso a un correo electrnico, buscadores, foros,
etc.
Tienda virtual
Estas pginas suelen actualizar su catlogo de
productos con asiduidad. Tienen un diseo
atractivo y funcional.
Weblogs y Bitcoras
Yahoo https://es.yahoo.com
El autor suele actualizar los contenidos y los
usuarios aaden comentarios.

Gica www.perfumesgilca.es

Bitcoras.com www.bitacoras.com

Tabla 4.2. Ejemplos de pginas web dinmicas.

Cuando se crean
pginas dinmicas se
utilizan lenguajes de
programacin, que
aportan muchsima
interaccin con el
usuario y tambin una
gran capacidad de
proceso para generar
contenido. Los
lenguajes ms
utilizados son (Tabla
4.3):

8
7
 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 pginas web, permite el acceso a bases de
datos.
servidor JSP (Java Server Pages). Desarrollado por Sun Microsystem para crear pginas web dinmicas y aplicaciones
para cualquier dispositivo.

HTML. Indica al navegador dnde colocar cada texto, cada imagen o cada vdeo y la forma que tendrn estos
al ser colocados en la pgina.

JavaScript. Es utilizado para crear pequeos programas encargados de realizar acciones dentro del mbito de
una pgina web.
Del lado del Java Applets. Se trata de pequeos programas hechos en java que se transfieren con las pginas web y que el
cliente navegador ejecuta en el espacio de la pgina.
Flash. Es un programa para crear efectos especiales en pginas web.

CSS. Permite Incluir mrgenes, tipos de letra, fondos, colores... Incluso podemos definir nuestros propios
estilos en un archivo externo a nuestras pginas; as, si en algn momento queremos cambiar alguno de
ellos, automticamente se nos actualizarn todas las pginas vinculadas de nuestro sitio. CSS son las siglas
de Cascading Style Sheets, en espaol Hojas de estilo en cascada.
Tabla 4.3. Lenguajes de programacin ms utilizados.

8
8
 CASO PRCTICO
1
Vas a crear y disear un blog en Wordpress. Para ello vas El segundo con el ttulo GRANDES DESCUENTOS y el
a dar de alta una cuenta en Wordpress.com para crear un texto: A partir del da 24 ofrecemos a nuestros clientes
blog llamado NUEVO COMERCIO, de tema Sketch, que va descuentos en zapatos de temporada de grandes
a contener dos artculos: marcas. En este artculo insertaremos una imagen de
* El primero con el ttulo NUEVA TIENDA y el texto: zapatos.
Nuestro comercio lleva vendiendo zapatos desde 1983 Colocars tambin en el blog tres widget: Calendario,
en la calle Nervin 456 de Sevilla. Con esta tienda on- Estadsticas del blog y Search (Buscador).
line nuestros clientes tienen la posibilidad de ver y
comprar los productos en Internet.

Solucin:
Para darte de alta en el servicio accede a www.wordpress.com, donde se te pedir un nombre para el blog, un
correo electrnico y una contrasea. Elige el tema Sketch y personalizar. Luego utiliza la opcin de compartir con
Twitter y Facebook.

Fig. 4.2. Nombre y direccin blog. Fig. 4.3. Correo electrnico y contrasea. Fig. 4.4. Titulo delblog.

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

Una vez dado de alta el servicio, recibirs un mensaje de confirmacin en tu correo electrnico para poder publicar.
Para insertar una imagen:
1. Crea los artculos

2. Arrastra o selecciona el archivo correspondiente.

Fig. 4.7. Primer artculo y segundo articulo.

Fig. 4.8. Insertar objeto. (Contina!

V
 /Continuacin]
3. Busca la imagen. 4. Primero sube la imagen y luego la publicas.
ItnwUt vbjclu Insertar objeto

fr&srjater.. *utf -Jrctwc-. 9itA90K* MtOT'WU

GKANOES OtSOJEtTOS
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

" _

Fig. 4.9. Seleccin 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 visualzalo.
f(juejo* -'^Q. . * ~ :: : r. - m -
" V * 7~tJ7 ~ -_gjm
4- C rt J A*-* HRps.Vnrtlp*e>v<m

m
(:< AL J 7> 11 CV!Q f; O Q S|

O GRANDES DESCUENTOS

o NUEVA TIENDA

Fig. 4.11.
Fig. 4.12. Publicacin de un comentario.
Para insertar un widget:
jg Vqnofiiirm1 ~ > 'w v < M t - .* :*Q * . . . Resultado final:
y NUEVOCOMERCIQ2

i _f t T
GRANES DtSCUF NTOS
j3fcpnrjn**m$. JatvV*: %#*tq '5J *C9<H- E3

(4- QM*dcjr*r*n A_D>..W

C#~>90hat

Mi
NUEV0C0VIERCI02

NUEVA VKNOA

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

ACTIVIDADES
 Fig. 4.13. Fig. 4.14. Aspecto del Blog al terminar.
Widgets.
2. A qu categora pertenecen las siguientes pginas A
web?
aj El Corte Ingls.
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 dinmicas diferencia cin, LLL, TIC, enseanza y aprendizaje).
entre
portal, tienda virtual y weblogs: -J
V___
 ABC VOCABULARIO 2. Lenguaje HTML
El lenguaje HTML es un
Tag o etiqueta. Es una marca que lenguaje de marcas de
delimita una regin en los hipertexto (Hypertext
lenguajes basados en XTML. Markup Languaje) que
se refiere al lenguaje de
Script. Programas usualmente
marcado para la
pequeos que ejecutan general-
elaboracin de pginas
mente tareas muy especficas.
web.

Est constituido por una serie de

etiquetas o tags que permiten
definir la estructura de la pgina
y su contenido, ya sea este texto
o imgenes. Se puede escribir en
cualquier editor bsico, como el
Bloc de notas (Fig. 4.15) de
Windows o Kate de Linux (Fig.
4.16), y el archivo generado debe
guardarse con la extensin .html.
aUTUafjiJ< (Error t Ct>*9a p'OJut>M)
ai
-^
troco .CuAo Ot 4- CGfi L' kM?*fitor.org G * =
A . - {** Ruuy3fancoWitfm** , *********** dt*\ 0 trv4*m3n*nl< J MUtantM *

Jl 5**"> Mwt * tivC f tvAiS M
**; 0 H*4w*i>rn
rM tom . turf *Uru C3
<Mrv*K.com |
UW M. id* vtow Proj<t Bookmarkt Sttttom TaoH SitUrtgt Ht.p Q
RMMUI t Untitkd O umitkd (3) o Untitld(2) O >. v

u
** Untrtfd

Fig. 4.15. Bloc de notas de Windows. ESESEMB

r UfX]d(2)

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

4% S*ar<h *ndRplaet

rj i

Bloc de notas de | Kate de linux

Fig. windows
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 presentacin de la pgina
depende del navegador o
browser utilizado, que es el que
interpreta los tags; por eso el
mismo documento ofrece un
resultado diferente en la
pantalla segn 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 pgina y su apariencia.
Para incorporar un elemento
externo, este no se inserta en la
pgina sino que se aade una
referencia a su ubicacin
mediante texto y el navegador

9
0
 une los elementos para
visualizar la pgina.

2.1. Historia de HTML

El origen de HTML se remonta a
1980, cuando el fsico Tim
Berners-Lee, que trabajaba en la
Organizacin Europea para la
Investigacin Nuclear (CERN),
propuso un nuevo sistema de
hipertexto para compartir
documentos. Estos sistemas
haban sido desarrollados aos
antes, y, en el mbito de la
informtica, el hipertexto
permita que los usuarios
accedieran a la informacin
relacionada con los documentos
electrnicos 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 descripcin 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 estndar,
consiguindose avances
importantes, como definir las
etiquetas para imgenes, las
tablas y los formularios; pero
ninguna de las dos propuestas
realizadas como estndar
(llamadas HTML y HTML+) se
convirtieron de forma oficial en
un estndar.
En 1995, el IETF organiza un
grupo de trabajo de HTML,
despus del cual se consigui
publicar, en septiembre de ese
ao, el estndar conocido como
HTML 2.0, siendo, a pesar del
nombre de su versin 2.0, el
primer estndar oficial del
lenguaje HTML.

9
1
 UNIDAD
2.2. Evolucin de HTML

En la Tabla 4.4 se recoge la evolucin de HTML.

HTML 2.0 En 1995 se publica el estndar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estndar
oficial de HTML, es decir, el HTML 1.0 no existi como estndar.
HTML 3.2 La versin HTML 3.2 se public en 1997 y es la primera recomendacin de HTML publicada por el
W3C (World Wide Web Consortium). Esta revisin incorpor los ltimos avances de las pginas
web desarrolladas hasta 1996, como applets de Java y texto que fuye alrededor de las imgenes.
HTML 4.01 HTML 4.01 se public en diciembre de 1999. Desde esta publicacin, el W3C se centr en el
desarrollo del estndar XHTML.

HTML 5.0, HTML 5.1 y HTML El consorcio internacional W3C marc las siguientes fechas para liberacin de los estndares de
5.2 especificacin: 2014/2015 para HTML 5.0, 2016 par a HTML 5.1 y 2019 para HTML 5.2
Tabla 4.4. Evolucin de HTML.

2.3. Crear una pgina 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
maysculas o en minsculas, el signo que cierra la etiqueta se indica con la barra /.
Fig. 4.17. Pgina web http://www.elpais.com en formato HTML.
<HTML>, </HTML>. Indica que el documento es una pgina web escrita en HTML Se puede utilizar el atributo lang="es" para
indicar el idioma de la pgina.
<HEAD> , </HEAD>: cabecera o encabezado de la pgina. Incluye las definiciones generales que afectarn a todo el
documento.
<TITLE> , </TITLE>: ttulo. Especifica el ttulo de la pgina que van a mostrar los navegadores, los marcadores en favoritos y
los buscadores.
<BODY> ,</BODY>: cuerpo. Comprende el contenido de la pgina.
Para texto y formatear:
- <p>, </p>: etiqueta utilizada para contener un prrafo de texto.
- <strong>, </strong>: el texto comprendido entre estas dos etiquetas aparecer en negrita, tambin 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, tambin se puede utilizar <i>, </i>.
El siguiente tag es el ms importante, ya que permite enlazar unas pginas con otras:
<a href:direccin webx/a>
Se pueden introducir comentarios tiles para el diseador de la pgina, pero que no se enseen en el navegador, con la
etiqueta <\-COMENTARIO->.
 2.4. Notepad++
Fig. 4.18. Logo Notepad++ (Fig. 4.18) es un editor de texto y de cdigo fuente libre con soporte para
de Notepad++. varios lenguajes de programacin.

CASO PRCTICO 2 Descrgalo gratuitamente desde la pgina web http://notepad-plus-plus.org/ e instala

Notepad++. Solucin:
1. Dirgete 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 instalacin. "ir-" r,v^ / -

jbi S-

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

3. Al terminar vers el programa instalado y cmo se ve. 1.

2. Escribe el contenido del comentario y visualzalo.
Haz clic en Comentario. *
J J A ct OiS.undAd 4J ju corwftkto T/rtoyjWbrt
- 4
Ct 2CiS_unidad 4_T> corrido \7 novtaftbrt Microsoft Word _
w O
A.^ M S - 7 - il i AaBbC AaBbC
O J MtbCt A*fcbCcDLoffcfci . T*
C\ProgtwiFite*Qctt;\Ntt*pd*\<hingelog *Nottfrtd**
V
* <8listilt6ndeMoiWKl**v$.69
* A/ify |<HX 6uK*f Vi Cotifttttf*
,BQ ..'**;Pil'tal* - 3SIE 1 ffinja !
CtWtfcjrKfcftM*trt> jttvt*f Ptuc WfiHM T
Completando el Asistente dea*v f*tur* *aa bag ti***:

'
^l^jj
~
* K a H- I >w
Instalacin de Notep<H+ v.6.9
*..* * MK> ROM: ** I
Iutttu, s
n* cccss*Bt ccwsir.il bug tfckt th :
Wfcenfc. cca Mil pyUibn pt*on 6r tunetioa Jfjuaioli
U*t.
i*k ewv* fc*ekge*tftf colear trfcn*p&r*r/t t
unctionU*t tv ftJitur*; *pfy **v tu* d*f*uit mWftO*
6 rntttd av Flx c&lcui piiint* tkc-cttz bQ Mtlt)
not woik
tistx
laduflcd pluaifcs:
1, DSjwUCtotc* vJ..12
5. .yppm 0,24.1
XppC*J>bxt *0.2,6
Eluda Hir.igtir ,o*8
CDR'rttl 3,&

Fig. 4.20. Proceso de instalacin. ... rj=n , Ma* Tool 1#

-

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

CASO PRACTICO3: Con Notepad++ vas a Solucin: dars el archivo con el nombre
nuevaweb y la extensin .html. Al finalizar
crear una pgina web que lleve como ttulo ejecutars el archivo con el navegador Chrome:
HOLA y que contenga el texto MI
PRIMERA PGINA. Guar-

Primero abre Notepad++ y, en un nuevo archivo, escribe en cada lnea las

instrucciones, al finalizar guarda el archivo con la extensin .html y ejectalo con
Chrome.
Instrucciones:
<html>
<body> <head>
<p>MI PRIMERA PGINA <title>HOLA</title> <strong>WEB</strong> </p>
</body> </head>
</html>
[Wi U O m J j Cl 01 Sjjr.'dAd - tomado 1? noviembre
UJ CAt^rogriYi
-a - j t (iniHaM.i \ i i >-rt>/irtUA t 7 v.nffl'M
rtw 2 - Ntepd* lAdtitinistrttor) ~ . o
(X&)\Nctfrpd**\ctiar>gelog -Noh2pd*tAdnunlsUator]^ l vSI| -n *
: . Artw tdftar fcxcr Vit Cc<lrtRt>6n ltriuir M.hto (jttvtar PhjQinA yeotama T
<M
/ M>] fcvjUf VUUCtxJ,T>A6WiCM.QurKJfrnMKro VtfrtWUi X ~j Ai
a _ /:a . .o at t a v * * aFji&iKt3H);!!a'is4 H- r.7^.
TXT ! , I j s^ts]
<h<3>
4 </h*4
<b<ufy>

<p>N LrO>B</6tc0ng>
</p>

reifesfA
jpt5S <
</txxiy>

/hmisj

X*\W<Kw*
UTMw/ofcOM I

f& a * 7 * * y g

Fig. 4.23. Abre Notepad++ y un archivo Nuevo Fig. 4.24. Escribe las instrucciones.

I j J t rtMijuiUiAi * s b Jf J Jl * CE 20lS.und*d 4J - comido \7 novitmbr* |"* -a

*ric*v 2 * Kcftpad* [Administrador)
4. r~ r u I Ccd.Tion LtAoV* C</t=frjrK6ft M<r<> l^cvttr fcugu*
VtttJ*
& > iB:a
Curdir torto
t i > O*OS*- Oocwm*tai v , mEVx
' Afcfir l cr{*U 0li , ^
lo~to il I OrgarhUf Ul*vacrpU
rfo*rt5bco iOftttftMdf
'T' (liiOf <}*( ST f .vOott* *
*""* f*U<1<
d.t> .4 OtcArpM ^ uneitwertoeortde con:**<}
J _ 6o*rd*______________
UfcttKWve
W W>f>Ua
t

kiirCM IM copia 2
tcmc_
MctxieUpk
GukrdttKXK
i! HK *>
&V6* IK
- CUriMCxJM
CtrwtnXx A On*Ofiv*
4 6fup6 **
b^*
\tr\ptimk thon,
): escrita fit** t-VK*f>0*,lO3
Abrtr KxK l*
*rcfy&* ri*fiW Tipa Ttfi* !Ci VCklvfc -
umpur Ittf* O* j
fcrthfvc* rK*nt OMUrtMpMtt Ccd6 Gu*ref l
Jfiftti; 119 twt I Ln.f C<X: S*( 0|0
ANSI

Fig. 4.25. Selecciona Archivo > Guardar como. Fig. 4.26. Selecciona la extensin .html
 - OI
U-) Sin tlulo -
P.nt C.\Usm\SANTlACOi>sldGp\nxivavit)h!ml Notf>id^ (Adrr^isUitorl
AftfWve Mittf 8at* VrtU CodiCCi6 Itfom Ccrtur*6i MKfO t. >]
n y^.A NVODQQ4- : u
YtfW**
1
*
CM
,
v CW [ C:*J< , oie . .a *%;* ^i ^ aai^ (jtdtt. Uuntlt w cwAa*SKti+y
Z1> fHvffix CttltA^SM?!

-------- lAltyp**r ) w ifcjritn if\ g Cwj*Art.SJ^R_]

\OOOOO ---*. r*!

lunch
iKmoi mM
S*tfi
Chr-M*
., _Atv>n
. int_
NOfUHWWrW
cnp! bn r **.* rnt) Gphph
A ^
O^SSJPPO* 'rAO. RSOM tiXtJVk <
<"/body>
!
GoogK
Srth
Cn*Jo*l Ah*rcl UKIW* Wrtopli
f.inlL
<M SwiCK
Modificar ja/Borw
lOMlCEFlE r m' t*M)
(orwxJo..
{COmnoAButmtt Cwtid
Lhngu9 C ttrt*
'cc4* sv* tb
CtMS<nia4*rJC*M) ^^
?
SWL4* r c>
MfcWOMtH
1^*8, r i ^ ;

7
nt a * T CfVfii
Fig. 4.28. Ejecuta en Chrome.
Fig. 4.27. Guarda el archivo.
 Generars una pgina web con Notep, con el ttulo Lavadoray que contenga la
imagen de este electrodomstico. Adems, aadirs al pie un enlace a la pgina
web de RTVE. Cuando termines, llama web2 al archivo, que llevar la extensin
.html, y brelo con Internet Explorer (IE).

Solucin: ii
AlC0>nm4<
Bc'nt 11
Primero descarga desde la web la imagen de una On*tf<!
IknguM * Ctt*
c
B
PA{Cof**Scnp
lavadora y gurdala en el escritorio con el nombre <*l (
Ifr't* p* f A' H9-' ***
t*t* t)
lavadora y con el formato .jpg. e

a
C
*
Abre Notepad++ y escribe las instrucciones: i
t

<html> i* MI -
t*qi
hf>Q SBSWT.
<head> C=J V WS*vi**fjr,
r,r*i)

<title> IMAGEN</title> 0
* Ventana ?

</head> S
t
y
M
<body> S

<p>IMAGEN EN LA WEB </p> ^
m
F
<mg src= "C:\Documents and >
w

Settings\Escritorio\lavadora.jpg" ttle=Lavadora> f

<a href=http://www.rtve.es
target="_blank">television</a> 1 !jr*S*-
VWPV8*UrpmrM>)
</body> _____Loatjitiai__. ,

</html>

Una vez que accedes a la web, al pasar el ratn por

encima de la imagen, podrs ver el ttulo, s pinchas en el c
t
t
enlace, se abrir la web de RTVE. )
.

1. Escribe las instrucciones y guarda

O
p
el archivo como html
o
j
(men Archivo>Guardar como). f
i

2. Ejectalo con Internet Explorer (IE).

f
n
m
o
j

Fig. 4.29. Pasos f

d
necesarios para )
3^2 j F oiVm louti* m Cl.toc - J9Q '<M.* C*)
U-'M
conseguir que, al fiibtioitcftt

3 Jyecutar... F5

acercar el ratn a la E3l! Launch in Firefox Ctrl f Alt *Shift*X

imagen, se vea el Launchin E Ctrl*Alt*Shift*l

1 Launch in Cbrome
Launch in Safari
Ctri+AIt+Shft+R
Ctrl*Aft*$hift*f
ttulo y, al hacer clic Get php hdp Alt+Fl

en el enlace, se abra Google Search

WiJdpeclia Search
Ait*f2
Alt+F3
la pgina web. ox*. jpg Open file Alt*F5
lAdtSfcf.M.*.*.' b) r-t rLtKxrt* V* C *rn) Open in another instante AltfF
Auiof o3(
r. * **
Send va Outlook Ctrl Alt tShift+O

C'itkttW 1
c.rri.'/n
. ,,CUAKEFR.E(\cn\*k*.ctfik)

- CASO PRCTICO 5 Adems, debes incluir la imagen de

una televisin (con el ttulo 500) y un
Vas a elaborar una pgina web con enlace con la palabra oferta que
Notepad++ que llevar por ttulo conducir a la pgina web
TELEVISIONES RAL. Mostrar el www.mediamarkt.es. AI finalizar el
texto GRANDES OFERTAS EN trabajo, guarda el archivo con el
TELEVISIONES (con los palabras en nombre TELEVISIN y ejectalo en
televisiones en negrita). Internet Explorer.

2. Ejecutar en Internet Explorer.

 * . * ' \ 'TlVsSlONESRAUl - . nmnm
C t ^TlAGO,MDfM^>nvf/Do<ummoi/TLEV!SiONS HTML
. coi]
*n S U M O 2 m B f a ; B n 0lHetei O- EcL. 0 He:kunarAA. Daa:ovoce_ t'oitocc'n IB. J H M d
j GRANDES OFERTAS IN TXLIVIMONXS
I

I ea

* .,j_. b *
4
|
Solucin:
1. Instrucciones.

Fig. 4.30. Cdigo HTML y resultado del mismo en el navegador.

 UNIDAD
3. Creacin de pginas web j

Un editor web es una aplicacin que permite crear, editar y guardar una pgina web.
Hay tres VOCABULARIO
categoras:
WYSIWYG (What You See Is What
Editores de texto. Permiten editar el cdigo fuente, un ejemplo es el bloc de notas de
You Get). Lo que ves es lo que
Windows, guardar el archivo con la extensin .html y abrirlo con un navegador.
obtienes. Al escribir se ve el
Editores de HTML. Funcionan igual que un editor de texto, pero tienen opciones ms resultado final.
avanzadas, como, por ejemplo, abrir y editar varios ficheros a la vez, colorear los
CSS. Lenguaje de hojas de estilos
cdigos de las pginas para facilitar su comprensin, soportar otros lenguajes de
creado para controlar el aspecto o
programacin con los que se puede llegar a trabajar en el desarrollo de pginas web,
presentacin de los documentos
etc. El archivo se puede enlazar con la direccin de una pgina web por medio del
electrnicos definidos con HTML y
botn Enlace (normalmente tiene forma de cadena).
XHTML.
Editores WYSIWYG. Permiten editar el cdigo fuente y a la vez ver cmo la pgina queda-
ra en un navegador* Adems, estos editores tienen opciones para realizar tareas
adicionales, como tablas o elementos animados. Igual que con los editores HTML, se
puede enlazar con una pgina web por medio del botn Enlace.
Los programas ms utilizados son (Tabla 4.5):

De Gratuitos
pago Dreamweaver WYSIWYG y su sencillez, tambin dispone de
Es una aplicacin destinada a la plantillas con pginas estndar
construccin, diseo y edicin de sitios, prediseadas. El primer paso es organizar
vdeos y aplicaciones web basados en los archivos, creando carpetas para incluir
estndares. en ellas las imgenes, los elementos
Kompozer multimedia, etc.; y el segundo, nombrar la
pgina principal como ndce.
Es un editor de fuente abierta,
su principal ventaja es su capacidad

------------
,----------------------------------------------------------------------------------------
T
]
y ------------------------------,

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

WebSite X5 Professional ^ Amaya

Es un programa gratuito con una
Permite crear pginas web de aspecto
doble funcin, editor web y
profesional gracias a su gran cantidad de
navegador, que permite generar
diseos y funciones.

http://www.websitex5.com/es/professionaI.html
 UNIDAD j
pginas en HTML y XHTML, hojas de estilo
CSS, y ofrece la posibilidad de imprimir
partes diferenciadas de una web.
 UNIDAD
j
Tabla 4.5. Programas ms utilizados en la creacin de pginas web.
 CASO PRCTICO
6
Con el editor web Kompozer vas a crear una pgina web, lneas de separa- Macarrones y
titulada RESTAURANTE MOLINER, que incluya una cin): filete de
relacin de los das de la semana y los mens para esos MENU SEMANAL merluza
das; crears enlaces internos desde los das que Martes Ensalada
aparecen al comienzo de la pgina hasta su men a) Domingo
correspondiente. Al final de la pgina aadirs un enlace b) Lunes y ternera
a la direccin www.elmundo.es. Cuando termines, dars
al archivo el nombre web Kompozer y hars clic en c) Martes Lunes Lentejas y
Navegar.
pollo
El texto contenido en la pgina ser el siguiente (ten en Domingo
cuenta que entre cada men diario debes dejar varias

Solucin:
i-HS. ZT

BBBH
Fig. 4.31. Abre Kompozer Fig. 4.32. Aade el Titulo

Fig. 4.34. Selecciona las palabras, agrega y coloca los enlaces nter- Fig. 4.35. Enlaza cada da del comienzo de la pgina con su da de nos
men.

1
5
 ' 3 *> A* B IV lili
y*: ' g| rHUSTA^UMlMcMt [ **
ii
0 n * u # 1 7 F2e rmate* 1
(SLoaei tnt.c<ko* el ledo
pr nlfrcc
Ub<K>n M rb<*
Intredut m 0rtCin
SlNUtn wtb. w ocd, un
1
tf rnfr [[dkin rwvid*.- J 1
, .Mml> .----... ________
s/:18 > >'12 *T. 1 1 1 J 1 *y* J
JS A^mrA
' ' fj - ' *
los clientes, y
MmmKji. O
MENT
SEMANAL A el servidor es
4. Eleccin del servidor para alojar pginas web el ordenador donde se
ejecuta el servidor HTTP.
4 IIINR
Hasta ahora hemos abierto las pginas creadas con el navegador desde el o'Jo1
UNIDAD
explorador de archivos. Pero nuestros clientes no estarn delante de nuestro
ordenador, que adems apagaremos cuando terminemos la jornada.
Un servidor es un ordenador conectado las 24 horas, que posee un disco duro con
. El
VOCABULARIO
Fig. 4.36. Sita el cursor donde ir el enlace a la web y crala. Fig. 4.37. Al finalizar, haz clic en Guardar y Navegar.
FTP (File
una gran capacidad y una velocidad alta para Internet. Cuando un usuario visita Transfer Protocol).
una web lo que hace es acceder a estos ordenadores, exactamente al que alberga Protocolo de transferencia
la web. de archivos.
Cuando un servidor ofrece un espacio para una pgina web deja ese espacio en un
disco duro para que se coloquen los archivos en su web. Para subir esos archivos
se suele usar un programa FTP.
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

4.1. Caractersticas de los servidores

Las caractersticas de los servidores son (Tabla 4.6):
 CASO PRCTICO
6
Alojamiento web Es el espacio que cede un servidor a los usuarios para poder alojar
Hosting (hosting)
Los proveedores informacin, imgenes,
de alojamiento Ventajas
vdeo
gratuito o cualquier contenido accesible va web.
CASO PRCTICO
normalmente 7 requieren poner sus propios
Archivos FTP Es aconsejable que permta Interesante para
subir o bajar realizar
archivos con pruebas
FTP. y aprender, adems permite
- --------------------------------------------------------------------------------------------------------------------
anuncios en el sitio alojado de forma mantener un entorno real a coste cero.
Publicidad
gratuita y tienenLoslimites muy grandes
servidores de incluyen publicidad en la web generada,
gratuitos
gratuito espacio y de trfico. Desventajas
entorpeciendo la navegacin. S el servidor es de pago no incluye
Direccin publicidad. Capacidad de proceso muy pequea, memoria baja y
Localizador uniforme de recursos (Uniform resource locator). Es una se-
(URL) limitaciones de los recursos de espacio en disco o de la
cuencia de caracteres que responden a un formato estndar y que
transferencia mensual.
permiten la clasificacin de recursos subidos a Internet para su
* Hosting Cuando un mismo servidor aloja a cientos Ventajas
descarga y utilizacin.
de sitios web de diferentes clientes. Este Se adapta muy bien a las necesidades de uso personal,
alojamiento
Tasa web tambin
de La tiene algunas
web ocupa lo que ocupan los archivos
profesional y del que la forman
pequeo negocio. (en Opcin kilobytes) muy econmica.
transferencia ms imgenes, msica, archivos que bajen los visitantes, etc.
compartido mensual
restricciones con Cuando
respectouna usuario Desventajas
web visita
qu se puede la pgina, el servidor donde est alojada
descarga todos los kilobytes
hacer exactamente, aunque estas no son Proveedores de los archivos que est
que apuran tanto visitando. el nmero de clientes y recursos
en ninguna manera Lostan servidores
importantesgratuitos
como que ofrecen una tasa de transferencia
acaban con servidores infradmensionados, de con problemas
en el gratuito. alrededor de 1 Gb, y los de pago mucho ms.
de lentitud y paradas de servicio.

Hosting VPS Consiste

Lenguajes
en poner a disposicin
Lenguajes del Ventajas
de lado servidor son aquellos lenguajes reconocidos,
(Virtual cliente un servidor exclusivo,
ejecutados e pero no de Posibilidad
interpretados por el propio servidor aylaque
de adaptarse se envan
demanda; alnecesita ampliar los
si se
Prvate mquina fsica sino de en
cliente mquina virtual,comprensible
un formato para l. Las
recursos, el proveedor puede pginas que seinmediatamente. Al
aumentarlos
con diferentes ejecutan
niveles endeel servidor
recursos pueden realizar accesos
no ser compartido, a bases
el servidor no de
se datos,
ve afectado por picos de
(potencia de procesador,
conexiones memoria,
en red yetc.),
otrasactividad
tareas para crear clientes.
de otros la pgina final que ver el
para que el cliente pueda
cliente. Muyelegir el que
utilizados para el desarrollo de pginas dinmicas son
Server) mejor se ajuste aASP
sus ynecesidades.
PHP . Desventajas
Panel de control Es un software que provee una interfaz grfica para la administracin
(cpanel) Mayor complejidad
de los servicios del servidor, permitiendo tcnica en latareas
realizar administracin
como del servidor solo
al alcance
administrar archivos, cuentas de personas
FTP, correos con buenos
electrnicos y basesconocimientos
de tcnicos.
datos. Aumento de precio.
Tabla 4.6. Caractersticas de los servidores.
Hosting Ofrecen un soporte integral que no se li- Ventajas
especializado/ mita a los servidores, sino que incluye el
Mejor funcionamiento de la aplicacin web (velocidad,
soporte tcnico para garantizar el estabilidad, seguridad...).
correcto funcionamiento de estas
gestionado aplicaciones. Desventajas
Aumento de precio.

Usa tecnologas propias de la nube repar- Ventajas

tiendo el servicio prestado entre varias Seguridad y gran fexibilidad para crecer fcilmente.
m
Cloud hosting quinas fsicas. Es tpica la tarificacin por Desventajas
consumo. Precio ms elevado que las opciones de hosting compartido.

Servidor Mquina fsica en las instalaciones del proveedor.

dedicado

Tabla 4. T. Tipos de alojamiento web.

4.2. Tipos de alojamiento web

La diferencia entre los tipos de alojamiento est en:
La
Fig. 4.38. Pasos para registrarte en Hostinger.
posibilidad
de disfrutar de una mquina (real o virtual) capaz de soportar la instalacin de un servidor

1
7

Vas a registrar un hostng gratuito en http://www.hostinger.es, lo llamars

nuevocomercio.
1. Sigue los pasos para la creacin.
 web o cualquier otro (servidor FTP, servidor SMTP, etc.) y si esa mquina es administrada por ti o por la empresa de
alojamiento.
* No disponer de una mquina, sino ser uno ms (un host virtual) en un servidor HTTP ges tionado por la empresa de
alojamiento web. En este caso el servicio puede ser gratuito (a cambio de incrustar publicidad).
^jj^ostin^er ......

Hosting Web Gratis 00

t.-HJdUu: JGti. 11 liu: 10SC1;. PHP,

MySQLr Ciodor de Sitios,
iFn F.'p.mcl y Sin Pul)l!cidjdf*

(Contina] ___/
 (Continuacin]
2. Una vez creado, recibirs un mensaje en el e-mail que has 3. Luego activamos la cuenta y elegimos Gratis:
facilitado.
^^ostingw xc
Grats Prem um Errprejaria!
0,00 EW 2,41 rm 5,63 mm
CgCpmtruir SHtO!
* f. P ytc * IQO^ikAntfxnMliAntfi tnn<H Oro U^SQl
;tnn^pNV>Ml

/ <* Scrtpu
e uto routdv n
ot JO0 **<)< # Ko 0* pov>0 CrK Corree.
FMP- / ** SS* G.V*|>*io
CD Gnar Dinero: ^ostine*- Nueva Cuenta de Hosting
NWCS
* tjs jccje rcArg Oi Construir SHjO'
1

Rccom*rtddmc*
P-U* ^ejtrC 2[ Of6*wdc< JH J :<
ce stfrcttorw d*
scwpt | Hpjtinf
ftKOrffttrtyi. rUjr ^ O ?
1 -ts> o iiv# cacera

Fig. 4.39. 33 Gjr.*

D^ro! Cu****
* lu jrr.pos
tefr

<
ftorn*ndar
noi
Fig. 4.40.

4. Configralo con el subdominio y la contrasea 5. Y ya tienes tu hosting:

| ---
^el
n**r

- -H.
zxzz

ca 1

CASO PRCTICO 8

Sube archivos y la ^^ostlnger

al hosting
Fig. 4.41. Proceso de descarga. nuevocomerci Por favor imcia sesin
o2. Fig.
na 4.42. Resultado final.
1. S accedes
a contrasea con la que
http://cpan configuraste la
el.hostng cuenta..
Fig. 4.43. Al entraren Archivos,w *,> ~r " d* a
podrs JL
er. es/, se
" ,, soc-v**
acceder al Administrador de archivos

2. Elige el idioma ZL . &e j

ftlcsti Aiin.' O ACftWus
y sube los namr

archivos. JL Q% B rf ;__
te
JL i
Fig. 4.44.
Administrador
de archivos.
U
solicitar n
el correo a * B *
electrnico o u - o |
^. 8k
v ,
e
z e
s
h t
a o
y s
a
n s
e
s
u m
b u
i e
d s
o t
r
l a
o n
s
a
a s
r
c :
h
i
v
o
s Fig. 4.45. 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.

5. Accede a http://cpanel.hostinger. es y, tras entrar con tu

correo y contrasea, sube a tu hosting de Hostinger un
archivo HTML que guardes en el disco duro del
ordenador.
5.Publicacin de pginas web va FTP
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
rpida de transferir archivos entre dos ordenadores que estn comunicados.
Un FTP es tanto el protocolo mediante el que se transmiten archivos en Internet, como
la aplicacin que permite la comunicacin 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 diseada la pgina web en el disco duro del
ordenador del diseador, este la enve al servidor web junto con los archivos de
referencia (imgenes, sonidos, etc.).

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

efectundose de modo autentificado (por medio de un nombre de usuario y
contrasea), debiendo obtener los siguientes datos del administrador del servidor:

Direccin del URL del servidor ftp.dominio.com

servidor FTP FTP.

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

contrasea que es necesario
Contrasea: al menos debe tener 6 caracteres
proporcionar para
de nmeros y letras combinados.
realizar una subida
autentificada.

Direccin del URL del servidor http://www.dominio.com

servidor HTTP web que permitir
acceder a las pgi-
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 contrasea que garantice cierta seguridad en el momento de acceder a
los ficheros ubicados en el servidor.
La mayora de los servidores publican mediante FTP, y una minora con http. La
publicacin es sencilla, el sitio ftp no es ms 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 aplicacin 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 mquina.
En la pantalla de Filezilla se rellenan los datos de servidor, nombre de usuario y
contrasea. Ahora se accede al sitio FTP, como se hara 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: (T)Men: muestra todos los comandos
de la aplicacin disponibles.

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

directorio actual en el sistema remoto.

(9) Panel de cola de transferencia: ofrece en tiempo real el estado de cada transferencia activa o en
cola.
 UNIDA
(2) Barra de herramientas: desde la que se D
realizan las operaciones ms habituales.
(3) Barra de conexiones rpidas: permite
introducir los parmetros de conexin
bsicos.
(4) Panel de registro de mensajes: aparecen
todos los mensajes y comandos
intercambiados con el servidor FTP.
(5) Explorador local de archivo: permite
visualizar el rbol de directorios del
sistema local donde est el cliente FTP.
() Explorador remoto de archivos: permite
visualizar el rbol de directorios del
sistema remoto donde se conecta el
cliente FTP.
(7) Lista local de archivos: proporciona la lista
de ficheros y carpetas del directorio
actual en el sistema local.
0 /T\ File?
Archivo V.^n Ver Transferencia Servidor Marcadores 1 jija - a r* i
1

S e r v i d o r ^ N o m b r e de usuario: Contrasea: Puerto; s-vonen rpida

r (4) (3

Sitio local: | \ s. v --|-i

ci A Este equipo (5)

. U O (Acer)
A

^ 0:
V

Nombre de ar~ Tamao- Tipo de are- ltima modific- L-C Di

seo local Di jeo extrae Unidadde- Nombre ~ Tamao- Tipo de- ltima mod- Permisos Pr No est

conectado a n:ngn servidor (^3 < > No conectado.

3 directorios

Servidor/Archivo local Direc- Archivo remoto Tamao Prion Estado

Archivos en cola Transferencias fallidas Transferencias satisfactorias

*? Cola; vaca

Fig. 4.46. Pantalla de Filezilla.

 CASO PRCTICO 9
Ahora, subirs a tu cuenta de hosting un archivo con Filezilla. Para ello, primero abre
Filezilla y, a continuacin:
e_ TamaiSo- T.pod
1. Escribe el nombre del host FTP, el usuario C*rpeta_ 03/02/201S- 07SS Carpeta- 03/02/2015- 0777 Carpeta _
02/02/2015- 0755
FTP y la contrasea que recibiste en el e-
3 directorios 3 directorios
mail de activacin de Hostinger, y pulsa en Servidor/Archivo local 0rec_ Aicmv remoto TamaAo Pnon_. F.xtado

Conexin rpida.
0 u710360100igftpsirureta.es/cs - FHeZfla Transferencias satisfactoria:
Arctwo Edicin Vef 2. Haz clic con el botn derecho en el
Transferencia Servidor
archivo y sbelo.
0 u7l0360l00@ftpsirureta.esy es - FileZ>!a bB
Marcares Ayuda 1,1
-
a
* * *>
Servidor. ftp.SirufcMxsy.ei Nomprede usuario: u710360t00 ! Contrasete * Archivo Edicin Ve* Transferencia Servidor Marcadores Ayuda
EjUdo. Servidor tvo seguro, no soporta FTP sobre US. i'. - F" 1 P ; ,1 P* A
Estado: Conectado
,Etadot Recuperando ei listado detditedoroL- Servidor ftp-Siruret*.esy.* Nombre de usuario: u7103$0100 Contrasea: Puerto:
Estado Dtectory f istrng of ypublicJAmr successte Conexin rpida
[slado Sernoor no seguro, no soporta TT? sobre RS. a Estado Conectado
Estado Recuperando e! listado de directono- Estado Oirectoiy listing of 7puol*cvMml4
successfut
amafto- Tipa de
E are.
s
Sitio ocal: | CA0sers\SANTlA60\0owrtfo)j\ Sitio remoto: | /pub<<_htmt v
t DisCoex v k Documents a >* 2f
e raJ-
; Oo^nloads * t. unidad 3 H 3 t* i- ptiWiC.html
UrvdAd
ropbox v
de -
e
q
.hombre de ar_ Tomafto - Tipo Todifk^ Nombre- T*mofo_ Tipo de _ Ultima mod_
u
i teac_ ltima 43201S-12we_ 17920 . A 14 Permisos Pr 1
p Microsoft E~ 11/t2/3 12^ 1 Guara.- Carpeta _ 03/02/2015- 07SS ^ l
14
o 1* AAadir^rclwos a la cola Edicin 12^. tmb Carpeta _ 03/02/2015- 0777 T L
1 Carpeta _ 02/02/20*5.. 0755 V-
1 ardvvo w* ^ ^ 1517- v
Trartserenoafa
J 3 directorios
i.J
H
( Se*rfdor/ A< Orate directory and Tamafto fVion- Estado
A enter t Actualizar
c
e -----------Renombrar
r
) S Cola: vaca
fe
ijl

Fig. 4.47. Cmo conectar via FTP.

3. Finalmente, comprueba en el hosting
que s se haya subido.
Administrador de Archivos
Uo

Fig. 4.49. Comprobacin final en el Administrador

de archivos.
V------------------------------------------------------------------------------------------------------------------------------------------------------
Fig. 4.48. Subirn archivo.
- Q. EE9ZE

:: m te m m
PiartiasoeS^tos 0.: THM
Pro^'ooc'-wf petf:-.>\
S*tx)

Archivos EJ Cop-a'/ Je B b A
J
xjk*rdad
CoeTts-rP

FTP

AtfTy obrador dC

Rej.ro de frrere

a Bases De Datos
SNTESIS
Tipos de
estructuras

Estructurar
una pgina
web
corporativa
Clasificacin
de las
pginas web

Historia de
HTML

Evolucin de
HTML

Lenguaje
HTML

Crear una
pgina web

Mantenimien Notepad++
to de una
pgina web

C
r
e
a
c
i

n
d
e
p

g
i
n
a
s
w
e
b
 Caractersticas de los servidores
Eleccin
del
servidor
para
alojar
pginas
web
Tipos de alojamiento web

N
Publicacin de pginas web va FTP --------> Filezilla
VJ
J
COMPRUEBA TU
APRENDIZAJE
Redactar sentencias en lenguaje de etiquetas de
hipertexto (HTML).
1. Cmo se aade un elemento externo a una web por
medio de HTML?
2. Qu es un script?
3. Cul es la principal ventaja del editor Kompozer?
4. Qu son los tags?
Utilizar programas comerciales para
ficheros que componen las pginas web.
5. Qu nombre tiene el primer estndar oficial del
lenguaje HTML?
6. Qu crees que debes hacer si quieres modificar un
archivo en un servidor?
7. En una pgina dinmica, quin se encarga de
administrar y publicar el contenido?
8. Cmo se clasifican las pginas web?
9. En un lenguaje HTML, qu describen las etiquetas?
10. Qu es un editor web?
Registrar la direccin de pginas web con dominio
propio o con alojamiento gratuito.
11. Para qu empresas son ideales las pginas estticas?
12. Cul 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, quin realiza las actualizaciones para
corregir fallos de seguridad?
16. Qu ventajas tiene un hosting VPS?
crear los
17. Por qu crees que las pginas estticas no tienen
cambios frecuentes?
18. Cmo definiras 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 travs de FTP cliente?
22. Qu permite hacer la aplicacin Filezilla?

</script>
< script type=" t ext/java se r i pt " >
//<!
var _gaq _gaq || []; document.observe('dom:loaded', function) . gaq.push(['_setAccount', 'UA-86235-1']);
_gaq.push([' setDomainName', '.stockphoto.com']); _gaq.push(['_setAllowLinker', truel); _gaq.push(['_setAllowHash', false]);
_gaq.push(['_setVar','logged-n']); _gaq.push(['_trackPagevew']);

(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';

24
 4 la
UNIDAD. u

3RCTICA FINAL

> pro-

s? Eres el propietario del comercio Iluminacin Miguel, situado en la comunidad autnoma de Madrid, y quieres tener una pgina la
? calle Meseta 12 de Madrid, dedicado a la venta de lmparas en en Internet, pero sin gastar mucho dinero.

Los artculos que comercializas son:

:orre- LMPARAS DE SALN LMPARAS DE HABITACIN

O CEO
. Techo clsica halgena juvenil
ictua-

ernet

nte?

Cuestiones - El nombre de la empresa.

1. Seleccionar un tipo de servidor y de alojamiento De pie Para Mesit
realizar esta prctica
web. cam urbano a
tienes que descargar desde
2. Disear con Notepad++ una pgina web. -
el CEO las cuatro imgenes
- Las imgenes de los artculos y sus ttulos (para que
3. Crear una imagen con Gimp. de lmparas.
al acercar el ratn aparezca ese ttulo).
Pautas para resolver la prctica
- Un enlace a la web: www.leroymerlin.es
Para seleccionar el tipo de servidor debes tener en
cuenta el tipo de comercio y las limitaciones La imagen Gimp debe contener un saln con cuatro
econmicas. lmparas. Encima de cada una de ellas aparecer
su nombre (utiliza para ello el botn Texto).
La web diseada por Notepad++ tendr: