Aplicaciones web
Rail V. Lerma-Blasco
José Alfredo Murcia Andrés
Elvira Mifsud Taln Aplicaciones web
Raill V. LermaBlasco (coord.)
José Alfredo Murcia Andrés
Elvira Mifsud Talén
Revisor técnico
Marcos Villagordo Castején
Prélogo de
Yolanda Ruiz Hervés
'MAORIO- BARCELONA ~ BOGOTA - BUENOS AIRES - CARACAS - GUATEMALA,
MEXICO - NUEVA YORK - PANAMA - SAN JUAN - SARTINGO-SAOPAULO
AUCILAND -HEMEURGO - LONERES- MILAN - MONTFEAL NUEVA ELI - PRS APLICACIONES WEB « Cielo Formative Grado Medio
No esti permitida la reproduceién total o parcial de este libro, ni su tratamiento
{nformatico, nila transmisién de ninguna forma o por cualquier medio, ya
sea electrénico, meciinico, por fotocopia, por registro u otros métodos, sin el
permiso previo y por escrito de los titulares del Copyright
Si necesita fotocopiar 0 escanear algtin fragmento de esta obra, dinfjase a
CEDRO (Centro Espaiiol de Derechos Reprogrificos, www.cedro.org)
Nota: Este libro se atiene al articulo 32 del derecho de cita de la Ley de
Propiedad Intelectual de 1996 (RDLeg 1/1996 de 12 de abil)
Derechos reservados © 2013, respecto a la primera edicién en espaol, por
McGraw-Hill Interamericana de Espatia, SL.
Edificio Valrealty, 1." planta
Basauri, 17
28023 Aravaca (Madrid)
ISBN: 978-84-481-8570-1
(Obra original: Aplicaciones web © 2013
:especto a la segunda edicién en espaiiol, por McGraw-Hill Ineramericana de Espaiia, SL.
ISBN edicion original: 978-84-481-8392-9
© Raill V. Lerma-Blasco
© José Alfredo Murcia Andrés
© Elvira Mifsud Tain
Autores del material complementario: Rail V, Lenma-Blaseo, José A, Murcia Andrés,
Elvira Mifsud Talin, Marcos Villagordo Castején
Revisién téenica: Marcos Villagordo Castejon
Egquipo editorial: Ariadna Allés, Paloma Sénchez, Silvia Garefa
Diseiio de cubierta:rload.es
Diseno interior: dirente.es
Fotografias: 123RF
Iustraciones: M* Carmen Fuente Canalda
Composici6n: Espacio y Punto, S.A. Prélogo
| mundo esté cade vez més interconectado, Seguromente a i nofvo ci
te sorprende, porque has lenido la gran suerte de crecer en la era del
£0, si miras la evolucién de las nuevas tecnologias bajo su perspectiva
rica, fe dorés cuenta de que lo que ahora fe parece natural no siempre fue
Ahora, las empresas desarrollan sus negocios a través de la Red, apoyén
fen sus comunidades de usuarios en redes sociales, con los que, por primera
puede mantener un didlogo directo y fuido. los trabajodores nos mover
Un entomo digital aprovechéndonos de todas sus veniajas, como la deslocal
cién de proyectos, la gestién ondine y en tiempo real que permite el teletrab
El portéil, la tablet y el smartphone protagonizon nuesiras vidas dentro de
Inernet mévil. Tenemos eso que llamamos Identided Digital, que no es mé
que nuestro yo en un entorno digital, cuya correcta gestion y cui
sigificar el asegurarnos un préspero futuro.
Pero hay més: hasta lo més cotidiano, come
Transferencia bancaria o simplemente quedar con [os amig@s, lo hemos irasla-
dodo a un mundo que se va construyendo dia aidia y que evoluciona a pasos
de gigante, u
Asisiimos a la vida real contada al segundo gracias @ las nuevas teenclogias.
Y hasta las relaciones personales tienen, en muchos casos, su origen en la Red.
cio, negocio, rabajo, relociones... Nada se escape a un!
vez més interconectado, cada vez més digital y coda vez m
Lo que hace unos aos vetamos como ficcién en el cine ahora
fen reolidad. Una realidad que nace al margen de fronteras naci
dicciones, creencios © ideoles, y que o su vez lo aglutina todo. U
que necesita seguir creciendo de forma soludable y que demanda
savio nueva que entienda de verdad cudl es el camino o seguir. ~
Yes en este contexlo donde entra ti, porque probablemente mafana serds uno
de los grandes profesionales especializados en la Red, capaz de faciitamos a
los miles de millones de internautas y a las empresas 0 gobiernos nuevas herra-
mmienias, nuevos modos de relacionornos y nuevos modelos de negocio.
Este libro que tienes en tus manos te obre el camino a un mundo espectacular
donde lo importante no es el pasado, ni siquiera el presente, sino el futuro: un
futuro todavia més digital, que seguiré cambiando el rumbo de la humanidad.
Y 10 eres, sin duda, uno de sus principales protagonistas
Yolanda Ruiz Hervés
Directora de Marketing y Social Media, ESET NOD32 Espafia
Directora de formacién en Social Media Marketing, Agencia EnRedesSocioles Presentacion
Ellibro que presentamos es el resultado de un opesionanle trabajo por explicar
algunas de las més importantes innovaciones que estan surgiendo en Internet
en estos momentos, siendo la actualizacién de nuestro anterior libro, publicado
en 2010. Esté destinado al alumnado del Ciclo Formativo de Grado Medio de
Sistemas Microinforméiicos y Redes (SMR], cuyo curriculo oficial fue aprobado
ol 14 de diciembre de 2007 en e Real Decreto 1691/2007, y fue publicado
en el BOE, con fecha 17 de enero de 2008, englobado dentro del catélogo.
de tulos de la familia profesional de Informética y Comunicaciones confeccio-
nodes por el Instuto Nacional de las Cualficaciones (INCUAI}.
Eile ciclo es lo actualizacién del anterior tiulo de Explotacién de Sistemas
Informéticos (ESI, y las competencias osociadas a su perfil profesional estén
otientadas @ oxpecios técricos como la instalacién, configuracién y manteni
miento de redes locales, servicios de red, aplicaciones web, ele. La creacién
de dicho perfil profesional complementa los yo existentos dela familia de Infor:
mética y Comunicaciones y cubre los expectativas formativas, en el Gmbito de
las Tecnologias de la lnformacisn y Comunicacién (TIC), de un amplia grupo
do clumnos.
Este texto se presenta con el objetivo de ayudar al alumno del Ciclo Formative
de SMR, durante su proceso de aprendizaje, en aspecios relacionados con la
instalocién, el mantenimiento y la explotacién de los servicios de Red, y de esa
forma faciitr su insercién en el mundo laboral en unas condiciones éplimas
desde el punto de vista profesional. Este es, por lo tanto, un libro de referencia
pore el alumno del Ciclo de SMR, en particular y, en general, para cualquier
persona que requiera la adquisicién de conocimientos en este émbito.
El libro 5 una guia que facilta al profesor ol desarrollo curricular del médulo
de «Aplicaciones web». Su estructura, contenidos, secuenciacién y objetivos
siguen los pautas indicadas en las especifcaciones de este médulo,incluido en
el primero segundo curso del ula de Técnico en Sistemas Microinforméticos y
Redes, dependiendo de la Comunidad Auiénoma en que se estudie.
Ellibro consta de cuatro unidedes didécticas, més otras dos unidades iransver
sales que desarrollan un proyecto unificador de los anteriores que esta dvidido
en dos partes para poder realizarls ol final de cada evaluacién, en las que se
tstudlon los prncipeles oplcaciones web fenglobodos dentro del concepto de
social media, anteriormente denominado Web 2.0), como son las aplicaciones
web de escritorioy blogs, las aplicaciones web ofimaticas y herramientas cola-
borativas (como wikis y grupos de trabajo), los sistemas gestores de contenidos
(Gh), cenrndonos on WordPress, por su gran flexibidad y cceptocién por
parte de los nativos digitales, las aplicaciones de almacenamiento web y mul:
Fimedia en Internet y os entornos virtuales de oprendizaje (EVA], centréndonos
en la nueva versién 2 de Moodle, por su gran versatilidad y acepiacién por
parte de las empresas y las insituciones educativos. Todos ellos, iralados con un enfoque eminentemente prictico y, en la mek
de lo posible, desde una éptica empresarial, trabajando con sistemas lib
fuente abierta (como la Fundacién Mozillo, que desorrolla el navegador
fax) y/o servicios gratuitos de empresas de Internet, como Google, Mic
Yohoo!, eic.
Sin olvidar las apps que se han ido creando estos stimos afos desde la
cin del Phone paro todo lipo de smariphones ytabletas, dentro del deat
frenéiico pora estar siempre conectados con la Internet més que forme
de la vido de los natives digitales
Code unidad dispone de un esquemo-tesumen con los conceplos més in
tes, unto con una prueba de avioevaluaci6n, con preguntas depo testy un
junto de actividades al final de la. unidad, llamado «Comprueba ty aprendizaj
{que ayudaré al alumnado a repasar la unidad de forma secuenci nc
en los puntos de mayor interés © relevancia de cada vnided didéctica,
El alumnade dispone de acceso via web
{CEO}, donde encontraré informacién préctica que pueden vilizar para afian-
201 @ incluso amplior conacimientos y auloevoluarse, asi como todos los recur
10s didéciicos necesarios para el desorrallo, lo «Aplicaciones webs.
Queremos agradecer a a editorial McGraw-Hill la oportunidad que nos ha
brindado por segunda vez consecutiva, al co fn nosotros para llevar a
cabo este proyecto docente, que ahora actualizamos, asi como a todas las
persons que fo hon hecho posible y nos han ayudado alo largo de ese em
po o mejorarlo. Como Yolanda Ruiz Hervés, que ha escrito el prélogo. O clos
comparieros de los centros: INS Nicolau Copernic de Terrassa (Ba , el
CPIFP Los enlaces y el CPIFP Corona de Aragén de Zaragéza, el IES Polita
de Palma de Mallorca y el IES Sant Vicent Ferrer de Algemesi (Valenci
han participado durante los afios 2011-2012 en un Proyecto.
Ministerio de Educacién denominade «Paquete integrado de
forméticas para la gestién de centros de FP» (softpack-p), cuya docu
x16 abierlo en la Wiki: hitp://softpack-fp.wikispaces.com.
Por dlimo, dedicamos el libro a nuestros alumnos, amigos, compatieros
sores de informética — especialmente, a los de nuestios centros en Valencia:
IES Sant Vicent Ferrer de Algemes’, IES Jaume Il el Just de Tabernes de la Vall-
digna y el IES Abastos (anteriormenie denominado IFP Manuel Sanchez Ayuso)
de Valencio—, personal interno o externo, a la editorial que ha colaborado
en su elaboracién, sin olvidarnos de nuestio amigo y compatiero Ratl Juncos
Castillo, que no ha podido colaborar en esta edicién, pero esperamos que en
las préximas podamos volver a contar con sus inestimables conocimientos y,
en especial, o nuestros familiares (Lourdes, Aranixa y Luis} por su paciencia
y comprensién durante la fresca primavera, caluroso verano y lluvioso olor
de 2012
Los autores
smrweb2@gmail.com Indice
© Unidad 1. Aplicaciones web sociales 7 © Unidad 4, Almacenamiento web y mulimedi 121
1. ta web social 8 1. El olmacenamiento en la nube 122
2 asi mat 1S 2. saver decneenonine
isene we y distribucién de archivos. 123
4. Google Apps para trabajo colaboratva 42
5. Inlegracién de aplicaciones web en sh Servis ee lice dno vival 120
el escritorio. 58 4, Servicios de almacenamiento multimedia... 146
© Unidad 2. Sistemas gestores de contenidos.. 69 © Unidad 5. Entornos virtuales de apr 163
1.gQué es un sislema de gestién de contenidos?... 70
iow ealeinecienettiiams. EE 1 Enonos viuals de aprendizae (EVA) 164
9. Esiudure cel CMs WordPioss a 2. Coraclerisicas bésicas de los sistemas
4, Ajustes basicos de configuracién y elearning 166
cspecto de WordPress 2 76 3. Moodle 168
& orios meee . S 2 4, Gestién de usuarios del EVA Moodle 176
ining roel 10 administracién de sistema
7. Geslién de Menis ag Leadminsrcion del si v9
8. Gestién de contenidos 84 me
9. Gestor dela pagina de inicio a1 6. La gestién de cursos en el sistema.
10. Otros componentes de WordPress 92 elearning 182
11. Gestién de temas.. sa 98 7. Los médulos en sistomos de elearning
12. Gestién de plugins . 7 tipos y configuracién 190
13. Sindicacién sone 102 8. Mecanismos bésicos de seguridad 194
Ta Werdress comeibleg east 1108 9. £l procedimiento de actualizacién 196
15. Copia y restouracién del portal snes 104
16. Actualizecién de WordPress sve 108
17. SEO y seguridad en WordPress . 109 © Unidad 6. Proyecto Emprende I 201
1. gCéme ha ido? 202
© Unided 3. Proyecto Emprende | 1132. Yen nuestra empresa 203
} eae ; vee A 3. Manos @ la obra 203
uesira empresa, si, nuestra
3. Parte admininstrativa 7 4, Moodle... 208
4, Parte técnica 17
5. gCémo empezamos? Plan de trabojO...n.... 118 © Anexo: glosare 209 Unidad
Aplicaciones web sociales
Enesta unidad aprenderemos a:
+ Idenificar diferentes aplicaciones
‘web sociales y de escrtorio,
* Gestionar nuesttas cuentas de
usuario e identidad web.
* Crear documentos con HTML y CSS
« integrarlos en plataformas web,
+ Instalar aplicaciones pora
proporcionar acceso web a
diferentes tipos de servicios,
como el correo electrénico.
* Configurar las aplicaciones
para inlegrarlas con un servidor
de correo,
* Uilizar aplicaciones de
colendorio web.
Y estudiaremos: + Reconocer las prestaciones
expeciticas de los
* Qué son los oplicaciones web ‘eplcaciones instaladas
socioles y de escrito. (tos, toreos,
* Qué es y como crear nuestra jenire cite)
identidad digital.
* Cémo crear documentos
medionte HTML y CSS.
* Cémo crear sifios web senecilos.
*# Qué es y cémo se usa el correo web.
* Qué es y cémo se usa
el calendario web.
* Cémo integrar aplicaciones
veab con avsto escor,
* Qué oun webOS y emo
se instola, se usa
y administra, 1 spain sc
D orcs
‘Arpanet. Segin la. Wikipedio
son las. sigias en. inglés de
Advanced Research Projects
ency Network, esdecir, a Red
Geta Kgencla de Proyeroe de
Investigacién Avanzados: itpe/]
‘s.wikipedia.org/wiki/ARPANET,
Inteligencia Ambiental o Ami.
Segin lo Wikipedia, es uno
evisién donde los humanos estén
rodeados de tecnologia de com-
putocién y red empotrada de
manera no infrusa en sy entor
Internet de las cosas. Segin
la Wikipedia, se relieve © uno
red de objetos cotdianos inter
onectados entre sk hitp://
gersipdioorg/wikieret.
Internet profunda 0 invisible.
Segin la Wikipedio, es todo
@ contenido de intemet que no
forma parte del Internet super
fia, 8s deci, de. las. pag
nos indexades por los redes
de los motores de bisqueda de
Internet: hep /es: org)
vwiki/nternet profunde.
Prosumidores. Son consumido-
res que opinan online sobre su
experiencia de consumo,
Influencers. Son genie famose
© popular que por su repute
cién son copaces de mover o
millones de personas en la Red,
Gfeclando en ocosiones@ lo
repulocion corporaiva de. las
empresas.
@ 1.La web social
nlernet ha muerlo? Esto es lo que afiemon algunos gurves o profes del ciberespacio,
Inigntas que otros indican que se ha socializado, Segin ellos se ha humanizado vilizan
do la intelgencia ambiental tanto en nvestos mundos virtuales en la Red (que se han ido
fusionando con nuestas vides fisicas) como con lo utlizacién de disposives meéviles,
Los denominados natives digitales como ti fnacides a pert de las vltimas décadas del
siglo 0) ya. no podsis vivir sin estor conectades entre vosotros, con las casas 0 estas
erie els, las blogs, us 0 muros de westos amigos reqiren de west otencién en
tiempo real (la informacisn se quiere consumir en el mismo momento en que se genera
desde cualquier sitio de manera ubicue, a veces, incluso geolocalizados)
Esto mismo quieren las empresas actuales: aprender, conocer, analizar y conversar con
sos cletes prosumidores pora venders ss producos,segon sus necostlodos propues
{as por ellos mismos 0 por influencers que generan ingentes cantidades de informacién
Ge varios pelobyles que van a obligor a generar melodotos sobre los mismos cue perme
tan darles una relacién seméntica que ayude para catalogarios mejor y tratatlos como
grandes almacenes de datos en inglés dato warehouse} © nuevos sislemas llamados
Big data que permitan que se extraiga conocimiento de ellos o incluso de la Internet
profunde o invisible.
a
Eo, 1.1, Evolveién de fared Internet hasta el Internet de ls cosas,
Fuente: htp:/ / www fundacionbankinter.org/es/ publications /social4echnologies.
Pero seguro que nadie se imagina que todo este mundo de oplicaciones web surgié de
una guerra fia, ka misma que levé al hombre a la Luna en 1969. € hizo que el 29 de
‘octubre de ese mismo afo se conectaron los dos prneros ordenadores de ls cuatro
‘que participaron en el nacimiento de Arpanet, que fue la red precursora, hasta 1989,
de la Inemet que hoy conacemos y que no para de evolucionar. Siendo la Web, sin
dudo, el servicio por excelencia, aunque cada vez més con la Intemet mévil se tienda @
la utilizacién de aplicaciones web especificas llamadas apps para hacer cosas mas con-
cretas dentro de las plataformas web. Las mihiples herramientas que toda orgenizaci6n,
‘empresa o usuario dispone para publicar cualquier tipo de contenido, ya sea de forma
individual o colectiva (blogs, wikis, etc), contibuyen « la constuccién de un espacio de
Servicio en a nube
(Goose
6
iCloud
Site pecs Pina
novies = Apple BlackBerry phere)
Smartphones y tables
[hardware mévi
Tole 1.1. Prinejpalee plataformas mévile.
(33
a
‘Motorola (propiedad de
‘Google y otros como
Semsung o HIC
Propios: Phone yiPad © ——Prapios: BlackBerry Nokia y otros Aptccions mab secs |
© Internet, la Web y sus aplicaciones
Actividades
1. gDénde surgié Arpanet?
{De dénde eran los cua
fro ordenodores que se
inferconectoron en ellos
on 19698
2. gSabes cusintos gigabytes
Son un petobyte? Hoz una
Seen ele dente
un byle hasta un peta-
byte (8) 0 mejor hasta un
yottabyte (YB).
3. zCusntos compatieros de
iv clase son nofivos dig
tales? sn
web? gCusntos méviles
fiene cada. uno? Con
conexién wifi o con trifa
de doios 3G/4G? :Cusl
es su plataforma mévile
Elabora una tabla estocs-
Yica con todos los datos
obtenidos.
Internet surgié en 1989, cuando Tim Berners-Lee y Robert Ciliau desarrollaron un siste-
ma basado en hipertextos (HTTP + HTML = WEB) para facltar el acceso a la informa-
cién del CERN (Organizacién Europea para la Investigacién Nuclear). Se organizabo
mediante una red de enlaces o hipervincuos ente dnersos documentos que podtan
visvalizarse con la ayuda de una aplicacién especfica: el navegador.
Por tanto, la Web 1.0 se concibié como una coleccién de documentos estaticos enlaza-
dos para su consulta o descarga, donde los usuarios no podian inferactuar con ellos,
feniendo que hacer un consumo pull, es deci, se iba a por el recurso siendo la actual
zacién unidireccional, A medide que el sistema se hizo populor, aumentaron sus pres-
taciones. De manera progre: desarrollaron métodos que permitiesen la creacién
de paginas con contenidos dinémicos, que dio lugor o la Web 1.5 en 1997, de modo
{que esios se generosen en funcién de los parémetros de la peticin. Aparecieron asi los
CG, oplicaciones escrtas en algin lenguaje de programacién que se ejecutaban en el
servidor, y que podian recibir parémetros de los clientes. Pese a su gran utilidad, ten-
chan « sobrecorgr el vervidor de ahi que sugiesen stems de eecicin de médulos
ids integrados en el servidor y lenguajes de programacién interpretados que permition
incluir c6digo en las paginas HTML. No tardaron en oparecer diversos arquilecturas y
lenguojes de programacién, tanto en la parte del cliente con lenguajes de script como
Jovascript o VBscript v objetos incrustados en la pagina como los applets realizados en
Java, en la parte del servidor, con lenguajes como PHP, ASP o JSP, que permitian
el desarrollo de paginas web totalmente dinémicas ¢ inferactivas con acceso a SGBD.
Estas tecnologios dieron paso en 2003 « las aplicociones Web 2.0, donde los usuarios
empiezan a colaborar entre ellos, el consumo pasa a poder ser push, es decir, con
tecnologias RSS: al usuario ahora le llegan los nuevos contenidos sin tener que ir a
buscarlas¢ incluso la actualizacién del contenido pasa a ser bidireccional. Los recursos
son es ies de produc y consuic. Acceiendo oavés dela Red medionte un no-
vegador u otras aplicaciones especificas. Estas generan de manera dinémica una serie
de paginas con tecnologia AJAX que interpretard y representaré el cliente.
a
cpunrounse Ng
exttica indica calaboratve social imtligente
1989 - 1997, 1997-2008 2003 - 2008 2008 - Actual En un fro cercono
‘ble 1.2. Evolucin de fo Web.
La evolicién de la Web hallevado ala aparicién en 2008 de una nueva etapa lamada GY a cistorio
social media, de la mono de ls redessociles y un of6n por socilizor més oun los” S
{ganas de compartir de la Web 2.0, siendo en esta cuando la Inlernet movilha faciitado | Computecién en la nube. Segin
tener cualquier servicio en los diferentes dispositivos méviles que existen actualmente. la Wikipedia, es un paradigma
que permite ofrecer servicios de
Lo préximo que nos viene en pocos afios, sino ha llegado ya, es la web seméntica que computacisn a través de Inert.
nos permita diferenciar lo que buscamos dependiendo del contexio en el que nos mova _ttpr//es.wikipedia.org/wi
mos, gracias a lo inclusin de metadotos que conviertan la informacién en conocimiento, | Computaci%se3%B3n en. le
facilitindonos ain més si cabe la interaccién con las cosas © méquinas que fengamos _nuber
‘a nuestro olededor. he Apicrnocinntcn
© 1.2. Protocolos y estindares
‘Aunque Internet ha ido credndose sobre la marcha segin las necesidades o modas que
han ido surgiendo en los iltimos aos, todos los sistemas o servicios oparecidos para un
uso generalizado se han ido estandarizando. Eslos son los principales organismos que
lohan hecho posible con sus funciones y algunos ejemplos:
Orgenizacién Internacional
pare la Estondarizacién (SO)
Consorcio Unicode
Esténdores,
150 860!: representacién del iempo y la fecha. Adoptodo en internet
rmadiantael Date and Time Formats de WC. que ulizo UTC.
Estindor @informestécnicas da ISO 10646: Universal Character Set. El cédigo de caractares unicode
Unicode (UTR). {que es universal, uniforme y nice para todos.
ECMA International Estindores, ECMA.262: lenguoje de programacign ECMAScript
Internet Assigned Numbers Nombresy nimeros de registro Asignacién de IF tanto versién 4 come 6. Asi como la getign de los
Authority (ANA) smantenidos. nombres da dominios web.
Internet Engineering Tosk Force
(err)
World Wide Web Consortium
pwc)
Extindores de Inerne STO}
yy request for comments [RFC).
Potckin de comentarios.
Todos los protocolos etociodos a los servicios web como DNS, DHCR
HITP. FTP, SMTP, POP, IMAP, ec
URL Localizador Uniforme de Recursos), HTT (rotecolo de
Recomendaciones, Transferencia de Hiperlexto) y HIML (languoje da Mercado de
HiperTexto} acualmente ene versisn 5
Tabla 1.3. Flemplos de estindores de los organismes que regulan los servicios web,
e@..
{Qué os Web 2.02 Patrones del
fiseio y modelos del negocio
para. la. siguiente generacion
Sel software. Ariulo de. Tim
Oreilly taducide ol costellono
por la Fundacisn Teletonce que
Sire para define el concepto
Web 2.0, hip/bitly/SUBPu,
QO ssicsqu.2
81 grupo de. dosarrolladores
Web Standards Project WaSP
bitpi//wowwebstendards.org/
fue creado en el aro 1998 con
la: fnaldad ‘de evolvar haste
qué punto camplen los nave
sgadores con los estindores de
fe WSC. Para tl fin, la WoSP
ide los Acid Tests thp// www
acidtestsorg) En lo octalidod,
podemos hablar de tres pos
feidl, Acid2, Acid.
Y si craes que algin navego-
dor gctuel no cumple con elo,
puedes pasdreelos para compra-
Borla. Existe también un tst de
compaibildd con HIMLS en el
sitio hip /himlstest.com/
El organismo més influyente en materia de estindares web es el W3C (World Wide
Web Consortium), una asociacién internacional de empresas, formada por diversas
corganizaciones, cuya misién es xguiar la Web hacia su méximo potencial a través del
desarrollo de prolocolos y paulas que aseguren el crecimiento fuluro de la Web.
Desde su creacién en 1994, el W3C ha publicado més de 110 esténdares abiertos
para lenguajes web y protocolos, entre los que destacan las principales tecnologias
sobre las que se base la web, como URI, HTTP, HTML, XHTML y CSS, ademas de SOAP,
XML, UDI y WSDL que sirven para las RIA y los servicios wel
[Bl Protocolos web
El principal protocolo utlizado en la Web es el HTTP, que es el Protocolo de Transferen-
cia de HiperTexto (Hyperfext Transfer Protocol) Fue creado en 1989 en el CERN (Lobo-
ratorio Europeo de. Fisica de las Pariculas) como un medio para comporir los datos
cientificos a nivel internacional, répidamente y a bajo coste. Es el métado més comén
dd intercambio de informacién en la World Wide Web, por el cucl se transfieren las
dginas web o paginas HTML. a un ordenador. Es deci, el hipertexto es el contenido de
las péginas web, y el protocolo de transferencia es el conjunto de normas mediante las
cuales se envian las peticiones de acceso a una web y la respuesta de esa web.
Ill Estandares web
Se trata de un conjunto de recomendaciones sobre la creacién e interpretacién de do-
umentos web, asi como de la accesibilidad, la interoperabilidad y la usabilidad sobre
el desarrollo y la administracién de silios y servicios web.
Seguro que alguna vez te has encontrado con paginas que se encuentran optimizadas
para uno u oro navegador. Muchos no siguen los esléndares y, a la hora de crear una
pagina, conviene tener en cuenta estos peculiaridades. Si todos los novegadores web
siguiesen los esténdores, los desarrolladores no deberian preocuparse por optimizar las
paginas para uno u otro, Aptccions mab secs |
© 1.3. Aplicaciones web
Lo arquitectura de las aplicaciones web consta de méquinas conectadas a uno red, por
® ecctusci
lo general, Intemet o una intranet corporativa que sigue el esquema cliente-servidor en | ASPnet. Lenguaje de programa:
nuestro caso de servidores web. Surgié a mediados de lo década de 1990, durante cin, desorrollado por Microsoh
le etapa de la Web 1.0 con la aparicién de las primeras conexiones de acceso con- | fentado a fa creacién de
mace [RIC, RDSI, GSM, GPRS) y de los eiqustos mltmedia del estndor HTML To | péalnas web dindmices dento
de su tecnologia net.
SS, Documentos que definen la
bt Seid presentocién de un documento
Pin eM
5. . ECMAScript. Especificacién de
a ate ese un lenguele de” programacién
“ Bsa enJovaScip Jip
GL Tecnologia web que per.
mile ejectiar aplicaciones en
servidor
incorporacién de pequefios programas realizados en Java, llamados applets.
HIML, Lenguaje de marcas para
lo creacién de paginas web,
Fig. 1.2. Esquema basco dal servicio web. HTTP, Protocolo de transferencia
de hipertento, mediante el cual
Cuando un cliente realize una peticién de una URL a un servider, teniendo en cuenta se tranamiten los pginas web.
{que gracias al servicio DNS conocemos su IP le pide una pagina web. Esta se busca en Jaye, Tecnologia de oplicaci
el repositorio de paginas del servidor y es dewelta al cliente. Toda esta comunicacién nes ‘web de. Sun Micresysem,
se lleva a cabo mediante el protocolo HTTP, y el cédigo de las paginas es basicomente __cbsorbida por Oracle en 2009,
HTML junto con cédigo CSS y JavaScript (u otros complementos como animaciones Flash JavaScript. Lenguaje de progro-
aque se ejecutan en el cient, que surgeron en lo etapa de la web 15. macién de serps, orantado a
bjeos,uttzado para eeceder
allo en oplcaciones web
BP epee de oganocin
aoc on al lengua leva
cortortado ok receton de page
nos web dindricos
PHP. Lenguaje de progromacién
ovientado a be creecion de pag
nos web dinmicos
Serves. En la erqutecturo webs
de Jove, se roa de objetos que
te ejection en el ervidor, exo
endo sv hncionaido!
; ocolizador Uniform
Cuando se trata de péginas web dinémicas, escritas en lenguajes de programacién | YR locolizodor Uniforme de
para el servidor como PHP, ASPnet o JSP, el cédigo HTML que se envia al cliente se jes vi iada pore identiicer un
construye de forma dinémica deniro del programa servidor en el momento en que se | recurso on Inioenet
procesd la peiicin. Las péginas se crearén « partir de la informacién recibide en lo abiided. Avrkuto de colded
‘misma peticién, o mediante consultas a bases de datos. dl soltware que mide la. foci.
ieee is Wedd ao de ln ores
ada
Fig. 1.9. Esquema bdtico de fincionamiento del servicio web con paginas estas.
ig. 1.3. Esq
XHTML Lenguaje de marcos
basode en XMI, ideado pora
susituie@ HTML
XML Metalenguaje extensible
de eliquetos que se propone
‘como esténdar pora el intercam:
bio y la organizacién de infor
macién esruchirada en la Web,
Fig. 14. Esqueme bético del foncionamionto del servicio web con péginas dinémicas T spears wa sec
@ © 1.4. Aplicaciones web interactivas (RIA)
Vocabulario
Se han creado « partir del siglo wu, en la etape de la Web 2.0, con la aparicién de tecno-
RIA, Siglos de Rich, Infeme! Jogias de acceso dedicado fijo (ADSL, Médem-cable) 0 mévil (UMTS/3G, ITE/4G}, que
Azplizatons. Son oplicocones on ampliado el ancho de bando consiguiendo conexiones més potentesy csequibles 0
Internet. ¥ con lo oparicién de nuevas especificaciones esténdores del W3C como fueron
iors crlcociores de er. XML, JSON, SOAP, UDDI, WSDL, RSS, ATOM o AMF pora la porte del cliente, Lo que
Oe a emcats's | he permiido vilizar estas aplicaciones inferactivas de Internet enriquecidos (abreviodo
Ciavisdoina ndeninavimual, | como RIA, acrénimo inglés de Rich Inlemet Application} mucho més poteries, que ban
fe cegen lo cocefice; dct ya nave guerra do comlenenios con nue undones mikes, cone
tclidonedes pore ajecuions reproduccién de videos, grdficos vecioriales, animaciones e interactividad para controlar
SOAP. Siglos de Simple Object el mercado, lo que he provocado una auténtica revolucién multimedia en la Web,
Access Polocol Es un protcalo ” :
coat Protocol Es ut cele pltaforma Flash dela compari Adobe es una de las més acivas ol sacar su marco
sndor que, define come dos | canie FLEX, pero manteniendo su hegemonta en los novegadores con Fash e incluso
cei on teres proceso® en los excritorios con AIR. Se hon vislo parecer tecnologias equivolenes como JavaFX,
Lnasralivearninrnirhaety dde Oracle o Silverlight, de Microsoft. Mientras que oas grandes compaifias de Internet
UDDL Seles ak, Unrenal _lideradas por Google, Amazon o Yahoo hon fabojado con estandares como AJAX y
See eave Ry han conseguido en 2012 que se aprobara el nuevo estindar HMTLS del W3C que
Trogon” Es el catego de | petsigue no requerr de complementos no eskindares de terceras empresos intent os
sorvicios de Internet ferminar con esta guerra por Internet.
WSDL. Siglas de Web Services
Description Language. Describe ‘Adobe Flash Platform for RIAS
lo interfaz péblica alos servicios
ee
Wat era nl
I Aare oo oe
despliegue y desarrollo de RIA,
decioore 7 ere & MA
pietaria Flash,
Fash eve do na plea
Hh See ce maples
se gem J omen
lidedes de manejo de cddigo
false rae cae
eee ete
ASntups ta cj da
seman ops de
peat
fat Es ts dope
Are Ee fas oe
creacién de RIA que fenen fas
cee de am ey
de aplicaciones de escritorio,
incluyendo aplicaciones multi-
sree oe
Silverlight. Es uno estructura,
para aplicaciones interactives
© RIA de Microsoft que agre- rae
ining aay et
personne me s7 Leb
wie eats
TN So de echonae
pecmepere rine
tsincrono y XM), Es una téeni-
ca de desorolla web eskindar
ppara crear aplicaciones interac:
Tivos 0 RIA.
te | 10 SON, SOAP, RSS. ATOM, AM.
ATP, HTTPS Raw Sockets, TP
- Fig. 1.5. Eaqueme de a plataforma Flash de Adobe para crear RUA Aptccions mab secs |
© 1.5. Servicios web
Y chora que los aplicaciones web interactivas han evolucionado pore los humonos, el si
guiente paso se centra en el Internet de la cosas, es decir, que todo lo que nos rodea que
no es humano pueda conectarse entre siy nos haga la vide més fécl. Est Funcionalidad
se denomina servicio web. Es complicado de definir ya que engloba gran cantidad de
concepis, pro la WIC la define com sun conus de placiones «de ecolgios
‘con capacidad para interoperar en la Web. Estas aplicaciones o tecnologias intercam-
bian datos entre si con el objetivo de ofrecer unos servicios. los proveedores okrecen sus
servicios como procedimientos remotes y los usuarios solicitan un servicio llamondo a
eslos procedimientos através de la Webs.
Co Ptcin SOAP (XML) |
=m a
FRespussia SOAP (XML)
Implomentacn| a x ‘consuicor
Fig 1.6, Esquema de funcionamianta de un servicio web,
Foon: hip /wrw.diniovies/=labra/cursor/ Web20 /imoges/VocabServcios Web.png.
El funcionamiento basico de los servicios web es el siguiente:
1. Una empresa, como proveedor, implementa su servicio y lo registra en el agente o
UDI que hoce la funeién de lstn piblico de servicios web.
2. EI cliente o consumidor busca el servicio web que necesita « través del UDI
3. cliente puede acceder ol servicio web del proveedor y decidir silo utiliza.
Tarja
pp) secrete
Fig. 1.7, Bjemplo de un servicio web de una agencia de viajes,
Fuente: his: / www. w3e./ Divulgacion/GuiesBreves/imoges/sorvi
a he Apicrnocinntcn
Q CEO
a Sabias que...?
a
Dispones de los siguientes docu:
rmenios:
* Firefox basco, con uno
‘explicacién de la insolocién
¥ una guia bésica de monejo
del navegador Firefox.
* Firefox configipdf, pore lo
configuracién avenzeda me:
dine la opcién aboutconfg.
* Seguridad firefox pdf, sobre
lo insolocién de cerificodos
de seguridad en Firefox
lo licencia MPL Mesilla Public
license) es. una licencia de
software "libre desorollade
war pricipio por Netcope
Commuricaieray_rcapevora
ale Findacion Mexia, Comple
fan lav defniionne ds La Faw
Sofware Foundation y de lo
Open Source Intotve’ de soft
ware libre y codigo. abiero,
pero deja opciones pora. sv
feutizaclon ‘confines comer
Gioles_y no libres, sn redingir
Io reutlizarin do codigo ni al
Keancemiento do sohwore dere
ved bofp la misma licencia, fo
Que la comore on incompotble
on lo GNU GA [GNU General
Public cen
© 1.6.El navegador web
Se trata de la puerta de acceso a los servicios que ofrece la Web. Como ya sabe.
mos, la Web se basa en una arquitecture cliente-servidr, donde el servidor es el
programa que atiende las peticiones que hacen los navegadores y les proporciona
los recursos que solictan mediante el protocolo HTTP. Ademés, cada servidor web
dispone de programas servidores para la realizacién de péginas dinémicas (CGI,
Servlets, ASP, JSP, PHP, etc),
El cliente o navegador web (web browser) reoliza las peticiones al servidor y presenta
cl usvario los paginas web que dicho servidor le suministr. Asi pues, en su version
més simple, el navegador debe intrpretar el cddigo HTML en que estén excitas y pro:
sentarlo al usuario para que este pueda interactuar con el contenido y navegar hacia
fotros lugares o través de hiperenlaces. Los navegadores actuales también interpretan
[as hoies de esto en cascada (eS), queindican como deben presnfarse los datos,
cédigo JovoScript que afiade dinamismo a las paginas, ademés de otras extensiones,
ccomo Flash 0 Jave, que oumentan las posiblidades de presentacién.
Intrnet Explorer itp / windows microsoft comv/esE5/ntrnet-explorer/produts/e/home
MorileFiefox _ wwwsmaill europeorg/e/frefox
Google Chrome _ www.google.com chrome
Soler ween opple.com/es/sefri
Opera werwopera.com
Toblo 1.4. Piginas web de los principales navegadores.
IL Navegadores web de escritorio
Los principales cinco navegodores que ocoparan précticomente més del 95 % del mer
ccado son los siguientes
* Internet Explorer (IE. Desarrollado por Microsoft, se halle integrado en Windows.
Desde 1999 es el més utilizado, aunque en los cltimos aos ha perdido gran ni:
mero de usuarios. Se trata de software propietario, aunque se ofrece de manera
groluita
+ Moailla Firefox. Desorrollado por una comunidad de programadores independientes
{que colaboran dentro de la Fundacién Mozilla. Es muy innovador y adapta répido-
mente todos los estindares que van surgiendo. Nacié de la liberaizacién del cédigo
del navegador Navigator de la empresa Netscape. Por lo que es de cédigo abierto y
libre, lo que le permite estar disponible pore muchos sistemas operatives, entre os que
fesién Windows, Mac y GNU/Linux, siondo distribuido bajo la licencia MPL
+ Google Chrome. Nacié con el objetivo de proporcionar una interfaz de usvario sen-
cillay eficiente, y garantizar una navegacién més estable, répida y segura. Es pro-
piedad de Google, pero se basa en componentes de cédigo abierto. Est disponible
para Windows, Mac y GNU/linux.
* Sofar. Se trata del navegador web desorrollado por Apple para Mac OS X, aun-
{que fombién exisle una versién para Windows. Posee un disefio bostante atacivo,
cémodo @ inhitvo, y diversas caracteristicas funcionales, eno las que destacamos la
integracién con el reproductor de Apple QuickTime.
* Opera. Creado por la empresa Opera Software, gaza de una gran aceptacién gro-
cias a su velocidad, seguridad, soporte de esténdares y reducido tomafo. Se encuen-
tra disponible para GNU/Linux, Windows, Mac OS X, Solaris y FreeBSD. I Navegadores web méviles
Le oparicién masiva en estos dimos aos de los smartphones y las tablets han obligado
«las empresos a odaptar sus navegadores a esios nuevos dispostivos méviles, sacando
versiones especificas para ellos, siendo octualmente el canal ms uilizado para acceder
«los aplicaciones web y navegar por la Red.
‘Aunque algunos ya vienen integrados de serie con los propios sislemas operatives mé-
“ies En caso de quar insclor oto, se pueden descargar grahilomente de los endos
oficiales de cada plataforma
an33019 Apple
Reposioros ofciles hitp:/itunes.opple.com/ —_hitp://oppworld
Geoplcacones MPrlfrlereredlecon — e/oawefcsfaasints® Bickberrycom
Cantidad de opps de 350.000 + de 500.000 + de 100,000
disponibles en 2012
Tobe 1.5, Principalas sistemas oparativos mvs.
I Otros navegadores web
¥, por dlimo, estén surgiendo disposives externas lamados Setop Box (STB) o inlernos
pat los televisores, denominados Internet TV 0 Smart TV, de manera que estos también
Sirvan para conectarse a lsterne y uiizar aplicaciones web. En este campo, el navega-
dor que més esié trabajando con los fabricantes es la comparia Opera que comenz6
‘edoptando su navegador o las videoconsolas Nintendo DS y Wii, pudindolo encontrar
hoy en dia en televisores como el Sony Bravia, entre otros,
Opera
Emulato!
Use the F1 key to open the browser menu
Fig. 1.8, Maquina viral con el emulador del navegador Opera TV.
Fuente: hp wwwopera.com business /tv/emulotor.
@
Windows
phone
hiipy/www.windowsphone.
comlos£5/marketploce
+ de 100.000 T spears wa sec
O ssa
El escrtor hingaro Frigyes
Karinthy, baséndose en la ideo
de que el grupo de conocidos
de une persona crece expo:
nencialmente, propuso, el siglo
pesado, le ior, de les ses
(rados de separacién, que dice
seh mee pees es ee
ler @ cualquier otra persona con
tan solo seis hasta cubrir toda lo
ppoblacién mundial (de loz més
dde 7.000 millones que somos).
‘Actualmente, con Internet se esté
replanteando esta teoria, indi
cando que con las aplicaciones
de lo social media, con solo
cinco personas podriamos cubrir
© conocer a cualquier otra per
Sona del plane.
@ se sicases
4. sQué opinos de la teo-
fia de los seis. grados
de separacién? Estas
© favor 0 crees que es
imposible que se compl?
5. se comideros un prow
midor? 9A través de qué
Monalesteedocese con
sumes informacién en la
Red?
6. gTienes olgin influencer
{que sigs en la Red? gPor
qué lo sigues? sCudntas
personas més crees que
lo siguen?
@ oso
Prosumidor © prosumer. Es un
rvew término que procede de
lo fusién de usuarios de la Red
que producen (producer) y con-
sumen (consumes) indisintamen-
te contenidos de Inte,
Influencers. Son personas famo-
ss 0 influyentes en la Red que
con sus comentarios @ ravés de
sus blogs, ils, redes sociales
consiguen influir en uno mose
social importante
@ 2.La social media
‘Como se comenta en la inroduccién (Tabla 1.2. Evolucién de lo Web], actualmente nos
encontramos en la etapa de la socializacién de los medios desde 2008, entre los cuales
‘el mas importante es la WWW dentro de Internet, pero esto ha afectado a los demas
medios. Hoy en dia, las empresos y sobre todo los medios de comunicacién quieren con-
versor con sus clientes y por ello, ademés de sus tpicas web estaticas 0 dindmicas, se
han creado cuentas en redes sociales como Facebook o Twitter, entre otras, para hacer
participes a sus clientes de sus servicios en tiempo real.
© 2.1, Qué son los medios sociales o social media?
‘Seguin los profesores Kaplan y Haenlein, son eun grupo de aplicaciones basadas en
Iniemet que se desarrollan sobre los fundamentos ideoldgicos y tecnolégicos de la Web
2.0, y que permiten lo creacién y el intercambio de contenidos generodos por el usuc-
Tio», Es decir, no se acude a la Red solo para obtener informacién y consumirla. como
se hacia hasta chora, sino que también se quiere opinar y producir contenidos (pensar,
escribir, compartir y paricipar} posando a ser prosumidores [productor + consumidor)
‘Se quiere conversar de ti a 10 con el resto de la tela de araiia que conforma Interne,
‘aunque creemos grupos, citculos 0 aldeas dentro de esios sistemas de redes sociales
ppara obtener informacién de nuestros amigos © de los amigos de estos, que son los que
nos pueden dar mayor valor aiiadido por su
Fig, 1.9. Convarsacién global en la social media
‘Todas estas nuevas aplicaciones obedecen en buena parte a la idea de colaboracién
fen red o inteligencia colectiva que enuncié Tim Bernersiee, creador de la Web: «Si
‘queremos entender la Web y su funcionamiento, y no solo novegar por ella, deberemos
concebirla como la web de las personas: las que hacen enloces, las que escriben, las
que siguen enlaces, las que leer.»
Dicho de otro modo: «Ahora, para mi, la Web es la conexién de toda la humanidad
mediante la tecnologia.» De manera que los ciudadanos de la Red (netizens) utlizaréin
Internet como espacio para relacionarse.
Sendo la reputacién digital un tema critico o cuidar, es decir, qué opina el resto de gen-
te de nosotros tanto en el mundo fisico como en el virtual nos va afectar hasta el punto
de tener que trabajarnos una identidad digital adecuada. Dentro de esta gran conv
sacién que es la social media, ha surgido la figura de los denominados influencers ©
Famosos que pueden influir con su opiniones en la Red en el resto de la comunidad,
pudiendo tener una repercusi6n tan grande que afecte a muchas personas que compren
3s productos (pudiendo estar pagados por las empresas esos comentarios) o hagan
Sloss ur damp poe sre wees qo census Obama goca lopaye
cen la Red para lograr ser presidente de los Estados Unidos. Aptccions mab secs |
© 2.2. Identidad digital
Coda ao que va pasond, lo presencia virual de las personos y las empresas en la Red
es més importante, Lo que nos vo © obligor, ol igual que lo hacen los organizociones, ©
potenciar nvesra marca personal. En definiiva, @ crear un valor afadido que podamos
‘porta a la conversacién global y que en definiiva sea lo que nos permita en un futuro
no muy lejano entrar en el mercado laboral por lo puerta grande, Con una repuracisn
digital lobrada a lo largo de toda nvestra vido, ol iguol que hacemos en la vide real
con los estudios 0 las capacidades que vamos adquiriendo, Por ello igual que eskis
estudiando este ciclo para capacitarle como técnico informético, lambign tendrés que
demostrar al resto del planeta tu saber hacer (know how} a través de tus blogs, tuits, co-
mentarios y en definiva Wvs oporiaciones viruales dentro de la social media, Teniendo
{en eventa, como dio el gladiador Maximo Décimo Meridio elo que hacemos en la vide
fene sy eco ena elomida, es decr, que la Red no olde y todo fo que pongomos en
ella persist por siempre, hasta que alguna ley lo impido, pero de momento cvide tus
‘portaciones para que seon positvas, tonto @ nivel personal como profesional, yo que
{28 complicado separar ambos mundos en lnerne
Q vopise
Creacién de una imagen identficativa personal o corporativa adecuada para nues-
tro equipo de trabajo
Duracién: © 15 minvios Dificultad: © fécil
Objetivo: poder disponer de un nombre de usuario © avatar que represente nus
fra empresa 0 a nosotros mismos.
Material y herramientas: disponer de un nombre de equipo de trabajo [segtn los
indicaciones del profesor) que formaréis como si fuerais una empresa, asi como su
logotipo. Y el nuestro propio y una foto o dibujo que nos represente.
Ulidades: sno se quiere empezar publcando una foto perond, os pos cear
4 avatar o dio que ot parezco, por ejample en a vervicio bp wow.
ceyourmanga.com o cualquier otro equivalenie que no sea de pago, aunque
dloburisdsponer de unc even do correo que os vols o crear en el siguene Coso
préicico para daros de alta en este servicio.
Solucién:
1. Como empreso, equipo de rabojo, tendréis que hocer una llwvia de ideos pora
crearos un nombre de empresa, otro de usuario pare todos los servicios web
aque actvgis y un simbolo 0 imagen que os represente
2. Anivel individual, cada uno ha de decidir qué nombre de usuario quiere crearse
« partir de su nombre, por ejemplo, de Aplicaciones Web, que puede ser muy
largo, hemos optodo por recartarlo con Api Web, pero como nos podemos encon-
rar con que este nombre ya est siendo uiizado por ofa persons le hemos aia
dido el afio 2012 cuando lo hemos creado, teniendo como resultado de nombre
de cuenta apliweb2012. Tened en cuenta que es como vuestro bautizo en la Red,
el nombre que eis deberio ser el mismo que ilies unto ol westo personal
en todo lo que hagdis en Internet. Y, por itm, debéis erearos un avatar que es
‘wuestra imagen identificativa. Los avatares pueden ser fotografias, dibujos artist
cos € incluso representaciones tridimensionales. Un buen tamafo de avatar puede
ser un cvodrado con un famafo de 50 x.50 piseles, aunque luego cade servicio
iene su propio lama y nos plontearé recoriar la imagen sequin sus dimensiones.
Por lo que en primera opcién te recomendamos que utilices una buena fotografia,
las de comet suelen ser los mejores. Evtando que oparezcan oos personas, hay
due tener en cuenta que estamos vendiendo nuestra marca o producto, que somos,
nosotros mismos, cuanto mejor sea esta imagen, mejor valorados estaremos.
CD csissjesus
‘Alahora de elgir el nombre de
Uvorio, hay que tener en cuenta
ios imiaciones que iene Inieret
¢ inches bos qua he ido tocondo
cede servicio, por ejemplo, en
Google solo’ se admit la ti
zacion de letras (02), nimeros
Y puntos, En Twiter se. puede
Unikzar el guién boj, pera no el
{guién. Mientras que @ fahora de
Fogftrar un dominio ls propo,
cava ver #8 permilan me Cour
Binacioncs. Todo esto so ha de
toner en ranlo por coreeguit
unnombre de wsvorio waldo’ en
todos eos.
a T spears wa sec
@..
ora amplior esos amas os raco-
mmendames que lis el arco
fla getion de lo identided digt-
to una nueva hablidad informa
cional y digital» que esta dispo-
nible on esa wel: bipy//wrw
___ vb.edu/bid/24/giones2 him,
@ Actividades
7. sCudntos servicios utilizas
fabitualmente? 4Cémo te
has registrado en ellos?
wWilizos lo cuenta de
‘lgin gran servicio para
exientfcore en os sr
8. Date de alta en Twitter y
‘en Facebook utilizando:
la cuenta de Google que
te hos creado en el Caso
préclico 2. Si en lu con
tro tienes inhabilitadas
las redes sociales, intenta
hacerlo desde casa,
@ Vocabulario. ———
Q cheesy consis
»
Captcha. Acrénimode Completely
‘Automated Public Trin Tes tte
Computers and Humans. Apart.
Se trola de una prueba que per
mile diferencior entre humanos y
robots, evitor que estos climos
creen cuentas en lot servicios,
Para tener una contraseia segura:
‘*Utiza una combinacién de
mayisculas, minéseulas, ni
meros y signos de puntvacién
como I"£5%8,
'* No uses palabras que figuren
fen el diccionario,
‘+ No emplees potrones de tecla-
do (osd, 1234, ete}
‘+ No ullicesinformacién perso:
nal en la contraseia (nombre,
fecha de nacimiento, et.
© 2.3. Sistema de identificacién global
Hoy en dia, ya no basta con disponer de un dominio que nos identifique como empresa
‘o.como persona, se ha de crear un identidad digital global y para ello se han ido crean-
do sislemas que han intentado crear un esténdar, como OpenlD, para unificar nuestra
informacién y no tener que estar confinuamente registrGndones {y con ello dando nues
tnos datos personales cada vez, con los problemas de duplicidad de inform
pueden crear y sobre todo del iempo que nos puede llevar) en todos los servi
huevos que van surgiendo en los que queramos estar. ¥, aunque desde los organismos
52 ha lrabojado por desroal, ofl sha impvsto un esindar de hecho, como
es la utilizaci cuentas de grandes compaiiias como:
Facebook Connect 0 Signin f Connect
Mirosoht et, Passport Gt Passport
Toblo 1.6 Sistemas de velidacién en servicios de terceros de grandes comparias.
‘Aunque también han surgido repositories de identificacién global en proyectos de soft
‘ware libre como es el CMS WordPress que surgié inicialmente como un sistema de blog
(ue se verd en profundidad en la segunda unidad) y utliza Gravatar (Globally Recog:
nized Avatar) para tal fin
Q coc picio
Creacién de una cuenta en Google
Duracién: © 5 minutos Dificultad: © fécil
Objetivo: poder disponer de una cuenta Google tanto para el equipo de trabajo como
para cada miembro del mismo que nos permita abrir nuevos servicios en el futuro,
Material y herramientas: navegador web con conexién a Intemet.
Solucién:
Una cuenta de Google (Google Account!) es una cuenta de usuario que nos permite
ccceder a odos les servicios de Googe, Estas evenios se eniican por un hombre
de usvorio, que se asocia a una direecién de correo. Enire las servicios a los que
podemos occeder con una cuenta de Google se encuentran Gmail, Google Calen
dar, Google Groups, Google Doc, iGoogle, Googles, Blogger, Picasa o YouTube.
‘Aunque cada servicio puede tener una licencia de uso diferente, por lo que tendre-
mos que ir actvando cada servicio la primera vez que lo utlcemos
1. Para empezar podemos buscar en Google por «Cuentas Google» 0 ir direc-
tamenie © a web: hitp:/jaccounts google com/Loginchlnes. 8 lo hciésomos
desde cualquier servicio de Google como podtia ser Gmail, el resultado obte-
rido seria el mismo,
(Comin) iplaoncnacsdbwsoaes ah
Q Caso prictco 2
{Confivocién)
Fig, 110, Cuentas Google para ankar o crerse una nusva ae
2. En nuestro caso, vamos a crear en primer lugar une cuenta para el equipo de 4a,
trabajo y después cada miembro se creard la suye propia siguiendo los pauios -= :
de la identidad virtual ereoda en el anterior Caso préctco. $
3. A continuacién, tendrés que introducir los datos personales asociados a la cuenta, “=
teniendo en cuenta que el nombre de usuario es lo Unico que nunca podras =
cambiar y seré el identficador de lo cuenta. Inrodicela junto con tv nombre wmaabe became dc ata
completo, la contrasefa la tendrés que introducir por duplicado por motvos de
seguridad, ye que no se muestra mientras la introduces. El resto de campos son
opcionales y los podrés inrodveir en cualquier momento desde la configuraciSn
de la cuenta, Solo te faré repetir los coracteres del captcha que uliliza para ost
verificar que eres un humano, aceptar las condiciones del servicio y la politica rio
de privacidad de Google. Y, por fin, haremos clic en el bot6n de Siguiente paso. ace dpe:
‘4. Nos dan la bienvenida. Ya hemos conseguido nuestro objetivo, a partir de este
momento podremos acceder a todos los servicios de Google e incluso « muchos
de terceras empresas con estos datos que hemos introducido. en
‘Scar oage
= spe tn atm
Fig. 11 Ragisro del usuario, Paso 1
Iniroduecién de los datos personales,
Fig, 1.12, Panel de configuracin de ty cuenta Google
5. Por tilimo, sube tu imagen identificativa a la cuenta.
a he Apicrnocinntcn
@ © 2.4, Habilidades digitales
Actividades
Internet puede legor a ser como un cajén de saste o un gran ogujero negro, si empe-
Zzomos @ damnos de alta en servicios sin ringin crteio, porque estén de octualidad,
posiblemente acabemos teriendo una huella digital poco organizeda que orrastremos
{lo largo de toda nuestra vida. Por lo que como punto de portida desde este momento
deberiamos saber qué hemos hecho hasta ahora y qué sabe Internet de nosotros, esto se
) Material y herramientas: los tres principales buscadores de Intemet actualmente
Cuando realizes na busqueda | siguen siendo Google, Yohoo y Bing denito de live de Microsoft estos permiten en
bésica sin comils, los propios sys bsqueds introducir unos comandos que nos van @ ayudar ofilrar el nimero
bbuscodores eliminan los denom ge resultados para encontrar lo que realmente estamos buscando més fécilmente.
nore stop werd. Como sone _Uslidades: en el biog del ibro enes esta entrada: htp://aphweb2012.wordpress
inglésserianestos:|-o,obout,on, €Om/2012/07/09/habilidades-digitales-segun-genis-roca/ 0 en sv equivolente
tie, os, ot be, by, com, de, en, enlace corto hitp://wp.me/p2A4BR-, con nueve videos complementorios que te
for, from, how, in is, i, last, of, ayudardn @ sacar el maximo partido de tus bisquedas.
on, of thatthe hs oO, Sons
what, when, where, who, will, twclons
with, ur the, wo, oe 1.Vomos a empezar con los opciones bésicas, aprende cuéles son y aplica los
ejemplos poniendo tu nombre, 0 ver con qué resultados te sorprenden los di
renies buscadores que uilices © te proponga tu profesor (Tabla 1.7)
Polabra/s cave/s _ Muesta resliados asociodos a estas palabras clove (keywords), Rail V, Lemma Blasco
2 Busca la frase exacta “Roi. Lerme Blasco”
Equivaldrio a un operadorligico [AND]. Busca que contengan los palabras clave
+ marcadas. Algunas pueden ser ignoradas, las muy frecuentes coma las stop words. Para
{sles palabras podemos sor las "” para que las fenga en cuenta sifuesen necesorios.
RailsV+"Lerma
Blasco”
El asteriscasrve como comodin, Busca la frase exacta y la parte dal * se susituys por
cualquier otra palabr. “Roi sLermo-Blosco"
OR Busca que contengan alguna de los polabras clave Rail OR “LermaBloseo*
Excluye los que contengon Ia polabro mercado, Rail V Lemme Blasco
Table 1.7. Opciones béscas de bisquedo web.
2. Otros opciones que puedes vlizar pore fra son limitar el émbito de bisqueda
con drdenes avanzadas (Table 1.8}
site Solo busca en el dominio indicado, site: wwwamegrawhilles
link ‘Muestra los enlaces que apuntan a un deminio 0 pgine. link: woww.megraw-hilles
intile; S010 muestra los que tienen la palabra clave del texto dentro del ul tile, pudiendo poner infil: (“Aplicaciones
més de una ene poréniess, ‘Webs SMR}
inurl | Solo muestra los que tienen la palabra clave en la UR. inurl*Aplicaciones Webr
|e 1.8 Opciones ronzodas de bisqueds wel {Contnie) Aptccions mab secs |
Q Caso prictico 3
{Confivocién)
3, Cada dio se inventan nuevas funcionalidades en los novegodores, como pue-
den ser utilizarlos como calculadoras, conversores de moneda, saber el tiempo
do tu ciudad 0 incluso buscor definiciones de términos (Tabla 1.9.
define + trmino |_Dewelvedefncions dl témino buscada, | dating RSS
veaha + bad Doel peri tops pred veaha el
‘Moneda en moneda | Dewelve el cambio actual entre ambas monedas. ‘euros en dolor
Tebla ‘ones evanzades complementarias de bixquedo web,
aslo cpiecet O sesicsgve.2
Puedes ver todas en inglés: hitp://www.google.com/intl/en/help/eatures. him! £1 Google Gacking conssie en
‘0 en espaol: hitp://www.google.com/intl/es/help/features.html. Eo see sees =
Puedes encontrar algunas opciones més en: hitp://www.comandosdebusqueda. _fdenciel o- hovss de los hero.
com/buscar/google,inlenta probar el mayor nimero de ells, te sugerimos evela. isnac de bigandade Goole
Slonado con fe bosjuada de orchivos por au eter (manos de Bia ee
‘Ahora que yo sabemos sacar mayor partido de nuestras bisquedas en Internet, ofa
‘opcién interesante puede ser suscribirse utlizando la tecnologia RSS o ATOM (busca de
fine RSS en tu buscader)« las noticias 0 los blogs que mas nos interesen. Consiguiendo
un ahorro de tiempo al ser la informacién la que vendré a nosotros y no al reves, como
hasta chora que teniamos que ir consultando sitio por sito si habia alguna novedod
Qovposcs
‘Organizar tus fuentes de informacién con un lector RSS/ATOM a)
son: © iti i ceo ‘
Duracién: © 10 minuios Dificultad: © fécil (
Dispones de un Caso préctico
Objetivo: poder centralizar mediante RSS nuesiras mejores fuentes de informacién. __denominado frefoxaddens-briet
pdf que te explica cémo ogre:
gar el complemento. briaf que
sirve como un lector de RSS.
Material y herramientas: los herramientas que nos permiten hacer una geslién més
adecuada de estos recursos son lectores de RSS, como Google Reader, Bloglines,
MyYahoo!, Neivibes 0 FeedReader.
Usilidades: en nuestro caso, como ya disponemos de una cuenta de Google, uilize-
remos Google Reader
Solucién:
1. Yamos o ir @ www.google.es/reader y nos
autenticaremos.
2. Una vez dentro, la manera de empezar més
répida es suscribrte a grupos de feeds que
nos sugiere el propio lector, ve a Examinar
3. Hoz que fe muesire todos los grupos de que
dispone Google y suscribete en el de Fire:
fox
4, Ya podras empezar a leer las noticias que
sore ee el lecior te troerd a tu suscripcién.
ig —— 5. Ahora busca une fuente de informacion que
te guste y suscribete a ella
Fig. 1.13. Grupos proestablacidos de Google Reader
‘a 1 spain sc
Q,.
En la pagina de W3Schools
lispones de un uorial muy com:
pleto sobre HTML con ejemplos
fnulne inclidos. Puedes encon:
trarlo.en: htp://yeww.waschools.
@ 3.Disefio web
En el siguiente epigrofe vamos a abordar el disefio de paginas web mediante HTML y
CSS, y veromos algunos servicios on-line para la creacién y publicacién de sitios web.
‘Como hemos comentado anteriormente, el lenguaje HTML surgié de la necesidad de
representar y relacionar documentos de hipertexio, y poder comunicaros « través del
otocolo HTTP. Al mismo tiempo que ha ido evolucionando la Web y el uso que se le
1 dado, el lenguaje HTML ha evolucionade con ellos, dando lugar a diferentes versio-
Coe atmlfcicolteon nies 0 esténdares del mismo, introducidos inicialmente por el IETF y posteriormente por
v . _) el W3C
Cina ical hose vein 1.0
mano 1095 Ie dren declare esr fl nod body spinal
Si sep po an
Simpicotn el HIM. 30 pos po EF
Saleen papa decompo oma Nea, Micon San, gel
sama v7 recon deh WE
msc) Incluye soporte para applets, mayor versatilidad en la disposicién del texto y las imagenes, y
cradle er
Etna mars a ood el 38 yo ip, nce ope inlay
Ena s0 ad mejoras de accesibilidad, entre otras cosas.
Esl ad cna
samaor 10% Campa colo mayor dennegdae. Dione dees abso Si Kes
Pen
HTML 4.01 Strict No se aceptan etiquetas obsoletas (deprecated) de estandares anteriores.
WM. 401 Fens Pam lio ded pod tui, ng on hen
HL 0 Fone De opoea amet
ven 10 2000 Sg con ve canbe de XL y HIM
Ein s.gpote prs nao lanes cli, Sedo mao anil
aca Y am) HTML 4.01 Strict.
amuse wove Ica mich odes, ae os un detent us edn ay
Tole 1.10, Veriones de HTML
Fig, 1.14, Logo de Bluofsh
CODA
Tendon wea Sore:
Fig, 1.15, leone de Coda
sopotte @ inlegracion de conteridos multimedia,
© 3.1. Entornos
Las pégines web son documentos de texto plano, cuyo cédigo HTML es interpretodo por
el navegador web. Aunque, para la edicion de estos paginas, bostaria con un simple
editor de texio, existen aplicaciones y entornos especificos para tal fin, con diferentes
, y generalmente, van por po-
res: efiqueta de apertura y de cierre . El fexio entre ombas
eliquetas es el que se ve afectado por ellas. A este conjunto de par de etiqueias y con-
tenido se le conoce como elemento HTML. Ademés, las efiquetas pueden ir anidadas.
Esto quiere decir que, dentro del texto contenido entre dos eliquetas, puede haber otros
pares de etiquetas, 0, lo que es lo mismo, un elemento HTML puede contener otros ele-
menios HTML
@ sesidoies
Fig. 1.16. loge de Dreamweaver C56,
Ki
Fig. 1.17. loge de BlueGrifon
OD sss 90.2
Algunos elementos HTML pus
den mostrarse correctamente en
‘algunos navegaderes, aunque
no se cierte Ia eliquete que los
contiene, pero, en otros, puede
mostrar resultados inesparades,
For este molivo, es convenien:
fe cofirse siempre a lar reco
mendaciones mareadas por los
cestandores,
M1. Descarga Bluegriffon. desde hitp://bluegriffon.or
pages/Download e insidllo ent reese ners!
Escribe algin documento desde la vista Disefio y aé-
dele formato desde la barra de herramientas.
Una vez hecho, observa el cédigo HTML generado,,
mediante la vista Cédigo Fuente.
‘Diet|
Cédigo Fuente
12, Accede « la pagina de Tinkerbin (hitp://inkerbin.com/)
y copia en la seccién HTML el ejemplo de la Figura 1.18.
Observa el resutodo final. C5piolo también en un docu
mento de texto con ty editor de texto favorito (ged, note
pad), y dbeelo con un navegador para ver el resulad. T spears wa sec
Fi. 1.18, Esquema de una pagina web
>
HTML no distingue entre moyis:
culos y mindsculas, tanto. en
eliquetas HTML como en sus
aibutes, Aun as, el W3C reco:
mmienda el uso de minisculas,
tonto pora los eiquetas como los
tributes en HTML 4 y exige 20
uso en XHML
La sintexis de los otbutos reco:
mmienda que lor volores apa.
rezcon siempre entre comilos,
generalmente dobles, aunque
también ze permiton las comillas
simples (por ejemplo, s el conte-
nido tine comilas dobles
Q,.
En la pagina del w3schools,
hitp://www.w3schools.com/
himi/himl-forms.asp, tenes un
tamplio tutorial sobre formolarics
en HTML
Flementos bésicos para defi
I Estructura de una pagina HTML
Los péginos HTML tienen un formato bien dfinide y siguen el siguiente esquema de la
Figura 1.18. En ella podemos apreciar los siquiantes elementos:
1. La decloracién de documento HTML con DOCTYPE.
2. Elemento html, que describe la pégina propiamente dicha, y es definido entre las
ef quetas y
3. Elemento head, que contiene la cabecera del documento. Esto cabecera contiene
informacin acerca del documento, tal como enlaces a hojas de estilo, metainforme
ibn, pero no tiene que ver con la cabecora que vemos en el resultado de la pagina,
4, Comentarios, indicados entre los simbolos .
5. Elemento body, con el cuerpo en si de la pagina y que contiene los elementos nece-
sorios para su visvalizocién, En sv contenido tenemos aquellos elementos que nos
ayudan @ organizar y formatear lo pégina, tales como cabeceras, pérrafos, ec
1H Elementos y atributos HTML
Como ya dijimos, un elemento HTML es todo aquello contenido entre una etiqueta de
‘pertura y una aliqueta de ciero. Ademés, un elemento HTML puede conlener dento
‘otros elementos HTML anidados, tal y como pudimos ver en la Figura 1.18
Lo sintaxis de los elementos HTML sigue los siguientes reglas:
1.Los elementos HTML empiezan con une etiqueta de aperture y lerminan
con una etiqueta de cietre .
2. Puede haber elementos HTML que no fengan contenido, elementos vacios. En este
080, para respetar el esténdor XHTML, toda efiqueta que se abra debe cerrarse,
puede abreviarse con una sola etiqueta et i quet a/>
Por otra parte, algunos de estos elementos pueden necesitar informacién adicional. Los
‘otributos proporcionan esta informacién acerca de los elementos HTML, y se especfican
siempre en la etiquata de inicio mediante pares nombrem'valor”. Veémoslo con un por
de ejemplos
Ejemplo 1: a eliquete inseria una imagen en el documento. El otrbute src indica
laut cial image, es como ls aibuos width y hel ght, ue indian ol oncho
y alto de lo imagen
, vilizado para introducir enlaces, necesita del airbui href
para indicar la direccién a la que hace referencia el enlace. En este caso, el texto «Haz
le para ver mi web» ser6 un enloce a lo pagina hitp://alumnesmeweebly.com.
Haz clic para ver mi web
Je
Veamos en las siguientes tablas-resumen los principales elementos HTML, junto con su
descripcién y algunos ejemplos
la estructura de los documentos
tal>vical> HIML20. | Boman riz dem donor HM
HIML 20. | Con norman oro aos den dose HA
andes HIML20 Corre eleanrid mower ene dzone HIM.
Tobe 1.1, Elementos bésicos para defnir la eeructure de los documentos Aptccions mab secs |
Elementos de la cabecera
HTML 2.0 Incluye otros documentos enlazodos, tales como hojas de estilo 0 scrips.
ocr pe> Expectica un elemento depo scrip, para aad comportanieno ala pigina
—HTML2.0 _‘espectivamente, que faciltarén la indexocién de contenidos alos motores de busqueda.
neta name~descri ption” content="Bjeaplo para Aplicaciones Web">
-eweta nane="keynords” content="APK Web SMR HTM, C3S">
Toble 1.12, Blementos de fa cabecera
Hlementos del cuerpo de la pégina
‘Segiin lo forma de visvalizar los elementos del cuerpo de la pagina, estos pueden ser
en bloque o en linea pose ees m
los elementos de bloque se muestran como objetos rectongulares, con mérgenes, altura
y encho independienies de sus elementos cicundantes. e
los elementos en linea son tratados como parte del fio de texto, sin méigenes, alto o
‘ancho, ¢ insertando saltos de linee cuando se llega al final. Estos elementos no pueden
ser insertados directamente dentro del body, sino que deben estar dentro de un elemen-
to de bloque.
delimite I los de ivel, el
ade los de seccones a ferns nivale:
define listosordenad,
wee «+
THTML2.0 | raduce un pérofo en la pégina, Es delos elementos més uilzodos. sheen Aiiade titulos de life es:
delimite I los de ivel, el
ade los de seccones a ferns nivale: dlimitolos ule de mayer nivel, el sigene
: HIML20 piveles y asi hasta .
hth
calcio Delve diferentes pos de sts y su elementos
eee +
y asi hasta .
hth
calcio Delve diferentes pos de sts y su elementos
eee +
- c/ull> define lista no ordenodos.
aa HIML20_»