Anda di halaman 1dari 722

A C C E S O A L O S C A P T U L O S A D IC IO N A L E S D E L L IB R O

Para acceder a los captulos 19 a 29 y apndices E y F (todos en ingls)


m encionados en el texto, visite el sitio W eb del libro:

w w w .p earso n en esp a o l.co m /d eitel


U tilice una m oneda para descubrir el cdigo de acceso.
(N o use objetos filosos |>orque podra daarlo).
r

l_

IM PO R T A N TE
Este cdigo de acceso tiene vigencia de 2 dias!
A segrese q u e el cdigo no a p a re z c a d a a d o ya q u e slo pued e u s a rs e una vez
y no s e r re e m p la z a d o en n in g n caso.

Internet &
World Wide Web
CMO PROGRAMAR

Internet &
World Wide Web
CMO PROGRAMAR
Quinta edicin
Paul Deitel
D e i te l & A ssociates, In c.

Harvey Deitel
D e ite l & A ssociates, Inc.

Abbey Deitel
D e ite l & A ssociates, Inc.
T

r a d u c c i n

Alfonso Vidal R om ero E lizondo

Ingeniero en Sistemas Electrnicos


ITESM , Campus Monterrey
R

e v b i n

t c n ic a

Sergio Fuenlabrada V eliz que/


Edna M artha M iran d a Chvcz
Jos L uis Lpez G oytia
Ju d ith Sonck Ixdczm a
M ario A lberto Sesma M artnez
s k a r A rm ando G m ez C oronel

Academia de Computacin
Unidad Profesional Interdisciplinaria de Ingeniera
y Ciencias Sociales y Adm inistrativas (UPI1CSA)
Instituto Politcnico Nacional, Mxico
S andra Luz G m ez C oronel

Academia de Electrnica
Unidad Profesional Interdisciplinaria de Ingeniera
y Tecnologas Avalizadas (UPITEA)
Instituto Politcnico Nacional, Mxico

PEARSON

D a to s d e c a ta lo g a c i n b ib lio g r fic a

DEITEL, PAUL; DEITEL, HARVEY Y DEITEL, ABBEY


Cmo programar Internet & World W ide Web
Quinta edicin
PEARSON EDUCACIN. Mxico. 2014
ISBN: 978-607-32-2290-7
rea: Com putacin
Formato: 20 x 25.5 cm

Pginas: 720

Authorizcd translation from thc English languogc cdition cntitlcd INTERNET AND WORLD W IDE WEB HOW TO PROCiRAM,
5th cdition by (HARVEY & PAUL) DEITEL & ASSOCIATES; HARVEY DEITEL; ABBF.Y DEITEL, publishcd by Pcarson
Education, Inc., publishing as Prenticc Hall, Copyright C 2012. Alt rights rcscrvcd.
ISBN 9780132151009
Traduccin autorizada de la edicin en idioma ingles titulada IN IER N ET AND WORLD WIDE WEB HOW TO PROGRAM,
5* edicin por (HARVEY & PAUL) DEITEL & ASSOCIATES; HARVEY DEITEL; ABBEY DEITEL, publicada por Pcarson
Education, Inc., publicada como Prentioe Hall, Copyright O 2012. Todos los derechos reservados.
Esta edicin en espaol es la nica autorizada.
QUINTA EDICIN, 2014

Edicin en

esp a o l

Direccin General:
Direccin Educacin Superior:
Editor Sponsor:
Editor de Desarrollo:
Supervisor de Produccin:
Gerencia Editorial
Educacin Superior Latinoamrica:

Philip de la Vega
Mario C o nueras
Luis M. Cruz Castillo
c-mail: luis.cniz@pearson.com
Bcmardino Gutirrez Hernndez
Gustavo Rivas Romero
Marisa de Anta

D.R. 2014 por Pcarson Educacin de Mxico, S.A. de C.V.


Atlaoomulco 500-5o. piso
Col. Industrial Atoto, C.P. 53519
Nnucalpan de Jurez, Estado de Mxioo
Cmara Nacional de la Industria Editorial Mexicana. Reg. nm. 1031.
Reservados todos los derechos. Ni la totalidad ni parte de esta publicacin pueden reproducirse, registrarse o transmitirse, por un
sistema de recuperacin de informacin, en ninguna forma ni por ningn medio, sea electrnico, mecnico, foloquimico, magntico
o clectroptico, por fotocopia, grabacin o cualquier otro, sin permiso previo por escrito del editor.
El prstamo, alquiler o cualquier otra forma de cesin de uso de este ejemplar requerir tambin la autorizacin del editor o de sus
representantes.
ISBN VERSIN IMPRESA: 978-607-32-2290-7
ISBN VERSIN E-BOOK: 978-607-32-2291-4
ISBN F.-CHAPTF.R: 978-607-32-2292-1

Impreso en Mxico. Printed in Mxico.


1 2 3 4 5 6 7 8 9 0 - 16 15 14 13

PEARSON

www.pearsonenespanol.com

En memoria de TauC(.Baran,
diseador de Ca red de comunicaciones distribuidas y de [a
conmutacin de paquetes, que Ce sobreviven y form an Ca base
de Cos protocolos u tidzados en Internet en Ca actuaddad.
Paul, Harvey y Abbey D ettel

Marcas registradas
deitrl ,

d insecto con los dos pulgares hacia artiba y

dive into

son marcas registradas de Oeitel & Associates, Inc.

Apache es marca rcgisrmda de The Apache Software R>undation.


Apple, iPhonc, iPad, OS y Safari son marcas registradas de Apple. Inc.
CS S, D O M , X H T M L y XM L son marcas registradas del Consorcio World W ide Web.
Firefbx es marca registrada de Mozilla Foundation.
Googlc es marca registrada de Google. In c
JavaScript, Java y todas las marcas basadas en Java son marcas comerciales o registradas de Oracle en Estados Unidos
y otros pases.
Microsoft, Internet Explorer, Sihrerlight y el logotipo de W indows son marcas comerciales o registradas de Microsoft
C orporation en Estados U nidos y/o en otros pases.
O pera es marca registrada de O pera Software.

Prefacio

x ix

Antes de empezar

xxxi

Introduccin a las computadoras e Internet

1.1

Introduccin

1.2

Internet en la industria y la investigacin

1.3

H T M L 5 , CSS3, JavaScript, Canvas y jQ u ery

1.4

D em ostraciones

1.5

Evolucin de Internet y de la W orld W ide W eb

10

1.6

Fundam entos de la W eb

12

1.7

A rquitectura de aplicaciones multinive!

16

1.8

C om paracin entre las secuencias de com andos del lado del cliente y del lado del servidor

17

1.9

C onsorcio W orld W ide W eb (W 3C )

18

1.10

W eb 2.0: a socializar

18

1.11

Jerarqua de datos

23

1.12

Sistemas operativos

25

1.12.1

Sistemas operativos de escritorio y de N otcbook

25

1.12.2

Sistemas operativos mviles

26

1.13

T ipos de lenguajes de program acin

27

1.14

Tecnologa de objetos

29

1.15

M antenerse actualizado con las tecnologas de la inform acin

31

Introduccin a HTM L5: parte I

2.1

Introduccin

38

2.2

Edicin d e H T M L 5

38

2.3

El prim er ejemplo de H T M L 5

38

2.4

Servicio de validacin de H T M L 5 del W 3 C

41

2.5

Encabezados

41

37

viii

Contenido

2.6

V inculacin

42

2.7

Imgenes

45

2.7.1

A tributo a l t

47

2.7.2

Elem entos vacos

47

2.7.3

Uso de imgenes com o hipcrvnculos

47

2 .8

Caracteres especiales y reglas horizontales

49

2 .9

Listas

51

2 .1 0

Tablas

54

2.11

Form ularios

58

2.12

Vinculacin interna

65

2 .1 3

Elem entos m eta

67

2.1 4

Recursos Web

69

Introduccin a HTM L5: parte 2

3.1

Introduccin

77

3.2

Nuevos tipos 1nput de form ularios de H T M L 5

77

3.3

76

3.2.1

in p u t tip o c o lo r

80

3.2.2

I n p u ttip o d a te

82

3.2.3

in p u t tipo d a te tim e

82

3.2.4

in p u t tipo d a te tlm e - lo c a l

82

3-2.5

in p u t tip o em ail

83

3.2.6

in p u t tip o month

84

3.2.7

in p u t tiponum ber

84

3.2.8

in p u t tipo ran g e

85

3-2.9

in p u t tipo s e a rc h

85

3.2.10

in p u t tip o t e l

86

3-2.11

In p u t tip o tim e

86

3.2.12

in p u t tipo u r l

87

3.2.13

In p u t tipo week

87

Elem entos in p u t y d a t a l i s t y el atrib u to au to co m p lete

87

3-3.1

A tributo a u to c o n p le te del elem ento in p u t

87

3.3.2

Elem ento d a t a l i s t

90

ix

Elem entos de estructura de pgina

90

3.4.1

Elem ento head er

96

3.4.2

FJem cnto nav

96

3.4.3

Elem ento f i g u r e y elem ento f ig e a p tio n

96

3.4.4

Elem ento a r t i c l e

96

3.4.5

Elem ento summary y elem ento d e t a l l s

96

3.4.6

Elem ento s e c tio n

96

3.4.7

Elem ento a s ld e

96

3.4.8

Elem ento m eter

97

3.4.9

Elem ento f o o te r

98

3.4.10

Semntica a nivel de texto: elem ento mark y elem ento wbr

98

Introduccin a las hojas de estilo en cascada


(Cascading Style Sh eets , CSS): parte I

105

Introduccin

106

Estilos en lnea

106

Hojas de estilo incrustadas

108

Estilos conflicruados

111

Vinculacin de hojas de estilo externas

114

Pos icio nam iento de los elementos: posicionam icnto absoluto, z -In d e x

116

Posicionamiento de los elementos: posicionam iento relativo, span

118

Fondos

120

Dim ensiones de los elem entos

122

Modelo de cajas y flujo del texto

123

Tipos y consultas de medios

127

M ens desplcgables

130

(O pcional) H ojas de estilo de usuarios

132

Recursos W eb

136

Contenido

Introduccin a las hojas de estilo en cascada


(Cascading Style Sh eets , CSS): parte 2

142

5.1

Introduccin

143

5.2

Sombras de texto

143

5-3

Esquinas redondeadas

144

5.4

C olor

145

5.5

Sombras de cajas

146

5.6

G radientes lineales: introduccin a los prefijos de proveedor

148

5.7

G radientes radiales

151

5.8

(O pcional: W eb K it solam ente) Trazo de texto

153

5.9

M ltiples imgenes d e fondo

153

5.10

(O pcional: W ebK it solam ente) Reflejos

155

5.11

Bordes de imgenes

156

5.12

Animacin: selectores

159

5.13

Transiciones y transform aciones

162

5.13.1

Las propiedades t r a n s l t l o n y tr a n s fo rm

162

5.13.2

Inclinacin

164

5.13.3

Transiciones entre imgenes

165

5.14

Descarga de fuentes Web y la regla fo n t-fa c e

166

5.15

M dulo de diseo de caja flexible y selectores : n th -c h i Id

168

5.16

D iseo m ulticolum na

171

5.17

Consultas de m edios

173

5.18

Recursos W eb

177

JavaScript:
introduccin a las secuencias de comandos

185

6.1

Introduccin

186

6.2

Su prim era secuencia de comandos: m ostrar una lnea de texto con


JavaScript en una pgina W eb

186

C m o modificar su prim era secuencia de com andos

189

6.3

Contenido

6 .4

Cm o obtener la entrada del usuario m ediante dilogos prompt

xi

192

6.4.1

Pgina de bienvenida dinm ica

192

6.4.2

Suma de enteros

196

6 .5

C onceptos de la m em oria

199

6 .6

A ritm tica

200

6 .7

Toma de decisiones: operadores de igualdad y relacinales

202

6 .8

Recursos W eb

207

JavaScript: instrucciones de control I

7.1

Inirod uccin

215

7 .2

Algoritm os

215

7 .3

Pscudocdigo

215

7 .4

Instrucciones de control

215

7 .5

Instruccin de seleccin 1 f

218

7 .6

Instruccin de seleccin i f . . . e l s e

219

7 .7

Instruccin de repeticin whi le

223

7 .8

Form ulacin de algoritmos: repeticin controlada por co n tad o r

225

7 .9

Form ulacin de algoritmos: repeticin controlada por centinela

228

7 .1 0

Form ulacin de algoritmos: instrucciones de control anidadas

234

7.11

O peradores de asignacin

238

7 .1 2

O peradores de increm ento y decrcm ento

239

7 .1 3

Recursos W eb

242

JavaScript: instrucciones de control II

8.1

Introduccin

252

8.2

Fundam entos de la repeticin controlada por contador

252

8.3

Instruccin de repeticin f o r

253

8.4

Ejemplos sobre el uso de b instruccin f o r

256

8.5

Instruccin de seleccin m ltiple svritch

261

8.6

Instruccin de repeticin d o . . .w h lle

264

8.7

Instrucciones b reak y c o n tin u

266

214

251

Contenido

8.8

O peradores lgicos

268

8.9

Recursos W eb

271

JavaScript: funciones

9.1

Introduccin

279

9.2

M dulos de program as en JavaScript

279

9.3

Definiciones de (unciones

280

9.3-1

La (uncin cuadrado definida por el program ador

281

9.3.2

La (uncin mximo definida por el program ador

283

278

9.4

Notas sobre las (unciones definidas por el program ador

285

9.5

G eneracin de nm eros aleatorios

286

9.5.1

Escalar y desplazar nm eros aleatorios

286

9-5.2

Visualizar imgenes aleatorias

287

9.5.3

T irar el dado repetidas veces y m ostrar las estadsticas

291

9.6

Ejemplo: Juego de probabilidad; introduccin a los elem entos au d io y v id e o de H T M L 5

296

9 .7

Reglas de alcance

306

9.8

Funciones globales de JavaScript

308

9.9

Recursividad

309

9 .1 0

C om paracin entre recursividad e iteracin

313

10

JavaScript: arreglos

10.1

Introduccin

325

10.2

Arreglos

325

10.3

Declaracin y asignacin de arreglos

327

10.4

Ejemplos del uso de arreglos

327

10.4.1

Creacin, iniciaiizacin y aum ento del tam ao de arreglos

327

10.4.2

Iniciaiizacin de arreglos con listas inidalizadoras

331

10.4.3

Suma de los elem entos de un arreglo con f o r y f o r . . . in

332

10.4.4

Uso de los elem entos de un arreglo com o contadores

334

10.5

G enerador de imgenes al azar m ediante el uso de arreglos

324

337

Contenido

x i

10.6

Referencias y parm etros de referencia

339

10.7

Paso de arreglos a funciones

340

10.8

O rdenam iento de arreglos m ediante el m todo s o r t de A rray

343

10.9

Bsqueda en arreglos con el m todo 1 ndexOf de A rray

344

10.10

Arreglos m ultidim ensionales

347

I I

JavaScript: objetos

360

11.1

Introduccin

361

11.2

O bjeto Math

361

11.3

O bjeto S tr in g

363

11.3.1

Fundam entos de caracteres y cadenas

363

11.3.2

M todos del objeto S tr ln g

363

11.3.3

M todos de procesam iento de caracteres

365

11.3.4

M todos de bsqueda

366

11.3.5

D ivisin de cadenas y obtencin de subeadenas

369

11.4

O bjeto Date

371

11.5

O bjetos Bool ean y Number

376

11.6

O bjeto document

377

11.7

Bsquedas favoritas en T w itter alm acenam iento W eb de H T M L 5

378

11.8

Uso de JS O N para representar objetos

385

12

Modelo de objetos de documento (D O M ):


objetos y colecciones

395

12.1

Introduccin

396

12.2

M odelado de un docum ento: nodos y rboles del D O M

396

12.3

Recorrido y modificacin de un rbol de D O M

399

12.4

Colecciones del D O M

409

12.5

Estilos dinm icos

411

12.6

Usa de un tem porizador y de estilos dinm icos para crear efectos anim ados

413

Contenido

Modelo de objetos de JavaScript:


un anlisis ms detallado
introduccin

423

Repaso del evento lo a d

423

El evento mousemove y el objeto e v e n t

425

Sustituciones con mouseover y mouseout

429

Procesamiento de form ularios con focus y bl ur

433

Ms procesam iento de form ularios con su b m it y re s e t

436

Burbujeo de eventos

438

Ms eventos

440

Recurso Web

440

HTM L5: introduccin a canvas

44

Introduccin

445

Sistema de coordenadas de canvas

445

Rectngulos

446

Uso de rutas para dibujar lincas

448

D ibujo de arcos y crculos

450

Sombras

452

C u n a s cuadrticas

454

C u n as de Bezier

456

G radientes lineales

457

G radientes radiales

459

Imgenes

461

M anipulacin de imgenes: procesam iento de los pxeles individuales de un canvas

463

Patrones

467

Transform aciones

468

14.14.1

M todos s c a le y t r a n s a t e : dibujo de elipses

468

14.14.2

M todo r o t a t e : creacin de una anim acin

470

14.14.3

M todo tr a n s f o m : dibujo de rectngulos sesgados

472

Contenido

XV

Tocto

474

Ajuste del tam ao del elem ento canvas para llenar la ventana del navegador

476

Transparencia alfa

477

Com posicin

479

J u e g o del c a n

482

14.19.1

D ocum ento de H T M L 5

484

14.19.2

Variables de instancia y constantes

484

14.19.3

Funcin c o n f ig u r a r Juego

486

14.19.4

Funciones In lc ia rT e m p o riz a d o r y d eten erT em p o rlzad o r

487

14.19.5

Funcin re in ic a rE le m e n to s

487

14.19.6

Funcin nuevoJuego

488

14.19.7

Funcin a c tu a lI z a r P o s ic io n e s : anim acin m anual cuadro por cuadro


y deteccin de colisiones sim ple

489

14.19.8

Funcin d ispararB alaD eC anion

492

14.19.9

Funcin a l InearC anion

493

14.19.10 Funcin d ib u j a r

494

14.19.11 Funcin m ostrarO lalogoJuegoT erinlnado

496

M todos save y r e s to r e

496

Una nota sobre SVG

498

Una nota sobre canvas 3D

499

XM L

51 I

Introduccin

512

Fundam entos de X M L

512

Estructuracin de datos

515

Espacios de nom bres de XM L

521

Definiciones de tipo de docum ento (D T D )

523

D ocum entos de esquemas X M L del W 3 C

526

Vocabularios de XM L

534

15.7.1

M athM L

534

15.7.2

O tros lenguajes de marcado

537

xvi

Contenido

15.8

Lenguaje de hojas de estilos cxtcnsiblc y transform aciones XSL

538

15.9

M odelo de objetos de docum ento (D O M )

547

15.10

Recursos W eb

565

16

Aplicaciones enriquecidas de Internet


habilitadas para A jax con X M L y JSON

16.1

Introduccin

571
572

16.1.1

C om paracin entre aplicaciones Web tradicionales y aplicaciones Ajax

573

16.1.2

Aplicaciones W eb tradicionales

573

16.1.3

Aplicaciones W eb Ajax

574

16.2

Aplicaciones enriquecidas de Internet (RIA) con Ajax

574

16.3

H istoria de Ajax

577

16.4

Ejemplo crudo de Ajax m ediante el uso del objeto XMLHttpRequest

577

16.4.1

Solicitudes asincronas

578

16.4.2

M anejo de excepciones

581

16.4.3

Funciones de rcrrollam ada (callbadc)

582

16.4.4

Evento, propiedades y m todos del o b jeto XMLHttpRequest

582

16.5

Uso de XM L y el D O M

583

16.6

Creacin de una aplicacin real com patible con Ajax

587

16.6.1

Uso de JS O N

587

16.6.2

Funcionalidad enriquecida

588

16.6.3

Interaccin con un servicio W eb en el servidor

597

16.6.4

Anlisis d e datos d e JS O N

597

16.6.5

C rear elem entos de H T M L 5 y establecer manejadoras de eventos al instante

598

16.6.6

Im plem entacin de escritura adelantada

598

16.6.7

Im plem entacin de un form ulario con validacin asincrona

599

I7

Servidores W eb (Apache y US)

605

17-1

Introduccin

606

17.2

Transacciones de H T T P

606

17.3

A rquitectura de aplicacin m ultinivel

610

17.4

C om paracin entre secuencia de com andos del lado cliente y del lado servidor

611

x v ii

Acceso a servidores Web

611

Instalacin de Apache, M ySQ L y P H P

611

17.6.1

Instalacin de XAM PP

612

17.6.2

Ejecucin de X A M PP

612

17.6.3

Pruebe su configuracin

613

17.6.4

Ejecucin de los ejemplos m ediante el servidor H T T P Apache

613

Microsoft IIS Express y W cbM atrix

614

17.7.1

Instalacin y ejecucin de IIS Express

614

17.7.2

Instalacin y ejecucin de W ebM atrix

614

17.7.3

Ejecucin de los ejemplos del lado cliente usando US Express

614

17.7.4

Ejecucin de los ejemplos de P H P usando IIS Express

615

Base de datos: SQL, M ySQL, LIN Q y Java DB

617

Introduccin

618

Bases de datos relacinales

618

G eneralidades acerca de las bases de datos relacinales:


h base de datos Books

620

SQ L

623

18.4.1

C onsulta SELECT bsica

624

18.4.2

La clusula WHERE

624

18.4.3

La clusula ORDER BY

626

18.4.4

C m o fusionar datos de varias rabias: INNER J0IN

628

18.4.5

La instruccin INSERT

629

18.4.6

La instruccin UPDATE

631

18.4.7

La instruccin DELETE

631

M ySQL

632

18.5.1

Instrucciones para configurar una cuenta de usuario de M ySQ L

633

18.5.2

Creacin de bases de datos en M ySQL

634

(O pcional) C onsultas integradas en lenguajes (L IN Q ) de M icrosoft

634

18.6.1

C onsultar u n arreglo d e valores i n t m ediante L IN Q

635

18.6.2

C onsultar u n arreglo de objetos Employee m ediante L IN Q

637

18.6.3

C onsultar una coleccin genrica m ediante L IN Q

642

(O pcional) L IN Q para S Q L

644

x v ii i

Contenido

18.8

(O pcional) C onsultar una base de datos con L IN Q

18.9

645

18.8.1

Creacin de clases d e L IN Q para S Q L

645

18.8.2

Vinculaciones de datos entre controles y las clases de L IN Q para S Q L

648

(O pcional) V inculacin dinm ica de resultados de consultas de L IN Q para S Q L

652

18.9.1

Creacin de b G U I DisplayQueryResul t

652

18.9.2

Codificacin de la aplicacin D isp la y Query R e s u lt

654

18.10

Java D B /A pache D erby

656

Caracteres especiales de H TM L

Al

Colores de H TM L

Bl

Tabla de precedencia de operadores de JavaScript

Cl

Conjunto de caracteres ASCII

DI

ndice

11

Los cap tu lo s 19 a 2 9 y apndices E y F se en cu en tran


en su id io m a original (ingls) en el sitio web del libro.
19

PHF

20

Web App Development with A SP .N ET in C#

2I

Web App Development with A SP .N ET in

22

Web Services in C#

23

Web App Development with A SP .N ET in Visual Basic

24

Web App Development with A SP.N ET in V B: A Deeper Look

25

Web Services in Visual Basic

26

JavaServer* Faces Web Apps: Part I

27

JavaServer' Faces Web Apps: Part 2

28

JavaServer in Java

29

HTML5 WebSockets and W eb Workers

Apndices E y F

C#: A

Deeper Look

La ciencia, la tecnologa y las diversas formas de arte,


todas unen a la hum anidad en un solo sistema nter conectado.
-Z h o res Alcksandrovich M edvcdc

Bienvenido a la program acin en Internet y Web. Este libro presenta tecnologas de com putacin de vanguardia
para estudiantes, profesores y desarro liado res de software.
El m undo de la com putacin en especial, el de la program acin en Internet y W eb cam bia d e manera
constante. Esta nueva edicin se enfoca en H T M L 5 y las tecnologas relacionadas en su ecosistema. Analizare
m os con detalle las nuevas y em ocionantes caractersticas de H T M L 5 , C SS3. la ms reciente edicin de JavaS
cript (EC M A Scripr 5) y el elem ento canvas de H T M L 5 . N os enfocam os en tecnologas clave populares q u e le
ayudarn a crear aplicaciones basadas en W eb e In te rn e t p ara n te ra c tu a r co n o tras aplicaciones y bases de
datos, las cuales form an la base de los tipos de aplicaciones en red de nivel empresarial que son populares en la
industria actual.
Este libro es apropiado para cursos de program acin del lado del d ie n te y del lado del servidor, tan to a nivel
introductorio com o interm edio. Tam bin es adecuado para profesionales que deseen actualizar sus aptitudes
tcnicas con las tecnologas ms recientes de program acin en Internet y Web.
La base del libro es el reconocido m todo de cdigo activo de Dcitel: los conceptos se presentan en el
contexto de docum entos H T M L 5 funcionales com pletos, hojas de estilo CSS3, secuencias de com an d o s de
JavaScript, docum entos de X M L. program as y archivos de bases de datos, en vez de hacerlo a travs de frag
m entos separados de cdigo. C ada ejemplo de cdigo com pleto viene acom paado de ejemplos de ejecuciones
reales. El cdigo fuente est disponible, en ingls, en la pgina del au to r (w v w .d eitel .co m /b o o k s/i w 3htp5/) y
en el sitio W eb de este libro.
Si surge alguna d u d a o pregunta a m edida q u e lea el libro, enve u n correo electrnico a d e i t e l f l d e i t e l .
com; le responderem os oportunam ente. Para o b ten er actualizaciones sobre este libro, visite *Avw.deitel .com/
b o o k s /iw 3 h tp 5 /, nase a n u estras co m u n id ad es en Facebook (w w w .fa c e b o o k .c o m /d e ite lfa n ) y T w itter
(@ d eitel), o suscrbaseal boletn electrnico D ciut* Suzz O nline (www . d e i t e l .c o m /n e w s le tte r /s u b s c r ib e .
htm l).

Caractersticas nuevas y actualizadas


H e aqu las actualizaciones que realizamos en esta nueva edicin:
N uevo capitulo 1. El nuevo captulo 1 atrae el inters de los estudiantes con hechos y cifras interesantes,
para em ocionarlos en cuanto al hecho de estudiar el desarrollo de aplicaciones de Internet y W eb. El
captulo incluye una tabla de una parte de la investigacin hecha posible por las com putadoras e Inter
net, las tendencias d e tecnologa y discusiones sobre el hardw are actuales, una tabla de publicaciones de

Prefacio

XX

negocios y d e tecn o lo g a, y sitio s Web q u e le ay u d arn a m a n te n e rse actu alizad o co n las noticias
y tendencias ms recientes sobre tecnologa, adems de ejercicios actualizados.

N uevas caractersticas de H T M L 5. El captulo 3 introduce las caractersticas m s recientes de H T M L 5 ,


incluyendo los nuevos tipos de entradas de form ularios de H T M L 5 y los elem entos de estructura de
pgina (figura 1). luis nuevas caractersticas de H TM 1.5 no se imp/ementan de manera universal en todos
los tuivegadores Web. E sto est cam biando a m edida que los proveedores de navegadores liberan nuevas
versiones. H ablarem os sobre m uchas caractersticas adicionales d e H T M L 5 en el resto del libro.

Nuevas caractersticas de HTML5

Tipos de entradas deformulario


color
email
search
week

date
nooth

datetlne
nunber
tlM
elemento d a ta lls t

te l
elemento Input

d atetln e-lo cal


range
url
atributo autoconplete

Elementos de estructura de pgina


header
a r tlc le
meter

nav
sumnary
footer

figure
flgcaptlon
sectlon
aslde
semntica a nivel de texto (marcado de saltos de lnea potenciales)

Figura I | Nuevos tipos de entradas de formulario y elementos de estructura de pgina de HTML5.

N uevas caractersticas de C SS3. E l captulo 5 in tro d u c e las caractersticas m s recientes d e CSS3


(figura 2). Las nuevas caractersticas de CSS3 no se implementan de numera universal en todos los navega
dores Web. Esto est cam biando a medida que los proveedores de navegadores liberan nuevas versiones.

Nuevas caractersticas de CSS3


som bras d e texto

esquinas redondeadas

color

som bras d e cuadros

gradientes lineales

gradientes radiales

m ltiples im genes de fo n d o

bordes de im genes

anim aciones

transiciones

transform aciones

regla f o n t- fa c e

M dulo de d ise o d e cu ad ro

selectores : n t h - c h i l d

diseos de varias co lu m n as

flexible
consultas d e m edios

Caractersticas que no son estndar


tex t-stro k e

reflexin

Figura 2 | Nuevas caractersticas de CSS3

Caractersticas nuevas y actualizadas

xxi

Tratam iento a ctualizado de JavaScript. Reforzamos la cobertura de JavaScript en los caprulos 6 al


16. JavaScript se ha convertido en el lenguaje de secuencias de com andos del lado del cliente estndar
por excelencia para aplicaciones basadas en W eb, debido a su naturaleza altam ente portable. N uestro
enfoque, que es apropiado para principiantes, sirve para dos fines: introduce las secuencias de com andos
del lado del cliente (captulos 6 al 16) para que las pginas W eb sean ms dinm icas e interactivas, y
proporciona la base de program acin para las secuencias de com andos del lado del servidor en P H P que
se presentan en el capitulo 19. JavaScript es sim ilar a las caractersticas fundam entales de los lenguajes
C , C++, C # y Java. U na vez que aprenda JavaScript le ser ms fcil aprender estos otros lenguajes de
program acin populares.

Nuevo canvas d e H T M IS . El captulo 14 sustituye los captulos de Flash y Silverlight de la edicin an te


rior con el nuevo elem ento canvas de H T M L 5 para grficos en 2 D (figura 3). canvas est integrado al
navegador, con lo que se elim ina la necesidad de com plem entos com o Flash y Silverlight y nos ayuda a
m ejorar el rendim iento y la conveniencia, adem s de reducir costos. Al final del captulo usar canvas
para crear un juego d e can anim ado con efectos de audio, com o el que creamos en Flash en ediciones
anteriores de este libro.

Caractersticas de canvas de HTML5


rectngulos

lincas

arcos y crculos

so m b ras

curvas cuadrticas

curvas de Bczicr

gradientes lineales

gradientes radiales

m an ipulacin de imgenes

imgenes

patrones

Transform aciones

transparencia alfa

composicin

Figura 3 | Caractersticas de canvas de HTML5.

Ejercicios de m u ltim ed ia nuevos y a ctualizados. El captulo 14 incluye varios ejercidos m ultim edia
nuevos y actualizados (figura 4).

Ejercicios de multimedia nuevos y actualizados


M ejoras al juego d d ca n

Transicin aleatoria e n tre im genes

R d o j digital

A nim acin

M arquesina de im genes desplaza ble

A udio de fo n d o

Signo de m arquesina
dcsplazablc

G en erad o r de rom pecabezas


autom tico

R d o j anlogo
G en erad o r d e laberintos y cam in an te

A udio dinm ico y caleid o s


copio grfico

C arrera de caballos

Tejo

D iseador d e fuegos artificiales

Planificador d e pisos

B andido de un solo brazo

A certijo del 15

P robador d e tiem p o de reaccin

Juego d e billar

C olorear fotografas c im genes

R o b o t aspiradora

C rucigram a

en blanco y negro

Im genes giratorias

Figura 4 | Ejercicios multimedia nuevos y actualizados.

P robador de la vista

xx

Prefacio

Cdigo evaluado en siete navegadores . Para la edicin a n te rio r p ro b am o s el c d ig o en d o s nave


gadores de escritorio: In te rn e t E xplorer y Firefox. A hora probam os to d o el c d ig o en las versiones
ms actuales d e siete navegadores populares: cin c para el e s c r ito r io (C h ro m c , I n te r n e t E x p lo re r,
F irefox, O p e r a y S a fa ri) y d o s p ara d isp o sitiv o s m v iles (iP h o n e /iP a d y A n d ro id ). H T M L 5 y
CSS3 estn en evolucin, por lo que no se han aprobado an los estndares finales. Los proveedores de
navegadores estn im p lc m e n tan d o caractersticas d e m an era selectiva, q u e tien en una b u en a p ro b a
bilidad d e estandarizarse. A lgunos proveedores tien en m ayores niveles d e c u m p lim ie n to q u e otros
con respecto a las caractersticas. C o n cada nueva versin d e los navegadores, la ten d en cia h a sido
au m en tar d e m anera co n sid erab le el grado de fu n cio n alid ad im p lem cn tad o . El sitio d e p ru e b a d e
H T M L 5 (h tm l5 te s t.c o m ) m ide q u tan bien so p o rta cada navegador los estndares y especifica
ciones p en d ien tes. P uede ver los resultad o s de las p ru eb as y las caractersticas so p o rtad as p o r cad a
navegador. T am bin puede revisar sitios c o m o h t t p : / / c a n i u s e . c o m / , en d o n d e o b te n d r u n a lista
de las caractersticas cu b iertas p o r cada navegador. N o todos los documentos en este libro se desplegarn
correctamente en todos los navegadores. En vez d e elegir slo capacidades q u e existan de m an era u n i
versal, d em o stram o s las caractersticas nuevas y em o cio n an tes en el navegador que m aneje m ejo r
esas funcionalidades. A m edida q u e lea este libro, ejecu te cada ejem plo en varios navegadores W eb
para que p u ed a verlo c in tcractu ar con l d e la m an era q u e se p la n e o rig in alm en te. Y recuerde que
todo est cam b ian d o con rapidez, as que tal vez u n navegador q u e no so p o rtab a cierta caractersti
ca al m o m e n to de escribir este libro p o d ra so p o rtarla al m o m e n to en q u e usted lo lea.

Cdigo H T M L 5 , C SS 3 y Ja va S crip t va lid a d o . T odo el c d ig o H T M L 5 , CSS3 y JavaS cript en el


libro se valid m ed ian te el uso d e v a l1 d a t o r .w 3 .o r g /p a r a H T M L 5 , j1 g s a w .w 3 .o r g /c s s - v a l1 d a to r para CSS3 y j a v a s c r l p t l 1 n t.co m para JavaS cript. No todas las secuencias de comandos se vali
dan en su totalidad, pero la mayora lo hacen. A unque to d o el c d ig o fu n c io n a co rrectam en te, tal vez
reciba advertencias (o posibles errores) al validar c d ig o c o n algunas de las nuevas caractersticas.

A plicaciones p a ra sm artphones y tablets. Es probable que est fam iliarizado con la explosin de
aplicaciones disponibles para las plataform as iP h o n e /iP a d y A n d ro id . H ay casi un m illn d e apli
caciones en tre las dos. A nteriorm ente, para escribir aplicaciones en estas plataform as se requera un
conocim iento detallado de cada una y, en el caso de P hone/iP ad, el proceso era co n tro lad o de m anera
estricta por Apple; A ndroid es m s abierto. C on las tcnicas q u e aprender en este libro, podr escri
b ir aplicaciones portables en tre una gran variedad d e plataform as d e escritorio y mviles, incluyendo
Phone/iPad y Android. Induso podr vender esas aplicaciones bajo sus propios trm inos (o a travs d e
d ertas tiendas de aplicaciones tam bin). Esta posibilidad es em ocionante! Es una de las verdaderas vir
tudes de desarrollar con H T M L 5 , C SS3 y JavaScript en general, y con el elem ento canvas de H T M L 5
en particular. Ejecutar una aplicacin H T M L 5 en su sm artphonc o tablct es tan sim ple com o abrirla en
su navegador W eb com patible. Tal vez an se encuentre con algunos problemas deportabilidad.
Nuevas capacidades d e alm acenam iento Web de H T M L 5 , En el captulo 11 usaremos las nuevas
herram ientas de alm acenam iento Web d e H T M L 5 para crear u n a aplicacin W eb que alm acene en la
com putadora las bsquedas favoritas de un usuario de Twitter, para facilitar el acceso en lo sucesivo. El
alm acenam iento W eb reemplaza a la tecnologa controvcrsial de Las cookies, adem s d e ofrecer m ucho
ms espacio de alm acenam iento. El captulo 11 tam bin incluye una breve introduccin a JS O N , un
medio para crear objetos de JavaScript; por lo general se utilizan para transferir datos sobre Internet
entre program as del lado del cliente y del lado del servidor.

Caractersticas nuevas y actualizadas x x l

Juego de dados m ejorado con elem entos d e a u d io y video d e H T M L 5. El juego de los dados (Craps)
en el captulo 9 incluye ahora un elem ento de au d io de H T M L 5 , que reproduce un sonido cada vez
que el usuario tira los dados. Tambin incluim os un vnculo a una pgina con u n elem ento de v id e o de
H T M L 5 incrustado, que reproduce un video para explicar las regias del juego.

Caso d e estudio de jQ u e ry y A jax. En b edicin anterior de este libro se incluy u n a aplicacin de


calendario en b que se utilizaban las bibliotecas D o jo (que eran populares en ese m om ento) para crear
b interfaz de usuario, com unicarse con el servidor en form a asincrona, manejar eventos y m anipular el
D O M . Desde entonces, jQ u ery se convirti en b biblioteca m is p o p u b r de JavaScript. En esta edicin
actualizam os b aplicacin d e calendario (captulo 16) m ediante el uso de jQ u ery y b colocam os en lnea
oomo un caso de estudio de jQ uery y Ajax.

N uevas herram ientas W ebsocketsy Web W orkers de H T M L 5. Agregamos u n tratam iento en lnea de
dos nuevas tecnologas: W ebSockets, que proporciona un modelo sim ple de red y W eb W orkers, que nos
perm ite usar m ulrihilos en una pgina Web.

A plicaciones Web ha bilita d as p ara A jax. Actualizamos el captulo sobre b creacin de aplicaciones
W eb habilitadas para Ajax, con aplicaciones que dem uestran las actuabzaciones parciales de pginas y las
capacidades de escritura adelantada (type-ahead); cada una de estas herram ientas son capacidades dave
de las Aplicaciones enriquecidas de Internet (Rich Internet Applications).

H T M L D O M y X M L D O M . M ejoram os nuestra form a de tratar los tem as de m anipulacin d e D O M ,


eventos de JavaScript y m anipubcin de X M L D O M con JavaScript.

L IN Q . D esde la ltim a edicin del libro. M icrosoft in tro d u jo L 1 N Q (C onsultas integradas en le n


guajes) para su stitu ir a S Q L en el acceso a bases de d ato s. El c a p tu lo 18 ofrece una in tro d u c c i n
a los fu n d a m e n to s d e L IN Q y una in tro d u c c i n a L IN Q p ara S Q L (la tecnologa q u e su stitu y e a
SQ L ).

Los captulos 19 a 2 9 y apndices E y F se encuentran en ingls en la p gina web d e l libro


(www. pearso n enespa o I.co m /dei tcl).

C obertura a ctu a liza d a de PHP. El captulo 19 se actualiz a b versin ms reciente de PHP. Si empieza
este libro com o principiante y estudia el lenguaje JavaScript en los captulos 6 al 13, tendr la experiencia
de program acin necesaria para com prender b program acin del lado del servidor en PHP. [N uestra
form a de exponer la program acin del lado del servidor en A S R N E T exige un conocim iento de C # o
Visual Basic; para JSF se requiere conocim ientos de Java].

A SR N E T , A ja x en A S P .N E T y servicios Web. Esta secuencia actualizada de tres captulos se ofrece


ahora para cada uno de los dos lenguajes cbve de desarrollo de aplicaciones de M icrosoft: C # y Visual
Basic Estos captulos estn disponibles en el sirio W eb del libro.

JavaServer Faces (JSF), A ja x en J S F y servicios Web. Esta secuencia actualizada de tres captulos, dis
ponibles en lnea, se concentra en b creacin de aplicaciones JSF habilitadas para Ajax.

Servicios Web. Ahora contam os con captulos sobre cm o crear servicios W eb basados en SOAPj ser
vicios W eb basados en R EST con A S P N E T en Visual Basic, A SR N E T en C # y JSF en Java.

Aplicaciones cliente/servidor. Tenem os varios casos de estudio del b d o del cliente que perm iten a
los estudiantes interactuar con servicios W eb im piem entados previam ente, los cuales estn alojados en

t e s t . d e i t e l . com.

x x iv

Prefacio

Casos de estudio nuevos y actualizados. El libro incluye casos de estudio m uy com pletos, en los que
se utilizan varias tecnologas: Visor d e portadas de D eitel (JavaScript/D O M ), Librera de direcciones
(Ajax), Juego del can (C anvas de H T M L 5), Lista de correo (PH P /M yS Q L ), Libro de visitantes y
Base de datos de libros protegida por contrasea (ASP.NET), Libreta de direcciones (JavaServer Faces)
y Biackjack (servicios W eb JAX-WS).

N uevas herram ientas pedaggicas


Ejercicios "H acerla d ife re n c i ' en el capitulo 1. Lo alentam os a usar las com putadoras e Internet para
investigar y resolver problem as sociales im portantes. Estos ejercicios estn diseados para aum entar la
conciencia y el anlisis en torno a los problem as im portantes a los que se enfrenta el m undo. Esperamos
que usted los aborde con sus propios valores, polticas y creencias. D un vistazo a los diversos recursos
H acer la diferencia que proporcionam os, incluyendo nuestro nuevo C en tro de recursos para hacer la
diferencia en w w w .deitel .cow /M akingA D ifference. en donde obten d r ideas adicionales que ral vez.
desee investigar ms a fondo.

Nm eros d e pgina d e los trm inos clave en los resm enes d e los captulos. En los trm in o s clave que
aparecen en los resm enes de los captulos 1 a 18, incluim os el nm ero de pgina en d o n d e se define el
trm ino.

Grfico de dependencias
El grfico de la figura 5 m uestra la organizacin m odular del libro y las dependencias entre los captulos para
ayudar a los profesores a planear su program a de estudios. Cmo programar en Internet y World W ide 5/e es un
libro apropiado para una variedad de cursos d e program acin de nivel in tro d u cto rio e interm edio, en especial
de program acin del lado del cliente y del lado del servidor. Los captulos 1 al 18 estn en el libro impreso; los
captulos 19 a 29 y algunos apndices se encuentran en ingls en el sitio w eb de este libro.
Le recom endam os estudiar todas las dependencias de u n captulo antes d e estudiarlo, aunque tam bin es
posible usar o tro orden. Algunas de las dependencias se aplican slo a secciones de los captulos, por lo que
aconsejam os a los profesores que exploren el m aterial antes d e disear un curso d e estudio. El libro est dise
ado para cursos que ensean program acin W eb slo del lado del cliente, cursos q u e ensean program acin
W eb slo del lado del servidor y cursos que ensean una com binacin de lo anterior. Los lectores interesados en
estudiar las tecnologas del lado del servidor deben saber cm o crear pginas Web m ediante H T M L 5 y CSS3,
adem s de la program acin basada en objetos en JavaScript. Los captulos 15 y 16 pueden ensearse com o parte
de una unidad del lado del cliente, al principio de una unidad del lado del servidor, o pueden dividirse entre
ambas unidades.

Apndice en lnea de accesibilidad de HTML5


D e conform idad con la Iniciativa de accesibilidad d e W 3 C , sus pginas y aplicaciones W eb deben ser accesibles
de m odo que las personas con discapacidades puedan percibir, com prender, navegar c intcractuar en W eb,
y que puedan tam bin co n trib u ir con la Web. 1 En un apndice en lnea, enum eram os las cuestiones de acce
sibilidad que debe tener en cuenta al disear pginas W eb y aplicaciones basadas en W eb. Tam bin proporcio
nam os recursos que m uestran cm o usar H T M L 5 , CSS3, JavaScript y diversas tcnicas de diseo para crear
pginas y aplicaciones W eb accesibles. Segn sea apropiado, enlazamos la inform acin en este apndice de
vuelta con los captulos y secciones apropiadas, para q u e pueda ver cm o es posible m ejorar las aplicaciones para
aum entar el nivel de accesibilidad en Web.
1. h ttp : //tw *w .w 3 .o rg / W A I/ i n t r o / a c c e s s ib il1t y . php.

Apndice en linea de accesibilidad de HTML5

Introduccin
ducon a las computadoras e Internet

xxv

Introduccin al desarrollo del


lado del servidor
17 Servidores W eb (Apache e IIS)

Introduccin a HTM L5 y CSS3


18 Base de datos: SQ L. M ySQ l.
LIN Q y Java Dfl

*-2 htroduccin a HTM15: Parte I

3 Introduccin a HTML5: Parte 2

I9 P H P

4 Introduccin a las hojas de estilo en


aseada (Cascading Styfe Sheets. C SS): Parte l

f
5 Introduccin a las hojas de estilo en cascada
(Cascading Styfe Sheets. C SS): Parte 2

Server-Side Development
w ith A S P .N E T and C#2
20 W eb App Development -*
with ASP.NTT in C I

'

Fundamentos de programacin
en JavaScript
6 JavaScript: introduccin a las secuencias
de comandos

21 W eb App Development
with ASP.N ET in C#: A Deeper look

I
22 Web Se unces in C

7 JavaScript: instrucciones de control I

8 JavaScript: instrucciones de control II

Server-Side Development
w ith A S P .N E T and V B 3
23 W eb App Development
w ith ASP.NET in Visual Basic

9 JavaScript: fundones

T
10 JavaScript: arreglos

*- 24 W eb App Development
w ith ASP.NET in V B : A Deeper Look

i I JavaScnpt: objetos

25 Web Services in Visual Basic

T
-1 2 Modelo de objetos de docim ento (D O M ):
objetos y colecciones

Server-Side Development w ith


JavaServer Faces and Java4
26 JavaServer Faces Web Apps: Part i -

13 Manejo de objetos de JavaScnpt:


un anlisis ms detallado
- 27 JavaServer Faces W eb Apps: Part 2
14 HTM15: Irtroduccin a canvas

1
28 W eb Services in Java

Fundamentos de Ajax
l X M l
lAplicaconesennquecidasde Internet
habilitadas para Ajax con XML y JSON

W ebSockets and W eb W orkers


29 HTML5 WebSockets * id W eb W orkers

1. E3capitulo 19 (en el sitio W eb) asume slo que usted est lamilianzado con los Andamentos de programacin que
se presentan en los captulos 6 al 13.
2. Los captulos de C# requieren conocimiento de C l y d e las bibliotecas de clases de Microsoft .N ET.
3. Los captulos de Visual Basic requeren conocimiento de Visual Basic y de las bibliotecas de dasesde Microsoft .N ET.
4 Los captulos de Java requeren conocimiento de Java y de las bibliotecas de clases de Java.

Figura 5 | Grfico de dependencias de captulos de Cmo programar en Internet y World Wide Web. quinta edicin.

xxvi

Prefacio

Apndice de geolocalizacin en HTML5 en lnea


La API de geolocalizacin de H T M L 5 le perm ite crear aplicaciones W eb que recopilen inform acin sobre la
ubicacin (por ejemplo, las coordenadas de latirud y longitud) m ediante el uso de tecnologas com o GPS,
direcciones IP, conexiones W i-F o conexiones a torres celulares. Esta tecnologa es soportada por los siete nave
gadores de escritorio y mviles que utilizamos para probar el cdigo de todo el libro.
La especificacin de la API de geolocalizacin lista varios casos de uso,* incluyendo:

buscar puntos de inters en el rea del usuario

anotacin de contenido con inform acin sobre b ubicacin

m ostrar b posicin del usuario en un mapa

proveer navegacin por rutas

alertar al usuario cuando haya puntos de inters cercanos

proveer inform acin local actualizada

etiquetar ubicaciones en actualizaciones de estado en sitios de redes sociales

Por ejem plo, podra crear una aplicacin Web mvil basada en la ubicacin que utilice b inform acin d e ubica
cin del GPS de u n sm artphone para rastrear la ru ta de un corredor en un mapa, calcular la distancia recorrida
y b velocidad prom edio. D e m anera similar, podra crear una aplicacin que devuelva una lista de negocios
cercanos. En este apndice en lnea, crearemos una aplicacin mvil basada en b ubicacin.

Mtodos de enseanza
Cmo programar en Internet y World W ide Web, quinta edicin contiene cientos de ejem plos funcionales com ple
tos en toda una variedad de marcado, estilos, secuencias d e com andos y lenguajes de program acin. Hacem os
nfasis en la claridad y nos concentram os en b creacin de software bien diseado.

Som breo d e sin ta xis. Para m ejorar b le g ib ilid a d , som bream os b sintaxis del cdigo as com o b m ayora de los
entornos de desarrollo integrados y los editores de cdigo colorean b sintaxis del cdigo. N uestras convenciones
de som breo de sintaxis son:
lo s co m en tarlo s ap arecen a s i
l a s p a la b r a s c la v e a p a re c e n a s i

l a s c o n sta n te s y l o s v a lo re s l i t e r a l e s aparecen a s i
el r e s t o del cdigo aparece en negro
Resaltado d e cdigo. C olocam os rectngulos grises alrededor de los segmentos de cdigo cbve.
Uso d e Juentes pa ra d a r nfasis. C olocam os los trm inos cb v e y b referencia a b pgina del ndice para cada
ocurrencia d e definicin en texto en n e g rita para facilitar su localizacin. Enfatizamos los com ponentes en
pantalla en la fuente H elvtica en negrita (por ejem plo, el m en Archivo) y el texto del program a en b fuente
Lucida (por ejem plo. 1nt co n teo 5).

Acceso W eb. Todos los ejemplos de cdigo fuente se pueden descargar de:
www.deitel.com/books/1w3htpS
vww.pearsonenespaftol.com/deitel
O bjetivos. Las citas de apertura van seguidas de una lista de objetivos del captulo.
2.

h ttp :// w w v .w 3.org/T R /geo lo cation -A P I/#usecases_sect1on .

Mtodos de enseanza x x v ii

Ilustraciones/figuras. Incluim os una gran cantidad de tablas, dibujos lineales, docum entos, secuencias de
com andos, program as y salidas de program a.

Tips d e program acin. Incluim os tips de program acin para ayudarle a enfocarse en los aspectos im portantes
del desarrollo de software. Estos tips y prcticas representan lo m ejor q u e hem os podido recabar a lo largo de
siete dcadas com binadas de experiencia en la program acin y la enseanza.

Buenas prcticas de programacin


Las Buenas prcticas d e program acin llaman a atencin hacia tcnicas que le ayudarn a producir progra
mas ms claros, comprensiblesy fciles de mantener.

A
jr

Errores com unes de programacin


Al poner atencin en estos Errores co m u n es d e program acin se reduce a probabilidad de que usted pueda
cometerlos.

T ip s para prevenir errores


Estos tips contienen sugerencias para exponer los erroresy eliminarlos de sus programas; muchos de ellos descri
ben aspectos de programacin que evitan que os errores entren siquiera a losprogamas

T ip s de rendimiento
Estos tips resaltan as oportunidades para hacer que sus progamas se ejecuten ms rpido, o para minimizar
la cantidad de memoria que ocupan.

TT

T ip s de portabilidad
Los T ip s de p o rtab ilid a d le ayudan a escribir cdigo que pueda ejecutarse en una variedad de plataformas.

tara?

O bservaciones de ingeniera de softw are


luis O bservaciones de ingeniera de softw are resaltan los asuntos de arquitecturay diserio, lo cual afecta
la construccin de los sistemas de software, especialmente los de gan escala.

Vietas d e resum en. Presentamos un resum en detallado del captulo, estilo lista con vietas, seccin por sec
cin, para una revisin rpida de los puntos clave. Para facilitar la referencia, incluim os e l nm ero d e pgina de
cada ocurrencia de definicin de los trm inos clave en el texto.

Ejercicios d e autoevaluacin y respuestas. Se incluyen ejercicios extensos de autoevaluacin y sus respuestas


para que los lectores practiquen por su cuenta.

Ejercicios. Los ejercicios de los captulos incluyen:

recordatorio sim ple de Li term inologa y los conceptos im portantes


cul es el error en este cdigo?
escritura de instrucciones individuales
escritura d e funciones y secuencias de com andos com pletas
proyectos im portantes

ndice. Incluim os un ndice extenso. Las ocurrencias de definicin de los trm inos clave se resaltan con un
nm ero de pgina en n eg rita.

x x v i Prefacio

Recursos para el profesor


Los siguientes suplem entos estn disponibles en ingls slo para profesores a travs del C en tro de recursos de
Pearson
.p e a rs o n e n e s p a o l. ccxn/deitel):
D iapositivas d e P ow erP oint*que contienen todo el cdigo y las figuras del texto, adem s d e elem entos
en vietas que sintetizan los puntos clave.
M a n u a l d e soluciones con soluciones para la gran mayora de los ejercicios de final de captulo. Revise
el C cnrro de recursos para el profesor si desea determ inar cules ejercicios tienen soluciones.
H acceso est lim ita d o e strictam en te a profesores u n iv e rsita rio s q u e im p a rta n clases co n base en el lib ro .
I-os p ro feso res s lo p u e d e n o b te n e r acceso a trav s d e sus re p re se n ta n te s d e P earso n . Si no es un m iem bro
docente registrado, pngase en contacto con su representante de Pearson o visite twwv.p earsonh1ghered.com /
e d u c a to r / r e p lo c a t o r /.
N o se p ro v een soluciones p a ra los ejercicios d e proyectos . Revise nuestro C en tro de recursos de pro
yectos de program acin en d o n d e encontrar m uchos ejercicios adicionales y posibles proyectos (www. d e i t e l .
com /P rogram m ingP rojects/).

Reconocimientos
Agradecemos a Barbara D eitel las extensas horas que dedic a este proyecto. Som os afortunados al haber traba
jado con el equipo de editores tan profesionales de Pearson. Apreciamos la orientacin, inteligencia y energa de
M ichael H irsch, editor en jefe de C iencias com putacionales. C arole Snyder reclut a los revisores del libro y se
hizo cargo del proceso de rev isin. Bob Engelhardt se hizo cargo de la produccin del libro.

Revisores
Q uerem os agradecer los esfuerzos de nuestros revisores de la cuarta y q u in ta edicin. Revisaron a conciencia
el texto y los program as, proporcionando innum erables sugerencias para m ejorar la presentacin: T im o th y
Boronczyk (consultor), R oland Boum an (M ySQ L AB), C h ris Bowen (M icrosoft), Peter B randano (K oolC o n n e c t Technologies, Inc.), M att C h o tin (Adobe), C hris C o rn u tt (PH PD cvcloper.org), Phil C o sta (A do
be), U m achirra D am odaran (Sun M icrosystem s), Vadiraj D eshpandc (Sun M icrosystems), Justin E rcnkrantz
(The A pache Software F o undation), C h risto p h er Finke (N etscape), Jesse Jam es G arrett (Adaptive Path), M ike
H arsh (M icrosoft), C hris H eilm ann (M ozilla), Kevin H enrikson (Z im bra.com ), T im H euer (M icrosoft),
M olly E. H olrzschlag (W 3 C ), R alph H oopcr (U nivcrsity o f Alabam a, Tuscaloosa), C h ris H o rto n (U niversity
o f Alabama), John H rvatin (M icrosoft), Johnvey H w ang (Splunk, Inc.), Joe K rom cr (New' Pcrspective y el
G ru p o d e usuarios d e A dobe Flash de P ittsburgh), Jennifer K yrnin (G ua de diseo W eb en A bout.com ),
E ric Lawrence (M icrosoft). Pete LePagc (M icrosoft), Dr. Roy Levow (Florida A tlantic U niversity), Billy B.
L. Lim (Illinois State U niversity), Shobana M ahadevan (Sun M icrosystem s), Patrick M incault (P rogram ador
d e Flash independiente), A nand N arayanasw am y (M icrosoft), John Pcterson (Insync y V .I.O ., Inc.), Jennifer
Powers (U niversity o f Albany), Ignacio Ricci (Ignacioricci.com ), Jake R u tter (onerutter.com ), R obin Schum achcr (M ySQ L AB), Jos A ntonio G onzlez Seco (Parlam ento d e A ndaluca), D r. G eorgc Scmeczko (Royal
& SunA lliance Insurance C aada), Steven Shaffer (Penn State U niversity), M ichael S m ith (W 3 C ), Karen Tegtm eyer (M odel Technologies, Inc.), Paul Vencill (M IT R E ), R aym ond W cn (M icrosoft), Eric M . W endelin
(Auto-crol Technology C orporacin), R aym ond F. W ism an (In d ian a U niversity), Keith W ood (H yro, L td.) y
D aniel Z appala (Brigham Young U niversity).

Acerca de los autores x x i x

A m edida que lea el libro, sinceram ente apreciaremos sus com entarios, crticas, correcciones y sugerencias
para mejorarlo. D irija su correspondencia a:

d e i t e l S d e i t e l . com
Le responderem os oportunam ente. Esperam os q u e disfrute rrabajando con Cmo programar en Internety World

Wide Web, quinta edicin.


Paul Harvey y Abbey Deitel

Acerca de los autores


fe u l J . D eitel, C E O y D irector Tcnico de D eitel &t Associates, Inc., es egresado del M IT, en donde estudi
Tecnologa de la Informacin. A travs de D eitel & Associates, Inc., ha im partido cientos de cursos sobre
Java, C++, C , C #, Visual Basic y program acin en Internet a d ien tes d e la industria, incluyendo: C isco, IBM,
Siemens, Sun M icrosystems, D ell, Lucent Technologies, Fidclity, NASA en el C entro Espacial Kennedy, el N a
tional Severe Storm Laboratory, W h ite Sands Missile Range. Rogue Wave Software, Boeing, SunG ard H igher
Education, Stratus, C am bridge Technology Partners, O n e Wave, H yperion Software, Adra Systems. Entergy.
CahlcDara Systems, N orte! N etw orks, Puma, iR obot, Invensys y m uchos ms. l y su coautor, el Dr. Harvey
M. D eitel, son autores de los libros de program acin ms vendidos en d m undo.
D r. H arv ey M . D eitel, Presidente y C onsejero de Estrategia de D eitel & Associates, Inc., tiene 50 aos de
experiencia en el cam po de la com putacin. El Dr. D eitel o b tu v o una licenciatura y una m aestra por el M IT y
un doctorado por La Universidad de Boston. Tiene m uchos aos de experiencia com o profesor universitario, La
cual in d u y e un puesto vitalicio y el haber sido presidente del departam ento de Ciencias de la com putacin en
el Boston College antes de fundar, con su hijo Paul J. D eitel, D eitel & Associates, Inc. l y Paul son coautores
de varias docenas de libros y paquetes de video LiveLcssons, y piensan escribir m uchos ms. Los textos de los
D eitel se han ganado el reconocim iento internacional y han sido traducidos al japons, alemn, ruso, chino,
espaol, coreano, francs, polaco, italiano, portugus, griego, u rd y turco. El Dr. D eitel ha im partido cientos
de sem inarios profesionales de program acin para grandes empresas, instituciones acadmicas, organizaciones
gubernam entales y diversos sectores del ejrcito.
A bbey D eitel. presidenta de D eitel & Associates, Inc., es graduada de b Carnegie M ellon U niversitys
Tepper School o f M anagem ent, de d o n d e recibi una licenciatura en A dm inistracin industrial. Abbey ha es
tado adm inistrando b s operaciones comerciales de D eitel & Associates, Inc. d u ran te 14 aos. H a contribuido
en numerosas publicaciones de D eitel 8 Associates, adem s de ser coaurora de iPhone fo r Programmers: A n

App-Driven Approach y Androidfor Programmers: An App-Driven Approach.

Capacitacin corporativa de Deitel & Associates, Inc.


D eitel & Associates, Inc., es una empresa reconocida a nivel m undial, dedicada al entrenam iento corporativo y
b creacin de contenido. La empresa proporciona cursos im partidos por profesores en b s iastalaciones de sus
clientes en todo el m undo, sobre b m ayora de los lenguajes y plataform as de program acin, com o Java, C++,
Visual C + +*, C , Visual C # ", Visual Basic*, XML*. Python*, tecnologa de objetos, program acin en Internet y
Web, desarrollo de aplicaciones para Android c Phone*, y una lista cada vez m ayor de cursos adicionales de
program acin y desarrollo de software. Los fundadores de Deitel & Associates, Inc. son Paul J. D eitel y el Dr.
Harvey M. Deitel. Sus clientes incluyen m uchas de b s empresas ms grandes del m undo, agencias gubernam en
tales, sectores del ejrcito e instituciones acadmicas. A lo b rg o de su sociedad editorial de 36 aos con Prcnticc

xxx

Prefacio

Hall/Pearson, D citcl & Associates, Inc. ha publicado libros de texto de vanguardia sobre program acin, libros
profesionales y cursos de video Livel^essons. Puede contactarse con D citcl & Associates, Inc. y con los aurores
por medio de correo electrnico:
d e f te lO d e it e l .con

Para conocer ms acerca d e la em presa, sus publicaciones y su currculum m undial de la Serie de C apaci
tacin C orporativa Dive Into *, visite:

w w w .deitel.co*/tra1n1ng/
Suscrbase al boletn de correo electrnico DeiteT Ruzz O nline en:
w w w .d e 1 te l.c o m /n e w sle tte r/su b sc rib e .h tn il
Y nase a las com unidades de los autores en Facebook (****. f acebook. com /D eitel Fan) y Twitter (<3dei t e l ) .
Q uienes deseen com prar libros de D citcl y cursos de capacitacin UveLessons en video pueden hacerlo a
travs d e www. d e i t e l . com. Las empresas, el gobierno, las instituciones m ilitares y acadmicas que deseen reali
zar pedidos en masa deben hacerlo directam ente con Pearson.

Acerca de la portada: Arte fractal


La portada de este libro presenta un fractal: una figura geom trica que puede generarse d e un patrn que se
repite en form a recursiva. Para m odificar la figura se aplica el patrn a cada segm ento d e b figura original.
A unque estas figuras se estudiaron antes del siglo xx, fue el m atem deo Benoit M andelbrot quien introdujo el
trm ino fractal" en b dcada de 1970, ju n to con los detalles especficos sobre la form a com o se crea un fractal
y sus aplicaciones prcticas. Esta geom etra proporciona modelos m atem ticos para m uchas form as complejas
que se encuentran en la naturaleza, com o m ontaas, nubes y costas. Los fraciales tam bin pueden usarse para
com prender sistemas o patrones que aparecen en b naturaleza (por ejem plo, los ecosistemas), en el cuerpo h u
m ano (en los pliegues del cerebro) o en el universo (com o las agrupaciones de gabxias). N o rodos los fractalcs
se asemejan a los objetos en b naturaleza. El dibujo de fractalcs se ha convertido en una form a d e arte popubr.
H ablarem os sobre b recursividad en b seccin 9.9.

Antes de
empezar
Antes de com enzar a usar este libro asegrese de tener un navegador W eb reciente; luego siga estas instrucciones
para descargar los ejemplos.

Cmo obtener el cdigo fuente


'Io d o s los ejem plos para Cmo programar en Internet y W orld W ide Web, quinta edicin estn disponibles, en
ingls, en

www.deitel.com/books/1w3htp5/
(Los ejem plos de loscaprulos 1 a 18, en espaol, los encontrar el sitio web de este libro en www. pearsonenes-

pafiol.com /de1 t e 7).


S no se ha registrado an en nuestro sitio W eb. vaya a vwwv.dei t e l .com y haga clic en el vnculo egister
(Registro) debajo de nuestro logo en la esquina superior izquierda de la pgina. Llene los cam pos con sus daros.
No hay cargo por registrarse; tam poco com partirem os su inform acin con terceros. Le enviarem os slo correos
electrnicos relacionados con la adm inistracin de su cuenta, a menos que se registre por separado para nuestro
boletn de correo electrnico gratuito Deitel* Buzz O nline en w w w .d e ite l.c o m /n e w s le tte r/s u b s c rib e .h tm l.
Despus de registrarse en el sitio, recibir un correo electrnico de confirm acin con su cdigo de verificacin.
Haga clic en el vinculo del correo electrnico de confirmacin para completar su registro. C onfigure su cliente de
correo electrnico para que el correo d e confirm acin no se filtre com o correo basura y de esta m anera recibir
correos de d e i t e l . com.
A continuacin, vaya a www .d e i t e l .com e inicie sesin usando el vnculo Login debajo de nuestro logo, en
b esquina superior izquierda de la pgina. Vaya a vwwv .d e i t e l . com /books/iw 3htpS /. E ncontrar el vnculo para
descargar los ejem plos bajo el encabezado Download C ode Examples and Other Premium Conten for Registered
Users (Descargar ejemplos de cdigo y contenido Prem ium adicional para usuarios registrados). A note b u b i
cacin en donde eligi guardar el archivo Z IP en su com putadora. Extraiga los archivos de ejem plo a su disco
duro m ediante el uso de un program a extractor de archivos ZIP. Si trabaja en un bboratorio de com putadoras,
pregunte a su profesor en dnde puede guardar el cdigo de ejemplo.

Navegadores Web utilizados en este libro


Probam os to d o el cdigo en las versiones m s actuales d e siete navegadores populares: cinco para dispositivos
de e sc rito rio (C h ro m e, In te r n e t E xplorer, F irefox, O p e ra , S afari) y dos para dispositivos m v iles (iP h o n e /
Pad y A ndroid). H T M L 5 y C SS3 estn en evolucin, por lo que no se han apro b ad o an los estndares
finales. Los proveedores d e navegadores estn im plcm cntando, d e m anera selectiva, caractersticas q u e tienen
una b uena probabilidad de estandarizarse. A lgunos proveedores tienen mayores niveles d e cum p lim ien to

x x x i i Antes de em pezar

que o tro s con respecto a las caractersticas. C o n cada nueva versin de los navegadores, la tendencia h a sido
a u m en tar d e m anera considerable el grado de funcionalidad im plem entado. El sitio de p ru eb a d e H T M L 5
(h tm l5 te st.c o m ) m ide qu tan bien soporta cada navegador los estndares y especificaciones pendientes.
Puede ver los resultados de las pruebas y las caractersticas soportadas p o r cada navegador. T am bin puede
revisar sitios com o h t t p : / / c a n i u s e .c o m / , en donde o b ten d r una lista de las caractersticas cubiertas por
cada navegador. No todos los docum entos en este libro se desplegarn correctam ente en todos los navega
dores. En vez de elegir slo capacidades q u e existan de m anera universal, dem ostram os las caractersticas
nuevas y em ocionantes en el navegador que m aneje m ejor esas funcionalidades. A m edida que lea este libro,
ejecute cada ejem plo en varios navegadores W eb para q u e pueda verlo e in teractu ar con l de la m anera que
se plane originalm ente. Y recuerde que rodo est cam biando con rapidez, as que tal vez un navegador que
no soportara cierta caracterstica al m om ento d e escribir este libro podra soportarla al m om ento en que usted
lo vaya a leer.

Vnculos para descargar navegadores Web


Puede descargar los navegadores W eb de las siguientes ubicaciones:

Google C hrom e: http://vrtvw .google.com /chrom e

Mozilla Firefox: h ttp ://w w w .m o z 1 1 1 a .o rg /f1 re fo x /n e w /

M icrosoft Internet Explorer (slo W indow s): h ttp ://w v rtv .m ic ro so ft.c o m /1 e

Apple Safari: h ttp ://w v rtv .a p p le .c o m /sa fa r1 /

O pera: h ttp ://w v rtv .o p era.co m /

Le recom endam os que instale todos los navegadores disponibles para su plataforma.

Software para los captulos de A SP.N ET con C# y V isual Basic


Los captulos de A SR N E T con C # (captulos 20 al 22) y Visual Basic (captulos 23 al 25) (todos en ingls en
el sitio web) y los de servicios W eb requieren Visual Web D evelopcr 2 0 1 0 Express y SQ L Server 2008 Express.
Puede descargar estas herram ientas desde vrtrtv.m icrosoft. com /express. D ebe seguir las instrucciones de insta
lacin predeterm inadas para cada herram ienta.

Software para los captulos sobre JavaServer Faces y Java Web Services
Al principio del captulo 26 (en ingls, en el sitio web) hablaremos sobre el softw are requerido para los captulos
de JavaServer Faces y Java Web Sen-ices (captulos 26 a 28).
A hora est listo para com enzar sus estudios d e program acin W eb con Cmo programar en Internet y World
W ide Web. quinta edicin. Esperamos que disfrute el libro! Si tiene alguna pregunta, sintase libre de enviarnos
un correo electrnico a d e 1 te l d e 1 te l. com. I>c responderem os oportunam ente.

Introduccin a las computadoras


e Internet
La gente usa Internet y la Web
para crear cosas que no han
construido, escrito, dibujado o
comunicado en ningn otro lado.
Tim fkrnm-Lcc

Qu maravilloso es que nadie


necesite esperar un solo momento
para empezara mejorar el mundo.
Anne Frank

E l hombre sigue siendo la


computadora ms extraordinaria
de todas.
John F. Kennedy

Objetivos
En este capitulo aprender a:
Discernir lo esencial del
hardware de com putadoras,
software e Internet.
Familiarizarse con la evolucin
de Internet y de la World W ide
W eb.
Reconocer la manera en que
HTML5. CSS3 y JavaScript
estn mejorando el desarrollo
de aplicaciones Web.
Familiarizarse con la jerarqua
de datos.
Distinguir los diversos tipos de
lenguajes de programacin.
Familiarizarse con los conceptos
de la tecnologa de objetos.
Construir aplicaciones de
Internet, despus de ver
interesantes y divertidas
demostraciones.

Plan general

Captulo I

Introduccin a las computadoras e Internet

.1 Introduccin

1.10 Wb 2.0: a socializar

.2 Internet en la industria y la investigacin

1.11 Jerarqua de datos

3 HTML5.CSS3. JavaScript. Canvas yjQuery


4 Demostraciones

1.12 Sistemas operativos


1.12.1 Sistemas operativos de escritorio
y de Notebook

5 Evolucin de Internet y de la World Wide Web


1.12.2

Sistemas operativos mviles

6 Fundamentos de la Web
1.13 Tipos de lenguajes de programacin
7 Arquitectura de aplicaciones multinivel
1.14 Tecnologa de objetos
8 Comparacin entre las secuencias de comandos
del lado del cliente y del lado del servidor

1.15 Mantenerse actualizado con las tecnologas


de la informacin

9 Consorcio World Wide W eb (W 3C)

Ejercicios de autoevaluacin | Respuestas a los ejercicios de autoevaluacin | Ejercicios

l.l

Introduccin

Bienvenido al em ocionante y, rpidam ente, cam biante m undo de la program acin en Internet y en la Web. H ay
ms de dos m il millones de usuarios de Internet en todo el m undo; esto equivale aproxim adam ente al 3 0 % de la
poblacin de la T ierra.1E n la actualidad hay en uso ms de mil millones de com putadoras de propsito general,
adem s de o tro s miles de millones de com putadoras incrustadas que se utilizan en telfonos celulares, telfonos
inteligentes (sm artphones), com putadoras tipo tablet, electrodom sticos, autom viles y dems; y m uchos de
estos dispositivos estn conectados a Internet. D e acuerdo con un estudio realizado por el G ru p o de soluciones
de negocios de Internet de Cisco, haba 12.5 mil millones de dispositivos habilitados para Internet en 2010 y
se pronostica que esa cifra llegar a 25 mil millones para 2015, y a 50 mil millones para 2 020.1 Las tecnologas
de program acin en Internet y en la W eb que aprender a usar en este libro estn diseadas para ser portables, lo
que le perm itir disear pginas W eb y aplicaciones que se ejecuten a travs d e un enorm e rango de dispositivos
habilitados para Internet.
Empezar por aprender sobre las tecnologas de programacin del lado d el cliente que se utilizan para crear
pginas W eb y aplicaciones que se ejecutan en el cliente (es decir, en el navegador del dispositivo del usuario).
Usar el Lenguaje de marcado de hipertexto 5 (H T M L 5) y las H ojas de estilo en cascada 3 (CSS3) (las versiones
ms recientes de las tecnologas H T M L y CSS) para agregar caractersticas y efectos poderosos, dinm icos y diver
tidos a las pginas y aplicaciones W eb, com o audio, video, anim acin, dibujos, m anipulacin de imgenes, diseo
de pginas para varios tam aos de pantalla, acceso al alm acenam iento en la Web y m ucho ms.
Aprender sobre JavaScript: el lenguaje preferido para im plem entar el lado del cliente de las aplicaciones
basadas en Internet (en la seccin 1.3 hablaremos sobre JavaScript con ms detalle). I>os captulos 6 al 13 pre
sentan una extensa cobertura de JavaScript y sus herram ientas. Tam bin aprender sobre jQ uery. la biblioteca de
JavaScript que est cam biando, espectacularm ente, el m undo del desarrollo Web. A lo largo del libro tam bin
veremos un nfasis sobre el desarrollo con Ajax, que nos ayudar a crear aplicaciones ms tiles y con un m ejor
desem peo.
E n captulos posteriores aprender sobre la programacin del lado del clientr. las aplicaciones que responden
a las solicitudes de los navegadores W eb del lado del cliente, com o buscar en Internet, revisar el saldo de su
1. w y w . 1 n t e r n e t w j r l d s t a t s . c o m / s t a t s . h t m .
2. nww.dSCO.com/web/about/ac79/doCS/1nnov/IoT_IBSG_04llFINAL.pdf.

1.2

Internet en la industria y la investigacin

cuenta de banco, ordenar un libro por Amazon, ofertar en u n a subasta d e eBay y pedir boletos para un co n
cierto. Presentaremos m aterial condensado y popular sobre cuatro lenguajes de program acin en Internet/W eb
para crear el lado del servidor de las aplicaciones diente/servidor basadas en Internet y en la W eb. Los captulos
19 al 22 y 23 al 28 presentan tres populares tecnologas del lado del servidor: PHP, ASP.NET (tanto en C #
com o en Visual Basic) y JavaServer Faces.
Asegrese de leer d prefacio y la seccin antes d e em pezar para tener una idea d e lo q u e se cubre en el libro
y cm o configurar su com putadora para ejecutar los cientos d e ejemplos d e cdigo. El cdigo est disponible
en www. d e l te 1 .com /books/iw 3htpS y en w tw t.p e a rs o n h ig h e re d .c o n /d e ite l. Use el cdigo fuente que in
cluim os para ejecutar cada programa y secuencias de comandos (script) a m edida que los vaya estudiando. Pruebe
cada ejem plo en varios navegadores. Si le interesan los sm artphoncs y las com putadoras tipo tablct, asegrese
de ejecutar los ejem plos en sus navegadores en dispositivos Phone, iPad . A ndroid, los sm artphone, las tablet,
y otros. Las tecnologas cubiertas en este libro y el soporte en buscadores estn evolucionado rpidam ente. No

todas as caractersticas de todas las pginas que vamos a crear se desplegarn correctamente en todos los navegadores.
Los siete navegadores que usaremos son gratuitos.

la ley de M oore
Es com n que piense que la m ayora de los productos y servicios costarn u n poco m s cada ao. Sin embargo,
en los cam pos de las com putadoras y las com unicaciones ha ocurrido lo contrario, en especial con relacin a
loe costos del hardw are q u e da soporte a estas tecnologas. Los costos del hardware han dism inuido con rapidez
durante varias dcadas. A proxim adam ente cada uno o dos aos, las capacidades de las com putadoras se duplican
sin que el precio se incremente. E sta notable observacin se conoce en el m bito co m n com o la Ley de M oore,
y debe su nom bre a la persona que identific esta tendencia: G o rd o n M oore, cofndador d e Intel uno de los
principales fabricantes de procesadores para las com putadoras y los sistemas incrustados de la actualidad . La
Le>' de M oore y las observaciones relacionadas son especialmente ciertas en cuanto a la cantidad d e m em oria
que tienen las com putadoras para los programas, la cantidad de alm acenam iento secundario (com o el alm ace
nam iento en disco) que tienen para guardar los program as y datos durante periodos extensos, y las velocidades
de sus procesadores las velocidades con que las com putadoras ejecutan sus program as (es decir, realizan su
trabajo) . Se ha producido un crecim iento similar e n el campo de las com unicaciones, en donde los costos
se han desplom ado a m edida que la enorm e dem anda por el ancho d e banda de las com unicaciones (es decir,
la capacidad de transm isin d e inform acin) atrae una com petencia intensa. N o conocem os o tro s cam pos de
trabajo en los que la tecnologa m ejore con tanta rapidez y los costos dism inuyan de u n a m anera tan drstica.
Dicha m ejora colosal est fom entando sin duda la Revolucin de a informacin.

1.2

Internet en la industria y la investigacin

Estam os viviendo una poca em ocionante en el cam po de la com putacin. M uchas de las empresas ms influ
yentes y exitosas de Las ltim as dos dcadas estn relacionadas con la tecnologa: Apple, IBM, H ew lett Packard,
Dell, Intel, M otorola, Cisco, M icrosoft, Google, Amazon, Facebook, Twitter, G roupon, Foursquare, Yahoo!,
eBay, y muchas ms. Estas com paas son im portantes em pleadores de personas que estudian ciencias co m p u
ta d o nales, sistemas d e inform acin o disciplinas relacionadas. C uando escribim os este libro, A pple era la e m
presa ms valiosa del m undo.
En el pasado, la mayora de las aplicaciones de com putadora se ejecutaban en equipos que no estaban
conectados entre s, m ientras que en la acrualidad es posible escribir aplicaciones de Internet para com unicarse
entre com putadoras en todo el m undo.
Las figuras 1.1a 1.4 proporcionan unos cuantos ejemplos de la forma en que se utilizan las computadoras e Inter
net en la industria y la investigacin. La figura 1.1 lista dos ejemplos de cm o se utilizan las computadoras e Internet
para mejorar los servicios mdicos.

Captulo I

Nombre

Introduccin a las computadoras e Internet

Descripcin

Registros de salud
electrnicos

Podran incluir el historial mdico de un padenre, prescripciones, vacunas, resultados


de laboratorio, alergias, informacin de seguros y dems. Al poner esa informacin a
disposicin de los proveedores de servicios mdicos a travs de una red segura logramos
mejorar el cuidado de los pacientes, se reduce la probabilidad de error y, en general, aumenta
b eficiencia del sistema de servicios mdicos.

Proyecto Genoma
Humano

1 Proyecto Genoma Humano se fund para identificar y analizar los ms de 20000 genes
en el ADN humano. El proyecto utiliz programas de computadora para analizar datos
genticos complejos, determinar las secuencias de los miles de millones de pares base
qumicos que conforman d ADN humano y almacenar b informacin en bases de datos
disponibles a travs de Internet para los investigadores en muchos campos.

Figura I . I | Las computadoras c Internet en los servicios mdicos.

La figura 1.2 proporciona un ejem plo de las em ocionantes form as en que se utilizan las com putadoras
e Internet para hacer el bien social. En los ejercicios que se encuentran al final de este captulo ten d r que
proponer otros proyectos en los que se utilicen las com putadoras e Internet para hacer la diferencia".

Nombre

Descripcin

AMBER Alert

El sistema de alerta AMBER (Nios norteamericanos extraviados: transmisin de respuesta


a emergencias) se utiliza para buscar nios secuestrados. Las autoridades notifican a los
funcionarios de transporte estatal y a las transmisoras de TV y radio, quienes a su vez transmiten
alertas en TV, radio, seales de trfico enmpulanzadas, Internet y dispositivos inalmbricos.
AM BER Alert se asoci hace pooo con Facebook, cuyos usuarias pueden dar Like" a las pginas
de AM BER Alert por ubicacin para recibir alertas en sus fuentes de noticias.

World
Community Grid

IVrsonas de todo el mundo pueden donar su poder de procesamiento de cmputo que no


utilicen, mediante b instalacin de un programa de software seguro gratuito que permite a
Wirid Community Grid (mmw . worl dcommun t y g r l d . o r g ) aprovechar b capacidad que
no se uriiioc. Este poder de cmputo, al cual se accede a travs de Internet, se utiliza en lugar
de costosas supo-computadoras para realizar proyectos cientficos de investigacin que estn
haciendo b diferencia, ya sea proporcionar agua potable a pases del tercer mundo, combatir el
cncer, cultivar arroz ms nutritivo para repones que combaten d hambre y otras cosas ms.

One Laptop Per


Child (O LPQ

One Laptop Per Child (o n e .1 a p to p .o rg ) proporciona, a nios pobres en todo d


mundo, bptops econmicas de bajo consumo de energa y habilitadas para Internet;
con esto es posible fomentar d aprendizaje y reducir b divisin digital.

Figura 1.2 Proyectos que utilizan computadoras e Internet para el bien social.

Nosotros dependemos de las computadoras y de Internet para comunicar, navegar, coLaborar y ms. La figura
1.3 muestra algunos ejemplos de cm o es que las computadoras e Internet proveen b infraestructura para estas tareas.

1.2

Nombre

Internet en la industria y la investigacin

Descripcin

Computacin
n la nube

La c o m p u ta c i n en la n u b e nos permite usar software, hardware c informacin almacenada


en la nube (es decir, se accede a computadoras remotas va Internet y est disponible bajo
demanda) en vez de tener que almacenarla en nuestra computadora personal. Amazon
es uno de los principales proveedores de servicios pblicos de computacin en La nube.
Puede rentar capacidad de almacenamiento adicional mediante d Amazon Simple Storagc
Service (Amazon S3) o aumentar las capacidades de procesamiento mediante EC2 de
Amazon (Nube de cmputo clstica de Amazon). Estos servicios, que le permiten aumentar
o disminuir los recursos para satisfacer sus necesidades en un momento dado, son por lo
general ms efectivos en costos que comprar hardware costoso para asegurarse de ccncr el
suficiente almacenamiento y poder de procesamiento para satisfacer sus necesidades en sus
niveles pico. Las aplicaciones de negocios (como el software CRM) son a menudo costosas,
requieren de cierto nivel de hardware considerable para ejecutarse y de un personal de
soporte experimentado para asegurar que se ejecuten de manera apropiada y segura. Al usar
los servicios de computacin en la nube traspasamos b carga de tener que manejar estas
aplicaciones de nuestra empresa al proveedor de servicios, con lo cual ahorramos dinero.

GPS

Los dispositivos del Sistema de posicionamicnro global (GPS) usan una red de satlites para
recuperar informacin con base en la ubicacin. Varios satlites envan seales con etiqueta
de fecha y hora al dispositivo GPS, d cual calcula la distancia hada cada satlite con base
en el tiempo en d que b seal sali d d satlite y el tiempo en el que lleg. E so informacin
se utiliza para determinar la ubicacin exacta d d dispositivo. Los dispositivos GPS pueden
proporcionar indicaciones paso a paso y ayudarle a encontrar negocios cercanos (restaurantes,
gasolincras, etc.) con facilidad, adems de algunas puntos de inters. El sistema GPS se
utiliza en numerosos servicios de Internet basados en b ubicacin, como las aplicaciones
chcck'in en linca, para que usted pueda encontrar a sus amigos (por ejemplo, Foursquarc y
lacebook), en aplicaciones para hacer ejercicio como RunKccper, que rastrean el tiempo, b
distancia y b velocidad promedio de su rutina de trotar en exteriores, aplicaciones de citas
que le ayudan a buscar una pareja cercana y aplicaciones que actualizan en forma dinmica
bs condiciones cambiantes del trfico.

Robots

Los robots pueden usarse para tarcas cotidianas (como b aspiradora Roomba de iRobot),
para entretenimiento (como bs mascotas roboticas), combate militar, expediciones en b
profundidad dd ocano y exploracin espacial (como el Rover de b NASA en Marte) y
dems. RoboEarth (vww*. ro b o e a rth . org) es una World Wide Web para robots", ya que
permite a los robots aprender unos de otros mediante b comparticin de informacin, con lo
cual mejoran sus habilidades de realizar tarcas, navegar, reconocer objetos y otras cosas ms.

Correo electrnico,
mensajera
instantnea, chat
de video y FTP

Los servidores basados en Internet soportan todo tipo de mensajera en lnea. Los mensajes
de corroo dectrnico pasan por un servidor de correo que tambin almacena esos mensajes.
Las aplicaciones de mensajera instantnea fl.M) y chat de video tales como AIM, Skypc,
YSihoo! Mcssengcr y otras ms le permiten comunicarse con terceras personas en tiempo
real, mediante el envo de mensajes y video a travs de los servidores. FTP (protocolo de
transferencia de archivos) le permite intercambiar archivos entre mltiples computadoras
(por ejemplo, una computadora cliente que est en su escritorio y un servidor de archivos)
a travs de Internet, mediante el uso de los protocolos TCP/IP para transferir datos.

Figura 1.3 | Ejempl s de infraestructura de computadoras e Internet.


La figura 1.4 lista algunas de b s em ocionantes formas en que se utilizan b s com putadoras e Internet en el
entretenim iento.

Captulo I

Introduccin a las computadoras e Internet

Nombre

Descripcin

iTuncs y la App
Store

l'uncs es b tienda de medios de Apple, en donde puede comprar y descargar msica, pelculas,
programas de televisin, c-hoolcs, tonos de celular y apps (para iPhonc, ilbd y iPad) sobre la
Internet. El servicio iCbud de Apple le permite almacenar sus compras de medbs en b nube"
y utilizarlos desde cualquier dispositivo con iOS (el sistema operativo mvil de Apple). En
junio de 2011 Apple anunci, en su Conferencia mundial de desarrolladores (WWDC), que
se haban descargado 15 mil millones de canciones a travs de iTuncs. lo cual convirti a Apple
en d principal vendedor de msica, liara julio de 2011 sr haban descargado 15 mil mitones
de aplicaciones de b App Store (www. appl e . com /pr/1 i brary/2011/07/07A pples-A ppStore-Dotwiloads-Top-15-Bi 11 io n . html).

TV por Interna

Los dispositivos de TV por Interna (como Apple TV y GoogleTV) le permiten acceder


a una enorme cantidad de contenido bajo demanda, como juegos, noticias, pdcubs.
programas de tdevisin. etctera.

Programacin
de juegos

Se espera que los ingresos mundiales por juegos de video lleguen a $65 mil
millones en 2011 (uk. reuters.com /article/2011/06/06/us-videogam esfactboxidUKTRE75552I20110606). El desarrollo de los juegos ms sofisticados puede costar
hasta $100 millones. C alicfDuty2: Modem Warfaree Acdvisbn, que sali a b venta en
2009, obtuvo $3 10 milbnes en slo un da en Norteamrica y el Reino Unido (news. c n e t .
com/8301-13772 3-10396593-52.html?tag=mncol ;txt) Losjuegos sociales m linca, que
permiten a usuarios en todo el mundo competir entre s a travs de Interna, estn creciendo
con rapidez. Zynga (creador de juegos en lnea populares, como Fitrmville y Mafia Wari) se
Sind en 2007 y ya tiene ms de 265 millones de usuarios al mes. Para dar cabida al aumento
en trfico. Zynga agregar 1000 servidores cada semana (techcrunch. COm/2010/09/22/

zyngamoves-l-petabyte-of-data-da11y-adds-1000-servers-a-week/).

Figura 1.4 | Ejemplos de computadoras e Internet en el entretenimiento.

1.3

H TM L5, CSS3, JavaScript, Canvas y jQ uery

En este libro aprender sobre las versiones ms recientes de varias tecnologas clave de desarrollo d e aplicaciones
Web del b d o del cliente. Esta seccin le m ostrar una breve descripcin general de cada una:

H TM L5
Los captulos 2 y 3 introducen el H T M L (Lenguaje de marcado de hipertexto): un tipo especial de lenguaje de
com putadora que se conoce com o lenguaje de marcado y est discriado para especificar tanto el contenido com o b
estructura de pginas W eb (tambin conocidas com o docum entos) d e una manera portable. H T M L 5, que se en
cuentra en desarrollo, es la versin emergente de H TM L. Este lenguaje nos permite crear contenido que se despliega
de manera apropiada a travs de todo el extraordinario rango de dispositivos conectados a Internet: smartphones,
computadoras tipo tablct, com putadoras tipo notebook, com putadoras de escritorio, dispositivos de propsito es
pecial com o pantallas gigantes en auditorios d e conciertos y estadios deportivos, y m uchos ms.
En esta seccin conocer los fundam entos de H T M L 5 y las tcnicas ms sofisticadas tales com o: creacin de
tablas, creacin de formularios para recolectar la entrada del usuario y el uso de nuevas caractersticas en H T M L 5,
incluyendo los elementos de estructura de pgina que nos perm iten dar significado a las partes de una pgina (por
ejemplo: encabezados, reas de navegacin, pies de pgina, secciones, figuras, captura de figuras, y ms).

13

HTML5. CSS3, JavaScript. C anvas y jQ uery

Hay una versin ms estricta" de H T M L , conocida com o X H TM L (Lenguaje de marcado de hipertexto


ectemible). E ste lenguaje se basa en X M L (Lenguaje de marcado extensible, que presentam os en el captulo 15)
y se utiliza con frecuencia. M uchas de las tecnologas del Lado del servidor que veremos ms adelante en el libro
producen pginas W eb com o docum entos X H T M L de m anera predeterm inada, aunque la tendencia se inclina
sin duda a H T M L 5.

H ojas de estilo en cascada (C SS)


A unque H T M L 5 ofrece herram ientas para controlar la presentacin d e un docum ento, es mejor no mezclar a
presentacin con el contenido. H T M L 5 debera usarse slo para especificar la estructura y el contenido d e un
docum ento.
Los captulos 4 y 5 usan las hojas d e estilo e n cascad a (CSS) para especificar la presentacin o el estilo de
los elem entos en una pgina W eb (fuentes, espaciado, tam aos, colores, posicionam icnto). La tecnologa CSS
se dise para aplicar estilo a las pginas W eb portables en form a independiente a su contenido y estructura. Al
separar el estilo d e las pginas d e su contenido y estructura, es posible cam biar con facilidad su apariencia visual
en un sitio Web completo, o en una parte de u n sitio W eb, con slo intercam biar una hoja de estilo por otra.
CSS3 es la versin actual de CSS y se encuentra en desarrollo. En el captulo 5 introducim os m uchas nuevas
caractersticas en CSS3.

JavaScript
JavaScript es u n lenguaje que nos ayuda a crear pginas W eb dinmicas (es decir, pginas q u e pueden m odifi
carse al instante en respuesta a ciertos eventos, com o la entrada del usuario, cam bios en el tiem po, etctera) y
aplicaciones de com putadora. N os perm ite realizar la program acin del lado del cliente de las aplicaciones Web.
Adems, ahora existen varios proyectos dedicados a JavaScript del lado del servidor, incluyendo C om m onjS
(www.commonjs.org), N ode.js (n o d e js .o r g ) y Jaxcr ( ja x e r.o r g ).
JavaScript fue creado por Netscape, la empresa que construy el prim er navegador W eb de gran populari
dad. Tanto Netscape com o M icrosoft han sido instrum entos en la estandarizacin de JavaScript por medio de
ECM A International (form alm ente conocida com o la Asociacin de fabricantes europeos de com putadoras)
com o ECM A Script. La versin ms reciente del estndar, EC M A Scripr 5, corresponde a la versin de JavaScript
que vamos a usar en este libro.
Los captulos del libro sobre JavaScript son ms que una simple introduccin al lenguaje. Tambin presentan los
fndamcnros de la programacin de computadoras, incluyendo cstrucniras de control, funciones, arreglos, rceursividad, cadenas y objetos. Aprender que JavaScript es un lenguaje portable de secuencias de comandos (scripr) y que los
programas escritos en JavaScript pueden ejecutarse en navegadores W eb a travs de una extensa gama de dispositivos.

la s navegadores Web y su p o rta b ilid a d


Asegurar una apariencia visual consistente en los navegadores del lado del d ie n te es u n o de los mayores desafos
al desarrollar aplicaciones basadas en W eb. En la actualidad no existe un estndar al que deban adherirse los
proveedores de software en cuanto a la creacin de navegadores W eb. A unque la m ayora com parten un con
junto com n de caractersticas, cada uno podra desplegar las pginas en form a distinta. Los navegadores estn
disponibles en m uchas versiones y en m uchas plataform as diferentes (M icrosoft W indow s, Apple M acintosh,
lin u x , U N IX , e tc ) . Ixis proveedores agregan caractersticas a cada nueva versin que, algunas veces, producen
problemas de incom patibilidad entre plataformas. Es difcil desarrollar pginas W eb q u e se desplieguen correc
tam ente en todas las versiones de cada navegador.
Todos los ejemplos de cdigo en el libro se probaron en los cinco navegadores de escritorio ms populares y
en los dos navegadores mviles ms conocidos (figura 1.5). El soporte de las caractersticas de H T M L 5 , CSS3
y JavaScript vara segn el navegador. El sido W eb H TM L5 Test (h t t p : / / h t m l 5 te st.c o m ) asigna una p u n tu a
cin a cada navegador con base en el nivel de soporte para las caractersticas ms recientes de estos estndares en

Captulo I

Introduccin a las computadoras e Internet

evolucin. La figura 1.5 lista los cinco navegadores de escritorio que usam os por orden inverso a sus puntuaciones
en la prueba de H T M L 5, del ms al menos com padble al m om ento de escribir este libro. Se espera que Internet
Explorer 10 (IE10) tenga una clasificacin de compatibilidad m ucho m ayor que IE9. Tambin puede revisar sitios
com o h ttp ://c a n iu s e .c o m , en d o n d e obtendr una lista de las caractersticas cubiertas por cada navegador.

T ip d e portabilidad l . l
En la Web hay muthof navegadores distintos, incluyendo muchas versiones antiguas con menos capacidades,
por lo que es difcilpara los autoresy desarrolladores de aplicaciones Web crear soluciones universales. El W3C
est trabajando en la bsqueda de una plataforma universal del lado del cliente (h ttp : //m u . w3. org/2006/
webapl/adnin/cbarter) .

Navegador

Participacin aproximada en el
mercado al mes de agosto de
2011 (http://gs.statcounter.com)

hitregadores ele escritorio

Participacin en el mercado

Googic Chromc 13

17%

330

Mozilla Fia-fox 6
Apple Safari 5.1

27%
7%

298

Opera 11.5

2%

293
286

Internet Expbrcr 9

40%

141

Navegadores mviles

Participacin en el mercado
de dispositivos mviles

Phone
Android

15% (de navegadores mviles)


18% (de navegadores mviles)

ftjntos obtenidos de los 450


de html5tesLcom

217
184

Figura 1.5 | Puntuaciones de la prueba de HTML5 para los navegadores utilizados para probar los ejemplos.
jQ u e ry
En la actualidad, jQ u ery (jQ u e ry .o rg ) es la ms popular de cientos d e bibliotecas de JavaScript} Simplifica la
program acin en JavaScript al facilitar la m anipulacin de los elem entos de una pgina W eb e interactuar con
los servidores de u n a form a portable a travs de varios navegadores Web. Provee una biblioteca de controles per
sonalizados de interfaz grfica de usuario (G U I) (ms all de b s controles bsicos de G U I que ofrece H T M L 5)
que puede usar para m ejorar la apariencia visual de sus pginas Web.

Cmo valid a r sit cdigo de H T M L 5 , CSS3 y JavaScript


C o m o veremos m s adelante, es com n que b s program as de JavaScript tengan partes de H T M L 5 y CSS3. Se
debe usar una sintaxis apropiada de H T M L 5 , CSS3 y JavaScript para asegurar q u e b s navegadores procesen sus
docum entos en form a correcta, la figura 1.6 m uestra b s validadores q u e usam os para validar el cdigo en este
libro. Elim inam os b s errores de validacin en donde fue posible.
3. mm.act 1vo1nc.com/b1og/?008/ll/03/jquery-emerges-as-most-po pul a r-j avascrl p tl 1brary-for-web development/.

1.4

Tecnologa

Demostraciones

URL del validador

HTML5

h ttp ://v alid ato r.w 3.o rg /


h ttp ://h tm l5.v alid ato r.n u /

CSS3

h ttp : / / jig s a w .w 3 .o r g / c s s v alid ato r/

JavaScript

h t t p ://www. ja v a s c r i p t l i n t . co/
http://w w w .jslint.com /

Figura 1.6 | Validadores de HTML5. CSS3 y JavaScript.

1.4

Demostraciones

Explore las pginas W eb d e la figura 1.7 para darse una idea de algunas de las cosas que podr crear m ediante
las tecnologas que aprender a usar en este libro, incluyendo H T M L 5 , CSS3, JavaScript, canvas y jQucry.
M uchos de estos sitios ofrecen vnculos al cdigo fuente correspondiente, o tam bin puede ver el cdigo fuente
de la pgina en su navegador.

URL
h t t p s : / / d e v e lo p e r .n o z i ll a .o r g / e n lS/demos/

Descripcin
El DcmoS tu dio de Morilla contiene numerosas demostraciones de
HTML5, canvas, CSS3 y JavaScript que utilizan audio, video, animacin
y otras cosas.

h ttp : //js -fire w o rk s.a p p sp o t.c o m /

Introduzca su nombre o mensaje y esta animacin de JavaScript lo escribir


mediante un efecto de fuegos artificiales sobre el horizonte de Londres.

h ttp : / / 9 e le m e n ts .c o n / io / p r o je c ts /

Usa el demento canvas de HTM L5 y elementos de audio para crear efectos


interesantes, y enlaza twects que incluyan las palabras HTML5" y love
(haga clic en cualquier parte de la pantalla para ver d siguiente tweet).

h tm lS /can v as/

h ttp ://tw w r.z a c h s tro n a u t.C o m /l a b /

tex t-shadow -box / t e x t - s hado*box.htm l

h ttp : //c lu b lin e .c o n /la b /h tm lS /


sphere/

Demostracin animada del efecto de sombreado de texto de CSS3. Use el


ratn para hacer brillar una luz sobre d texto y cambiar en forma dinmica
la direccin y d tamao de la sombra.
Usa un demento canvas de HTML5 para crear una esfera que gira y cambia
de direccin a medida que movemos d cursor del ratn.

h t t p : / / s p i e lz e u g z .d e /h tn l5/
liq u id -p articles.h tn l

La demo Liquid Particles usa un elemento canvas de HTML5. Mueva d


ratn alrededor de b pantalla y lo seguirn las panculas" (puntos o letras).

h ttp://iw w n .p au lb ru n t.C O .u k /b ert/

Bert's B reakdow n es u n divertido videojuego creado m ediante un elem ento


canvas d e 1TTML5-

http://tw w H .openrise.com /lab/

Aplicacin q u e usa d elem ento canvas y le perm ite dibujar flores en b pgina,
ajustar sus colores y cam biar las form as d e los ptalos, entre otras cosas.

FlowerPower/

Figura 1.7 | Demostraciones de HTML5. CSS3. JavaScript, canvas y jQuery (parte l de 2).

10

Captulo I

Introduccin a las computadoras e Internet

URL

Descripcin

h t t p : / / a 1 te re d q u a l 1a . con/
canvasm ol/

Usa el demento can vas para mostrar una molcula en 3D que puede verse
desde cualquier ngulo deseado (de 0 a 360 grados).

h ttp ://p asjan s-o n l1n e.p l/

El juego de Solitario creado mediante HTML5.

h t t p ://a n d re w -h o y e r. com/
ex p e r l nent s / c l o t h /

Usa el demento canvas para simular el movimiento de una pieza de ropa.


Haga clic y arrastre con d ratn para mover la tda.

h t t p : / / * * * . pal r haye s . con/


ex p e r l raent s/cu be - 3d/

Esta demostracin de CSS3 1c permite usar d ratn para inclinar y girar d


cubo en 3D. Incluye un tutorial.

http:/A*rw.ef fectganes.cora/demos/

Uha cascada animada provee una excelente demostracin d d uso dd color


en d elemento canvas de HTML5.

c a n v a s c y c le /
h ttp : // m a c e k .g 1 th u b .c o n /g o o g le _
pacman/

H juego PAC-MAN" de Google (un Doodlc de Google) creado en HTML5.

h t t p : / / * * * . b e n jo ff e .c o m /c o d e /
g a m e s / to r u s /

Un juego en 3D similar a Tetris\ creado con JavaScript y canvas.

http://code.alneros.com /codee x a m p l e s / w a t e r - e f f e c t- c a n v a s /

Usa canvas y JavaScript para crear un efecto de ondas de agua. Coloque d


cursor sobre d canvas para ver el efecto. El sitio incluye un tutorial.

ht t p :/ / j que r yu1. com/ demo s/

Numerosas demostraciones de jQuery, incluyendo animaciones,


transiciones, color, interacciones y dems.

h ttp : / / ! ab.5m ashup.1t/fl1p/

Demuestra un cuadro flexible mediante d uso de jQuery.

http://tutor1alzine.com /20l0/Q 9/
html5-canvas-sl1deshow-jquery/

Presentacin creada con el elemento canvas de HTML5 y jQuery (incluye


^ tutorial)

http://css-tr1cks.com /exam ples/


Ci re u la te /

Aprenda a crear un efecto de ciclos de animaciones mediante jQuery.

h ttp ://d e n o . tu to rla lz ln e .


com/2010/02/photo-shoot-cssjquery/deoo htnl

Usa jQuery y CSS para crear un efecto de sesin fotogrfica, que le permite
^

,
c
ct n
i\
enfocarse en un rea de la pgina y tomar una fotografa (incluye un tutonal).

Figura 1.7 | Demostraciones de HTML5. CSS3. JavaScript, canvas y jQuery (parte 2 de 2).

1.5

Evolucin de Internet y de la W orld W ide W eb

Internet (una red global de com putadoras) se hizo posible gracias a la convergencia de as tecnologas de la compu
tacin y as comunicaciones. A finales de la dcada de 1960. ARPA (la Agencia de proyectos de investigacin avan
zados) extendi los planos para conectar en red los principales sistemas de cm puto de alrededor de una docena de
universidades c instituciones de investigacin patrocinadas por la ARPA. Se iban a conectar con lneas de com uni
cacin que operaban a 56 Kbps (es decir, 56 0 0 0 bits por segundo, en esc entonces una velocidad sorprendente);
esto fue en una poca en la que la m ayora de las personas (de las pocas que tenan los recursos) se conectaban por
lneas telefnicas a las com putadoras, a una velocidad de 110 bits por segundo. Un bit (abreviacin de dgito
binario) es el elemento de datos ms pequeo en una com putadora; puede asumir el valor 0 o 1.
H ubo una gran expectacin. Los investigadores en H arvard hablaban sobre com unicarse con b poderosa
com putadora Univae en b Universidad de U tah para m anejar los clculos intensivos rebeionados con su inves-

1.5

Evolucin de Internet y de la World W ide Web

11

ligacin de grficos de com putadora. Surgieron m uchas otras posibilidades intrigantes. La investigacin acad
m ica estaba a punto d e d ar un gigantesco paso hacia delante. La ARPA procedi a m plem entar la A RPA N ET,
que evcntualm cnre se convirti en la In te rn e t que conocem os.
Las cosas resultaron distintas d e lo que se haba planeado en un principio. En vez de perm itir que los inves
tigadores com partieran sus com putadoras unos con otros, pro n to se volvi claro q u e el prim er beneficio clave
de A R PA N ET era la capacidad de com unicarse con rapidez y facilidad m ediante correo electrnico. Esto es
cierto incluso en la Internet de b actualidad, ya que facilita las com unicaciones de todo tipo entre los usuarios
a nivel m undial.

C onm utacin de paquetes


Uno de los principales objetivos de A RPA N ET fue perm itir que mltiples usuarios enviaran y recibieran in fo r
macin al m ism o tiem po y a travs de las mismas rutas de com unicacin (por ejem plo, las lneas telefnicas).
La red operaba m ediante una tcnica conocida com o c o n m u ta c i n d e p a q u e te s , en donde los datos digitales
se enviaban en pequeos grupos Ibm ados paquetes. stos contenan inform acin d e direccin, control de errores
y secuencia. La inform acin de b direccin perm ita enrular los paquetes hacia sus desdnos. La inform acin
de secuencia ayudaba a volver a cnsam bbr los paquetes, ya que, debido a los com plejos m ecanism os de enrucamiento, podran llegar desordenados: de su orden original para su presentacin al receptor. Los paquetes de
distintos emisores se entrem ezclaban en b s m ism as lneas para usar con eficiencia el ancho de banda disponible.
Esta tcnica de conm utacin de paquetes redujo d e m anera considerable los costos de transm isin, en com pa
racin con el cosro de b s lneas de com unicaciones dedicadas.
La red se dise para operar sin un control centralizado. Si falb b a una parte de b red, el resto d e b s porcio
nes funcionales podran seguir enrutando paquetes de los emisores a los receptores a travs de rutas alternativas
que m ejoraron b confiahilidad.

T C P /IP
FJ protocolo (conjunto de reglas) para com unicarse a travs de A R PA N ET se conoci com o T C P : P ro to co lo
de c o n tro l de tra n sm isi n . T C P aseguraba que los mensajes se enrutartan en form a correcta del em isor hacia
d receptor; y que llegaran intactos.
A m edida que evolucion Internet, organizaciones de rodo el m u n d o estaban im plem cntando sus propias
redes ta n to para com unicaciones intra organizacin (dentro de la organizacin) com o inter organizacin (en
tre organizaciones). Apareci una extensa variedad de hardw are y softw are d e red. U n desafo fue lograr que
estas d istin tas redes se com unicaran. La ARPA lo logr oon el desarrollo d e IP : P ro to c o lo d e I n te rn e t, con
lo q u e verdaderam ente cre una red d e redes, la arquitectura actual de Internet. El c o n ju n to com binado de
protocolos se conoce ahora com nm ente com o T C P /IP . C a d a co m p u tad o ra en In tern et tiene una d irecci n
IP nica. EJ estndar IP actual. Protocolo de Internet versin 4 (IPv4), ha estado en uso desde 1984 y pronto
se agotarn las posibles direcciones. El Protocolo de Internet de prxim a generacin, IP v 6 , apenas est e m
pezando a desplegarse. C uenta con una seguridad m ejorada y un nuevo esquem a de dircccionam iento, con lo
que expande enorm em ente el nm ero de direcciones IP disponibles, para no quedarnos sin direcciones IP en
un futuro prxim o.

C recim iento explosivo


En un principio, el uso de Internet se lim it a b s universidades y b s instituciones de investigacin; despus el
ejrcito em pez a usarla de m anera intensiva. C o n el tiem po, el gobierno decidi perm itir el acceso a Internet
para fines comerciales. Las com unidades de investigacin y m ilitares estaban preocupadas de que los tiem pos de
respuesta se volvieran m uy lentos a m edida que Internet se saturaba de usuarios.

12

Capitulo I

Introduccin a las computadoras e Internet

Y de hecho, ocurri lo opuesto. Las empresas se dieron cuenta de que podan optim izar sus operaciones
adem s d e ofrecer nuevos y mejores servicios a sus clientes, por lo que em pezaron a invertir enorm es cantidades
de dinero para desarrollar y m ejorar Internet. E sto gener una feroz com petencia entre las operadoras d e com u
nicaciones y los proveedores d e hardw are y software para satisfacer la dem anda. El resultado es que el a n c h o d e
b a n d a (la capacidad d e transportar inform acin) en Internet est aum entando con rapidez, a m edida q u e los
oostos se reducen en form a dram tica.

W orld W ide Web, H T M L , H T T P


La W o rld W id e W eb perm ite a los usuarios d e co m p u tad o ra ejecutar aplicaciones basadas en W eb, adem s de
localizar y ver d o cu m en to s basados en m ultim ed ia sobre casi cualquier tem a en Internet. La W eb es una crea
cin relativam ente reciente. E n 1989, T im B ern ers-L ee de C E R N (la O rganizacin europea de investigacin
nuclear) em pez a desarrollar una tecnologa para co m p artir inform acin a travs de docum entos de texto
con hipervneulos. A esta invencin Berners-Lee la llam L en g u aje d e m a rc a d o d e h ip e rte x to (H T M L ).
T am bin escribi protocolos de com unicacin para form ar la espina dorsal d e su nuevo sistem a d e infor
m acin, al cual llam W orld W ide Web. E n especial escribi el IV otocolo d e tra n sfe re n c ia d e h ip e rte x to
(H T T P ): un protocolo de com unicaciones utilizado para enviar inform acin a travs de la Web. El U R L
(L o calizad o r u n ifo rm e d e re c u rso s) especifica la direccin (ubicacin) de la pgina W eb q u e se visualiza en
la v en tan a del navegador. C ad a pgina W eb en In tern et se asocia con un U R L nico. Por lo general los U RL
em piezan con h t t p : / / .

H TTPS
Los U RL de sitios W eb que m anejan inform acin privada, com o nm eros de tarjetas de crdito, a m enudo
em piezan con h t t p s : / / , la abreviacin de P ro to c o lo seg u ro d e tran sferen cia d e h ip e rte x to (H T T PS). Este
protocolo es el estndar f>ara transferir datos cifrados en Web. C o m b in a H T T P con los esquemas criptogrficos
C apa de conexin segura (SSL) y el ms reciente Seguridad de la capa de transporte (TLS) para asegurar las
com unicaciones y la inform acin de identificacin a travs de la W eb. A unque hay m uchos beneficios en cuanto
al uso de H T T P S , existen unas cuantas desventajas, siendo las ms notables algunas cuestiones de rendim iento,
debido a que el cifrado y el descifrado consum en una cantidad considerable de recursos de procesam iento de
la com putadora.

M osaic, Netscape, surgim iento de Web 2 .0


El uso de la W eb explot con la disponibilidad en 1993 del navegador Mosaic, el cual inclua una interfaz
grfica am igable para el usuario. M arc Andreesscn, cuyo equipo en el C en tro N acional de Aplicaciones de
Supercom putacin (N C SA ) desarroll Mosaic, fue el fundador d e Netscape, la em presa que m uchas personas
consideran fue la m echa q u e encendi la explosiva econom a de In tern et a finales de la dcada d e 1990. Pero la
cada econm ica del punto com" trajo consigo tiem pos difciles en la prim era dcada de este siglo. El resurgi
m iento q u e empez alrededor de 2004 se denom ina W eb 2 .0 . Google es considerada por m uchos com o la em
presa insignia de W eb 2.0. Algunas orras em presas con caractersticas de W eb 2.0 son: YouTubc (com particin
de videos), Facebook (redes sociales). Tw itter (m icroblogs), G ro u p o n (comercio social), Foursquare (registro
mvil). Salesforce (software de negocios que se ofrece en form a de servicios en linca en la nube"), Craigslist
(en su mayora, listados clasificados gratuitos), Flickr (com particin de fotos), Slcypc (telefona, videollamadas
y conferencias por Internet, ahora propiedad de M icrosoft) y W ildpedia (una enciclopedia en lnea gratuita).

1.6

Fundamentos de la Web

E n esta seccin hablaremos sobre los fundam entos de las interacciones basadas en W eb entre un navegador Web
cliente y un servidor Web. E n su form a ms sim ple, una pgina Web es un docum ento de H T M L (Lenguaje de

1.6

Fundamentos de la Web

13

marcado de hipertexco) (con la extensin .htm l o .htm) que describe a un navegador Web su contenido y su
estructura.

H ipervneulos
rV>r lo general, los docum entos de H T M L contienen h ip e rv n e u lo s que, al hacer clic en ellos, cargan un
docum ento W eb especificado. Es posible crear hipervneulos con imgenes y texto. Al colocar el puntero del
ratn sobre un hipervnculo, el puntero d e flecha predeterm inado se convierte en una m ano con el d ed o ndice
apuntando hacia arriba. C o n frecuencia el texto con hipervnculo aparece subrayado y en u n color distinto al
del texto regular en una pgina W eb.
Los hipervneulos. que en un principio se usaban com o herram ienta de publicacin para la investigacin
cientfica, se utilizan am pliam ente para hacer referencia a fuentes o sitios que tienen ms inform acin sobre un
tema especfico. Las rutas establecidas m ediante hipervneulos crean el efecto d e Web".
C uando el usuario hace clic en un hipervnculo, un se rv id o r W eb localiza la pgina solicitada y la enva al
navegador W eb del usuario. D e m anera similar, el usuario puede escribir la direccin de una pgina Web en el
campo de direccin del navegador y presionar Intro para ver la pgina especificada.
Los hipervneulos pueden hacer referencia a otras pginas W eb, direcciones de correo electrnico, archivos
y ms. Si el URL de u n hipervnculo es d e la form a ma11t o : direccinCorreo, al hacer clic en el vncixlo se cargar
el program a de correo electrnico predeterm inado y se abrir una v en tan a d e m en saje dirigida a la direccin
de correo electrnico especificada. Si u n hipcrvnoilo hace referencia a un archivo que el navegador no pueda
mostrar, ste se prepara para d escarg ar el archivo y por lo general pide inform acin al usuario sobre la ubica
cin e n donde se va a guardar el archivo. Al descargar un archivo, se copia en la com putadora del usuario. Los
programas, d o aim cn to s, imgenes, archivos de sonido y de video son todos ejem plos de archivos dcscargablcs.

URJyURL
Los URI (Identificadores uniformes de recursos) identifican recursos en Internet. Los URI que em piezan con
h t t p : / / se llam an URL (Locabzadores uniformes de recursos). C o m n m en te los U RL hacen referencia a archivos,
directorios o cdigo del lado del servidor que realiza tareas tales com o bsquedas en bases de datos, bsquedas
en Internet y procesam iento de aplicaciones de negocios. Si conoce el U RL de un recurso disponible en forma
pblica en cualquier parte de la W eb, puede introducir ese U RL en el cam po de direccin de u n navegador W eb
y ste podr acceder a ese recurso.

Partes de un URL
Un URL contiene informacin que dirige a un navegador hacia el recurso que el usuario desea utilizar. Los servi
dores Web ponen dichos recursos a disposicin de los dientes Web. Los servidores W eb populares son: el servidor
H T T P Apache y Microsoft Internet Inform ation Services (IIS).
Ahora examinemos los com ponentes del URL
h ttp ://w w w .d e lte l. co*/b o o k s/d o w n lo ad s. h t l

El texto h t t p : / / indica que debem os usar el Protocolo de transferencia de hipertexto (H T T P ) para o b ten er
el recurso. A continuacin en el U RL tenem os el n o m b re d e h o st com pleto del servidor (por ejem plo, wvw.
d e i t e l . com): el nom bre de la com putadora servidor W eb en d o n d e reside el recurso. Esta com putadora se
define oomo h o s t ya que aloja y m antiene los recursos. El nom bre de host
d e i t e l .com se traduce en una
d ireccin IP (P ro to co lo d e In tern e t): un valor num rico que identifica en form a nica al servidor en Internet.
Un serv id o r del S istem a de n o m b re s d e d o m in io (D N S) de Internet m antiene u n a base de datos de nom bres
de hosts y sus correspondientes direcciones IP, y realiza las traducciones de m anera autom tica.

14

Captulo I

Introduccin a las computadoras e Internet

El resto del U RL (/b o o k s/d o w n lo ad s.h tm l) especifica la ubicacin del recurso (/books) y el nom bre
(dow nloads.htm l) en el servidor Web. La ubicacin podra representar un directorio en el sistem a d e archivos
del servidor W eb. Sin em bargo y por cuestiones de seguridad, la ubicacin es casi siem pre un directorio virtu a l El
servidor W eb traduce el directorio virtual en una ubicacin real en el servidor, con lo cual se oculta la verdadera
ubicacin del recurso.

R ealizar una so licitu d y recibir una respuesta


C uando un navegador W eb recibe el U RL de una pgina W eb, usa H T T P para solicitar la pgina Web que se
encuentra en esa direccin. La figura 1.8 muestra cm o un navegador W eb enva una solicinid a un servidor Web.

U s o lo t u d s t
enva dd diente
VVfcb al servidor VArb

Servtdor Web
b ) Despus de
veotxrla
s * a tu d .d
serMdor Web
U n ta d leojrso
en su sistema

O enteW eb

Internet

Figura 1.8 | Un cliente solicitando un recurso de un servidor Web.

En la figura 1.8, el navegador Web enva una solicitud H T T P al servidor La solicitud (en su form a ms simple) es
CET /b o o k s/d o w n lo ad s.h tm l HTTP/1.1

La palabra G E T es un m to d o de H T T P que indica q u e el cliente desea o b ten er u n recurso del servidor. El


resto de la solicitud proporciona el nom bre de b ru ta del recurso (por ejem plo, un docum ento de H T M L 5 )
adem s del nom bre del protocolo y el nm ero de versin (HTTP/l. l). La solicinid del cliente tam bin contiene
ciertos encabezados requeridos y opcionales.
C ualquier servidor que entienda H T T P (versin 1.1) podr traducir b solicitud y responder en form a
apropiada. La figura 1.9 m uestra al servidor Web respondiendo a una solicitud.

SeivwfcH Web
0 senador
responde a la
o ld tu d con d
contenido dd
recurso
Cliente W rb
Internet

Figura 1.9 | Un cliente que recibe una respuesta del servidor Web

1.6

Fundamentos de la Web

15

El servidor enva prim ero una lnea de texto que indica la versin de H T I'P , seguida de un cdigo num rico
y una frase para describir el estado de b transaccin. Por ejemplo,
HTTP/l.1 200 0K

indica que b transaccin fue exitosa, m ientras que


HTTP/l.1 404 Not found

inform a al cliente que el servidor Web no pudo localizar el recurso solicitado. En b pgina www.w3. o rg /P r o to C o ls /r f c 2 6 l 6 /r f c 2 6 l6 - se c l0 .h tm l encontrar una lista com pleta de cdigos num ricos que indican el estada
de una transaccin de H T T P.

Encabezados H TTP
A continuacin, el servidor enva uno o ms en cab ezad o s H T T P , que proporcionan inform acin adicional
sobre los datos que se enviarn. En este caso, el servidor va a enviar un docum ento de texto d e H T M L 5 , por lo
que u n encabezado H T T P para este ejemplo sera:
C o n te n t-ty p e : te x t/h tm l
La informacin proporcionada en este encabezado especifica el tipo de Extensiones m ultipropsito d e correo In
ternet (M IM E ) del contenido que el servidor va a transmitir al navegador. El estndar M IM E especifica formatos de
datos que los programas pueden usar para interpretar los datos en forma correcta. Por ejemplo, el tipo M IM E t e x t /
p la in indica que el contenido se muestra de manera directa. D e manera similar, el tipo M IM E 1mage/jpeg indica
que el contenido es una imagen JPEG. C uando el navegador recibe este tipo MI ME, trata de mostrar b imagen.
El encabezado o conjunto de encabezados va seguido de una lnea en blanco, que indica al navegador cliente
que el servidor termin de enviar encabezados H TTP. I\>r ltimo, el servidor enva el contenido del docum ento
solicitado (dow nloads.htm l). D ejpus el navegador del b d o del diente despliega (o visualiza) el docum ento, para lo
cual tal vez se necesiten solicitudes H T T P adicionales para obtener b hoja CSS y las imgenes asociadas.

Solicitudes ge t y pos t de H T T P
Los dos tipos ms com unes d e so licitu d e s H T T P (tam bin conocidas com o m to d o s d e so licitu d ) son g e t y
p o st. Por lo general, una solicitud g e t obtiene (o recupera) inform acin d e un servidor, com o un docum ento
H T M L , una imagen o resultados d e bsqueda con base en un trm ino de bsqueda enviado por el usuario. Por
lo general, una solicitud p o s t publica (o enva) datos cn /a un servidor. Por lo general, el uso de una solicitud
post es para enviar formas de datos o docum entos a un servidor.
Una solicitud H T T P solicita un post data a un m anejador de form ularios del lado del servidor que procesa b s
datos. IV>r ejem pb, cuando un usuarb realiza una bsqueda o participa en una encuesta basada en Web, el servidor
Wrb recibe b informacin especificada en d fn rm u b rb H T M L como parte de La solicitud. Las solicitudes g e t y post
pueden usarse para enviar datos a un servidor Web, peto cada tipo de solicitud envb b informacin de manera distinta.
Una solicitud g e t adjunta datos al URL; por ejem plo, m m w .g o o g le.co m /search ?q = d eitel. En este caso,
se a rc h es el nom bre del m anejador de form ularios del lado del servidor de Google, q es d nom bre de una va
riable en el form ulario de bsqueda de Google y d e i t e l es el trm ino a buscar. El carcter ? en el URL anterior
separa la cadena d e c o n su lta del resto del U RL en una solicitud. Se pasa un par nombre/valor al servidor, con
el nombre y el valor separados por un signo de igual (=). Si se enva ms de u n par nombre/valor, cada par va
separado por un signo A . El servidor usa b s datos que se pasan en una cadena de consulta para recuperar un re
curso apropiado del servidor. D espus el servidor enva una respuesta al cliente. Es posible iniciar una solicitud

16

Captulo I

Introduccin a las computadoras e Internet

g e t m ediante el envo d e un form ulario de H T M L con el atrib u to method establecido en " g e t H, o escribir el
URL (que tal vez contenga una cadena de consulta) directam ente en b barra de direccin del navegador. En los
captulos 2 y 3 veremos los b rm u b rio s de H T M L .
U na solicitud p o s t enva los datos del form ulario com o parte del mensaje de H T T P y no com o parte del
URL. Por lo general una solicitud g e t lim ita b cadena de consulta (es decir, to d o lo que est a la derecha del ca
rcter ?) a un nm ero especfico de caracteres, por lo q u e con frecuencia es necesario enviar grandes cantidades
de inform acin m ediante el m todo p o st. Este m todo tam bin se prefiere algunas veces debido a que oculta
los datos enviados del usuario, al incrustarlos en un mensaje de H T T P. Si un form ulario enva varios valores de
entrada ocultos ju n to con datos enviados por el usuario, el m todo p o s t podra generar un URL com o www.
m otorbusqueda. com /buscar. Los datos del form ubrio llegaran de todas form as ai servidor y se procesaran de
una manera similar a una solicitud g e t, pero el usuario no vera exactam ente b inform acin que se enva.

Observacin de ingeniera de softw are l.l


Los datos enviados en una solicitud post noforman parte del URI., por lo que el usuario no puede verlos de
manera predeterminada Sin embargo, hay herramientas disponibles que exponen estos datos, por o que no
debe suponer que estdn seguros slo porque estd usando una solicitud post.
Cach d e l lado d el cliente
Es com n que los navegadores coloquen en b cach (guarden en disco) las pginas Web vistas recientem ente
para volver a cargarlas con rapidez. Si n o hay cam bios entre b versin alm acenada en b cach y b versin ac
tual en b W eb, esto agilizar b experiencia de navegacin del usuario. U na respuesta de H T L P puede indicar
la longitud d e tiem po que el contenido perm anece actualizado". Si no ha pasado esta cantidad de tiem po, el
navegador no necesita enviar una solicitud al servidor y carga el docum ento de la cach. De m anera sim ibr,
tam bin existe b respuesta H T T P sin modificacin" para indicar que el contenido del archivo no ha cam biado
desde la ltim a vez que se solicit (esta inform acin se enva en b solicitud). Por lo general, los navegadores no
cofocan en b cach b respuesta del servidor a una solicitud p o s t, ya que b siguiente solicitud p o s t tal vez
no devuelva el m ism o resultado. Por ejem plo, en una encuesta m uchos usuarios podran visitar la m ism a pgina
W eb y responder a una pregunta. Despus, los resultados de la encuesta podran m ostrarse al usuario. C ada
nueva respuesta modificara los resultados de b encuesta.

1.7

Arquitectura de aplicaciones multinivel

C o n frecuencia las aplicaciones basadas en W eb son aplicaciones m u ltin iv e l (tam bin conocidas com o a p li
caciones d e n niveles), b s cuales dividen b funcionalidad en niveles (es decir, agolpam ientos lgicos de fun
cionalidad). A unque los niveles pueden estar en la m ism a com putadora, lo co m n es que los niveles de bs
aplicaciones basadas en W eb residan en com putadoras separadas. La figura 1.10 presenta b estructura bsica de
una aplicacin b asad a en W eb d e tres niveles.
El nivel inferior (tam bin conocido com o nivel de datos o de inform acin) m antiene los datos de la aplica
cin. Este nivel por lo general alm acena los datos en un sistem a de adm inistracin de bases de datos relaciona!
(RD BM S). En el captulo 18 veremos los sistemas R D B M S. Por ejem plo, Amazon podra tener una base de
datos de inform acin d e inventario q u e contenga b s descripciones d e los productos, sus precios y cantidades
en existencia. O tra base de datos podra contener b inform acin d e los clientes, com o nom bres de usuario,
direcciones de facturacin y nm eros de tarjetas de crdito. Estas bases de datos pueden residir en una o ms
com putadoras, que en conjunto constituyen los datos de b aplicacin.
El nivel in te rm e d io m plcm cnta b lgica de negocios, b lgica de c o n tro b d o r y b lgica de presentacin
para c o n tro b r b s interacciones entre los clientes de b aplicacin y sus datos. El nivel interm edio acta com o
un interm ediario entre los datos en el nivel de inform acin y los clientes d e la aplicacin. La lgica d e c o n tro
la d o r del nivel interm edio procesa b s solicitudes d e los clientes (com o b s solicitudes para ver un catlogo de

1.8

Comparacin entre las secuencias de comandos del lado del cliente y del lado del servidor

Nvel superior

Nivel intermedio

f*vel inferior

tambin c o n o c * como
nivel de interfaz de usuano o

tambin conocido como


rtvel de lgica de negocios

tambin conocido como


nivel de datos o

nivel cliente

Navegador

17

nivel de informacin

g>na V * b
Servidor Web

Base de datos

Figura 1. 10 | Arquitectura de tres niveles.

productos) y recupera los datos de la base d e datos. Despus, la lgica d e p re se n ta c i n del nivel interm edio
procesa los datos del nivel d e inform acin y presenta el co n ten id o al d ie n te . Por lo general, las aplicaciones
Web presentan los daros a los d ien tes com o docum cnros H T M L .
La lgica d e neg o cio s en el nivel interm edio im plem enta las reglas d e n eg o cio s y se asegura de q u e los
datos sean confiables antes de que la aplicacin actualice una base de datos o presente los ciatos a los usuarios.
Las reglas de negocios dieran la form a en que los d ien tes acceden a los datos y cm o es que las aplicaciones
procesan los datos. Por ejem plo, una regla de negocios en el nivel interm edio d e la aplicacin basada en Web
de una tienda m inorista podra asegurar que todas las cantidades de b s productos sean siem pre positivas. Una
solicirud de un d ie n te para ver una cantidad negativa en b base de daros d e inform acin d e productos d d nivel
inferior sera rechazada por b lgica de negocios del nivel interm edio.
El nivel su p e rio r, o nivel cliente, es b interfaz de usuario de b aplicacin; recopila b entrada y m uestra b
salida. Los usuarios interactan de m anera directa con la aplicacin a travs de b interfaz de usuario, que por
lo general es un navegador W eb o un dispositivo mvil. En respuesta a b s acciones del usuario (com o hacer d ic
en un hipervnculo), el nivel d ien te interacta con el nivel interm edio para realizar solicitudes y recuperar datos
del nivel de inform acin. Despus el nivel d ie n te m uestra al usuario los datos recuperados.

1.8

Comparacin entre las secuencias de comandos del lado


del cliente y del lado del servidor

Con JavaScript es posible usar secuencias de com andos del lado del d ie n te para validar b entrada del usuario,
interactuar con el navegador, m ejorar las pginas W eb y agregar com unicacin diente/servidor entre un nave
gador y un servidor Web.
Las secuencias de com andos del lado del cliente tienen sus limitaciones, com o b dependencia de navegadores:
d navegador o host d e secuencias d e com andos (acripting host) debe soportar el lenguaje de secuencias de co
mandos y sus capacidades. Las secuencias de com andos estn restringidas en cuanto al acceso arbitrario del hardware
y del sistema de archivos local por cuestiones de seguridad. O tra de b s cuestiones es que el cliente puede ver bs
secuencias de com andos del b d o del dicn te si usa Lacapacidad de ver el cdigo fuente del navegador. lat informacin
confidencial, com o b s contraseas y otros datos identificados com o personales, no deben estar en el cliente. Toda
b validacin de datos del b d o del cliente debe reflejarse en el servidor. Adems, el colocar en el cliente ciertas ope
raciones en JavaScript, puede propiciar que b s aplicaciones Web queden abiertas a ciertos problemas de seguridad.

18

Capitulo I

Introduccin a las computadoras e Internet

Los program adores tienen ms flexibilidad con las secuencias de com andos d e l la d o d e l se rv id o r, que a
m enudo generan respuestas personalizadas para los clientes. Por ejem plo, un cliente podra conectarse al servi
d o r W eb de una aerolnea y solicitar una lista de vuelos de B oston a San Francisco entre el 19 de abril y el 5 de
mayo. El servidor consulta la base de datos, genera en form a dinm ica un docum ento d e H T M L que contiene
b lista de los vuelos y enva ese docum ento al cliente. Esta tecnologa perm ite a los clientes obtener, de la base
de datos, b inform acin m is actualizada sobre los vuelos, al conectarse al servidor Web de una aerolnea.
Los lenguajes de secuencias de com andos del lado del servidor tienen un rango ms am plio de capacidades
program ables que sus contrapartes del lado del cliente. Las secuencias de com andos del lado del servidor tam
bin tienen acceso al software del b d o del servidor que extiende la funcionalidad de ste; los servidores W eb de
M icrosoft usan extensiones ISAPI (In te rfa z de p ro g ra m a c i n d e ap licacio n es d e serv id o r d e In te rn e t) y los
servidores H T T P Apache usan m d u lo s. Los com ponentes y los mdulos varan desde el soporte de lenguajes
de program acin hasta el corneo del nm ero de ocurrencias d e pginas Web. En los siguientes captulos habla
remos sobre algunos de estos com ponentes y mdulos.

1.9

Consorcio World W ide Web (W 3 C )

En octubre de 1994,T im Bcrneis-I.ee fund una organizacin: el C onsorcio W orld W id e W eb (W 3 Q , dedicado


a desarrollar tecnologa no propietaria e interoperable para W orld W ide Web. U no de los principales objetivos del
W 3 C es hacer que b Web sea accesibles nivel universal, sin im portar la discapacidad, el lenguaje o b cultura. La
pgina de inicio del W 3C (wiwi.w3.org) ofrece m uchos recursos sobre Inrernct y las tecnologas Web.
El W 3 C tam bin es u n a organizacin de estndares. Las tecnologas W eb estandarizadas por el W 3C se
conocen com o R ecom endaciones. Las ms actuales y prxim as del W 3 C incluyen el Lenguaje de m arcado de
hipertexto 5 (H T M L 5 ), las H ojas de estilo en cascada 3 (C SS3) y el Lenguaje de marcado cxtensible (XML).
U na recom endacin no es u n producto de software real, sino un docum ento que especifica el papel q u e desem
pea una tecnologa, las reglas de sintaxis y otras cosas ms.

1.10

Web 2.0: a socializar

E n 2003 hubo un cam bio considerable en cuanto a b form a en que b s personas y b s empresas usaban la Web y
dcsarrolbban aplicaciones basadas en Web. D ale D o u g h c rty de CyRcilly M ed ia1 invent el trm ino W b 2 .0
en 2003 para describir esta tendencia. Por lo general, b s com paas W eb 2 .0 usan b W eb com o una p b tafo rm a
para crear sirios cobborativos basados en com unidades (com o sitios de redes sociales, blogs y wikis).

Comparacin entre Web 1.0 y Web 2.0


La W b 1.0 (el estado de b Web durante b dcada de 1990 y a principios de b dcada de 2000) se enfocaba en un
nmero rebvam ente pequeo de empresas y anunciantes que producan contenido accesible a los usuarios (algunas
personas le Ibm an b Web de los folletos). La Web 2.0 involucra a los usuarias; no slo crean contenido con frecuen
cia, sino que ayudan a oigan izarlo, compartirlo, volver a mezcbrlo, criticarlo, actualizarlo, etctera. Una forma de ver
la Web 1.0 es com o una conferencia, un pequeo nm ero de profesores que informan a una gran audiencia de estu
diantes. En comparacin, b Web 2.0 es una conversacin, en donde todos tienen b oportunidad de hablar y compartir
opiniones, la s empresas que entienden b Web 2.0 saben que sus productos y servicios son conversaciones tambin.

Arquitectura de participacin
La W eb 2 .0 ofrece nuevas oportunidades adem s de conectar a b s personas y el contenido en formas nicas.
Abarca una a rq u ite c tu ra de p a rtic ip a c i n : un diseo que fom enta la interaccin del usuario y bs contribucio4. T O'Reilly, W hat is Web 2.0: Design Pattcrns and Business M odels fbr ihe Next G cncration o f Software". Septiembre de
2005 <h ttp :// w w .o r e n iy n e t.c o ti/p u b /a /o r e n iy /t< n /n e w s /2 0 0 5 / 0 9 /30/what- is-web-P0.html?page-l>.

1.10

Web 2 .0 : a socializar

19

nes com unitarias. Usted es el aspecto ms im portante de la W eb 2.0; de hecho, es tan im portante que en 2006
la Persona del ao d e la revista TIM E fue usted.5 El artculo reconoci el fenm eno social de la W eb 2.0: el
cam bio de unos cuantos poderosos a muchos empoderados. Ahora varios blogs populares com piten con los podcidsos m edios tradicionales y m uchas empresas Web 2 .0 estn basadas casi por com pleto en contenido generado
por el usuario. Para sitios W eb com o Facebook V lw itte r ''', YouTube, eBay* y W ikipedia*, los usuarios crean el
contenido, m ientras que las empresas proporcionan las plataform as en las cuales se va a introducir, m anipular
y com partir la inform acin. Estas empresas confian en sus usuarios; sin dicha confianza, los usuarios no pueden
realizar contribuciones im portantes en los sitios.
La arquitectura de participacin tam bin ha influido en el desarrollo de software. El software de cdigo
fuente abierto est disponible para que todos lo usen y m odifiquen con pocas restricciones o incluso ninguna
(hablarem os ms sobre el cdigo fuente abierto en la seccin 1.12). M ediante el uso de la in telig en cia colec
tiva (el concepto por el que un extenso grupo diverso de personas crearn ideas inteligentes), las com unidades
colaboran para desarrollar software q u e m uchas personas consideran m ejor y ms robusto q u e el software
propietario. Se estn desarrollando Aplicaciones enriquecidas de Internet (RIA) m ediante el uso de tecnologas
(como Ajax, que veremos en captulos posteriores del libro) que tienen la apariencia visual del software de escrin rio , con lo cual m ejoran la experiencia en general del usuario.

Motores de bsqueda y medios sociales


Los m otores de bsqueda com o Google, M icrosoft Bing y m uchos ms, se han vuelto esenciales para escu
driar la masiva cantidad de contenido en Web. Los sitios de marcadores sociales com o del.icio.us perm iten a
los usuarios com partir sus sitios favoritos con otros. Los sitios de m edios sociales com o D igg perm iten a la
com unidad decidir qu artculos de noticias son los ms im portantes. La form a en que buscam os la inform acin
en estos sitios tam bin est cam biando; las personas estn e tiq u e ta n d o el contenido W eb por asunto o palabra
clave, de una form a que pueda ayudar a cualquiera a localizar la inform acin con ms efectividad.

Web semntica
En el futuro, las com putadoras aprendern a com prender el significado d e los datos en b Web: ya estn apa
reciendo los inicios d e b W rb sem n tica. Las mejoras continuas en el hardware, software y bs tecnologas de
com unicaciones perm itirn nuevas y em ocionantes tipos de aplicaciones.
En nuestro libro electrnico D ive Into* W eb 2.0 (disponible en h t t p : //www. d e i t e l . com /diveintow eb20/)
cubrim os estos tem as y o tro s ms. El libro electrnico resalta b s principales caractersticas y tecnologas de b
W eb 2.0 m ediante ejemplos de empresas W eb 2.0 y negocios de Internet W eb 2 .0 popubres, adem s de
los modelos de m onetizacin. H ablam os sobre contenido generado por el usuario, blogs, redes de contenido,
redes sociales, servicios basados en b ubicacin y otras cosas ms. E n los captulos siguientes conocer b s tec
nologas cbve de software para crear aplicaciones basadas en W eb.

Google
En 1996, los candidatos al doctorado de ciencias com putacionales de Stanford, Larry Page y Sergey Brin em pe
zaron a colaborar en un nuevo m o to r de bsqueda. En 1997. eligieron el nom bre Google: una brom a relacio
nada con el trm ino m atem tico ggol, una canridad representada por el nm ero uno seguido d e 100 ceros"
(o 101(MI), un nm ero asom brosam ente extenso, l a habilidad de G oogle de devolver resultados de bsqueda con
extrema precisin le ayud a convertirse con rapidez en el m o to r de bsqueda ms utilizado y en uno de los
s tio s Web ms popubres en todo el m undo.

5. L Grossman, T IM E s Pcrson o f ihc Ycar: You."


a r t l c l e / 0 , 9 1 7 1 .1 5 6 9 5 1 4 . 0 0 .

TIME, Diciembre de 2006 <http://www. t i e .c o n /tin e /m a g a z l ne/

20

Capitulo I

Introduccin a las computadoras e Internet

Google co n tin a siendo innovador en las tecnologas de bsqueda. Por ejem plo, Google Goggles es una
fascinante aplicacin mvil (disponible en A ndtoid y Phone) que nos perm ite realizar una bsqueda en Google
m ediante el uso de una fotografa en vez de introducir texto. Slo hay que to m a r una fotografa d e un punto
de referencia, libro (portadas o cdigos de barras), logotipo, arte o etiqueta de botella de vino; despus Google
Goggles escanea la foto y devuelve los resultados de bsqueda. Tam bin puede tom ar una foto de cierto texto
(por ejem plo, el men de un restaurante o un anuncio) y Google Goggles lo traduce por usted.

Servicios Weby Mashups


E n este libro incluim os un anlisis considerable de los servicios Web (captulos 22, 25 y 28); adem s presen
tam os la m etodologa de desarrollo de aplicaciones de los mashups, en los que podem os desarrollar poderosas
c intrigantes aplicaciones con rapidez, al com binar servicios W eb com plem entarios (algunas veces gram itos)
y otras formas de fuentes de inform acin (figura 1.11). U no de los prim eros m ashups fue www. housingm aps.
com, que com bina los listados d e bienes races proporcionados por tw vw .craig sli s t . o r g con las capacidades de
Google Maps para ofrecer mapas que m uestran las ubicaciones de apartam entos en renta en un rea especfica.

Fuente de servicios Web

Cmo se utiliza

Google Maps

Servicios de mapas

Facebook

Redes sociales

Fuursquare

Regisuo (chcck-in) mvil

Linkcdln

Redes sociales para negocios

YouTube

Bsqueda de video

Twitter

M croblogs

Groupon

Comercio social

Netflix

Renta de pelculas

eBay

Subastas en Internet

Wikipedu

Enciclopedia colaborariva

Payftil

Pgos

Last.fm

Radio por Internet

Amazon cCommcrce

Comprar libros y otros artculos

Salcsforce.com

Administracin de relaciones con los clientes (CRM)

Skypc

Telefona por Internet

Microsoft Bing

Bsqueda

Fliclcr

Comparticin de fotos

Zillow

Precios de bienes races

Yahoo Seare h

Bsqueda

WeathcrBug

G im a

Figura 1. 11 | Algunos servicios Web populares que puede usar para crear aplicaciones Web

(www.p ro g ram m ab lew eb .co m /ap is/d 1 recto ry /1 7 so rtsm ash u p s).

1.10

Web 2 .0 : a socializar

21

Los servicios Web, las com putadoras a precios accesibles, el acceso abundante a Internet de alta velocidad,
el softw are d e cdigo fuente abierto y m uchos o tro s elem entos han inspirado nuevos y em ocionantes modelos
de negocios ligeros, q u e las personas pueden iniciar con slo una pequea inversin. Algunos tipos de sitios Web
con funcionalidad extensa y robusta que podran haber requerido cientos de miles, o incluso millones de dlares
para crearse en la dcada de 1990, ahora pueden crearse por sumas nominales.

A jax
Ajax es una de las principales tecnologas de software d e la W eb 2 .0 (figura 1.12). Ajax ayuda a que las aplica
ciones basadas en Internet se desem peen com o aplicaciones de escritorio; una tarea difcil, dado que dichas
aplicaciones sufren de retrasos de transm isin a m edida que los datos van y vienen entre su com putadora y los
servidores en Internet.

Capitule

Cobertura de Ajax

Captulo 1

Este captulo introduce Ajax.

Captulos 2 al 14

Estos captulos cubren varias tecnologas clave que se utilizan en aplicaciones Web
con Ajax, incluyendo HTML5, CSS3, JavaScript, manejo de eventos con JavaScript,
d M oddo de objetos de documento (DOM ) y la manipulacin dinmica de un
documento de HTML5: lo que se conoce como HTM L dinmico.

Captulo 15

Las aplicaciones Web hacen uso extenso de X.ML para representar datos estructurados.
Este captulo introduce XML, las tecnologas relacionadas con este lenguaje y
herramientas clave de JavaScript para cargar y manipular documentos de XML
mediante programacin.

Captulo 16

Este captulo utiliza las tecnologas presentadas en los captulos 2 al 15 para crear
aplicaciones Web habilitadas para Ajax. Usamos tanto XML como JSON (Notacin de
objetos de JavaScript) para enviar/recibir datos entre d cliente y d servidor. El captulo
empieza con b creacin de aplicaciones Ajax bsicas mediante JavaScript y el objeto
XMLHttpRequest dd navegador. Despus creamos una aplicacin Ajax mediante las
bibliotecas jQucry de JavaScript.

Captulos 21, 24
y 27

Estos captulos utilizan Ajax en ASP.NET de Microsoft con C# y en ASP.NET


con Visual Basic, y en JavaScrvcr Faces (JSF) respectivamente, para mplcmentar
aplicaciones Ajax que uriliccn esta tecnologa para la validacin de formularios y
actualizaciones parciales de pginas.

Figura 1.12 | Cobertura de Ajax en Cmo programar en Internet y W orld W ide W eb. quinta edicin.

Aplicaciones sociales
D urante los ltim os aos el nm ero de aplicaciones sociales en la W eb ha crecido de m anera notable. Aun
cuando la industria de la com putacin ha m adurado, estos sitios pudieron de todas form as obtener un xito
fenom enal en un periodo relativam ente corto. La figura 1.13 describe unas cuantas de las aplicaciones sociales
que han im pactado.

22

Capitulo I

Introduccin a las computadoras e Internet

Compaa

Descripcin

faccbook

lacrbook inici en el ao 2004 y ya tiene un valor estimado de S i 00 mil millones. Para


m ero d e 2011, Facebook era d skio ms activo en Internet con ms de 750 millones d e usu
arias que invertan 700 mil mJIoncs de m inutos en Facebook cada mes (w w . f a c e b o o k .
C o a i / p r e s s / 1 n f o .p h p ? s t a t 1 s t i c s ) . Segn su tasa d e crecimiento actual (cerca del 5%
mensual), en septiembre d e 2012 Facebook lleg a m millones d e usuarios de los dos mil
millones d e usuarios de Internet! La actividad en este sitio lo hace m uy atractivo para los de
sarrollad ores de aplicaciones. C ada da, los usuarios de Facebook instalan ms de 20 millones
de aplicaciones ( h t t p : / / vmh . f a c e b o o k . c o / p r e s s / i n f o . p h p ? s t a t i s t i es).

Iw ittc r

I w ittc r (fu n d ad o en 2006) revolucion los mkroblop- Los usuarios publican twccts"
m ensajes de hasta 140 caracteres de lo n g itu d . Se publican cerca de 140 m illones
d e tw cets a diario. U sted puede seguir los twccts d e am igos, artistas, negocios, represen
tantes del gobierno (incluyendo a Banack O b a m a , q u ien tiene 10 m illones de seguido
res), etctera, o p u ed e seguir tw ccts co n base en d tem a para d ar seguim iento a noticias,
tendencias y m u ch o m s. Al m o m e n to d e escribir este libro, L ady G aga tena d m ayor
nm ero d e seguidores (m is d e 13 m illones). 'Iw ittc r se co n v irti en d p u n to d e origen
para m uchas noticias d e ltim a hora en todo d m u n d o .

G ro u p o n

G ro u p o n , un sitio de comercio socuiL fue fundado en 2008. Para agosto de 2011 la com
paa estaba valuada en alrededor de los $25 mil m illones ;oon lo cual se convirti en la
com paa con m is rpido crcdm ienro hasta esa fecha! G ro u p o n m uestra ofertas diarias
en cada m ercado para restaurantes, vendedores al detalle, servicios, atracciones y dems.
Las ofertas se activan slo hasta que se inscribe el m nim o nm ero de pereonas requeri
das para com prar d producto o servicio. Si usted se inscribe en una oferta y todava no
cum ple con d m n im o , tal ver. se vea tentado a dar aviso a otras personas sobre esa oferta
p o r correo electrnico, Facebook. Iw ittcr, etctera. Si la oferta no cum ple con d m nim o
d e ventas, se cancda. U na d e las ofertas de G ro u p o n ms exitosas a n iv d nacional a la fe
cha fiic u n certificado d e $50 dlares en mercanca d e una im portante com paa de ropa
a s lo $25. Se vendieron m s d e 6 2 0 0 0 0 cupones e n un solo da ( h u f f i n g t o n p o s t .
c o m / 2 0 1 1 / 0 6 / 3 0 t h e - m o s t - s u c c e s f u l - g r o u p - n - 8 8 7 7 1 1 .h tm l) .

Foursquare

Ibursquarr. creada en 2009. es u n a aplicacin para realizar repones {check-ins) mviles, la


cual le perm ite notificar a sus am igos los lugares que visita. Puede descargar la aplicacin en
su tdfbno intdigentc y vincularla con sus cuentas d e 1-acebook y Twirtcr, d e m odo q u e sus
amigos puedan seguirlo desde varias plataformas. Si no tiene un td fb n o intdigentc, puede
reportarse m ediante un mensaje d e rexto. Foursquarc utiliza d servicio G PS para determ i
n ar su ubicacin exacta. Las empresas usan Foursquarc para enviar ofertas a los usuarios
q u e se encuentren cerca- Foursquarc inici sus operaciones en marzo d e 2009 y ya cuenta
ro n ms de 10 millones de usuarios en to d o d m u n d o (fbursquare.com /about).

Skypc

Skypc (fu n d ad o en 2 0 0 3 ) le p erm ite realizar llam adas d e voz y d e video (la m ayora son
gratuitas) a travs de In tern et, m ed ian te el uso d e una tecnologa llam ada VoIP(Voz
sobre IP, IP se refiere a P rotocolo de Internet"). La co m p a a se vendi recientem ente
a M icrosoft p o r $8.5 mil millones.

Figura 1.13 | Aplicaciones sociales (parte I de 2).

I.ll

jerarqua de datos

Compaa

Descripcin

YouTubc

YouTubc es un sitio para compartir videos que se fund en 2005. Antes de que trans
curriera un ao, Googlccompr la compaa por S i.65 mil millones. En la actuali
dad, YouTubc es responsable dd 8.2% dd trfico total en Internet (w ww.engadget.
c o m /2 0 ll/0 5 /l7 /s tu d y -f1 n d s -n e tflix -1 s -th e -la rg e s t-s o u rc e -o f-in te rn e t - t r a f f i c - i n / j . Una semana despus de la liberacin del iPhone3G Sde Apple
d primer modelo dd iPhone en ofrecer video las transferencias desde dispositivos
mviles a YouTubc aumentaron un 400% (vnwv. h y p eb o t.c o m /h y p e b o t/2 0 0 9 /0 6 /
y o u tu b e -re p o rts -l7 0 0 -ju m p -in -m o b ile -v 1 d e o .h tm l).

23

Figura 1.13 | Aplicaciones sociales (parte 2 de 2)

I.ll

Jerarqua de datos

Los elem entos de datos que procesan las com putadoras form an una je ra rq u a de d a to s que se vuelve cada vez
ms grande y com pleja en estructura, a m edida q u e progresamos prim ero a birs, luego a caracteres, despus a
campos y as en lo sucesivo. La figura 1.14 ilustra una porcin de la jerarqua de datos. La figura 1.15 sintetiza
b s niveles de la jerarqua de datos.

S ally

Negro

Ton

Azul

Judy

Verde

Iris

N aranja

Randy

Rojo

Re&St'o

Judy

Judy

Campo

00000000 01001010

t
Bit

Figura 1.4 | Jerarqua de datos.

A-chivo

Caricfcr Unicode J

24

Captulo I

Nivel

Introduccin a las computadoras e Internet

Descripcin

Bies

1 demento de datos ms pequeo en una computadora puede asumir d valor 0 o d valor 1.


A dicho elemento de datos se le denomina bit (abreviacin de dgito binario": un dgito que
puede asumir uno de dos valores). E l notable que las impresionantes funciones que realizan
las computadoras slo impliquen b s manipulaciones ms simples de ceros y unos: examinar
el i*alor de un bit, establecer el valor de un bit e invertir el valor de un bit (de 1 a 0 o de 0 a 1).

Caracteres

Es tedioso para bs personas trabajar con datos en d formato de bajo nivd de los bits. En
cambio, prefieren trabajar con dgitos decimales (0-9), letras (A-Z y a-z) y smbolos especiales
(por ejemplo, $,
% ,& ,* , (, )> - *, ? y /) Los dgitos, Ierras y smbolos especules se
conocen como caracteres. El conjunto de caracteres de b computadora es el conjunto de
todos los caracteres que se utilizan para escribir programas y representar elementos de datos.
Las computadoras slo procesan unos y ceros, por lo que el conjunto de caracteres de una
computadora representa cada carcter como un patrn de unos y ceros. Java usa caracteres
Unicode que estn compuestos de dos bytcs. cada uno de los cuales est compuesto a su
vez de ocho bits. Unicode contiene caracteres para muchos de los idiomas en el mundo. En
d apndice F obtendr ms informacin sobre Unicode. En el apndice D obtendr ms
informacin sobre d conjunto de caracteres ASCII (Cdigo estndar estadounidense para
d intercambio de informacin): d popular subconjunto de Unicode que representa bs letras
maysculas y minsculas, los dgitos y algunos caracteres especiales comunes.

Campos

As como los caracteres estn compuestos de bits, los campos estn compuestos de caracteres o
bytcs. Un campo es un grupo de caracteres o bytcs que transmiten un significado. Por ejemplo,
un campo compuesto de letras maysculas y minsculas se puede usar para representar d
nombre de una persona, y un campo compuesto de dgitos decimales podra representar b
edad de esa persona.

Registros

Se pueden usar varios campos relacionados para componer un registro (d cual se implcmenta
como una clase en Java). Por ejemplo, en un sistema de nmina, el registro de un empleado
podra consistir en los siguientes campos (los posibles tipos para estos campos se muestran
entre parntesis):
Nmero de identificacin del empleado (un nmero entero)
Nombre (una cadena de caracteres)
Direccin (una cadena de caracteres)
Salario por horas (un nmero con punto decimal)
Ingresos d d ao a la fecha (un nmero con punto decimal)
Monto de impuestos retenidos (un nmero con punto decimal)
As, un registro es un grupo de campos relacionados. En el ejemplo anterior, todos los campos
pertenecen al mismo empleado. Una compaa podra tener muchos empicados y un registro
de nmina para cada uno.

Archivos

Un archivo es un grupo de registros relacionados. [Nota:dicho en forma ms general, un archivo


contiene datos arbitrarios en formaros arbitrarios. En algunos sistemas operarnos, un archivo se ve
tan slo como una secuencia de bytcs: cualquier organizacin de esos byics en un archivo, como
cuando se organizan los datos en registros, es una vista creada por d programador de la aplicacin).
Es muy comn que una organizacin tenga muchos archivos, algunos de los cuales pueden contener
miles de millones, o induso billones de caracteres de informacin.

Figura 1.15 | Niveles de la jerarqua de datos (parte I de 2).

1.12

Nivel

Sistemas operativos

25

Descripcin

Base de d ato s

U na base de datos es una coleccin electrnica d e datos, la cual est organizada para facilitar
s i acceso y m an ipulacin. Existen varios m odelos de bases d e d a ta s. En este libro presenta
m os las bases de d ato s relacinales, en d o n d e los d ato s se alm acenan en tablas simples. U na
tabla incluye registros y (ampos. Por ejem plo, u n a tabla de estudiantes podra in c lu ir el prim er
nom bre, apellido, especialidad, n m e ro d e identificacin de estudiante y prom edio de califi
caciones. Los d ato s para cada estudiante form an un registro; las piezas individuales d e infor
m acin en cada registro son los cam pos. U sted puede buscar, ordenar y m a n ip u la r los datos
con base en su relacin co n varias tablas o bases de datos. Por ejem plo, u n a universidad podra
usar d ato s de la base de d ato s de estudiantes en com binacin co n las bases de d ato s d e cursos,
alojam iento dentro del cam pus, planes de alim en taci n , etc. En el cap n ilo 18 verem os las
bases d e daros y las asarem os en los cap tu lo s de program acin d d lado d d servidor.

Figura 1.15 | Niveles de la jerarqua de datos (parte 2 de 2).

1.12

Sistemas operativos

Los sistem as o p erativ o s son sistem as de softw are que se encargan de hacer ms conveniente el uso de las co m p u
tadoras para los usuarios, desarrollado res de aplicaciones y adm inistradores de sistemas. Adems, proveen servi
d o s que perm iten a cada aplicacin ejecutarse en form a segura, eficiente y concurrente (es decir, en paralelo) con
otras aplicaciones. El software que contiene b s com ponentes bsicos del sistem a operativo se d enom ina kem el.
Los sistemas operativos de escritorio populares son: Linux, W indow s 7 y M ac O S X. Los sistemxs operativos
mviles populares que se utilizan en telfonos inteligentes y tablets son: A ndroid de Google, A pple iOS (para
sus dispositivos iPhone, iPad e iPod Touch), BbckBerry O S y W indow s P h o n e 7.

1.12.1 Sistemas operativos de escritorio y de Notebook


En esta seccin hablarem os sobre dos sistemas operativos de escritorio populares: el sistem a operativo pro p ieta
rio W indow s y el sistem a operativo de cdigo fuente abierto Linux.

Windows: un sistema operativo propietario


A m ediados de la dcada de 1980. M icrosoft desarroll el sistem a o p erativ o W in d o w s, el cual consiste en una
interfaz grfica de usuario creada sobre D O S: un sistema operativo de com putadora personal m uy popular en
la poca en q u e para interactuar con l los usuarios tecleaban com andos. W indow s to m prestados m uchos
conceptos (com o b s iconos, m ens y ventanas) desarrollados por Xerox PARC y que se hicieron populares
gracias a b s prim eros sistemas operativos A pple M acintosh. W indow s 7 es el sistem a operativo ms reciente de
Microsoft; sus caractersticas incluyen mejoras en la interfaz de usuario, un arranque ms veloz, un m ayor grado
de refinam iento en cuanto a las caractersticas de seguridad, so p o rte para pantalla tctil y m ultitctil, y otras
cosas ms. W indow s es un sistem a operativo propietario ; est bajo el control exclusivo de Microsoft. W indow s
es por m ucho el sistem a operativo ms utilizado en el m undo.

Linux: un sistema operatii>o de cdigofuente abierto


El sistem a operativo Linux es ral vez el ms grande xito del m ovim iento d e cdigo fuente abierto. El cdigo
fuente a b ie rto se desva del estilo de desarroUo de software propietario, el cual predom in d u ran te b s prim eros
aos del software. C o n el desarrolb de cdigo fuente abierto, individuos y com paas contribuyen con sus
esfuerzos para desarrollar, m antener y evolucionar el software a cambio del derecho de usarlo para sus propios fines,
por b general sin costo. A m enudo el cdigo fuente abierto es escudriado p o r una audiencia m ucho mayor que

26

Capitulo I

Introduccin a las computadoras e Internet

la del software propietario, de m odo q u e casi siempre los errores se elim inan con ms rapidez. El cdigo fuente
abierto tam bin fom enta una m ayor innovacin. Las com paas de sistemas empresariales com o IBM, Oracle y
muchas otras, han realizado inversiones considerables en el desarrollo del cdigo fiiente abierto de Linux.
Algunas organizaciones clave en la com unidad de cdigo fuente abierto son: la fundacin Eclipse (el En
torno integrado de desarrollo Eclipse ayuda a los program adores a desarrollar software de m anera conveniente),
la fundacin M 07.illa (creadores del navegador Web Fircfox), la fundacin de softw are Apache (creadores del
servidor W eb Apache que se utiliza para desarrollar aplicaciones basadas en la W eb) y SourceForge (quien pro
porciona las herram ientas para adm inistrar proyectos de cdigo fuente abierto; tiene ms d e 3 0 6 0 0 0 de estos
proyectos en desarrollo). Las rpidas mejoras en la com putacin y las com unicaciones, la reduccin en costos y
el software de cdigo fuente abierto han logrado q u e en la actualidad sea m ucho ms fcil y econm ico crear un
negocio basado en software de lo que era hace tan slo una dcada. Facebook es un gran ejem plo de ello; este
sitio se inici desde un dorm itorio universitario y se cre con softw are de cdigo fuente abierto.6
El kernel de l i n u x es el ncleo del sistem a operativo de cdigo fuente abierto ms popular y lleno d e fun
cionalidades. que se distribuye en form a gratuita. Es desarrollado por un equipo de voluntarios organizados de
m anera informal; es popular en servidores, com putadoras personales y sistemas incrustados. A diferencia d e los
sistemas operativos propietarios com o M icrosoft W indow s y Apple M ac O S X, el cdigo fuente de Linux (el
cdigo del program a) est disponible al pblico para que lo exam inen y m odifiquen; adem s se puede descargar
e instalar sin costo. C om o resultado, los usuarios de Linux se benefician de una com unidad de desarrollado res
que depuran y m ejoran el kernel de m anera continua, con la ausencia de cuotas y restricciones de licencias y
con la habilidad de poder personalizar por com pleto el sistema operativo para cum plir necesidades especficas.
Son varias cuestiones el p oder de mercado de M icrosoft, e l pequeo nm ero de aplicaciones Linux am i
gables para los usuarios y la diversidad de distribuciones de Linux, tales com o Red Hat Linux, U b u n tu Linux
y m uchas m s- que han im pedido que se popularice el uso de Linux en las com putadoras de escritorio. Pero
este sistem a operativo se ha vuelto m uy popular en servidores y en sistem as em bebidos, com o los telfonos
inteligentes basados en A ndr id de Google.

1.12.2

Sistemas operativos mviles

Dos de los sistemas operativos mviles ms populares son: Apple OS y Google A ndroid.

iO Spara iPhone*, iP ad'y iPod Touch'


S tcvejobs y Steve W ozniak fundaron A pple en 1976, que se convirti rpidam ente en lid e re n la com putacin
personal. En 1979, Jobs y varios em pleados de Apple visitaron Xerox PARC (C entro de investigacin de Palo
Alto) para aprender sobre la com putadora de escritorio de Xerox que contaba con una interfaz grfica de usuario
(G U I). Esa G U I sirvi com o inspiracin para la com putadora personal A pple Lisa (diseada para clientes de
negocios) y para la Apple M acintosh en particular, que se lanz con m uchas fanfarrias en un m em orable a n u n
cio del Sper Tazn de 1984. Steve Jobs dej Apple en 1985 y fund N eX T Inc.
El lenguaje de program acin O bjective-C , creado por Brad C ox y T om Love en Stepstone a principios de la
dcada de 1980, agreg capacidades de program acin orientada a objetos (O O P ) al lenguaje de program acin
C E n 1988, N cX T obtuvo la licencia para O bjcctivc-C de StepStonc y desarroll un com pilador d e O bjectiveC adem s de varias bibliotecas, lo cual se us com o b plataform a para b interfaz de usuario del sistem a opera
tivo N eX T ST E P y para Interface Builder (que se usaba para construir interfaces grficas d e usuario). El sistem a
operativo Mac O S X d e Apple es descendiente de NeXTSTEP. El sistem a operativo propietario de Apple para el
Phone, O S, se deriva del A pple Mac O S X y se utiliza en los dispositivos iPhone, iPad y iPod Touch.
Es posible descargar aplicaciones directam ente a los disposidvos iPhone, iPad o iPod por m edio de la App
Store. Existen ms de 4 2 5 0 0 0 aplicaciones en b A pp Store.

6.

d e v e lo p e rs . fa c e b o o k . c o o /o p e n s o u rc e /.

1.13

Tipos de lenguajes de programacin

27

Google Android
A n d ro id el sistem a operativo para dispositivos mviles y telfonos inteligentes, cuyo crecim iento ha sido el
ms rpido hasta ahora est basado en el kernel d e Linux y en Java. Los program adores experim entados de
Java no rienen problem as para en trar y participar en el desarrollo de aplicaciones para A ndroid. Un beneficio
de desarrollar este tipo de aplicaciones es el grado de apertura de la plataform a. El sistem a operativo es gratuito
y de cdigo fuente abierto.
EJ sistem a operativo A ndroid fiie desarrollado por A ndroid Inc., com paa que adquiri G oogle en 2005.
En 2007 se form la Alianza para los dispositivos mviles abiertos* (O H A , O p cn H andscr Alliancc) un
consorcio d e 34 com paas en un principio, y d e 84 para el ao 2011 , para co n tin u ar con el desarrollo de
Android. Al mes de junio de 2011, se activaban ms de 500 000 telfonos inteligentes con A ndroid a diario!7
Ahora los telfonos Android se venden ms que los Phone en Estados U nidos.4 El sistema operativo A ndroid se
utiliza en varios telfonos inteligentes (M otorola D roid, H T C EVO 4G , .Samsung V ib ra n t" y m uchos ms),
dispositivos lectores electrnicos (com o el Nook de Barnes and N oble), com putadoras tipo tablet (com o Dell
Streak y Sam sung Galaxy Tab), quioscos con pantallas tctiles dentro de las tiendas, automviles, robots, repro
ductores m ultim edia y dems.
Puede descargar aplicaciones de m anera directa a su dispositivo A ndroid, a travs del A ndroid M arkct y de
otros mercados de aplicaciones. Al m es de agosto de 2011 haba cerca de 2 5 0 0 0 0 aplicaciones en el Android
Market de Google.

1.13

Tipos de lenguajes de programacin

Los programadores escriben instrucciones en diversos lenguajes de program acin, algunos de los cuales son com
prendidos directam ente por la com putadora y otros requieren pasos interm edios de traduccin. Cualquier com pu
tadora puede entender de manera directa slo su propio lenguaje m q u in a, que se define con base en su diseo de
hardware. Los lenguajes m quina consisten por lo general de nmeros (que en ltim a instancia se reducen a ceros
y unos). D ichos lenguajes son complejos para los hum anos.
La program acin en lenguaje m quina (nm eros q u e las com putadoras pueden entender en form a directa)
result demasiado lenta y tediosa para la m ayora de los program adores. C om o alternativa em pezaron a usar
abreviaciones parecidas al idiom a ingls para representar operaciones elementales. Estas abreviaciones form aron
la base de los lenguajes en sam b lad o res. Se desarrollaron programas traductores conocidos com o en sam b lad o res
para convertir los program as en lenguaje ensam blador a lenguaje m quina. A unque el cdigo en lenguaje en
sam blador es ms claro para los hum anos, es im prescindible que para las com putadoras sea traducido al lenguaje
m quina.
Para agilizar an ms el proceso de program acin, se desarrollaron lenguajes d e a lto nivel en ios que
podan escribirse instrucciones individuales para realizar considerables tareas. Los lenguajes de alto nivel nos
perm iten escribir instrucciones que se ven com o el ingls cotidiano y contienen expresiones m atem ticas d e uso
com n. Los program as traductores conocidos com o c o m p ila d o re s convierten los program as en lenguaje de alto
nivel a lenguaje m quina.
El proceso de com pilar un program a extenso en lenguaje de alto nivel a lenguaje m quina puede requerir
una cantidad de tiem po de cm puto considerable. E n consecuencia se desarrollaron program as in t rp re te s
para ejecutar de m anera directa los program as en lenguaje de alto nivel, incluyendo JavaScript y P H P ; cada
uno de estos lenguajes d e secuencias d e c o m a n d o s es procesado por intrpretes. La figura 1.16 m uestra varios
lenguajes de program acin populares.

7. n e w s .c n e t.c o m /8 3 0 l-l3 5 0 6 _ 3 - 2 0 0 7 4 9 5 6 -l7 / g o o g 1 e - 5 0 0 0 0 0 -a n d ro 1 d - d e v 1 c e s - a c t1 v a te d -e a c h - d a y /.


8. tn w w .p c w o r1 d .co m /a rt1 c 1 e /l9 6 0 3 5 /a n d ro 1 d _ o u tse lls_ th e _ 1 p h o n e _ n o _ b 1 g _ su rp rise .h tn l.

28

Captulo I

Introduccin a las computadoras e Internet

Tip de portabilidad l . l
Los interpretes tienen una ventaja sobre los compiladores de secuencias de comandos para Internet. Un
programa interpretado puede empezar a ejecutarse tan pronto como se descarga en el equipo cliente, sin tener
que compilarlo antes de poder ejecutarlo. La desventaja es que, por lo general, as secuencias de comandos
interpretadas se ejecutan con mds lentitud que el cdigo compilado.

Lenguaje de
programacin

Descripcin

C fue implcmenrado en 1972 por Dcnnls Rirdiic en los laboratorios Bell. En un principio se
hbo muy popular como d lenguaje de desarrollo del sistema operativo UNIX. En la actualidad,
la mayora dd cdigo para los sistemas operativos de propsito general se escribe en C o C++.
C**, una extensin de C, Fue desarrollado por Bjamc Stroustrup a principios de la dcada de
1980 en los Laboratorios Bell. G* + proporciona varias caractersticas que potcncialrzan" al
lenguaje C, pero lo ms importante es que proporciona la capacidades de una programacin
orienrada a objetos.
Objcctivc-C

ObjcctivtvC es un lenguaje orientado a objetos basado en C. Se desarroll a principios de la


dcada de 1980 y despus fue adquirido por la empresa Ncxr, que a su vez fue adquirida por
Apple. Se ha convertido en d lenguaje de programacin clave para d sistema operativo Mac OS
X y todos los dispositivos operados por d iOS (como los dispositivos iPod, iPhone e iftid).

Visual Basic

El lenguaje Visual Basic de Microsoft (que se basa en el lenguaje Basic desarrollado en el


Darmouth Collcgc en la dcada de 1960) se introdujo a principios de la dcada de 1990 para
simplificar el desarrollo de aplicaciones para Microsoft Windows. Sus versiones ms recientes
soportan la programacin orienrada a objetos.

Visual O

Los tres principales lenguajes de programacin orientados a objetos de Microsoft son Visual
Basic, Visual C++ (basado en C++) y C# (basado en Cf+ y Java; desarrollado para integrar
Internet y la Web en las aplicaciones de computadora).

Java

En 1991, Sun Microsystems fund un proyecto corporativo de investigacin interno dirigido


por James Gosling, que result en el lenguaje de programacin orientado a objetos y basado
en (%, conocido como Java. Un objetivo clave de Java es permitir la escritura de programas
que se ejecuten en una gran variedad de sistemas compuracionalcs y dispositivos controlados
por computadora. A esto se le conoce algunas veces como escribir una vez, ejecutar en
donde sea". Java se utiliza para desarrollar aplicaciones empresariales a gran escala, mejorar
b funcionalidad de servidores Web (las computadoras que proveen el contenido que vemos
en nuestros navegadores Web), proveer aplicaciones en dispositivos para d consumidor
(smartphones, receptores digitales multimedia y otros ms) y para muchos otros propsitos.

Figura 1.16 | Lenguajes de programacin populares (parte l de 2).

1.14

Tecnologa de objetos

Lenguaje
de
programacin

Descripcin

PHP

PHP es un lenguaje orientado a objetos de secuencias de comandos y cdigo flente abierto"


(vea b seccin 1.12), d cual recibe soporte por medio de una comunidad de usuarios y
desarrollado res; se utiliza en numerosos sitios Web, incluyendo Wikipcdia y Facebook. PHP es
unaplataforma independientr. existen implemen taciones para la mayora de indos los principales
sistemas operativos UNIX, Linux, Mac y Windows. PHP tambin soporta muchas bases de datos,
incluyendo MySQL Otros dos lenguajes populares similares en conceptos a PH P son Perl y
Python. El trmino IAMP" describe cuatro tecnologas dave para crear software de cdigo fuente
abierto: Linux (sistema operativo). Apache (servidor Web), MySQL (base de datos) y PHR Perl o
Python (lenguajes de secuencias de comandos dd bdo dd servidor).

Python

Python, otro lenguaje orientado a objetos de secuencias de comandos, se liber al pblico


en 1991. Fue desarrollado por Guido van Rnssum del Instituto Nacional de Investigacin
para las Matemticas y Ciencias Compu racionales en Amstcrdam (CWI); la mayor parte
de Python se basa en Modula-3. un lenguaje de programacin de sistemas. Python es
expandible": puede extenderse a travs de clases e interfaces de programacin.

JavaScript

JavaScript (desarrolbdo por Brendan Eich en Netscape) es d lenguaje de secuencias de comandos


ms utilizado en d mundo. Su principal uso es para agregar capacidad de programacin a las
pginas Web; por ejemplo, animaciones c intcractividad con el usuario. Se incluye en todos los
prindpalcs navegadores Web.

Ruby on Rails

Ruby fue creado a mediadas de la dcada de 1990 por Yukihiro Matsumoto; es un lenguaje
de programacin orientado a objetos de cdigo flente abierto, con una sintaxis simple que es
amilar a I^thon. Ruby on Rails combina d lenguaje de secuencias de comandos Ruby con d
marco de trabajo de aplicaciones Web Raik. desarrollado por 37Signak. Su libro. Gftting Real
(gett1ngreal.37s1gnals.com/toc.php), es una lectura obligitoria para los desarrolladotes Web.
Muchos desarro liado res de Ruby on Rails han reportado ganancias de productividad superiores a
bs de otros lenguajes al utilizar aplicaciones Web que trabajan de manera intensiva con bases de
datos. Ruby on Rails se ut3iz para crear b interfaz de usuario dclwittcr.

Seala

Scala (vevw .scala-lang.org/node/273), abreviacin en ingjsdc "lenguaje cscabble", fic


diseado por Martin Odcrsky, un profesor a i la colc Poiytrchniquc Fdralc de lausannc
(EPFL) en Suba. Se lanz al pblico en 2003; utilba los paradigmas de orientacin a objetosy de
programacinfuncional y est diseado para integrarse con Java. Si programa en Scala, podr reducir
de manera considerable b cantidad de cdigo en sus aplicaciones. Twirter y Foursquare usan Scala.

29

Figura 1.16 | Lenguajes de programacin populares (parte 2 de 2).

1.14

Tecnologa de objetos

Crear software en form a rpida, correcta y econm ica sigue siendo un objetivo difcil de alcanzar en una poca
en q u e la dem anda de software nuevo y ms poderoso va en aum ento. Los oljetos, o dicho en form a ms precisa
las clases de las que provienen los objetos, son en esencia com ponentes de softw are reutilizables. Existen objetos

30

Capitulo I

Introduccin a las computadoras e Internet

de fecha, hora, audio. video, automviles, personas, etc. Casi cualquier sustantivo se puede representar de m ane
ra razonable com o un objeto de software en trm inos de sus atributos (com o el nom bre, color y tam ao) y com
portamientos (por ejem plo, calcular, moverse y comunicarse). Los desarrollado res de software han descubierto
que al usar una m etodologa de diseo e im plem entacin orientada a objetos y modular, pueden crear grupos de
desarrollo de software ms productivos d e lo q u e era posible con las tcnicas populares anteriores; por lo general
b s program as orientados a objetos son ms fciles de com prender, corregir y modificar.

El autom vil como un objeto


Em pecem os con una an ab g a simple. Suponga q u e desea conducir un autom vily hacer que vaya mds rpido al
oprim ir el pedal del acelerador. Q u debe ocurrir para que usted pueda hacer esto? Bueno, antes d e que pueda
conducir un autom vil, alguien tiene que disearlo. Por b general, un autom vil em pieza en form a de dibujos
de ingeniera, sim ilares a b s panos de construccin que describen el diseo de una casa. Estos dibujos de inge
niera incluyen el diseo del pedal del acelerador. El pedal oculta al conductor b s com plejos m ecanism os que se
encargan de que el autom vil aum ente su vebeidad, de igual form a q u e el pedal del freno oculta b s m ecanism os
que dism inuyen la v eb eid ad del autom vil y el volante oculta b s m ecanism os que hacen que el autom vil d
vuelta. E sto perm ite q u e k s personas con poco o nada d e conocim iento acerca d e cm o funcionan b s m otores,
b s frenos y b s mecanismos de b direccin puedan conducir un autom vil con facilidad.
Antes d e poder conducir un autom vil, ste debe construirse a partir de b s dibujos de ingeniera que b des
criben. U n autom vil com pleto tendr un pedal acelerador real para hacer que aum ente su v eb eid ad , pero aun
as no es suficiente; el autom vil no acelerar por su propia cuenta (esperemos que as sea!), as que el conductor
debe oprimir el pedal del acelerador para aum entar b vebeidad.

Mtodosy clases
Ahora vamos a utilizar nuestro ejemplo del automvil para introducir algunos conceptos cbve de b program acin
orientada a objetos. Para realizar una tarea en u n a aplicacin se requiere un m todo. Ese m todo a b ja b s instruc
ciones del program a que se encargan de realizar sus tareas. El m todo oculta al usuario estas careas, de b misma
b rm a que el pedal del acelerador de un automvil oculta al conductor b s mecanismos para hacer que el autom vil
vaya ms rpido. En b s lenguajes de program acin orientados a objetos, creamos una unidad de program a llamada
clase pora a b ja r el conjunto de m todos que realizan las tareas de esa clase. Por cjem p b , una clase que representa
a una cuenta bancarb podra contener un m todo para depositar dinero en una cuenta, otro para retirar dinero de
una cuenta y un tercero para solicitar el saldo acmal de b cuenta. Una dase es similar en concepto a b s dibujos
de ingeniera de un autom vil, que contienen el diseo de un pedal acelerador, volante d e direccin, etctera.

Insta nciamiento
As com o alguien tiene que construir un autom vil a p artir d e sus dibujos de ingeniera para q u e alguien pueda
c o n d u c irb despus, tam bin es necesario crear un objeto de una clase para que u n program a pueda realizar bs
tareas definidas por b s m todos de esa dase. Al proceso d e hacer esto se le denom ina instanciamiento. Entonces,
un objeto viene siendo una in stan c ia de su clase.

Reutilizacin
As com o b s dibujos de ingeniera d e un autom vil se pueden reutibzar m uchas veces para construir muchos
autom viles, tam bin es posible reutilizar una d ase muchas veces para crear m uchos objetos. Al reutilizar b s
ebses existentes para crear nuevas dases y programas, ahorram os tiem po y esfuerzo. La reurilizacin tam bin
nos ayuda a crear sistemas ms confiables y efectivos, debido a que con frecuencia las clases y b s com ponentes
existentes pasan por un extenso proceso de prueba, depuracin y optimizacin del desempeo. D e b m ism a ma
nera en que la nocin de piezas intercambiables fue crucial para b Revolucin Industrial, b s clases rcu ti liza bles
son crudales para b revolucin de software incitada por b tecnologa de objetos.

1.15

Mantenerse actualizado con las tecnologas de la informacin

31

Observacin de ingeniera de softw are 1.2


Ufe un mtodo de construccin en bloques para crear programas. Evite rnventar la rueda: use piezas
existentes siempre que seaposible. Esta reutilizcuin es la clave del beneficio de la programacin orientada
a objetos.

Mensajes y llamadas a mtodos


Cuando conduce un automv il, al oprim ir el pedal del acelerador enva un mensaje al automvil para que realice una
arca: aum entar la velocidad. D e manera similar, es posible enviar mensajes a un objeto. Cada measaje se implcmcnta
tom o llam ada a m todo, para indicar a un m todo del objeto que realice su tarea. Por ejemplo, un program a podra
Lunar al m todo del objeto depositar para aum entar el saldo de una cuenta en un banco en particular.

Atributosy variables de instancia


Adems de tener capacidades para realizar tareas, un autom vil tam bin tiene atributos: color, nm ero de puera s , cantidad de gasolina en el tanque, velocidad acrual y registro del toral de kilm etros recorridos (es decir,
b lectura de su velocm etro). Al igual que sus capacidades, los atrib u to s del autom vil se representan com o
parte de su diseo en sus diagramas de ingeniera (que por ejem plo, incluyen un velocmetro y un indicador de
com bustible). AI conducir u n aurom vil real, estos atributos se llevan junto con d autom vil. C ada autom vil
m antiene sus propios atributos. Por ejem plo, cada u n o sabe cunta gasolina hay en su tanque, pero no cunta
hay en los tanques d e otros.
De m anera similar, un objeto tiene atributos que lleva consigo a m edida que se utiliza en un programa.
Estos atributos se especifican com o parte d e b clase del objeto. Por ejem plo, un objeto cuenta bancaria tiene un
atributo saldo que representa la cantidad de dinero en la cuenta. C ada objeto cu en ta bancaria conoce el saldo de
b cuenta que representa, pero no los saldos de las otras cuentas en el banco. Los atributos se especifican m ediante
las variables d e in stan cia de b clase.

Encapsulamiento
Las clases e n c a p su la n (envuelven) los atributos y m todos en objetos; los atributos y m todos de un objeto
estn m uy relacionados. Los objetos se pueden com unicar entre s, pero por lo general no se les perm ite saber
cm o estn im plcm cntados otros objetos; los detalles de im plem cntacin estn ocultos dentro de los mism os
objetos. Este o c u lta m ie n to d e in fo rm a c i n es crucial para b buena ingeniera de software.

Herencia
Es posible crear una nueva dase de objetos con rapidez y de m anera conveniente m ediante b herencia: b nueva
clase absorbe las caractersticas de u n a clase existente, con b posibilidad de personalizarlas y agregar caractersti
cas nicas propias. En nuestra analoga del autom vil, sin d u d a un o b jeto de b clase convertible es un objeto
de la clase m s general llamada autom vil pero, de m anera ms especfica, el techo puede ponerse o quitarse.

1.15

Mantenerse actualizado con las tecnologas de la informacin

Esto com pleta nuestra introduccin a Internet y a b Web. Si surge u n a pregunta a m edida que avance en el
libro, enve un correo a d e ite l@ d e ite l. com y le responderem os en form a o portuna. Esperamos que disfrute
usar Cmo programar en Internet y World Wide Web, quinta edicin. La figura 1.17 m uestra una lista de b s p u b li
caciones tcnicas y comerciales cbve que le ayudarn a perm anecer actualizado con b tecnologa, b s noticias y
las tendencias ms recientes en cuanto a b tecnologa de com putacin. Internet y b W eb. Divirtase!

32

Captulo I

Introduccin a las computadoras e Internet

Publicacin

URL

ACM TcchNews

te c h n e w s.a c m .o rg /

ACM Transactions on
Acccssiblc Computing

www.1 s . umbe. e d u /ta c c e s s /ln d e x . html

ACMTransactions on Internet
Technology

to 1 t.a c m .o r g /

Bloombcrg BusincssWcck

www.businessweek.com

C N ET

new s.cn et.co m

Communications o f the ACM

cacm .acm .o rg /

Computer World

www. compu te r w o r ld . com

Engadgct

eWbek

iwvw.eweek.com

Fast Company

www.fasteompany.com/

Fortune

m o n ey .cn n .co m /m ag az1 n es/fo rtu n e/

IEEE Computer

w w w .com puter.org/porta1/w eb/com puter

IEEE Internet Computing

www. compu t e r . o rg /p o rta l/w e b /1 n te rn e t/H o m e

InfoWorld

vA*w.1nfoworld.com

Mashablc

ma sha b le . com

PCWodd

www.pcworld.com

SD Times

www.sdtimes.com

Slashdot

s la s h d o t.o r g /

Smartcr Technology

www.smartertechnology.com

Technology Review

technologyreview.com

Tcchcrunch

techcrunch.com
www.w1red.com

Wirtd

* . engadget.com

Figura 1.17 | Publicaciones tcnicas y comerciales.

Ejercicios de autoevaluacin
l.l

Complete la&siguientes oraciones:


a) La compaa que populariz la computacin personal fu e __________ .
b) Las computadoras procesan datos bajo d control de conjuntos de instrucciones conocidas com o___________ de
computadora.
c) E l __________ es un tipo de lenguaje de computadora que utiliza abreviaciones similares al idioma ingls para
bs instrucciones de lenguaje mquina.
d) Los lenguajes d e ____________________ son m is convenientes para que d programador escriba programas con
rapidez y facilidad.
c) El nico lenguaje que una computadora puede entender en forma directa es d ___________ de esa computadora.
0 Los programas que traducen programas de un lenguaje de alto nivd a un lenguaje mquina se denominan
g) E l __________ o marcado de contenido, son otra parte clave d d tema colaborativo de la Web 2.0.

Respuestas a los ejercicios de autoevaluacin

33

h) Con el desarrollo d e i __________ , los individuos y empresas conrribuyen con sus esfuerzos para desarrollar,
mantener y evolucionar software a cambio del derecho de usar ese software para sus propios fin, por lo general
sin costo.
i) E l___________ fue el predecesor de Internet.
j) La capacidad de transmitir de informacin de un medio de comunicacin como Internet se conoce como
k) El acrnimo de TC P/IP significa
1.2

Complete las siguientes oraciones.


permitealosusuarios de computadoras localizar y ver documentos basados en multimedia sobre
a) L a _________
casi cualquier tema a travs de Internet.
b) __________ fund una organizacin conocida como Consorcio World Widc Web (W3C). dedicada a desarrollar
tecnologas no propietarias c intcropcrablcs para World Widc Web.
c) L o s___________ son componentes de software rcutilizablcs, que modelan elementos dd mundo real.
d ) __________ es un sistema operativo para smartphones basado en d kcm d de Linux y en Java.

1.3

Complete las siguientes oraciones (con base en la seccin 1.14):


a) Los objetos tienen una propiedad que se conoce c o m o _______________ ; y aunque stos pueden saber cmo
comunicarse con los dems objetos a travs de inrcrfaccs bien definidas, por lo general no se les permite saber
cmo estn implcmcntados los otros objetos.
b) En los lenguajes de programacin orientados a objetos, creamos_______________ para contener el conjunto de
mtodos que realizan tareas.
c) El proceso de analizar y disear un sistema desde un punto de vista de orientacin a objetas se denomina
d) Mediante l a ________________ las nueva clases de objetos pueden absorber las caractersticas de las clases
existentes y luego agregar caractersticas nicas propias.
e) El tamao, forma, color y peso en un objeto se consideran______________ de su clase.

1.4

Indique si cada uno de los siguientes enunciados es verdadero o falso. Si esfalso. explique por qu.
a) HTM L5 ( Lenguaje de marcado de hipertexto 5) es un lenguaje de alto nivel diseado para especificar d contenido
y b estructura de pginas Web de una manera portable.
b) Al mantener d estilo de las pginas junto con el contenido y su estructura, es posible cambur con facilidad la
aparkncb visual de bs pginas en todo un sitio Web, o en una parte d d sirio Web.
c) Un servidor Web mantiene b base de datos de nombres de hosts y sus correspondientes direcciones IP, y realiza
bs traducciones en forma automtica.

1.5

Complete los siguientes cnuncudos:


a) _______________ es una biblioteca de JavaScript que simplifica la programacin en JavaScript al facilitar la
manipubcin de los dem entas de una pgina Wd> e intcracruar con los servidores de una manera portable a
travs de varios navegadores Web.
b) E l_______________ es el estndar para transferir datos cifrados en Web.
c) _______________ es el identificador de los recursos en Internet.
d) U n a_______________ es un valor numrico que identifica en forma nica al servidor en Internet.
c) A menudo los navegadores usan b _______________ para volver a cargar bs pginas Web con rapidez.
f ) El sistema operativo_______________ se utiliza en los dispositivos iPhonc, iPad y iPod Touch.

Respuestas a los ejercicios de autoevaluacin


1.1

a) Apple, b) programas, c) Lenguaje ensamblador, d) Alto nivd. c) lenguaje mquinx f ) compiladores, g) Etiquetado.
h) cdigo fuente abierto, i) ARPANET. j) ancho de banda, k) Protocolo de control de transmisin/Pro tocolo de
Internet.

1.2

a) World Widc Web. b) Tira Bcmcrs-Lec. c) Objetos, d) Android.

34

Captulo I

Introduccin a las computadoras c Internet

1.3

a) oculramicnto de informacin, b) clases, c) anlisis y diseo orientado a objetos (ADOO). d) herencia.


c) atributos.

1.4

a) Falso. H TM L es un lenguaje de marcado. b)Falso. Al separar el estilo de b pgina de su contenido y estructura,


es posible cambiar la apariencia visual de bs pginas en todo un sitio Web o en una parte del mismo, con slo
intercambiar una hoja de estilo por otra, c) Falso. EJ Servidor de Sistema de Nombres de Dominio (DNS)
mantiene la base de datos de nombres de hosts y sus correspondientes direccin IP, y realiza las traducciones en
forma automtica.

1.5

a) jQucry. b) Protocolo seguro de transferencia de hipertexto (H'ITPS). c) URI (Identificad o res uniformes de
recursos), d) Direccin IP (Protocolo de Internet), e) cach. 0

Ejercicios
1.6

Complete bs siguientes oraciones:


a) El proceso de indicar a b computadora cmo resolver un problema se lb m a _______________ .
b) Qu tipo de lenguaje computacional utiliza abreviaturas dd ingls para bs instrucciones de lenguaje mquina?
c) El nivel de lenguaje de computadora ms conveniente para que usted pueda escribir programas con rapidez
/facilid ad es_______________ .
d) El nico lenguaje que una computadora entiende de manera diroca se conoce como e l_______________ de esa
computadora.
c) La Web 2.0 abarca u n _______________ ; diseo que fomenta la interaccin del usuario y las contribuciones de
b comunidad.
0 _______________es d concepto de que un grupo grande y diverso de personas crearn ideas inteligentes.

1.7

Complete las siguientes oraciones:


a ) _______________se utiliza ahora para desarrollar aplicaciones empresariales de gran escala, para mejorar la
funcionalidad de los servidores Web. para proporcionar aplicaciones en dispositivos para d consumidor y muchos
otros fines ms.
b) En un principio._______________ se hizo muy popular como lenguaje de desarrollo para el sistema operativo
UNIX.
c) La com paa_______________ es la que tiene d crecimiento ms rpido de la historia en la Web 2.0.
d) El lenguaje de programacin_______________ fue desarrollado por Bjame Stroustrup a principios de la dcada
de 1980 en los Laboratorios Bdl.

1.8

Ind ique si cada uno de los siguientes enunciados es verdadero o falto. Si es falso, explique por qu.
a) los Hojas de estilo en cascada, Cascading Style Sheets 3 (CSS3), se utilizan para especificar la presentacin o d
estilo de los dentemos en una pgina Web (por ejemplo: fuentes, espaciado, tamaos, colores, posicionamiento).
b) Asegurar una apariencia visual consistente en los navegadores del lado dd cliente es uno de los grandes desafos
del desarrollo de aplicaciones Web.
c) Por lo general una solicitud HTTP pon (o sends) enva datos a un servidor.
d) Con frecuencia las secuencias de comandos del lado dd cliente pueden acceder a los servidores de estructura de
directorio de archivos.

1.9

Complete las siguientes oraciones:


a) _______________es el protocolo de Internet de prxima generacin que cuenta con seguridad integrada y un
nuevo esquema de direcdonamicnro, con lo que se expande de manera considerable d nmero de direcciones
disponibles.
b) Por lo general, los documentos de HTM L contienen _______________ que, al hacer clic en dios, cargan un
documento Web especificado.
c) U na_______________ contiene informacin que dirige a un navegador al recurso que d usuario desea utilizar.
la _______________pone dichos recursos a disposicin de los clientes Web.
d) Los dos tipos de requerimiento de HTTP ms comunes so n _______________ y _______________ .

Ejercicios

35

c) Las aplicaciones basadas en Web son aplicaciones mulrinivcl. E l_______________ (tambin conocido como el
nivel de datoso de informacin) mantiene los datos de la aplicacin y por lo general los almacena en un sistema de
administracin de bases de daros relacinales. E l_______________ implementa la lgica de negocios, lgica
de control y lgica de presentacin para controlar las interacciones entre la aplicacin y los clientes y sus datos.
E l_______________, o nivel cliente es la interfaz de usuario de la aplicacin, que recopila la entrada y muestra
la salida.
0 _______________. d sistema operativo para dispositivos mviles y smartphoncs con m is rpido crecimiento,
se basa en el kcmcl de Linux y en Java.
1.10 Cul es la relacin entre JavaScript y ECMAScrlpt?
1.11 Describa la diferencia entre programacin del lado d d cliente y programacin del lado del servidor.
1.12

(Internet en la industria y la investigacin) Las figuras 1.1 a 1.4 proporcionan ejemplos de cmo se utilizan las
computadoras e Internet en la industria y la investigacin. Encuentre tres ejemplos adicionales y describa cmo es
que cada uno de ellos utiliza la Internet y la Web.

1.13 (Computacin en la nube) Describa tres beneficios del modelo de computacin en nube.
1.14 (Servidos Web) En la figura 1.11 listamos varios servicios Web que podemos usar para crear nuestras propias
aplicaciones Web. Use das servicios Web diferentes (ya sea de la tabla o de los que encuentre en linca) para describir
un tipo de aplicacin Web que le gustara crear. Cmo utilizara el contenido que proporciona cada uno de los
servicios Web?
1.15 (Aspectos negativos de Internet) A pesar de sus cuantiosos beneficios, la Internet y la Web tienen varias desventajas:
cuestiones de privacidad, robo de identidad, SPAM y malware. Investigue algunos de los aspectos negativos de
Internet. Liste cinco problemas y describa lo que podra hacerse para ayuelar a resolverlos.
1.16 (Web 2.0) En este captulo hablamos sobre unas cuantas empresas Web 2.0 populares, como Facebook, Twitter,
Groupon, Foursquare, Skype y YouTubc. Identifique otra empresa Web 2.0 y describa por qu encaja en el modelo
de negocios Web 2.0.
1.17 (Un reloj como objeto) Tal vez usted use en su mueca uno de los tipos de objetos ms comunes del mundo:
un reloj. Hable sobre la forma en que cada uno de los siguientes trminos y conceptos se aplica a la nocin de un
reloj: objeto, atributos, comportamientos, clase, herencia (considere por ejemplo, un reloj despertador), abstraccin,
modelado, mensajes, cncapsulamicnro, interfase y oeulramiento de informacin.
1.18 (Privacidad') Algnos de ios servicios de correo electrnico en linca guardan toda la correspondencia de corteo
electrnico durante cierto periodo de tiempo. Suponga que un empicado disgustado de uno de estos servicios de
correo electrnico en lnea publicara en la Internet todas las correspondencias de correo electrnico de millones
de personas, incluyendo la suya. Analice las consecuencias.
1.19 (Responsabilidad tica y legal del programador) Como programador en la industria, tal vez llegue a desarrollar
software que podra afectar la salud de otras personas, o incluso sus vidas. Suponga que un error de software en uno
de sus programas provocara que un paciente de cncer recibiera una dosis excesiva durante la terapia de radiacin y
resultara gravemente lesionado o muriera. Analice las consecuencias.
1.20 (El Flash Crasb" de 2010) Un ejemplo de las consecuencias de nuestra excesiva dependencia con respecto a las
computadoras es d denominado flash aasIT, que ocurri d 6 de mayo de 2010, cuando d mercado de valores de
Estados Unidos se derrumb de manera precipitada en cuestin de minutos, al borrarse billones de dlares de inversiones
que se volvieron a recuperar pocos minutos despus. Use Internet para investigar las causas de este derrumbe y analice
las consecuencias que genera.
1.21 (Proyectospara hacer la diferencia) La siguiente es una lista de unas cuantas organizaciones mundiales que trabajan
para hacer la diferencia. Visite estos sitios y nuestro Centro de recursos para hacer la diferencia en ***. del te l .com/
makingadifference. Prepare una lista de los primeros 10 proyectos de programacin que usted considere podran
hacer la diferencia.

Capitulo I

Introduccin a las computadoras e Internet

wvm . 1raag1necup. con/about

La Copa Imagine de Microsoft es una competencia global en la que los estudiantes usan la tecnologa para intentar
resolver algunos de los problemas ms difciles del mundo, como la sustentabilidad ambiental, acabar con la
hambruna, la respuesta a emergencias, la alfabetizacin y combatir el VIH/SIDA. Visite mtw.iniaginecup.com/about
para obtener ms informacin sobre la competencia y para aprender sobre los proyectos desarrollados por los anteriores
ganadores. Tambin encontrar varias ideas de proyectos enviadas por organizaciones de caridad a nivd mundial en
mw.im aginecup.com/students/imagine-cup-solve-this. Si desea obtener ideas para proyectos de programacin
que puedan hacer la diferencia, busque en b Web el tema "hacer la diferencia" y visite los siguientes sitios Web:
wvm. un. o rg /m i11ennl umgoal s

El proyecto Milenio de Naciones Unidas busca soluciones para los principales problemas mundiales, como b
sustentabilidad ambiental, b igualdad de sexos, b salud infantil y materna, b educacin universal y otros mis.
vmm. 1bm. com/sna rte r pl an e t /
El sitio Web Smarter Pbnet de IBM* habla sobre cmo es que IBM utiliza b tecnologa para resolver problemas
relacionados con los negocios, b computacin en b nube, la educacin, b sustentabilidad y otros ms.
M vm .gatesfoundat1on.org/Pages/hom e.aspx

La Fundacin Bill y Mclinda Gates ofrece becas a b s organizaciones que trabajan para mitigar el hambre, b pobreza
y bs enfermedades en los pases en desarrollo. En Estados Unidos, b fundacin se enfoca en mejorar b educacin
pblica, en especial pora las personas con bajos recursos.
vm m .nethope.org/

NctHope es una cobboracin de organizaciones humanitarias en todo el mundo, que trabajan para resolver los
problemas relacionados con b tecnologa, como la conectividad y b respuesta a bs emergencias, entre otros.
Mm. r a l n fo re stfo u n d a t1 o n .o rg /h o m e

La Fundacin Rainforcsr trabaja para preservar los bosques tropicales y proteger los derechos de los indgenas que
consideran a estos bosques como su hogar. El sitio incluye una lista de cosas que usted puede hacer para ayudar.
vwm.undp.org/

El Programa de b s Naciones Unidas para el Desarrollo (UNDP) busca soluciones a los desafos globales, como b
prevencin y recuperacin en crisis, b energa y el ambiente, b gobemanza democrtica y otros ms.
wvm.un1do.org

La Organizacin de bs Naciones Unidas para d Desarrollo Industrial (UNIDO) busca reducir la pobreza, dar a los
pases en desarrollo b oportunidad de participar en el comercio global y promover tanto la efciencu de b energa
como la sustentabilidad.
Mvm.usa1d.gov/
USAID promueve b democracia global, b salud, el crecimiento econmico, b prevencin de conflictos y b ayuda
humanitaria, entre otras cosas.
nvm.to y o ta . con/ 1 dea s - for-good/

El sitio Web Ideas fbr Good de Toyota describe varias tecnologas de esta empresa que estn haciendo b difcrcncb:
entre stas se incluyen su Sistema avanzado de asistencia de estacionamiento (Advanced Parking Guidancc System),
b tecnologa Hybrid Syncrgy Drive*, el Sistema de venribein operado por energa sobr (Solar Powcrcd Vcnribtion
System), el modelo T.H.U.M.S. (Modelo humano total para b seguridad) y Touch Traccr Dispby. Usted puede
prticipar en el desafo de Ideas for Good; enve un breve ensayo o un video que describa cmo se pueden usar estas
tecnologas para otros buenos propsitos.

Introduccin a HTML5
parte I
Tuvo un maravilloso talento para
empaquetar el pensamiento al
mximo y hacerlo portable.
H i o i m a R ahingrofi M ar.itiLrr

Los pensamientos elevados deben


tener un lenguaje elevado.
Aristfanes

Objetivos
En este capitulo aprender a:
Comprender los componentes
importantes de los documentos
de HTML5.
Usar HTML5 para crear pginas
Web.
Aadir imgenes a pginas
Web.
Crear y usar hipervnculos para
ayudar a los usuarios a navegar
por pginas Web.
m Marcar listas de informacin.

Crear tablas con filas y


columnas de datos.
Crear y usar formularios para
obtener la entrada del usuario.

Plan general

38

Captulo 2

Introduccin a HTML5: parte I

2.1

Introduccin

2 .8 Caracteres especiales y reglas horizontales

2.2

Edicin de HTML5

2.9 Listas

2.3

El primer ejemplo de HTML5

2.10 Tablas

2 .4

Servicio de validacin de HTML5 del W3C

2.11 Formularios

2.5

Encabezados

2.12 Vinculacin interna

2.6

Vinculacin

2.13 Elementos m eta

2.7

Imgenes

2.14 Recursos Web

2.7.1

Atributo alt

2.7.2

Elementos vacos

2.7.3

Uso de imgenes como hipervnculos


Resumen | Ejercicios de autoevaluacin | Respuestas a los ejercicios de autoevaluacin | Ejercicios

2.1

Introduccin

En este captulo empezaremos a desatar el poder del desarrollo de aplicaciones basadas en W eb con H T M L 5 . A
diferencia de los lenguajes de programacin com o C , C++, C # , Java y Visual Basic, H T M L 5 es un lenguaje d e
m arcad o que especifica la estructura y el contenido de b s docum entos que se visualizan en b s navegadores Web.
Presentaremos algunos fundam entos y luego cubrirem os tcnicas ms sofisticadas de H T M L 5 , com o:
* 'labias, que son especialmente tiles para estructurar inform acin a partir d e bases de datos (es decir,
software que alm acena conjuntos estructurados de datos)
F o rm u lario s para recolectar inform acin de b s visitantes de las pginas Web
* V inculacin in te rn a para facilitar la navegacin por b s pginas
Elem entos m eta para especificar b inform acin sobre un docum ento
E n el captulo 3 presentarem os m uchas nuevas caractersticas en H T M L 5- En el captulo 4 habbrcm os sobre
CSS3, u n a tecn o b g a para especificar b apariencia de las pginas Web.

2.2

Edicin de HTML5

Para crear d o c u m e n to s d e H T M L 5 , escribimos texto d e m arcado de H T M L 5 en un editor de texto (com o el


B b c de notas, TextEdit, vi, emacs) y b guardam os con b extensin de nom bre de archivo . html o . htm.
Las com putadoras conocidas com o servidores Web alm acenan docum entos d e H T M L 5. Los clientes (com o
b s navegadores W eb que se ejecutan en su com putadora b e a l o Sm artphonc) solicitan recursos especficos a b s
servidores W eb, com o docum entos de H T M L 5 . Por e je m p b , al escribir v w w .d e ite l .com /books/dow nloads.
htm l en el cam po de direccin d e un navegador Web se solicita el archivo dow nloads. htm l del directorio books
en el servidor Web que se ejecuta en w v m .d eitel .com. En el c a p tu b 17 habbrem os sobre b s servidores Web.
Por ahora s b tiene que c o b c a r b s docum entos de H T M L 5 en su com putadora y para desplegarlos (visualizar
los) debe a b rirb s en form a local con un navegador Web.

2.3

El primer ejemplo de HTML5

En este c a p tu b presentarem os las capacidades de marcado de H T M L y proveeremos capturas de pan


talla q u e m uestran cm o un navegador despliega (visualiza) el H T M L 5 . Puede descargar b s e je m p b s de

2.3

El primer ejemplo de HTML5

39

w*w. pearsonh1ghered.com/deitel. Los docum entos de H T M L 5 que m ostram os tienen nmeros de linea para
su conveniencia; estos nm eros no form an parte del docum ento. Abra cada d o cu m en to de H T M L 5 en varios
navegadores Web, de m anera que pueda verlos c interactuar con ellos.
La figura 2.1 es un docum ento de H T M L 5 llam ado p r in c ip a l.h tm l, que est guardado en la carpeta
ejemplos/cap02. Este prim er ejem plo m uestra el mensaje Bienvenido a HTML5 en el navegador. A hora anali
cemos cada lnea del docum ento.
1

<!DOCTYPE html>

< ! - - Fig. 2.1: p r in c ip a l.h tm l -->


< ! - - Primer ejemplo de HTML5. -->
<hta1>
<head>
< n eta c h a r s e t = u tf-8 " >

< title> B ie n v en id o < /t1tle >


</head>
<body>

<p>Bienvenido a HTML5</p>
</body>
< /h t l>

la pestaa
nuestra el
contenido del
elemento t i t l e

' fiey//Cyejemplo%/c4p02/pnfKipat.html

Bxm^tdo a HTML?

<2 =

Figura 2.1 | El primer ejemplo de HTML5.

Declaracin de tipo de documento


1.a declaracin d e tip o d e d o c u m e n to (DOCTYPE) en la lnea 1 es obligatoria en los docum entos de H T M L 5
para que los navegadores desplieguen la pgina en m o d o e s t n d a r de acuerdo con las especificaciones de
H T M L y CSS. Algunos navegadores operan en m o d o q u ir k s para m antener com patibilidad hacia atrs con
pginas Web que no estn actualizadas con los estndares ms recientes. E n o d a docum ento de H T M L 5 que
a ee debe incluir la declaracin DOCTYPE.

Lneas en blanco
Incluim os Uneos en blanco (lneas 2 y 10) para facilitar la legibilidad d e nuestros docum entos; el navegador
ignora estas lneas.

Comentarios
Las lneas 3 y 4 son co m en tario s d e H T M L 5- Insertar comentarios en su marcado de H TM L5 para mejorar la
legibilidad y describir el contenido de un docum ento. El navegador ignora los comentarios cuando se despliega
su docum ento. Los com entarios de H T M L 5 empiezan con < ! y term inan con --> . E n nuestros ejemplos in
cluimos com entarios que especifican el nmero de figura y el nom bre de archivo, adems de indicar el propsito
del ejemplo. C on frecuencia incluiremos com entarios adicionales, en especial para explicar nuevas caractersticas.

40

Captulo 2

Introduccin a HTML5: parte I

Elementos html, heady body


1 marcado d e H T M L 5 contiene texto (e imgenes, grficos, animaciones, sonidos y videos) que representa el
contenido de un docum ento, adems de elem entos que especifican la estructura y el significado de un docum ento.
Algunos elementos im portantes son htjnl (que empieza en la lnea 5 y term ina en la lnea 14), head (lneas 6 a 9)
y body (lneas 11 a 13). El elemento html encierra la seccin d d encabezado (representada por el elem ento head) y
la seccin d d cu erp o (representada por el elemento body). La seccin del encabezado contiene informacin sobre
d docum ento de H T M L 5, com o el conjunto de caracteres (UTF-8, el esquem a de codificacin de caracteres ms
popular para la Web) que utiliza la pgina (lnea 7) (k> que ayuda al navegador a determ inar cm o va a desplegar el
contenido) y el ttulo ( t i t l e ) (lnea 8). La seccin del encabezado tambin puede contener instrucciones especiales
de form ato del docum ento conocidas com o hojas de estilo CSS3 y program as del lado diente conocidos com o
secuencias d e co m an d o s (script) para crear pginas W eb dinmicas (en el captulo 4 presentarem os las hojas de es
tilo CSS3 y explicaremos las secuencias de com andos con el lenguaje JavaScript en los captulos 6 al 13). La seccin
del cuerpo contiene el contenido de b pgina, que el navegador muestra cuando el usuario visita la pgina Web.

Etiquetas de inicio y de fin


Los docum entos de HTM L5 delimitan h mayora de los dem entas con una etiqueta de inicio y una etiqueta de fin.
Una etiqueta de n id o consiste en d nombre del elemento entre parntesis angulares (por ejemplo, chtml > en la lnea 5).
Una etiqueta de fin consiste en el nombre del dem ento seguido de una barra diagorud (/) entre parntesis angulares (por
ejemplo, c/htm l > en la lnea 14). Tambin existen los denominados elementos vacos", que no tienen etiquetas de fin.
Ms adelante veremos que muchas etiquetas de inicio tienen a trib u to s que proporcionan nform adn
adicional sobre un elem ento, el cual utilizan los navegadores para determ inar cm o procesar ese elem ento. C ada
atributo tiene un n o m b re y un v a lo r separados por un signo de igual ().

Buena prctica de programacin 2.1


Aunque los nombres de los elementosy atributos de HTML5 no son susceptibles al uso de maysculas
(puede usar letras minsculasy maysculas), es una buena prctica usar slo letras minsculas.

Elemento t l t l e
La lnea 8 especifica un elem ento t i t l e . A esto se le conoce com o d e m e n to a n id a d o , ya que est encerrado
entre las etiquetas de inicio y de fin del elem ento head. FJ elem ento head tam bin es un elem ento anidado, ya
que est encerrado entre las etiquetas de inicio y de fin del elem ento h tm l. El elem ento t i t i e describe la pgina
Web. Por lo general, los ttulos aparecen en la b a rra d e ttu lo en la parte superior de la ventana del navegador,
en la pestaa del navegador en d o n d e se visualiza la pgina y tam bin com o el texto que identifica a una pgina
cuando los usuarios agregan esa pgina a su lista de F a v o r ito s o M arcadores, lo que les perm ite regresar a sus
sitios favoritos. Los m otores de bsqueda usan t i t i e para fines de ndexacin y a la hora de m ostrar resultados.

pxr'

Buena prctica de programacin 2.2


d i aplicar sangra a los elementos anidados se enfatiza la estructura de un documento y sepromueve la
legibilidad. Usamos tres espaciospara cada nivel de sanpla.

E n la lnea 11 com ienza el elem ento body del docum ento, el cual especifica su contenido y puede incluir texto,
imgenes, sonidos y videos.

Elemento pdrrafo (<p>... </p>)


Algunos elementos, com o el d e m e n to p rra fo que se indica m ediante las etiquetas <p> y </p> en la lnea 12, ayu
dan a definir b estructura de un docum ento. T odo el texto que se coloca entre bs etiquetas <p> y </p> form a un

2.5

Encabezados

41

prrafo. Cuando un navegador despliega un prrafo, coloca espacio adicionalpor encima y debajo del texto delprmfo.
La lnea clave en el program a es la lnea 12, que indica al navegador que muestre el mensaje Bienven id o a HTML5.

Etiquetas de fin
Este docum ento term ina con dos etiquetas de fin (lneas 13 y 14) que cierran los elem entos body y htm l. respec
tivamente. La etiqueta </htm1> inform a al navegador que el marcado de H T M L 5 est com pleto.

Cmo abrir un archivo de H TM L5 en su navegador Web predetenttinado


I^ra abrir un ejemplo de H T M L 5 de este captulo, abra la carpeta en donde guard los ejemplos del libro, na
vegue hasta la carpeta del captulo 2 y haga doble clic en el archivo para abrirlo en su navegador W eb predeter
minado. En este p u n to deber aparecer la ventana de su navegador en form a sim ilar a la captura de pantalla de
ejem plo que se m uestra en la figura 2.1. Ajustam os el tam ao d e la ventana del navegador para ahorrar espacio.

2.4

Servicio de validacin de HTML5 del W 3C

D ebe usar una sintaxis correcta de H T M L 5 para asegurar que el navegador procese sus docum entos en forma
apropiada. El C onsorcio W orld W idc W eb (W 3C ) ofrece u n servicio d e validacin (en v a l i d a t o r .w3 .o rg )
para revisar la sintaxis de un docum ento. Los docum entos pueden validarse de varias formas:
Proporcionar el U RL de una pgina W eb en lnea
C argar un archivo en el validador
Pegar cdigo directam ente en un rea de texto sum inistrada en el sitio del validador
lodos los ejem plos de H T M L 5 en este libro se validaron m ediante el proceso de cargar un archivo en:
v a l1 d a to r.* 3 .o rg /# v a l1 d a te - b y -u p lo a d
Para usar v a lid a to r .w 3 .o r g /# v a l id a te -b y -u p lo a d , haga clic en el b o t n Choose File (Examinar) para
seleccionar de su com putadora el archivo que desea validar. A continuacin, haga clic en More O ptions (Ms
opciones). En la lista desplegablc Document Type ( U p o de documento), seleccione HTMLTS (experimental).
Seleccione la casilla de verificacin Verbose Output (Salida detallada) y luego haga clic en el b o t n Check
(Veri f 1car) para validar su docum ento. Si contiene errores de sintaxis, el servicio de validacin m ostrar m en
sajes para describir esos errores. C o m o el validador de H T M L 5 an se considera experim ental, recibir una
advertencia cada vez que valide un docum ento de H T M L 5 .

Tip para prevenir errores 2.1


La mayora de los navegadores intentan desplegar los documentos de HTML5 incluso aunque sean invlidos.
Esto puede conducir a resultados inesperados e indeseables. Use un servicio de validacin como el MarkUp
Val1dat1on Srv1ce /Servicio de validacin de aarcadoy del W3C para confirmar que un documento
HTML5 tenga la sintaxis correcta.

2.5

Encabezados

Tal vez cierto texto en u n docum ento de H T M L 5 sea ms im portante que otro. H T M L 5 ofrece seis elem en to s
de en c a b e z a d o (h l a h6) para especificar la importancia relativa de la inform acin (figura 2.2). El elem ento de
encabezado h l (lnea 12) se considera el ms significativo y por lo general se despliega e n una fuente ms grande
que los otros cinco (lneas 13 a 17). C ada elem ento de encabezado sucesivo (h2, h3, etc.) se despliega por lo
general en una fuente cada vez ms pequea.

42

Captulo 2

Introduccin a HTML5: parte I

Tip de portabilidad 2.1


El tomarte de texto que se utiliza para mostrar cada elemento de encabezado puede variar de un navegador
a otro. En el capitulo 4 usaremos CSS para controlar el tamao del texto y otras propiedades del mismo.

Observacin de apariencia visual 2.1


Al colocar un encabezado en la parte superior de cada pgina es msfcil para los visitantes comprender
elpropsito de a pgina. Los encabezados tambin ayudan a crear un esquema para un documento y son
indexados por los motores de bsqueda.

<!DOCTYPE ht*l>

< ! - - F ig . 2 .2 : encabezado.htm l -->


< ! - - Los elem en to s de encabezado h l a h6. -->
<htil>
<head>
<meta charset - u t f - 8 ">
<t1t1e> Encabezados </t1tie>
</head>
<body>

<hl>Encabezado
<h2>Encabezado
<H3>Encabezado
<h4>Encabezado
<hS>Encabezado
<H6>Encabezado

de
de
de
de
de
de

n iv e l
n iv e l
n iv e l
n iv e l
n iv e l
n iv e l

1</H1>
2</h2>
3</h3>
4</h4>
5</hS>
6</h6>

</body>

</htm l>

to c b c * d o !

'

l ) ftW//Cyejmpios/cap02/eocabzadoMmJ

>t>oi logtn&z

titb SU GHey C j Impcrtad de Irtcrtv..

E n c a b e z a d o d e n iv e l 1
K n c a b e / a d o d e n iv e l 2

Encabezado de nivel 3
1 n < a b e /a d o d n h r i 4
EttraWeat t a b d 5
K

4o !

Figura 2.2 | Los elementos de encabezado h l a h6.

2.6

Vinculacin

Una de las caractersticas m is importantes de HTM L5 es el hipervnculo, que hace referencia (o vincula) a otros
recursos, com o los docum entos de H TM L5 y b s imgenes. C uando un usuario haoe clic en un hipervnculo, el nave-

2.6

Vinculacin

43

jpdor trata de ejecutar una accin asociada con l (por ejemplo, navegar hada un URL o abrir un correo electrnico de
un cliente). Cualquier menlo visualizado puede actuar como lpervinculo. Ibr lo general los navegadores Web subrayan
los hipervnculos de texto y colorean su texto en azul de manera predeterminada, de m odo que los usuarios puedan
distinguir los hipervnculos del texto simple. En la figura 2.3 creamos hipervnculos de texto hacia cuatro sitios Web.
1 < IDOCTYPE html>
2
3 <1 Flg. 2.3 : vinculos.html >
4 <1 Vnculos hacia otras pginas Web -->
3 <htil>
6
<head>
7
<neta charset - utf-S"
8
<title>V&iacute;nculos</title>
9
</head>
10

11

<body>

12
13

<hl>Estos son mis sitios favoritos:</hl>


<p><strong>Haga clic en un nombre para visitar ese sit1o.</strong></p>

14
13
16
17
18
19

< I crea cuatro hipervnculos de texto -->


<p><a href = http://www.facebook.com>Facebook</a></p>
<p><a href - ,'http://www.twitter.com">Twitter</a></p>
<p><a href - http://www.fourquare.co">Foursquare</a></p>
<p><a href = http://www.google.con">Coogle</a></p>
</body>

20

21

</htl>

C _ file///CV<jeniOoVcp02AirKuloUilnil
slenlos j
keOHw Q
<k

1*

E s to s s o n m is s itio s f a v o r i t o s :
lllfifccm MI frontil*|uri tMfJff SltK.
Farrtef*
lata

fiao

Figura 2.3 | Vinculacin a otras pginas W :b. (El texto a c u te es el cdigo especial para acentuar letras, como en la
Inea 8 de este cdigo).
En la lnea 13 se inrroduce el d e m e n to s tro n g , el cual indica que su contenido tien e alta im portancia. Por
b general los navegadores despliegan dicho texto en una fuente en negrita.
lo s vnculos se crean m ediante el uso del elem ento a (a n d a ). En la lnea 16 se define un lpervinculo hacia
el U RL asignado al atributo h r e f (referencia de hiperrexto), el cual especifica la ubicacin de un recurso tal com o
Una pgina Web o ubicacin dentro de una pgina Web
U n archivo
U na direccin de correo electrnico

44

Captulo 2

Introduccin a HTML5: parte I

El dem en to ancla en la lnea 16 vincula el texto Facebook a una pgina W eb ubicada en h ttp ://w w w . f a c e
book . com. El navegador cam bia el color de cualquier vnculo de texto una vez que se haga clic en ste (en cuyo
caso, los vnculos son de color m orado en vez de azul). C uando un U RL no indica u n docum ento especfico
en el sitio W eb, el servidor devuelve una pgina W eb predeterm inada. A esta pgina se le conoce por lo general
com o Index .h tm l, pero la m ayora de los servidores Web pueden configurarse para usar cualquier archivo com o
la pgina W eb predeterm inada para el sitio. Si el servidor Web no puede localizar un docum ento solicitado,
devuelve una indicacin de error al navegador Web (lo que se conoce com o error 404) y ste m uestra una pgina
Web que contiene un mensaje de error.

Observacin de ingeniera de softw are 2.1


Aunque no se requiere en HTML5, se recomienda encerrar los valores de los atributos entre comillas sencillas
o dobles.

Crear un hipen>inculo a una direccin de correo electrnico


Las anclas pueden vincular a direcciones de correo electrnico mediante el uso de un URL mal 1t o :. C uando el usuario
hace d ic en este tipo de vnculo con ancla, la mayora de los navegadores inician el programa de corteo electrnico
predeterminado del usuario (por ejemplo, Mozilla Thunderbird, Microsoft O utlook o Apple Mail) pata que ste
pueda escribir un mensaje de correo electrnico a b dileccin vincubda. La figura 2.4 muestra este tipo de anda. Las
lneas 13 y 14 contienen un vnculo de correo electrnico. 1.a forma de un ancb de correo electrnico es <a h r e f =
mailto:dfmTfonGrrrt">...</a>. En este caso, creamos un vnculo a b direccin de correo d e ite lO d e ite l .com. La
lnea 13 incluye b direccin de correo electrnico com o aparecer en el mensaje visualizado en el navegador.
1

<!D0CTYPE html>

3
4
3

6
7
8
9

10
11
12
13
14
13
26
17
18

<1-- Fig. 2.4: contacto.html >


<!-- Crear un vinculo a una direccin de correo electrnico. >
<htnl>

<head>
<meta charset "utf-8">
<t1tle>P&aacute;g1na de contacto</t1tle>
</head>
<body>
<p>
Para escribir a <a href "mailto:de1tel0de1tel.com">
Deitel & Associates, Inc.</a>. haga clic en el vA1acute;nculo y su cliente
de correo predeterminado abrir&aacute; un mensaje y lo dirigirAaacute; a nosotros.
</p>
</body>
</html>

P$g*nt d confete

C
Sooi ujgtrot

1r///C7ejmplos/cap02/cooucto.html
1

feSkf G*kry CJ I*portado dtecm -

Para cribe a D c d & Aisoeur_ 'flc haga clic en el -*w:vio y ro cictirc de correo predetertranado fcnr un
m n u y y lo dsuva a ooiocrc*

Figura 2 .4 | Crear un vnculo a una direccin de correo electrnico (parte l de 2).

2.7

jj A *

'j*
fO
M
N
M
tM
l

Imgenes

45

W
*
W
t#
o

r%
u
W
S
ih

TW
anta
A
'a
' 5 H *
\
n a
&
s
- i
i
f
w
i.

;
P
r
visto
C
W

l
M
V
r r
- x,
a n
i
4
h
a
n
a
ro
c
o
a
n
o
in
o
M
irrt vetm* 'nirei*
h
aM
m
J 9tiuem**0i

tontam
v
c
d
t e
_
_
_
_
_
_
_
_:_
_
_
_
_
_
_
_
_
_
_:_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
p

,
i
^
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
jjfflr_
A
nM
*

ti

Figura 2.4 | Ciear un vnculo a una direccin de correo electrnico (parte 2 de 2).

2.7

Imgenes

Ya m ostram os cm o marcar docum entos que slo contienen texto, pero las pginas W eb tam bin pueden con
tener imgenes, anim aciones, grficos, sonidos e incluso videos. Los formatos de imgenes ms popu lares que
utilizan los desarro IIadores W eb en la actualidad son: PN G (Grficos portables de red) y JPEG (Grupo de expertos
unidos en fotografa). Los usuarios pueden crear imgenes m ediante el uso de software especializado, com o
Adobe P hotoshop Express (www.photoshop.com), G .I.M .P. (www.gimp.org), Inkscape (w w w .inkscape.org) y
m uchos ms. Tam bin es posible adquirir imgenes de varios sirios W eb, m uchos d e los cuales ofrecen imgenes
libres de regalas (figura 2.5); lea los trm inos de servicio de cada sitio para determ inar si necesitar permiso
para usar sus imgenes, en especial en aplicaciones comerciales con fines de lucro. La figura 2 .6 dem uestra cm o
incluir imgenes en pginas Web.

Sitio para compartir imgenes

URL

Flickr*

M y w .fl1 c k r.c o n

Photobucket
FotkT
dcviantART
Pieasa ~
TinyPic*

p h o to b u c k e t.c o n
M yw .fotk1.com
M yw .devlant a r t.c o m
p 1 c a s a . 9 0 0 9 le .c o m

tin y p lc .c o n

ImageShaclc
FrccD igitaIPhotos.nct

M yw .1m ageshack.us

Open Stock Photography


Open Clip Art Library

M y w .o p e n s t o c k p h o t o g r a p h y . o r g

M y w .f r e e d 1 g 1 ta lp h o to s .n e t
M y w .o p e n c 1 1 p a rt.o rg

Figura 2.5 | Sitios populares para compartir imgenes.

46

Captulo 2

Introduccin a HTML5: parte I

1 <!DOCTYPE htn1>
2

3
4
J

e>

<1 Fig. 2 .6 : imagen.html >


<1 In c lu si n de imgenes en archivos de HTML5. -->
<htil>
<head>

o i e t a c h a rs e t = u t f - S M>

<title>Ifr&aacute;genes</title>

10
11

< /h e a d >

<body>

12

13
14
13
16
17
18

<p>

<img s r c
a lt
<ing s r c
a lt a
</p>
</body>
</html>

= "cpphtp.png" wldth = 92 height = 120"


"Portada del l i b r o C++ How t o Progra">
"jh tp .pn g" width - 92" height "120
"Portada del l i b r o lava How to Progra">

la pestaa muestra el contenido del elemento t i t l e

X Akk
fvotrto*

W p fcS it Cn>w y
"l

> ct
*

9* t e -

S a ld a d *

H n a fn * n U i

f)

Potete

r,iw
Mo-U.

| Modopretexte d*n<!.,.do

f *%115% *

Figura 2.6 | Inclusin de imgenes en archivos de HTML5.


Las lneas 13 y 14 usan un d e m e n to in g para incluir una imagen en el docum ento. La ubicacin del archi
vo de la im agen se especifica m ediante el a tr ib u to s r c (origen). E sta imagen se encuentra en el mismo directorio
que el docum ento de H T M L 5 , por lo que slo se requiere su nom bre de archivo. A esto se le conoce com o
ru ta relativa: la imagen se alm acena en form a relativa a la ubicacin del docum ento. Los arributos opcionales
w ld th y h e ig h t especifican las dim ensiones de la im agen. Para escalaran* imagen podem os au m en tar o reducir
los valores de b s atributos w ldth y h e ig h t. Si se o m iten estos atributos, el navegador usa b s vabres actuales de
anchura (wi d th ) y altura (h e ig h t). Las imgenes se m iden en pxclcs (elem entos de imagen"), que representan
puntos de c o b r en la pantalla. Los program as de edicin de imgenes m uestran las dim ensiones en pxclcs. La
im agen en la figura 2.6 tiene 92 pixeles de anchura y 120 de altura.

Tip de rendimiento 2.1


Siempre debe incluir os valores de losparmetros wldth y height de una imagen en la etiqueta <1mg>de modo
que. cuando el navegador cargue el archivo de HTM1.5, sepa cunto espacio de pantalla debeproporcionar y
pueda visualizar apgina enforma correcta, incluso antes de descargar la imagen. Si se incluyen los atributos
trdthy height en una etiqueta <1mg> el navegadorpodr cargary desplegar aspginas con mayor rapidez.

2.7

Imgenes

47

Observacin de apariencia visual 2.2


Si se introducen nuevas dimensiones para una imagen de modo que cambie su relacin altura-anchura, la
apariencia de esa imagen se distorsionar. Para evitar a distorsin, sipor ejemplo su imagen tiene 200pceles de
anchuray 100pcela de altura, cualquier nueva dimensin debe mantener la relacin anchura-altura de2:1.

2.7.1 Atributo al t
Son diversas las razones por las que, en ocasiones, u n navegador no puede desplegar una imagen. Tal vez no so
porte imgenes (com o es el caso d e los navegadores de slo texto) o es posible que el cliente haya desactivado la
visualizacin de imgenes para reducir el tiem po de descarga. C ad a elem ento img en un docum ento de H T M L 5
debe tener u n atributo a l t. Si el navegador no puede desplegar una im agen, debe m ostrar el valor del atributo
a l t . La figura 2.6 m uestra cm o el navegador Internet Explorer despliega un sm bolo X de color rojo y el valor
del atrib u to a l t para indicar que no pudo encontrar la imagen (jh tp .p n g ).
El atrib u to a l t tam bin es im p o rtan te por cuestin d e accesibilidad: el software sintetizador de voz
puede p ronunciar el valor del atrib u to a l t en voz alta, de m odo que un usuario con discapacidad visual pueda
com prender lo q u e el navegador est visualizando. Por esta razn el atrib u to a l t debe describir el co n ten id o
de la im agen.

2.7.2 Elementos vacos


Algunos elem entos de H T M L 5 (conocidos com o d e m e n ta s vacos) slo contienen atributos y no marcan
sexto (es decir, no se coloca texto entre una etiqueta de inicio y o tra de fin). A unque esto no es obligatorio en
H T M L 5, para term inar los elem entos vacos (com o el elem ento img) podem os usar el carcter de barra d ia
gonal ( / ) dentro del parntesis angular derecho de cierre (>) de la etiq u eta de inicio. Por ejem plo, las lneas 15
y 16 podran escribirse as:

<1ng s r c - "jhtp.png" width - "92" h eig h t - "120"


a l t - "Portada del l i b r o lava How to Program"/>

2.7.3 Uso de imgenes como hipervnculos


Al usar imgenes com o hipervnculos podem os crear pginas Web grficas que vinculen a otros recursos. En
la figura 2 .7 creamos cinco hipervnculos de im agen distintos. A l hacer clic en una im agen en este ejem plo, el
usuario ser transportado a la pgina W eb correspondiente, uno de los otros ejemplos en este captulo.

<!DOCTYPE html>
< ! - - Fig. 2 .7 : nav.html >
< ! - - Imgenes como anclas de vnculos. -->
chtml >
<head>

<meta c h a rs e t = "u tf-8">


< title > B a rra de navegaciAoacute;n</title>
</head>
Figura 2 .7 | Imgenes como anclas de vnculos (parte I de 2).

48

Captulo 2

11
12
13
14
15
16

<body>
<p>

Introduccin a HTML5: parte I

<a h r e f = " v incu1os.html"


<1ng s r c - " b o to n e s/v n c u lo s.jp g " wldth - 65"
helght = "SO" a l t "V8lacute;nculos"
</a>

17

IS
14
20
21

<a h r e f . l i s t a . h t a l "
<1mg s r c " b o t o n e s / l i s t a . j p g wldth "65"
helght = "SO" a l t = " L is ta de funciones"
</a>

22

23
24
25
26
27
28
24
30
31
32
33
34
35
36
37
38
39

<a h r e f "contacto.htm l"


<1g s r c = " b o to n e s/c o n tac to .jp g " width = "65"
height = "50" a l t = "Contacto"
</a>
<a h r e f " ta b la l.h tm l"
<1mg s r c = " b o to n e s / ta b la .jp g width = "65"
height = "50" a l t = "P toacute;gina de ta b la s"
</a>
<a h r e f fo rm u la rio .h t l"
<ig s r c = "boto n es/fo rm u lario .jp g " width = 65"
height = " 5 0 " a l t "Formulario de retroalim entaci&oacute;n"
</a>
</p>
</body>
</html>

Ef d t

* \

___________________________________________________________________

D fBe///C/jcmplos/cap02/n*v^tml

S4>01 u>?V'o\

Wtfc Shct G*1t* i o

Importodo de InUtr..-

Figura 2.7 | Imgenes como anclas de vnculos (parte 2 de 2).


Las lneas 13 a 16 crean un h ip e rv n e u lo de im ag en , para lo cual anidan un elem ento img en u n elem ento
ancla. El valor del atributo s rc del elem ento img especifica q u e esta imagen ( v in c u lo s .jp g ) reside en u n direc
torio llamado b o to n es. El directorio b o to n es y el docum ento de H T M L 5 se encuentran en el mismo directorio.
Tam bin es posible hacer referencia a las imgenes de o tro s docum entos W eb si configuram os el atrib u to s r c
con el nom bre y la ubicacin de la imagen. Si hace referencia a una imagen en otro sitio Web, el navegador tiene
que solicitar el recurso de im agen del servidor de ese sitio. [Nota:$\ usted hospeda una pgina W eb disponible al
pblico que utilice una im agen de o tro sitio, debe obtener perm iso para usar esa im agen y hospedar una copia
de la m ism a en su propio sitio Web. EJ propietario de la imagen podra solicitar que usted reconozca su obra.] Al
hacer clic en el hipervneulo de una im agen el usuario se tran sp o rta a la pgina W eb especificada por el atrib u to
h r e f del elem ento ancla circundante. Al colocar el ratn sobre un vnculo de cualquier tipo, aparece el U RL al
que apunta ese vnculo en b barra de estado en b parte inferior de b ventana del navegador.

2.8

2.8

Caracteres especiales y reglas horizontales

49

Caracteres especiales y reglas horizontales

Al marcar texto, puede ser difcil incrustar ciertos caracteres o sm bolos directam ente en un docum ento de
H T M L 5. Algunos teclados no tienen estos sm bolos (com o ) o su presencia en el marcado puede provocar
errores de sintaxis (com o con <). Por ejemplo, el marcado:
<p>si x < 10 e n to n c e s in c re m e n ta r x en l</p>
produce un error de sintaxis ya que usa el carcter m enor q u e (<), que est reservado para las etiquetas de inicio y
de fin tales com o <p> y </p>. H T M L 5 cuenta con referencias a entidades de caracteres (de la form a & cdigo;)
para representar caracteres especiales (figura 2.8). Podramos corregir la lnea anterior si escribiramos lo siguiente:
<p>si x A lt; 10 e n to n c e s in c re m e n ta r x en 1</P>
ya que utiliza la referencia a entidad d e carcter Al t; para representar el sm bolo m enor q u e (<). [Nota: antes
de H T M L 5 , se requera la referencia a entidad de carcter Aamp; para m ostrar el sm bolo Aen una pgina Web,
pero ya no es as.]
Smbolo

Descripcin

Referencia a entidad de carcter

Entidades de caracteres de H TM L5
ampersand

Aamp:

apstrofo

to p o s;

>

mayor que

&gt;

<

menor que

A lt;

com illa

Aquot

Otras entidades de caracteres comunes


Anbsp;

espacio sin separacin


copyright

Acopy:

guin largo

A ndash;

guin corto

Andash;

14

fraccin 1/4

AfraC14;

Vi

fraccin 1/2

& fra c l2 ;

Yk

fraccin 3/4

A fra c 34;

puntos suspensivos

A h ellip ;

marca registrada

Areg:

seccin

Asect;

marca registrada

Atrade;

iO

Figura 2.8 | Algunas referencias a entidades de caracteres de HTML.


La figura 2.9 dem uestra cm o usar caracteres especiales en un docum ento de H T M L 5 . Si desea ver una
Esta com pleta de entidades de caracteres, consulte
www.w3.org/TR/REC-html40/s g m l/e n tltle s .h tm l

50

Captulo 2

Introduccin a HTML5: parte I

<!DOCTYPE h t*l>

3
4
3
6
7
8
9
10
11
12
13
14
13
18
17
18
19
20
21
22

<! Fig. 2 .9 : contacto2.htm l -->


<1-- In se rci n de c a r a c te r e s e s p e c i a l e s . -->
<htai1>
<head>
t e t a c h a rs e t "u tf-8">
<title>PAaacute;gina de c o n ta c to < /t1 tle >
</head>
<body>
<p>
<a h r e f n a 1 1 t o : d e i t e l $ d e i t e l .com>EnvAiacute ;e un correo a
D eitel Aamp; A s so c ia te s, Inc.</a>.
</p>
<hr> <1-- i n s e r t a una r e g la h o riz o n ta l -->
< ! - - los c a r a c te r e s e sp e c ia le s se introducen -->
< ! usando la forma Acode; >
<p>Toda l a informaciAoacute;n en e s te s i t i o es <strong>Acopy;
D eitel A A ssociates, Inc. 2 0 1 2 .</strong> </p>

23

24
23
26
27
28
29
30
31
32
33
34

< ! para subrayar te x to use e l elemento <del> >


< ! para u sa r subndices en e l te x to use el elemento <sub> -->
<1 para u sa r su p e rin d ic es en el te x to use el elemento <sup>
< ! - - e s to s elementos e st n anidados d entro de o t r o s elementos -->
<p><del>Puede descargar 3 .1 4 x 10<sup>2</sup>
c a r a c te r e s de informadAoacute;n de e s t e s i t i o . < / d e l >
El primer elemento en l a s e r i e es x<sub>l</sub>.</p>
<p>Nota: Alt; Afracl4; de la informaciAoacute;n
que se p re se n ta aquAlacute; se a c t u a l i z a a d ia rio .< /p >
</body>
</html>

Pi9n* t corteo

5<toi tw 9 4 f .^ t

2 W * S 6 S 6 i* ry

Q l n p c i U d c d d lrio m ..

Todi la informacin ts ic bo es t Deitel


Po rrir

r+ ra t f r*

f*le///Cyejem plos/C3p02/cortUcto2.htm l

) *s i 0f rn rn ctfrri

Associates. lac. 2012.

r w * rm a ? * n ?

rife

vbc

E l y trtz tn firmcoto en U lene es x

Noca < V; de U wfonna^oo que se pcesenui aq se anuahra a iano

Figura 2.9 | Insercin de caracteres especiales.


El prrafo en las lneas 12 a 15 perm ite al usuario hacer clic en el vnculo para enviar un correo electrnico
a D eitel & Associates, Inc. En este caso, representam os el carcter A con la referencia a b entidad de carcter
Aamp; para m ostrar que de todas formas funciona, aun cuando no se requiera en H T M L 5 .

2.9

Listas

51

Adems de los caracteres especiales, este docum ento introduce una regla h o riz o n ta l, la cual se indica m e
diante la etiqueta <hr> en la lnea 17- La m ayora de los navegadores despliegan una regla horizontal com o una
lnea horizontal con espacio adicional p o r encim a y por debajo de ella. C o m o profesional ver m ucho cdigo
antiguo, lo que se conoce com o cdigo heredado. El elem ento de regla horizontal debe considerarse elemento
heredado, por lo que es preferible evitar su uso. C o m o aprender ms adelante, podem os usar CSS para agregar
regias horizontales y otros elem entos de form ato a los docum entos.
Las lneas 21 y 22 contienen o tro s caracteres especiales, que pueden expresarse com o referencias a en ti
dades de caracteres (se codifican m ediante el uso de abreviaciones de palabras com o &copy; para copyright)
o referencias a caracteres n u m rico s: valores decimales o hcxadccim alcs (hex) que representan caracteres
especiales. Por ejem plo, el carcter & se representa en notacin decimal y hcxadecim.il com o &#38; y *#x26;,
respectivamente. Los nm eros hexadecimaies son nm eros en base 16: los dgitos en un nm ero hexadecimal
tienen valores de 0 a 15 (un total de 16 valores distintos). Las letras A a b F representan los dgitos hexaded males correspondientes a los valores decimales 10 al 15- Por ende, en notacin hexadecim al podem os tener
nm eros com o el 876 que consistan nicam ente de dgitos similares a los decimales, nmeros com o D A 19F
que consistan de dgitos y letras, y nm eros com o D C B que consistan slo de letras. En el apndice E , Sistemas
numricos, veremos los nm eros hcxadccimalcs con detalle. Este apndice est disponible en lnea en viwu.

d e i t e l . com/books/1w3htp5/.
En las lneas 28 a 30 introducim os cuatro elem entos nuevos. La m ayora de los navegadores despliegan el
elem ento d e l com o texto subrayado. C o n este form ato, los usuarios pueden indicar revisiones de docum entos.
Para poner texto en su p e rn d ic e (colocar el texto encim a de la lnea base y en un tam ao d e fuente reducido)
o su b n d ic e (colocar el texto debajo de la lnea base y en un tam ao de fuente reducido) use el elem ento sup o
sub, respectivamente. Tam bin usamos la referencia a la en tid ad de carcter A lt; para un signo m enor que y
& fra c l4 ; para la fraccin 1/4 (lnea 31).

2.9

Listas

Ahora le mostraremos cm o usar listas en una pgina W eb para organizar contenido cuya naniralcza sea similar. La
figura 2.10 muestra texto en una lista desordenada (es decir, una simple lista con vietas que no ordena sus clcmen s por leua o nm ero). El elemento de lista desordenada ul (lneas 16 a 22) crea una lista en donde cada elemento
comienza con un sm bolo de vieta (por lo general un circulo relleno). Cada entrada en una lista desordenada es un
dem ento 11 (d e m e n to de lista) (lneas 18 a 21). La mayora de los navegadores W eb despliegan cada elemento
11 en una nueva lnea con un smbolo de vieta y con sangra a partir del principio de la lnea.

I <!D0CTYPE htn1>
2
3 < ! - - Flg. 2.10: v1nculos2.html >
4 < ! - - L is ta desordenada que contiene h ip erv n cu lo s. -->
5 <ht*l >
<head>
6
meta c h a rset = "utf-S">
7
8
<t1 tie>V41 acu t e ;neul os</t1 t i e>
</head>
9
10
<body>
II
12
<hl>Estos son mis s i t i o s fav oritos< /hl>
13
<p><strong>Haga c l i c en un nombre para i r a e sa p&aacute;gina</strong></p>
Figura 2 .1 0 | Lista desordenada que contiene hipervnculos (parte I de 2).

52

14
15
16
17
18
19
20
21
22
23
24

Capitulo 2

Introduccin a HTML5: parte I

<1 c r e a r una l i s t a desordenada -->


<ul>
< ! l a l i s t a contiene cuatro elementos de l i s t a -->
<li><a h r e f = ,http://www.youtube.com">YouTube</a></li>
<li><a h r e f = Mhttp://wiiw.*1k1ped1a.org,,>Wlkiped1a</a></l1>
<H><a h r e f "h t t p ://*** amaz on. co >Amazon </a> </l 1>
<li><a h r e f = "http://www.linkedin.coT>LlnkedIn</a></H>
< /u l>
</body>
</html>
j

vmcMioi
C

f ie//A y 4 n p o s/cap 0 2 A in cu !o s2 .h tm J

64*94ixzx

tiri.S /-

Sl<8 Q 3 Imperta de d ZnUm


*

Estos son mis sitios fav o rito s


H a g a clic en mn n o m b re p a ra ir a ova pagina

VoqTnbc

Anvt^on

L r i i f din

F igura 2 .1 0

Lista desordenada que contiene hipervinculos (parte 2 de 2).

listas anidadas
Las lisias pueden estar anidadas para representar relaciones jerrquicas, com o en u n esquem a multinivel. La
figura 2.11 dem uestra el uso de las listas a n id a d a s y las listas o rd en ad as. El elem ento de lista ordenada ol crea
una lista en la que cada elem ento empieza con un nm ero.
En m uchos navegadores, se colocan vietas antes de los elem entos en la lista desordenada m s externa
(lneas 15 a 55). A hora bien, en m uchos navegadores se colocan vietas circulares sin relleno antes de los ele
m entos de la lista anidada que est dentro de la lista desordenada de la lnea 15. U n navegador W eb aplica
sangra a cada lista anidada para indicar una relacin jerrquica. La prim era lista ordenada (lneas 29 a 33)
incluye dos elem entos. Los elem entos en una lista ordenada se enum eran com o 1., 2., 3. y as en lo sucesivo.
Las listas ordenadas anidadas se enum eran de la m ism a forma. A unque no se dem uestra en este ejem plo, por
lo general se colocan vietas cuadradas antes de los elem entos subsiguientes de las listas desordenadas anidadas.
Los estilos de las vietas pueden variar segn el navegador.

<! DOCTYPE htftl>

< ! Fig. 2.11: I1 sta .h tm l >

<1 L i s t a s a n id a d a s y l i s t a s d e so rd e n a d a s. -->

5
6

<htl>
<head>

Figura 2 .1 1 | Listas anidadas y listas desordenadas (parte l de 3).

2.9

7
8

9
10
11
12
13
14
15
16
17
18
19

Listas

ateta ch a rset = u tf - S
< rltle> lista s< /title >
</head>
<body>
<hl>Las mejores c a r a c te r & ia c u te ; s tlc a s de In tern et< /h l>
< 1-- c r e a r una l i s t a desordenada -->
<ul>
<H>Puede conocer nuevas personas de pa&iacute ;ses de todo
el mundo.</l1>
<11>
Tiene acceso a lo s nuevos medios a medida que se hacen piuacute;bllcos:

20

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
43
46
47
48
49
50
51
32
53
54
55
56
37

<1 e sto empieza una l i s t a desordenada anidada, que usa una >
<! v i e ta d i s t i n t a . La U s t a termina a l
-->
<1 c e r r a r la e t i q u e t a <ul>. -->
<ul>
<H>Nuevos juegos</!1>
<!1>Nuevas a p lic a c io n e s
< 1 -- U s t a ordenada anidada >
<ol>
<H>Por negocios</l1>
<H>Por placer< /l1>
</ol>
V 11 > < I-- termina elemento 11 que i n i c i en l a lin e a 27 y que llama
a nuevas a p licacio n es >
<H>Not1cias la s 24 horas</l1>
<H>Motores de b&uacute;squeda</11>
<H>Compras</11>
<H>Programaci&oacute;n
<!-*- o t r a l i s t a ordenada anidada -->
<ol>
<11>XML</11>
<l1>3ava</H>
<11 >HTWL5</11 >
<H>3avaScr1pt</l1>
<H>Nuevos lenguajes</l1>
</ol>
</H> <!--term 1na elemento 11, llamado programacin, que I n i c i en l a
l i n e a 38 -->
</ul> <1-- term ina l a l i s t a anidada de l a lin e a 24 -->
</l1>
<H>v&iacute;nculos</l1>
<H>Mantenerse en co n ta cto con v ie jo s amigos</l1>
<11>Es l a te c n o lo g 4ia c u te;a del futuro</l1>
</ul> < ! termina la l i s t a desordenada de l a lin e a 15 -->
</body>
</html>

Figura 2 .1 1 | Listas anidadas y listas desordenadas (parte 2 de 3)

53

54

Capitulo 2

Introduccin a HTML5: parte I

,
/

---------------------------------------.... =

f'te///Yye'jemj>ios/cap02/istrtml

S td sw gtdM

_________________

Web Sitce 6e*ery C ) Im p e rtid o be irtt m ..


4

L a s m e jo r e s c a r a c t e r s t ic a s d e I n t e r n e t
Pucdr ccoocct neva peroca de paivrs de todo d auodo
T*t* ncco a lo* corvo n*do* a roecMa que se hacen pubkos
o Nuevo juego
o Nuevas apfcacoaes

0
o

1 Por argoctot
2 Por placer
Sotoa b s 24 boca
Molotes de b sq u d i
Compras
Ptnw.MWA-i.Nn
1 XML
2 Java
3 KTML5
4

J a v a S c i^ r t

5 Nuevos lenguajes
Vinculo
Mantenerse en contacto con \iejo acoges
E la trcook>p* dd fuhoo

Figura 2.11 | Listas anidadas y listas desordenadas (parte 3 de 3).

2.10

Tablas

Las tablas se utilizan con frecuencia para organizar datos en filas y columnas. N uestro prim er ejem plo (figura
2.12) crea una rabia con seis filas y dos colum nas para m ostrar la inform acin de precios d e varias finitas. Las
rabias se definen m ediante cl elem ento t a b l e (lneas 13 a 58). I-a linca 13 especifica la etiqueta de inicio del
elem ento c a b le . El atrib u to b o rd e r con el valor l especifica que el navegador debe colocar bordes alrededor
de la tabla y alrededor de sus celdas. ste es un atrib u to de herencia que se debe evitar. C uando hablem os de
CSS3, en cl captulo 4 , utilizarem os la propiedad b o rd e r de CSS, que es la form a preferida para dar form ato a
los bordes de un elem ento ta b le .
El elem ento c a p tio n (lneas 17 y 18) especifica el ttulo de una tabla. Por lo general, en este elem ento el
texto se despliega por encim a de la rabia. Adems es una buena prctica incluir una descripcin general de la in
form acin de la tabla en el a trib u to s u m a ry del elem ento ta b l e: una de las m uchas caractersticas de H T M L 5
que hacen a las pginas Web ms accesibles para los usuarios con discapacidades. Los dispositivos de voz usan
este atributo para que la tabla sea m s accesible a los usuarios con discapacdad visual.

<!D0CTYPE htnl>

3
4
5

6
7

<! Fig. 2.12: t a b la l.h tm l >


< ! - - Creacin de una ta b la bsica. >
<htl>

<head>
o te t a c h a r s e t u tf-8 " >

Figura 2 .1 2 | Creacin de una ta b la b sica (p a rte 1 de 3 ).

2.10

<t1tle>Una t a b l a de H7WL5 sim ple< /t1tle>


9
</head>
10
11
<body>
12
< ! l a e t i q u e t a <table> abre una t a b l a >
13
< table border * 1">
14
13
< I l a e t i q u e t a <capt1on> s i n t e t i z a e l contenido de >
16
<1 l a t a b l a ( e s t o ayuda a l a s personas con dlscapacldad v i s u a l ) -->
17
<capt1onxstrong>Tab1a de f r u t a s ( l e r a columna) y
18
sus p recios (2da co lu m n a)< /stro n g x /c a p tio n >
19
20
< ! l a seccin <thead> aparece primero en la t a b l a -->
21
< 1 da formato a l rea del encabezado de l a ta b la >
22
<thead>
23
< t r > < ! - - <tr> i n s e r t a una f i l a en l a t a b l a -->
24
<th>Fruta</th> <! I n s e r t a una celd a de encabezado -->
23
<th>Precio</th>
26
< /tr>
27
</thead>
28
29
< ! la seccin <tfoot> aparece al ltim o en l a t a b l a >
30
< ! da formato al pie de l a ta b la -->
31
<tfoot>
32
<tr>
33
<th>Total</th>
34
<th>$3.75</th>
33
< /tr>
36
< /tfo ot>
37
38
<1 todo el contenido de l a t a b l a e s t encerrado >
39
< ! dentro del elemento <tbody> >
40
<tbody>
41
<tr>
42
<td>Manzana</td> < !- - I n s e r t a una celda de datos -->
43
<td>$0.25</td>
44
< /tr>
43
<tr>
46
<td>Naranja</td>
47
<td>$0.S0</td>
48
</tr>
49
<tr>
30
<td>PlAaacute;tano</td>
31
<td>$1.00</td>
32
</tr>
33
<tr>
34
<td>Pi Ant11d e ;a</td>
33
<td>$2.00</td>
36
< /tr>
37
</tbody>
38
</table>
59
</body>
60 </h tul >
Figura 2 .1 2 | Creacin de una tabla bsica (parte 2 de 3)

Tablas

55

56

Capitulo 2

Introduccin a HTML5: parte I

t>sj !*bU*KTMLi btD, K ^


C

Wey/AyejempoVcapOi

[ *) S t U ^+ndC I

V ite SU# C#li#r

Tahla d* fritas
Titulo de la tabla

(lora columna) y

precio* (2da
')
Encabezado de la tabla

F rita [Pt k
so

25

SO 50

Cuerpo de la tabla
jm u n o

Borde de la tabla

SI 00
S2 00

Re de la tabla-

[T o o l

S.V"?

Figura 2.12 j Creacin de una tabla bsica (parte 3 de 3).


Una tabla tien e tres secciones d istin tas: e n c a b e z a d o , c u e rp o y p ie . La seccin d e encabezado (o celda
de encabezado) se define m ed ian te un e lem en to th e a d (lneas 2 2 a 27), la cual c o n tie n e in fo rm aci n sobre
el encabezado ral com o los n o m b res de las co lu m n as. C ad a elem en to t r (lneas 23 a 26) define u n a sola
fila d e la ta b la . Las columnas en b seccin th e a d se definen co n elem en to s th . La m ayora d e los navega
d o re s centran el texto con form ato de los elem en to s th (colum na de encabezado d e la tabla) y lo m u estran
en negrita. Los elem entos d e encabezado d e la tabla (lneas 24 y 25) estn anidados d e n tro d e los elem en to s
de fila d e la tabla.
La seccin del cuerpo, o c u e rp o d e la ta b la , con tien e los datos prim arios de sta. El cuerpo d e la tabla
Orneas 40 a 57) se define en un elem ento tbody. E n el cuerpo d e la tabla, cada elem ento t r especifica una fila.
Las celdas d e d a to s contienen piezas individuales de datos y se definen con elem entos td (d a to s d e tabla)
en cada fila.
La seccin t f o o t (lneas 31 a 36) se define con un elem ento t f o o t (pie de tab b ). Por lo com n, el texto
que se coloca en el pie incluye resultados de edculos y notas a l pie. Aqu introdujim os el to tal d d clculo en forma
manual. En captulos posteriores le m ostrarem os cm o realizar dichos clculos en form a dinm ica. Al igual que
otras secciones, b seccin t f o o t puede contener filas de ta b b y cada fib puede contener celdas. C o m o en la
seccin th ead , las celdas en la seccin del pie se crean m ediante el uso de elem entos th en vez de los elem entos
td que se usan en el cuerpo de la ta b b . Antes de H T M L 5 era obligatorio q u e la seccin t f o o t apareciera sobre
la seccin tbody de b ta b b . A partir de H T M L 5 , b seccin t f o o t puede estar encima o debajo de b seccin
tbody en el cdigo.
E n este ejem plo slo especificamos los datos de la tabla y no su formato. C o m o puede ver, en el form ato
predeterm inado del navegador cada colum na es tan ancha com o su elem ento m s grande; adem s la tabla en
s no es visualm ente atractiva. E n el captulo 4 usaremos CSS para especificar los form atos de los elem entos de
H T M L 5.

Uso de ro t/sp a n y c o ls p a n con tablas


E n b figura 2 .1 2 exploramos b estructura de una ta b b bsica. La figura 2.13 presenta o tro ejemplo de tabla e
introduce nuevos atributos que le perm itirn crear tablas ms complejas.
La ta b b empieza en la lnea 14. E l tam ao de bis celdas de la tabla se ajusta a los datos que contienen, pero
podem os controlar el form ato de una ta b b m ediante el uso de CSS3. Es posible crear celdas que se apliquen
a ms de una fib o colum na m ediante el uso de los atrib u to s rowspan y col span. Los valores que se asignan a

2.10

Tablas

57

estos atributos especifican el nm ero de filas o colum nas q u e ocupa u n a celda. El elem ento th d e las Eneas 22 a
25 usa el atrib u to rowspan - 2* para q u e la celda q u e contiene la im agen del camello pueda usar dos celdas
adyacentes en sentido vertical (por ende, la celda abarca dos filas). El elem ento th en las lneas 28 a 31 asa
el atrib u to co lsp an = 4" para aum entar la anchura de b celda del encabezado (que con tien e Comparacin de
cam lidos y Fecha aproxim ada: 10/2011) de m odo que abarque cuatro celdas.
La linca 29 introduce el elem ento b r, que la mayora de los navegadores despliegan com o un salto d e lnea.
C ualquier m arcado o texto que siga despus de un elem ento br se despliega en la siguiente Enea, que en este
caso aparece dentro del m ism o espacio de cuatro columnas. A l igual que el elem ento img, b r es u n ejemplo de
un elemento vacio. Al igual q u e el elem ento hr, b r se considera un elem ento d e form ato heredado cuyo aso
debemos evitar; en general, hay que especificar el form ato m ediante el uso de CSS.

1 < IDOCTYPE h t* l>


2

3
4
3
6
7
8
9
10
11

12
13
14
15
16
17
18
19
20

< ! - - F1g. 2 .1 3 : ta b la 2 .h tm l -->


< ! T abla de HTML5 co m p leja. >

<h tml >


<head>
oeta c h a rset a u t f - 8 M>
< t itle > T a b l a s < / t i t l e >
</head>
< body>

<hl>Ejemplo de tabla: combinado de f i l a s y columnas</hl>


< tab le border 1">
<caption>Una t a b l a de muestra mAaacute;s compleja</caption>
<thead>
<1 lo s elem entos rowspan yco lsp an combinan e l nmero
-->
<1 e s p e c if ic a d o de c e ld a s en s e n tid o v e r t i c a l u h o r iz o n ta l

>

< tr>

21

< |

combina dos f i l a s -->

22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39

<th rowspan - 2">


<1mg s r c = "camello.png width - 205"
height - "167" a l t - "Imagen de un camello con una jo rob a
</th>
< ! combina c u a tr o colum nas >

<th colspan "4">


<strong>Comparaci&oacute;n de cam&eacute;I1dos</strong><br>
Fecha aproximada: 1 0 / 2 0 1 1
</th>
< /tr>
<tr>
<th># jorobas</th>
<th>Regi&oacute;n indAiacute;gena</th>
<th>Escupe?</th>
<th>Produce lana?</th>
</tr>
</thead>

Figura 2 .1 3 | Tabla de HTML5 compleja (parte I de 2).

58

40
41
42
43
44
43
46
47
48
49
50
31
32
33
34
33
56
37
58

Captulo 2

Introduccin a HTML5: parte I

<tbody>
<tr>
<th>Camellos (b a c tr ia n o s )< / th >
<td>2</td>
<td>AfMca/Asia</td>
<td>S&iacute;</td>
<td>SAiacute;</td>
</tr>
<tr>
<th>Llamas</th>
<td>l</td>
<td>MontaAntilde;as de lo s Andes</td>
<td>S&1acute;</td>
<td>SAiacute:</td>
</tr>
</tbody>
</table>
</body>
</htl>

fie//A:/eye*npios/CAp02/tat>ia2.Mml

5-tioi tu j n c

Sbc OHUr,

*?

2D Im portado d< In u m .

Ejemplo ile tabla: esparcido de filas y columnas


Loa tabla de moetoa mas compfep

,Vv
UL

II y.

oroba

Camellas (bactnaaos)
Liamas

\rv,-.-> V *
1

Prod.ce la.a

Regio o iidigeaa

y i

Compareci. de camlidos
F b a aproximada: 4 2011

Si

Si

Mootates de ios Andes Si

Si

Figura 2.13 | Tabla de HTML5 compleja (parte 2 de 2).

2.11

Formularios

Al navegar en sitios W eb, a m enudo los usuarios necesitan proveer inform acin tal com o consultas d e bsqueda,
direcciones de correo electrnico y cdigos postales. H T M L 5 ofrece u n mecanismo conocido com o fo rm u la rio
para recolectar daros de un usuario.
Los datos que in tro d u cen los usuarios en u n a pgina W eb se envan por lo general a un servidor Web que
provee el acceso a los recursos de un sitio (com o d o cu m en to s de H T M L 5 . im genes, anim aciones, videos).
E stos recursos se en cu en tran en la m ism a m quina q u e el servidor W eb o en una m quina a la que el servi

2.11

Formularios

59

d o r Web tiene acceso por m edio de In tern et. C uando un navegador solicita una pgina Web o un archivo
localizado en el servidor disponible en form a pblica, el servidor procesa la solicitud y devuelve el recurso
solicitado. U na solicitud contiene el nombre y la ruta del recurso deseado, ju n to con el protocolo (m to d o de
com unicacin). Los docum entos d e H T M L 5 se solicitan y transfieren a travs del Protocolo d e transferencia
de hipertexto (H T T P ).
La figura 2.14 es u n form ulario sim ple q u e enva los datos al servidor Web para su procesam iento. Por lo
general el servidor devuelve u n a pgina W eb que regresa al navegador Web; con frecuencia esta pgina indica
a los datos del form ulario se procesaron en form a correcta o no. [Nota: este ejem plo dem uestra slo la fun
cionalidad del lado diente. Si enva este form ulario (al hacer clic en Enviar), el navegador slo m ostrar w*m .
d e 1 te l.c o m (el sitio especificado en el elem ento a c tlo n del form ulario) ya que an no hem os especificado
cm o procesar los datos del form ulario en el servidor. En captulos posteriores presentarem os la programacin
del lado del servidor (por ejem plo, en PH P, ASP. N ET' y JavaServer Haces) necesaria para procesar la inform acin
que se introduce en un formulario.)

<!DOCTYPE html>

3 <1 F1g. 2.14: formular1o.html >


4 <1-- Formulario con un campo de te x t o y campos o c u lto s . -->
3 <html >
6
<head>
7
<*eta c h a rset = " u t f - 8 >
8
< t1tle>Form ular1os</t1tle>
9
</head>
10
11
<body>
12
<hl>Formulario de retroal1mentaci&oacute;n</hl>
13
14
<p>Llene e s te form ularlo para ayudarnos
15
a mejorar nuestro s i t i o . < / p >
16
17
<1-- e s t a e ti q u e ta empieza e l form ulario, in d ic a el -->
18
<1 mtodo de enviar informacin y l a ubicacin >
19
< 1-- de l a secuencia de comandos de procesamiento del form ulario >
20
<fori nethod * post" a c tlo n a http://M M .de1te1.com ">
< ! - - l a s entradas o c u lta s contienen informacin >
21
22
< 1 no v isu a l que tambin se en v ia r -->
23
<1nput type = hidden" ame = d e s t i n a t a r i o "
24
valu a " d e 1 tel0 d e 1te l.co m >
23
<Input type = "hidden" ame a "asunto"
26
valu a "Formularlo de retroal1mentac1&oacute;n>
27
<1nput type = "hidden" ame = " r e d l r l g l r "
28
valu = " p r i n c i p a l . html">
29
30
<1 <1nput type = te x t"> i n s e r t a un campo de te x to -->
31
<pxlabel>Nombre:
32
<1nput ame a "nombre" type a te x t" s l z e a "25"
33
maxlength - 30">
34
< /labelx/p>
33
Figura 2 .1 4 | Formulario con un campo de texto y campos ocultos (parte l de 2).

60

36
37
38
39
40
41
42
43
44
43

Captulo 2

Introduccin a HTML5: parte I

<p>
< 1-- lo s t i p o s de en trad a submit" y re s e t" in s e r ta n >
< ! - - botones para enviar y b o rra r el contenido -->
< ! - - del form ulario, respectivamente -->
<1nput type = submit" v alu = Enviar"
<input type = r e s e t " valu = "Borrar"
</p>
</fort>
</body>
</html

[Xj fomutlfiOS

rilc//Ayejempto5/cap02/formu anotan!

lugtrtM

III

4-

* V

At> >* ZUry O ImpctUJc *

F o rm u la rio de re tro a lim e n ta c i n


Lien* este fcravabnc para avudornot a mejccar nuestro wbo
Nombre
Eim .|

1
Bon

Figura 2 .14 | Formulario con un campo de texto y campos ocultos (parte 2 de 2).
A trib u to m eth o d d e l elem ento form
El form ulario se define en las lneas 20 a 43 m ediante u n elem ento form. El atrib u to method (lnea 20) especifica
la form a en que se envan los datos del form ulario al servidor W eb. Si usam os method post* se adjuntan
los datos del form ulario a la solicitud del navegador, que con tien e el protocolo (H T T P ) y el U RL del recurso
solicitado. Este m todo de pasar datos al servidor es transparente, el usuario no ve los datos despus de enviar
el formulario. El otro valor posible, method - 'g e t', ad ju n ta los datos del form ulario directam ente al final del
URL de la secuencia de com andos, en donde puede verse en el cam po Direccin del navegador. En el captulo
17 veremos con detalle los m todos post y get para enviar los datos del formulario.

A trib u to a c tio n d e l elem ento form


El atrib u to a c tio n en el elem ento form d e la lnea 20 especifica el U RL de una secuencia de comandos en el
servidor Web que se invocar para procesar los datos del form ulario. C o m o todava no hem os introducido la
program acin del lado del servidor, por ahora estableceremos este atributo en h ttp ://v * v w .d e ite l .com.
Las lincas 24 a 43 definen elem entos 1nput que especifican los datos que se van a proporcionar a la secuen
cia de com andos que procesar el form ulario (tam bin se conoce com o manejador del Formulario). Existen
varios tipos d e elem entos d e entrada. U n tipo de en trad a se determ ina m ediante su atributo type. Este atrib u to
usa una entrada t e x t , una entrada subm it, una entrada r e s e t y tres entradas hidden.

E ntradas ocultas
Los form ularios pueden contener com ponentes visuales y no visuales. Los componentes visuales son los boto
nes que pueden presionarse y o tro s com ponentes d e la interfaz grfica de usuario con los que interactan los

2.11

Formularios

61

usuarios. Los componentes no visuales, conocidos com o entradas ocultas (h id den) (lneas 23 a 28), almacenan
cualquier dato q u e especifiquemos, com o direcciones de correo electrnico y nom bres de archivos de d o cu m en
tas de H T M L 5 que actan com o vnculos.
Los tres elementos in p u t ocultos en las lneas 23 a 28 tienen el atributo ty p e de h id d en , lo cual nos perm ite
enviar datos delformulario que no sean introducidos por el usuario. Las entradas ocultas son una direccin de correo
electrnico a la que se enviarn los datos, la lnea del asunto del corroo electrnico y un URL que el navegador
abrir despus de enviar el formulario. Los otros dos atributos i nput son nane. que identifica el elem ento i nput
y valu, que provee el valor que se enviar al (o publicar en el) servidor Web. El servidor usa el atributo ame
para obtener el v alu correspondiente del form ulario.

Elemento input te x t
I a entrada t e x t en las lneas 32 y 33 inserta un campo de texto en el form ulario. Los usuarios pueden escribir
datos en cam pos de texto. El elem ento la b e l (lneas 3 1 a 34) provee a los usuarios inform acin sobre el p ro
psito del elem ento in p u t. El atributo slz e del elem ento in p u t especifica el nm ero d e caracteres visibles en
el cam po de texto. El atributo opcional naxlength lim ita el nm ero de caracteres introducidos en el campo de
texto; en este caso, el usuario no puede escribir ms de 30 caracteres.

Elementos Input: submlt y r e s e t


D os elem entos in p u t en las lneas 4 0 y 41 crean dos botones. El elem ento in p u t submlt es u n b o t n . C uando
se presiona el b o t n subm it, los datos del form ulario se envan a la ubicacin especificada en el atrib u to a c tio n del formulario. El atrib u to valu establece el texto que se m uestra en el b o t n . El elem ento in p u t r e s e t
perm ite a u n usuario restablecer todos los elem entos del form ulario a sus valores predeterm inados. El atributo
v a lu del elem ento in p u t r e s e t establece el texto m ostrado en el b o t n (el valor predeterm inado es Reset si
om itim os el atrib u to valu ).

Elementos de form ulario adicionales


En el ejemplo anterior vim os los elem entos bsicos de los formularios de H T M L 5- Ahora presentarem os los
elem entos y atrib u to s para crear form ularios ms complejos. La figura 2.15 contiene u n form ulario que solicita
retroalim entacin al usuario con respecto a un sitio Web.
El elemento te x ta r e a (lneas 31 y 32) inserta un rea de texto m ultiinea en el form ulario. El nm ero de filas
ae especifica con el atributo rowsy el nmero de colum nas (caracteres por lnea) con el atributo col s. En este ejem
plo, el elem ento te x ta r e a es de cuatro filas de alto y 36 caracteres de ancho. Para m ostrar texto predeterminado en
d elem ento te x ta r e a , coloque el texto entre las etiquetas < te x ta re a > y < /te x ta re a > . Podemos especificar texto
predeterm inado en otros tipos de i n p u t, com o los cam pos de texto, usado en el atributo v alu .
I

< !DOCTYPE h tn l>

< ! - - Fig. 2.15: formular1o2.html >


<1 Formulario que usa una variedad de componentes. -->
< htnl>

<head>
neta c h a rs e t = "utf-S"
<t1t1e>M&aacute;s fo rm u la rio s< /t1tle >
</head>

Figura 2 .1 5 | Formulario que usa una variedad de componentes (parte I de 4).

62

11

12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
51
32
33
34
33
36
37
38
59
60
61
62
63

Capitulo 2

Introduccin a HTML5: parte I

<body>

<hl>Formulario de retroalim entaciAoacute; n</hl>


<p>Llene e s te form ulario para ayudarnos
a mejorar nuestro s itio .< / p >
<form nethod = "post" a c tio n = "http://www.de1tel.com">
<input type = "hldden" ame = " d e s tin a ta r io "
valu "d eltelCdeitel.com">
<1nput type = "hldden" ame = "asunto"
valu * "Formulario de retroallm en tad & oacute;n">
<1nput type = "hldden" ame = " r e d i r i g l r "
v a l e s "p rin cip a l .html ">
< p x la b e l> Nombre:
<1nput ame * "nombre" type * " t e x t" s i z e = 25">
< /labelx/p >
< 1-- < textarea> crea un cuadro de t e x t o m u l tllin e a -->
< p x l abel> Comentad os :<br>
< te x ta re a ame = "comentarios
rows = "4" c o is = "36">Escr1ba aquAiacute; los comentad o s .< /te x ta re a >
</l abel ></p>
< ! - - <input type password"> i n s e r t a un -->
< 1-- cuadro de te x to que aparece enmascarado con >
< ! - - c a r a c te r e s de a s t e r i s c o s -->
<pxlabel>D irecciA oacute;n de correo electrA oacute;nico:
<1nput ame - "email" type "password" s i z e " 2 5 " >
</label></p>
<p>
<strong>Cosas que le g u s ta ro n :< /stro n g x b r>
<1abe1>DiseAnt1lde;o del s i t i o
<1nput ame s "cosasgustaron" type
valu "Diseno"></label
<labelVAiacute;nculos
<1nput ame s "cosasgustaron" type
valu = "V 1n cu lo s"x /lab el>
<label>Fac1lidad de uso
<1nput ame = "cosasgustaron" type
valu . " F c i l i d a d " x / l a b e l >
<1abel>ImAaacute;genes
<1nput ame = "cosasgustaron" type
valu "Im agenes"x/label>
<label>CAoacute;digo fuente
<1nput ame "cosasgustaron" type
valu = "C od ig o"x /label>
</p>
< !-< !--

= "checkbox"

= "checkbox"
= "checkbox"
"checkbox"

"checkbox"

c in p u t type - radio" c re a un botn de >


opcin. La d if e r e n c ia e n tr e botones de opcin -->

Figura 2 .1 5 | Fonmulario que usa una variedad de componentes (parte 2 de 4).

2.11

64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
III
112
113
114
115

Formularios

< ! y c a s i l l a s de v e r if i c a c i n es que s lo puede s e le c c io n a rse -<1 un botn de opcin en un grupo. >


<P>
<strong>CAoacute;mo llegAoacute; a n u e stro s1tio:</strong><br>
<label>Motor de bAuacuteisqueda
<1nput ame = "com osltlo type = radio"
valu "motor bsqueda" c h e c k e d x / la b e l
<labe1>VAiacute;nculos desde o tr o s i t i o
<1nput ame = "comosltlo" type = "radio"
valu - v 1 n c u lo " x / la b e l>
< la b e l> S itio Web Deitel.com
<1nput ame = comosltlo" type = " r a d io
valu = " d e i t e l .co m " x /la b e l>
<labe!Referencia en un l i b r o
<1nput ame = "comosltlo" type = "radio"
valu = " H b r o " x / l a b e l >
<1abe1 >0tro
<1nput ame = "comosltlo" type = "radio"
valu - " o t r o " x / l a b e l >
</p>
<p>
<labe1>Ca1ifique nuestro s i t i o :
< ! l a e t i q u e t a < select> presenta una l i s t a -->
< ! - - desplegable con opciones Indicadas por la s -->
< ! - - e ti q u e ta s <opt1on> >
< se le c t ame " c a lif ic a c i n "
<option selected>Sorprendente</opt1on>
<op 11on >10 </op 11o n>
<op 11on >9</op 1 1on >
<opt1on>8< /opt1on>
<opt1on>7</option>
<option>6</opt1on>
<opt1on>5</opt1on>
<opt1on>4</opt1on>
<opt1on>3</opt1on>
<opt1on>2</opt1on>
<opt1on>l</opt1on>
<opt1on>Malo</opt1on>
< /select>
</label>
</p>
<p>
cinput type "submlt" valu "Enviar"
<1nput type = " r e s e t" valu = Borrar"
</p>
</fom>
</body>
</html

Figura 2 .1 5 | Formulario que usa una variedad de componentes (parte 3 de 4)

63

64

Captulo 2

Introduccin a HTML5: parte I

Mssvn*jnci
\
- c
Mc.i',v .cc^ ::vlu^::. 'Z'ivu x o2.fitir
l

&<K1

J *cfc S"*CC% Zj

ltT- .

F o r m u la r io ele re tro a llm e n ta c i n


Lime ett* ^ u i i a k p a j'.odanoi a n*?orar m u r e abo

Ncbrc
CMDMBN
( f e r i e * M r.i i s a r a u r . ' . i i u i

D m cck * c o t a o e k c frw c o

( qa Urntami;
rWiW.<Mte R Vfcno.

F*-*US.V

Cm llvfo a M auro lio.


Mote* <Sr b u t* * fa

(b ~ ) | te

*fcvlr o o a u fe

S * * W a 6 D r4 * tc n

Rrfnnwurn U t a

Oro

10
I
7

4
3
3
1

Figura 2.15 | Formulario que usa una variedad de componentes (parte 4 de 4).
El elemento in p u t password de la lnea 39 inserta un cuadro de contrasea con el atributo s iz e especificado
(nm ero mximo de caracteres mostrados). Un cuadro de contrasea permite a los usuarios introducir informacin
confidencial, com o los nm eros de tarjetas de crdito y las contraseas, al enmascarar" la informacin introduci
da con asteriscos (*). El valor real introducido es el que se enva al servidor W eb y no los caracteres que lo enmascaran.
Las lineas45 a 59 introducen el elem ento in p u t checkbox. Los elem entos checkbox perm iten a los usuarios
seleccionar una opcin. C uando un usuario selecciona un elem ento checkbox, aparece una marca de verificacin
en esc elem ento. De lo contrario, el elem ento checkbox perm anece vado. C ad a elem ento in p u t checkbox crea
un nuevo checkbox. Es posible usar estos elem entos en form a individual o en grupos. A los elem entos checkbox
que pertenecen a un grupo se les asigna el m ism o nom bre (en este caso, c o s a s g u s ta ro n ).

Error comn de programacin 2 .I


jF
J

L"

Cuando suformulario tenga varios elementos checkbox con el mismo nombre, asegrese de que tengan distintos
valores en su elemento valu, o de lo contrario las secuencias de comandos del servidor Web no
podrn diferenciarlos.

Despus de los elementos checkbox le presentaremos dos formas adicionales para perm itir al usuario selec
cionar opciones. En este ejemplo introdujim os dos nuevos tipos de elementos in p u t. El prim ero es cl b o t n d e
o pcin (lneas 69 a 83) y se especifica con el tipo ra d io . Los botones de opcin son similares a las casillas de veri
ficacin (checkbox), excepto que slo es posible seleccionar un b o t n de opcin en un grupo de botones de opcin
en un m om ento dado. 'Iodos los botones ra d io en un grupo tienen los mismos atributos ame y se diferencian

2.12

Vinculacin interna

65

segn sus distintos atributos v a lu . El atributo checked (lnea 71) indica cul b o t n de opcin se selecciona en
un principio, en caso de que se seleccione uno. El atrib u to checked tam bin se aplica a las casillas de verificacin
(elementos checkbox).

Error comn de programacin 2.2


Si no se establecen los atributos ame d t los botones radio en un grupo con el mismo nombre seproduee un
error lgico, debido a que el usuario podr seleccionar todos los botones de opcin {radio) al mismo tiempo

El elem ento s e l e c t (lneas 92 a 105) proporciona una lista desplegable de la que el usuario puede seleccio
nar un elemento. El atrib u to ame identifica la lista desplegable. Los elem entos optlon (lneas 93 a 104) agregan
elem entos a b lista desplegable. El atrib u to sel ected del elem ento o p tio n especifica cul elem ento se m ostrar
a l principio com o el elem ento seleccionado en el elem ento s e l e c t . Si no se marca un elem ento o p tlo n com o
s e le c te d , el navegador selecciona el prim er elem ento o p tlo n de m anera predeterm inada.

2.12

Vinculacin interna

En una seccin anterior del captulo vimos cm o crear un hipervnculo de una pgina Web a otra. La figura 2.16
introduce b vinculacin interna: un mecanismo que perm ite al usuario saltar entre ubicaciones del mismo docu
m ento. La vincubcin interna es til para docum entos extensos que contienen muchas secciones. Al hacer clic en
un vnculo interno el usuario puede encontrar una seccin sin tener que desplazarse por todo el docum ento.

1 <!DOCTYPE html>
2

3
4

3
6
7
8
9

10
11
12
13

< 1-- Fig. 2.16: 1nterna.htm l


>
<1 Vinculacin in te r n a >
<html>
<head>
<*eta c h a rs e t Mutf-S">
<title>V & iacute;neulos i n t e r n o s < / t i t l e >
</head>

<body>
<1 el a t r i b u t o id crea un d e stin o de h ip erv n cu lo In te rn o -->
<hl id = Mc a r a c t e r i s t i c a s >Las mejores c a r a c te r A ia c u te ; s tic a s de In te rn e t< /h l>

13
16
17
18
19
20
21
22
23
24
23
26
27
28
29

< ! l a d ire c c i n de un vinculo in te rn o es # id " -->


<p><a h r e f "#1n secto s> I r a <em>Insectos favori tos</e*i></ax/p>
<ul>
<H>Puede conocer personas de pa& iacute;ses
de todo e l mundo.</H>
<H>Tiene
acceso a los medios a medida que se vuelven p4uacute;blicos:
<ul>
<11>Nuevos juegos</H>
<H>Nuevas a p lic ac io n e s
<ul>
<li>Por negocios</li>
<li>Por placer</l1>
</ul>
< /li>

Figura 2 .1 6 | Hipervnculos internos para facilitar la navegacin en las pginas (parte I de 3).

66

30
31
32
33
34
35
36
37
38
3
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

Capitulo 2

Introduccin a HTML5: parte I

<H >N oticias de todo el mundo</H>


<H>Motores de bAuacute;squeda</li>
<H>Compras</li>
<H>ProgramaciAoacute ;n
<ul>
<11>HTML5</11>
<H>3ava</l i>
<l1>Dynaic HTWL</11>
<H>Secuencias de comandos</l i>
<H>Nuevos lenguajes</H >
< /ul>
< /li>
</ul>
</H>
<H>VAiacute;nculos</l1>
<li>Mantenerse en contacto con v ie jo s amigos</l1>
<li>Es l a tecnologAiacute;a del fu tu r o < / li>
</ul>
< ! el a t r i b u t o id crea un d e s tin o de h ip e rv n e u lo in te r n o -->
<hl id = "insecto">Mis 3 in s e c to s fa v o rito s< /h l>
<p>
<1 h ip e rv n eu lo in te r n o a l a s c a r a c t e r s t i c a s >
<a h r e f # c a r a c t e r 1 s t i c a s " > I r a <ei>CaracterAiacute;sticas favoritas</em></a>
</p>
<ol>
<H>LuciAeacute; rnaga</H>
<H>Hormiga ro ja< /l1>
<H>Abejorro</li>
</ol>
</body>
</html>
a) Navegador antes de que el usuario haga clic en el vinculo interno

f Lj VWkuoi

4"

_______________

rile//Av'e3empios/cap02/iefna.htmiainsecto$

U toi

Web SK t Otte*. ) Impertido de W-em .

L a s m e j o r e s c a r a c t e r s t ic a s d e I n t e r n e t

.
Puede conocer penonas de pose* de todo d mondo
Time acceso a tos medios a xnecbda qoe se vw M o pubkor
o Nuevos juegos
o Ntie\as a p k m o e s

P o i DCfOCIOt

Por placer
o Notorias de todo el nygid^
* Motores de bsqueda
o Compras

Figura 2 .1 6 | Hipervnculos internos para facilitar la navegacin en las pginas (parte 2 de 3).

2.13

b) N *g ad o r despus de

I j V.ncJct ^!e<nc:

ir

[ *)

Elementos meta

67

el usuario haga dtc en el vnculo interno

i na #
* \

!iley//Yyejemplos/cap02/intefnd.htmlirwectos

u^iidot |; W6Sfe#G*B*y C)
Secuencias t comandos
Nuevo* lenguaje*

Vmoioi
Mantener se a i cooUKto ccc viejos anacos
Es U tecnologa dd jurqro

M is 3 insecto s f a v o r ito s
|f % 1

ffT- *

9 fjy\i

Lucirnaga
2 Hcnxaca roja
3 Abejorro
\ s

Figura 2.16 | Hipervnculos internos para facilitar la nawgacin en las pginas (parte 3 de 3).
La linca 13 contiene una etiqueta con el atrib u to i d (se estableci en c a r a c t e r s t i c a s ) para un h ip e rvnculo in te rn o . Para vincular a una etiqueta con este atributo dentro de la m ism a pgina, el atrib u to h r e f de
un elem ento ancla incluye el valor del atrib u to id , al cual se antepone un signo de gar (com o en f c a r a c t e r i s t i c a s ) . La lnea 55 contiene un hipervneulo con el id c a r a c t e r s t i c a s com o su destino. Al hacer clic en
este hipervneulo en un navegador W eb, se desplaza la ventana del navegador hasta la etiqueta h l en la lnea 13.
Tal vez tenga que ajustar el tam ao de su navegador al de una pequea ventana y desplazarse hacia abajo antes
de hacer clic en el vnculo para ver cm o el navegador se desplaza hasta el elem ento h l.
Un hipervneulo tam bin puede hacer referencia a u n vnculo in tern o en otro docum ento, especificando el
nom bre del docum ento seguido del signo de gato y del valor de id , com o en:
h r e f nom bredearchivo.htm l 9i(T
I b r ejem plo, para vincular a una etiqueta con el atrib u to id U s t a l i b r o s en li b r o s .h t m l , se asigna a
h re f el valor 1 1 b r o s .h tm l# lis ta H b r o $ " . Puede enviar el navegador a un vnculo interno en otro sitio W eb
adjunta el signo de gato y el valor de id de u n elem ento a cualquier U R L, com o en:
h r e f "W ?/./nom brearchivo.htm l#<f'

2.13

Elementos meta

Para catalogar los sirios W eb. los m otores de bsqueda siguen vnculos de una pgina del sirio a o tra (lo que
se conoce co m n m en te com o spideringo crawling) y guardan la inform acin d e identificacin y clasificacin
para cada pgina. Una form a en que los m otores de bsqueda catalogan pginas es leyendo el contenido en los
elem entos n e ta de cada pgina, los cuales especifican inform acin sobre un docum ento. Usar el elem ento meta
es u n o de los m uchos m todos d e la o p tim iza ci n d e m o to res d e b sq u e d a (SEO ): el proceso de disear y
optim izar su sitio W eb para m axim izar la posibilidad de encontrarlo y m ejorar su clasificacin en resultados de
m otores de bsqueda orgnicos (no rem unerados).
Dos atributos im portantes del elem ento m eta son ame, que identifica el tipo d e elem ento meta, y c o n te n t,
que proporciona la inform acin que utilizan los m otores de bsqueda para catalogar pginas. La figura 2.17
introduce el elem ento meta.

68

Captulo 2

Introduccin a HTML5: parte I

1 <!DOCTYPE htn1>
2

4
3
6
7
8

< 1 -- F ig . 2 .1 7 : m eta.htm l -->


<1 lo s elem entos meta p ro p o rcio n an p a la b r a s c la v e y la d e s c r ip c i n de una p g in a . -->

<html>
<head>
<eta c h a rs e t = Hu tf-8">
<t1tle> B ienvenido< /t1tle>

9
10

< ! la s e t i q u e t a s <meta> proveen a lo s m otores de bsqueda -->

11

< ! l a in fo rm aci n que se usa p a ra c a ta l o g a r un s i t i o

12
13
14
15
16
17
18
19
20

21

-->

o i e t a ame = keywords c o n te n t = "p&aacute;gina Web, d1se&nt1lde;o,


WTMLS. t u t o r a ! , p e rso n a l, ayuda, 81acute;nd 1ce, form ularlo,
c o n ta c to , re tro alim e n ta c i& o a c u te ;n , l i s t a , v a c u t e n c u l o s , d e ite l" >
<meta ame " d e sc rip tio n " co n te n t "Este s i t i o Web l e ayudar&aacute;
a aprender l o s fundamentos de HTMLS y el diseAnt1lde;o de p&aacute;g1nas Web
por medio del uso de ejemplos I n t e r a c tiv o s y
c a p a d tac1&oacute;n.">
</head>
<body>
<hl>Bienven1do a n u e stro s i t i o web</hl>

22

23
24
23
26
27
28
29
30
31
32
33

<p>Dise&ntildeamos e s t e s i t i o para enseA ntilde;ar sobre la s m aravillas


de <strong><em>HTWL5</em></strong>. <em>HTML5</e*> est&aacute;
mejor equipado que <em>H7WL</em> para re p r e s e n ta r datos
complejos en I n t e r n e t . <e>HTMLS</em> aprovecha l a e s t r i c t a
s i n t a x i s de XMi para asegurar que est&eacute; bien formado. Pronto
conocer&aacute; muchas de las ex c elen tes c a r a c te r & ia c u te ; s tic a s de
<em>HTML5.</em></p>
<p>01vi&eacute;rtase con e l sitio< /p >
</body>
</html>
(

J R 0-crvtJMJe

-fr C f i } ile7/A yjw pios/C 3p02/m eu.htm i

u **lo$4tJCi I*)

Sbc$Glkiy Q brpcAoM1

B ie n v e n id o a n u e s t r o sitio W e b
Disertamos este sido para ensear sobre tas m*avaas de H TM LS HTML5 est mejor eqwpado que HTML pora
representar datos complejos en Internet HTMLS aprovecha la estncta sintaxis de XML pora asegurar que este bien
fcraado Ptooto conocer muchas de las excelentes coractensbcas de HTML5
Drvsrtase con el bo

Figura 2.17 | Los elementos meta proveen palabras clave y una descripcin de la pgina.
Las lneas 12 a 14 dem uestran el uso de un elem ento m eta llamado keywords". EJ atrib u to c o n te n t de
dicho elem ento m eta proporciona a los m otores de bsqueda una lista de palabras q u e describen la pgina. Estas
palabras se com paran con utilizadas en las solicitudes de bsqueda. En consecuencia, al incluir elem entos meta
y su inform acin en c o n te n t podem os atraer ms visitantes a nuestro sitio.

2.14

Recursos Web

69

Las lneas 15 a 18 dem uestran el uso d e un elem ento n e ta llamado " d e s c rl p tio n . El atrib u to c o n te n t
de dicho elem ento m eta proporciona una descripcin de tres a cuatro lneas de un sitio, escrita en form a de
enunciados. Los m otores de bsqueda tam bin usan esta descripcin para catalogar nuestro sitio y algunas veces
m uestran esta inform acin com o parte de los resultados de bsqueda.

Observacin de ingeniera de softw are 2.2


Los elementos meta no son visiblespara los usuarios. Deben colocarse dentro de la seccin head de nuestro
documento de HTML5; de lo contrario os motores de bsqueda tu>os leern.

2.14

Recursos Web

w#*.d e i t e l . com/html5
Visite nuestro C entro de recursos de H T M L 5 en lnea, en d o n d e encontrar vnculos categori/ados para m udios recursos en su mayora gratuitos sobre H T M L 5 , com o: introducciones, tutoriales, dem ostraciones, videos,
docum entacin, libros, blogs, foros, captulos de muestra y ms.

Resumen
Seccin 2 1 Introduccin
H TM L5 es un lenguaje de marcado que especifica b estructura y d contenido de los documentos que se visualizan en
los navegadores Web.

Seccin 2 2 Edicin de H TM L5
lo s computadoras Ibmadas servidores Web almacenan documentos de HTML5.
Los clientes (por ejemplo, los navegadores Web que se ejecutan en su computadora local o smartphonc) solicitan recur
sos especficos (pg. 38) tales como los documentos de HTM L5 a los servidores Web.

Seccin 2 3 E l prim er ejemplo de H TM L5


La decbracin dd tipo de documento (DOCTYPE; pg. 39) es obligatoria en los documentos de HTML5 para que los
navegadores desplieguen b pgina en modo estndar (pg. 39).
Los comentarios de HTML5 (pg. 39) siempre empiezan con <1 (pg. 39) y terminan con -- (pg. 39). El navegador
ignora todo d texto dentro de un comentario.
El elemento html (pg. 40) encierra b seccin dd encabezado (representada por el elemento head; pg. 40) y la seccin
d d cuerpo (representada por el demento body; pg. 40).
La seccin de encabezado contiene informaan sobre d documento ele HTM L5, como su ttulo (pg. 40). Tambin puede
oontcncr instrucciones especiales de formato de documentos conocidas como hojas de estilo (pg. 40) y programas del lado
d d cliente llamados secuencias de comandos (pg. 40) para crear pginas Web dinmicas.
La seccin d d cuerpo contiene d contenido de b pgina, que d navegador visualiza cuando el usuario visitab pgina Web.
Los documentos de HTML5 ddimitan un demento con etiquetas de inicio y de fin. Una etiqueta de inicio (pg. 40)
consiste en d nombre dd elemento entre parntesis angulares (por ejemplo, <htnl>). Una etiqueta de fin (pg. 40) consiste
en el nombre dd elemento al que se anrepone una barra diagonal (/) entre parntesis angulares (por ejemplo, </htnl>).
El elemento t i t le nombra una pgina Web. El ttulo aparece por lo general en b barra coloreada (conocida como barra
de ttulo; pg. 40) en la parte superior de b ventana dd navegador y tambin aparece como d texto que identifica a una
pgina cuando los usuarios agregan esa pgina a su lista de Favoritos o Marcadores.
1 elemento de prrafo (pg. 40), que se denota mediante <p> y </p>, ayuda a definir b estructura de un documento.
Todo el texto que se coloca entre bs etiquetas <p> y </p> forma un prrafo.

70

Captulo 2

Introduccin a HTML5: parte I

Seccin 2 .4 Servicio de validacin de H TM L5 del W 3C


9 Debe usar una sintaxis correcta de HTML5 para asegurar que los navegadores procesen sus documentos en forma
correcta.
El Consorcio World Wide Web (W3) ofrece un servicio de validacin (va11dator.w3.org; pdg. 41) para verificar la
sintaxis de un documento.

Seccin 2 .5 Encabezados
HTM L cuenta con seis elementos de encabezado (hl a h6; pg. 41) para especificar la importancia relativa de la infor
macin. El demento de encabezado hl se considera d ms importante y se despliega en una fuente ms grande que
los otros cinco. Cada demento de encabezado sucesivo (h2, h3. etc.) se despliega en una fuente cada vez ms pequea.

Seccin 2 .6 Vinculacin
9 Los hipcrvinculos (pg. 42) hacen referencia (o vinculan) a otros recursos, como documentos de HTML5 c imgenes.
Por lo general, d elemento strong (pg. 43) provoca que d navegador despliegue texto en una fuente en negrita.
Rara crear vnculos se utiliza d demento a (ancla) (pg. 43). El atributo h ref (referencia de hipertexto") (pg. 43) es
pecifica la ubicacin de un recurso vinculado, como una pgina Web. un archivo o una direccin de correo dcctrnico.
Las anclas pueden vinculara una direccin de correo dcctrnico mediante el uso de un U R L n allto : (pg. 44). Cuando
alguien hace clic en este tipo de vnculo anclado, la mayora de los navegadores abren el programa de correo dcctrnico
predeterminado para iniciar un mensaje de correo dcctrnico dirigido a la direccin vinculada.

Seccin 2 .7 Imgenes
El atributo src (pg. 46) d d elemento ing (pg. 46) especifica la ubicacin de una imagen.
Cada elemento irag en un documento de HTML5 debe tener un atributo a l t (pg. 47). Si un navegador no puede
desplegar una imagen, muestra d valor d d atributo a lt.
H atributo al 11c ayuda a crear pginas Web accesibles (pg. 47) para usuarios con discapacidadcs, en especial los que
tienen discapacidad visual y utilizan navegadores de slo texto.
Los elementos vacos de HTM L5 (como 1mg; pg. 47) contienen slo atributos, no marcan texto y no tienen una eti
queta de cierre.

Seccin 2 .8 Caracteres especialesy reglas Isorizontales


HTML5 cuenta con referencias a entidades de caracteres en la forma 8cdigo; (pg. 49) para representar caracteres.
La mayora de los navegadores despliegan una regla horizontal (pg. 51) que se indica mediante la etiqueta <hr> (un
demento vacio), como una linca horizontal con una lnea en blanco por encima y por debajo de da.
Los caracteres especiales tambin pueden expresarse como referencias a caracteres numricos (pg. 5 1): valores decimales
o hcxadecimalcs (hex; pg. 51).
9 La mayora de los navegadores despliegan d elemento del (pg. 51) como texto subrayado. Con este formato los usua
rios pueden indicar revisiones de documentos.

Seccin 2 .9 Listas
9 El elemento de lista desordenada ul (pg. 51) crea una lista en la que cada elemento empieza con un smbolo de vieta
(conocido como rculo relleno). Cada entrada en una lista desordenada es un demento 11 (elemento de lista) (pg. 5 1).
la mayora de los navegadores Web despliegan estos elementos en una nueva lnea con un smbolo de vieta con sangra
desde d inicio de la lnea.
9 Las listas pueden estar anidadas para representar relaciones jerrquicas de los datos.
9 El elemento de lista ordenada o (pg. 52) crea una lista en la que cada elemento empieza con un nmero.

Resumen

71

Las tablas se usan con frecuencia para organizar datos en filas y columnas. Las tablas se definen con d demento tab le

(pg-54).
^ B B L
"
*' f
^ ^
/
EJ dem ento captlon (pg. 54) especifica el ttulo de una tabla. La mayora de los navegadores despliegan el texto
dentro de la etiqueta <capt1on> por encima de la tabb. Es una buena prctica incluir una descripcin general de b
informacin de b tabb en el atributo sunraary del elemento table: una de las muchas caractersticas de IITML5 que
hacen a las pginas Web ms accesibles para los usuarios con disca paridades. Los dispositivos de voz usan este atributo
para hacer b tabb ms accesible a los usuarios con discapacidadcs visuales.
Una tabb tiene tres secciones distintas: encabezado, cuerpo y pie (pg. 56). La seccin (o celda) de encabezado se de
fine con un elemento thead (pg. 56), el cual contiene informacin sobre el encabezado tal como los nombres de las
columnas.
Cada elemento t r (pg. 56) define una fib individual en b tabb (pg. 56). Las columnas en b seccin de encabezado
se definen con elementos th (pg. 56).
El cuerpo de b tabb, que se define en un demento tbody (pg. 56), contiene los datos principales de b tabb.
La seccin dd pie se define con un demento tfo o t (pg. 56). Por lo general, d rexto que se coloca en d pie incluye
resultados de clculos y notas al pie.
Podemos crear celdas de datos ms grandes mediante d uso de los atributos ronspan (pg. 57) y col span (pg. 57). Los
valores asignados a estos atributos especifican d nmero de filas o columnas ocupadas por una celda.
El demento br (pg. 57) provoca que la mayora de los navegadores desplieguen un salto de lnea (pg. 57). Cualquier
marcado o texto que siga despus de un elemento br se despliega en b siguiente lnea.

Seccin Z I 1 Formularios
HTML5 cuenta con formularios (pg. 58) para recolectar informacin de un usuario.
Los formubrios pueden contener componentes visuales y no visuales. Los componentes visuales son los botones que
pueden presionarse y otros componentes de b interfaz grfica de usuario con los que inceracran los usuarios. Los
componentes no visuales, conocidos como entradas ocultas (pg. 61), almacenan los datos que usted especifique, como
direcciones de correo dectrnico y nombres de archivos de documentos de HTML que acten como vnculos.
Un formulario se define mediante un elemento forra (pg. 60).
Los componentes no visuales, conocidos como entradas hldden (pg. 61), almacenan cualquier dato que especifiquemos.
El atributo method (pg. 60) especfica cmo se envan los datos d d formubrio al servidor Web.
El atributo actlon (pg. 60) en d elemento form especifica d URL de la secuencia de comandos en el servidor Web que
se invocar para procesar los datos dd formubrio.
La entrada tex t (pg. 61) inserta un campo de texto en d formulario. Los usuarios pueden escribir datos en los campos
de texto.
El atributo slze d d demento i nput (pg. 61) especifica d nmero de caracteres visibles en d campo de texto. EJ atribu
lo opcional raaxlength (pg. 61) limita d nmero de caracteres que se pueden introducir en d campo de texto.
lnpuc submit (pg. 61) es un botn que. cuando se presiona, enva al usuario a b ubicacin especificada en d atributo
dd formubrio. El elemento Input re se t establece d texto que se muestra en d botn (d valor predeterminado es Reset
si omitimos d atributo valu).
El elemento tex tarea (pg. 61) inserta un rea de texto multilnea en un formubrio. El nmero de filas se especifica
mediante el atributo roms (pg. 61) y d nmero de columnas (caracteres por lnea) mediante d atributo cois (pg. 61).
La entrada password (pg. 64) inserta un cuadro de contrasea con d tamao (slze) especificado (nmero mximo de
caracteres permitidos).
Un cuadro de contrasea nos permite introducir informacin confidencial, como los nmeros de tarjetas de crdito y
contraseas, al "enmascarar" la informacin introducida con asteriscos ( ). Por lo general los asteriscos son d carcter
de enmascaramiento que se utiliza para los cuadros de contrasea. El valor real introducido se enva al servidor Web, no
los caracteres que enmascaran b entrada.

Captulo 2

72

Introduccin a HTML5: parte I

Las casillas de verificacin (checkbox)(pg. 64) permiten a los usuarios seleccionar de entre un conjunro de opciones.
Cuando un usuario selecciona un elemento checkbox, aparece una marca de verificacin en esc elemento. De lo con
trario el elemento checkbox permanece vado. Estos elementos pueden usarse en forma individual o en grupos. Los
elementos checkbox que forman parte del mismo grupo tienen el mismo nombre (ame).
Los bocones de opcin (radio) (pg. 64) son similares a las casillas de verificacin, excepto que slo podemos seleccionar
un botn de opcin en un grupo en un momento dado. Todos los botones de opcin en un grupo tienen el mismo
atributo nana y se distinguen con base en sus distintos atributos valu.
El demento se le c t (pg. 65) provee una lista dcsplcgable de la que d usuario puede seleccionar un demento. El atribu
to ame identifica a la lista dcsplcgable. El elemento optlon agrega elementos a la lista dcsplcgable.

Seccin 2 .1 2 Vinculacin interna

La vinculacin interna (pg. 67) es un mecanismo que permite al usuario saltar entre distintas ubicaciones en el mismo
documento.
fora vincular a una etiqueta con su atributo dentro de la misma pgina Web, d atributo href de un demento ancla
incluye d valor dd atributo Id y le antepone el signo de gato (como en c a ra c te rstic a s).

Seccin 2.13 Elementos mota

Rira catalogarlos sirios, los morores de bsqueda siguen los vnculos de una pgina a otra (loque se conoce comnmente
como tpideringo crawlin)y guardan la informacin de idcnrificadn y clasificacin para cada pgina.
I h a forma en que los motores de bsqueda catalogan pginas es leyendo el contenido de los elementos meta en cada
pgina (pg. 67), los cuales especifican informacin sobre un documento.
Dos atributas importantes del elemento neta son ame (pg. 67). que identifica d tipo de demento neta, y content
(pg. 67), que proporciona la informacin que utilizan los motores de bsqueda para catalogar pginas.

El a trib u to c o n te n t del elem ento meta keywords proporciona a los m otores d e bsqueda u n a lista de palabras que des
criben la pgina. Estas palabras se co m p aran con las palabras en las solicitudes d e bsqueda.

El atributo content d d elemento meta descrlptlon proporciona una descripcin de tres a cuatro lincas de un sitio,
escrita en forma de enunciados. Los motores de bsqueda tambin usan esta descripcin para catalogar nuestro sitio y
algunas veces muestran esta informacin como parte de los resultados de bsqueda.

Ejercicios de autoevaluacin
2.1

Indique si cada uno de los siguientes enunciados es verdadero o falso. Si es falso, explique por qu.
a) Una lista ordenada no puede anidarse dentro de una lista desordenada.
b) El elem ento b r representa un salto de linca.
c) Los hipervneulos se denotan mediante dememos Unk.
d) La anchura de todas las cddas de datos en una cabla debe ser igual.
c) Estamos limitados a un mximo de cinco vnculos internos por pgina.

2.2

Complete las siguientes oraciones:


a)

EJ e le m e n to ____________ insera una regla horizontal.

b) ftira marcar un supcrndicc se utiliza d elemento____

y para marcar un subndice se utiliza d elemento

c) El elem ento d e encabezado m enos im p o rtan te e s _____

y d elemento de encabezado ms importante es

d) Elelem ento___________ marca una lista desordenada.


c)

El e le m e n to ____________ m arca un prrafo.

Ei atributo___________en un elemento Input inserta un botn que, cuando se presiona, restablece el


contenido dd formulario.
g) El dem en to __________ marca una fila de una tabla.
h) Los___________ se usan por lo general como caracteres de enmascarado en un cuadro de contrasea.
0

Respuestas a los ejercicios de autoevaluacin

73

Respuestas a los ejercicios de autoevaluacin


2.1

2.2

a) Falso. Una lista ordenada puede anidarse dentro de una lista desordenada y viceversa, b) Verdadero, c) Falso. Los
hipervnculos se denotan mediante elementos a. d) Falso. Puede especificar la anchura de cualquier columna,
ya sea en pseles o como un porcentaje de la anchura de la tabla, e) Falso. Puede tener un nmero ilimitado de
vnculos internos.
a) hr. b) sup, sub. c) H6. hl. d )u l. e) p. f) typ reset", g) tr. h) Asteriscos.

Ejercicios
2.3

Use HTM L5 para crear un documento que contenga cl siguiente texto:


Cno program ar en I n t e r n e t y World Wide Web: q u in ta e d ic i n
Bienvenido a l mundo de l a program acin en I n t e r n e t . Henos c u b ie r to
muchos temas r e la c io n a d o s con I n t e r n e t .

Use h 1 para el titulo (la primera linca de texto), p para cl texto (la segunda y tercer lincas de texto). Inserte una regla horizon
tal entre cl elemento hl y d elemento p. Abra su nuevo documento en un navegador Web para ver d documento marcado.
2.4

Una imagen llamada deltel.png tiene 200 pixdcs de ancho y 150 pxclcs de alto. Escriba una instruccin de
HTML5 usando los atributos wldth y height d d demento 1mg para realizar cada una de las siguientes transforma
ciones:
a) Aumentar d tamao de la imagen en un 100 por ciento.
b) Aumentar d tamao de la imagen en un 50 por ciento.
c) Cambiar la relacin anchura-altura a 2:1 manteniendo d valor de wldth que se obtuvo en d inciso (a).

2.5

Cree un vinculo a cada uno de los siguientes dementse


a) El archivo Index.h t n l , que se encuentra en d directorio archivos.
b) El archivo Index.htnl, que se encuentra en d directorio texto del directorioa rc h iv o s .
c) El archivo Index.htnl, que se encuentra en d directorio o tro de su directorio padre.
| Sugerencia:.. significa cl directorio padre.]
d) l a direccin de correo electrnico del presidente de Estados Unidos (p res1d en td w h 1teh o u se.g o v ).
e) El archivo llamado REACME en cl directorio pub de ftp.cdron.con. [Sugerencia: use f tp ://.]

2.6

Cree un documento de HTML5 que contenga una lista ordenada de tres elementos: nieve, nieve a base de agua y
yogtut congelado. Cada lista ordenada debe contener una lista desordenada anidada de sus sabores favoritos. Propor
cione tres sabores en cada lista desordenada.

2.7

Cree un documento de HTM L5 que utilice una imagen como un vinculo de correo electrnico. Use d atributo a l t
para proveer una descripcin de la imagen y d vnculo.

2.8

Cree un documento de HTML5 que contenga vnculos a sus cinco sitios Web Favoritos de ofertas diarias (como
Groupon, Living Social, etc.). Su pgina debe contener d encabezado Mis sitios Web favoritos de ofertas". Maga
dic en cada uno de estos vnculos para probar su pgina.

2.9

Cree un documento de HTML5 que contenga una lista desordenada con vnculos a todos los ejemplos que se
presentan en este capitulo. [Sugerencia: coloque rodos los ejemplos dd captulo en un directorio llamado ejem plos
y despus cree vnculos a los archivos en esc directorio.]

2.10 Identifique cada uno de los siguientes objetos de HTML5 como un demento o un atributo:
a) html
b) wldth

c) h r e f

d) br
e)

h3

0
g) src

74

2.11

Captulo 2

Introduccin a HTML5: parte I

Indique cuil de los siguienres enunciados es verdadero y cul es falso. Si es falso, explique por qu
a) Un documento de HTML5 vlido no puede contener letras maysculas en nombres de elementos.
b) Los documentos de HTML5 pueden tenerla extensin de archivo .htm.
c) &less; es la referencia a entidad de carcter pata el carcter menor que (<).
d) En un documento de HTML5 vlido. <U> puede anidarse dentro de etiquetas <ol> o <ul>.

2.12 Complete las siguientes oraciones:


a) Los comentarios de HTML5 comienzan con < 1-- y terminan c o n ___________.
b) En HTML5. los valores de los atributos pueden ir encerrados entre
.
c) __________ es b referencia a entidad de carcter para un signo &.
d) El elem ento___________ puede usarse para crear texto en negrita.
2.13 Clasifique cada uno de los siguientes objetos como elemento o atributo:
a) wldth
b) td
c) th
d ) (vane

e) select
0 type
2.14 Cree d marcado de HTML5 que produzca b tabb que se muestra en b figura 2.18. Use etiquetas <e*r y <strong>
segn sea necesario. La imagen (camello. pr*g) se incluye en d directorio de ejemplos d d capitulo 2.

CSeuo<J5

L)

S*C1 tu q tr^ o t

fily//vyejempos/soicioni/cap02/fig02.iammi
J

W tb Sfcct

ry D

o t W cm .

O b je tiv o s
Podt ere* labias coo fita* y cokuma de dalos
Poder concretar ta 'tsuakracicc y fi temate de tabtas
Poder ere* y os* onm*sos
Toa, 04 la tabla 4 mi mtmorux limpiar if/a t todos los oxpodto to t oncantiadoz m \ iota

W fe n Shakrspe*e

Figura 2.18 | Tabla de HTML5 para el ejercicio 2.14.


2.15 Escriba un documento de HTM L5 que produzca la tabb que se muestra en b figura 2.19.
2.16 Una universidad local le pidi que creara un documento de HTML5 que permita a los futuros estudiantes universi
tarios proveer retroalimentacin sobre su visita al campus. Su documento de HTML5 debe contener unformubrio
con campos de texto para un nombre y un conro electrnico. Proporcione casillas de verificacin que permitan a los
futuros estudiantes indicar lo que les gust m is sobre el campus. Las casillas de verificacin deben incluir campus.

Ejercicios

1f
C

Li Wc/Z/Y

75

C - ......
W30*uoon/c<ip<

P g i n a tic e j e m p l o d e t a b l a
Ertan wutatfa
imilla
Efttrn rfcortpo
Eorn r i f * r e UuUi

Figura 2.19 | Tabla de HTML5 para el ejercicio 2.15.

estudiantes, ubicacin, ambiente, dormitorios y deportes. Proporcione adems botones de opcin que pregunten a
ios futuros estudiantes cmo supieron sobre la universidad. Las opciones deben incluir, amigos, televisin, Internet
y otro. Adems, proporcione un rea de texto para comentarios adicionales, un botn para enviar y un botn para
restablecer. Use post para enviar la informacin en d formulario a h ttp ://***. d e i t e l .con.
2.17 Cree un documento de HTML5 titulado Cmo obtener buenas calificaciones'. Use etiquetas <meta> para incluir
una serie de palabras clave que describan su documento.

Introduccin a HTML5: parte 2

Laform a siempre sigue a la


Juncin.
Lois Sullrvin

Escucho y doy m i aportacin slo


si alguien pregunta.
Brbara Bush

Objetivos
En este capitulo aprender a:
Construir un formulario utifoando
los nuevos tipos mput de HTML5.
Especificar un elemento mput
en un formulario como el que
debe recibir el enfoque de manera
predeterminada.
Usar elementos input con
validacin automtica.
Especificar texto piaceholder
temporal en varios elementos
input
Usarelementos input con el
atributo autocomplete para
ayudar a los usuarios a reintroducir
texto que hayan introducido
anteriormente en un formulario.
Usar el elemento datalist para
especificar una lista de valores
que pueden introducirse en un
elemento input y para completar
entradas de manera automtica, a
medida que el usuario escriba.
Usar los nuevos elementos de
estructura de pgina de HTML5
para deSnear partes de una
pgina, incluyendo encaberados.
secciones, figuras, artculos, pies
de pgina y ms.

Plan general

3.2

3.1 Introduccin
3.2 Nuevos tipos input de formularios de HTML5
3.2.1 input tipo color
3.2.2 input tipo date
3.2.3 input tipo datetime
3.2.4 input tipod atetim e-lo cal
3.2.5 input tipo email
3.2.6 in p u t tipo month
3.2.7 in p u t tipo number
3.2.8 input tipo range
3.2.9 input tipo search
3.2.10 input tipo t e l
3.2.11 input tipo time
3.2.12 input tipo url
3.2.13 input tipo week
3.3 Bementos input y d a t a l i s t y el atributo
autocomplete

Nuevos tipos in p u t de formularios de HTML5

3 .4

77

Bementos de estructura de pgina


3.4.1 Bemento header
3.4.2 Flemento nav
3.4.3 Elemento f ig u r e y elemento
f ig e a p tio n
3.4.4 Elemento a r t i c l e
3.4 5 Elemento summary y elem en to d e t a i l s
3.4-6 Elemento s e c tio n
3.4.7 Elemento as i de
3.4 8 Elemento m eter
3.4 9 Elemento f o o te r
3.4.10 Semntica a nivel de texto: elemento
mark y elemento wbr

3.3.1 Atributo autocomplete del elemento


input
3.3.2 Elemento d a t a l i s t
_______________Resumen | Ejercicios de autoevaluacin | Respuestas a ios ejercios de autoevaluacin \ Ejercicios_______________

3.1

Introduccin

Ahora continuarem os nuestra presentacin de H T M L 5 , para ello hablarem os sobre varias d e las nuevas carace rs ticas:
N uc\fos tipos de elem entos in p u t para co b res, fechas, tiem pos, direcciones de correo electrnico, n
meros, rangos de valores enteros, nm eros telefnicos, direcciones URL, consultas de bsqueda, meses
y semanas; b s navegadores que no soportan estos tipos de in p u t sim plem ente b s despliegan com o
elem entos in p u t de texto estndar
H erram ientas para com pletar en form a autom tica, q u e ayudan a b s usuarios a reintroducir rpidam en
te el texto que hayan escrito antes en u n form ulario
Elem entos d a t a l i s t para proporcionar listas de valores perm itidos que un usuario puede introducir en
un elem ento in p u t y para com pletar en form a autom tica esos vabres a m edida que el usuario escriba
Elem entos de estructura de pgina que nos perm iten delinear y dar significado a las partes de una pgi
na, com o encabezados, reas de navegacin, pies de pgina, secciones, artfcu b s, apartados, resm enes /
detalles, figuras, leyendas de figuras y ms.
El soporte de las caractersticas que presentarem os en este c a p tu b vara entre b s navegadores, por b que para
nuestras salidas de eje m p b utilizam os varios navegadores. E n el resto de b s c a p tu b s hablarem os sobre muchas
ms caractersticas nuevas de H T M L 5 .

3.2

Nuevos tipos i nput de formularios de HTML5

La figura 3.1 muestra b s nuevos tipos de elem entos in p u t para formularios de H T M L 5- No todos b s navegadores
s i portan estos nuevos tipos de manera universal. En este ejem p b proporcionam os salidas de muestra de varios
navegadores W eb, para que el lector pueda ver cm o se com portan b s tipos de elementos in p u t en cada uno.

78

Captulo 3

Introduccin a HTML5: parte 2

<!DOCTYPE htnl>

3
4
3
6
7
8

9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
33

<! Fig. 3.1: nuevost1posinputform ularios.htm l -->


<1 Los nuevos tip o s de elementos input de form ularios de HTML5 y sus a t r i b u t o s . -->
<htnl>
<head>
cmeta ch arset= u t f - 8 M>
<title>Nuevos t i p o s de input de HTML5</titie>
</head>
<body>
<hl>Demo de nuevos tip o s de input de HTML5</hl>
<p>Este form ulario demuestra lo s nuevos t i p o s de elementos input de HTML5
y lo s a t r i b u t o s p laceh o ld er, required y autofocus.
</p>
form method = post" a c tio n = http://ww w .deitel.com ">
<p>
<label>Color:
<input type = color" autofocus />
(Coacute;digo hexadecimal como #ADD8E6)
</label>
</p>
<P>
<labe1>Fecha:
<input type "date" />
(aaaa-mm-dd)
</label>
</p>
<p>
<label>Hora y fecha:
<1nput type "datetime" />
(aaaa-irm-ddThh:mm+ff :gg, como 2 7 - 0 1 - 2012T03:15)
</label>
</p>
<p>
<label>Hora y fe ch a -lo c a l:
<1nput type " d a te tim e - lo c a l" />
(aaaa-nm-ddThh:mm, como 2 0 1 2 -0 1 - 27T03:15 )
</label>
</p>
<p>
<label>Email:
input type "email" p la c eh o ld e r - "nombre0dom1nio.com"
req uired /> Cnombrefldomin1o.com)
</label>
</p>
<p>
<label>Mes:
input type "month" /> (aaaa-mm)
/ la b e l >
</p>
<p>

Figura 3.1 | Nuevos tipos de entrada y atributos de formularios de HTML5 (parte I de 2).

3.2

Nuevos tipos inp ut de formularios de HTML5

54
<label>N&uacute;mero:
55
<input type = "nunber"
56
min - 0"
57
max . -7"
56
s te p = 1"
59
valu - M4" />
60
</label> (E sc rib a un n&uacute;mero e n tr e 0 y 7)
61
</p>
62
<p>
63
<1abel>Rango:
64
0 <input type range"
65
min - "0"
66
max 20"
67
valu = 10" /> 20
68
</labe1>
69
</p>
70
<p>
71
<label>B&uacute;squeda:
72
<input type = "search" piaceh older =" c o n su lta de b&uacutesqueda" />
73
</labe1> (E sc rib a aqu&iacute; su c o n su lta de b&uacute;squeda.)
74
</p>
75
<p>
76
<label>Tel:
77
<input type = " t e l " p iaceholder = ( # # # ) # # # - # # # #
78
p a t t e m = \ ( \ d { 3 } \ ) + \d { 3 )- \d { 4 )" requ ired />
79
( 8 # # ) # # # -# # # #
80
</l abe 1 >
81
</p>
82
<p>
83
<label>Hora:
84
<input type = "time" /> (hh:mm)
85
</label>
86
</p>
87
<p>
88
<label >URL:
89
<input type u r l"
90
piaceh older = "http://Mmw.nombredominio.com" />
91
( http://www.nombredominio.com)
92
</labe1>
93
</p>
94
<p>
95
<label>Semana:
96
cinput type = week />
97
(aaaa-Wnn, t a l como 20 12-W01)
98
</labe1>
99
</p>
100
<p>
101
<input type = "su b n it" valu * "Enviar" />
102
<input type = " r e s e t valu = "Borrar" />
103
</p>
104
</fom>
105
</body>
106 </html>
Figura 3.1 | Nuevos tipos de entrada y atributos de formularios de HTML5 (parte 2 de 2).

79

80

3.2.1

Captulo 3

Introduccin a HTML5: parte 2

in p u t t ip o c o lo r

El tip o 1nput c o lo r (figura 3.1 , lincas 20 y 21) perm ite al usuario introducir u n color. Al m o m en to de escribir
este libro, algunos navegadores despliegan el tipo n p u t c o lo r com o un cam po de texto en d o n d e el usuario
puede introducir un cdigo hcxadccimal o el nom bre de u n color. H ay dos navegadores, C h ro m c y O pera, que
m uestran un selector de color sim ilar al cuadro de dilogo de colores de M icrosoft W indows, que se m uestra en
la figura 3.2. En el futuro, cu an d o haga clic en u n elem ento in p u t c o lo r , es m uy probable que el resto de los
navegadores m uestren u n selector de color tam bin.

Figura 3.2 | Un dilogo para seleccionar colores.

E l atributo autofocus
E l a trib u to a u to fo c u s (figura 3.1 , lnea 20) (un atrib u to opcional que puede usarse slo en un elem ento
in p u t en un form ulario) otorga de m anera autom tica el enfoque al elem ento in p u t, lo que perm ite al usuario
em pezar a escribir en ese elem ento de inm ediato. La figura 3.3 m uestra el uso del elem ento a u to fo c u s en el
elem ento c o lo r (el prim er elem ento in p u t en nuestro form ulario), com o se despliega en O pera. N o necesita
incluir a u to fo c u s en sus formuLirios.

F o ^ r
'
hpci de input... | O
O
loo! kxtKHV'VV^pkH.
- - 7*"*?.
...-v
r
..: j , .

k v .^ w

*
.

NuMtTipoUnpKilForrrK*
r.~rr.

*| *

r.:

D e m o d e n u e v o s tip o s d e i n p u t d e H T M L 5
Esie f o d e t o n a a k>s m>r%oi tipos de elementos eput de HTML5 y ks athUaos pbceholder. ie<**ed v

t f dbca
Color 0 (Codeo bexadecinal cccno ADDSE6)
Fecha
Hoia y fecha

- (aaaa-tnm-dd)
-

g TC (aaaa-oTO-ddThhmnHr gg. como 2^-01-2012T03 15)

0 * 0

Figura 3.3 | Autofocus en el elemento in p u t color cuando se usa el navegador Opera.

3.2

Nuevos tipos in p u t de formularios de HTML5

81

Validacin
Tradicionalm ente ha sido difcil validar la entrada del usuario, com o asegurar que se introduzca una direccin
de correo electrnico, URL, fecha u hora en el form ato adecuado. Los nuevos tipos in p u t de H T M L 5 cuentan
con validacin automtica del lado del d ien te, con lo que se elim ina la necesidad de agregar cdigo com plicado
de JavaScript a nuestras pginas W eb para validar b entrada del usuario; as se reduce b cantidad de datos inv
lidos que se envan y, en consecuencia, dism inuye d trfico de Internet entre el servidor y el cliente que se usa
para corregir las entradas invlidas. De todas formas el servidor debe validar toda a entrada del usuario.
C uando un usuario introduce datos en un fb rm u b rio y luego lo enva (en este ejem plo, al hacer d ic en el
botn E nviar), el navegador verifica de inm ediato los elem entos de validacin autom tica para asegurar que
b s datos sean correctos. Por ejem plo, si un usuario introduce un valor d e color hexadecimal incorrecto al usar
un navegador q u e despliegue los elem entos c o lo r com o un cam po de texto (por ejem plo. Internet Explorer),
aparecer una anotacin para sealar esc elem ento e indicar que se introdujo un valor incorrecto (figura 3.4).
La figura 3.5 lista cada uno de los nuevos tipos In p u t de H T M L 5 y m uestra ejem plos de los form atos correctos
requeridos para que cada tipo de datos sea vlido.

N e w MTML5 I n p u t

O filey//C/books/2011/IW 3HTP5/examples/ch03/fig03.01/Newf

New H T M L 5 Input Types Demo

T h s fonn demonstiates tbc oew 1ITML5 mput t\p cs and thc ptocehokki. requred and

amofocus attributes
Color. Jane
Date

(Hcxadccxnal code such as aADDSE6)

I In v a lid v a lu . |

(vyyy-nxn-dd

Figura 3.4 | Validacin de un elemento input color. (Actualmente ya no existe esta funcionalidad en Chiome).

bpo de input

Formato

color
Date
Datetime
d a te tim e-lo c al
Month
Number
email
url
time
week

Cdigo hexadecimal
aaaa-mm-dd
aaaa-mm-dd
aaaa-mm-ddThhtmn
aaaa-mm
Cualquier valor numrico
nombreddominio.com
h t t p ://v tm . nombre domi ni o . com
hh: mm
aaaa-Wnn

F igura 3 .5 | Tipos de in p u t con validacin automtica

82

Capitulo 3

Introduccin a HTML5: parte 2

Si desea pasar por aleo la validacin, puede agregar el a trib u to fo rm n o v a lld a te al tipo in p u t subm it en
la lnea 101:
< in p u t ty p e su b m it" v a lu "Enviar fo rm n o v a lid a te />

3.2.2

Input tipo date

El tip o In p u t d a te (lneas 26 y 27) perm ite al usuario introducir una fecha en la form a aaaa-nm -dd. Firefox e
Internet Explorer m uestran un cam po d e texto en d o n d e el usuario puede introducir una fecha tal com o 201201-27. C h ro m e y Safari m uestran un c o n tro l s p in n e r (un campo de texto con una flecha arriba-abajo [ -j] del
lado derecho) que perm ite al usuario seleccionar una fecha al hacer clic en la flecha hacia arriba o hacia abajo.
La fecha inicial es la fecha actual. O pera m uestra un calendario del cual podem os elegir u n a fecha. En el futuro,
a ta n d o el usuario haga clic en u n elem enro in p u t d a te , es probable que b s navegadores m uestren un control
de fecha sim ilar al de M icrosoft W indow s com o se m uestra en la figura 3.6.

C h c c i t 0 *1

1 x p (I

U u ia l

O ctot 07.2011

Cctobtf. 2011

Sun

M e o Tuc vVed T h u

fe

9
16
23
30

10
17
24
31
I

Fn

S *t

7
9
9
10
1
4
5
6 C ID 8
11
12
U
14 15
18
19 20
21 22
25
26 27
2* 29
1
2
I
4
5
I Tcd*y. 10/7/2011

Figura 3.6 | Un control selector de fecha.

3.2.3

input tipo datetime

El tipo Input datetim e (lneas 32 y 33) perm ite al usuario introducir una fecha (ao, mes, da), un valor de
tiem po (hora, m inuto, segundo, fraccin de segundo) y la zona horaria establecida en U T C (T iem po universal
coordinado o Tiem po universal, coordinado). E n la actualidad la mayora de b s navegadores despliegan d a te t i me com o un cam po de texto; C h ro m e despliega un control arriba-abajo y O pera despliega u n control de fecha
y hora. Para obtener ms inform acin sobre el tip o in p u t d a te tim e , visite:

tm (w .w 3.org/T R /htm l5/states-of-the-type-attribute. html#


d a te -a n d -tim e - s ta te

3.2.4

input tipo datetime-local

El tipo input d a te tim e -lo c a l (lneas 38 y 39) perm ite al usuario introducir la fecha y b hora en un olo
control. Los datos se introducen com o ao, mes, da, hora, m inuto, segundo y fraccin de segundo. Internet
E xpbrcr, Firefox y Safari m uestran un cam po de texto. O pera m uestra un conrrol de fecha y hora. Para obtener
ms inform acin sobre el tipo in p u t d a te tim e - lo c a l, visite:

mw. w 3 .o r g / T R / h tm l5 / s ta te s - o f - th e - ty p e - a ttr ib u te . html#


lo c a l- d a te - a n d - tim e - s t a te

3.2

3.2.5

Nuevos tipos in p u t de formularios de HTML5

83

in p u t tip o em ail

El tip o in p u t e o a il (lneas 44 y 45) perm ite al usuario introducir una direccin de correo electrnico o una
Bsta de direcciones de correo electrnico separadas por com as (si se especifica el atrib u to mu t i p l e). A ctualm en
te todos los navegadores m uestran un cam po de texto. Si cl usuario introduce una direccin de correo invlida
(es decir, si el texto introducido no tiene el form ato correcto) y hace clic en el b o t n E nviar, se despliega una
anotacin que pide al usuario que introduzca una direccin de correo electrnico y a p u n ta a ese elem ento in p u t
(figura 3.7). H T M L 5 no verifica si en realidad existe una direccin de correo electrnico introducida por cl
usuario; tan slo valida que la direccin est en cl form ato correcto.

* - O -

<rxxxtxt8A'Bm*.tamj
| f *oW m

a * a
F igura 3 .7 | Validacin de una direccin de correo electrnico en Opera.

E l atributo placeholder

El a trib u to p la c e h o ld e r (lneas 44, 72 y 77) perm ite colocar texto tem poral en un cam po de texto. Por lo
general, el texto de un p la c e h o ld e r es de color g i claroy proporciona un ejemplo del texto y/o el form ato de
r x t o que el usuario debe in tro d u cir (figura 3.8). C uando se coloca el enfoque en el cam po de texto (es decir,
que cl cursor se encuentre en cl campo de texto), desaparece cl texto del p la c e h o ld e r: no se enva cuando cl
usuario hace clic en el b otn E n v iar (a menos que el usuario escriba el mismo texto).

a) Campo de texto
con el texto del
p lac to ld a r de

U op. J
|NuMtfipo de nput ~

II

color gris

Etiud ncmlHt^Jonnio com


0
b) El texto del

placeholder

m L$ l

e f i r ^ tipOl ty W L ttr

| E w * <o*Gc<
A

(nofbbfrtfdoam com)
A

l* .

LM o p )
V*

| 0 Nueve* tipo* de mput...

desaparece cuando

el campo de texto
obtiene el enfoque

Ex tu i 1
0

O-

lCt-1
{nombrr 3 don**3 com)

F igura 3 .8 | El texto del p la c e h o ld e r desaparece cuando el elemento In p u t obtiene el enfoque.


H T M L 5 s o p o r ta d texto del p la c e h o ld e r slo paraseis tipos in p u t: t e x t , se a rc h , u r l , t e l , em ail y p assword. C o m o tal vez cl navegador del usuario no soporte cl texto d e p la c e h o l d er, agregamos texto descriptivo
a la derecha de cada elem ento i nput.

84

Capitulo 3

Introduccin a HTML5: parte 2

E l atributo required
1 a trib u to re q u ire d (lincas 45 y 78) obliga al usuario a introducir un valor antes de enviar el formulario.
Puede agregar este atrib u to a cualquiera de los tipos 1nput. En este ejem plo, el usuario debe introducir una
direccin d e correo electrnico y un nm ero telefnico para poder enviar el form ulario. Por ejem plo, si el usua
rio no inrroduce una direccin de correo electrnico y hace clic en el b o t n E nviar, aparecer una anotacin
sealando el elem ento vaco y pedir al usuario que introduzca la inform acin (figura 3-9).

N u * v o t ^ o j d e m p u t ... * |
lo c a l

lo < 8 lh c s O fjrfT > p4cv'(8{03 b g 0 3.0 1/N o v o sT ^ ilr> p u iE rfn l


f
. mm^
* * > ^ i m ^ ^ m& % ^

m*m

Demo de nuevos tipos de input de HTML5


Este fc-nnulano ctnuesoa los nuevos tipos de elementos mput de HTML5 y los atributos pLKebolder. requared y
aotofoais
Color B (Cdigo bexadecsnol como ADD8E6)
Fecha

- (

d)

Hora v fecha.
Hota y fecha-local

UTC (aaaa-m m -ddThkm m -ff g t como 2 7 -0 1 -.0 1 2 T 0 3 1 5 )

H laaaa-mm-dcThhmm. como 2012 -0 1 -2 T 03:15)

(nombre 'a d o nan com)

Me* I e ,# campo 9 9 ntceaano

Figura 3.9 | Demostracin del atributo req u i red en Opera.


3 .2 .6

in p u t tip o month

El tip o In p u t n onth (lnea 50) perm ite al usuario in tro d u cir un ao y mes en el form ato aaaa-mm. com o 201201. Si el usuario introduce los datos en un form ato incorrecto (por ejem plo, Enero 2012) y enva el form ulario,
aparecer una anotacin sealando que se introdujo un valor incorrecto.

3 .2 .7

in p u t tipo number

El tip o In p u t number (lneas 55 a 59) perm ite al usuario introducir un valor num rico; por lo general los na
vegadores mviles m uestran un teclado num rico para este tip o d e elem ento In p u t. Internet Explorer, Firefox
y Safari m uestran u n cam po de texto en donde el usuario puede introducir un nm ero. C h ro m e y O pera des
pliegan un control spinner para ajustar el nm ero. El atrib u to m1n establece el nm ero m nim o vlido, en este
caso 0. El atributo max establece el nm ero m xim o vlido, que fijamos en 7. El atrib u to s te p determ ina el
increm ento con el que aum entarn los nm eros. Por ejem plo, establecimos el valor de s te p en l", por lo que
el nm ero en el control spinner aum enta o dism inuye por uno cada vez q u e se hace clic en la flecha hacia arriba
o hacia abajo del control spinner, respectivamente. El atrib u to v a l ue establece el valor inicial m ostrado en el
form ulario (figura 3-10). El control spinner slo incluye b s nm eros vlidos. Si el usuario intenta introducir un
v a b r invlido al escribir en el cam po de texto, aparecer una anotacin que sealar el elem ento i n p u t number
y pedir al usuario que introduzca un valor vlido.

3.2

Nuevos tipos in p u t de formularios de HTML5

85

f t s J
|D Nwtvot.poi ck pu> . . j O ____________________________________________ o
4-

M am

m ic<*

{ | -

Bine * c a n G

4J ^ (Ewriba tu msaflo entxc 0 y 7)

----- j<

Figura 3.10 | El tipo in p u t number con un atributo v a lu de 4. como se despliega en Opera.

1L3 Nuevo t*pot de nput -


O

>

_________________________

Local

locatofO . fjcmploi

! * | * ftuu ton Ge.


*

Nmero

* (Escriba ud numero tte 0 y 7)

Pof t#Of tcr&a un rxmwo tguaf o jq


m*%of qu#7
*

111 iiwfli 11,11

Figura 3 .1 1 | Opera verificando que un nmero sea correcto.

3 .2 .8

In p u t tipo range

El tip o in p u t ran g e (lneas 64 a 67) aparece com o control deslizante en C hrom e, Safari y O pera (figura 3.12).
ftiede establecer el mnim o y el mximo, adems de especificar un valor. En nuestro ejemplo, el atributo mi n es "0,
el atributo max es 20' y el atributo v a lu es '10, por lo que el control deslizante aparece cerca del centro del rango
cuando se despliega el docum ento. El tipo in p u t range se valida automticamente de manera intrnseca cuando el
navegador lo despliega com o control deslizante, ya que d usuario no puede mover el control deslizante fuera de los
lmites del valor mnimo o mximo. U n elem ento in p u t range es ms til si el usuario puede ver cm o cambia el
valor actual mientras arrastra el indicador: esto puede lograrse con JavaScript, com o aprenderem os ms adelante.

1*01 do oiput .. - ]>

*-+ O N

9 Locot v<oadt'vyVm|.M.<eO?/r^>3.0j *

Sumo. *6o.

B (Escriba m nummo rrtxt 0 y ?)

Por favor eecffca un numtco

Figura 3 .1 2 | Control deslizante range con un atributo valu de 10. como se despliega en Opera.

3.2 .9

in p u t tipo s e a rc h

El tip o in p u t s e a rc h (lnea 72) proporciona un cam po de bsqueda para introducir una consulta. Este ele
m ento in p u t es equivalente en funcin a un elem ento in p u t de tipo te x t . C uando el usuario empieza a escribir

86

Captulo 3

Introduccin a HTML5: parte 2

en el campo de bsqueda, C h ro m e y Safari m uestran una X en b que se puede hacer clic para borrar el cam po
(figura 3.13).

N ocvot fcpot d t input

K \

J Mc///Y/ejemploVc*p03/1ig03 J>l/Noev*TipotfnputFormulArii

Sitio* tu p tn d o f

W b S k C *lf y

Bsqueda

Im p tfrtric t Vtrv

Isa * * aqu su consota de bsqueda )

Figura 3.13 | Introducir una consulta de bsqueda en Chrome.


3.2 .1 0

in p u t tipo t e l

1 tipo Input t e l (lneas 77 a 79) perm ite al usuario in tro d u cir un nm ero telefnico; por lo general los na
vegadores mviles m uestran un tecbdo num rico especfico para introducir nm eros telefnicos para este tipo
de 1 nput. Al m om ento de escribir este libro, el tipo in p u t t e l se despliega com o u n cam po de texto en todos
los navegadores. La longitud y el form ato de los nm eros telefnicos vara de m anera considerable con base
en b ubicacin, lo que com plica en gran medida la validacin. H T M L 5 no cuenta con validacin autom tica
para el tipo in p u t t e l . Para asegurar q u e el usuario introduzca el nm ero telefnico con el form ato correcto,
agregam os un atrib u to p a tt e r n (lnea 79) q u e usa una expresin regular para determ inar si el nm ero tiene el
form ato apropiado:

( 5 5 5 ) S5S-SS55
C uando el usuario introduce un nm ero telefnico en el form ato incorrecto, aparece una anotacin que solicita
el form ato apropiado, sealando el elem ento in p u t t e l (figura 3.14). V isite w w w .regexlib.cotn, un m o to r
de bsqueda que le ayudar a encontrar expresiones regulares ya im plem enradas que puede usar para validar
entradas.

/ Li Nuevoi tipo* l e mput 0* * \

C
_ S<bci lo^ertdct

Tet W0-12W56 '

fc'y/Ayejempos/cap03/fi903.0I/Nuevo$TiposkHXJtf(xmulrn

J ] Web SIk* Gefrry Q Imprtale de hlow ..

.............. ..........

Hoii I I Haz co<nct&r e<formato sol otado

Figura 3 .I4 | Validacin de un nmero telefnico que usa el atributo p atte rn en el tipo in p u t t e l.
3 .2 .1 1

in p u t tipo tim e

El tipo input time (lnea 84) perm ite al usuario introducir una hora, m in u to , segundos y fraccin d e segundo
(figura 3.15). La especificacin de H T M L 5 indica que un valor de tiem po debe tener dos dgitos para represen
tar b hora, seguido de dos puntos (:) y dos dgitos para representar b s m inutos. O pcional mente, tam bin pode
m os incluir un signo de dos puntos seguido de dos dgitos para representar b s segundos y un p u n to seguido de
uno o ms dgitos, para representar una fraccin de segundo (se m uestra com o f f en nuestro texto de e je m p b
a b derecha del elem ento in p u t tim e en la figura 3.15).

3.3

Elementos inp ut y d a t a lis t y el atributo autocomplete

O p ff#
' Nm

4-

vm

tip o s d< i n p u t ..

-4

Hora 16 16

O-

87

I c i- M J l

lo c ji

t<t*n/Y

f kj03.91 *

&nt<*<onGo<

(Muro
*

1*

Figura 3 . 1 5 | Demento input time como se despliega en Opera.


3.2.12

in p u t tipo u r l

El tipo input u r l (lincas 89 a 91) perm ite al usuario introducir un URL. El d e m e n to se despliega com o un
campo de texto y el form ato apropiado es h ttp ://w w w .d e ite l .com. Si el usuario introduce un U R L con un
form ato incorrecto (por ejem plo, w viw .deitel.com o www. d e i t e l com). el U RL no se validar (figura 3.16).
H T M L 5 no verifica si el U RL introducido es vlido; en vez d e ello valida que el U RL introducido renga el
form ato correcto.

L# op<*

tia

fjN o* 'Ot tipoi d nput.. *


4*

O - 9 Local

rocihost-V: 'ejem pb c03

Hora 16 16 (htunm)

figC 3.01

Butcjf con Go<

Figura 3 .1 6 | Validacin de un URL en Chrome.

3.2.13

in p u t tipo week

El tipo input week perm ite al usuario seleccionar u n ao y nm ero de sem ana en e l form ato aaaa-Wnn, en d o n
de nn puede estar entre 01 y 53. Por ejem plo, 2012-W01 representa la prim era sem ana d e 2012. Internet Explo
rer. Firefox y Safari despliegan u n cam po de texto. C h ro m e despliega un control arriba-abajo. O pera despliega
un control de semana con una flecha hacia abajo que al presionarse hace que aparezca un calendario para el mes
actual con los correspondientes nmeros de sem ana listados hacia abajo del lado izquierdo.

3.3

Elementos in p u t y d a ta l i s t y el atributo autocom plete

La figura 3 .1 7 muestra cm o usar el nuevo atributo au to co m p lete y el elem ento d a ta l i s t.

3.3.1

A trib u to a u to co m p le te del elem ento in p u t

El atributo autocomplete (lnea 18) puede usarseen tipos in p u t para llenar de m anera autom tica la inform a
cin del usuario con base en la entrada anterior, com o nom bre, direccin o correo electrnico. Podem os habili
tar el atrib u to autocom pl e te para todo u n form ulario o slo para ciertos elem entos especficos. Por ejem plo, u n
form ulario de p ed id o s en lnea p o d ra establecer a u to c o m p le te - "on' en los elem en to s in p u t d e no m b re

88

Captulo 3

Introduccin a HTML5: parte 2

y direccin, y establecer au to co m p lete - o f f " en los elem entos in p u t de tarjeta de crdito y contrasea, para
fines de seguridad.

Tip para prevenir errores 3.1


E l atributo autocom plete sloJunciona si especijica un atributo ame o id para el elemento Input.

1 <!DOCTYPE h t* l>
2

J <1 Fig. 3.20: autocomplete.html >


4 <1 El nuevo a t r i b u t o autocomplete y el elemento d a t a l i s t de form ularios de htmls. -->
5 <html>
6

<head>

7
<meta charset= "utf-8">
8
< title > E l nuevo a t r i b u t o autocomplete y e l elemento d a t a l i s t de HTML5</title>
9 </head>
10
11 <body>
12
<hl>0emo de autocomplete y d a t a l i s t < / h l >
13
<p>Este formulario demuestra el nuevo a t r i b u t o autocomplete de HTML
14
y el elemento d a t a l i s t .
U
</p>
16
17
<1 a c t i v a r autocomplete >
18
<form nethod = "post" autoconpl e tc on"
19
<p><label>Primer nombre:
20
<input type t e x t " 1 d - primerNombre"
21
p laceho ld er = Primer nombre"/> (Primer nombre)
22
< /labelx /p >
23
<p><label>Apellido:
24
cinput type = " te x t" i d = "ap ellido"
23
p laceho ld er = "Apellido" /> (A p ellido )
26
< /labelx /p >
27
<pxlabel>Emai 1:
28
<input type = "email" id = "email"
29
p laceho ld er "nombreOdominio.com" /> ( nombre@dominio.com)
30
< /labelx /p >
31
< p x l a b e l for = "HstaTexto"Mes de nacimiento:
32
<input type " t e x t " 1d lis ta T e x to "
33
p laceho ld er = "Seleccione un m es"11st = "meses" />
34
<data1 i s t id ="meses">
33
<option valu Enero">
36
coption valu = Febrero"
37
<option valu "Marzo"
38
<option valu = Abril"
39
<option valu = "Mayo"
40
-coption valu Junio"
41
<option valu Ju lio "
42
<option valu = "Agosto"
43
<option valu Septiembre"
44
coption valu = "Octubre"
Figura 3 .1 7 | El nuevo atributo autocomplete y el elemento d a t a lis t del formulario de HTML5 (parte l de 3)

3.3

43

46
47

48
49
30
31
32
33

Elementos inp ut y d a t a lis t y el atributo autocomplete

89

coption valu = Noviembre"


<option valu Diciembre"
</datal1st>
</labelx/p>
<p><1nput type - "submit" valu Enviar" />
-cinput type = r e s e t " valu = "Borrar" /></p>
</form>
</body>
</ht*l>

a) Fomularto desplegado

i iki

en firefax antes de que el


. .
..
..
usuaoo mteractue co n l.

t i nuevo tributo Jutocom prtc y d ce...

-r

h & Mey//Y:/ejmpls/c*p03dg03j7/duto<O4nplrtehml

RJ*Gooye

D cm o de a u to co m p lete y datalist
Este fonnubno demuestxa el nue\-o atnbuto autocomplete de HTML y el elemento dataktt
Pnroa nombre: 'm oer nombre
Apefrdo Apellide

(Pnmer nombre)
(Apeldo)

F.mad nompre? dom*no cc

(nombre 2 dominio com)

Mes de nacimiento Seleccione uf m*s


Enviar

b) autocoaplete lie n i
de manera automtica
los datos cuando el
usuario regresa a un
lonnulao enviado antes
y empieza a escnbir en el
elemento input PH #r
Nombre; al hacer clic en
Jane se inserta el valor
en el elemento in p u t.

Bonar

jj
El nuevo atributo au to co m p lete

f*

d de... | + j

*5 filt:///Vi/ejfm plos./CipO jrfi^)3j7/uto<om ptde.htm l

RJ *

G oog'*

ft

D-

D e m o de au tocom p lete y datalist


Este fotmuUxio detuuestxa el nuevo atxibuto autocomplete de HTML y el elemento datalist
Pnmer nombre J
[_Jan

A p e ld o Apellido

(Pnmer nombre)

Emad nombro2>domm>o com nombre tfdommio com)


Mes de nacimiento Se accione un mes
Enviar

Bonar

Figura 3 .1 7 | El nuew atributo autocomplete y el elemento d a t a lis t del formulario de HTML5 (parte 2 de 3).

90

Captulo 3

Introduccin a HTML5: parte 2

c) autocowplete con un
d a u 'H stq u e muesca
el valor que se escribi
antes ( Juni o) seguido de
todos los Cementos que
inciden con lo que el
usuario ha escrito hasta
ese momento: al hacer
d ice n un elemento en
la lista utocopi*t
se inserta ese valor en el
elemento input.

. . . El nuevo atnbuto autoeomplete y H e le - | +


r t fileWY:/ejmplo*/cp03-'fg03.17/ulo<omplete.html

R J - Googit

f i n

D-

D em o de autoconiplete y datalist
Este fonnulano demuestra d nuc\*o atributo autocompletc de HTML y el demento datalist
Primer nombre Jane
Apellido Blue
Exnad jane@dom*nio com

lo s valores de
data M s t filtrados
segn lo que se ha
escnto hasta ese
momento

(Pnmer nombre)
(Apefcdo)
nombre c idonuroo com)

Mes de nacimiento. J

Figura 3 .1 7 | El nuevo atributo autocomplete y el elemento d a t a lis t del formulario de HTML5 (parte 3 de 3).

3 .3 .2

Elem ento d a t a l i s t

El elem en to da t a l i s t (lneas 32 a 47) provee opciones de entrada para un elem ento in p u t te x t . Al m om ento de
escribir este libro, el soporte de d a ta l i s t vara segn el navegador. En este ejemplo usamos un elem ento d a ta l i s t para obtener el mes de nacim iento del usuario. Si usamos O pera, cuando el usuario hace clic en el cam po de
texto aparece una lista desplegable de los meses del ao. Si el usuario escribe M" en el cam po de texto, la lista
de los meses se reduce a Marzo y Mayo. Al usar Firefox, b lista desplegable de meses aparece slo hasta despus de
que el usuario empiece a escribir en el cam po de texto. Si d usuario escribe M, aparecern todos los meses que
contengan la letra ttM" o m" en b lista desplegable: M arzo, M ayo, Septiem bre, N oviem bre y D iciem bre.

3.4

Elementos de estructura de pgina

H T M L 5 introduce varios elementos nuevos de estructura de pgina (figura 3.18) que identifican de manera im
portante ciertas reas de b pgina com o encabezados, pies, artculos, reas de navegacin, apartado, figuras y ms.

<!DOCTYPE htil>
<1 Fig. 3.18: elem entossectlon.htm l -->
<! Nuevos elementos se c to n de HTML5. >
<html>
<head>

<meta c h a rse t " u tf-8 " >


<title>Nuevos elementos se c tio n de HTML5</t1tle>
</head>
Figura 3 .I 8

| Nuevos elementos de seccin de HTML 5 (parte l de 6).

3.4

10
11
12
13
14

Elementos de estructura de pgina

<body>
<header> < ! - - e l elemento header crea un encabezado para l a pgina >
<1mg s r c - " lo g o d e ite l .pog" a l t - "Logo de O e lte l" />
<hl>Bienvenido a D eitel 8uzz 0nl1ne<hl>

16
17

< ! e l elemento time I n s e r t a una


<t1ne> 2012-01-17 </t1i

fecha y/o una hora

-->

</header>
<sect1on 1d = "1"> < ! - - Comienza l a seccin 1 -->
<nav> < ! - - vnculos de navegacin de grupos del elemento nav >
<h2> Publicaciones recientes</h2>
<ul>
<H><a h r e f o http://wMw.deite1.com/books/lMBhtpS">
I n t e r n e t & World Wide Web How to Program, 5 / e < / a x / l 1 >
<11><a h r e f = http://wMw.de1te1.com/books/andro1dfp/">
Android f o r Programmers: An App-Driven Approach</a>
</l1>
<!1><a h r e f = http://wMw.de1tel.com/books/1phonefp">
iPhone fo r Programmers: An App-Driven Approach</ax/l1>
<H><a h r e f = "http://w w w .de1tel.com /books/jhtp9/">
lava How t o Program, 9/e</a></!1>
<11><a h r e f http://wMw.de1tel.com/books/cpphtp8/">
C++ How to Program, 8 / e < / a x / l 1 >
<11 >

<a h r e f "http://www.de1tel.com/books/vcsharp20l0htp">
Visual C# 2010 How to Program, 4 / e < / a x / l 1 >
<11 x a h r e f = http://www.deitel.com/books/vb2010htp">
Visual Basic 2010 How to Program </ax/l1>
</ul>
</nav>

</sect1on>
<sect1on 1d "2"> < ! - - Comienza l a seccin 2 -->
<h2>Libros de l a s e r i e CAoacute;mo programar</h2>
<h3xem>Java How to Program, 9/e</e*></h3>
<f1gure> < ! - - el elemento fig u re describe l a imagen -->
<1ng s r c = " J h t p .j p g a l t = "lava How to Program. 9/e" />
< ! - - e l elemento fig u re c a p tio n i n s e r t a una leyenda de f ig u r a >
<f1gcapt1on>Cubierta de <em>Java How to Program, 9/e</em>
.</f1gcapt1on>
< /figure

1
2

< Ie l elemento a r t i c l e re p re se n ta e l contenido de o t r a fuente -->


< art1cle>
<header
<hS>De
<em>
<a h r e f = "http://wwM.de1te1.com/books/jhtp9/">

Figura 3 .1 8 | Nuevos elementos de seccin de HTML 5 (parte 2 de 6)

91

92

63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

Capitulo 3

Introduccin a HTM LS: parte 2

Java How t o program, 9/e: </a>

</tn>
</hS>
</header>
<p>CaracterAiacute;sticas:
<ul>
<li>Extensa c o b e rtu ra de lo s fundamentos:
<1 e l elemento mark r e s a l t a te x to -->
<*ark>dos capA iacute;tulos sobre in s tr u c c io n e s de control .< / m a rk x / li>
<li>Enfoque en <*ark>ejemplos del mundo re al .< / ia rk x /l 1>
<lixmark>Conjunto de e j e r c i c i o s Hacer l a d i f e r e n c i a . < / m a r k x / l i >
<H>IntroducciAoacute;n desde los primeros capA iacute;tulos a la s c la s e s .
o b je to s , mAeacute;todos y cadenas.< /li>
<li>Manejo de excepciones in te g r a d o .< /li>
<1 i>Archivos, f l u j o s y serial1zaciA oacu te;n de o b j e t o s . < / l i >
<li>Secciones modulares opcionales sobre el lenguaje y
caracterAiacute;sticas de la biblioteca de la nueva versiAoacute;n Java SE 7.</li>
<1 i> 0 tro s temas: Recursividad, bAuacute;squeda, ordenamiento,
colecciones genAeacute;ricas, genAeacute;ricos, e s t r u c t u r a s
de d a to s, a p p le ts , multimedia,
m u lti h ilo s , bases de datos/JDBCAtrade;, d e s a r r o l lo de
a p lic a c io n e s Web, s e r v i c i o s Web y un caso de e stu d io
opcional de DiseAntilde;o o rie n tad o a o b je to s con un ATM.</li>
</ul>

88

89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
NO
111
112
113
114
115

< ! - - el elemento summary r e p re s e n ta un resumen para el >


<1 contenido del elemento d e t a i l s >
< details>
<summary>Testimonios de l a r e c ie n te ediciAoacute;n</summary>
<ul>
<H>"Se actual i zAoa cute; para r e f l e j a r l o Auacute; ltimo
en tecnologA iacute;as de Java; sus c la r a s
y d e ta lla d a s ex plicacio nes lo hacen
in d isp e n sa b le . Los e j e r c i c i o s de conciencia so cial
[Hacer l a d i f e r e n c i a ] son algo
verdaderamente nuevo y refrescante.**
<strong>Amdash;JosAeacute; Antonio
GonzAaacute;lez Seco, Parlamento de
A nda1ucA iacute;a< /strongx/li>
<1i>"Otorga a lo s nuevos programadores e l b e n e fic io de la
sabidurA iacute;a derivada de muchos aA ntilde;os de e x p e rie n c ia en
el d e s a r r o l l o de s o f tw a r e .<strong>
mdash;Edward F. Cehringer, North Carolina
S ta te U n iv e r s 1 ty < / s tr o o g x / li>
<11>Introduce l a s buenas prA aacute;eticas y metodologAiacute;as
de d ise A n tild e ;o , j u s t o desde el p rin c ip io .
Un excelen te punto de p a r t id a para d e s a r r o l l a r
a p lic a c io n e s Java robustas de a l t a c a lid a d ."
<strong>Amdash;Simn R i t t e r ,
Oracle C o r p o r a tio n < / s tr o n g x / li>
<li>"Un e s t i l o conversacional fA aacute;cil de l e e r .
Los ejemplos de cAoacute;digo c la ro s impulsan a los le c to r e s

Figura 3 .1 8 | Nuevos elementos de seccin de HTML 5 (parte 3 de 6).

3.4

116
117
118
119
120
121
122
123
124
123
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
143
146
147
148
149
150
151
152
133
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

Elementos de estructura de pgina

93

a volverse expertos en Java."


<strong>&mdash;Patty K ra ft, San Diego S tate
U niversity</strong> </li>
< l i > Un ex celente l i b r o de te x to con una i n f in i d a d de ejemplos
de diverso s dominios de apiicacionesAmdash;
excelente para un curso o r d in a r io de CS1 o CS2."
<strong>Amdash;William E. Duncan, Louisiana
S ta te U niversity</strong> </li>
</ul>
</d e ta lls >
</p>
</art1cle>
< ! el elemento a s id e r e p re s e n ta e l contenido en una barra l a t e r a l que -->
< l- - e s t relacionado con el contenido a lred e d o r del elemento -->
<as1de>
Los navegadores no a p lic a n formato al elemento aside.
</as1de>
<h2>Libros de la s e r i e D e ite l Developer</h2>
<h3><em>Android f o r Programmers: An App-Driven Approach
</em></h3>
Haga c l i c <a h r e f " h ttp ://**. deitel.com /books/androidfp/"
aqu&iacute;</a> para obtener m&aacute;s informaciAoacute;n sobre c4oacute;mo
pedir e ste lib r o .
<h2>Videos LiveLessons</H2>
<h3><em>C# 2010 Fundamentis LiveLessons</emx/H3>
Haga c l i c <a h r e f "http://**.deitel.com /Books/LiveLessons/">
aqu&iacute;</a>para o btener m&aacute;s informaci&oacute:n sobre nu estro s v i
deos LiveLessons.
</section>
<section id = 3 " > < ! - - Comienza l a seccin 3 >
<h2>Resultados de n u e s tra encuesta en Facebook</h2>
<p>S1 usted fuera un novato que deseara aprender lava por primera
vez, & iq u e s t; p r e f e r ir & ia c u te ; a un c u rso que e n se & n tild e ;a ra Java
en e l contexto del d e s a r r o llo de a p lic a c io n e s Android? Estos son lo s resu ltad o s
de n u e stra encuesta:</p>
<I el elemento meter re p re s e n ta una e sc a la dentro de un rango -->
0 <meter min =0"
max = "54"
valu " 1 4 - x / e t e r > 54
<p>De lo s 54 p a r t i c i p a n t e s , 14 (v e r d e ) p re fe rr& ia c u te ;a n
aprender Java en el contexto del d e s a r r o llo de a p lic a c io n e s Android.</p>
</section>
<1 e l elemento f o o te r re p rese n ta un pie de una seccin o pgina, -->
< 1 por lo general contiene informacin como e l nombre del a u to r , -->
<1 c o p y rig h t, e tc . >
<footer>
<1 el elemento wbr in d ic a e l lu g a r apropiado en dnde se p a ra r >
< I una palabra cuando el te x to se a j u s t e -->
<H6>&copy; 1992-2012 por D eitel &amp; Associ<wbr>ates, Inc.

Figura 3 .1 8 | Nuevos elementos de seccin de HTML 5 (parte 4 de 6).

94

69
70
71
72

73
74
73
76
77
78

Captulo 3

Introduccin a HTML5: parte 2

Todos los derechos reservados.<h6>


<1 el elemento address re p re s e n ta l a informacin de contacto para un >
< 1-- documento, o para el elemento body o a r t i c l e ms cercano >
<address>

Escriba a <a href m a i lto : d e ite l0 d e 1 te l.c o m >


deitel deitel.com </a>
</address>
</footer>
</body>
</html>

a) El navegador
Girm e muestra el

N u f v o f i a m m o t t ctic

elemento header
yu n elemento av
(pe contiene una
ista desordenada de
vnculos.

C
L

fiiey//Yyejemplos/cap03/fg03.18/eiementosSection.ntml

M igeridM

(J

A t b S lK t Gr >

f*~)

t& to o d l m m -

e it e l

E:

B i e n v e n i d o a D e ite l B u z z O n l i n e
2012-01-17
P u b lic a c io n e s r e c i e n t e s
InlrmrT
(U H \VwV- U V I' Ho U.

<r

An A p p .rW ^ Apfnoarfi

A " App-Driven Approech

J f i H o t iv P i o a r a . 9 c

Cr: He lflPippam h c
Vm m t C >010 How te t W * e
Venal Basic 2010 How to Pi p c t b

^ El navegador Chrome
muestra el comien/o de

____________
' H u e v o s H * -n * " tc n i* < t

ir a seccin (se ctio n )


cjje contiene un elemento
fig u re y un elemento

C
t

csbi^b
\

J : filey//Y;/ejemplos/cap03/fig03.18/elementosSection.html

03su^endos

W eb S*<c G tllc y

? =

C U W ip o n r o t fcrtern..

flg u recap tlo n .

L i b r o s d e la s e r i e C m o p r o g r a m a r

Java How to Program, 9/t

Cubierta de J a \ a H oh to Program . 9 *

Figura 3 .1 8 | Nuevos elementos de seccin de HTML 5 (parte 5 de 6)

[j|

3.4

c) El navegador Chrome
nuestra un elemento

r ;v, Nuevtt

a rtic le q o e contiene un

Elementos de estructura de pgina

95

c* sao* V
C f*ey//Yye*mpos/cap03/fg03J 8ye<emeni<>iSci>oaMml

elemento header. cierto

]) tfc KCHfy Cj

* Wfm.

contengo y un elemento
d e ta ll* contrado,
segudo de un elemento

Pe

9t

C n u n tfk a i

a s id *

Externa cobertsea de b fundamenten dos capeaos sobre OTuicienr de control


Erfoque ttx tyaapk* dd cnado 11 A
Cccrxc* de erxcKK-t H acrr la drrm :ui

lnbod*:ck>o desde bs prono* cjprJos a las clases, objetos, mtodos v cadenas


Manejo de ncqjcioon rtrpado
Ardaos, flujo y serakr*.*.'de cuetos
Srccmrt tmxbars epoemiet sobre H Imfuajr y cjiaclrmfe:a% dr la tubbcrtrca dr la
nueva vetsioa Jasa SE ?.
Otros temas RecxauMdad bsqueda otdmanareto. cotecocats fenencas (romeos,
o trucna as dr dalos pptrt nrufanedd tnufcfctcv baso dr dalos JDBC. d o nodo
df jpkacscmes Web. servicios Web y un caso de r;nxSo opcional de Dtseto <n#m*do
a objetos con un ATM

Tramemos de la ccoente etkioo


Los navrfadove* no apbcao formato al elrtrmto aiadr
d) El navegador Chrome
nuestra el final de la
seccin (*e ctlo n )q u e

...............

Hueveaetf'nr*Mc^setU *
C

empez en la parte (b ).

J: file///yy<jemi>k>s/cao03/ttg03.18/eiemntosSeaK)nntml

J*

Ll Sacs 1^ 9 Oo [2 rt*t>SUtGa*a> C j bpenad * biart^*

L ib ro s de la se rie D eitel D eveloper


A n d ro id fo r Program m ers: A n App-D riven Approach
Ha*a cIk

para obceca mas nfonnacxti sobre com o p ed a este tbio.

V ideos I.iseL esso n s

C'B 2010 Fundamentis Li\eLe\son\


H ara c k

e) El navegador Chrome
nuestra la ltima seccin

----------------------------------------------i r r t n a
i 2 S.#vowUoic'Ho tac*.

(se ctlo n )q u e contiene


m em ento e te r.
segudo de un elemento
fo o tar.

para obtener m as m fo n n a o sobre nuestros videos LfveLessons

t.ie///Y,yjf<mpkw/CAcO3/Tig03.18/ebmenTosSeci>oa.himi

J SrtMH s3 r*0 i

Wt>

G***) C3 Imperado mW nm
#4

R esultados de n u e stra en cu esta en F aceb o o k


Si usted fuera un novato que deseara apreeder lav a por p r o n a vex, kpfferwia un n a s o que
ensex a Jasa en d ccCexlo d d desan clo de apbcaacoes A d A cv ' Estos son ks resufcados
d e a s e s ta e n c trs u
O li i

54

De b s 54 p aracp aatri. 14 (verde) prefntm c ajxeodn t o t en el contexto del desanoSe de


a p k o a o o n Android

t 19955915porfttitl AAiwctMn. lac To4mSoItmlM>>cna4

Figura 3 .1 8 | Nuevos elementos de seccin de HTML 5 (parte 6 de 6).

96

3.4.1

Capitulo 3

Introduccin a HTML5: parte 2

Elemento header

El elem en to head er (lneas 12 a 19) crea un encabezado para esta pgina que contiene tanto texto com o
grficos. EJ elem ento head er puede usarse varias veces en una pgina y puede incluir encabezados d e H T M L
(<hl> a <h6>), navegacin, imgenes, logotipos y ms. Para ver un ejemplo, revise la parte superior d e la pgina
principal de su peridico favorito.

E l elemento tim e
E l d e m e n to tim e (lnea 17), que n o necesita ir encerrado en un h e a d e r. nos perm ite identificar una fecha
(como en el ejem plo que m ostram os), una hora o ambas.

3.4.2

Elemento nav

El d e m e n to nav (lneas 22 a 42) agrupa vnculos de navegacin. En este ejem plo usam os el encabezado
P u b lic a c io n e s r e c i e n t e s y creamos un elem ento ul con siete elem entos l i que vinculan a b s pginas Web
correspondientes para cada libro.

3.4.3

Elemento figure y elemento figeaption

El d e m e n to f ig u r e (lneas 49 a 55) describe una figura (com o una imagen, grfico o tabla) en d docum ento,
de m odo que pueda moverse a la parte lateral de la pgina o a o tra pgina. El elem ento f igu re no incluye estilos,
pero podem os aplicarlos m ediante CSS. EJ d e m e n to f ig e a p tio n (lneas 53 y 54) proporciona una leyenda
para La imagen en d elem ento f ig u r e .

3.4.4

Elemento a r t ic le

El elem ento a r t i c l e (lneas 58 a 127) describe contenido independiente que podra usarse o distribuirse en
o tra parte, com o un artculo de noticias, mensaje en un foro o entrada en un blog. Es posible anidar elem entos
a r t i c l e . Por ejem plo, podra ten er co m en tario s d e los lectores sobre una revista an id ad o s c o m o u n ele
m en to a r t i c l e dentro del dem en to a r t i c l e de la revista.

3.4.5

Elemento suramary y elemento d eta ll s

El d e m e n to sunmary (lnea 92) m uestra una flecha que ap u n ta a la derecha enseguida de un resumen o leyenda
cuando el docum ento se despliega en un navegador (figura 3.19). Al hacer clic en la flecha, ap u n ta hacia abajo
y revela el contenido d d d e m e n to d e t a l l s (Eneas 91 a 125).

3.4.6

Elemento sectlon

El d e m e n to s e c tlo n describe una seccin de un docum ento, por lo general con un encabezado para cada sec
cin; estos elem entos pueden anidarse. Por ejem plo, podra tener un d e m e n to s e c tio n para u n libro y luego
elem entos s e c tio n anidados para el nom bre de cada captulo del libro. En este ejemplo, dividim os el docu
m ento en tres elem entos s e c tio n : el prim ero es P u b licacio n es recien tes (lneas 21 a 43). El elem ento s e c tlo n
tam bin puede anidarse en un artculo ( a r t i c l e ) .

3.4.7

Elemento asi de

El d e m e n to a s ld e (Eneas 131 a 133) describe contenido relacionado con el contenido circundante (com o un
elem ento a r t i c l e ) , pero en cierto m odo est separado d d flujo d d texto. Por ejem plo, un d e m e n to a s id e en
una historia de noticias podra in d u ir cierto historial de fondo. U n anuncio im preso podra in d u ir un elem ento
a s id e con testim onios de productos de los usuarios.

3.4

Elementos de estructura de pgina

97

Nv
C

ir7//tVc(err p'OV'apOVT-jD3.18. r e'rcntc-^ct on hrrl

IfikuwitdeUiKiaftr^a

WWW"111 '
C

t'lr//

_) U+< tfm + c *

-__________ _________________________
p o v 'ta p O

*) * + c CMry Q 1

1a /e em *m c*S ctoa Mrr'

* W*-.
*

V 7 ri u M M n irU i-:i-tfP ^ a
V *.?jfeo ;. < rriW y lo iA m tca* to ru d r :* . m d t * tfcfftaSn
e ^ a n o a r i te lacea D d h p w u H t t * e ja o n o f o a t K * t o r a l [Hace b
(Sfctrarrt) K * lo >TT:Uinr*rr#? t a r t u 9 tdSrw r rf r * J e t * 4 h o m (.. hj I/

^k* PubNi* 4+^Biihru

' O t t p A fc* itjrsc-i j c p i c * l t f d


e b i4 t & a u d rm x i i Ar a a * h o t
elo de ip m n v i f e d drsw eS A d e e d h n r ' - f 4 i d F G b n if r . N o c d

iulwstau I ah*>

'Im c-fere U i toeca: jr*c tv : v m tro o k o as 4 * d e r t w o d r td r d f n v ' f U


c tro te p w u d r pm bda pA m i c b p fc^io o cs
lobm uti de d u cdiAfcl *

- S w o R ittf. O r u l e ( pontiM

T*rlfc><ocMS%*.MK*aldirlrfT U r>ra**>dr ;odocmcntnptm fc>*


I r d o m a v o fc fi e \p ftts n en > i * - f j m K raft. S a i D r f e S i i i f l a n m m
T r% d e it? lfc 'o < S rfrU o c o e w u e 6 (W 4 d e rre rfc * d e < fc v m o t4 o a w 4 r

ffeaocon nrAme p a i o a * o o n * drCSUC$2 *V i a F.


Du c i i . L im h im V al* t atwrttf>

Figura 3 .1 9 | Demostracin de los elementos summar y y d e ta ll.

3 .4 .8

Elemento m e te r

EJ dem ento meter (lneas 155 a 157) despliega una representacin visual de una medida dentro de un rango (fi
gura 3-20). E n este ejemplo mostramos los resultados de una encuesta reciente que hicimos. El atributo min es "0
y un atributo max es "54"; esto indica el nm ero total de respuestas a nuestra encuesta. El atributo v a lu es "14" y
representa el nm ero total de personas que respondieron us f a la pregunta de nuestra encuesta.

Nuevw elemento* *te *

2 filey//Y7ejemplo5/Cdp03/f*903.18/element<>sSectionhtmJ

$*** H*9*dci

Acto $ * e OAiiery C3 Impodtdc de Wem..

R esultados de n u e stra encuesta en F acebook


usted fuera un novato que deseara aprender Java por primera vez cpieeriria un cuiso que
enseriara Java en el contexto del desarrollo de apS: anones Andrced' Estos son los i espirados
de nuestra encuesta
Si

0|-t----

54

De los 54 participantes. 14 (verde) prciernan aprender Java en el contexto del desabollo de


ap beaciones Android

Figura 3 .2 0 | El navegado* Chrome desplega el elemento meter.

98

Capitulo 3

3.4.9

Introduccin a HTML5: parte 2

Elemento footer

1 e lem en to f o o t e r (lneas 165 a 176) describe u n pie. contenido que por lo general aparece en la parte inferior
del contenido o elem ento s e c tio n . En este ejem plo usamos el elem ento f o o te r para describir el aviso de co
pyright y la inform acin de contacto. Podem os usar CSS3 para aplicar estilo al elem ento f o o te r y posicionarlo
en la pgina.

3.4.10

Semntica a nivel de texto: elemento mark y elemento wbr

1 elem en to mark (lneas 72 a 74) resalta el texto encerrado en el elem ento. 1 d e m e n to wbr (lnea 168) indica
el lugar apropiado para dividir una palabra cuando el texto se ajusta en varias lneas. Podram os usar wbr para
evitar que una palabra se divida en un lugar inapropiado.

Resumen
Seccin 3 .2

Nuevos tipos In p u t deform ularios de H TM L5

HTML5 introduce varios nuevos tipos i nput y atributos para formularios. stos no son soportados de manera universal
por todos los navegadores todava.
H navegador Opera ofrece un soporte robusto de los nuevos tipos Input.
Proporcionamos resultados de ejemplo de una variedad de navegadores, para que usted pueda ver ladiferencia dd com
portamiento de los tipos i nput en cada uno.

Seccin 3.2.1

In p u t tipos co l or

El tipo input color (pg. 80) permite al usuario introducir un color.


la mayora de los navegadores despliegan el tipo input color como un campo de texto endonde d usuario puede
introducir un cdigo hexadecimal.
En el futuro, cuando d usuario haga clic sobre un tipo input color, es probable que los navegadores muestren un cuadro
de dilogo en donde el usuario podr elegir un color.
El atributo autofocus (pg. 80), que puede usarse slo en un demento i nput de un formulario, coloca d cursor en d
campo de texto despus de que se carga d navegador y despliega la pgina. No necesitamos incluir d elemento autofo
cus en nuestros formularios.
Los nuevos tipos input de HTM1.5 tienen validacin automtica dd lado dd cliente, con lo cual se dimina la necesi
dad de agregar cdigo de JavaScript para validar la enrrada dd usuario y reducir la cantidad de daros incorrectos que se
envan.
Cuando un usuario introduce datos en un formulario y luego lo enva, el navegador verifica de inmediato si los datos
son correctos.
Si desea anular la validacin, puede agregar d atributo formnoval idate (pg. 82) al tipo i nput submit.
Mediante el uso de JavaScript es posible personalizar d proceso de validacin.

Seccin 3.2,2

1nput tipo d a te

El tipo input d a t e (pg. 82) permite al usuario introducir una fecha en d formato aaaa-mn-dd.
Firefox e Internet Explorer muestran un campo de texto en donde d usuario puede introducir una fecha, como
2 0 1 2 -0 1 -2 7 .

Chromc y Safari muestran un control spinner (pg. 82): un campo de texto con una flecha arriba-abajo
( q ) dd lado derecho: esto permite al usuario seleccionar una fecha, haciendo clic en las flechas hacia arriba o hacia
abajo.
Opera muestra un calendario.

Resumen

Seccin 3-2.3

99

Input tipo da te tim e

1 tipo Input datetime (pg. 82) permite al usuario introducir una fecha (ao, mes, da), tiempo (hora, minuto, se
gundo, fraccin de segundo) y zona horaria establecida en el U TC (Tiempo universal coordinado o Tiempo universal,
coordinado).

Seccin 3.2.4

Input tipo d a te tlm e -lo c a l

El tipo input datetlme-local (pg. 82) permite al usuario introducir b fecha y hora en un n o control.
La fecha se introduce como ao, mes, da. hora, minuto, segundo y fraccin de segundo.

Seccin 3.2.5

Input tipo ema 11

El tipo Input anal 1 (pg. 83) permite al usuario introducir una direccin de corteo electrnico o una lista de direcciones
separadas por comas.
Si el usuario introduce una direccin de correo invlida (es decir, si d texto introducido no tiene el formato correcto)
y hace clic en ci botn Enviar, se despliega una anotacin que pide al usuario que introduzca una direccin de correo
electrnico y apunta a ese elemento Input.
HTM L 5 no valida si en realidad existe una direccin de correo electrnico introducida por el usuario; tan slo valida
que la direccin est en d formato cometo.
El atributo placeholder (pg. 83) le permite colocar texto temporal en un campo de texto. Por lo general, d texto de
un placeholder es de color gris claro y proporciona un ejemplo dd texto y d formato de texto que el usuario debe in
troducir. Cuando se coloca d enfoque en d campo de texto (es decir, que d cursor se encuentre en d campo de texto),
desapareced texto dd placeholder: no se enva" cuandod usuario hacecliccn cl botn F.nviar (a menos quecl usuario
escriba el mismo texto).
Es conveniente agregar texto descriptivo a la derecha de cada demento Input en caro de que d navegador dd usuario
no soporte el texto de placeholder.
E l atributo required (pg. 84) obliga al usuario a introducir un valor antes de enviar el formulario.
Puede agregar d atributo required a cualquiera de los tipos 1nput. Si el usuario no completa un elemento requerido,
aparecer una anotacin sealando esc elemento vacio y pedir al usuario que introduzca la informacin.

Seccin 3*2.6

Input tipo month

El tipo Input nonth (pg. 84) permite al usuario introducir un ao y mes en cl formato aaaa-mn, como 2012-01.
Si d usuario introduce un mes en un formato incorrecto y hace clic en d botn Enviar, aparecer una anotacin para
indicar que se introdujo un valor incorrecto.

Seccin 3*2.7

Input tipo number

El tipo Input number (pg. 84) permite al usuario introducir un valor numrico.
El arributo rin establece d nmero mnimo vlido, en este caso O*.
E l atributo max establece d nmero mximo vlido, que se estableci en a7~.
El atributo step determina d incremento que se aplicar a los nmeros. Por ejemplo, si establecemos step en"2", cl
nmero en d control spinner aumentar o disminuir por dos cada vez que se haga clic en la flechahada arriba o hacia
abajo de ese control, respectivamente.
El atributo valu establece d valor inicial que se muestra en cl formulario.
El control spinner incluye slo los nmeros vlidos. Si d usuario intenta introducir un valor incorrecto al escribirlo
en d campo de texto, aparecer una anotacin que sealar cl demento Input number e instruir al usuario para que
introduzca un valor vlido.

100

Capitulo 3

Seccin 3-2.8

Introduccin a HTML5: parte 2

In p u t tipo range

Hl tipo Input range (pg. 85) aparece como control deslizante en Chrome. Safari y Opera.

Podemos establecer el mnimo y mximo, adems de especificar un valor.


El control deslizante aparece en el valor dentro dd rango cuando se despliega el documento de HTML5.
1 tipo input range se valida automticamente de manera intrnseca cuando d navegador lo despliega como control
deslizante, ya que el usuario no puede mover d control deslizante fuera de los limites dd valor mnimo o mximo.

Seccin 3 .2 .9

In p u t tipo search

1 tipo input search (pg. 85) proporciona un campo de bsqueda para introducir una consulta y es equivalente en
fundn a un elemento input de tipo text.
Cuando d usuario empieza a escribir en d campo de bsqueda, Chrome y Safari muestran una Xen b que se puede
hacer clic para borrar d campo.

Seccin 3.2.10

In p u t tipo te l

1 tipo input te l (pg. 86) permite al usuario inrroducir un nmero telefnico.


Al momento de escribir este libro, d tipo input t e l se despliega como un campo de tocto en todos los navegadores.
La longitud y d formato de los nmeros tdefnicos vara de manera considerable con base en la ubicacin, debido a
lo cual b validacin es un proceso bastante complejo. HTML5 no tiene validacin automtica pata d tipo input te l.
Ra asegurar que d usuario introduzca un nmero rdefnico en un formato apropbdo, puede usar d atributo pattern.
Cuando d usuario introduce un nmero rdefnico en d formato incorrecto, aparece una anotacin que solicita d for
mato correcto y apunta al elemento input te l.

Seccin 3.2.11

in p u t tipo t i me

El tipo input ti e (pg. 86) permite al usuario introducir una hora, minuto, segundo y fraccin de segundo.

Seccin 3.2.12

in p u t tipo u rl

El tipo input u rl (pg. 87) permite al usuario introducir un URL. El demento se despliega como un campo de texto.
Si el usuario introduce un URL con un formato incorrecto, d URL no se validar. HTML5 no verifica si el URL in
troducido existe en realidad.

Seccin 3.2.13

In p u t tipo week

El tipo input week (pg. 87) permite al usuario sdcccionar un ao y nmero de semana en el formato aaaa-Wnn.
Opera despliega un conrrol de semana con una flecha hacia abajo que al presionarse hace que aparezca un control de
calendario.

Seccin 3.3.1

A tributo autocompl e te del elemento i npu t

El atributo autocomplete (pg. 87) puede usarse en tipos input para llenar de manera automtica la informacin d d
usuario con base en b entrada anterior.
Rodemos habilitar d atributo autocomplete para todo un formulario o slo para ciertos elementos especficos.

Seccin3 .3 .2

Elemento d a ta lis t

El demento d a ta li s t (pg. 90) provee opciones de entrada para un elemento input tex t. El navegador puede usar estas
opciones para mostrar opciones autocomplete al usuario.

Seccin 3 .4

Elementos de estructura de pgina

HTML5 introduce varios elementos de estructura de pgina nuevos.

Resumen

Seccin 3.4.1

101

Elemento header

1 elemento header (pg. 96) crea un encabezado para la pgina que contiene texto, grficos o ambas cosas.
1 elemento header puede usarse varias veces en una pgina y con frecuencia incluye encabezados de HTML.

1 elem ento tim e (pg. 9 6 ) n o s perm ite identificar u n a fecha, u n a hora o am bas.

Seccin 3 .4 .2

Elemento nav

El elemento nav (pg. 96) agrupa vnculos de navegacin.

Seccin 3.4.3

Elemento fig u r e y elemento flg c a p tlo n

E l elemento figure (pg. 96) describe una imagen en el documento, de modo que pueda moverse a la parte lateral de
h pgina o a otra pgina.

E l d e m e n to f lg c a p tlo n (pg. 96) proporciona u n a leyenda para la im agen en d d e m e n to f ig u r e .

Seccin 3 .4 .4

Elemento a rt1 e le

El d e m e n to a r t i c l e (pg. 96) describe c o n te n id o in d e p en d ien te del c o n te n id o principal d e la pgina y podra usarse


o distribuirse en o tra parre, c o m o u n a rtc u lo de noticias, m ensaje en u n foro o e n rra d a e n u n blog.

Es posible anidar elementos arti ce.

Seccin 3 .4 .5

Elemento sunaa r y y elemento d eta 11 s

E l elem ento s u m a ry (pg. 96) m uestra u n a flecha q u e a p u n ta a b derecha enseguida d e un resum en o leyenda cu an d o d
d o cu m en to se despliega en un navegador. Al h acer clic en la flecha, a p u n ta hacia abajo y revda d co n ten id o d d d e m e n to
d e t a l l s (pg. 96).

Seccin 3 .4 .6

Elemento s e c tlo n

El elemento section (pg. 96) describe una seccin de un documento, por lo general con un encabezado para cada
seccin.

Es posible a n id a r elem entos s e c t ion.

Seccin 3 .4 .7

Elemento a sid e

E l d e m e n to a s id e (pg. 96) describe c o n te n id o rd acio n ad o co n d co n ten id o circ u n d an te (com o un elem ento a r t i c l e ) ,


pero en cierto m o d o est separado d d flujo del texto.

Es posible anidar elementos nav dentro de un elemento aside.

Seccin 3 .4 .8

Elemento me te r

El elem ento m eter (pg. 97) despliega u n a representacin visual de u n a m edida d e n tro de un rango. Los a trib u to s tiles
d e m eter son n in , max y v a lu .

Seccin 3 .4 .9

Elemento fo o te r

El demento footer (pg. 98) describe un pie. contenido que por lo general aparece en la parte inferior dd contenido o
elemento sectlon.
Podemos usar CSS3 para aplicar estilo al elemento footer y posicionarlo en la pgina.

Seccin 3.4.10

Semntica a nivel de texto: elemento marky elemento wbr

E l d e m e n to nark (pg. 9 8 ) n o s perm ite resaltar texto.


El dem ento Hbr (pg. 9 8 ) indica el lugar apropiado para dividir u n a palabra cu an d o el texto se ajusta en varias lneas.
P odram os usar wbr para evitar q u e u n a palabra se divida en un lugar inapropiado.

102

Captulo 3

Introduccin a HTML5: parte 2

Ejercicios de autoevaluacin
3.1

Complete las siguientes oraciones:


a) FJ tipo in p u t c o lo r permite al usuario introducir un color. Al momento de escribir este libro, la mayora de los
navegadores despliegan d tipo input c o lo r como un campo de rexto en donde d usuario puede introducir un
b) El atributo___________ nos permite colocar texto temporal en un campo de ta to .
c) Si desea anular la validacin, puede agrcgird atributo fbrm novalidate al tipo i n p u t __________ .
d) El atributo__________ obliga al usuario a introducir un valor antes de enviar d formulario.
c) Pbr lo general se muestra d control___________ para d tipo in p u t number c incluye slo los nmeros vlidos.
0 EJ tipo in p u t__________ permite al usuario introducir una hora, minuto, segundo y fraccin de segundo.
g) El d em en to __________ proporciona opciones de entrada para un demento in p u t te x t.
h) 1 dem ento__________ describe contenido que est separado dd contenido principal de la pgina y que posi
blemente podra utilizarse o distribuirse en otra parte, como un artculo de noticias, mensaje de foro o entrada de
blog.
i) El dem ento ________ describe d t a t o que por lo general aparece en la parte inferior d d contenido o de un
elemento sectio n .
j) El elem ento__________ indica d lugar apropiada para dividir una palabra cuando d texto se ajusta en varias
lneas.

3.2

Indique si cada uno de los siguientes enunciados es verdadero o falso. Si es falso. aplique por qu.
a) Cualquier tipo Input particular de formulario de HTML5 debe desplegarse de manera idntica en todos los
navegadores compatibles con HTML5.
b) Cuando se coloca d enfoque en d campo de texto (es decir, si el cursor est en d campo de ta to ), se enva d ta to
del atributo p laceh o ld er al servidor.
c) No es necesario incluir el atributo autofocus en sus formularios.
d) Los nuevos tipos input de HTML5 tienen validacin automtica dd lado dd cliente, con lo cual se dimina la
necesidad de agregar secuencias de comandos (script) complicadas a sus formularios para validar la entrada d d
usuario y se reduce la cantidad de datos invlidos que se envan.
c) El tipo input range se valida automticamente de manera intrnseca cuando d navegador lo despliega como un
control deslizante, ya que d usuario no puede mover d control fuera de los lmites del valor mnimo o mximo.
0 HTML5 cuenta con validacin automtica para el tipo in p u t t e l .
g) Si el usuario introduce un URL con un formaro inapropiado en un tipo in p u t u r l , no se validar. HTML5 no
valida si d URL introducido a is te e n realidad.
h) El demento nav muestra un men dcsplcgable de hipervneulos.
i) El demento header puede usarse slo una vez en una pgina.
j) Los elementos nav pueden anidarse en un demento a s i de.
k) Podemos usar d demento brk para evitar dividir palabras en lugares incorrecto.

Respuestas a los ejercicios de autoevaluacin


3.1
3.2

a) cdigo hexadecimal. b) p laceholder. c) submit. d )re q u ire d . e )sp in n e r. f)tim e . g) d a t a l i s t . h) a r


ric ie . i) fo o ter. j)wbr.
a) Falso. El despliegue de los tipos input puede variar de un navegador a otro, b) Falso. Cuando se coloca d enfoque
en d campo de taco , d texto de pl acebo 1d er desaparece. No se enva cuando el usuario hace clic en d botn
Enviar (a menos que el usuario escriba d mismo ta to ), c) Verdadero, d) Verdadero, e) Verdadero. 0 Falso.
La longitud y el formato de los nmeros telefnicos vara de manera considerable con base en la ubicacin, por

Ejercicios

103

lo que la validacin se vudvc bastante compleja, as que HTML5 no cuenta con validacin automtica pata d
tipo input t e l. Para asegurar que el usuario introduzca d nmero en un formato apropiado, usamos d atributo
pattern. g) Verdadero, h) Falso. El elemento nav agrupa vnculos de navegacin, i) Falso. FJ elemento header
puede usarse varias veces en una pgina ya menudo incluye encabezados de HTM L (<hl> a <h6>). j) Verdadero,
k) Falso. Puede usar d elemento wbr para evitar dividir las palabras en lugares incorrectos.

Ejercicios
3.3

3.4

3.5

Complete las siguientes oraciones:


a) El atributo_____________ (que se utiliza en un solo elemento input en un formulario) resalta de manera autom
tica el elemento input y, si se usa de manera apropiada, coloca d cursor en d campo de texto despus de que d
navegador carga y despliega la pgina.
b) Los nuevos tipos input de HTML5 tienen______________dd lado dd cliente.
c) El tipo input____________ permite al usuario introducir un valor numrico.
d) El tipo inp ut____________ se valida automticamente de manera intrnseca cuando lo despliega d navegador
como un control deslizante, ya que el usuario no puede mover d control fuera de los lmites dd valor mnimo o
mximo.
c) El atributo_____________ puede usarse en los tipos input para completar de manera automtica b informacin
dd usuario con base en datos de entrada anteriores.
0 El demento_____________ proporciona una leyenda para b imagen en el demento figure.
g) El elemento summary muestra una flecha que apunta a b derecha enseguida de un resumen o leyenda cuando el
documento x despliega en un navegador. Al hacer clic en la flecha, sta apunta hacia abajo y revela el contenido
dd elemento_____________.
h) El elemento mark nos permite_____________ .
Indique si cada uno de los siguientes enunciados es v e r d a d a v ofalso. Si esfalso, explique por qu.
a) Los navegadores que despliegan d tipo i nput color como campo detexto requierenque d usuario introduzca d
nombre de un color.
b) Cuando un usuario introduce datos en un formubrio y luego lo enva (por lo general, al hacer clic en d botn
Enviar), d navegador verifica de inmediato que los daros sean correctos.
c) HTML5 puede validar si b direccin de correo electrnico introducida por el usuario existe en realidad.
d) Puede agregar requi red a cualquiera de los cipos input.
c) Puede habilitar autocowpl ete slo para ciertos elementos input.
0 El demento time nos permite identificar una fecha, hora o ambas.
g) El elemento caption proporciona una leyenda para b imagen en un demento figure.
h) FJ elemento detai 1s muestra una flecha que apunta a b derecha enseguida de un resumen o leyenda cuando el
documento se despliega en un navcgtdor. Al hacer clic en la flecha, &ta apunta hacia abajo y revela d contenido
del elemento summary.
i) FJ elemento footer describe d contenido que por lo general aparece en b parte inferior dd contenido o del
elemento section.
j) El elemento highlight nos permite resaltar tcxro.
Escriba un demento (o dementos) de HTML5 pana realizar cada una de bs siguientes tarcas:
a) Se pidi a los estudiantes que clasificaran los alimentos en b cafetera, en una escab dd 1 al 10.Use un demento
meter con texto a su izquierda y a su derecha para indicar que b calificacin promediofue 7 de 10.
b) Cree un elemento detai 15 que muestre el texto "Resultados de la encuesta*' en d demento summary para b
parte (a). Cuando d usuario haga clic en b flecha enseguida dd texto de suranary. deber aparecer un prrafo que
explique sobre la encuesta.
c) Cree un demento input text para d primer nombre. El demento deber recibir d enfoque de manera autom
tica al momento de desplegar d formubrio en un navegador.
d) Modifique b pane (c) de modo que se elimine d elemento label y use texto en un demento placehol der en d
demento input.

104

Capitulo 3

Introduccin a HTML5: parte 2

e) Use un demento data 1i s t para proveer una lista aitoconpl e te para cinco estados.
0 Cree un demento in p u t range que permita al usuario sdeccionar un nmero dd 1 al 100.
g) Especifique que no debe permitirse el atributo ajto co w p lete en un formubrio. Muestre slo b etiqueta de
apertura dd formubrio.
h) Use un demento mark para resaltar d segundo cnuncbdo d d siguiente prrafo:

<p>Se piditoacute; a los estudiantes que ca lifica ra n los alimentos en l a cafeter&iacute;a


En una escala del 1 al 10. El resultado promedio fue 7.</p>
3.6

(Formulario de registro Web con encuesta opcional). Cree un formulario de registro de un sitio Web para obtener
el primer nombre, apellido y direccin de correo electrnico do un usuario. Incluya adems una pregunta de encuesta
opcional que pida d ao en d que se encuentra d usuario en la universidad (por ejemplo, primer ao). Coloque b
pregunta de encuesta opcional en el demento d etai 1s que el usuario puede expandir pata ver b pregunta.

3.7

(Creacin de un formulario con autocomplote) Cree un formubrio de bsqueda simple; use un elemento input
search en donde d usuario pueda introducir una consulra de bsqueda. Use d navegador Web Fircfox para probar d
formubrio. Escriba Junio y enve el formubrio. Despus escriba una 3 en el demento in p u t para ver las entradas an
teriores que empiezan con 3; deber aparecer Junio debajo d d demento input. Escriba J u lio y enve el formubrio
de nuevo. Ahora escriba una J en d elemento in p u t para ver las entradas anteriores que empiezan con 3: debern
aparecer Junio y Ju l io debajo del elemento in p u t. Pruebe esto con sus propias consultas de bsqueda tambin.

3.8

(Creacin de unformulario autocoaplete con un elemento d a ta lis t) Cree un demento in p u t a u to c o rp le te


con un demento d atal i s t asoebdo que contenga los d b s de b semana.

3.9

(Disposicin de las pginas de nuestro libro en HTML 5: creacin de as secciones) Marque d texto dd prrafo
de b seccin 3.2.1 de este captulo como una pgina Web, usando elementos de estructura de pgina. El texto se
proporciona en b carpeta textoE Im agencsE jerciclo con los ejemplos de este captulo. No incluya las figuras en
este ejercicio.

3.10 (Disposicin de las pginas de nuestro Ubro en ITTMIS: agregarfiguras) Modifique su solucin al ejercicio 3.9
para agregar los grficos de b seccin como figuras. Las imgenes se proporcionan en b carpera textoEImagenesEje r c ic io c o n los ejemplos de este captulo.

3 .1 1 (Disposicin de las pginas de nuestro Ubro en HTML5: agregar un elemento datails) Modifique su solucin
al ejercicio 3.10 para agregar b tabb en b figura 3.5. Use b leyenda de b figura como d demento suiw ary y aplique
formato a b tabb como un demento ta b l e de HTML5 dentro d d elemento d e ta ils .

Introduccin a las hojas de estilo


en cascada (Cascading Style
Sheets, CSS): parte I

4
Las modas se desvanecen, el estilo
es eterno.
Y re * S a in t L a u r m t

Qu liberador es trabajar en os
mrgenes, fuera de una percepcin
central
D o n D c L iD o

Objetivos
En este captulo aprender a:
Controlar la apariencia de un
sitio Web con hojas de estilo.
Usar una hoja de estilo para
proporcionar a todas las
pginas de un sitio Web la
misma apariencia visual.
Usar el atributo el ass para
aplicar estilos.
Especificar la fuente, tamao
y color precisos, adems de
otras propiedades del texto a
visualizar.
Especificar los fondos y colores
de los elementos.
Comprender el modelo de cajas
y cmo controlar mrgenes,
bordes y relleno.
Usar hojas de estilo para
separar la presentacin del
contenido.

Captulo 4

Plan general

106

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

4.1 Introduccin

4 .9 Dimensiones de los elementos

4 .2 Estilos en linea

4.10 Modelo de cajas y flujo del texto

4 .3 Hojas de estilo incrustadas

4.11 Tipos y consultas de medios

4 .4 Estilos conflictuados

4.12 Mens desplegables

4 .5 Vinculacin de hojas de estilo extemas

4.13 (Opcional) Hojas de estilo de usuarios

4 .6 Posicionamiento de los elementos:


posicionamiento absoluto, z-index

4.14 Recursos Web

4 .7 Posicionamiento de los elementos:


posicionamiento relativo, span
4 .8 Fondos
Resumen \ Ejercios de autoevaluacin | Respuestas a los ejercicios de autoevaluacin | Ejercicios

4.1

Introduccin

En los captulos 2 y 3 presentam os cl H T M L 5 para m arcar la inform acin a desplegar en un navegador. En este
captulo y en el siguiente n o s enfocarem os en el form ato y la presentacin de la inform acin. Para ello usaremos
u n a tecnologa de W 3C conocida com o H ojas d e estilo en cascada 3 (CSS3). la cual nos perm ite especificar la
presentacin de los elem entos en una pgina W eb (com o fuentes, espaciado, tam aos, co b res, posicin) por se
parado de Li estructura y el contenido del docum ento (seccin d e encabezado, cuerpo del texto, vncubs). I-a se
p araci n d e la e stru c tu ra y la p re se n ta c i n simplifica el m antenim iento y la m odificacin d e las pginas Web,
en especial en sitios W eb de gran escala. En el c a p tu b 5 introducirem os muchas nuevas funciones de CSS3.
H T M L 5 se dise para especificar el contenido y La estructura de u n docum ento. A unque este lenguaje
tiene ciertos atributos que controlan la presentacin, es mejor no mezclar a presentacin con el contenido. Si de
term inam os la presentacin de un sitio W eb totalm ente m ediante una hoja de e stib , es posible cam biarla por
una nueva hoja de e s tib para modificar la apariencia de un sirio en su totalidad.
EJ W 3C ofrece un validador de cdigo de CSS3 en jig s a w .w 3 .o r g /c s s - v a lid a to r /. Esta herram ienta
puede ayudarle a asegurarse que su cdigo sea correcto y funcione en b s navegadores com patibles con CSS3.
N osotros ejecutam os este validador en todos b s docum entos de C S S 3 /H T M L 5 de este libro. Para obtener ms
inform acin sobre CSS3, visite nuestro C entro de recursos de C SS3 en w w w .deitel .com /css3.

4.2

Estilos en lnea

Podem os declarar e stib s en lnea para los docum entos en el m arcado de H T M L 5 , en hojas de e s tib incrustadas
o en archivos CSS separados. E n esta seccin presentam os b s estilos e n ln e a que declaran el form ato de un ele
m ento individual m ediante el uso del atrib u to s t y l e de H T M L 5 . Los e stib s en linea prevalecen sobre cualquier
o tro e s tib q u e se aplique m ediante el uso de Las tcnicas que veremos ms adelante en el c a p tu b . La figura 4.1
aplica e stib s en lnea a b s elem entos p para alterare 1 tam ao de la fuente y su co b r.

Observacin de ingeniera de softw are 4.1


En realidad los estilos en linea no separan la presentacin del contenido. Para aplicar estilos similares a varios
elementos, use hojas de estilo incrustadas u hojas de estilo externas, que presentaremos mds adelante en este
capitulo.

4.2

Estilos en lnea

107

< IDOCTYPE htnl>


<1 Fig. 4 .1 : enlin ea.htm l -->
< I Uso de e s t i l o s en l i n e a -->
< h ta l>

<head>
< re ta c h a r s e t = " u t f - 8 >
< t i t l e > E s t i l o s en l& ia c u te ;n e a < /tit1 e >

</head>
<body>
<p>Este te x to no ti e n e a p lic a d o ning& uacute;n e s t i l o .< / p >

<1 El a t r i b u t o s t y l e nos permite d e c la r a r >


<1-- e s t i l o s en l i n e a . Debemos se p a ra r v a r ia s -->
< ! - - propiedades de s t y l e con un punto y coma. -->
<p s t y l e = f o n t- s 1 z e : 20pt;*'> E ste te x to ti e n e a p lic a d o e l e s t i l o
<em>f o n t - s i ze</em> , p a ra que s e a de 2 0 p t.
</p>

20
21
22

23
24
23

<p s t y l e = " f o n t - s i z e : 2 0 p t; c o lo r : deepskyb1ue;">


E ste te x t o tie n e a p lic a d o s lo s e s t i l o s <e> fon t - s i ze</e*t> y
<en>color</em >, p a ra que s e a de
2 0 p t y de c o lo r a z u l c i e l o p ro fu n d o .< /p >

</body>
</htnl>
lotoi n

'-W m O ik
=

M S ia iith ry [ j lnm JsW in..


Em c WMO 00 v t x

id o nOfUD r & o

Este texto tiene ap lic ad o el estilo fo n t-size . para q u e sea de


20pt.
F.stc texto tiene aplicados los estilos fo n t-size y color, para que
sea d e 20pt y de c o lo r azul cielo profundo.

F ig u ra 4 . 1 | Uso de estilos en linea.


La prim era declaracin de esrilo en lnea aparece en b lnea 16. El atrib u to s t y l e especifica el estilo de u n ele
m ento. C ad a propiedad de C SS (en este caso, f o n t - s i z e ) va seguida de dos puntos y un valor. En la lnea 16
declaramos este elem ento p especfico para usar un tam ao de fuente de 20 puntos.
La lnea 20 especifica b s dos propiedades f o n t - s i z e y color, separadas por un p u n to y coma. En esta lnea
establecemos el c o lo r del prrafo a deepskyblue. Pueden usarse cdigos hexadecimales en vez d e nom bres de
colores. La figura 4.2 contiene el conjunto de colores estndar de H T M L . E n el apndice B proporcionam os
una lista ms am plia de cdigos de color en hexadecimal y los nom bres d e b s co b res. Tam bin encontrar una
lista com pleta de c o b re s estndar y extendidos de H T M L en w yrw .w 3.org/T R /css3-color/.

108

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

Nombre del color

Valor

Nombre

Aqua
Black
blue
fuchsia
9 cay
green
1 i me
maroon

#00FFFF
#000000
#OOOOFF
#FF0OFF
#808080
#008000
#00FF00
#800000

navy
o liv e
purple
red
silv er
te a l
yellow
white

Fig ura 4 .2

4.3

color

Valor

#000080
#808000
#800080
#FFOOOO
#C0C0C0
#008080
#FFFF00
#FFFFFF

| Los colores estndar de HTML y sus valores RGB en hexadecimal.

Hojas de estilo incrustadas

H ay una segunda tcnica para usar hojas de estilo en cascada; hojas d e e stilo incrustadas. Esta tcnica nos
perm ite inm utar un docum ento de C SS3 en la seccin head de un docum ento. La figura 4 .3 crea una hoja de
estilo incrustada que contiene cuatro estilos.

<!D0CTYPE html>
<1-- Fig. 4 .3 : in cru stad a.h tm l >
< ! - - Hojas de e s t i l o in c ru s ta d a . -->
<html>
<head>
<neta c h a rs e t = *u tf-8 " >
< title> H o ja de e s t i l o in c r u s ta d a < / t1 tle >

20
21
22
23
24
23
26
27
28
29

< ! - - e s to empieza la seccin de la hoja de e s t i l o -->


< sty le type = te x t/c ss " >
em
{ fo n t-w e ig h t: bold;
co lo r: black; }
hl
{ fo n t-fa m ily : tahoma, h e l v t i c a , s a n s - s e r i f ; }
p
{ f o n t-s iz e : 12pt;
font-fam ily: a r i a l , s a n s - s e r i f ; }
.e s p e c ia l { color: p u rp le ;}
< /style>
</head>
<body>
< ! - - e s t e a t r i b u t o a p l i c a l a c la s e de e s t i l o .e s p e c ia l >
<hl c l a s s especial"> D eitel & A sso c ia te s, Inc.</hl>
<p>Deitel & A sso c ia tes, Inc. es una empresa dedicada al entrenamiento
c o rp o rativ o y l a creaci4oacute;n de contenido, que se e s p e c i a l i z a en
lenguajes de programaci&oacute;n, tecnolog& iacute;a de I n t e r n e t y Web.
d e s a r r o l l o de a p lic a c io n e s para iPhone y Android, y educaci&oacute;n
sobre l a tecnolog& iacute;a de lo s objetos.</p>

Figura 4-3 | Hoja de estilo incrustada (parte I de 2).

4.3

Hojas de estilo incrustadas

109

30
<hl>CHentes</hl>
31
<p c l a s s = "especial" Los c l i e n t e s de l a empresa incluyen muchas
32
<em>compantilde;&iacute;as Fortune 1000</en>, agencias gubernamentales,
33
s e c to r e s del e j& e a c u te ; r c ito y organizaciones de negocios.</p>
34
</body>
13 </html>

D e ite l & A s s o c ia t e s , In c .
4 Artoofltol toe ir*<fcOc*liffimnaerlocorpOflTOVlactoaontrlenoo
OjQ ic o s p tc u f c u o o o o x a o ' . o p ro g a n v o flo ic c rv o c o j ite Ito m o t y V M i d e r r o t o o e a g le f to a M t

p a ra iP tx n o y A rtto a d i lu c a O d ft scfcta U w <ntog(a <W tos

C lie n te s
LC* c t o t e o d o la c r p i e * * n ck *w ( M h H co m o ao ra fo rtu n o 1000 a g o n a p L t< n m e rla te k w of t t

d d oiotalo v cv^m uA oonst do

Figura 4 .3

| Hoja de estilo incrustada (parte 2 de 2).

7 elemento s ty le y los tipos MIME


EJ elemento s ty l e (lneas 11 a 18) define la hoja de estilo incrustada. Los estilos que se colocan en el elemento head
(c a b e c e ra ) se aplican a los elementos que coincidan en cualquier parte donde aparezcan en el cuerpo (body). El
atributo ty p e del elem ento s t y l e especifica el tipo M IM E (E xtensiones m u ltip ro p sito d e correo In tern et)
que describe el contenido de esc elemento. Los docum entos de GSS usan el tipo M IM E t e x t / e s s . A partir de
H T M L 5 , el elemento ty p e predeterm inado para un elem ento s t y l e es te x t/e s s * , por lo que este atributo ya
no es necesario: lo conservamos aqu porque ver que se utiliza en el cdigo heredado de H T M L . La figura 4.4
lista los tipos M IM E com unes que utilizamos en este libro. Para obtener una lista completa de tipos M1ME, visite:

vww.w3schools.com/med1a/med1a_mimeref.asp
Tipo MIME

Descripcin

te x t/e ss
1mage/png

D o cu m en to s de CSS

te x t/

jav ascrlp t
tex t/p lain
1mage/jpeg
text/htm l
Figura 4 .4

Im genes P N G
M arcado de JavaScript
Texto simple
Im agen JP E G
M arcado d e H T M L

| Unos cuantos tipos MIME comunes.

El cuerpo de la hoja de estilo (lneas 12 a 27) declara las reglas d e C SS para esa hoja de estilo. Para lograr la
separacin entre el cdigo C SS3 y el H T M L 5 al q u e aplica el estilo, usarem os un selector d e CSS para especifi
car los elem entos a los que se aplicar estilo de acuerdo con una regla. N uestra prim era regla (lnea 12) empieza

1 10

Capitulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

con el selector em. que selecciona todos los elem entos en en el docum ento. Un elem ento em indica que debem os
enfatizar su contenido. Por lo general los navegadores despliegan los elementos em en una fuente en cursiva. El
cuerpo de cada regla va encerrado entre llaves ({ y }). Las rcghs de CSS en las hojas de estilo incrustadas utilizan
la misma sintaxis que los estilos en lnea; el nom bre de la propiedad va seguido de dos puntos ( : ) y del valor de la
propiedad. Varias propiedades se separan m ediante signos de p u n to y com a (;). La propiedad fo n t-w e ig h t de
la lnea 12 especifica el grosor del texto. Los valores posibles son bol d, normal (cl predeterm inado), bolder (ms
grueso que el texto bold) y l i g h t e r (m enos grueso que el texto normal). El grosor tam bin puede especificarse
con mltiplos de 100, desde 100 hasta 900. El texto que se especifica com o normal es equivalente a 400 y el texto
bol des equivalente a 700. Sin em bargo, muchos sistemas no tienen fuentes que se puedan escalar con este nivel de
precisin, por lo que si utiliza estos valores numricos tal vez no obtenga cl efecto deseado en pantalla.
En este ejem plo, todos los elem entos em se m ostrarn en fuente color negro y en negrita. Tam bin aplica
mos estilos a todos los elem entos h l y p (lneas 14 a 16).

Clases de estilos
La lnea 17 declara u n selector para una d a s e d e e stilo s llamada e s p e c ia l. A las declaraciones de las clases de
estilos se les antepone u n p u n to (.). Estas declaraciones definen los estilos que pueden aplicarse a cualquier ele
m ento. En este ejem plo, la clase e s p e c ia l establece c o lo r en p u rp le (m orado). Le m ostrarem os cm o aplicar
clases de estilos m om entneos. Tam bin es posible d ed arar selectores id . Si un elem ento en su pgina tiene un
id , puede dcclirar un selector de la form a ttide lemento para especificar cl estilo de esc elem ento.

Propiedad font-fam ily


La propiedad f o n t- f a m ily (lnea 14) especifica cl nom bre de b fuente a usar. N o todos los usuarios tienen las
mismas fuentes instaladas en sus com putadoras, por lo que CSS nos perm ite especificar una lista de fuentes
separadas por com as que pueden usarse para u n e s tib especfico. El navegador intentar usar las fuentes en el
orden en el q u e aparezcan en la lista. Es aconsejable term inar una lista d e fuentes con cl nom bre de una fam ilia
de fu e n te s g e n rica en caso de que las otras fuentes no se encuentren instaladas en b com putadora del usuario
(figura 4 .5 ). En este ejem p b , si no se encuentra tahoma en el sistem a, el navegador buscar b fuente h e lv tic a .
Si tam poco b encuentra, el navegador m ostrar su fuente predeterm inada s a n s - s e r i f .

Familias de fuentes genricas

Ejemplos

serif
sans-serif
cursive
fantasy
nonospace

ties new ronan, Ceorgia


a r ia l. verdana, futura
script
c r itte r
courier. fixedsys

Fig ura 4 .5

| Familias de fuentes genricas.

Propiedad fo n t-size
La propiedad f o n t - s i z e (lnea 15) especifica una fuente de 12 puntos. En la seccin 4 .4 presentarem os otras
posibles m ediciones adem s de p t (punto). T am bin pueden usarse vabres rebtivos, com o xx-smal 1, x-sm all,
small, sm aller, mdium, la r g e , la rg e r, x - la r g e y xx-large. En general es preferible usar valores de f o n t - s i z e
relativos en vez de puntos, ya que un autor no sabr as medidas especificas de a pantalla de cada cliente. Los v a b
res rebtivos perm iten una vista ms flexible de bs pginas W eb. Por e je m p b , b s usuarios pueden cam biar b s
tam aos de b s fuentes que m uestra el navegador para m ejorar b legibilidad.

4.4

Estilos conflictuados

III

Lh usuario podra ver una pgina W eb en un dispositivo porttil con una pantalla pequea. Si se especifica un
tamao de fuente fijo (como 18pt), el navegador no podr escalar las fuentes. Un tam ao de fuente relativo, com o
large o la rg e r, perm ite al navegador determ inar el tamao actual del texto visualizado. Al usar tam aos relativos
tambin mejora la accesibilidad de las pginas para los usuarios con discapacidades. Por ejem plo, b s usuarios con
discapacidad visual pueden configurar su navegador para usar una fuente predeterm inada ms grande, a partir de
b cual se basarn todos b s tamaos relativos. EJ texto especificado por el autor com o ms pequeo (smal 1 e r ) que
el texto principal seguir m ostrndose en u n a fuente con un tam ao ms pequeo. La accesibilidad es una con
sideracin im portante; en 1998 el Congreso aprob la Enm ienda de la seccin 508 a la Ley de rehabilitacin de
1973, la cual estipula que b s sitios W eb de las agencias gubernam entales federales sean accesibles para los u su arb s
dcapacitados. Para obtener ms informacin visite el s itb www.access-board.gov/508.htm.

Cmo aplicar una clase de estilos


La lnea 22 usa el atrib u to c l a s s de H T M L 5 en un elem ento hl para aplicar una clase de estibs; en este caso,
la clase llamada e s p e c ia l (que se declara con el selector .e s p e c ia l en la hoja de estilo de la linea 17). C uando
el navegador despliega el elem ento hl, el texto aparece en pantalla con las propiedades tanto de un elem ento hl
(la fuente tahoma, h e lv t ic a , o s a n s - s e r i f que se define en la lnea 14) com o de laclase de e stib s .e s p e c ia l
que se aplica (el c o b r p u rp le que se define en la lnea 17). El navegador adems sigue aplicando su p ro p b e s tib
predeterm inado al elem ento h l (el encabezado se m uestra en un tam ao de fuente ms grande). D e manera
similar, el navegador seguir m ostrando rodos b s elem entos em en cursiva, pero Tambin se m ostrarn en negrita
com o resultado de las lneas 12 y 13.
Las reglas de form ato para am bos elem entos p y la clase .e s p e c ia l se aplican al texto en las lneas 31 a 33.
En m uchos casos, b s e stib s que se aplican a un elem ento (el d e m e n to p a d re o an cestro ) ram bin se aplican
a b s elementos anidados de ese elem ento (d e m e n to s h ijo s o descendientes). El elem ento em anidado en el ele
m ento p de la lnea 32 hered a el estilo del elem ento p (a saber, el tam ao de fuente de 12 puntos de la lnea 15)
pero retiene su e s tib en cursiva. As, b s e stib s definidos para el prrafo q u e o estn definidos para el elem ento
em de todas form as se aplican a este elem ento em que est anidado en el elem ento p. Es posible establecer o
heredar m ltip le s valores d e u n a p ro p ie d a d en el m ism o e le m e n to , p o r lo q u e el n avegador d e b e re d u
cirlos a u n s o b valor para esa propiedad o elem ento antes de desplegarbs en pantalla. E n b siguiente seccin
hablaremos sobre b s reglas para resolver estos conflictos.

4.4

Estilos conflictuados

Los e stib s pueden ser definidos por un u su a rio , un a u to r o un agente d e u su ario . U n usuario es la persona que
est viendo su pgina W eb, usted es el au to r ( b persona que escribe el docum ent) y el agente de usuario es el
program a que se utiliza para desplegar y visualizar el docum ento (por e je m p b , un navegador W eb).
Los e stib s se a p lic a n en cascada (de aqu viene el trm ino H ojas de e s tib en cascada), o fluyen en
conjunto, d e tai form a que b apariencia final de b s elem entos en una pgina resulta de b com binacin
de b s estib s definidos en varias formas.
Los e stib s definidos por el usuario tienen precedencia sobre b s e stib s definidos por el agente de usuario.
Los e s tib s definidos por b s autores tienen precedencia sobre b s e stib s definidos por el usuario.
La mayora de b s estib s definidos para b s elem entos padre tam bin b s h e re d a n b s elem entas hijos (ani
dados). Esto tiene sentido para b m ayora de b s e stib s, com o b s propiedades de b s fuentes, pero hay ciertas
propiedades q u e no es conveniente heredar. Por e je m p b , la propiedad background-im age nos perm ite estable
cer una im agen com o el fondo d e un elem ento. Si al elem ento body se le asigna una im agen de fondo, no es
conveniente que la misma imagen de fondo est en el fondo de todos b s elem entos en el cuerpo de nuestra p
gina. En c a m b b , b propiedad background-im age de todos b s elem entos hijos retiene su valor predeterm inado

1 12

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

de none (ninguno). En esta seccin hablarem os sobre las reglas para resolver conflictos entre los estilos definidos
para los elementos y los estilos heredados de b s elem entos padres y ancestros.
La figura 4.3 co n tien e u n ejem plo de heren cia en d o n d e u n e le m e n to em hijo hereda la p ro p ied ad
fo n t - s i ze de su elem ento p padre. Sin em bargo, en b figura 4 .3 el elem ento em hijo tiene una propiedad col o r
que entra en conflicto con (es decir, tiene un valor d istin to de) la propiedad c o lo r de su elem ento p padre. Las
propiedades definidas para b s elem entos hijos y descendientes tienen una especificidad ms alta que b s pro
piedades definidas para b s elem entos padres y ancestros. Los conflictos se resuelven a favor de b s propiedades
con una especificidad ms alta , por b que b s e stib s del hijo tienen precedencia. La figura 4 .6 ilustra ejem p b s
de herencia y especificidad:

<!DOCTYPE htnl>

3
4
3
6
7
8

9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41

<1 Fig 4.6: avanzada.html -->


< ! - - Herencia en hojas de e s t i l o . >
<htil>
<head>
< *eta c h a r s e t = " u t f - 8 M>
<title>MAaacute;s e s t i l o s < / t i t l e >
< sty le type = ,' t e x t / c s s ,,>
body
{ fon t-fam ily : a r i a l , h e lv tic a , s a n s - s e r i f ; }
a.nodec { te x t-d e c o ra tio n : none; }
a:hover { te x t-d e c o ra tio n : un derllne; }
11 ea
{ font-weight: bold; }
h l , en
{ te x t-d e c o ra tio n : underlln e; }
ul
{ n a r g l n - l e f t : 20px; }
ul ul
{ f o n t- s i z e : .8em; }
</style>
</head>
<body>
<hl>Lista de compras para e l lunes:</hl>
<ul>
<li>Leche</li>
<11>Pan
<ul>
<li>Pan blanco</li>
<li>Pan de centeno</li>
<H>Pan de t r i g o e n te ro < /li>
</ul>
</11>
<li>Zanahoria</li>
<1i>Yogurt</li>
< li> Pizza <et>con champi&nti l d e ; ones</en></li>
</ul>
<p><em>Ir a1 a</et>
<a c l a s s "nodec'' h r e f *'h t t p ://***.d e i t e l .coi">
Tienda de abarrotes</a>
</p>
</body>
</html>

Figura 4 .6 | Herencia en hojas de estilo (parte l de 2).

4.4

Mn

Estilos conflictuados

113

_______________________
C

f^y/A^jwoio/cap04/fig04_06/avdazd<Jahi!ml

ih

S ic t

Ifcc* GM r-/

C ) I m p i d o de 2r lo

loche
Pon
Pn tf #nCO

PindlCWlMO
Pjn dt tr^o trere

ZanaNyid
Yogurt

Pi2ia co/?jC^yrjpjrtones

Vinculo a la tienda de
abarrotes sin decoracin

Tienda d e a b an o ces

MuMe*
C

\ l ____________________
ih h*ey//Yyeiemok)i'<ap04^ig04j)6/avan2adahtmi

k e t tu fe - J M

SKe G*ie-> C j

de N

191

Lista de
leche

Pan
P r WafKO

Pdfl O#cafrtt*o
Pjn 5* tnge ereero

G vnculo a la oenda

Zanahoria

<fc abarrotes aparece


subrayado cuando el
usuario pasa el ratn
xibre l

Yogurt

Pizza CQ/2t#/np/rtOii*

fra/

Figura 4.6 | Herencia en hojas de estilo (parte

de 2 ).

En la lnea 11 se aplica la propiedad te x t- d e c o r a tio n a todos los elem entos a cuyo atrib u to c la s s se
establezca en nodec (lnea 37). La propiedad te x t- d e c o r a tio n aplica d eco racio n es al texto en un elem ento.
Los navegadores subrayan el tcxro de un elem ento a (ancla) de m anera predeterm inada. Aqu establecem os b
propiedad te x t- d e c o r a tio n en none para indicar que el navegador o debe subrayar los hipervneulos. O tro s
posibles valores para te x t- d e c o r a tio n son: o v e r lin e , lin e - th r o u g h y u n d e rlin e . El .nodec que se adjunta al
elem ento a es un selector de clase ms especifica, este estilo en la linca 11 se aplica slo a los elem entos a (ancb)
que especifican a nodec en su atrib u to c la s s .

T ip de portabilidad 4.1
Para asegurar que sus hojas de estilofuncionen en varios navegadores Web, puede probarlos en muchos
navegadores Web diente y usar el valdador de CSS de W3C.

La lnea 12 especifica un estilo para hover, q u e es una subclase. Las subclases nos dan acceso a b inform a
cin que no est d ecb rad a en el docum ento, com o el hecho d e que el ratn est colocado sobre un elem ento, o
si el usuario ha hecho clic (visitado) antes en un hipervnculo espedfico. La su b clase hover se activa en form a

1 14

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

dinm ica cuando cl usuario mueve el cursor sobre (es decir, flota sobre) un elem ento. Las subclases se separan
m ediante dos puntos (sin espacios circundantes) del nom bre del elem ento al que se aplican.

Error com n de program acin 4-1


S incluye un espacio antes o despus de los dos puntos que separan a una subclase del nombre del elemento
al que se aplica, evitard que se aplique esa subclase.

La lnea 13 Hace que todos los elem entos em que sean hijos de elem entos 11 se m uestren en negrita. En la
salida de la pantalla de la figura 4.6 , I r a l a (que est contenida en un elem ento em en la lnea 36) no aparece
en negrita, ya que el elem ento em no est anidado en un elem ento 11, por lo que slo se aplica el form ato en
negrita. La sintaxis para aplicar reglas a mltiples elem entos es similar. En la lnea 14 separam os b s selectores
con una coma para aplicar una regla de e s tib subrayado a todos b s elem entos h l todos b s elem entos em.
En la lnea 15 se asigna un margen izquierdo de 20 pceles a todos b s elementos u l. En la seccin 4.10 hablare
mos sobre las propiedades margi n con detalle. U n pixel es una m edicin de lo n g itu d relativa: vara en tam ao, con
base en la resolucin de la pantalla. O tras bngim dcs relam as son: em (que, com o medicin, indica la altura de La letra
M mayscula de la fuente: la medicin de fuente que se utiliza con ms frecuencia), ex (la a lm ra x d c la fuente; por
b general se establece en la altura de u n a x minscula) y b s porcentajes (por ejem p b . f o n t - s i z e : 50%). Eira estable
cer un elemento de m odo que muestre texto al 150 por ciento de su tam ao de texto predeterm inado, podra usar:

f o n t- s iz e : l.Sem
o
f o n t - s i z e : 1S0%
Las m ediciones de lo n g itu d absoluta son otras unidades de medicin disponibles en CSS; estas unidades no varan
su tamao con base en el sistema y son: 1n (pulgadas), cm (centmetros), mm (milmetros), p t (puntos: 1 pt 1/72
pulg) y pe (picas; 1 pe = 12 pt). 1.a lnea 16 especifica que todas las listas desordenadas anidadas (elementos ul que
son descendientes de elementos u l ) deben tener el tam ao de fuente . 8en. [Nota: al establecer una propiedad de estilo
que reciba una medicin (por ejem p b , f o n t- s iz e , m a rg in -le ft). no son necesarias las unidades si el vabr es cero.]

Buena prctica de program acin 4.1


Sempre que seaposible, use mediciones de longitud relativa. Si usa mediciones de longitud absoluta, tal vez
su documento no pueda ajustar bien su escala en algunos navegadores cliente (como en os smartphones, por
ejemplo).

4.5 Vinculacin de hojas de estilo externas


Las hojas de estib son una manera conveniente de crear un docum ento con un tema uniforme. C on las hojas
d e estilo externas (es decir, docum entos separadosc\\sc s b contienen reglas de CSS) podem os proporcionar una
apariencia visual uniforme a todo un sirio W eb (o a una parte de ste). Tambin podem os reutilizar la misma hoja
de e s tib externa en varios sirios W eb. Las distintas pginas en un sirio pueden usar la misma hoja de estilo. C uando
se requieran cambios en b s estibs, solam ente necesitamos modificar un s o b archivo CSS para realb ar cambios de
e stib en todas las pginas que utilicen esos estibs. Algunas veces a este concepto se le denom ina sk in n in g . Aunque
las hojas de estilo incrustadas separan el contenido de la presentacin, de todas formas siguen estando en u n solo
archivo, y esto evita que un diseador Web y un autor de contenido trabajen de manera conveniente en paraleb.
Las hojas de e s tib externas resuelven este problem a al apartar cl contenido y el csrib en archivos separados.

4.5

Vinculacin de hojas de estilo externas

115

La figura 4.7 presenta una hoja de estilo externa. Las lneas 1 y 2 son comentarios de CSS. stos pueden
colocarse en cualquier tipo de cdigo CSS (estilos en lnea, hojas de estilo incrustadas y hojas de estilo externas);
siempre em piezan con /* y term inan con */ El navegador ignora el texto entre estos delim itadores. Las reglas
en esta hoja de estilo externa son las m ism as que en la hoja de estilo incrustadas en la figura 4 .6 , lneas 10 a 16.

1
2
3
4
5
6
7
8
9

/ F1g. 4 .7 : e s t i l o s . c s s */
/* Hoja de e s t i l o externa */
bocfy
{ f o n t- f a n ily : a r i a l ,h e l v t i c a , s a n s - s e r i f ; }
a.nodec { te x t-d e c o ra t1o n : none; }
a:hover { te x t-d e c o ra tlo n : underlln e; }
11 en
{ font-w eight: bold; }
h l , en { te x t-d e c o ra tio n : und erllne; }
ul
{ n a r g 1 n - le f t: 20px; }
ul ul
{ f o n t-s lz e : .8en; }

Figura 4 .7 | Hoja de estilo externa.


La figura 4 .8 contiene un docum ento de H T M L 5 que hace referencia a la hoja de estilo externa. Las lneas
9 y 10 m uestran un elem ento lin k que usa el atrib u to r e para especificar u n a relacin entre el docum ento
actual y o tro docum ento. A qu declaramos el docum ento vinculado com o una hoja de estilo (s t y l e s h e e t )
para este docum ento. El atributo ty p e especifica el tipo M IM E del docum ento relacionado com o t e x t / e s s . El
atributo h r e f proporciona el U RL del docum ento de la hoja de estilo. Si usamos el no m b re de archivo e s t i
lo s . CSS, com o hicim os aqu, indicam os q u e e s t i lo s . c s s est en el m ism o directorio q u e e x te r n a , htm l. Los
resultados de despliegue son iguales que en la figura 4.6.

<!DOCTYPE htnl>

3
4
3
6
7

< ! Fig. 4 .8 : externa.htm l >


< ! Vinculacin de una hoja de e s t i l o s e x te rn a . -->
<h t * l >
<head>
<meta c h a rs e t- " u tf - 8 " >
8
<t1tle>Vinculaci&oacute;n de hojas de e s t i l o e x te r n a s < / ti tle >
9
<link re = ' s t y l e s h e e t type - t e x t / e s s
10
h r e f = e s t i l o s . c s s " >
11
</head>
12
<body>
13
<hl>Lista de compras para el <ei>lunes</em>:</hl>
14
13
<ul>
16
<li>Leche</l1>
17
<H>Pan
18
<ul>
19
<li>Pan blanco</H>
20
<H>Pan de centeno</l1>
21
<li>Pan de t r i g o e n te ro < /li>
22
</ul>
23
< /li>
Figura 4 .8 | Vinculacin de una hoja de estilo externa (parte I de 2).

116

24
23
26
27
2
29
30
31
32
33
34

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

<11>Zanahor1as</l1>
<11>Yogurt</l 1>
<H>P1zza <em>con champi&ntilde;ones</em></l1>
</ul>
<p><CK>Ir a la</em>
<a c l a s s "nodec" h r e f - http://www.de1tel.cofi>
Tienda de abarrotes</a>
</p>
</body>
</html>

c
r//'* e*,mpovCAp<H^*gt>4.07.0S/rtefnd<l^
Umi .rn 2

L is t a de
P an

Zjnarxxias
Y o **:

< t * J a Tienda d e a o a n o le s

Ibc M B
iKMc<r^ar V. ___________________________
C

: f's* ///r/**mc*>L'<*>0^^

k n wq g d e<

|P1 .

W* *ir,r Q W c ^ ifc dm H i t .

Leche
P an

Par Manee
*V m caWK

P**4*
annnon*?
Yo**:

**

* :.u c o n ch a m p a :
T*rvin drgfvarrnit*-.

Figura 4 .8 | Vinculacin de una hoja de estilo externa (parte 2 de 2).

4.6

Fosicionamiento de los elementos: posicionamiento absoluto,


z -in d e x

Antes de C SS, era difcil controlar el posicionam iento de b s elem entos en docum entos H T M L ; el navegador
determ inaba el posicionam iento. CSS introdujo b propiedad p o s ltlo n y una herram ienta conocida com o

4.6

Posicionamiento de los elementos: posicionamiento absoluto. z - 1 ndex

117

p o sicio n am ien to a b so lu to , que nos da un m ayor control sobre la form a en que se visualizan los elem entos de
los docum entos. La figura 4 .9 dem uestra el posicionam iento absoluto.

<! DOCTYPE htil>


<! Fig 4 .9 : posic1onamiento.html -->
<! Posicionamiento absoluto de lo s elementos. -->
<html>
<head>

20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33

<meta c h a r s e t - "utf-8">
< title> P osicionam iento a b s o lu to < / title >
< sty le type - t e x t / c s s >
.imagen_fondo
{ p o sitlo n : absoluta;
top: Opx;
l e f t : Opx;
z-index: 1; >
.imagen_prinerplano
{ p o sitio n : absolute;
top: 2Spx;
l e f t : lOOpx;
z-1ndex: 2; }
.te x to
{ p o sitio n : absolute;
top: 2Spx;
l e f t : lOOpx;
z-index: 3;
f o n t - s l z e : 20pt;
f o n t - f a n ll y : tahona, geneva, s a n s - s e r i f ; }
</style>
</head>
<body>
<p><1ng src - "imagen fondo.png" c la s s "imagen,fondo"
a l t = "Primera Imagen poslclonada" /></p>
<p><1mg src "imagen, prlmerplano.png" c l a s s imagen primerplano
a l t a "Segunda Imagen poslclonada" /></p>
<p c l a s s = "texto">Texto posicionado</p>
</body>
</html>

Figura 4-9 | Posicionamiento absoluto de los elementos (parte I de 2)

1 18

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

1
Pe*-

_________________

fi#:///f/e/empioVCJp04/f^a,09/poiiooAam^nloit!ml
4, * t b S k 5r r .

Figura 4 .9

tnr*/1 V

f*

j Wnpcfladc de bllm_

| ftasicionamiento absoluto de los elementos (parte 2 de 2).

Por b general, los elem entos se posicionan en la pgina en el orden en que aparecen en el docum ento
de H T M L 5. Las lneas 10 a 13 definen un estilo llam ado im agen_fondo para el prim er elem ento img (im a
ge n_fondo .png) en la pgina. Al especificar la posicin (p o s itlo n ) de u n elem ento com o absolura (a b so lu te )
se elim ina ese elem ento del flujo norm al de elem entos en b pgina, para posicionarse de acuerdo con la distan
cia desde los mrgenes superior (top). izquierdo ( l e f t ) , derecho ( r ig h t) o inferior (bottom ) de su d e m e n to
c o n te n e d o r a nivel d e b lo q u e. Esto significa que se m uestra en su propia lnea y tien e un c u a d ro v irtu a l a su
alrededor. Algunos ejemplos de elem entos a nivel de bloque son: s e c t io n , d iv , p y los elem entos de encabezado
(h l a h6). A qu posicionam os el elem ento para que est a 0 pxeles de distancia de los mrgenes to p y l e f t de
su elem ento contenedor. En la lnea 27 se aplica este estilo a la imagen, que est contenida en un elem ento p.
La propiedad z -In d e x nos perm ite distribuir en capas os elementos que se traslapan. Los elem entos que
tengan valores mayores de z . ndex se m uestran frente a los elem entos con valores menores de z -in d e x . En este
ejem plo, . im agen_fondo tiene el valor ms bajo de z-1 ndex (l). por lo que se m uestra en el fondo. La regla de
CSS de .im agen_pr1m erplano (lneas 14 a 17) concede a b imagen del crculo (im agen_prim erplano. png, en
b s lneas 3 0 y 31) un valor d e z- ndex d e 2, p o r lo q u e aparece fre n te a im agen_fondo. png. El elem en to
p en la lnea 33 recibe un z -in d e x de 3 en la lnea 21, por lo q u e su contenido (Texto p o sic io n a d o ) aparece
frente a losotros dos. Si no especificamos un z -in d e x o si hay elem entos que tengan el m ism o valor d e z -in d e x ,
los elem entos se colocarn del fondo hacia el prim er p b n o en el o rd en en el que se encuentren en el docum ento.
El valor predeterm inado de z -in d e x es 0.

4.7 Posicionamiento de los elementos: posicionamiento relativo, span


El posicionam iento absoluto no es b nica form a de especificar b distribucin de una pgina. La figura 4.10 de
muestra el posicionam iento rebtivo, en donde los elementos se posicionan en form a relativa a os dems elementos.
Al establecer b propiedad p o s itlo n en r e a t i ve, com o en laclase su p e r (lneas 15 y 16), el elemento se dis
tribuye en b pgina y se desplaza con base en el valor especificado de to p , bottom , l e f t o r i g h t. A diferencia del
posicionam iento absoluto, el posicionam iento rebtivo m antiene los elementos en el flujo general de elementos en
b pgina, por lo que el posicionam iento es relativo a b s dem s elementos en el flujo. Recuerde que ex (lnea 16)
es b altura x de una fuente, una m edicin de b n g itu d relativa que por b general es igual a la altura de una letra
x minscula. La clase su p er (lneas 15 y 16) presenta el texto al final de b oracin com o subndice y b clase sub
(lneas 17 y 18) presenta el texto com o subndice en rebein al otro texto. La cbse des pl i zq (lneas 19 y 20) des
plaza el texto al final de b oracin a b izquierda y b clase d e s p ld e r (lneas 21 y 22) desplaza el texto a b derecha.

4.7

Posicionamiento de los elementos: posicionamiento relativo, span

1 < IDOCTYPE htnl>


2

3 < I Fig. 4.10: posicionamiento2.html -->


4 <1 Posicionamiento r e l a t i v o de lo s elementos. -->
5 <htm1>
6 <head>
7
o ie ta c h a rs e t " u t f - 8 '>
8
< title> P osicionam iento r e l a t i v o < / t i t l e >
9
< sty le type = " te x t/c s s " >
10
p
{ f o n t- s lz e : l.Bem;
11
fon t-fam ily : verdana, a r i a l , s a n s - s e r i f ; }
12
span
{ color: red;
13
f o n t- s lz e : . 6em;
14
height: leai; )
15
.super
{ p o s itio n : r e l a t i v a ;
16
top: -le x ; )
17
.sub
{ p o s itio n : r e l a ti v a ;
18
bo ttoa: -lex; }
19
.d e sp liz q { p o sitio n : r e l a t l v e ;
20
l e f t : -le x ; }
21
.d esp ld er { p o sitio n : r e l a t l v e ;
22
r i g h t : -lex ; }
23
< /style>
24
</head>
23
<body>
26
<p>Fl te x to al f in a l de e s t a oraci4oacute;n
27
<span c l a s s = "super">est& aacute; en super&iacute;nd1 ce</span>.</p>
28
29
<p>El te x to al f in a l de e s t a oraci&oacute;n
30
<span c l a s s = "sub">est&aacute; en sub&1acute;ndice</span>.</p>
31
32
<p>El te x to al f in a l de e s t a oraci&oacute;n
33
<span c l a s s Md espU zq>est&aacute; desplazado a l a izqu1erda</span>.</p>
34
33
<p>El te x to al f in a l de e s t a oraci&oacute; n
36
<span c l a s s " d e sp ld e rM>est&aacute; desplazado a l a derecha</span>.</p>
37
</body>
38 </h t a l >

I5

\
C

f*ey//Y/jemp^/cap04/lig04_l0/poicor\dmiento2Mm

Sfee* tu^erd

J &

td Sfcct Gbtry Q Wvc*e W*n_

El texto al final de esta oracin


El texto

al final de esta oracin

El texto al final de esta oracin ita

c.
a ia irquMUt.

El texto al final de esta oracin MCi d tm h iJd o a la darocha.

Figura 4 .1 0 | Posicionamiento relativo de los elementos.

119

120

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

E lem entos en lnea y a n iv e l de bloque


E n la linca 27 presentam os el elem ento span. Las lneas 12 a 14 definen la regla de CSS para todos b s elem entos
span en este ejem p b . La altura (h e ig h t) d e span determ ina cunto esp acio vertical va a ocupar. El v a b r de
f o n t - s i z e determ ina el tam ao del texto dentro del elem ento span.
El elem ento span es un elem en to d e a g ru p a c i n ; de m anera predeterm inada no aplica ningn form ato a
su contenido. Su principal propsito es aplicar reglas de CSS o atrib u to s id a una seccin de texto. El elem ento
span es u n elem en to d e nivel e n lnea: no cambia el flujo de b s elem entos en el docum ento. Algunos ejem p b s
de elem entos en lnea son: span, img, a, em y strong. El elem ento d iv tam bin es u n elem ento de agrupacin,
s b que es un elem ento a nivel d e b b q u e . En b seccin 4 .1 0 h abbrem os con ms detalle sobre b s elem entos
en lnea y a nivel de b b q u e .

4.8

Fondos

CSS ofrece control sobre b s fondos de b s elem entos a nivel de b b q u e . CSS puede establecer u n c o b r de fondo
o agregar imgenes de fondo a b s elem entos de H T M L 5 . La figura 4.11 agrega un b g o tip o corporativo a la es
quina inferior derecha del docum ento. Este b g o perm anece fijo en b esquina, aun cuando el usuario se despbce
para arriba o para abajo por b pantalla.

La propiedad background- 1mage


La propiedad background-image (lnea 10) especifica cl URL d e la imagen lo g o , png en el form ato u r l ( ubicacinArchivo). Tam bin podem os establecer b propiedad background-color (lnea 14) en caso de no encontrar
b imagen (y para llenar reas que b imagen no cubre).

<!D0CTYPE html>

<1 F ig . 4.11: fondo.htm l >


< ! - - A gregar im genes de fondo y s a n g ra >

4
3 <html>
6
<head>
7
<meta c h a r s e t = "utf-8">

<t1tle>Im&aacute;genes de fondo</t1tle>
9
< s ty le type - Mtex t/c ss" >
10
body { background-Image: u r l ( l o g o . p n g ) ;
11
background-pos 1t1on: bottom r lg h t;
12
background-repeat: no-repeat;
13
background-attachment: fixed;
14
background-color: U g h tG re y ; }
13
P { f o n t- s i z e : 18pt;
16
color: DarkBlue;
17
tex t-1 n d e n t: lem;
18
fo n t-fa m 1 ly : a r i a l , s a n s - s e r l f ; )
19
.d a rk { font-weight: bold; }
20
< /style>
21
</head>
22 <body>
23
<p>
24
Este ejemplo usa lo s e s t i l o s background-image,
23
background-position y background-attachment
26
para co lo c ar el logo tipo de <span c l a s s = 'dark">Deitel
Figura 4 .1 1 | Agregar imgenes de fondo y sangra (parte I de 2).

4.8

27
28
29
30
31
32
33
34

Fondos

121

& A sso c iate s, Inc.</span> en l a esquina i n f e r i o r


derecha de l a p&aacute;gina. Observe que el logo
permanece en l a posici&oacute;n c o r r e c ta cuando ajustamos
e l tama&ntilde;o de l a ventana del navegador. El c o lo r de
background-color lle n a lo s espacios donde no hay imagen.
</p>
</body>
</htl>

_j f>te//A/f}Wip*ov/wpM/fi9 0 4 . 1 1 /loocio Mmi

U m u ip a e i

A iD U a ^ t r .

J h sa u u

mam ,

Este ejemplo usa los estilos background-image.


background-position y background-attachment para colocar el
logotipo de Deitel & A sso c ia te s. Inc. en la esquina Infenor
derecha de la pgina. Observe que el logo permanece en la
posicin correcta cuando ajustamos el tamao de la ventana
del navegador. El color de background-color llena los
espacios donde no hay imagen

D eteI

* A \so< i a i i > I n c .

F igura 4 . H

| Agregar imgenes de fondo y sangra (parte 2 de 2).

L a p ro p ied a d background-position

La propiedad background-position (lnea 11) coloca la im agen en la pgina. Las palabras clave to p , bottom .
c e n te r. l e f t y r i g h t se usan por separado o en com binacin para el posicionam iento vertical y horizontal. Es
posible colocar una imagen m ediante el aso de longitudes, especificando la longitud horizontal seguida de la
longitud vertical. Por ejem plo, para posicionar la im agen de m odo que quede centrada en form a horizontal (posicionada al 50 por ciento de la distancia a lo largo de la pantalla) y 30 pixeles a partir de la parte superior, use

background-position: 50X 30px;

La p ro p ied a d background-repeat
La propiedad background-repeat (lnea 12) controla la form a de colocar las imgenes de fondo en mosaico,
en d o n d e se colocan mltiples copias de b im agen una al lado de o tra para llenar el fondo. A qu establecemos
b s mosaicos a no- r e p e a t para m ostrar slo una copia de la im agen de fondo. O tro s valores incluyen r e p e a t (el
predeterm inado) para colocar b imagen en mosaicos verticales y horizontales, r e p e a t- x para colocar b imagen
slo en mosaicos horizontales o r e p e a t- y para colocar b imagen slo en mosaicos verticales.

l a p ro p ied a d background-attachaent:f1xed
La siguiente configuracin de propiedad, background-attachnent:f1xed (lnea 13). fija b im agen en la po
sicin especificada por background-position. Al desplazar b ventana del navegador b im agen no se mover

122

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

de su posicin. El valor predeterm inado s c r o l l mueve b imagen a m edida que el usuario se desplaza por
el docum ento.

Lmpropiedad text-in d en t
La lnea 17 usa la propiedad te x t - i n d e n t para aplicar sangra en la prim era lnea de texto en el elem ento por
una cantidad especificada, en este caso lem. Podram os usar esta propiedad para crear una pgina Web que se
asemeje ms a una novela, en donde se aplica sangra a b prim era lnea de todos b s prrafos.

La propiedad fo n t-sty le
H ay o tra propiedad d e CSS que aplica form ato al texto: f o n t - s t y l e . Esta propiedad le perm ite establecer el
texto en none. i t a l i c u o b liq u e (esta ltim a opcin es sim plem ente ms sesgada que i t a l i c el navegador
recurrir a i t a l i c si el sistem a o b fuente no soportan texto oblique).

4.9

Dimensiones de los elementos

Adem s de posicionar elem entos, b s reglas de CSS pueden especificar b s dimensiones actuales de cada elem ento
de pgina. La figura 4.12 dem uestra cm o establecer b s dim ensiones de b s elem entos.

<!DOCTYPE h t* l>

3
4

< ! - - F ig . 4 .1 2 : a n c h u ra .h tm l -->
< ! - - D im ensiones de lo s elem en to s y a lin e a c i n d e l t e x t o . -->

3 <html>
6
<head>
7
<reta c h a r s e t = Mu tf-8 " >

<title>Dimensiones del c u a d ro < /title >


9
< sty le type = "te x t/c ss" >
10
p { background-color: LightSkyBlue;
11
nargin-bottom: .Sen;
12
font-fam ily: a r i a l , h e l v t i c a , s a n s - s e r i f ; }
13
</style>
14 </head>
13 <body>
16
<p s t y l e s "width: 20%;' >&Eacute;ste es un
17
t e x t o que va d en tro de un cuadro, e l cual
18
se e s t i r a a lo largo del vein te por c ie n to
19
de l a anchura de l a p a n t a l l a . </p>
20

21
<p s t y l e = "width: 80%; t e x t - a l i g n : center;">
22
&Eacute;ste es un te x to CENTRADO que va dentro de un cuadro,
23
e l cual se e s t i r a a l o larg o del ochenta por c ie n to
24
de l a anchura de l a p a n ta lla .< /p >
23
26
<p s t y l e = "width: 20%; heigh t: ISOpx; overflow: s c r o l l ;">
27
Este cuadro solamente t i e n e el v e in te por ciento
28
de l a anchura y una a l t u r a f i j a .
29
&iquest;Qu&eacute; hacemos s i se desborda? AiexclAjustamos la
30
propiedad overflow a sc ro ll!< /p >
31
</body>
32 </h tml >
Figura 4 .1 2 | Dimensiones de los elementos y alineacin del texto (parte l de ?).

4.10

Modelo de cajas y flujo del texto

123

U MOCWiAOO&X* 3ir0* J\[uJOSCuTMtt!

Figura 4.12 | Dimensiones de los elementos y alineacin del texto (parte 2 de 2).

Especificar la anchura (w idth)y altura (helght) de un elemento


El estilo en linca de la linca 16 lustra cm o establecer la anchura (w idth) de un elem ento en la pantalla; aqu
indicam os que el elem ento p debe ocupar el 20 por ciento de la anchura de la pantalla. Si no se especifica, la an
chura se ajustar al tam ao d e la ventana del navegador. La altura d e un elem ento puede establecerse de m anera
similar, usando la propiedad b e ig h t. Los valores wi d th y h e ig h t tam bin pueden especificarse com o longitudes
relativas o absolutas. I\>r ejem plo,
w id th : 10ei
establece la anchura del elem ento a 10 veces el tam ao de la fuente. Esto funciona slo para los elem entos a
nivel de bloque.

La propiedad text-align
La mayora de los elem entos se alinean a la izquierda de m anera predeterm inada, pero esta alineacin puede
alterarse. La lnea 21 establece el texto en el elem ento com o alineado al centro (c e n te r); otros valores para la
propiedad t e x t - a l 1gn son l e f t y r ig h t.

La propiedad ove r fio * y las barras de desplazamiento


En el tercer elem ento p, especificamos una anchura en porccnrajc y una altura
blecer ambas dim ensiones de un elem ento es q u e su contenido puede exceder
caso el elem ento sim plem ente se hace lo bastante grande com o para que quepa
en la linca 26 establecemos la propiedad o v erflo w en s c r o l l , una opcin que
el texto se desborda de los lmites.

4 .10

en pxclcs. Un problem a al esta


los lm ites establecidos, en cuyo
todo el contenido. Sin em bargo,
agrega barras de desplazam iento

Modelo de cajas y flujo del texto

Todos los elem entos de H T M L 5 a nivel de bloque tienen una caja virtual que est dibujada a su alrededor, con
base en lo que se conoce com o el m o d elo d e cajas. C uando el navegador despliega un elem ento usando el m o
delo de cajas, el contenido est rodeado de relleno, un b o rd e y u n m argen (figura 4.13).

124

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

Contntelo
Relleno
Borde
Margen

Figura 4 . 1 3 | El modelo de cajas para los elementos a nivel de bloque.


CSS conrrola d borde mediante el uso de tres propiedades: border-wi dth, border-col o r y b o r d e r-s ty le .
En la figura 4.14 ilustramos estas propiedades.
1
2
3
4
3
6
7
8
9
10
II
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38

<!DOCTYPE h t*l>
<1-- Fig. 4.14: bordes.html >
< ! - - Bordes de lo s elementos a nivel de bloque. -->
<htil>
<head>
<eta c h a r s e t = "utf-8">
< t1tle> B o rd ers< /t1tle>
< sty le type . "text/css">
d lv
{ te x t - a l i g n : ce n ter;
wldth: S0%;
p o sitlo n : r e l a tl v e ;
l e f t : 2S%;
border-width: 6px; }
th lc k { border-width: thlck; }
.mdium { border-wldth: aedlun; }
.th1n
{ border-width: th1n; }
.SOlid { b o rd e r-sty le : s o lld ; >
.double { b o rd e r-s ty le : double; )
.groove { b o rd e r-s ty le : groove; }
ridge { b o rd e r-s ty le : ridge; }
.d o tte d { b o rd e r-s ty le : d o tted; }
. i n s e t { b o rd e r-sty le : In s e t; }
. o u t s e t { b o rd e r-s ty le : o u ts e t; }
.dashed { b o rd e r-sty le : dashed; }
.re d
{ border-color: red; }
.blue
{ border-color: blue; >
</style>
</bead>
<body>
<d1v c l a s s Msol1d">Borde sAoacute;11do</d1v><hr>
<d1v c l a s s = "double">Doble borde</d1v><hr>
<d1v c l a s s = "groove>Borde ranurado</d1v><hr>
<d1v c l a s s ridge ">Borde rugoso</d1v><hr>
<d1v c l a s s = dotted">Borde punteado</d1v><hr>
<d1v c l a s s " 1 n s e t>Borde 1ncrustado</d1v><hr>
<d1v c l a s s = th lc k dashed">Borde grueso 1ntermitente</d1v><hr>
<d1v c l a s s = "th1n red sol1d">Borde sAoacute:1 i do rojo delgado</d1v><hr>

Figura 4 .1 4 | Bordes de los elementos a nivel de bloque (parte l de 2).

4.10

39
40
41

Modelo de cajas y flujo del texto

125

<d1v c l a s s = "med un blue outset">Borde s a l i e n t e azul mediano</d1v>


</body>
</htil>

C
H^tndoi

M7//Y'ycj<fnpioi/<apW/t<g04.14/b<yoWml

! *

_*) WtfeSki G#JIffr C Impoitjdo dt lnt#o\


o c t de >Otdc

Dobk borde
Borde r arando
B orde rugoso

Borde potreado
3 o r d ; ab am iad o

Borde p u n o aeralente
B orde \o W o ro jo delgado
B orde saberte arul m ed aco

F igura 4 .1 4 | Bordes de los elementos a nivel de bloque (parte 2 de 2).


La propiedad b o rd e r-w id th puede establecerse en cualquier longitud de CSS vlida (por ejem plo, em, ex,
px) o en el valor predefinido de th1n, mdium, o t1 c k . La propiedad b o rd e r-c o lo r establece el color. [Nota:
esta propiedad tiene distintos significados para los diferentes estilos de bordes; por ejem plo, algunos m uestran
el color del b o rd een varias sombras.] Las opciones d e b o r d e r - s ty le son none, h id d en , d o tte d , d ashed, so l id ,
double, groove, rid g e , i n s e t y o u ts e t. Los bordes groove y rid g e tienen efectos opuestos, al igual q u e i n s e t
y o u ts e t. Si el b o r d e r - s ty le se establece en none, no se despliega ningn borde. Es posible establecer cada
propiedad de borde para u n lado individual de la caja (por e je m p b . b o r d e r - t o p - s t y l e o b o r d e r - l e f t - c o l o r ) .

Elem entos flo ta n tes


Ya vim os con el posicionam iento absoluto que es posible q u itar elem entos del flujo norm al de texto. La tcnica
de elem entos flotantes nos perm ite mover u n elem ento hacia un lado d e la pantalla, m ientras que el resto del
contenido en el docum ento fluye alrededor c I elem ento flotante. 1.a figura 4 .1 5 dem uestra cm o pueden usarse
b s elem entos flotantes y el modelo de cajas para controlar la distribucin de una pgina com pleta.
Si analizam os el cdigo d e H T M L 5 . podrem os ver que la estructura general de este d o cu m en to consiste
en un encabezado (header) y dos secciones ( s e c tio n ) principales. C ada seccin contiene un subencabczado h l
y un prrafo de texto.
Los elementos a nivel de bloque (como b s elementos s e c ti on) se despliegan con un salto de linea antes y despus
de su contenido, de m odo que el elemento head er y los dos elementos s e c tio n se desplieguen en sentido vertical,
uno encima del otro. A falta de nuestros estilos, b s elementos h lq u e representan a nuestros subcncabczados tambin
x apilaran en sentido vertical encima del texto en las etiquetas p. Sin embargo, en la lnea 24 establecemos la pro
piedad f l o a t en r i g h t en la clase f l o ta n t e , que se aplica a b s encabezados h l. Esto ocasiona que cada elem ento h l
flote hacia el lado derecho de su elem ento contenedor, mientras que el prrafo de texto fluir a su alrededor.

126

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

<!DOCTYPE html

3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32

<! Fig. 4.15: f l o l t a n t e .h t m l -->


< ! - - Elementos f l o t a n t e s . -->
<html
<head>
<meta c h a r s e t
* " u tf-8 "
< title T e x to que flu y e alred edo r de elementos f l o t a n t e s < / t 1 t l e >
< style type ,,t e x t / c s s ,,>
header
{ background-color: SkyBlue;
t e x t - a l l g n : center;
fon t-fam ily : a r l a ! , h e l v tic a , s a n s - s e r i f ;
padding: .2em; }
P
{ tex t-alig n : ju s tlfy ;
fo nt-fam ily : verdana, geneva, s a n s - s e r i f ;
nargin: .Se*; )
hl
{ margin-top: Opx; }
. f l o t a n t e { background-color: LightCrey;
f o n t- s iz e : l.S e * ;
font-fam ily: a r i a l , h e lv ti c a , s a n s - s e r i f ;
padding: .2em;
n a r g i n - l e f t : .Sen;
nargin-bottom: .Sen;
f l o a t : r ig h t;
t e x t - a l i g n : r ig h t;
width: 50%; }
s e c tio n { border: lpx sol id skyBlue; }
</style>
</head>
<body>
< h e a d e rx in g src = " d e ite l .png a l t = "D eitel" /></header>
<section>
<hl c l a s s = "flotante"> C apacitaci& oacute;n c o rp o ra tiv a y creaci&oacute;n de
contenido</hl>
<p>Deite1 & A sso c ia tes. Inc. e s una empresa reconocida a n iv e l mundial,
dedicada al entrenamiento c o rp o rativ o y l a creaci&oacute;n de contenido.
Se e s p e c i a l i z a en lenguajes de programaci&oacute;n, tecnolog& iacute;a de
Internet/Web, d e s a r r o l l o de a p lic ac io n e s para iPhone y Android, y educaci&oacute;n
sobre tecno1og&iacute;a de o b je to s . La empresa o fre ce cursos sobre
Java, C++, C#, Visual Basic, C, programaci&oacute;n en I n t e r n e t y Web,
Tecnolog&iacute; de ob jeto s y d e s a r r o llo de a p lic a c io n e s para iPhone y
Android.</p>
</section
<sect1on>
<hl c l a s s " flo ta n te " L ib ro s y videos sobre programaci&oacute;n</hI>
<p>A lo la rg o de su sociedad
e d i t o r i a l con Pearson, D eitel & A ssociates,
Inc. p u b lic a l i b r o s de te x to de vanguardia sobre programaci&oacute;n,
lib r o s p ro fe sio n a le s y cursos de video LiveLessons en DVD y
basados en Web.</p>
< /section
</body>
</html

Figura 4 .1 5

Elementos flotantes (parte I de 2).

4.11

Tipos y consultas de medios

127

i
j

' T o lo qu

Wctfedc

* \

^3 fiiey/Aye^empioVcapCM/fig04J5/flotnte.html

S*toi l ^ . o i

* * & G *3y

C j V npCU do U > * n _

D e it e l
Oeitei & Associates, inc. es una C a p a cita ci n corporativa y
empresa reconocida a nivel
,
r
9
mundial.
dedicada
ai
crea ci n de co ntenid o
entrenamiento corporativo y la
creacin de contenido.
Se
especializa en lenguajes de programacin, tecnologa de Internet/Web.
desarrollo de aplicaciones para Phone y Android. y educacin sobre
tecnologa de objetos. La empresa ofrece cursos sobre Java, 0 + , Cs.
Visual Basic, C, programacin en Internet y Web. Tecnolog de objetos y
desarrollo de aplicaciones para iPhone y Android.
A lo largo de su sociedad editorial
L ib ro s y Videos sobre
con Pearson. Deitel & Associates,
9
Inc. publica libros de texto de
program acin
vanguardia sobre programacin,
libros profesionales y cursos de
video LiveLessons en DVD y basados en Web.

F igura 4 .1 5 | Elementos ftotantes (parte 2 de 2).

lasp ro p ied a d es m a r g i n y p a d d i n g
La lnea 16 asigna un margen de . 5em a todos los elem entos de prrafo (p). La p ro p ie d a d n a rg in establece
el espacio entre el exterior del borde de un elem ento y el resto del contenido en la pgina. La lnea 21 asigna
.2em de relleno a b s elem entos h l dotantes. La p ro p ie d a d padding determ ina la distancia entre el contenido
d entro de un elem ento y el interior de su borde. Los m rgenes de b s lados individuales de u n elem ento pueden
especificarse (lneas 17, 22 y 23) m ediante el uso de las propiedades m a rg in -to p , n a r g i n - r l g h t, n a r g i n - l e f t
y a rg in -b o tto a i. Es posible especificar el relleno de la misma forma, usando las propiedades padd1ng-top,
p a d d in g -rig h t. p a d d in g - le f t y padding-bottoci. Para ver b s efectos de b s mrgenes y del relleno, intente
c o b c a r las propiedades de margen y relleno dentro de com entarios y observe la diferencia.
En la lnea 27 asignam os un borde a las cajas s e c tio n usando una declaracin abreviada d e las propiedades
de borde, q u e nos perm iten definir las tres propiedades de borde en una lnea. La sintaxis de esta abreviacin es:
b o rd e r: anchura estilo color
Nuestro borde tiene 1 pxcl de grosor, es slido ( s o lid ) y del m ism o c o b r que la propiedad backgroundc o lo r del encabezado (h ead er) (lnea 10). Esto perm ite al borde mezclarse con el elem ento h ead er y hace que
la pgina aparezca oomo u n a caja con una lnea que divide sus secciones.

4 .1 1

Tipos y consultas de medios

Los tipos d e m edios de CSS nos permiten decidir la apariencia de una pgina, dependiendo del tipo de medios
que se utilicen para mostrar la pgina. El ms com n para una pgina W eb es el tipo d e m edios screen , que es una
pantalla de com putadora estndar. Los otros tipos de medios en CSS son: handheld, b r a i l l e , speech y p r i n t. El
medio handheld est diseado para dispositivos mviles de Internet com o los smartphones, mientras que b r a i l l e
es para Las mquinas que pueden leer o im primir pginas Web en braille. El estib speech nos permite ofrecer a un

128

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

navegador Web con sntesis de voz m is informacin sobre cl contenido de una pgina. El tipo de m edias p ri n t afecta
la apariencia de una pgina Web cuando se imprime. Para una lista completa de los tipos de medios de CSS, vea

h ttp ://***. w3. org/TR/REC-CSS2/media. html#med1 a-types


lo s tipos de m edios nos perm iten decidir la form a en que se va a presentar u n a pgina en cualquiera de esos
medios, sin que los dems se vean afectados. La figura 4.16 proporciona un e je m p b sim ple y clsico en el que
se aplica un conjunto de e stib s cuando vemos el docum ento en todos os medios (incluyendo pantallas) excepto a
impresora, y o tro al m om ento de im prim ir el docum ento. Para ver la diferencia, exam ine las capturas de pantalla
debajo del prrafo o use la funcin V is ta p r e v ia de Im p resi n en su navegador, si cu en ta con ella.

1 <!DOCTYPE html>
2

3
4
3
6
7

<! F1g. 4 .1 6 : t1posmed1os.html -->


< !- - Tipos de medios de CSS. >
<html>
<head>
< reta c h a rs e t = "utf-8">
8
< title > T ip o s de medios</t1tle>
9
< sty le type = te x t/c s s " >
10
0media a l l
I

12
13
14
13
16
17
18
19

{ background-color: SteelBlue; }
{ fo n t-fam lly : v e rd a n a , h e lv tic a , s a n s - s e r l f ;
c o lo r: PaleCreen; }
p
{ f o n t- s iz e : 12pt;
c o lo r: whlte;
fo n t-fa m lly : a r l a l , s a n s - s e r l f ; }
} / * F1n de l a d e c laraci n i n e d i a a l l . */
media p r l n t

20

21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42

body
hl

body
hl
P

{ background-color: whlte; }
{ c o lo r: SeaGreen; }
{ f o n t- s iz e : 14pt;
c o lo r: SteelBlue;
fo n t-fam lly : times new romn", tim es, s e r l f ; }
} / * F1n de l a declaraci n Anedia p r l n t . * /
< /style>
</head>
<body>
<hl>Ejemplo de tip o s de medios de CSS</hl>
<p>
Este ejemplo usa tip o s de medios de CSS para v a r i a r l a forma en que
aparece l a p&aacute;gina impresa y c&oacute;mo aparece en c u a lq u ie r o tr o medio.
Este te x to aparece con una fuente en l a p a n ta l la y con una
fuente d i s t i n t a en papel o en v i s t a previa de im presioacute;n. Para ver
l a d if e r e n c ia en I n t e r n e t Explorer, vaya al men&uacute; Imprimir
y seleccione V ista previa de impresi&oacute;n. En F ire fo x , s e le c c io n e V ista
p re lim in a r del men&uacute; Imprimir.
</p>
</body>
</html>

Figura 4 .1 6 | Tipos de medios de CSS (parte l de 2).

4.11

Tipos y consultas de medios

129

a) El color <te fondo aparece en la pantalla.

] T * x * a * m etbo*

<*4

...

L + I

A W//tU+*n>itm/u$0UfMJVtpem*4+M

Ejemplo de tipos de medios de CSS


Este ejemplo usa &pos de medios de CSS pata vanar la loma en que aparece t pgina impresa y cmo
aparece en cuatquer otro medio Este ledo aparece con na fuerte en la partata ycon una tuerte distinta en
papel o en vista previa de impresin Para ver la (Herencia en Irteme! Explorer, vaya al men Imprimir y
seleccione Vista previa de impresin En Fircfox seleccione Vista prefeminar def men Imprimir

b) B color de fondo se establece en blanco para e! tipo de medios prl n t.


T.poi de

bsst

M of>N fcrtfcu

Con*9yrjr pgm*~

H <

(k

UcW | A ju st* i la p* 9-r>

rifo4r r4di

file

tip o * 401

Ejemplo de tipos de medios de CSS


Este ejemplo usa tipos de medios de CSS para sanar la forma en que aparece la pgina
impresa y cmo aparece en cualquier otro tardo Este texto aparece con una fuente en la
pantalla y con una fuente di sonta en papel o en vista previa de impresin Para \e r la
diferencia en Internet Explorer, raya al men Im pnnir y seleccione Vista previa de
impresin. En Firefox. seleccione Vista preliminar del men Imprime

Fig ura 4 .1 6 | Tipos de medios de CSS (parte 2 de 2).


E n la lnea 10 com enzam os u n bloque de estilos que se aplican a todos los tipos de medios; se declaran
m ediante med i a a l 1 y se encierran entre llaves ({ y >). En las lincas 10 a 18 definim os algunos estilos para todos
los tipos de medios. Las lneas 19 a 26 establecen los estilos que se van a aplicar slo al m om ento de im prim ir
la pgina.
Los estilos que aplicam os para todos los tipos de m edios se ven bien en una pantalla pero no se veran as
en una pgina impresa. Un fondo a colores usara mucha tinta y una impresora en blanco y negro podra im prim ir
una pgina difcil de leer, debido a que no hay suficiente contraste entre los colores.

Observacin de apariencia visual 4.1


Las pg nos con colores defondo oscurosy tocto claro usan mucha tinta y pueden ser dijiciles de leer si se
imprimen, en especial si se usa una impresora en blanco y negro. Use el tipo de medios print para evitar esto.

Observacin de apariencia visual 4.2


En general, asfoentes uzns-serifte ven mejor en una pantalla, mientras que lasfoentes serifte ven mejor en
papel El tipo de medios print permite que la pgina Web muestre unafoente sans-serifen una pantalla y
cambie a unafoente serifal momento de imprimirla.

130

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

I*ara resolver estos problemas, aplicamos estilos especficos al tipo de m edios p ri n t. C am biam os la propie
dad b a ck g ro u n d -c o lo r del elem ento body, la propiedad c o lo r d e La etiqueta h l y las propiedades f o n t - s i z e ,
c o lo r y f o n t- f a m ily de la etiqueta p de m odo que se adapten m ejor al im p rim ir^ ver la pgina en papel. O b
serve que la m ayora de estos estilos entran en conflicto con b s declaraciones en la seccin para todos los tipos
de medios. C om o el tipo d e m edio p r i n t tiene mayor especificidad que el tipo de medio a l l , kxs e stib s de p r i n t
redefinen a b s e stib s del tipo de m edio a l 1 cuando se im prim e b pgina. La propiedad f o n t- f a m ily de h l no
se redefine en b seccin p r i n t, por b que retiene su v a b r anterior al m om ento de im prim ir b pgina.

Consultas de medios
Las co n su ltas d e m ed io s (que cubrirem os con detalle en la seccin 5.17) nos perm iten aplicar form ato al con
tenido para dispositivos de salida especficos. Las consultas de m edios incluyen u n tipo de m edio y expresiones
que com prueban las fu n cio n es d e m ed io s del dispositivo de salida. Algunas de las funciones de m edios ms
com unes son:

w idth: b anchura de la parte de la p an ralb en ia q u e se despliega el docum ento, incluyendo barras de


desplazam iento
h e lg h t: b altura de la parte de b pantalla en b que se despliega el docum ento, incluyendo barras de
dcspbzam icnto
d ev ic e-w id th : b anchura de b p an talb del dispositivo de salida
dev1 c e -h e lg h t: la altura de b p a n ta lb del dispositivo de salida
o rie n ta t1 o n :s h e ig h t es m ayor que w id th , o r i e n t a t l o n es p o r t r a i t , y s iw id th es m ayor que h e ig h t,
o r i e n t a t i o n es lan d scap e
a s p e c t - r a ti o : b relacin entre w idth y h e ig h t,
d e v lc e - a s p e c t - r a t io : U relacin entre d e v ic e -w id th y d e v ic e -h e ig h t
Para una lista com pleta de funciones de m e d b s y ms inform acin sobre b s consultas de medios, vea
h ttp ://w w w .w 3 .o rg /T R /c ss3 -in e d 1 a q u e rie s/

4.12

Mens desplegables

Los m ens desplegables son una buena form a de ofrecer v n c u b s de navegacin sin usar m ucho espacio en
pantalla. En esta seccin volveremos a analizar b subclase :h o v e r y presentarem os b propiedad d i sp l ay para
crear un m en dcsplcgable sim ple m ediante el uso de CSS3 y H T M L 5.
Y vim os cm o usar b subclase :h o v e r para cam biar el e s tib de un v n c u b al pasar el ratn sobre ste.
A hora usaremos esta funcin de una form a ms avanzada para hacer que aparezca un m en cuando el ratn
pase sobre un b o t n de men. O tra propiedad im portante es d ls p la y , b cual nos perm ite decidir si se va a
desplegar o no un elem ento en la pgina. Los v ab res posibles son: b lock, i n l i n e y none. Los v ab res block c
in l i n e m uestran el elem ento com o u n elem ento de b b q u e o en lnea, m ientras q u e none evita que se despliegue
el elem ento en pantalb. El cdigo para el m en desplegable se m uestra en la figura 4.17.
1

<IDOCTYPE h t* l>

3
4

< 1-- Fig. 4.17: desplegab1e.html >


< !-- Men desplegable de CSS. -->

Figura 4 .1 7

| Men desplegable de CSS (parte I de 3)

4.12

6
7
8
9

10
11
12
13
14
13
16
17
18
19
20

21
22

23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43

Mens desplegables

<html>
<head>
<fleta c h a r s e t = "utf-8">

< t1 tle >


Men&uacute; desplegable
< /t1 tle >
< sty le type = Mte x t / c s s >
body
{ fon t-fam ily : a r i a l , s a n s - s e r i f }
nav
{ font-weight: bold;
color: whlte;
border: 2px s o l l d RoyalBlue;
te x t - a l l g n : ce n ter;
w1 d t h : 10ei;
background-color: RoyalBlue; }
nav ul
{ display: none;
U s t - s t y l e : none;
nargln: 0;
padding: 0; }
nav:hovcr ul
{ d isp la y : block; }
nav ul 11
{ border-top: 2px s o l l d RoyalBlue;
background-color: whlte;
wldth: lOeti;
color: black; }
nav ul 11:hover { background-color: PowderBlue; }
a
{ te x t-d e c o ra tlo n : none; }
</style>
</head>
<body>
<nav>MenAuacute;
<ul>
< H x a h re f
M# M> In 1c 1o < /a x /l1>
<11 x a h re f
M#">Noticias</a></l1>
< H x a h re f
"i" >Art Al a c u t e ;cu l o s < / a x / l 1 >
< H x a h re f
# " >Blog</a></11>
< H x a h re f
#">Contacto</a></l1>
</ul>
</nav>

</body>
</htl>
a) Un men contrado

j Q -n
C 'Jl fie///Y;/ejemp*oVcap04/fig04_l7/deiplegat)le.Mml
5**01!U9odo
$ic
Ci Cmpcita^c *In#n-.

Figura 4 . 17 | Men desplegable de CSS (parte 2 de 3).

is

131

132

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

b) Aparece un men

E M*uduplrjtl

desplegable al colocar
el cursor del ratn

sobre Men.

file-7//Yyejemplovcap04/fig04.17/<Jespiegab(e.ntmi

V*>cs uqr>do

| j W*t 9 * 1 M W iy

C ) lm p c * * d o 4* Ifltcm

M en
In ic io

N oticias
A rtcu lo s
B lo q
C ontacto

c) Al colocar el cursor

J Ww-Vdr^Ugt-i#

del ratn sobre un


vn ciio del men se
salta ese vnculo.

j Wey//Y;/ejempk>vcjp04/fig<MJ7/(Jplegat>4e.html

S.t.o
I

\
A'e6 S(KC

fcnpcrtKe

Pi

u?

Wtm..

Men
m id o
N oticias
A rtic u lo ^
B lo g 0
C o ntacto

1r

Nml

Figura 4.17 | Men desplegable de CSS (parte 3 de 3).


Las lincas 33 a 41 crean un elem ento nav que contiene el texto Men y una lista desordenada ( u l ) de cinco
vnculos que deben aparecer en el m en desplegable: I n ic i o , N o ticias, A rtcu lo s, Blog y Contacto. En un
principio. Men es el nico texto visible en b pgina. Al pasar el cursor del ratn sobre el elem ento nav, aparecen
los cinco vnculos debajo del men.
La funcionalidad del m en desplegable se encuentra en el cdigo de CSS3. D os lneas definen b funcio
nalidad desplegable. La lnea 19 establece d isp la y en none para una lista desordenada (u l) que est anidada en
u n elem ento nav. Esto indica al navegador q u e no despliegue el contenido d e u l. La lnea 23, que es sim ilar a
la lnea 19, selecciona slo los elem entos u l anidados en un elem ento nav que tiene en esc m om ento al ratn
sobre l. Al establecer d is p la y en b lo ck especificamos que cuando el ratn est sobre el elem ento nav. b lista
u l se m ostrar com o elem ento a nivel de bloque.
El estilo en la lnea 28 se aplica slo a un elem ento l i que sea hijo de u n elem ento ul en un elem ento nav,
y slo cuando ese 11 tenga el cursor del ratn encima. E ste estilo cam bia b propiedad b a c k g ro u n d -c o lo r de b
opcin del m en que est resaltada en ese m om ento. El resto del cdigo CSS sim plem ente agrega estilo a b s
com ponentes del m en.
Este m en desplegable es slo un ejem plo de form ato ms avanzado de CSS. H ay m uchos recursos adicio
nales en lnea para ments de navegacin y listas de CSS.

4.13

(Opcional) Hojas de estilo de usuarios

Los usuarios pueden definir sus propias h o jas d e estilo d e u su a rio s para aplicar form ato a las pginas con base
en sus preferencias. Por e je m p b , b s personas con dscapacidad visual tal vez deseen aum entar el tam a o del

4 .13

(O pcional) Hojas de estilo de usuarios

133

texto de la pgina. Hay que tener cuidado de no rtdefinir de manera inadvertida as preferencias de usuario con los
estilos definidos. En esta seccin hablaremos sobre los posibles conflictos entre los estilos d e a u to r y los estilos
de u su a rio . Para los fines de esta seccin, dem ostrarem os los conceptos en Internet Explorer 9.
La figura 4 .1 8 contiene un estilo de autor. La propiedad f o n t - s i z e se establece en 9 p t para todas las e ti
quetas <p> a las que se aplique la dase nota.

<! DOCTYPE httl>

3
4
3
6
7
8

9
10
11

<1 Fig. 4.18: usuario, a b s o lu to .h tn l >


< ! - - Medicin p t para el tamao del te x to . -->
<ht*l>
<head>
o * eta c h a r s e t " u tf-8 " >

< t 1 tl e > E s tilo s de u s u a r io < / titl e >


< sty le type = " te x t/c s s" >
.nota { f o n t-s iz e : 9pt; }
< /style>

12

</head>

13
14
15
16
17

<body>
<p>Gracias por v i s i t a r mis i t i o .
Espero que lo d i s f r u t e .
</p><p c l a s s * nota">Nota: Este s i t i o se mover&aacute;
p ronto. V is it e con frecuencia para ver si hay actu aliz a c io n e s.< /p >
</body>

A
*

VA*3wplo%\<M)4\f^W.irs4m^ P C X j J FdrkH<Uuuone

..1

Gracias por visitar mi sitio. Espero que lo disfrute.


Ntt E n

wbo 38 o te v ff* p ro n to V iuto c o n

fttcutncu para v r t u h a \ Ktuikisocori

Figura 4 .1 8

| Medicin pt para el tamao deltexto.

Las hojas de estilo de usuario son hojas de estilo externas. La figura 4 .1 9 m uestra una hoja de estilo de
usuario que establece la propiedad f o n t - s i z e del elem ento body en 20p t, la propiedad c o lo r en yello w y
b ack g ro u n d -co lo r en navy. El valor d e f o n t - s i ze especificado en la hoja de estilo de usuario entra en conflicto
con el de la lnea 10 de la figura 4.18.

1 / Fig. 4.19: e s t i l o s u s u a r i o . c s s * /
2 / Una hoja de e s t i l o s de u su a rio * /
3 body
{ f o n t-s iz e : 20pt;
4
co lo r: yellow;
3
background-color: Navy; }
Figura 4 .1 9

| Una hoja de estilos de

usuario.

Agregar una hoja ele estilo de usuario


Las hojas de e s tib de usuario no estn vinculadas a un docum ento, sino q u e se establecen en las opciones del
navegador. Para agregar una hoja de e stib s de usuario en 1E9, seleccione la opcin Opciones de I n t e r n e t . . .

13 4

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte l

que se encuentra en el m en H erram ientas . E n el cuadro de dilogo Opciones de I n t e r n e t (figura 4.20) que
aparezca, haga clic en A c c e sib ilid a d ..., seleccione la casilla de verificacin Formatear lo s documentos con
m1 hoja de e s t i l o s y escriba La ubicacin d e la hoja de estilos de usuario. IE9 aplicar la hoja de estilos de
usuario a cualquier docum ento que cargue. Para agregar una hoja de estilos de usuario en Firefox, busque su
perfil de Firefox m ediante las instrucciones en w w w .m o zilla .o rg /su p p o rt/firefo x /p ro fi l e f l o c a t e y colo
que una hoja de estilos llamada userC on tent.ess en el subdirectorio chrome. Para obtener inform acin sobre
a5m o agregar una hoja de estilos de usuario en C hrom e, vea vnw.google.com/support/forum/p/Chrome/thr

ead?tid-lfa0dd079dbdc2ff& hl-en.

Opoooei de internet
Opoonet

ir

Conten*

F jra a o cx-ita**: d * c i a r a s rr o o a . < rfca caco S recoar. en

tro bnta ncpmrolr

J [tMv predetnrnna Utap^mbterco


HattfM de
arene ctv.cn krpyain, hrton4. cootar, con***
e r^ortvooon de Comimos web.

f Eren* futen* deetpbr&on* ur


ttarenar...

P
-estato

Corro* :*t opoones


predetenrenod de buvd*
CtfTde forvMen g.(os pgn
*eb x rrueafranen bs peeteAes

Apnenos
Colores

CcrQj*xn
Cordgj'joon

Acce*W.ded

Id o n es

C*ntr los cckfts


en cognac *et>
Cmt ios czkx de fcior.te cspeofejdos en p ig ra wcd
! Orw! lo tonVn de fuerte* espeofeodos en p ig ra *t*
Mofede esdoc dd uooaro
/ Formeeror bv docunmt conn hop de ntta
Ho^ede eittoe:

Lxrr*

L
Figura 4 -2 0 | Hoja de estilos de usuario en Internet Explorer 9.
La pgina W eb d e la figura 4.18 aparece en la figura 4 .2 1 . en d o n d e se aplica la hoja de estilos de usuario
de la figura 4.19.

Definicin de f o n t - s l z e en una hoja de estilos de usuario


En el ejemplo anterior, si el usuario define f o n t - s l z e en una hoja de estilos de usuario, el estilo de autor tiene
m ayor precedencia y redefine el estilo de usuario. La fuente de 9pt que se especifica en la hoja de e stib s de autor
redefine a la fuente d e 20pt que se especifica en la hoja d e estilos d e usuario. Esta p eq u e a fuente p u ed e

4 .13

(O pcional) Hojas de estilo de usuarios

135

___ a o

..I

G racias po r visitar mi sitio. Espero que lo disfrute.


N i Km am i r noven pwno Vnat cn M -m tvu pao m n htv rvsafeancnei

Figura 4 . 2 1 | Hoja de estilos de usuario aplicada con la medicin pt.


dificultar la legibilidad de las pginas, en especial para individuos con scapacidad visual Para evitar este pro
blema podem os usar mediciones relativas (com o em o ex) en vez de medidas absolutas com o p t. La figura 4.22
cam bia la propiedad f o n t - s i z e para usar una m edicin relativa (linea 10) que no redefine el estilo de usuario
establecido en la figura 4.19. En cam bio, el tam ao de fuente que se m uestra es relativo al que se especifica
en la hoja de estilos de usuario. En este caso, el texto encerrado en la etiqueta <p> se m uestra com o 2 0 p t y las
etiquetas <p> a las que se aplica la d ase n o te se m uestran en 15pt. (.7 5 por 20pt).

<!DOCTYPE htn1>

3
4
3
6
7

<! F ig . 4 .2 2 : u s u a r io _ r e la t iv o .h t m l >
< ! - - M edicin em p ara e l tamao d e l te x to .
< ht*l>
<head>
<ieta c h a rs e t n "u tf-8 ">

< t i t l e E s t i l o s de u s u a rio < /t1 tle >

9
10

< s ty le type " t e x t / c s s '>


.n o ta { f o n t - s iz e : .7Seai; }

11

</style>

12
13
14
13
16
17

-->

</head>
<body>

<p>Cracias por v i s i t a r mi s i t i o Web.Espero


que lo d i s f r u t e .
</p><p c l a s s = M
nota">Nota: Este s i t i o se mover&aacute;
pronto. V is i te con frecuencia para ver si hay actual izaciones.</p>
</body>

. i .

. g c r t u o t c i p

u w w j * p c

x jj

; . i t l c : d

x .l

Gracia* por visitar mi sitio Web. Espero que lo disfrute.


N ota. l i t e s a o m n o v e n p ro n to W n te c o n fre c u e n c ia p a ra ve* s i hiy ac tu o k c acio n e i
m

Figura 4 .2 2 | Medicin em para el tamao del texto.


La figura 4 .2 3 m uestra la pgina Web de la figura 4.22 en Internet Explorer, aplicando la hoja de estilos
de usuario de la figura 4.19. O bserve que la segunda lnea de texto que se m uestra es ms grande que la misma
lineade texto en la figura 4.21.

136

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte I

M1J

- u

Gracias po r visitar mi sitio W eb. Espero que lo disfrute.


Nota: Este sitio se mover pronto. Visite con frecuencia para ver si hay
actualizaciones.

Figura 4-23 | Hoja de estilos de usuario aplicada con la medicin em.

4.14

Recursos Web

http://w #r .d el t e l . com/css3

El C entro de recursos de CSS3 de D eitel contiene vnculos a sitios con parte de la m ejor inform acin sobre
CSS3 en Web. A h encontrar vnculos clasificados a tutoriales, referencias, ejemplos de cdigo, dem ostracio
nes, videos y ms. Revise la seccin de dem ostraciones para que vea ejem plos ms avanzados de diseos, ments
y o tro s com ponentes de pginas Web.

Resumen
Seccin 4.1 Introduccin
La tecnologa Hojas de estilo en cascada (3Cascading Style Shccts3) (CSS3; pg. 106) nos permite especificar la
presentacin de los dementos en una pgina Web (por ejemplo, fuentes, espaciado, tamaos, colores, posicionamiento)
por separado de la estructura y d contenido dd documento (encabezados de secciones, texto d d cuerpo, vnculos, etc.).
Esta separacin de estructura y presentacin (pg. 106) simplifica el mantenimiento y la modificacin de las pginas
Web, en especial en sitios Web de gran tamao.

Seccin 4JI Estilos en lnea


Un estilo en lnea (pg. 106) nos permite declarar un estilo para un elemento individual mediante d uso d d atributo
s ty le (pg. 106) en la etiqueta de inicio del elemento.
Cada propiedad de CSS (como fo n t-size, pg. 107) va seguida de dos puntos y dd valor dd atributo. Podemos separar
varias declaraciones de propiedades mediante punto y coma.
La propiedad color (pg. 107) establece el color dd texto. Podemos usar cdigos en hcxadecimal o nombres de cobres.

Seccin 4 3 Hojas de estilo incrustadas


Las hojas de estilo incrustadas (pg. 108) nos permiten incrustar un documento de CSS3 completo en la seccin de
encabezado de un documento de HTML5.
Los estilos que se colocan en un elemento sty le usan selectores (pg. 109) para aplicar dementos de estilo en todo el
cuerpo dd documento.
Un elemento em indica que hay que enfatizar su contenido. Por lo general los navegadores despliegan los dementos e
en una fuente en cursiva.

Resumen

137

FJ atributo typ# dd demento style especifica d tipo MIME (d formato de codificacin especfico, pg. 109) de b hoja
de estilas. Los hojas de estilo usan ttxt/css.
El cuerpo de cada regb (pg. 109) en una hoja de estilos empieza y termina con una Uave ({ y }).
La propiedad font-welght (pg. 110) especifica el grosor" del texto. Los valores posibles son: bold, normal
(el predeterminado), bolder (mis grueso que d texto bolder) y Hghter (mis ligero que d texto normal).
El grosor tambin puede especificarsecon mltiplos de 100, desde 100 hasta 900. FJ texto que se especifica como nornal
es equivalente a 400 y el texto bold es equivalente a 700.
A bs declaraciones de bs clases de estilo se les antepone un punto y se aplican a elementos de b clase especfica.
El atributo class (pg. 111) aplica una clase de estilo a un demento.
Las regias de CSS en una hoja de estilos usan d mismo formato que los estilos en lnea.
EJ atributo background-color especifica d color de fondo dd demento.
La propiedad fon t-f ail y (pg. 110) nombra una fuente especfica que debe mostrarse. Las familias de fuentes genricas
permiten a los autores especificar un tipo de fuente en vez de una fuente especfica, en caso de que un navegador no
soporte esa flente.
La propiedad font-slze (pg. 110) especifica d tamao que se utiliza para desplegar b flente.
Hay que terminar una lista de fuentes con d nombre de una familia de fuentes genricas (pg. 110) en caso de que bs
otras fuentes no estn instaladas en b computadora dd usuario.
En muchos casos, los estilos que se aplican a un elemento (el elemento padre o ancestro, pg. 111) tambin se aplican
a los elementos anidados de ese demento (elementos hijos o descendientes, pg. 111).

Seccin 4.4 Estilos conflictuados


Los estilos pueden ser definidos por un usuario, un autor o un agente de usuario. Un usuario (pg. 111) es la persona
que est viendo su pgina Web, usted es d autor (pg. 111) (b persona que escribe d documento) y d agente de usuario
(pg. 111) es el programa que se utiliza para desplegar y mostrar el documento (por ejemplo, un navegador Web).
Los estilos fluyen en cascada (de aqu que se use el trmino Hojas de estilo en cascada", pg. 111) o juntos, de tal forma
que b apariencia final de los elementos en una pgina resulta de b combinacin de los estilos definidos en varias formas.
la mayora de los estilos se heredan de las elementos padres (pg. 111). Los estilos que se definen para los hijos (pg.
111) tienen una mayor especificidad (pg. 112) y tienen precedencia sobre los estilos del padre.
Las subclases (pg. 113) otorgan acceso al autor a la informacin que no est declarada en d documento, como d hecho
de que d ratn est colocado sobre un elemento o si d usuario hizo dic antes (visit) en un hipervnculo especfico. La
subclase hover (pg. 114) se activa cuando el usuario mueve d cursor sobre un elemento.
La propiedad text-decoration (pg. 113) aplica bs decoraciones al rcxro en un elemento, como ur>derl1ne, overl Ine
y 11ne-through.
fra aplicar reglas a varios elementos, separe los elementos con comas en la hoja de estilos.
Para aplicar reglas slo a cierto tipo de demento que sea hijo de otro tipo, separe los nombres de los dementos con
espacios.
Un pixcl es una medicin de longitud rdariva (pg. 114): su tamao vara con base en la resolucin de b pantalla. Otras
longitudes rebtivas son en (pg. 114). ex (pg. 114) y los porcentajes.
Las otras unidades de medicin disponibles en CSS son mediciones de longitud absolutas (pg. 114); es decir, unidades
que no varen su tamao. Estas unidades pueden ser 1n (pulgadas), cm(centmetros, pg. 114), nm(milmetros,
pg. 114), pt (puntos: lpt = 1/721 n, pg. 1 14) o pe (picas; lpc - 12pt).

Seccin 4.5 Vinculacin de hojas de estilo externas

Con tan hojas de estilo externas (es decir, documentos separados que slo contienen reglas de CSS; pg. 114), es posible
proporcionar una apariencia visual uniforme a todo un sitio Web completo (o a una parte del mismo).

Si necesitamos cambiar estilos, slo es necesario modificar un archivo de CSS para realizar cambios de estilo en todas las
pginas que usen esos estilos. A esto se le conoce algunas veces como skinning" (pg. 114).

138

Captulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte I

Las comentaras de C SS (pg. 115) pueden colocarse en cualquier tipo de cdigo CSS (como estilos en lnea, hojas de
estilo incrustadas y hojas de estilo externas) y siempre empiezan con /* y terminan con */.

El atriburo re de un vinculo (pg. 115) especifica una rrlacin entre dos documcnros (pg. 115). Rara las hojas de
estilo, d atributo re declara d documento vinculado como sty lesh eet (pg. 115) para d documento. El atributo
type especifica d tipo MIME dd documento relacionado como te x t/e ss. El atributo h ref proporciona d URL para d
documento que contiene la hoja de estilos.

Seccin 4 .6 Posiciotiam ien to de elementas: posicionamiento absoluto, z-Yndex

La propiedad positlon de CSS (pg. 116) permite d posicionamiento absoluto (pg. 117), que proporciona un mayor
control sobre la posicin de los elementos en una pgina. Al especificar la propiedad positlon de un elemento como
absolute src se dimina del Rujo normal de elementos en la pgina y se posiciona de acuerdo con la distancia a partir
dd margen superior (top), izquierdo (le ft), derecho (rig h t) o inferior (botton) de su elemento padre.
La propiedad z-index (pg. 118) permite a un dcsarrollador colocar en capas los elementos que se traslapan. I-os
elementos con valores mayores de z-index se muestran frente a los elementos con valores menores de z-index.

Seccin 4 .7 Posicionamiento de los elemetitos: posicionamiento relativo, span

A diferencia dd posicionamiento absoluto, el posicionamiento relativo mantiene los dementos en el flujo general en la
pgina y los desplaza con base en d valor especificado de top. l e f t, rig h t o botton.
El elemento span (pg. 120) es un demento de agrupacin (pg. 120); no aplica ningn formato inherente a su
con tenido. Su principal propsito es aplicar reglas de CSS o atributos id a una seccin de texto.
span es un elemento de nivd en lin o (pg. 120); aplica formato al texto sin cambiar d flujo del documento. Algunos
ejemplos de documentos en lin o son: span, img, a, ei y strong.
El elemenro div tambin es un demento de agrupacin, pero es un elemento a nivel de bloque. Esto significa que se
muestra en su propia lin o y tiene una caja virtual a sii alrededor. Algunos ejemplos de elementos a nivd de bloque (pg.
120) son: d1v (pg. 120), p y los elementos de encabezado (hl a h6).

Seccin 4.8 Fondos


La propiedad background-1 mage especifica el URL de la imagen, en d formato urM.ubicMinArchivo'). 1.a propiedad
background-positlon (pg. 121) coloca la imagen en la pgina asando los valores top, bottom, e tn te r, l e f t y rig h t
de manera individual o en combinacin para el posicionamiento vertical y horizontal. Tambin es posible posicionar
mediante el uso de longitudes.
La propiedad background-repeat (pg. 121) controla la fotma de colocar en mosaico la imagen de fondo (pg. 121).
Si se establece d mosaico a no-repeat. se muestra una copia de la imagen de fondo en b pantalla. La propiedad
background-repeat puede establecerse en repeat (el valor predeterminado) pata colocar en mosaico vertical y horizontal
b imagen, en repeat-x para colocar b imagen slo en mosaico horizontal o en repeat-y para colocar b imagen slo
en mosaico vertical.
La opcin flxed de background-attachment (pg. 121) fija b imagen en la posicin especificada por backgroundposltlon. Si se desplaza b ventana dd navegador no se mover la imagen de su posicin establecida. 1 valor
predeterminado es se rol 1 y mueve b imagen a medida que d usuario desplaza b ventana.
La propiedad te x t- i ndent (pg. 122) aplica sangra a b primera lnea de texto en d demento con base en b cantidad
La propiedad font-style (pg. 122) nos permite establecer d texto en none. Ita llc u obllque.

Seccin 4.9 Dimensiones de los elementos

Es posible establecer las dimensiones de un elemento mediante CSS. usando bs propiedades height y wi dth (pg. 123).
H texto en un demento puede centrarse mediante te x t-a llg n (pg. 123): otros valores para b propiedad te x t-a llg n
son le f t y right.
Un problema al establecer b s dimensiones tanto vertical como horizontal de un demento es que d contenido dentro
de esc demento podrb exceder algunas veces los lmites establecidos, en cuyo caso el demento aumentar hasta
ajustarse al contenido, ftidcmos establecer b propiedad overflo** (pg. 123) para desplazar, esta opcin agrega barras
de dcspbzamicnro si el texto se desborda de los lmites establecidos.

Resumen

139

Seccin 4.10 Modelo de cajasy flu jo del texto


Todos los elementos de HTML5 a nivel de bloque tienen una a ja virtual dibujada a su alrededor, con base en lo que se
conoce como el modelo de cajas (pg. 123).
Cuando d navegador despliega elementos mediante d uso d d moddo de cajas, d contenido de cadademento va
rodeado de relleno (pg. 123), un borde (pg. 123) y un margen (pg. 123).
La propiedad borde r-wl dth (pg. 124) puede establecerse en cualquiera de bs longitudes de CSS o en d valor predefinido
de th1 n, nediun o thi ele.
Los estilos disponibles para border-style (pg. 124) son: none. hidden, dotted. dashed, sol id, double, groove, ridge,
in set y outset.
La propiedad border-color (pg. 124) establece el color que se utiliza para d borde.
El atributo class permite asignar ms de una clase a un elemento, separando cada nombre de clase dd sigutenre con
un espacio.
Por lo general los navegadores co lo an el texto y los ciernen ros en b pantalla en d orden en que aparecen en d documento.
Es posible quitar elementos dd flujo normal de texto. La tcnica de flotacin nos permite mover un demento hacia un
bdo de b pantalb; as(, d resto dd contenido d d documento fluir alrededor d d elemento flotante.
CSS utiliza un moddo de a ja s para desplegar dementos en b pantalb. El contenido de cada demento va rodado de
relleno, un borde y mrgenes. Los propiedades de esta caja se ajustan con facilidad.
La propiedad nargin (pg. 127) determina b distancia entre el borde exterior dd borde d d elemento y cualquier
demento adyacente.
Es posible especificar mrgenes para cada uno de los bdos de un demento mediante d uso de margin-top, raargin
ri ght, m argin-left y raargin-bottom.
La propiedad padding (pg. 127) determina b distancia entre d contenido dentro de un demento y b orilb interior dd
borde. Tambin puede establecerse d relleno para cada bdo de b caja mediante el uso de padding-top, padding-right.
padding-left y paddi ng-bottora.

Seccin 4.11 Tipos de medios y consultas de medios


Los tipos de medios de CSS (pg. 127) nos permiren decidir cul ser la apariencia de una pgina, dependiendo de! ripo
de medios que se utilicen p r a visualizarla. El que se utiliza con ms frecuencia p r a una pgina Web es d ripo de medios
scrn (pg. 127), que viene siendo una pntalla de computadora estndar.
Un bloque de estilos que se aplica a todos los tipos de medios se declara mediante media a ll y va encerrado entre llaves,
ftira crear un bloque de estilos que se apliquen a un solo tipo de medios como p rin t, use media p rin t y encierre las
reglas de esrilo entre llaves.
Otros tipos de medios en CSS 2 son: handheld, b ra llle , aural y p rin t. El medio handheld (pg. 127) est diseado
p r a dispositivos mviles de Interna, mientras que b r a llle (pg. 127) es p r a mquinas que puedan leer o imprimir
pginas Weben braille. EJ estilo aural (pg. 127) p rm itc a l programador proporcionara! navegador Web con c a p e idad
de sntesis de voz ms informacin sobre d contenido de la pgina Web. El ripo de medios p rin t (pg. 127) afecta la
a p rie n c de una pgina Web cuando se va a imprimir.
las consultas de medios (pg. 130) nos prm iten aplicar formato al contenido p r a dispositivos de salida especficos.
Las consultas de medios incluyen un tipo de medios y expresiones que comprueban las caractersticas de medios de los
dispositivos (pg. 130).

Seccin 4.12 Mens desplegables


La subclase :hover se utiliza para aplicar estilos a un demento cuando se coloca d ratn sobre 1.
La propiedad d1 splay (pg. 130) nos permite decidir si un elemento debe mostrarse como block o como 1nllne,
o si no debe desplegarse en p n talla (none).

Seccin 4.13 (Opcional) Hojas de estilo de usuarios


Los usuarios pueden definir sus propias hojas de estilo de usuario (pg. 132) p r a dar formato a las pginas con base en
sus preferencias.

140

Capitulo 4

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte I

Las mediciones de los tamaos de fuentes absolutos redefinen lashojas deestilo deusuario,mientrasque los tamaos
de fuentes rdarivos ceden ante un estilo definido por el usuario.
Si el usuario define ci tamao de fuente en una hoja de estilosdeusuario, d estilo deautor (pg.133) tiene mayor
precedencia y redefine el estilo de usuario.

Ejercicios de autoevaluacin
4.1

Suponga que el tam ao de la fuente base en un sistem a es de 12 puntos.


a)
b)
c)
d)
c)

4.2

Qu tan grande es una fuente de 36 puntos en cm?


Qu tan grande es una fuente de 9 puntos en em?
Qu tan grande es una fuente de 24 puntos en picas?
Qu tan grande es una fuente de 12 puntos en pulgadas?
Qu tan grande es una fuente de 1 pulgada en picas?

Complete las siguientes oraciones:


a) Mediante el demento_____________ es posible usar hojas de estilo externas en sus pginas.
b) Para aplicar una regla de CSS a ms de un elemento a la vez, separe los nombres de los elementos con un(a)
c) Los pxdes son una unidad de medicin de longitud_____________.
d) La subclase_____________ se activa cuando d usuario mueve d cursor dd ratn sobre el elemento especificado.
c) Al establecer la propiedad____________ en scroll se proporciona un mecanismo para crear contenido desplazablc
sin comprometer las dimensiones de un elemento.
0 _____________ es un demento en lnea genrico que no aplica formato inherente y
es un elemento
genrico a nivel de bloque que no aplica formato inherente.
g) Al establecer la propiedad background- repeat en_____________ se coloca en mosaico vertical la imagen especifica
da por backgrouod-Image.
h) Para comenzar un bloquede estilos que se aplique slo al tipo de medio prlnt, usamos la declaracin_____________
prlnt seguida de una llave de apertura ({).
i) La propiedad_____________ nos permite aplicar sangra a la primera linca de texto en un demento.
j) Los tres componentes dd modelo de cajas son____________ , ______________y _____________ .

Respuestas a los ejercicios de autoevaluacin


4.1
4 .2

a) 3 ns. b) 0.75 ens. c) 2 picas, d) 1/6 pulgada, e) 6 picas.


a) vinculo). b)coma. c) relativo, d) rhover. e)overflow. f)span,d1v. g) repeat-y. h)fcted1a. i) text-1ndent.
j) relleno, borde, margen.

Ejercicios
4.3
4.4
4 .5

4.6

Escriba una regla de CSS que haga todo el texto 1.5 veces ms grande que b fuente base dd sistema y coloree el texto
en rojo.
Escriba una rcgb de CSS que coloque una imagen de fondo en b mitad inferior de b pgina, en mosaico horizontal.
La imagen deber permanecer en su lugar cuando el usuario se dcspbcc hacia arriba o hacia abajo.
Escriba una regla de CSS que proporcione a todos los elementos hl y hj? un relleno de 0.5 etts, un estilo de borde
dashed y un margen de 0.5 ens.
Escriba una rcgb de CSS que cambie el color de todos los elementos que contengan d atributo class verdeMover " a verde y los desplace 25 pxdes hacia abajo y 15 pxclcs a b derecha.

Ejercicios

4.7

4.8

4.9

141

Haga una plantilla de diseo que contenga un elemento header y dos prrafos. Use flo a t para alinear los dos p
rrafos como columnas, uno al lado del otro. Asigne un borde y/o un color de fondo al elemento header y a los dos
prrafos, para que pueda ver en dnde estn.
Agregue una hoja de estilo incrustada al documento de HTML5 de la figura 2.3. La hoja de estilo debe contener una
regla para mostrar los elementos hl en color azul. Adems cree una regla que muestre todos los vnculos en azul sin
subrayarlos. Cuando cl ratn pase sobre un vnculo, cambie d color de fondo de ese vnculo a amarillo.
Cree un botn de navegacin mediante un demento div con un vnculo en su interior. Asgnde un borde, fondo y
color de texto, y haga que cambien cuando d usuario pase d ratn sobre d botn. Use una hoja de estilo externa.
Asegrese de que su hoja de estilos se valide en h ttp ://j1 g san .w 3 .o rg /css-v al1 d ato r/. Tenga en cuenta que algu
nas advertencias tal vez no puedan evitarse, pero su CSS no debera tener errores.

5
A rte es cuando as cosas parecen
redondas.
M an rice D e n i a

En cuestin de estilo, nadar con la


corriente; en cuestin de principios,
plantarse como una roca.
T ilo m as J d f c r i o n

Todo lo que vemos es una sombra


proyectada por aquello que no
vemos.
M a rtin L u t h e r K m g . J r.

Objetivos
En este captulo aprender a:
Agregar sombras de texto y
efectos de trazo de texto.
Crear esquinas redondeadas.
Agregar sombras a elementos.
Crear gradientes lineales y
radiales, adems de reflexiones.
Crear animaciones, transiciones
y transformaciones.
Usar mltiples imgenes de
fondo y bordes de imgenes.
Crear un diseo de varias
columnas.
Usar el diseo de modelo de
cajas flexible y los selectores

:nth-child.
Usar la regla e f o n t- f a c e para
especificar las fuentes de una
pgina Web.
Usar colores RGBA y HSLA.
Usar prefijos de proveedor.
Usar consultas de medios para
personalizar el contenido y
adaptarlo a diversos tamaos
de pantalla.

Introduccin a las hojas de


estilo en cascada (Cascading
Style Sheets, CSS): parte 2

Plan general

5.1

Introduccin

5.1 Introduccin

5.12 Animacin: selectores

5.2 Sombras de texto

5.13 Transiciones y transformaciones

5.3 Esquinas redondeadas


5.4 Color
5.5 Sombras de cajas
5.6 Gradientes lineales: introduccin a los prefijos
de proveedor

5.7 Gradientes radiales


5.8 (Opcional: WebKit solamente) Trazo de texto
5.9 Mltiples imgenes de fondo
5.10 (Opcional: WebKit solamente) Reflejos
5.11 Bordes de imgenes

143

5.13.1 Las propiedades tra n s t1on y


transform
5.13.2 Inclinacin
5.13.3 Transiciones entre imgenes

5.14 Descarga de fuentes Web y la regla


fifo n t-fa ce

5.15 Mdulo de diseo de caja flexible y selectores


:n th - c h ild

5.16 Diseo multicolumna


5.17 Consultas de medios
5.18 Recursos Web

Resumen | ejercicios de autoevaluacin | Respuestas a los ejercicios de autoevaluacin | Ejercicios

5.1

Introduccin

En el captulo anterior presentam os las hcrram icntxs tradicionales de CSS. En este captulo presentarem os
muchas caractersticas nuevas en CSS3 (vea los objetivos).
Estas herram ientas se estn integrando en los navegadores, lo que produce un desarrollo W eb ms econ
mico y veloz, adem s de una m ejora en el rendim iento del lado cliente. Esto reduce La necesidad de bibliotecas
de JavaScript y paquetes de grbeos sofisticados com o Adobe Photoshop, Adobe Illustrator, C orel PaintShop
IVo y G im p para crear efectos interesantes.
CSS3 an se encuentra en desarrollo. Nosotros m ostrarem os m uchas herram ientas clave de C S S 3 que se
encuentran en el proyecto de norm a, as com o algunas herram ientas no estndar que tal vez se agreguen en un
m om ento dado.

5.2

Sombras de texto

La propiedad tex t-sh ad o w de C SS3 facilita la accin de agregar un efecto de so m b ra d e te x to a cualquier irxto
(figura 5.1). Primero agregam os una propiedad te x t-sh a d o w a nuestros estilos (lnea 12). La propiedad tiene
cuatro valores: -4px, 4px, 6px y DlnGrey, los cuales representan:
El desplazam iento horizontal de la som bra: el nm ero de pxclcs que aparecer el elem ento t e x t - shadow
a la izquierda o a la derecha del texto. En este ejem plo, el desplazam iento horizontal de la som bra es -4px.
U n valor negativo mueve el elem ento te x t-sh a d o w a la izquierda : u n valor positivo lo mueve a la derecha.
El desplazam iento vertical de b sombra: el nm ero de pxclcs que se dcspbzar el elem ento te x t - s h a dow hacia arriba o hacia abajo del texto. En este ejem plo, el desplazam iento vertical d e b som bra es 4px.
U n valor negativo mueve b som bra hacia arriba, m ientras que un valor positivo b mueve hacia abajo.
El rad io d e d esen fo q u e: el desenfoque (en pxclcs) de b som bra. U n radio de desenfoque de Opx
producira una som bra con un borde ntido (sin desenfoque). Entre m ayor sea el valor, mayor ser el
desenfoque de b s orillas. N osotros usamos un radio de desenfoque de 6px.
El c o lo r: determ ina el color del elem ento tex t-sh ad o w . N osotros usam os dim grey.

144

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

<!DOCTYPE html>

3
4
3
6
7

f
10

< ! - - Fig. 5.1: sombratexto.html -->


< ! - - Sombra de te x to en CSS3. -->
<html>
<head>
<meta c h a r s e t " u t f - S >
<titie>Sombra de t e x t o < / t i t l e >
<style type Mt x t/css">
hl

11

12
13
4
15

text-shadow: -*px 4px 6px dingrey: / * agrega sombra * /


f o n t- s iz e : 400%; / * aumenta el tamao de l a fuente * /
}
</style>

16

</head>

17
18
If
20

<body>
<hl>Sombra de texto</hl>
</body>
</html>

____________________________
Som era J u tc
*

Jj ble7//X/ejemp)oV<*p05/ig05_01/somi>atexto.htmJ

l j S*oKp^endc Q

S*<eG^lery O lmpudo d e Intem


*

tex t-sh ad o w ____


ooior dimgrey

Sombra de texto
.

Figura 5.1 | Sombra de texto en CSS3.

5.3

Esquinas redondeadas

La propiedad border-radius nos permire agregar esquinas redondeadas a un elem ento (figura 5.2). En este ejem
plo creamos dos rectngulos con bordes slidos color Navy. Para cl prim er rectngulo, establecemos b propiedad
b o rd e r-ra d iu s en 15px (linea 17). Esto agrega esquinas ligeramente redondeadas al rectngulo. Para el segundo
rectngulo, aum entam os el valor de b o rd e r-ra d iu s a 50px (lnea 27) y los bdos izquierdo y derecho se vuelven
completam ente redondos. Cualquier valor de b o rd e r-ra d iu s mayor que b mitad d e b longitud del b d o ms corto
produce un extremo totalmente redondo. Tambin pdeme especificar el radio de cada esquina con b o rd e r-to p le f t- r a d i u s ,b o r d e r - to p - r ig h t - r a d iu s ,b o r d e r - b o t to m - le f t- r a d i u s y b o rd e r-b o tto m -rig h t-ra d iu s .

<!DOCTYPE htl>

3
4
3
6
7

<1 Fig. 5.2: esquinasredondeadas.html >


< ! Uso de bo rd er-rad iu s para agregar esquinas redondeadas a dos elementos. -->
<ht*il>
<head>
<meta c h a rs e t = u tf-8 " >

Figura 5 .2 | Uso de b o rd er-rad iu s para agregar esquinas redondeadas a dos elementos (parte I de 2).

5.4

8
9
10

12
13
14
13
16
17
18
19
20

}
#redonda2

21

37

145

<title> E squinas redondeadas</t1tle>


< sty le type = " t e x t / c s s >
d1v

11

22
23
24
23
26
27
28
29
30
31
32
33
34
33
36

Color

border:
3px sol id navy;
padding: Spx 20px;
background: lightcyan;
Mldth: 200px;
t e x t - a l i g n : center;
b o rd e r-ra d iu s: ISpx; / agrega esquinas redondeadas */
nargin-bottom: 20px;

border:
3px sol id navy;
padding: Spx 20px;
background: lightcyan;
wi d t h : 200px;
t e x t - a l i g n : center;
b o rd e r-ra d iu s: SOpx; / * aumenta b o rd e r-ra d iu s

*/

>
</style>
</head>
<body>
<div>La propiedad b o rd er-ra d iu s agrega esquinas redondeadas
a un elemento.</div>
<div id = Mredonda2">Al aumentar el v a lo r de b o rd e r-ra d iu s se redondean
a&uacute;n
m&aacute;s l a s esquinas del elemento.</d1v>
</body>
</ht*l>
1111 fu

redondcrtts
C

J (ile-y//X7jrtiploi/c^p05/(g0S.02/quinsfeaondeidas html

j S* 0 4 KU9 ^ d e

........

* \

Sl*c# G *U ry

>Tipctad d e H c n .

...

. .. .

La ptopxedad bocdet :adna


i p t p k tiq im as ft&fkdea&u a
un dement

Ai aumentar d \-o f de tordnradni se redondean aro mas las


esquinas dd demento

Figura 5 .2 | Uso de bo rd er-rad iu s para agregar esquinas redondeadas a dos elementos (parte 2 de 2).

5.4

Color

CSS3 nos permite expresar el color de varias formas, adems de los nombres de colores estndar (como Aqua) o
valores RGB hexadecimaies (como #00FFFF para Aqua). R G B (rojo, verde, azul-) o RG BA (rojo, verde, azul, alfa)
nos dan un mayor control sobre los colores exactos en nuestras pginas Web. El valor de cada color (rojo, verde y
azul) puede variar enrreOy255.Elvalor$&(que representa la o p a c id a d ) puede ser cualquier valor en el rango de 0.0
(transparencia toral) hasta 1.0 (opacidad toral). Porejcmplo.sicstablececlcolorbackgrounddc la siguiente forma:

146

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

background: rgba(255, 0 . 0 . 0 .5 )

el color resultante sera un rojo m edio opaco. Al usar colores RGBA obtenem os m uchas ms opciones que si
usam os los nom bres de colores de H T M L existentes; hay cerca de 140 nom bres de colores de H T M L , mientras
que hay 1 6 7 7 7 2 1 6 colores RGB distintos (256 x 256 x 256) y diversas opacidades de cada uno.
CSS3 tam bin nos perm ite expresar color m ediante valores H S L (tin te , sa tu ra c i n , clarid ad ) o H SLA
(tin te, satu raci n , claridad, alfa). El tinte es un color o som bra que se expresa com o un valor de 0 a 359 para
representar los grados en una rueda de colores (una rueda tiene 360 grados). Los colores en la rueda progresan
en el orden de los colores del arcoris: rojo, naranja, am arillo, verde, azul. ndigo y violeta. El valor de rojo, que
est al principio de la rueda, es 0. Los tintes verdes tienen valores cercanos a 120 y los tintes azules tienen valo
res cercanos a 240. Un valor de tin te d e 359, que est justo a La izquierda de 0 en b rueda, producira un tin te
tojo. La saturacin (intensidad del tinte) se expresa com o un porcentaje, en d o n d e 100* es saturacin total (el
color com pleto) y 0X es gris. La claridad (intensidad de luz o lum inancia del tinte) tam bin se expresa com o un
porcentaje. U na claridad de 50% es el tin te actual. Si reduce b cantidad de luz a 0%, el color aparece totalm ente
oscuro (negro). Si aumenta b cantidad d e luz a 100X, el color aparece totalm ente claro (blanco). Por ejemplo,
si desea usar un valor h s la para o b ten er el m ism o color rojo que en nuestro ejem plo de u n valor rg b a. debe
establecer b propiedad background as:
background: h s la ( 0 , 100X, S0X, 0 .5 ) ;

El color resultante sera un rojo medio opaco. U na herram ienta cxcclcncc que nos perm ite elegir colores d e una
rueda para encontrar los valores RGB y H SL correspondientes est en:
h ttp ://d w y w .w o rk w 1 th c o lo r.c o a /h sl-c o lo r-sc h e m e r-0 l.h t

5.5

Sombras de cajas

Podem os aplicar som bra a cualquier elem ento a nivel de bloque en CSS3. La figura 5.3 nos m uestra cm o
crear una so m b ra de caja. El estilo d iv en las lneas 10 a 19 indica que los elem entos d1v son cajas de 200px
por 200px con un fondo color Plum (lneas 12 a 14). A continuacin, agregamos la propiedad box-shadow con
cuatro valores (lnea 15):

Desplazam iento horizontal d e la som bra (25px): el nm ero de pxclcs que aparecer el elem ento boxshadow a la izquierda o a la derecha de la caja. U n valor positivo desplaza el elem ento box-shadow a la

derecha.

Desplazam iento vertical de b som bra (25px): el nm ero de pxclcs que se desplazar el elem ento boxshadow arriba o debajo de b caja. U n valor positivo mueve el elem ento box-shadow hacia abajo.
Radio d e desenfoque: un radio de desenfoque d e Opx producira u n a som bra con un borde ntido (sin
desenfoque). E ntre m ayor sea el valor, ms desenfocados estarn los bordes de b som bra. N osotros usa
mos un radio de desenfoque de lOpx.
Color: el color del elem ento box-shadow (en este caso, dlm grey).
E n las lneas 20 a 26 cream os un estilo que se aplica slo al segundo d1v, q u e cambia el desplazam iento h o
rizontal de box-shadow a -25px y el desplazam iento vertical a -25px (lnea 25) para m ostrar los efectos de usar
valores negativos. Un valor de desplazam iento horizontal negativo mueve el elem ento box-shadow a b izquierda.
U n desplazam iento vertical negativo mueve b som bra itocia arriba.

5.5

Sombras de cajas

147

<! DOCTYPE htil>

< 1-- F1g. 5.3; som b racaja.h tm l -->

4
5

<l C re a c i n de e f e c t o s de sombra de t e x t o . -->


<h tl >

<head>

<*eta charset = Mu tf-8">

<title>Sombra de c a j a < / t i t l e >


<style type = " te x t/c ss " >

10

div

11

12

13
14

13
16
17

flo a t: le ft;
nargin-right: 120px;
margin-top: 40px;

18

19

width: 200px ;
height: 200px;
background-color:
plun;
box-shadow: 25px 2Spx SOpx dimgrey;

20

# c a ja 2

21

22

23
24

23
26

27

h2

28
29

30

31
32
33
34
33
36
37

width: 200px ;
height: 200px;
background-color:
plum;
box-shadow: -2Spx -2Spx SOpx dimgrey;

text-align: center;
</style>
</head>
<body>

<d1vxh2>Sombra de c a ja i n f e r i o r y derecha< /h2x/div>


<div id - ,c a ja 2 Mxh2>Sombra de c a ja s u p e rio r e iz q u ie rd a < /h 2 x /d iv >
</body>
</html>

_______________________________
/ Q Somtfi CkC#>8
* \ ________________________________________________
C
j

jQ tn v c s

fi*ey//X/ejempios/cap05/fig05.03/somt>r^j^.Mmi
(

Weto S k t Gatlcry Q

I n 'f o tttd o de k i t r n

S o m b ra de c a ja
in fe rio r vW d e re c h a

Figura 5 .3 | Creacin de efectos de sombra de texto.

S o m b ra de c a ja
s u p e r io r e
izq u ierd a

f*

148

5.6

Capitulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

Gradientes lineales: introduccin a los prefijos de proveedor

Los g rad ien tes lineales son un tipo de im agen que cam bia en form a gradual de un color al siguiente en sentido
horizontal, vertical o diagonal. Es posible realizar transiciones entre tantos colores com o desee, adem s de espe
cificar los puntos en los cuales hay q u e cam biar de color, conocidos com o c o lo r - s to p , los cuales se representan
en pxcles o porcentajes a lo largo de la Unta de gradiente el ngulo en el cual se extiende el gradiente. Podemos

usar gradientes en cualquier propiedad que acepte una imagen.

Creacin de gradientes lineales


E n la figura 5.4 creamos rres gradientes lineales ( vertical horizontal y diagonal) en rectngulos separados. Al
estudiar este ejemplo notar que la propiedad background de cada uno de los tres estilos de gradiente lineal (ver
tical. horizontal y diagonal) se define varias veces en cada estilo: una para los navegadores basados en W ebKit,
otra para M ozilla Firefox y una ms en la que se usa la sintaxis estndar de C SS3 para gradientes lineales. E sto
ocurre con frecuencia al trabajar con CSS3, ya que m uchas de sus funciones an no estn term inadas. M ientras
tanto, m uchos de los navegadores se adelantaron y em pezaron a im plem entar estas funciones para que usted
pueda usarlas ahora. Ms adelante en esta seccin hablarem os sobre los prefijos de proveedor que nos perm iten
usar m uchas de las funciones en evolucin de CSS3.
1
2

<!DOCTYPE h t* l>

3
4
3
6
7

<1 Fig. 5.4: g ra d ien te1 1n e al.h tm l -->


< 1 - - G radientes l i n e a l e s en C S S 3 . >
<htil>
<head>
<meta c h a r s e t u tf-8 " >

< t1 tle > G ra d ie n te 1 i n e a l < / t i t l e >

9
10

< sty le type = "text/css">


d1v

12
13
14
15
16
17
18
19
20
21

width: 200px;
h elg ht: 200px;
border: 3px solid navy;
padding: Spx 20px;
t e x t - a l i g n : center;
background: -w eb k 1 t-g ra d ie n t(
linear, center top, center bottoai,
c o l o r - s t o p (15%, Whlte), color-stop(S0% ,
c o l o r - s t o p (75%, navy) ) ;

1 ightsteelblue) ,

background: - * o z - l1 n e a r - g r a d 1 e n t(

22

top center, whlte 15%, 1 Ightsteelblue 50%,navy 7S% );

23

background: 1 1 n e a r-g ra d 1 e n t(

24
23

top, Whlte 15%, 1 Ightsteelblue 50%,navy 75%


f lo a t: left;

26
27

arg1n-r1ght: ISpx;
}

28

h o r i z o n t a l

29

30

31

width: 200px;
helght: 200px;

Figura 5 .4 | Gradientes lineales en CSS3 (parte I de 2).

);

5.6

32
33
34
33
36
37
38
39
40
41
42
43
44
45
46
47
48
49
30
31
32
53
34
33
36
37
38
39
60
61
62
63
64
63
66
67
68

Gradientes lineales: introduccin a los prefijos de proveedor

border: 3px sol 1d orange;


paddlng: Spx 20px;
t e x t - a l i g n : center;
background: -webki t- g r a d i e n t(
l i n e a r , l e f t top, r l g h t top,
c o lo r-sto p (1 5 X , w h l t e ) , color-stop(SOX, yello w ),
colo r-sto p(7S X , orange) );
background: - o z -l1 n e a r-g ra d 1 e n t(
l e f t , whlte 15*, yellow 50%, orange 75* );
background: 11near-grad1entC
l e f t , whlte 15 *, yellow 50 *, orange 75* );
n a r g 1 n - r 1 g h t: ISpx;
}
diagonal
{
w ld th : 200px;
helgh t: 200px;
border: 3px sol1d purple;
paddlng: 5px 20px;
t e x t - a l i g n : center;
background: -webk1t-grad1ent(
l i n e a r , l e f t top, r l g h t b o tto a ,
c o lo r-sto p C IS *, w h l t e ) , c o l o r - s t o p ( 5 0 * . p lu n ),
c o lo r - s t o p ( 7 S * , p u rp le ) );
background: - a o z - H n e a r - g ra d 1 e n t(
top l e f t , white 1S*. p lu a 5 0 * . p u rple 7 5 * ) ;
background: I 1 n e a r -g ra d 1 e n t(
13Sdeg, w hlte 1 5 * . plum 5 0 * . purple 75* );
}
< /style>
</head>
<body>
<d1v><h2>Gradiente l i n e a l v e r tic a l< / h 2 x / d 1 v >
<d1v 1d h o r1zo n tal"x h 2> G rad ien te l i n e a l h o r iz o n ta l< / h 2 x / d 1 v>
<d1v 1d "diagonal "><h2>Grad1ente lin e a l di agonal < /h2x/d1v>
</body>
< /h ta l>

/ i*

une

C
D $-* i ^ . d c i

______________________

Mry//Xyejefnoiovcap05/fg05.04/gradme<ift<aiiitmi
W*

M M
f*

8l)8f> O lir^ortJdc d |n*m_

G ra d ie n te lin eal
v e rtic a l

G ra d ie n te lineal
h o riz o n tal

Figura 5 .4 | Gradientes lineales en CSS3 (parte 2 de 2).

G ra d ie n te lineal
d iag o n al

149

150

Capitulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

Gradiente lineal vertical de WebKit


El cuerpo del ejem plo contiene tres elem entos d iv . EJ prim ero tiene un gradiente lineal vertical de arriba hacia
abajo. Vamos a crear un gradiente de fondo, por lo que em pezam os con la propiedad background. La sintaxis de
gradiente lineal para WebKit (lneas 17 a 20) difiere un poco de la de Firefbx (lneas 21 y 22). Para los navega
dores de W ebK it usamos - w e b k it- g r a d ie n t. D espus especificamos el tipo de gradiente (1 in e a r ) y b direccin
del gradiente lineal, de c e n te r to p hasta c e n te r bottom (lnea 18). E sto crea u n gradiente q u e cambia colores
en form a gradual de la parte superior hasta la parte inferior. A co n tin u aci n especificamos el c o l o r - s t o p
(topes de color) para cl gradiente lineal (lincas 19 y 20). D entro de cada c o lo r - s to p hay dos valores: el prim ero
es la ubicacin del tope (por ejemplo 15%, que es 15% hacia abajo desde la parte superior de la caja) y el segundo
es el color (por ejem plo, w h ite). C am biam os d e White en b parte superior a l i g h t s t e e l b l u e en el centro y
luego a navy en b parte inferior. Podemos asar tantos c o lo r - s to p com o queram os.

Gradiente lineal vertical de M ozilla


Para los navegadores M ozilla usam os -moz-1 in e a r - g r a d ie n t (lnea 21). En b lnea 22 especificamos el valor
de g r a d i e n t - l i n e (to p c e n te r) , que es la direccin del gradiente. D espus de g ra d ie n t-1 1 n e especificamos
cada c o lo r y c o lo r - s t o p (lnea 22).

Gradiente lineal vertical estndar


La sintaxis estndar d e CSS3 para gradientes lineales tam bin es un poco d istin ta. P rim ero especificamos
1 in e a r - g r a d ie n t (lnea 23). E n la lnea 24 incluim os los valores para el gradiente. Em pezam os con la direccin
del gradiente (top), seguida de cada c o lo r y c o lo r - s to p (lnea 22).

Gradiente lineal horizontal


E n las lneas 28 a 44 cream os un rectngulo con un gradiente horizontal (izquierda a derecha) que cambia en
form a gradual d e w h ite a yel low y luego a oran g e. Para W ebKit, la direccin del gradiente es de 1 e f t to p a
r i g h t to p (lnea 36), seguido de los elem entos c o lo r y c o lo r - s to p (lneas 37 y 38). Para M ozilb especificamos
g r a d i e n t - l i n e ( l e f t ) , seguido de los elem entos c o lo r y c o lo r - s to p (lnea 40). La sintaxis estndar de CSS3
em pieza con b direccin ( l e f t ) para indicar q u e el gradiente cam bia de izquierda a derecha, seguido de los
elem entos c o lo r y c o lo r - s to p (lneas 42 y 43). La direccin tam bin puede especificarse en grados, en donde
0 grados es directo hacia arriba y los grados positivos progresan en sentido de bs manecillas del reloj. Para un
gradiente de izquierda a derecha hay que especificar 90deg. Para un gradiente de arriba hacia abajo hay que
especificar Odeg.

Gradiente lineal diagonal


E n el tercer rectngulo cream os un gradiente lineal diagonal que cam bia en form a gradual d e w h ite a plum y
luego a p u rp le (lneas 45 a 60). Para W ebKit, b direccin del gradiente es de l e f t to p a r i g h t bottom (lnea
53), seguida de los elem entos c o lo r y c o lo r - s to p (lneas 54 y 55). Pira M o zilb especificamos g r a d i e n t - l i n e
(to p l e f t ) , seguida de b s elem entos c o lo r y c o lo r - s t o p (linca 57). La sintaxis estndar d e C S S 3 empieza con
b direccin (135deg) para indicar que cl gradiente cam bia a un n g u b de 45 grados, seguido de b s elem entos
c o lo r y c o lo r - s to p (lnea 59).

Prefijos de proveedor
En este e je m p b (figura 5.4), b s lneas 17 a 24, 35 a 42 y 52 a 59 definen tres versiones del e s tib background
para definir los gradientes lineales. Las versiones en las lneas 17. 35 y 5 2 , adem s d e las lneas 2 1 , 39 y 56

5.7

Gradientes radiales

151

contienen los prefijos -w e b k it- y -moz-, respectivamente. stos son prefijos de p ro v eed o r (figura 5-5) y se
utilizan para propiedades q u e an se estn term inan d o en la especificacin d e CSS pero que ya se han implcm entado en varios navegadores.

Prefijo de proveedor
- S -moz-o -webki t -

Navegadores
Internet Explorer
Navegadores basados en Morilla, incluyendo Firefox
Opera y Opera Mobilc
Navegadores basados en WebKit, incluyendo Google Chrome,
Safari (y Safari en el iPhone) y Android

Figura 5 .5 | Prefijos de proveedor.


Iz)s prefijos no estn disponibles para todos los navegadores ni para todas las propiedades. Por ejem plo, al
m om ento de escribir este libro los gradientes lineales se haban im plem entado slo en navegadores basados en
W ebKit y en M ozilla Firefox. Si elim inam os las versiones con prefijos de los estilos d e gradientes lineales en este
ejemplo, los gradientes no aparecern cuando La pgina se despliegue en un navegador basado en W ebK it o en
Firefox. Si usted ejecuta este program a en navegadores q u e an no soporten los gradientes, stos no aparecern.
Es una buena costum bre incluir los m ltiples prefijos cuando estn disponibles, de m odo que sus pginas se
desplieguen de m anera correcta en los diversos navegadores. A m edida que se term inen las funciones de CSS3 y
se incorporen por com pleto en los navegadores, los prefijos sern innecesarios. Por ejem plo, no usam os ningn
prefijo para el ejem plo de box-shadow (figura 5.3) porque est im plem entado en su totalidad en los navegadores
basados en W ebKit, en Firefox, O pera e Internet Explorer. M uchas de las nuevas funciones de CSS3 an no se
han im plem entado en Internet Exploren esperam os que esto cambie con IE 10.
Al usar prefijos de proveedor en los estilos, siempre debem os colocarlos antes de b versin sin prefijos
(como en las lneas 17 a 22 d e la figura 5.4). La ltim a versin del estilo que soporta un navegador especfico
tiene precedencia y el navegador la usar. As, al listar b versin estndar sin prefijo al ltim o, el navegador b
usar en lugar de utilizar b versin con prefijo cuando se soporte la estndar. Para ahorrar espacio en el resto
de este captulo, no incluirem os todos los prefijos de proveedor en todos los ejemplos. Algunas herram ientas en
lnea que pueden ayudarnos a agregar los prefijos de proveedor apropiados a nuestro cdigo son:

h t t p :/ / p r e f i xmycss. con/
h ttp : //c ss p re fix e r.a p p sp o t.c o m /
Tam bin hay varios sitios q u e listan b s funciones de C SS3 y H T M L 5 soportadas en cada u n o de los p rin
cipales navegadores, incluyendo:
h t t p : / / c a n i u s e . com/
h ttp ://f in d m e b y 1 p .c o m /litm u s /

5.7

Gradientes radiales

Los g rad ien tes ra d ia le sso n similares a los lineales, slo que el color cam bia en form a gradual d e u n punto in
terno (el inicio) hacia u n c r a lo exterior {c\fin a l) (figura 5.6). E n este ejem plo, la p ro p ie d a d r a d i a l -g ra d ie n t
(lneas l a 18) tiene tres valores. El prim ero es b posicin del inicio del gradiente radial; en este caso, el centro

152

Capitulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

(c e n te r ) del rectngulo. O tros posibles valores para la posicin son: to p . botto , l e f t y r i g h t . El segundo
valor es el color inicial (y ello w ) y el tercero es el colorfin a l (red). El efecto resultantees una caja con un centro
am arillo que cam bia en form a gradual a rojo en u n crculo alrededor de la posicin inicial. En este caso observe
que, adem s de los prefijos de proveedor, la sintaxis del gradiente es idntica para los navegadores W ebKit,
Mozilla y el r a d i a l - g r a d i e n t estndar de CSS3.

1 <!DOCTYPE htl>
2

3
4

3
6

9
10
11

12
13
14
13
16
17
18
19
20
21
22
23
24
23

Fig. 5 . 6 : g r a d i e n t e r a d i a l . htl
< ! - - G radientes r a d i a l e s en CSS3. >
<htnl>
<1--

<head>

<meta c h a r s e t " u t f - 8 >


< title > G ra d ie n te r a d i a l < / t i t l e >
< sty le type = t e x t / e s s
div
{

width: 200px;
height: 200px;
paddlng: Spx;
t e x t - a l i g n : ce n ter;
background: - w e b k 1 t- r a d ia l- g r a d 1 e n t(c e n te r . yellow, red );
background: -m o z -ra d ia l-g ra d ie n tC ce n te r, yellow, red );
background: r a d 1 a l - g r a d i e n t ( c e n t e r ,yellow.
red );
)
</style>
</head>
<body>
<d1vxh2>Gradiente radial</h2></d1v>
</body>
</html>
lw H i
/ Q O n .o v , ,*dul

file7//X7)wplos/cdp05/fg05.06/grddien!erAdidl.html

$t*cW
9
r.d
o
t
El gradiente radial
empieza con

y ello w en el
centro y despus
cambia a red

n \

W
tbS
b
c
#

G radiente radial

en un crculo, a
medida que avanza
naoa los bordes de
la caja

Figura 5 .6 | Gadientes radiales en CSS3.

Q lwpit#do d*

5.8

5.8

(Opcional: W ebKit solamente) Trazo de texto

153

(Opcional: W ebKit solamente) Trazo de texto

La p ro p ie d ad -webkl t - t e x t - s t r o k e es una propiedad no estndar para navegadores basados en W ebKit, la


cual nos perm ite agregar un contorno (trazo de texto) alrededor del texto. C uatro de los siete navegadores que
utilizamos en este libro se basan en W ebKit: Safari y C h ro m e en equipos de escritorio y los navegadores mviles
en OS y A ndroid. En la actualidad, la especificacin C SS3 est en evolucin y no es probable que esta propie
dad aparezca com o p arte del estndar a corto plazo. Sin em bargo, ya que W ebK it tiende a estar en la delantera,
es posible que esta funcin se agregue despus.
La lnea 12 en la figura 5.7 establece el color del texto de h l a LlghtCyan. Agregamos u n elem ento web k i t - t e x t - s t r o k e con dos valores (lnea 13): el grosor del contorno (2px) y el color del trazo de texto (black).
Aqu usam os el valor de 500% para f o n t - s l z e , de m odo q u e se pueda ver m ejor el co n to rn o . Este efecto no
estndar puede im plem entarse para un trazo de un solo pixel (con un poco ms de esfuerzo) si usam os slo
CSS3, com o se m uestra en h ttp :/ /c s s - t r ic k s .c o m /7 4 0 5 - a d d i n g - s t r o k e - t o - w e b - te x t/.
1

<!D0CTYPE html>

3
4
3

< ! - - F1g. 5.7: tr a z o te x to .h tm l -->


<1 T razo de te x to en CSS3. >
<html >

7
8
9

10

<head>
<*eta charset u tf-8">

<t1tle>Trazo de te x to < / t1 tle >


< style type * 'te x t/ c s s M>
hl

11

12

c o lo r : U g h tcy a n ;
-w e b k lt-te x t-stro k e : 2px black; / * p r e f i j o de p ro v eed o r
f o n t - s lz e : 500%; / * aum enta e l tamaflo de l a fu e n te /

13
14

15

16
17
18
19

</style>
</head>
<body>

20
21

</body>
</html>

<hl>Trazo de texto</hl>

[> T.KCMMM
C

v_

D IMe///Xyjemp*o/c*p05/fig05.07/trzotextoiwni

S*o* tugrtot

tfi'rt SAcetMtc'y Q Imperti

c o l o r es
1 ighteyan
tex t-stro k e
es 2px b lack

Figura 5 .7 | Un elemento te x t-s tro k e desplegado en Chrome.

5.9

Mltiples imgenes de fondo

CSS3 nos perm ite agregar m ltip le s im g en es d e fo n d o a un elem ento (figura 5.8). El estilo en las lneas 10 a
16 empieza p o r agregar dos elem entos background-im ages: lo g o .p n g y ocano, png (lnea 12). A continuacin

154

Capitulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

especificamos la colocacin de cada im agen m ediante el uso de la propiedad background-position (linea 13).
La lista de valores separados por comas coincide con el orden de la lista de imgenes separadas por comas en la
propiedad background-image. El prim er valor (bottom r i g h t ) coloca la prim era im agen logo, png en la esqui
na inferior derecha del fondo en el border-box. El ltim o valor (100% c e n te r ) centra to d a la segunda imagen
(ocano. png) en el elem ento content-box de m odo que aparezca detrs del contenido y se estire para Uenar el
elem ento content-box. La propiedad b a c k g ro u n d -o rig in (linca 14) determ ina en d n d e se debe colocar cada
imagen m ediante el uso del modelo de cajas que describim os en la figura 4.13. La prim era imagen (logo.png)
es el elem ento border-box ms exterior y la segunda im agen (ocean. png) est en el elem ento content-box ms
interno.

<!D0CTYPE html

3
4
5
6
7
8

10
11

<! Fig. 5.8: m ultiplesfondos.htm l >


< 1 -- M ltiples Imgenes de fondo en C SS3 . -->
<htm1>
<head>
<meta c h a rs e t = Mu tf-8 " >
<t1tle>M &uacute;lt1ples fondos</t1tle>
< style type = "text/css">
d1v.fondo
{

12
13
14
13
16
17

}
d1v.contenido

background-1mage: u r l ( l o g o . p n g ) , u r l(o c a n o .p n g );
background-position: bottom r i g h t . 100% ce n ter;
background-orlgln: border-box, content-box;
background-repeat: n o -re p e a t, repeat;

19
20
21
22

23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40

padding: lOpx ISpx;


color: trfilte;
f o n t-s lz e : 150%;

}
</style>
</head>
<body>
<d1v c l a s s = "fondo"
<d1v c l a s s = "contenido"
<pDe1tel & A sso c ia te s, Inc. e s una empresa reconocida a n iv e l mundial,
dedicada a l entrenam iento c o rp o ra tiv o y l a creaci&oacute;n de contenido.
La empresa o fre ce cursos Impartidos por i n s t r u c t o r e s en lo s s i t i o s de lo s
c l i e n t e s en todo e l mundo sobre len gu ajes de programacioacute;n yo tr o s temas
de software como C-m-, Visual C++<sup&reg;</sup>, C, Java&trade;,
C#<sup>&reg;</sup>, Visual Bas1c<sup>Areg;</sup>,
0bject1ve-C<sup>Areg;</sup>, XML<sup>Areg;</sup>.
Python<sup>&reg;</sup, Ja v a S c rip t, tecno lo g& iacu tea de o b je to s ,
programaci&oacute;n en I n t e r n e t y Web, y d e s a r r o llo de a p lic ac io n e s
para Android y iPhone.</p>
</d1v</d1v>
</body>
</html

Figura 5 .8 | Mltiples imgenes de fondo en CSS3 (parte I de 2)

5.10

M utoptcs

C
Vt.os

"003

(Opcional: W ebKit solamente) Reflejos

iley//xye)fnpios/cap05/rg05.08/mliiplesfofxk)shim
vVtb Stet Galry C j knpotUe oc tecn u .

D citcl & A ssociates. Inc. es una em presa reconocida a nivel


mundial, dedicarla al entrenam iento corporativo y la creacin
de contenido. L a em presa ofrece cursos im partidos por
instructores en los sitios de los d ie n te s en todo cl m undo
sobre lenguajes de program acin y otros tem as de softw are
com o

155

Visual C++, C. Java . C#, Visual Basic*-',

O bjccfivc-C ^.X M L , Python'*, JavaScript, tecnologa de


objetos, program acin en Internet y W eb, y desarrollo de
aplicaciones p ara A ndroid y Phone.
.
^ ^

segura imagen
(ocano, png) se
centra detrs del
contenido y se estira
segn sea necesario
para llenar el fondo
la primera imagen
(logo.png) se
coloca a la derecha
infenorsin peticin

Figura 5 .8 | Mltiples imgenes de fondo en CSS3 (parte 2 de 2).

5.10

(Opcional: W ebKit solamente) Reflejos

La figura 5-9 m uestra cm o agregar un reflejo sim ple de una imagen m ediante el uso de la p ro p ie d a d -w e b k ltb o x - r e f le c t (lneas 13 a 1 7 y 20 a 23). Al igual que w e b k it- te x t- s tr o k e . s ta e s una propiedad no estndar
que slo est disponible en navegadores basados en W ebK it por ahora, pero es u n efecto elegante que queram os
mostrarle.
El prim er valor de la propiedad w e b k it- b o x - r e f le c t es la direccin del reflejo; en este caso, below (l
nea 13) o r i g h t (lnea 20). El valor de la direccin puede ser above, below, l e f t o r i g h t. El segundo valor es
cl o f f s e t (desplazam iento), q u e determ ina cl espacio entre la imagen y su reflejo.En este ejem plo cl valor de
O ffs e t es Spx, por lo que hay un pequeo espacio entre la im agen y su reflejo. D e m anera opcional podem os
especificar un gradiente para aplicarlo al reflejo. El gradiente en las lneas 14 a 16 provoca que el reflejo inferior
se desvanezca de arriba hacia abajo. El gradiente en las lneas 21 a 23 provoca q u e el reflejo derecho se desvanez
ca de izquierda a derecha. Los efectos de reflejo que se m uestran aqu pueden lograrse m ediante el uso de CSS3
puro, slo que se requiere m ucho ms cdigo. Para ver un ejem plo, visite h ttp ://v w v w .x h tm l-la b .c o m /c ss/
c r e a te r e f le c ti o n - e f f e c t - u s 1 n g - c s s 3 .

1 < IDOCTYPE htnl>


2

3 < ! - - Fig. S.9: r e f le jo .h tm l -->


4 <1 R eflejo s en CSS3. -->
3 <html>
6
<head>
7

c r e ta c h a r s e t *'utf-8">

8
9

< t1 tle > R e f le jo < / title >


c s t y l e type = t e x t /c s s " >

Figura 5 .9 | Reflejos en CSS3 (parte I de 2)

156

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

0
1

img { n a r g in - r ig h t: 30px; }
img.below

3
4
3
6

-w e b k it-b o x -re fle c t: below Spx


-w ebkit-gradiente
l i n e a r , l e f t to p , l e f t bottom,
f r o m (tr a n s p a r e n t), t o ( w h i t e ) ) ;

8
9
20
21
22
23
24
23
26
27
28
29
30
31
32
33

im g.right
{
-w e b k it-b o x -re fle c t: r i g h t 5px
-w ebk it-grad 1ent(
l i n e a r , r i g h t top, l e f t top,
f r o m (tr a n s p a r e n t), to ( h ite));
}
</style>
</head>
<body>
<img c l a s s = ubeloNNs r c = "jhtp.png" width = 138" h e ig h t = "180"
a l t - "Portada del l i b r o lava How to Progra*">
<img c l a s s = " r i g h t" s r c = "jhtp.png" width = "138" h e ig h t = "180"
a l t = "Portada del l i b r o lav a How to Program">
</body>
</html>
C*: Pc-kio

C
| *)

- m m

*'

2 file7//Xyejemo!os/cap05/fig05.09/reflejohtmjpB #

iuQ tuC '. Q VJtk S<c Gofkr> Q

de !ntin ..

teflejo vertical

Figura 5 .9 | Reflejos en CSS3 (parte 2 de 2).

5.11

Bordes de imgenes

La propiedad border-1mage usa imgenes para colocar un borde alrededor de cualquier elem ento a nivel de
bloque (figura 5.10). En la lnea 12 establecemos la propiedad border-width de un elem ento d iv en 30px,

5.11

Bordes de imgenes

157

que es el grosor del borde que colocamos alrededor del elem ento. A continuacin especificamos u n a anchura
(w idth) de 234px, que es la anchura de todo el borde rectangular (lnea 13).

Estirar el borde de una imagen


En este ejem plo creamos dos estilos de bordes de imgenes. En el prim ero (lincas 16 a 22) estiram os (y por ende,
distorsionam os) los Lados de la imagen para ajustarla alrededor del elem ento, dejando las esquinas de la imagen
del borde sin cambios (no se estiran). La propiedad b o rd er-im ag e tiene seis valores (lneas 18 a 21):
b o rd e r-im a g e -so u rc e : el U RL de la imagen a usar en el borde (en este caso, u r l (b o rd e , png)).

1 < IDOCTYPE html


2

3 <1 F ig . 5.10: bordeim agen.htm l -->


4 < ! E s t i r a r y r e p e t i r una imagen p a ra c r e a r un b o rd e . -->
3 <htal>
6
<head>
7
<meta c h a rs e t = u tf-8">

<t1tle>Borde de imagen</t1tle>
9
< sty le type " t e x t / c **">
10
d1v
U

12
13
14
5

16
7
18
19
20
21
22

23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38

border-width: 30px;
width: 234px;
padding: 20px 20px;
}

#stretch
{
-webk1t-border-1nage: u rl(b o rd e .p n g ) 80 80 80 80 s tr e tc h ;
-moz-border-image: url (borde.png) 80 80 80 80 s tr e tc h ;
-o-border-1mage: u r l(b o r d e .p n g ) 80 80 80 80 s tr e tc h ;
border-image: u r l(b o rd e .p n g ) 80 80 80 80 s tr e tc h ;
)

repeat
{
-w ebkit-border-inage: u rl(b o rd e .p n g ) 34* 34% repeat;
-moz-border-image: u r l(b o rd e .p n g ) 34% 34% repeat;
-o-border-image: u r l(b o r d e .p n g ) 34% 34% repeat;
border-im age: u r l(b o rd e .p n g ) 34% 34% repeat;
}
</style>
</head>
<body>
<h2>Bordes de imagen</h2>
<1g src borde.png" a l t "Imagen u t i l i z a d a para demostrar l o s bordes"
<p><d1v 1d "stretch">Se e s t i r a el borde de l a imagen</d1v></p>
<p><d1v 1d = repeat">Se r e p i t e el borde de l a 1magen</divx/p>
</body>
</htrnl

Figura 5 .I 0 | Estirar y repetir una imagen para crear un borde (parte I de 2).

158

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

S 't'os s u je ta o s

fil-//Ayj<mplos/cp05/tio05.10/bortJeimjgn.himl
S *< O trtcri

1 Im p o rto e <J lr tttr ,

B o rd e s d e im a g e n

hugen original
utilizada para crear
el boide de imagen

la s esquinas dla
imagen permanecen
sin cambios pero se
estiran los cuatro
lados de la imagen
la s esquinas de la
imagen permanecen
repiten los cuatro
lados de la imagen

Figura 5.10 j Estirar y repetir una imagen para crear un borde (parte 7 de ?).

b o rd e r- 1 m a g o -slic e : se expresa con cuatro valores separados por espacios en pxeles (en este caso,
80 80 80 80). Estos valores son los desplazamientos internos desde los lados superior, derecho, inferior
e izquierdo de la imagen. Como nuestra imagen original es cuadrada, usamos el mismo valor para
cada uno. E l elemento border-im age-sUce divide la imagen en nueve regiones: cuatro esquinas,
cuatro lados y una parte media, que es transparente a menos que se especifique lo contrario. Estas re
giones pueden traslaparse. Si usa valores mayores que el tamao actual de la imagen, los valores
de border-image-si i ce se interpretarn como 10056. N o es posible usar valores negativos. Podramos
expresar b o rd er-im ag e-slice en dos valores (80 80), en cuyo caso el primer valor representara
los lados superior e inferior, y el segundo valor representara los lados izquierdo y derecho. Los valo
res de border-image-si ic e tambin pueden expresarse en porcentajes, lo cual demostraremos en la
segunda parte de este ejemplo.

b o rd e r-im a g e -re p e a t: especifica la forma en que se ajustar la escala de imagen del borde y si se va a
colocar en mosaico (repetida). Al indicar stretch slo una vez, creamos un borde que estirar las regio
nes superior, derecha, inferior e izquierda para ajustarse al rea. Podemos especificar dos valores para la
propiedad border-Image-repeat. Por ejemplo, si especificamos stretch repeat, se estiraran las regio
nes superior c inferior del borde de imagen y se repetiran las regiones derecha c izquierda del borde (es

5.12

Animacin: selectores

159

decir, se colocaran en mosaico) para ajustarse al rea. O tros valores posibles para la propiedad b o rd e rIm a g e -re p e a t son round y space. Si especificamos round, las regiones se repiten usando slo mosaicos
com pletos y se ajusta la escala de la imagen del borde para llenar el rea. Si especificamos space, las
regiones se repiten para llenar el rea usando slo mosaicos com pletos y cualquier espacio sobrante se
distribuye de m anera uniform e alrededor de los mosaicos.

Repeticin de un borde de imagen


En Las lneas 23 a 29 creamos u n borde de imagen al repetir b s regiones para aju starb s al espacio. La propiedad
bo rd er-im ag e incluye tres valores:
b o rd er-1 m ag e-so u rce: el U RL de b imagen a u sa re n el borde [de nuevo, u r l (b o rd e , p n g )).
b o rd e r-im a g e -s l Ice: en este caso proporcionam os dos valores expresados en porcentajes (34 * 34*) para
b s regiones superior/inferior e izquierda/derecha, respectivam ente.
b o rd e r-lm a g e -re p e a t: el valor re p e a t especifica q u e los mosaicos deben repetirse para ajustarse al rea
m ediante el uso de mosaicos parciales para llenar el espacio sobrante.
Rira obtener inform acin adicional sobre b propiedad b o rd er-lm ag e, visite

http://www.w3.Org/TR/2002/liO-C5s3-border-20021107/#the-border-image-ur1:

5.12

Animacin: selectores

En la figura 5.11 creamos u n a animacin sim ple de una im agen que se mueve en un patrn de diam antes a
medida que cam bia su opacidad.

<!D0CTYPE htnl>
< ! - - Flg. 5.11: animacion.html >
<1 Animacin en CSS3. >
<ht*l>
<head>
<eta c h a rs e t = "utf-S"
<t1tle>Animacin</t1tle>
< style type - Mte x t/c s s " >
1ng
p o sitio n : r e la ti v e ;
-webk1t-an1mat1on: nov1ng1mage l i n e a r lOs l s 2 a l t r n a t e ;
-moz-an1mat1on: novlnglmage l i n e a r lOs l s 2 a l t r n a t e ;
a n ln a tlo n : novlnglmage l i n e a r lOs l s 2 a l t r n a t e ;
)

0)-webkit-keyfranes movlnglmage
{

0*

{ o p a d ty : 0; l e f t : 50px; top: Opx;}

Figura 5 .11 | Animacin en CSS3. Las lineas punteadas muestran la oita del diamante que sigue la imagen (parte l de 2).

160

Captulo 5

25%
50%
75%
100%

20

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
3
40
41
42
43
45
46
47
48

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

{opacity:
{opacity:
{opacity:
{opacity:

1;
0;
1;
0;

le ft:
le ft:
le ft:
le ft:

Opx; top: SOpx;}


SOpx; top: lOOpx;}
lOOpx; top: SOpx;}
SOpx; top: Opx;}

>

C-noz-keyf raines movngimage


{

0%
25%
50%
75%
100%

{opacity:
{opacity:
{opacity:
{opacity:
{opacity:

0;
1;
0;
1;
0;

le ft:
le ft:
le ft:
le ft:
left:

SOpx; top: Opx;}


Opx; top: SOpx;}
SOpx; top: lOOpx;}
lOOpx; top: SOpx;}
SOpx; top: Opx;}

Okeyfri

s movlngimage

0%
25%
50%
75%
100%

{opacity: 0;
{opacity: 1;
{opacity: 0;
{opacity: 1;
{opacity: O;

left:
left:
le ft:
left:
left:

SOpx; top: Opx;}


Opx; top: SOpx;}
SOpx; top: lOOpx;}
lOOpx; top: SOpx;}
SOpx; top: Opx;}

</style>
</head>
<body>
<1ng src * "jhtp.pn g" width > "138" h e lg h t = ISO1
a l t = "Portada del l i b r o Java How to Progra*">
<d1v></d1v>
</body>
</html>

la animacin empieza y
termina en la parte superior
del dam ante. y la imagen se
mueve en duecdn contraria
a las maneollas del reloj en
un principio. Cuando la
animacin llega a la parte
ajpenor del diamante, imoerte
su direccin y contina en
sentido de las manecillas del
reloj. La ammaon termina
cuando la imagen llega a la
parte sipenor del damante
por segunda vez.

Java

>

\
/

>

\
\

s
\

s
\

\
\

'

N.

V
N
\
\
N

V /
v

/
/

/
/

/
/

Figura 5 .1 1 | Animacin en CSS3. las lineas punteadas muestran la ruta del diamante que sigue la imagen (parte 2 de 2).

5.12

Animacin: selectores

161

P ropiedad a n i m a t i o n
La p ro p ie d a d a n im a tio n (lneas 13 a 15) nos perm ite representar varias propiedades de anim acin en notacin
abreviada en vez de especificarlas por separado, com o en:

anim ation-nam e: movinglmage;


a n im a tio n - tim in g - f u n c tio n : l i n e a r ;
a n im a tio n -d u ra tio n : lO s;
a n im a tio n -d e la y : l s ;
a n im a ti o n - it e r a ti o n - c o u n t: 2;
a n im a tio n - d ir e c tio n : a l t r n a t e ;

En la notacin abreviada. los valores se listan en el siguiente orden:


an im atio n -n an e: representa el nom bre de la anim acin (imagenMovimiento). Este nom bre asocia la
anim acin con los cuadros clave q u e definen diversas propiedades del elem ento que se va a anim ar en
distintas etapas de la anim acin. En breve hablaremos sobre los cuadros clave.
a n im a tio n - tin ln g - f u n c tio n (lneas 13 a 15): determ ina cm o progresa la anim acin en un ciclo de
su duracin. Los valores posibles son: l i n e a r , e a se , e a s e - in , e a s e - o u t, e a s e - in - o u t, c u b ic - b e z ie r .
El valor l i n e a r , que usam os en este ejem plo, especifica que la anim acin debe moverse a la misma
velocidad de principio a fin. El valor predeterm inado (ease) empieza con lentitud, aum enta la velo
cidad y d esp u s te rm in a c o n le n titu d . El valor e a s e - i n em p ieza con le n titu d y lu eg o a u m e n ta
b v elo cid ad , m ientras que el valor e a s e - o u t em pieza con m is rapidez y luego reduce la velocidad.
El valor e a s e - in - o u t empieza y term ina con lentitud. Por ltim o, el valor c u b ic -b e 2 i e r nos perm ite
personalizar la (uncin de sincronizacin con cuatro valores entre 0 y l.c o m o c u b i c - b e z i e r ( l , 0 ,0 ,1 ).
anination-duration: especifica el tiem po en segundos (s) o milisegundos (ms) que tarda b anim acin

en com pletar una iteracin (en este caso, lOs). La duracin predeterm inada es 0.
anination-delay: especificad nm ero de segundos (en este caso, l s ) o m ilisegundos despus de que se

carga la pgina y antes de que inicie b anim acin. El valor predeterm inado es 0. Si a n im a tio n -d e la y es
negativo, com o -3 s , la anim acin empezar tres segundos despus de entrado su ciclo.
a n im a tio n -1 te ra tio n - c o u n t: especifica el nm ero de veces q u e se ejecutar b anim acin. El valor pre
determ inado es 1. Puede usar el valor i n f i n i t e para repetir b anim acin en form a conrinua.
animation-direction: especifica la direccin en b que se ejecutar b anim acin. El valor a l t r n a t e

que se usa aqu especifica q u e b anim acin se ejecutar en direcciones alternantes; en este caso, en senti
do contrario a b s m anccilbs del reloj (segn lo definido con nuestros cuadros dave) y luego en sentido
de las manecillas del reloj. El valor predeterm inado normal ejecuta la anim acin en b m ism a direccin
para cada cido.
No es posible usar la propiedad an im atio n abreviada con la propiedad animatlon-play-state: debe
especificarse por separado. Si no incluye a n im a tio n - p la y - s ta te , q u e especifica si la anim acin est en pausa
(paused) o en ejecucin (runningX se aplica el valor predeterm inado de running.

La regla Q k e y fr a m e s y los selectores


Para el elem ento que se va a animar, la regia Okey frames (lneas 17, 25 y 33) define b s propiedades del elem en
to que cam biarn d u ra n te la anim acin, b s valores a los q u e cam biarn esas propiedades y cu n d o lo harn.

162

Capitulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

La regla Okeyframes va seguida del nom bre de la anim acin (imagenMovimi e n to ) a la que se aplican los cuadros
clave. Las reglas de CSS consisten en u n o o ms selectores seguidos de un b lo q u e de d e c la ra c io n e s encerrado
entre llaves ({}). Los selectores nos perm iten aplicar estilos a los elem entos d e un tip o o atrib u to especfico.
U n bloque de declaraciones consiste en una o ms declaraciones, cada una de las cuales incluye el nom bre de
la propiedad seguido de dos puntos ( :) , un valor y u n signo de p u n to y com a (;). Podemos incluir m ltiples
declaraciones en un bloque de declaraciones. Por ejem plo, considere la lnea 19:

0% { o p a d ty : 0; l e f t : SOpx; to p Opx;}.

El selector 0% va seguido de un bloque de declaraciones con tres declaraciones: o p a c ity , l e f t y r ig h t.


E n este ejem plo, la regla Okeyframes incluye cinco selectores para representar los puntos en el tiem po para
nuestra anim acin. Recuerde que nuestra anim acin tardar 10 segundos (lOs en las lneas 13 a 15) para com
pletarse. En esc contexto, 0% indica el com ienzo de un solo ciclo de anim acin, 25% represenra 2.5 segundos
despus de iniciada la anim acin, 50% representa 5 segundos despus de iniciada la anim acin, 75% representa
7.5 segundos despus de iniciada la anim acin y 100% representa el final de un solo ciclo d e anim acin. Es posi
ble descom poner la anim acin en cantos puntos com o desee. En cada punto especificamos la opacidad (o p a c ity )
de b imagen y su posicin en pxcles a partir de b izquierda ( l e f t ) y d e b regin superior (top). C om enzam os
y term inam os b anim acin en el m ism o p u n to ( le f t : SOpx; to p : Opx;) para crear un patrn de diam ante, a lo
largo del cual se mueve b imagen.

5.13

Transiciones y transformaciones

C o n b s tra n sic io n e s de C SS3 es posible cam biar el estilo d e un elem enro despus de una duracin especificada;
por ejem plo, podem os variar Li opacidad de u n elem ento desde opaco hasta transparente en el transcurso de
un segundo. Las tran sfo rm acio n es de CSS3 nos perm iten mover, girar, escalar c inclinar elementos. Adems
podem os hacer que las transiciones y b s transform aciones ocurran al m ism o tiem po, para hacer cosas com o
aum entar el tam ao de los objetos y cam biar su color a b vez. Observe que b s transiciones son sim ibres en
concepto a b s anim aciones (seccin 5.12), pero b s transiciones nos perm iten especificar slo los valores inicial
y final de bs propiedades de CSS que se van a modificar. Los kcyframes (cuadros dave) de una anim acin nos
perm iten co n rro b r los csrados interm edios a lo b rg o de b duracin de una anim acin.

5.13.1 Las propiedades tra n sitio n y transforra


La figura 5.12 usa las p ro p ie d a d e s t r a n s i t i o n y tra n sfo rm para ajustar b escab de una imagen y g ira rb 360
grados cuando el cursor pasa sobre clb. Com enzam os por definir la propiedad t r a n s i t i o n (lnea 16). Para cada
propiedad que vaya a cam biar, la propiedad de transicin especifica la duracin de ese cam bio. En este caso in
dicam os que una transform acin (tra n sfo rm , que veremos en breve) tardar cuatro segundos, pero podram os
especificar una lista separada por comas de nom bres de propiedades q u e cam biarn y las duraciones individuales
sobre b s que cam biar cada propiedad. Por ejemplo:
t r a n s i t i o n : tra n sfo rm 4 s , o p a c ity 2s;

indica que tra n s fo rm rarda cuatro segundos en aplicarse y o p a c ity cam bia a lo brgo d e dos segundos; as, la
transform acin continuar durante otros dos segundos despus de que o p a d t y cam bie por com pleto. En este
ejem plo definim os tra n s fo rm slo cuando el usuario pasa el ratn sobre b imagen.

5.13

Transiciones y transformaciones

163

<! DOCTYPE htil>


<1-- Fig. 5.12: tra n s1c io n e s.h tm l -->
< 1-- T ransiciones en CSS3. >
<h ta l >
<head>
-ateta c h a rs e t 'u tf-8">
< title > T ra n si c io n e s< /ti tle>
< sty le type = " te x t/c s s" >
1ng
{
margin: 80p x ;
- w e b k it- tr a n s tion: -w ebklt-transform 4s;
- n o z - tr a n s itio n : -moz-transform 4s;
- o - tr a n s it 1 o n : -o -tra n sfo rm 4s;
t r a n s i t i o n : transform 4s;
}

1ng:hover
20
21
22
23
24
23
26
27
23
29
30
31

-webklt-transform : r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2);
-moz-transform: r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2);
- o -tr a n s fo r m : r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2 );
transform: r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2 );
>
< /style>
</head>
<body>
<1mg src = "cpphtp.png" wldth - M76M h e ig h t * lOO"
a l t = "Portada del l i b r o C++ Ho* to Prograr>
</body>
</htnl>
b)

c)

d)

F igura 5 .1 2 | Transiciones de una imagen en el transcurso de cuatro segundos y adems se aplican transforma
ciones r o t a t e y scale.
La subclase :hover (lincas 18 a 24) anteriorm ente slo funcionaba para elem entos de ancla, pero ahora
funciona con cuaUjuitr elem ento. En este ejem plo usamos : hover para com enzar el giro y el ajuste de escala de
h imagen. La propiedad transform (lnea 23) especifica que la imagen girar 360 grados (360deg) y aum entar
su escala al doble de su anchura y altura originales al pasar el ratn sobre la imagen. La propiedad transform
usa funciones de transform acin com o r o t a t e y s c a le para realizar las transform aciones. La funcin de

164

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

transform acin r o t a t e recibe el nm ero de grados. Los valores negativos hacen que el elem ento gire a la iz
quierda. Un valor de 720deg provocara que el elem ento girara dos veces en sentido de las manecillas del reloj.
La funcin de transform acin se a le especifica cm o aum entar La escala de la anchura y la altura. El valor 1
representa la anchura o altura original, por b que v ab res mayores de 1 aum entan el tam ao y v ab res menores
que 1 reducen el tam ao. En el siguiente sitio encontrar una lista com pleta de funciones de transform acin
d e CSS3:

www.w3.org/TR/css3-2d-transforms/#transfonn-funct1ons

5.13.2 Inclinacin
Las transform aciones de CSS3 tam bin nos perm iten in c lin a r b s elem entos a nivel de b b q u e , para distorsion a rb s a un n g u b horizontal (skewX) o vertical (skewY). En el siguiente e je m p b usamos las propiedades a n im ation y tra n s fo rm para inclinar un elem ento (un rcctn g u b y texto) 45 grados en sentido horizontal (figura
5.13). Prim ero cream os un rectn g u b con un fondo L ightG reen, u n borde OarkGreen y esquinas redondeadas.
La propiedad an lm atio n (lneas 21 a 23) especifica que el elem ento se inclinar en u n in te rv a b de tres segun
dos (3s) con una duracin infinita ( i n f i n i t e ) . El cuarto v a b r ( l i n e a r ) es la propiedad a n im a tio n -tim in g fu n c tlo n .

<!DOCTYPE html>

3
4
3
6

7
8
9

<1 F1g. 5 . 1 3 : 1 n c l i n a r . h t m l >


< ! - - E le m e n to s de i n c l i n a c i n y de t r a n s f o r m a c i n e n CSS3. -->

<html>
<head>

o te ta c h a rs e t = Utf-8">
< t i t l e > I n c l i n a r (sk e w )< /t1 tle >
< sty le type = " te x to / c s s " >

10

11

12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32

.skew .te x tb o x

n a r g 1 n - le f t: 7Spx;
background: lig h tg re e n ;
helgh t: lOOpx;
wldth: 200px;
paddlng: 2Spx 0;
te x t- a llg n : cen ter;
f o n t-s lz e : 250%;
border: 3px s o l l d OarkGreen;
border-rad1us:l5px;
-w eb k lt-an ln atio n : skew 3s I n f i n i t e l i n e a r ;
-aoz-an1nat1on: skew 3s i n f i n i t e l i n e a r ;
an ln atlon : skew 3 s i n f i n i t e l i n e a r ;
}
O-webkit-keyframes skew
{
skewX(Odeg); >
25% { -webkit-transform: skewX(4Sdeg) ; }
50% { -webkit-transform: skewX(O); )
75% { -webkit-transform : sk ew X (-4S d cg ) ; }
to { -w ebkit-transform : skewX(O); }
from { - w e b k it - t r a n s f o r m :

Figura 5 .1 3 | Dementas de inclinacin y de transformacin en CSS3 (parte I de 2).

5.13

33
54
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
51
32
33
34
33
56

Transiciones y transformaciones

165

-moz-keyframes skew
{
from { -webkit-transform: skewX(Odeg); )
2 5 * { -webkit-transform: skewX(45deg); }
50 * { -w ebkit-transform : skewX(O); }
75 * { -w ebkit-transform : skewX(-4Sdeg); }
to { -webkit-transform : skewX(O); }
}
-keyframes skew
{
from { -webkit-transform: skewX(Odeg); }
2 5 * { -w ebkit-transform : skewX(4Sdeg); }
50 * { -w ebkit-transform : skewX(O); )
75 * { -w ebkit-transform : skewX(-4Sdeg); }
to { -w ebkit-transform : skewX(O); }
>
< /style>
</head>
<body>
<d1v c l a s s - "box
skew">
<d1v c l a s s ="te x tb o x "> In clin ar texto</d1v>
</d1v>
</body>
</html>
a) Elemento d i v con bordes en posicin
inclinada a la izqiierda.

b) Elemento d iv c o n bordes
n posicin centrada.

c) Elemento d iv c o n boidesen poscin


rtn ad a a la derecha.

Inclinar
texto

A fir A a a r
A zrA ?

Figura 5.13 | Elementos de inclinacin y de transformacin en CSS3 (parte 2 de 2).


A continuacin usamos la regla @keyframes y selectores para especificar el ngulo de la transformacin skew en
distintos intervalos (lincas 25 a 48). Al desplegar la pgina, el elem ento no est indinado (Odeg; lneas 2 7 ,3 5 y 43).
Despus la transformacin indina el elemento 45 grados (4Sdeg) a la derecha (lneas 28, 36 y 44), regresa a Odeg
(lneas 2 9 ,3 7 y 45). luego se inclina a la izquierda 45deg (lneas 3 0 ,3 8 y 46) y regresa a Odeg (lneas 3 1 ,3 9 y 47).

5.13.3 T ra n sicio n e s entre im genes


Tam bin podem os usar la propiedad t r a n s l t i o n para crear el herm oso efecto visual de fusionar una imagen
en o tra (figura 5.14). La propiedad t r a n s l t i o n incluye tres valores. IYimero especificamos que la transicin
ocurrir en b opacidad ( o p a d t y ) de b imagen. El segundo valor (4s) es t r a n s l t i o n - d u r a t i o n . El tercer valor
(ea se -1 n -o u t) es tra n s1t1 o n -ti 1 n g -fu n c t1o n . Despus definimos hover con u n valor de o p a d t y deO, de
m odo que cuando colocam os el cursor sobre b imagen superior, su opacidad se vuelve to talm en te transparente

166

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

y revela la im agen de fondo que est justo detrs de ella (lneas 22 y 23). E n las lneas 28 y 29 agregamos las
imgenes inferior y superior, colocando una justo detrs de la otra.

1
2
3
4
3

<IDOCTYPE h t* l>
<1-- Fig. 5.14: fusionarimagenes.html >
<1-- Fusionar una imagen en o t r a mediante CSS3. -->
<html>
<head>

<meta c h a r s e t u tf-8 " >


<title>FusiA oacute;n de im &aacute;genes</title>
< sty le type "text/css*'>
aportada

9
10
11

12
13
14
13
16
17
18
19
20

p o s itio n : r e l a t i v e ;
margin: 0 auto;
}
aportada ing
{
p o s itio n : absolute;
le ft: 0;
- w e b k it- tr a n s itio n : opacity 4s e a s e -in -o u t;
t r a n s t i o n : o p a c ity 4s e a s e - in - o u t;

21

22
23
24
23
26
27
28
29
30
31
32

aportada 1ng.top:hover
{ opac1ty:0; }
</style>
</head>
<body>
<d1v id= "portada"
<1ng c l a s s = bottom" s r c ="jhtp.p ng " a l t = "Portada de lava 9e">
<1g c l a s s * "top" s r c - jhtpS.png" a l t = "Portada de lav a 8e">
</d1v>
</body>
</html>
a)

b)

c)

Figura 5 .1 4 | Fusionar una imagen en otra mediante CSS3.

5.14

Descarga de fuentes Web y la regla @ fo n t-fa ce

M ediante el uso de la regla fo n t-fa c e es posible especificar fuentes para una pgina W eb, incluso aunque no
estn instaladas en el sistem a del usuario. Podemos usar fuente.s descargables para ayudar a asegurar una aparicn-

5.14

Descarga de fuentes Web y la regla @font-face

167

d a uniform e entre los sitios cliente. En la figura 5.15 usamos la fuente W eb d e G oogle llam ada C allig raffittf.
E ncontrar num erosas fuentes Web gratuitas de cdigo fuente abierto en h t t p : / / * wh. g o o g le . com /w ebfonts.

Asegrese de que las fuentes que obtenga de otras partes no tengan impedimentos legales.
I

<!DOCTYPE htil>
< 1-- F1g. 5.15: fu e n te s in c ru s ta d a s.h tm l -->
<1 In c ru sta c i n de fu entes para u s a r en pginas Web. -->
<htal>
<head>
<eta c h a rs e t *'utf-8>
< title > F u e n te s i n c r u s t a d a s < / t i t l e >
<link h re f = *h t t p : / / f o n t s . g o o g l e a p i s . c o * / c s s ? f a n i l y = C a l l i g r a f f i t t i '
r e = ' s t y l e s h e e t ' type = te x t / c s s * >
< s ty le type = " te x t/ e s s "
body
{

fon t-fam ily : " C a l l i g r a f f i t t i " ;


f o n t- s iz e : 48px;
text-shadow: 3px 3px 3px OitCrey;
}

20

21
22

23
24
23

< /style>
</head>
<body>
<div>
< b > In cru stan d o l a fu e n te Web de Google C a l l i g r a f f i t t i </b>

</di v>
</body>
</h t l >
a

C
VtMH

12) W e///X /rje a ip lo s/c d p 0 3 /f g 0 5 _ 1 5 /fu e n ? in c ru st*(U s.h tm l


ske 6 #lery

p i

9t

Figura 5 .15 | Incrustacin de fuentes para usar en pginas Web.


Para obtener la fuente Calligraffitti de Google, vaya a h ttp ://v * * v . g o o g le. com /w ebfonts y use cl cuadro
de bsqueda en el sitio para buscar la fuente : Calligraffittin. Podr encontrarla m ediante el cuadro de bsqueda
en el sitio. A continuacin, haga clic en Q uick-use para o b ten er el vnculo (1 ink) a la hoja de estilos que con
tiene la regla fo n t-f ace. C oloque esc elem ento l i n k en la seccin de encabezado de su docum ento (lneas 9 y
10). La hoja de estilos de CSS referen ciada contiene b s siguientes reglas de CSS:

168

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

media sc re e n {

font-face {
fon t-fam ily : ' C a T H g r a f f l t t l '
f o n t - s t y l e : normal;
font-we1ght: normal;
src : l o c a l ( * C a l U g r a f f l t i ' ) i
u r l ( h ttp : //th e m e s .g o o g 1 e u s e rc o n te n t.c o m /s ta tic /fo n ts /
c a l i Igraff1tt1/vl/vLVNZY-z6SrVulR7lWdvyKIZAuOcNtpCWuPSaIROIeS
.w o ff*) fo rm a t( * w f f ) ;
}
>
La regla media s c re e n especifica que la fuente se utilizar al desplegar el docum ento en una pantalla de
com putadora (com o vimos en la seccin 4.11). La regla fo n t-fa c e incluye fo n t-f a m ily ( C a l U g r a f f i t t l ) ,
f o n t - s t y l e (norm al) y fo n t-w eig h t(n o rm al). Puede incluir varias fuentes con diversos estilos y pesos. La regla
O fo n t-fa c e tam bin incluye la ubicacin de la fuente.

5.15

Mdulo de diseo de caja flexible y selectores :n th - c h i1 d

El m d u lo d e d ise o d e caja flexible (M D C F ) facilita b s procesos de alinear el contenido de las cajas, cam biar
su tam ao, cam biar su orden en form a dinm ica y d istrib u ir el contenido en cualquier direccin. En el e je m p b
de la figura 5.16 creamos elem entos di v flexibles para cuatro d e nuestros tips de program acin. Al pasar el ratn
sobre uno de b s elem entos d1 v ste se expande, el texto cam bia de negro a blanco, cam bia el c o b r de fondo y
tam bin la distribucin del texto.
Las lneas 48 a 66 definen un elem ento d iv al que aplicam os la clase flex b o x de C SS. Ese elem ento d iv
contiene otros cuatro d iv . La propiedad d is p la y de la clase fle x b o x se establece en el nuevo valor de CSS3
box (lneas 16 y 17). La p ro p ie d a d b o x -o r1 e n t especifica la orientacin del diseo de la caja (lneas 18 y 19).
E l v a b r predeterm inado es h o r iz o n ta l (que de todas form as especificamos). T am bin podem os usar v e r t i c a l .
Para b s elem entos d1v anidados especificamos una transicin t r a n s i t l o n e a s e -o u t de un segundo (lneas
23 y 24). Esto tendr efecto cuando se aplique el e s tib de la subclase : hover (lneas 3 8 y 39) a u n o de estos
elem entos d iv para ex p an d irb .

<!DOCTYPE htil>
<! Fig. 5.16: mdcf.html -->
<1-- Mdulo de diserto de c a ja f l e x i b l e . -->
<html>
<head>
<meta c h a r s e t = " u tf- 8 " >
< title> M o d elo de d is e & n tild e ;o de c a ja f l e x i b l e < / t 1 t l e >
< H nk h r e f , h tt p :/ /f o n ts .g o o g l e a p is .c o n / c s s ? f a m n y = f lo s a r io
re = ' s t y l e s h e e t ' ty p e = t e x t / c s s >
< s ty le ty p e = " te x t/c s s " >

. f 1exbox
{

width: 600px;
h e l g h t : 420px;
Figura 5 .1 6 j Mdulo de diseo de caja flexible (parte I de 3)

5.15

16
17
18
19

21

. flexbox

22

63
64
63
66
67
68

169

display: -webkit-box;
d isp la y : box;
-w eb kit-bo x-o rient: h o riz o n ta l;
box-or1ent: h o riz o n ta l;

20

23
24
23
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
33
34
33
56
57
38
59
60
61
62

Mdulo de diseo de caja flexible y selectores :nth-child

> d1v

-w ebk1t-trans1t1on: l s ease-out;
t r a n s i t i o n : l s e a se-o u t;
-w eb k lt-b o rd er-rad iu s: lOpx;
b o rd e r-ra d lu s: lOpx;
border: 2px s o l i d black;
width: 120px;
nargln: lOpx -lOpx lOpx Opx;
padding: 20px 20px 20px 20px;
box-shadow: lOpx lOpx lOpx dingrey;
}
.flexbox
.flexbox
.flexbox
.flexbox

> d iv :n th -c h ild (l){


> d 1 v : n th -c h 1 ld (2 ){
> d 1 v : n th -c h 1 ld (3 ){
> d i v : n t h - c h i l d (4 ) {

background-color:
background-color:
background-color:
background-color:

lig h tg re y ;
H g htgrey ;
H ghtgrey;
H ghtgrey;

}
}
}
>

.flexbox > d1v:hover {


width: 200px; c o lo r: white; font-we1ght: bold; }
.flexbox > d i v : n t h - c h 1 l d (l ): h o v e r { background-color: royalblue; )
.flexbox > d 1 v :n th -c h 1 ld (2 ): h o v e r { background-color: crlmson; }
.flexbox > d iv : n th - c h il d (3 ): h o v e r { background-color: criason; )
.flexbox > d 1 v : n th -c h 1 ld (4 ): h o v c r { background-color: darkgreen; }
p ( height: 2S0px; overflow: hidden; fo nt-fam ily : "Rosario" )
< /style>
</head>
<body>
<d1v c l a s s "flexbox"
<div<1mg src - "CPP.png" a l t = "Icono de buena pr&aacute;ct1ca de programaci&oacute; n">
<pLas buenas pr&aacute;eticas de programaci&oacute;n indican l a s t&eacute;cnicas que
l e ayudar&aacute;n a producir programas m&aacute;s c la r o s ,
comprensibles y f& a a c u te ;c ile s de mantener.</p</div
<d1v<iig s r c "EPT.png" al t "Icono de t1p para p re v e n ir erro re s"
<pLos t i p s para p re v e n ir e r r o r e s contienen sugerencias para exponer e r r o r e s
y e lim in a rlo s de sus programas; muchos describen aspectos de
programaci&oacute;n que e v ita n que lo s e r r o r e s entren s iq u ie r a
a los programas.</p</div
<div<1mg src = CPE.png" al t = "Icono de e r r o r con&uacute;n de programaci&oacute;n">
<pLos e r r o r e s comunes de programaci&oacute;n se& ntilde;alan lo s e r r o r e s que cometen
lo s e s tu d ia n te s con frecuencia. Estos e r r o r e s comunes de programaci&oacute;n reducen
l a pro bab ilid ad de que usted cometa los mismos errores.< /p< /div
<d1v><1mg s r c = "SEO.png" a l t - Icono de observadA oacute;n de 1ngenier&iacute;a
de software"<pLas observaciones
de 1ngenier&iacute;a de software resaltan los asuntos de a rq u itec tu ra y dise&ntilde;o
que a fe c ta n en la construcci&oacute;n de sistemas de software,
en e sp e cia l los sistem as de gran escala.</p</d1v>
</di v>
</body
</html

Figura 5 .1 6 | Mdulo de diseo de caja flexible (parle 2 de 3).

170

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

a) Cada elemento d1v anidado tiene un color de fondo cilio y texto negro al principio. Parte del texto
est oculto.

/ MoOF* dn***cc*c*

^ file///Xye>en>ploi/capOS/f*gOS.16/rncfhtmi

uge**C4

r t U t G # k r, Q

F 'Cj =

\m p & U z t H U m

T#

U s buenas
prcticas de
programacin
indican las
tcnicas que fe
ayudarn a
producir
programas ms
daros.
co m p re n d e s y
fciles de
m antener.

lo s tips para
prevenir errores
contienen
sugerencias para
exponer errores
y elim inarlos de
sus program as;
muchos
describen
aspectos de
programacin
que evitan que
_____________________

Los errores
comunes de
programacin
seAalan los
errores que
cometen los
estudiantes con
frecuenoa. Estos
errores comunes
de programacin
reducen la
probabilidad de
i* *4

Las
observaciones de

ingeniera (Je

software resaltan
sos asuntos de
arquitectura y
d*seAo que
afectan en la
construccin de
sistem as de

software, en
espeoal los
4m

b) Ganda el ratn pasa sebre : n th -ch ild (2). la caja flexible se expande, el cokx de background-

color cambia a Crfnson. el texto oculto se revela y el texw cambia a una fuente en negrita de cok* *h1 te

C ^ *iir///X/*)cmolos/cao05/fig05.16/nw
t t c U9f4d

Q Wffe S*c 6*try Q

Las buenas
prcticas de
programacin
indican las
tcnicas que fe
ayudarn a
producir
programas ms
daros.
com prensibles y
fo les de
mantener.

titm i

lmp>srt{k d# b*m

l o s tips para p rr w n ir
e rro re s contienen
su g eren cias para eip o n er
e rro re s y elim in arlo s de
s u s program as: m uchos
d escrib en aspectos de
program acin que evitan
que lo s e rro re s entren
siq u iera a lo s program as.

Los errores
comunes de
programacin
seftalan tos
erro res que
com eten los
estudiantes con
frecuencia. Estos
errores comunes
de programacin
reducen (a
probabilidad de

Las
observaciones ae

ingeniera de
software resaltan
lo s asuntos de
arquitectura y
diseco que
afectan en la
construccin de
sistem as de
softw are, en
especial los
i.

Figura 5 .1 6

<t

Mdulo de diseo de caja flexible (parte 3 de 3).

Selectores :n th -ch 1 ld
E n CSS3 podem os usar selectores para seleccionar con facilidad los elem entos a los que se aplicar estilo con
base en sus atributos. Por ejem plo, podra seleccionar una de cada dos filas en una tabla y cam biar el color de

5.16

Diseo multicolumna

171

fondo a azul, p ata facilitar la lectura de la tabla. Tam bin podem os usar selectores para habilitar o deshabilitar
elem entos de entrada. En las lneas 33 a 36 usam os selectores :n t h - c h ild para seleccionar cada uno de los
cuatro elem entos div en el flexbox d iv ai que se va a aplicar un estilo. EJ estilo en la lnea 33 usa d iv :n th c h l l d ( l ) para seleccionar el elem ento di v que es el primer hijo de su padre y aplica el color background-color
LightBl ue. D e m anera similar, div: nth-chi I d (2 ) selecciona el elem ento div q u e es el segundo hijo de su p a
dre, d i v : n t h - c h i l d (3 ) seleccio n ad tercer hijo d e su padre y di v : n th - c h 1 ld (4 ) selecciona el auirto hijo de su
padre; cada uno aplica u n background-color especificado.
A continuacin, b s lneas 38 a 43 definen los estilos que se aplicarn a los elem entos d iv anidados cuando
el ratn pase sobre ellos. EJ estilo en las lneas 38 y 39 establece b s propiedades w idth (200px), c o lo r (w h ite )y
fo n t-w e ig h t (bold). Luego usamos selectores : n th -c h i Id para especificar un nuevo color d e fondo para cada
elem ento di v anidado (lneas 40 a 43).
Ib r ltim o, aplicamos estilo al elem ento p: el texto d en tro de cada d iv (linca 44). Especificamos una alrura
de prrafo de 250px y el valor de o v erflo w com o hldden, para ocultar el texto que no se ajuste a b alrura de
prrafo especificada. En la salida observe que el texto en el segundo elem ento hijo (los T ips para prevenir errores),
d texto o v e r f l ow est oculto. Al pasar el ratn sobre el elem ento, se reveb todo el texto. Tam bin especificamos
b focntc de Google R o sa rio , que incrustam os en nuestra hoja de esrilo (lincas 9 y 10).
Los selectores son un tem a extenso. En captulos posteriores dem ostrarem os funciones adicionales de los
selectores de CSS3. Para aprender ms sobre sus poderosas capacidades, visite:

http://w w w .w 3.org/TR /css3-selectors/

5.16

Diseo multicolumna

CSS3 nos perm ite crear diseos m ulticolum na oon facilidad. En la figura 5.17 creamos un diseo de tres co
lum nas al establecer b propiedad column-count en 3 (lneas 15 a 18) y b propiedad colum -gap (el espacio
entre colum nas) en 30px (lneas 20 a 23). Despus agregamos una lnea negra delgada entre cada colum na m e
diante el uso de b propiedad coliw m -rule (lneas 25 a 28). C uando ejecute este ejemplo, pruebe a cam biar el
tam ao de b ventana de su navegador. O bservar que la anchura de bs colum nas cambia para ajustarse al diseo
de tres colum nas en el navegador. En b seccin 5.17 le m ostrarem os cm o usar consultas de m edios para m o
dificar este ejem plo d e m odo que el nm ero de colum nas vare en form a dinm ica, con base en el tam ao de b
p an talb del dispositivo o la ventana del navegador, lo cual nos perm itir personalizar el diseo para dispositivos
enm o sm artphoncs, rablcts, notcboolcs, equipos de escritorio y ms.

<!DOCTYPE htnl>

3 < ! - - Fig. 5.17: mult1columna.html -->


4 < ! - - Texto multicolumna en CSS3. >
3 <htl>
6
<head>
7
<meta c h arset **Utf-8">
8
< t1tle> V arias columnas</t1tle>
9
< sty le type = " t e x t / e s s ">
10
p
11
{ margin:0.9em Oem; >
12
.multicolumna
13

Figura 5 .1 7 | Texto multicolumna en CSS3 (parte I de 3).

17 2

Captulo 5

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

/ e s ta b le c e r el nmero de columnas en 3 * /
-webk1t-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
column-count: 3;
/ * e s ta b le c e r el espacio e n tr e columnas en 30px */
-webk1t-column-gap: 30px;
-noz-column-gap: 30px;
-o-column-gap: 30px;
column-gap: 30px;
/* agregar una l i n e a negra delpx e n tr e cada columna * /
-webklt-column-rule: lpx o u ts e t black;
-aoz-column-rule: lpx o u t s e t black;
-o-column-rule: lpx o u ts e t black;
column-rule: lpx o u ts e t black;
}

</style>
</hea<b
<body>
<header>
<hl>Comput a d o ra s , h a r t a r e y software<hl/>
</header>
<d1v c l a s s = "mu t i columna"
<p>Una computadora es un d i s p o s i t i v o que puede r e a l i z a r c&aacute;lculos y tomar
d e cisio n es l& oacute;gicas con mucha m&aacute;s rapidez que los humanos.
Muchas de l a s computadoras personales de l a a c tu a lid a d pueden r e a l i z a r m iles
de m illones de
c&aacute;lculos en un segundo&mdash;m&aacute;s de lo que un humano puede r e a l i z a r
durante toda su vida. Las supercomputadoras ya se encuentran re a liz a n d o miles
de b ill o n e s ( t r i l l o n e s ) de in s tru c c io n e s por segundo. Para poner
esto en perspectiva, una computadora de un tri11&oacute;n de instrucciones por segundo
puede r e a l i z a r en un segundo m&aacute;s de 100,000
c& aacutelculos para cada persona en e l p la n e ta . Y&mdash;estos
"l& iacu te;m ites su p e rio res" aumentan con rapidez.</p>
<p>Las computadoras procesan datos bajo e l c o n tro l de conjuntos de
in s tru c c io n e s llamadas programas de computadora. Estos programas gu&iacute;an
a l a computadora por conjuntos ordenados de acciones e s p e c ific a d a s por
personas llamadas programadores de computadora. Los programas que se ejecutan en una
computadora se conocen como software. En e s t e l i b r o usted
aprender&aacute; sobre l a metodolog&iacute;a de programaci&oacute;n clave de
l a a c tu a lid a d que
mejora l a productividad del programador, con l o cual se reducen lo s co sto s de
d e s a r r o llo de
software&mdash;programaci&oacute;n o rie n ta d a a objetos.</p>
<p>Una computadora c o n s is te de d iv ersos d i s p o s i t i v o s conocidos comohardware
(p o r ejemplo: el te c la d o , p a n t a l l a , rat& oacute;n, d isc o s duros, memoria, DVD
y unidades de procesamiento). Los costos de l a s computadoras disminuyen en forma
dram&aacute;tica, debido a los r&aacute;pidos desarrollos en las tecnolog&iacute;as de
hardware y software. Las computadoras que podr&iacute;an haber llenado salones
extensos y c o s ta r millones de d&oacute;lares hace unas d&eacute;cadas ahora se
inscriben en chips de s i l i c i o m&aacute;s chicos que una u&nt1lde;a, que cuestan
ta l vez unos cuantos d&oacute;lares. Por iron&iacute;a, el s i l i c i o es uno de los
m a te ria le s m&aacute;s abundantes&<ndash;es un in g re d ie n te en l a arena
o r d in a r i a . La tecnolog&iacute; a de chips de si l i c i o ha hecho l a computaci&oacute;n
tan econ&oacute;mica
que hay n*aacute;s de mil millones de computadoras de propoacute;sito general en uso
en todo el rrundo, y se espera que esta c i f r a se duplique en los pr&oacute;ximos

Figura 5 . 17 | Texto multicolumna en CSS3 (parte 2 de 3)

5.17

67
68
69
70
71
72
73
74
73
76
77
78
79
80
81
82

Consultas de medios

173

a&nilde;os.</p>
<p>Los chips de computadora (m icroprocesadores) controlan innumerables d is p o s it iv o s .
Estos sistem as in c ru sta d o s incluyen frenos antlbloqueo en lo s au to s,
sistemas de navegaci&oacute;n, electrodom&eacute;sticos i n t e l i g e n t e s , sistemas de
seguridad en el hogar, tel&eacute;fonos c e l u l a r e s y Smartphones, robots, i n t e r
secciones
de tr& a a c u te ;fle o i n t e l i g e n t e s , sistemas para e v i t a r c o lis io n e s , controladores de
videojuegos y m&aacute;s. La Inmensa mayorAiacute;a de los microprocesadores que
se producen cada a & n tild e;o se in c ru sta n en d i s p o s i t i v o s que no son computadoras
de prop&oacute;sito general.</p>
<footer>
<et>Acopy: 2012 por Pearson Education, Inc.
Todos lo s derechos reservados.</et>
</footer>
</d1v>
</body>
</html>

V M C6 u r r

C
S
*

&

i+ymot

_________________________________________________________________________________________________

f'*r///X/it)c<npO5/cap057fgD5.l7/rmilt<olumMWml

Pr =

ii.bS
v.G
i^ Qlap
n
aid
id
+
1
n
e
a
m

C om putadoras, h ard w are y s o f t w a r e


t'ru computadora et un (to p o ro qoe
puede t'dvM cafcifc y toen* toouonrt
topeAScctk mucha mas i apto; qjr tos
bananos M th n de bt computado*a
personales de U actxuklfe! pordw rafear
niie de ntfiemes de cafados en un ttfuodo
xcak de to que m batano puede sef e a
citante toda ra -vii Las
tupercomputadoras st ir encueraan
refeaodo tatos de bfeoes imicro:) de
tsaurooor* pot \r(und; Paa pemee no
en per speema. um computadora de un
tNk* de nstnsccKori pee tepad) puede
rtfe a en un softndo teas de ICO.000 de
cafado paa cada penena en d planeta Y
foi hxutci superiores aumentan con
rapidez
Las coopoadccas procesan ditos bajo d
coouoi de conjuros de msturckrot
Lais: pcocraais de computadora Es o
proparuw r* n a to cotoputadova por
CMjMM ordenados de
eipecdicadu pe* per senas Im naiis

s0 eente en b s e c a o c d u n i La

p r o p a a a d c r r s to c o m p u ta d o ra Los
pvcpm nA s q a r s e ejecuta en

tai

co m p u tad o ra s e conoces c o b o s o f tw a e
e s te

Ufcrou ste d a p r e n d a a

te c o o to p a d r chips 5r t&oc* h a h e c h o to

En

so b re to

c o m p u ta * * ta c e c o n o m a que h r , ms d e
w a ilo n e d e ccnfB A adoras d e p t o p o it o

y se

m e to d o to p a d e p r o p a s a d o * c li s e d e to

f e u r u f en a to r u to d o e l a u n d o .

a c tu ih d a d que tro je ra to p r o rf e u v x ia d ri

e s p e ra que esta c i t a le t i n q u e o lo t

p o p a u d - r . c o n to cual s e r e d a r e n tos

p rc a im o s a m o ld e .o s

cenaos d e d e s a n c l o d e c f t a a *
p r o p a m o o n c ro m a d a a o b jeto s

t oa ce m p a ta d la crrase de d o m o s
Aspse* o* c cocedor como h a . K a e pet
ejemplo el teclado p an ag ratee, d ieos
d ao s, arro o m . DVD y o n d a to de
proce saaiefco) Los costos de bs
computadora donannen enferma
di amanea debido a tos riptttos d esal lo s
en tos eecnotopas de h a d a s e y scttr.-ae
Las computadora que podnan haber
leado jalone: extensos y c o sta d o n e s de
dolar hacer unas dcadas abeva se
au criben en chps de f e t o mas d a ro s que
na ua. que cuntan u l \* i unos cuantos
dlves Por lo n a . d tto io es ano de tos
aurnato mas abcndaite t t un

Los chq?s de computadora


na.*r uptoceiadcees) cofAobn B u n n a U n
d ap o o aro i Esaos sestemue mcrustados
vkr.en hm c* antfcfcxpro en los autos,
trgftna; de n i\ a c * . etortrodccnesnro:
r tr to n tf n . m in a u de sepaxiad ca el
hc<* tefc&oos cefcae; r S m a q u e e ;
robots, ntm ecciooes de tm&ro ntripentev
interna* p ata estar cdksmes.
ccrtxobdores de vxtoofaegos y ma? La
mema m aycm de tos naupeornado*es
qoe se predicen coda 5o se m n u a a i en
AspoM*cs que no sea computadora de
preposao pmeral
C 2022 par Pr:oK E ducaran tnc

Teda: /o ertebai 'icmurfoi

Figura 5 .1 7 | Texto multicolumna en CSS3 (parte 3 de 3).

5 .17

Consultas de medios

C on los tipos de medios de CSS (seccin 4 .1 1) es posible variar el estilo con base en el tipo d e dispositivo en el
que se vaya a presentar la pgina. Los clsicos ejem plos son estilos y tam aos de fuentes variables, dependien
do de si se va a im prim ir una pgina o a m ostrar en u n a pantalla. Por lo general los usuarios prefieren fuentes
sans-serif en las pantallas y fuentes serif en papel. C o n las consultas de medios de CSS3, podem os determ inar los
atributos m s finos de los m edios en los que el usuario est viendo la pgina, com o la longitud y anchura del rea
visible en la pantalla, para personalizar m ejor su presentacin.

17 4

Capitulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

E n la seccin 5.16 creamos una pgina con un diseo m ulticolum na que inclua tres colum nas de texto
y u n a linea negra delgada entre cada colum na. Sin im portar cm o ajustram os el tam ao de la ventana del
navegador, cl texto segua desplegndose en tres colum nas, incluso aunque stas tuvieran que ser demasiado
estrechas. En la figura 5.18 m odificam os ese ejem plo m ulticolum na para alterar los nm eros d e colum nas y las
lneas entre stas, con base en el tam ao de pantalla del dispositivo en el que se est viendo la pgina.

La regla Qaedla
La regla media se usa para determ inar el tip o y tamao de dispositivo en el que se va a desplegar la pgina.
C uando el navegador exam ina la regla, el resultado es verdadero o fabo. Los estilos d e la regla se aplican slo si
el resultado es verdadero. Primero usam os la regla Omedi a para determ inar si la pgina se va a desplegar en u n
dispositivo porttil (com o un sm artphone) con un valor de m ax-width d e 480px, o un dispositivo con una pan
talla q u e tenga un valor de m ax-device-w idth d c 4 8 0 p x ,o en una pantalla que tenga un valor d e m ax-width de
480px (lneas 13 a 15). Si esto es verdadero, establecemos el valor de colum n-count en 1; la pgina se desplegar
en una sola colum na en dispositivos porttiles com o el iPhone, o en ventanas de navegador cuyo tam ao se haya
ajustado a 480px o menos (lincas 17 a 19).

<!DOCTYPE htal>

3
4

3
6

<1-- Fig. 5.18: consultasmedios.html -->


<1-- Uso de c o n su lta s de medios para v o lv e r a d a r formato a una pgina
an chura del d i s p o s i t i v o . -->
<html>

conbase en la

<head>

9
10
11
12
13
14
15

<reta c h a r s e t ,,u tf-8">


< t1tle>C onsultas de m edios< /title>
< sty le type = " te x t/e s s "
p
{ margin: 0.9em Oeai; }
/ e s t i l o s para smartphones con anchuras de p a n ta ll a de 480px o menos */
redia handheld and (max-width: 480p x ),
screen and (max-device-width: 480px),
screen and (max-width: 480px)

16

17
18
19

d iv {
-webkit-column-count: 1;
column-count: 1; )

20

21
22
23

/ e s t i l o s para d is p o s iti v o s con anchuras de p a n t a l l a de 481px a 1024px /


Omedia only screen and (min-width: 481px) and
(max-width: 1024px)

24

23
26
27
28
29
30
31
32

d iv {
-webkit-column-count: 2;
column-count: 2;
-webkit-colurn-gap: 30px;
column-gap: 30px;
-webkit-column-rule: lpx o u ts e t black;
column-rule: lpx o u t s e t black; }
}

Figura 5 .1 8 | Uso de consultas de medios para volver a dar formato a una pgina con base en la anchura del
dispositivo (parte I de 4).

5.17

33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
51
32
53
34
33
36
57
38
39
60
61
62
63
64
63
66
67
68
69
70
71
72
73
74
73
76
77
78
79
80
81
82
83
84
83

Consultas de medios

175

/ * e s t i l o s para d is p o s iti v o s con anchuras de p a n t a l l a de 1025px o mayor /


media only screen and (m1n-w1dth: 102Spx)
{
d iv {
-webklt-column-count: 3;
column-count: 3;
-webkit-coluim-gap: 30px;
column-gap: 30px;
-w ebk it-colun n-ru le: lpx o u t s e t black;
column-rule: lpx o u t s e t black; }
>
</style>
</head>
<body>
<header>
<hl>Computadoras, hardware y software</hl>
</header>
<div>
<p>Una computadora es un d is p o s i tiv o que puede r e a l i z a r c& aac u telc u lo s y tomar
d e c isio n e s l& oacute;gicas con mucha m&aacute;s rapidez que lo s humanos.
Muchas de las computadoras p erson ales de l a a c tu a lid a d pueden r e a l i z a r miles
de millones de
caacute;lculos en un segundoSmdash;m&aacute;s de lo que un humano puede r e a liz a r
durante toda su vida. Las supercomputadoras ya se encuentran re alizan d o miles
de b il lo n e s ( t r i l l o n e s ) de in stru c c io n e s por segundo. Para poner
esto en perspectiva, una computadora de un trill&oacute;n de instrucciones por segundo
puede r e a l i z a r en un segundo m&aacute;s de 100,000
c& aacute;lculos para cada persona en el p la n e ta . Ytadash;estos
"l&1acute;mites s u p e r io r e s aumentan con rapidez.</p>
<p>Las computadoras procesan datos bajo el control de conjuntos de
in stru c c io n e s llamadas programas de computadora. Estos programas gu&iacute;an
a l a computadora por conjuntos ordenados de acciones e s p e c if ic a d a s por
personas llamadas programadores de computadora. Los programas que se ejecutan en una
computadora se conocen como softw are. En e s t e l i b r o usted
aprender&aacute; sobre l a metodolog&iacute;a de programaci&oacute;n clave de
l a a c tu a lid a d que
mejora l a productividad del programador, con lo cual se reducen lo s costos de
d e s a r r o l l o de
software&mdash;programaci&oacute;n o r ie n ta d a a objetos.</p>
<p>Una computadora c o n s is te de d iv ersos d is p o s itiv o s conocidos comohardware
(p o r ejemplo: el te c la d o , p a n t a l l a , rat&oacute;n, discos duros, memoria, DVD
y unidades de procesamiento). Los costos de la s computadoras disminuyen en forma
dramaacute;tica, debido a los r&tacute;pidos desarrollos en las tecnolog&iacute;as de
hardware y softw are. Las computadoras que podr&iacute;an haber llenado salones
extensos y c o s ta r m illones de d&oacute;lares hace unas d&eacute;cadas ahora se
inscriben en chips de s i l i c i o m&aacute;s chicos que una u&nti1de;a, que cuestan
t a l vez unos cuantos d&oacutelares. Por iron&iacute;a, el s i l i c i o es uno de los
m a te ria le s m&aacute;s abundantes&ndash;es un in g re d ie n te en l a arena
o r d i n a r i a . La tecnolog&iacute ;ade chips de s i l i c i o ha hecho lacomputaci&oacute;n
tan econ&oacutemica
que hay m&aacute;s de mil millones de computadoras de propioacute;sito general en uso
en toda el mundo, y se espera que e s ta c i f r a se duplique en los prtoacute;ximos
a&nilde;os.</p>
<p>Los chips de computadora (microprocesadores) controlan innumerables d is p o s itiv o s .
Estos sistemas in c ru stad o s incluyen frenos antibloqueo en lo s autos,
sistemas de navegaci&oacute;n, electrodom&eacute;sticos in teligen tes, sistemas de
seguridad en el hogar, tel& eacu te;fo nos c e lu la r e s y Smartphones, robots, i n
te rse c c io n e s

Figura 5 .18 | Uso de consultas de medios para volver a dar formato a una pgina con base en la anchura del
dispositivo (parte 2 de 4).

176

86
87
88
89
90
91
92
93
94
93
96

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

de tr& a a c u te ;fic o i n t e l i g e n t e s , sistemas para e v i t a r c o lis io n e s , controladores de


videojuegos y m&aacute;s. La inmensa mayor&iacute;a de lo s microprocesadores que
se producen cada a & n tild e;o se in c ru sta n en d i s p o s i t i v o s que no son computadoras
de prop&oacute;sito general.</p>
<footer>
<e*>&copy; 2012 por Pearson Education, Inc.
Todos lo s derechos reservados.</em>
</footer>
</d1v>
</body>
</html>
a) Estilos para smartphonescon anchuras d pantalla de 480p x o menores.
TI

<r///X.e:<<rc*O5.cap05.
Mi

ttn tc t& e fc v r O b o o n ** de l * t n

C o m p u ta d o ras, h a rd w a re y softw are


l'o a c c m p x a A ta es va
gor p o rA
tea b a r O k tk y temar r c a c a n b e : * cea
n a x la mas t ^ t A r
fes b a a o s M a la t
U
p m c t a l n d r la Ktuafcdod
l
teaL 'a ades d r m ira n de td e d ra
ta ir # l u na de b *psr m l i a a i ja r d e
t r a b a d a m te soda m
Las
iiJNROTVObdira va se a n e a r e a b a n b
tfdrs de U icw n ra io a rt de aMOarocae* por
t e f b Para pcoei n o m pervprvm a. na
(c a p e a d o ra d en ttd.i d r a d v e n r t pe
ry a -k ' pc*A i d / m t a ^ p o V au de
10 0 .0 0 0 d r ed rafc* p a a c a d a
ra H

tenad a Sledado p&x/zLs tasca, doces A ro *


nraaona DVD v m d * A d r procrearan**
Lo conos de les ccnvesadxa A xm xr.m a
Ic e te i n u v a delude 8 b s i pdot Asaxtcios
r a l a src ftc b p A b a r A n e > t d l > a e L a
c o a p g ta fc ra gar podra U b rr I r A salean
nflDraxn y c o sa lA
and r d e ia r b a c a
a
dcada abca se n v c rle s r a A p de d e a
clacos g u r ab.
r a n i m tal * tj
a a a tfu s d f a n Pe auan. H f f e s o d r b *
la a m a o d u i u La f n o H o p i d r . h | t dr
t c tc Hi brebo Is c o o p r v * tan occaoa a
<9* km a u s d r ud a d b a n d r
<6*

b) Estilos para dispositivos con anchuras de pantalla de 481p x a 1 0 2 4 p x .

I *eV//X/e)enpwcc05.1gW.I/C5TOinrneooi.rt^

WvtSSceirihry 3

C o m p u ta d o r a s , h a r d w a r e y s o ftw a re
l c c o tn ra d o n r s m A spenm e gor p x t r f t t a
calcdcs temar deosaoon b # ta > eco i t u i a ojo i * A z
9 k > tlt8 M K 4 M n lu a r b r r a f u t a b o p o x i d n
d r la a c n iA M la rd e n t n r a o h de r a l e a n d r
c i b A s r a in s r f w d o - b A b g t* a baoaao curda
ird u a r d a l e k*di ao 'u ia L o u ^ e i . c n i t i i i i i o ya
se rwrar m rrafeanfe des d r lO o a n t r j d r
oiktKCM on pe y p n J Pata p e a n n o rn p e rip e cia *
m * f fiH M a t n de ra triket de o r n e a r a n pos
y p o i yur A rra k r* r a r a s r f tm b a r a d f 100 0 0 0 dr
c lcd o sfm a <*da per to n a ra el p b s r t* Y - e o o T n i*

l as Cf
dM i proc-saa A ras h a b d -c u a c t d r
c a ra s io s de m a c a ra n lanada
Ji
: c s f O a b i i Euoi p c p a s a i (u a a la : a c p a a i i
por crayaoos cd ra fe * d r a c a r a n n p e c tk a f e t pe
p e s a r a im a d a ; pec^asradoers d r c c rap n ad x a Los

pie e r a r a ^J m e j t o i m ra txu w c ^ u o d u ia u
ccoocra c e n o toAirarv Ea n r r Mto w o d ^ *rm d n a
sote? b ronodcb-CM de ptcyranucsca d m r A b
actraidad ^ o r oscMa b ptodaJM dad d d y t c e a a d a
cea b .tu i se rcAscea Ira coseos d r <Ab M P d r x 6 w r
p ' p T . i r s enratsda s e ^ r t o i
I 'm ccM***xk*M c o r a r a d r A m o s A p cm fto s
ccoeotfe* cora b a A a n 'pe ej pf o ri M d o .
parala ta k u Ascos A e o t nntK sra DVD > taadadn
A psixeta n * o ) Los costo A U c o n p sta d n t*
i S n m r a c a fa ra n A anua: a d rtw b 8 b * r * p d
d r u m d o t r a lar tro ir i o p n A b a d * n r y x d w a re Las
r c o p r a b i n <yse p e A n o M f n A ra d o talcoet m e m o s
y costar tr*bor A dobrr b a c n rara dreadm alra se
T i f c n r a cbf A A c U i ebeos ^u u u t*U f
rwestaa tal v -r nos e tra io s A A re t Pv lera s A b a o n
ra o A b s an lm a lrs o r a aHaedoOrs n t u oaprA nnr
ra U ateta c a d b a u La K v a o b ^u A hp A Wk-a) ba

beeb h i c a p t f a * la* f tc t u n t i
La- m u A u x
mftcori A ro a^raaA ee A prepoato prand r a m ra
todo H i r a d o , v r n p n a gae f f t edra y d t f f e ? * ra
b s piuuasos AaAA.os
. bp A ( O f M n cn*T tfce4tkm > co raalra
rate u n sb b AposO Sos Estos u i a u a i rarastadus
r a k r r ti 6 r s m aelM o^sro r a b s n m t m n a t A
n r p . r , H rc to d rro n b ro s dri | n t s sirMt A
sefnsdo r a el bofar tekA aos c e b i a n y S o a t k a i
icfcvti B W s w o r m de l A v n d p > * r iSrani para
m m eekmomn . c c o b A x n A %sdrcyor|os y ira* La
n e m a n i i c r A b s c n rrc fro c ta A n
se
pfotbcra c a A ab se m u s r a Aporateos gor ao soa
<cst*ti*&a A p i p a fr-eral
C : 0 j ; p e e P4y,9C E r a r a m /ne Tcas fat

Arrbt uvnabc

Figura 5 . 18 | Uso de consultas de medios para volver a dar formato a una pgina con base en la anchura del
dispositivo (parte 3 t 4).

5.18

Recursos Web

177

c) Estilos para dispositivos con anchuras de pantalla de 1024px o mayores

jj C r t A i

^ ________________________________________

f*ley//Xyc3mo4ov'c*pDS/tg05.1S/axtt^vnedioi.html
' fatuf***
Ohpwladeft hfm

mcrs

C o m p u t a d o r a s , h a r d w a r e y s o f tw a r e
C oa <cqp tf*d c*a es ue (k p o ia tA o q u r puede t r a b a r
c 4 n c y Um m K w > b p : o ta u ) u nu% iq * A r:
que k> tm O D iH N tu:hit d e Lu : c t s p jU l< 4 k p a w n i r t
de b k lM V W I p u r m t t a f c j i c i r l d e c s lo o c i de
c ik tf e e a m e p * 4 > m a i d r lo que t a tronar.' fu e d e
tr.ik.-ai d f t a r toda aa *U La j p m o s p u u d i a ya
u m . umfc a trafc:jrwV> a ie > de bdkw r* >tnEoor) de
m tfrarcioa* pee Mfuado Para p o n rr eo e p e n p e c * * .
m c u o p e a r W r d r t a ir iS u d e a t o v o c a e i pee
k r ju f c i' p u r d r t r a b a n t * f u * fc mas d r 1 0 0 0 0 0 de
ekio pora ra d a prcna e a a lp b n r ta Y - r a w T n l n
MpcnoVTS s a u u a D c w n p id re
Las comp<*A:is p io c e u n
b a jo d coettol de
c<m $ati de u ssro caco M I w ^ h p ro fra m u de
cow fM tadxa E o s c * * a a fuaca a U cocifaaaScea
por ccojoosoi cedenados de i c j o o o e s p e c i a d a s pee
f x i t & u a L aru d as p ic a amador e i d e c o u p u C a k e a L oi

p c o a a m is qur se e je c u te , en u ta ;e m p a ta d la se
cooocea com o M dw are En ese Ubto aied ap een d n a
*o U e b m e io d o k * a de
c lr - r d r b
a:tuabLk3 q a r t a r a r a b p o d a r * * b d d ri pic^taauadce.
e c o lo cual se t e d a : le * costos de d e u n d b de M am are

hecho b t a n p m i flfl u n f i c c c i u - i qoe has m l de txd

- ? w c f i M m c k * c o rte a d a a objetos

lo c h p de c o n fu ta d o ra tn a c T u p tc c rta d o to ) c mofan
ra u n fia b le
EttO Mtrmw a h u ila d o
f i n e s a r i > l > y r o lo auto aucecu de
n r . r p t w n rie d ro A fn rtO rc i a frlg ra te M ttrmat de

t o a cooryutaA .ta cceotflr de d ftttu > i


ccm oaA oi < c a h x & a w r ip o r ejempk> rt teclado
panuda, t a n A x o i d a c n r k ttk v u l D V D y tnadade*
i l r p i K f u n v t f o ) l o costo d r a s c u B p j b tf c * *
dm avnr form a A muesca drfcdn a lo r a p A *

n k o r i de c o a ^m a d c e a s de p te p o m o (eranal en nao en
fo d o et ttanfc. > v o p r t o q ue esta c f t a e ifc ftq re en
los p c i s o o i J A n lie t

re p m d a d e n d b o p r . trtrfiu o cekjbrr y S m anphooo.


rotea, trx seccomr d r trafico itf r iq r a ir t uktema para
n i r ccfcuoar* cooBrobdorr de u d tcfo rfO > ma l a

drw m > lo en lar tecocA op d r b a r A * * ? y x d h * w e la


(V topuudcea q u r p o d a n k abrt I m u f e abnr n t v n e i
y costar n d c w i de J a r * hacet u i a i dcada a k e ta e
n je rib e n eo chp de a t o o tra s charo qoe o a u m . que

r i ry r .M m r.x e u d e k * n a c ru p ro c o a d o re i qoe re
p ro d ae rn c a d a afio se i m i i a en d n p o rtn o ipF oo sen
cccaputadxa de p o p o < o f e a re d

cuestan cal vex o c o a rte* d e b re s Pee ecw n. d sfco


uk d e Id m atm a b o a< aixaaSaaere s m
en b a m a c r i n a r a l a ifcocA of
ehp< d * Ano ha

C : 0 / : / x f A * * i E W a o o a /ne T c d o ifa f
denrrlsox

er

'rfjtfn*ae20i

Figura 5 .1 8 | Uso de consultas de medios para volver a dar formato a una pagina con base en la anchura del
dispositivo (parte 4 de 4).
Si La condicin en las lincas 13 a 15 es falsa, una segunda regla media determ ina si la pgina se va a des
plegar en dispositivos con un valor d e m in-w idth de 481px y un valor de m ax-width d e 1024px (lneas 22 y
23). Si esta condicin es verdadera, establecem os el valor de colum n-count en 2 (lneas 26 y 27), colum n-gap
(el espacio entre colum nas) en 30px (lneas 28 y 29) y co lu m n -ru le (la lnea vertical entre las colum nas) en lpx
o u ts e t b la c k (lneas 30 y 31).
Si Las condiciones en las primeras dos reglas ftnedia son fabos, usamos una tercera regla media para de
terminar si la pgina se va a desplegar en dispositivos con un valor de min-width de 1025px (lnea 34). Si la
condicin de esta regla es verdadera, establecemos el valor de col umn-count en 3 (lneas 37 y 38 ), column-gap
en 30px (lneas 39 y 40) y column-rule en lpx outset black (lneas 41 y 42).

5.18

Recursos Web

http://www.w3.org/Style/CSS/
Pgina inicial de W 3 C para CSS3.
h ttp ://w w w .d e i t e l . com /css3 /
El C entro d e recursos de CSS3 de D eitel incluye vnculos a tutoriales, ejem plos, la docum entacin de los es
tndares de W 3 C y ms.
h ttp ://la y e rs ty le s .o r g
h t t p ://w w w .c o lo rz ilia .c o m /g ra d i e n t- e d 1 to r /
h ttp ://c s s 3 g e n e r a to r .c o m /
h tt p :/ /c s s 3 p le a s e .c o m /
Sitios que le pueden ayudar a generar cdigo C SS3 para distintos navegadores.
h ttp ://f in d m e b y ip .c o m /litm u s /
Busque las funciones de CSS3 soportadas por o d a uno de los principales navegadores.
h tt p :/ /c s s p r e f i x e r .a p p s p o t.c o m /
\sx herramienta CSSPrefixcr nos ayuda a agregar prefijos de proveedor al cdigo CSS3-

h t t p ://css-tricks.com /exam ples/H SLaExplorer/


Un dem o de CSS que nos perm ite jugar con los colores HSLA.

178

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

R esu m en
Seccin 5 .2 Som bras de texto
La propiedad text-shadow de CSS3 (pg. 143) facilita el proceso de agregar un efecto de sombra a cualquier texto.
1 desplazamiento horizontal de la sombra es el nmero de pixelcs que aparecer en la sombra (text-shadow) a la
izquierda o a la derecha del texto. Un valor negativo mueve la sombra a la izquierda; un valor positivo la mueve
a la derecha. El desplazamiento vertical es el nmero de pixelcs que aparecer en la sombra desplazada hacia arriba
o hacia abajo del texto. Un valor negativo mueve la sombra hacia arriba, mientras que un valor positivo la mueve
hacia abajo.
9 El radio de desenfoque (pg. 143) tiene un valor de 0 (sin sombra) o mayor.

Seccin 5 .3 E squinas redondeadas


9 La propiedad borde r-radlus (pg. 144) agrega esquinas redondeadas (pg. 144) a cualquier elemento.

Seccin 5 .4 Color
9 RGBA (Rojo, verde, azul, alfa, pg. 145) nos proporciona un mayor control sobre los colores exactos en nuestras pginas
Web. El valor de cada color (rojo, verde y azul) puede variar de 0 a 255. El valor alfa (que representa la opacidad) puede
ser cualquier valor en el rango de 0.0 (transparencia total) hasta 1.0 (opacidad total).
9 CSS3 tambin nos permite expresar el color mediante el uso de valores HSLA (tinte, saturacin, claridad, alfa)
(pg. 146).
9 El tinte es un color o una sombra que se expresa como un valor de 0 a 359 y representa los grados en una rueda de colo
res (una rueda es de 360 grados). Los colores en b rueda progresan en el orden de los colores dd areoris: rojo, naranja,
amarillo, verde, azul, ndigo y violeta.
9 La saturacin (pg. 146) (b intensidad dd tinte) se expresa como un porcentaje, mientras que 100% es saturacin total
(d color completo) y 0% es gris.
9 Claridad (pg. 146): b intensidad de luz o luminancia del tinte; tambin se expresa como porcentaje. Una claridad de
50% es d tinte real. Si disminuye b cantidad de luz a 0%, el color aparece totalmente oscuro (negro). Si aumenta b
cantidad de luz a 100%, d color aparece totalmente ebro (blanco).

Seccin 5 .5 Som bras de cajas


9 La propiedad box-s hadow (pg. 146) agrega una sombra a un demento.
9 El desplazamiento horizontal de b sombra define d nmero de pxdcs que aparecer en b sombra box-shadow a b
izquierda o derecha de b caja. El desplazamiento vertical define d nmero de pixelcs que aparecer en b sombra boxshadow hacia arriba o hacia debajo de la caja.
9 El radio de desenfoque de la sombra puede tener un valor de 0 (sin sombra) o mayor.

Seccin 5 .6 G radientes Imeales; introduccin a los prefijos de proveedor


9 Los gradientes lineales (pg. l48)sonun tipo de imagen que cambb de forma gradual de un color al siguiente en sentido
horizontal, vertical o diagonal.
9 Es posible realizar transiciones entre tantos colores como desee; adems puede especificar los puntos en los cuales se
deben cambiar los colores, a lo cual se le conoce como color-stop (pg. 148) y se representa en pixelcs o porcentajes a
lo largo de lo que se conoce como lnea de gradiente.
9 Podemos asar gradientes en cualquier propiedad que acepte una imagen.
9 En b actualidad los navegadores implemcnrnn los gradientes de manera diferente, por lo que se requieren los prefijos de
proveedor y una sintaxis distinta para cada navegador.

Resumen

179

Los prefijos de proveedor (como -webkit- y -or-, pg. 151) se utilizan para propiedades que an se estnterminando
en la especificacin de CSS pero que ya se implcmentamn en varios navegadores.
' Los prefijos no estn disponibles para todos los navegadores ni para todas las propiedades.
Es una buena costumbre incluir los mltiples prefijos cuando estn disponibles, para que sus pginas se desplieguen de
manera correcta en los distintos navegadores.
Coloque siempre b s estilos con prefijos de proveedor antes de la versin sin prefijos- La versin ms reciente del estilo
que soporte cierto navegador tendr precedencia y es la que utilizar ste.

Seccin 5 .7 Gradientes radiales

Los gradientes radiales (pg. 151) son similares a los gradientes lineales, slo que d color cambia en formagradual de
un crcub interno (el inicio) hacia un circulo extemo (el final).
La propiedad ra d la l-g ra d le n t (pg. 151) tiene tres valores. El primero es la posicin inicial del gradiente
radial (center). Otros posibles valores para la posicin son: top, bottom, l e f t y rig h t. El segundo valor es el co b r
inicial y el tercero es d c o b r final.
A excepcin de b s prefijos de proveedor, cl resto de la sintaxis d d gradiente es idntica para b s navegadores basados en
WebKit, Mozilla Firefox y b propiedad radial -gradlent estndar de CSS3.

Seccin 5.8 (Opcional: WebKit solamente) Trazo de texto


La propiedad -webk1t-text-strke (pg. 153) es una propiedad no estndar para los navegadores basadosen WebKit,
ti cual nos permite agregar un contomo (trazo de texto) alrededor d d texto. Esta propiedad tiene dos valores: d grosor
dd contorno y el c o b r del trazo de texto.

Seccin 5 .9 M ltiples imgenes defondo


CSS3 nos permite agregar mltiples imgenes de fondo (pg. 153) a un demento.
ftira especificar b posicin de cada imagen usamos b propiedad background-pos1t1ott. La lista de valores separados por
comas coincide con el orden de b lista de imgenes separadas por comas en b propiedad background-1nage.
La propiedad background-or g1n (pg. 154) determina en dnde se va a colocar cada imagen mcdbnre d uso d d mo
delo de cajas.

Seccin 5.10 (Opcional: WebKit solamente) Reflejos


La propiedad ebk1t-box-reflect (pg. 155) nos permite agregar un reflejo simple (pg 155) de una imagen. Al igual
que w ebk1t-text-stroke. sta es una propiedad no estndar disponible slo en b s navegadores basados en WebKit
por ahora.
El primer valor de b propiedad es b direccin d d reflejo. El valor de direccin puede ser: above, below, l e f t o right.
El segundo vabr es d desplazamiento (offset), que determina d espacio entre b imagen y su reflejo.
De manera opebnal podemos especificar un gradiente para aplicarlo al reflejo.

Seccin 5.11 Bordes de imgenes


La propiedad border- Image de CSS3 (pg- 156) usa imgenes para colocar un borde alrededor de cualquier demento.
La propiedad border-wldth es cl grosor del borde que se va a colocar alrededor del elemento. El valor de wldth es
b anchura de todo d borde rectangubr.
La propiedad border-Image-source (pg. 157) es d URL de b imagen que se va a usar en cl borde.
La propiedad border-image-si i ce (pg. 158) especifica los desplazamientos hacia dentro desde los bdos superior,
derecho, inferbre izquierdo de b imagen.
La propiedad border-1nage-sl1ce divide b imagen en nueve regiones: cuatro esquinas, cuatro bdos y una parte medb,
que es transparente a menos que se especifique lo contrario. No podemos usar valores ncgitivos.

180

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

Podemos expresar la propiedad border-1nage-sl1cecon slo dos valones, en cuyo caso el primer valor representa los
bdos superior c inferior, y d segundo valor representa los lados izquierdo y derecho.
la propiedad border-lmage-sllce puede expresarse en pfxeles o porcentajes.
La propiedad border-lmage-repeat (pg. 158) especifica cmo se ajusta la escala de las regiones de la imagen dd borde y
cmo secolocan en mosaicos (repeticiones). AI indicar stretch slo una vez, creamos un borde que estirar las regiones
superior, derecha, inferior e izquierda para ajustarse al rea.
Podemos especificar dos valores para la propiedad border-Image-repeat. Por ejemplo, si especificamos stretch repeat
se estirarn las regiones superior c inferior dd borde de imagen y se repetirn las regiones derecha c izquierda del borde
(es docir, en mosaico) para ajustarse al espacio, asando mosaicos parciales para llenar el espacio sobrante.
Otros posibles valores para la propiedad border-image-repeat son round y space. Si especificamos round, las regiones
se repiten usando slo mosaicos completos y se ajusta la escala de la imagen dd borde para llenar el rea. Si especifica
mos space. las regiones se repiten para llenar d rea utilizando slo mosaicos completos y cualquier espacio sobrante se
distribuye de manera uniforme alrededor de los mosaicos.

Seccin 5.12 Animacin: selectores


La propiedad animation (pg. 161) nos permite representar varias propiedades de animacin en notacin abreviada, en
vez de especificar cada propiedad de animacin por separado.
La propiedad an1nat1on-name (pg. 161) representa el nombre de la animacin. Este nombre asocia la animacin
con los cuadros clave que definen diversas propiedades del elemento que se va a animar en distintas etapas de la
animacin.
La propiedad an1mat1on-t1m1ng-funct1on (pg. 161) determinad progreso de la animacin en un ciclo de su duracin.
Los posibles valores son: linear, ease. ease-1n, ease-out, ease-in-out, cub1c-bez1er. El valor linear especifica que
b animacin se mover a la misma vdocidad de principio a fin. El valor predeterminado ease empieza con lentitud,
aumenta la vdocidad y luego termina con lentitud. El valor ease-1n empieza con lentitud y luego aumenta la vdocidad,
mientras que el valor ease-out empieza ms rpido y luego redcela vdocidad. El valor ease-1n-out empieza y termina
con lentitud. Por ltimo, d valor cub1c-be*1er nos permite personalizar la funcin de sincronizacin con cuatro valores
entre 0 y 1,como cub1c-bez1er(l ,0,0,1),
La propiedad an1mat1on-durat1on (pg. i 61) especifica d tiempo en segundos (s) o milisegundos (ms) que tarda la
animacin en completar una iteracin. La duracin predeterminada es 0.
La propiedad anlnation-delay (pg. 161) especifica d nmero de segundos o milisegundos despus de que se carga la
pgina yantes de que empiece la animacin. El valor predeterminado es 0. Si anlnation-delay es negativo, como -3s,
b animacin empieza tres segundos despus de haber iniciado su ciclo.
La propiedad an1mat1on-1terat1on-count (pg. 161) especifica d nmero de veces que se ejecutar la animacin. El
valor predeterminado es L Puede usar d valor 1nf1n1 te para repetir la animacin en forma continua.
La propiedad an1nat1on-d1rect1on (pg. 161) especifica la direccin en la que se ejecutar la animacin. l valor
al ternate que se utiliza aqu especifica que la animacin se ejecutar en direcciones alternantes. El valor predetermina
do normal ejecutar la animacin en la misma direccin para cada ciclo.
La propiedad animation abreviada no puede usarse con la propiedad an1mation-play-State (pg. 161); debe especi
ficarse por separado. Si no incluye la propiedad an1nat1on-play-State, que especifica si la animacin est en pausa
(paused) o en ejecucin (runnlng), asa su valor predeterminado de runnlng.
Para d demento que se va a animar, la rcgb Wceyframes (pg. 161) define bs propiedades dd elemento que cambiarn
durante b animacin, los valores a los que cambiarn esas propiedades y cundo van a cambiar.
La regla Okeyf ranes va seguida del nombre de b animacin a b que se aplican loscuadros cbvc. Las reglas (pg. 162)
oonsisten en uno o ms selectores (pg. 162) seguidos de un bloque de dccbraciones (pg. 162) encerrados entre
Ib ves ({}).

Resumen

181

Los selectores le petmiten aplicar estilos a elementos de un tipo o atributo especifico.


Un bloque de declaraciones consiste en una o ms declaraciones, cada una de las cuales incluye el nombre de la propie
dad seguido de dos puntos (:), un valor y el signo de punto y coma (;). Es posible incluir mltiples declaraciones en un
bloque de declaraciones.

Seccin 5.13 Transiciones y transformaciones


Con las transiciones de CSS3 (pdg. 162) podemos cambiar el estilo de un demento a lo largo de una duracin especi
ficada.
Las transformaciones de CSS3 (pg. 162) nos permiten mover, girar, escalar c inclinar dementos.
las transiciones son similares en concepto a las animaciones, peto las transiciones nos permiten especificar slo los valo
res iniciales y finales de bs propiedades de CSS que van a cambiarse. Los cuadros cbvc de una animacin nos permiten
oontrobr los estados intermedios a lo largo de la duracin de una animacin.
Por cada propiedad que vaya a cambur, la propiedad tra n s don (pg. 162) especifica la duracin de esc cambio.
A partir de CSS3. b subclase rhover trabaja ahora con cualquier demento.
La propiedad tran sfo rn (pdg. 162) usa funciones de transformacin (pdg. 163) com o ro ta te (pdg. 163) y scale
(pdg. 164) para realizar las transformaciones.
La funcin de transformacin rotate recibe d nmero de grados. Los valores negativos hacen que el demento gire a b
izquierda. Un valor de 720deg hace que el demento gire dos veces en sentido de bs manecillas del rdoj.
La funcin de transformacin scale especifica cmo ajustar la cscab a b anchura y b altura. El valor 1 representa
b anchura o altura originales, por lo que valores mayores de 1 aumentan el tamao y valores menores de 1 lo
reducen.
Las transformaciones de CSS3 tambin nos permiten inclinar (pdg. 164) dementos a nivd de bloque, distoniondndolos
a un dngulo ya sea en sentido horizontal (skewX) o vertical (skeWY).
La propiedad tran sitlo n -d u ratlo n especifica b cantidad de tiempo que tarda b transicin en completarse.
la propiedad tra n s 1t i o n - t 1n1 ng-funct 1on determina cmo progresa la transicin en un ciclo de su duracin.

Seccin 5.14 Descarga de fuentes Web y la regla Q fo n t-fa c e


Mediante b regia tfo n t-fa c e (pdg. 166) es posible especificar fuentes para una pgina Web, incluso aunque no estn
instaladas en el sistema del usuario. Las fuentes descargabies ayudan a asegurar una apariencb uniforme entre k>s sitias
cliente.
En http://www.9 0 0 gle.com/teebfonts encontrar numerosas fuentes Web gratuitas de cdigo fuente abierto. Asegrese
de que las fuentes que obtenga de otras partes no tengan impedimentos legales.
La regia Anela screen especifica que b fuente se utilizara al desplegar el documento en una panralb de computadora.
La regb font-face incluye bs propiedades font-fam1ly, fo n t-sty le y font-we1ght. Es posible especificar mltiples
fuentes con estilas y grosores varbblcs. La regla font-face tambin incluye b ubicacin de b fuente.

Seccin 5.15 M dulo de diseo de caja flexible y los selectores :n th -c h 1 ld


El Mdulo de diseo de caja flexible (MDCF. pg. 168) facilita los procesos de alinear d contenido de las cajas, cam bar
su tamao, cambiar su orden en forma dinmica y distribuir! contenido en cualquier direccin.
La propiedad box-or 1ent (pg. 168) especifica b orientacin d d diseo de b caja. El valor predeterminado es horizon
ta l. Tambin es posible usar v e r tic a l.
En CSS3 podemos usar selectores para aplicar estilo a los atributos con facilidad. Fnr ejemplo, podemos seleccionar
una de cada dos filas en una rabb y cam bur el color de fondo a azul, para que esa rabb sea ms fcil de leer. Tambin
podemos usar selectores para habilitar o deshabilitar dementos de entrada.

182

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

Usamos selectores :nth-ch1ld (pg. 171) para seleccionar cada uno de los cuatro elementos d1ven cl demento f 1exbox
div al que vamos a aplicar estilo.
div: nth-cMld(l) selecciona d elemento d1v que viene siendo d primer hijo de su padre y aplica d estilo especificado.
De manera similar. d1v:nth-cMld(2) sdccciona el demento div que es d segundo hijo de su padre, d1v:nth-cMld(3)
sdccciona d tercer hijo de su padre y div:nth-ch1ld(4) sdccciona d cuarto hijo de su padre.
Al establecer la propiedad overf low en hldden se oculta d texto que no se ajuste en la altura de prrafo especificada.

Seccin 5 .1 6 Diseo multicolumna


CSS3 le permite crear diseos multicolumna con facilidad (pg. 171)* medame d uso de la propiedad column-count
(pg. 171).
La propiedad column-gap (pg. 171) especifica d espaciado enre columnas.
ftira agregar lneas entre columnas se utiliza la propiedad colum-rule (pg. 171).
Al ajustar d tamao de la venrana de su navegador cambia la anchura de las columnas para ajustarse al diseo de tres
columnas en d navegador

H h m m ./ 7 Consultas de medios
Con las consultas de medios de CSS3 podemos determinar los atributos ms finos de los medios en los que d usuario
est viendo la pgina, como la longitud y anchura dd rea visible en la pantalla, para personalizar nuestra presentacin.
La regla tinedia (pg. 174) se utiliza para determinar d tipo y tamao del dispositivo en d que se va a desplegar la p
gina. Cuando d navegador examina la regla, d resultado es verdadero o falso. Los estilos de la regla se aplican slo si d
resultado es verdadero.

Ejercicios de autoevaluacin
5.1

Complete las siguientes oraciones:


a) La propiedad_________ facilita la accin de agregar un efecto de sombra a cualquier texto.
b) La propiedad _____ ____nos permite agregar esquinas redondeadas a cualquier elemento.
c) CSS3 incluye dos nuevas formas de expresar d c o lo n __________ y ___________ .
d) E l __________ define d nmero de pxclcs que aparecer d elemento box-shadow a la izquierda o a la derecha
de la caja.
e) I-os_________ son similares a los gradientes lineales, slo que d color cambia en forma gradual desde un crculo
interno (d inicio) hacia un crculo extemo (d final).
0 La propiedad__________divide la imagen en nueve regiones: cuatro esquinas, cuatro bdos y una parte media,
que es transparente a menos que se especifique lo contrario.
g) La propiedad aninatlon-tining-functlon determina cmo progresa la animacin en un ciclo de su duracin.
Los posibles valores s o n __________ . ___________, __________ , ___________ . ___________ y ___________ .
h) Rara d demento que se va a animar, b ___________ define bs propiedades de los elementos que cambiarn du
rante b animacin, los valores a los que cambiarn esas propiedades y cundo lo harn.
i) l a s
son similares en concepto a bs animaciones, pero nos permiten especificar Slo los valores ini
ciales y finales de b s propiedades de CSS que van a cambiarse. Los cuadros cbve de una animacin nos permiten
controbr los estados intermedios a lo brgo de b duracin de b animacin.
j) L as____________ de CSS3 nos permiten mover, girar, escalar c inclinar elementos.
k) L as___________consisten en uno o ms sdcctores seguidos de un bloque de dcdaracioncs entre llaves ({}).
1) En CSS3 podemos usar__________para aplicar estilo a los atributos con facilidad.

Respuestas a los ejercicios de autoevaluacin

5.2

183

Indique si cada uno de los siguientes enunciados es verdadero ofalso. Si esfalso>explique por qu.
a) La regla #font-f ace especifica que se utilizar una flente incrustada cuando el documento se despliegue en una
pantalla de computadora.
b) Podernos usar gradientes en cualquier propiedad que acepte una imagen.
c) Un gradiente horizontal cambia en forma gradual de arriba hacia abajo.
d) Podemos agregar lneas entre columnas mediante el uso de la propiedad colunn-gap.
e) La regla media determina d tipo y tamao del dispositivo en el que se despliega la pgina. Cuandoel navegador
examina la regla, el resultado es verdadero o falso. Los estilos de la regla se aplican slosi elresultado es falso.
0 P*ni agregar mltiples imgenes de fondo a un demento, usamos la propiedad background-position para espe
cificar en dnde colocar cada imagen mediante el uso dd modelo de cajas.

Respuestas a los ejercicios de autoevaluacin


5.1

5.2

a) text-shadow. b) border-radius. c) RGBA y HSLA. d) desplazamiento horizontal, e) Gradientes radiales. 0


border-inage-slice. g) linear, ease, ease-1n, ease-out, ease-in-out, cublc-bezier. h) regla keyfranes. i)
transiciones, j) transformaciones, k) reglas. I) selectores.
a) Falso. La regla Onedia screen especfica que se utilizar una fuente incrustada cuando d documento se despliegue
en una pantalla de computadora, b) Verdadero, c) Fabo. Un gradiente horizontal cambia en forma gradual de
izquierda a derecha, d) Falso. Podemos agregar lneas entre columnas mediante d uso de la propiedad colurmrule. c) Los estilos de la regla taedia se aplican slo si d resultado es verdadero. 0 Fabo* I-a propiedad background-orlgin especifica en dnde se va a colocar cada imagen mediante d uso del modelo de cajas.

Ejercicios
Pira cada uno de los siguientes ejercicios, cree y despliegue una pgina Web que haga que aparczca(n) d(los) cfccto(s)
ndicado(s). Valide su pgina con los siguientes validadores:
1. Pira CSS3: http://j1gsaw.w3.org/css-validator/ (bajo Nor Optlons > Profile, seleccione CSS nivel 3)
[Nota: muchas propiedades de CSS3 no se validarn debido a que an no se han estandarizado.]
2. Pira HTML5: http://validator.w3.Org/#validate_by.upload
Pruebe adems su pgina con tantos navegadores como pueda de los siete que utilizamos en este libro.
5.3

5.4
5.5

5.6

Cree una sombra de texto en la frase M


Nuevas funciones en CSS3" con un desplazamiento ho
rizontal de 2px, un desplazamiento vertical de 5px, un radio de desenfoque de 6px y una sombra text-shadow color
deepskyblue.
( T r a z o d e te x to ) Cree un trazo de texto en la frase Nuevas funciones de WebKit". Haga d color del texto LightBlue. Use un trazo de texto 3p x Navy y establezca el valor de font-slze a 700%.
( E s q u in a s r e d o n d e a d a s ) Cree tres elementos d1v. cada uno con valores de width y height de lO O px. En d primer
demento cree esquinas ligeramente redondeadas, usando un valor de border de 3 p x black y un valor de borderradius de lO p x . En el segundo elemento use un valor de border de 3px black y aumente d valor de border-radlus
a SO px. En d tercero use un valor de border de 3px black y aumente el valor de border-radius a lO O px. Asigne a la
propiedad backgrouod-color de cada elemento un color distinto de su dcccin. Dentro de cada demento, muestre
d valor de border-radlus en texto en negrita,
( S o m b r a d e te x to ) Cree tres elementos d1v de diversos colores, cada uno con un valor de width y helght de 200px.
En la primera caja agregue una box-shadow dimgrey con un desplazamiento horizontal de IS p x , un desplazamiento
vertical (vertical offset) de IS p x y un radio de desenfoque de 2 0 p x. En la segunda caja agregue una box-shadow
dingrey con un desplazamiento horizontal de -1 5 p x , un desplazamiento vertical de -1 5 p x y un radio de desenfoque
de 30p x. En la tercera caja agregue una box-shadow dingrey con un desplazamiento horizontal de IS p x , un dcsplaramiento vertical de 15px y un radio de desenfoque de lO p x.
( S o m b r a d e te x to )

184

5.7
5.8

5.9
5.10
5 .1 1

5.12

5.13
5.14
5.15
5.16

Captulo 5

Introduccin a las hojas de estilo en cascada (Cascading Style Sheets . CSS): parte 2

(Gradiente lineal) Cree un elemento <J1v con una anchura (wldth) y altura (height) de SOOpx. Cree un gradiente
lineal diagonal utilizando los colores dd areoris: rojo, naranja, amarillo, verde, azul, ndigo, violeta.
(Gradiente radial) Cree un elemento di v con una anchura (tidth) y altura (height) de 500px. Cree un gradiente
radial con tres colores. Inicie d gradiente en b esquina inferior izquierda de modo que los colores vayan cambiando
ai avanzar a lo largo de b linca del gradiente a b derecha.
(Animacin) Cree una animacin infinita de un elemento que se mueva en un patrn cuadrado.
(Inclinacitt) Modifique d ejemplo de inclinacin en b figura 5.13 para inclinar d elemento de arriha hacia abajo
30deg, despus de izquierda a derecha 30deg, alternando de manera indefinida.
(Fusionar imgenes) Modifique el ejemplo d e b figura 5.14 utilizando cinco imgenes. Podra ser interesante probar
con imgenes de usted o de un miembro de su familia en distintas edades o en un paisaje en distintos momentos.
Establezca d valor de transltlon-duratlon en 3s y de trans1t1on-t1n1r>g-funct1on en linear.
(Texto multicolumna) Cambie d formato dd ejemplo en b figura 5.17 a dos columnas, agregue un subttulo y un
nombre de autor, c incremente d color y d grosor de b regla column-rul e. Agregue una imagen y haga que d texto
flote alrededor de b imagen.
(MDCF) Modifique el ejemplo de b figura 5.16 para asar una caja flexible vertical.
(Transformacin con :hovor)Crte un programa de transformacin que incluya cuatro imgenes. Cuando el usuario
pase d ratn sobre una imagen, d tamao de sta debe aumentar por 20%.
(Reflejo) Cree un reflejo de una imagen 20px a b derecha de b imagen original.
(Consultas de medios) Cree su propia pgina Web multicolumna y use consultas de medios para ajustar d formato
y usar una columna para dispositivos mviles que tengan una anchura mxima de 480px.

JavaScript: introduccin
a las secuencias de comandos

El comentario es Ubre, pero os


hechos son sagrados.
C P. Scott

El acreedor tiene una mejor


memoria que el deudor.
ja m e . H o w d l

A l hacerfrente a una decisin,


siempre me pregunto: "qu serla
h ms divertido? "
Peggy Walker

Objetivos
En este capitulo aprender a:
Escribir programas simples en
JavaScript.
Usar instrucciones de entrada
y salida.
Distinguir los conceptos
bsicos de la memoria.
Usar los operadores aritmticos.
Reconocer la precedencia de los
operadores aritmticos.
Escribir instrucciones de toma
de decisiones para elegir entre
cursos alternativos de accin.
Usar los operadores relacinales
y de igualdad para comparar
elementos de datos.

Plan general

186

Captulo 6

JavaScript introduccin a las secuencias de comandos

6.1

Introduccin

6.5

Conceptos de la memoria

6.2

Su primera secuencia de comandos: mostrar


una linea de texto con JavaScript en una
pagina Web

6.6

Aritmtica

6.7

Toma de decisiones: operadores de igualdad y


Nacionales

6.8

Recursos Web

6.3
6.4

Cmo modificar su primera secuencia de


comandos
Cmo obtener la entrada del usuario mediante
dilogos prompt
6.4.1 Pgina de bienvenida dinmica
6.4.2

Suma de enteros
Resumen | Ejercicios de autoeualuacin | Respuestas a los ejercicios de autoeualuacin | Ejercicios

6.1

Introduccin

E n este captulo com enzarem os nuestra introduccin al len g u aje d e secuencias d e c o m a n d o s Ja v a S c rip t1, que
se utiliza para m ejorar la funcionalidad y apariencia de las pginas W eb2.
En los captulos 6 a 11 presentamos un anlisis detallado de JavaScript: el lenguaje de secuencias de comandos del
lado diente estndar dejacto para aplicaciones Web, debido a su naturaleza altamente portable. Nuestro tratamiento
de JavaScript tiene dos propsitos: introduce las secuencias de comandos del lado cliente (se utiliza en los captulos
6 al 18), que hacen a las pginas Web ms dinmicas e interactivas, y proporciona las bases de programacin para las
secuencias de comandos del lado servidor que presentamos ms adelante en el libro.
Antes de poder ejecutar ejemplos de cdigo con JavaScript en su com putadora, tal vez necesite cambiar las
opciones de seguridad de su navegador. D e manera predeterm inada. Internet Explorer 9 evita b ejecucin de se
cuencias de com andos en su equipo local y muestra un mensaje de advertencia. Para que las secuencias de com andos
puedan ejecutarse en archivos en su com putadora, seleccione O pciones de In te rn e t del men H erram ientas. Haga
clic en b ficha O p cio n es avanzadas y desplcese hasta b seccin S eguridad de b lista C onfiguracin. Seleccione
b casilla de verificacin P erm itir q u e d co n ten id o activo se ejecute en los archivos de m i e q u ip o . Haga d ic en
A ceptar y rcinicic Internet Explorer. Ahora los docum entos de H TM L5 que contengan cdigo de JavaScript
en su propio equipo se ejecutarn de b manera correcta. Fircfbx, C hrom e, O pera, Safari (incluyendo el iPhone) y el
navegador de A ndroid tienen habilitado JavaScript de manera predeterminada.

6.2

Su primera secuencia de comandos: mostrar una lnea de texto


con JavaScript en una pgina Web

Em pezarem os con una secuencia d e c o m a n d o s (o p ro g ra m a ) simple que m uestra el texto B ienvenido a l a


program acin en Ja v a S c ri p t" en el docum ento de H T M L 5. Iodos los principales navegadores Web contie
nen in t rp re te s d e Jav aS crip t, que procesan los com andos escritos en este lenguaje. El cdigo de JavaScript y
su resultado se m uestran en la figura 6.1.
1. Muchas personas contunden el lenguaje de secuencias de comandas JavaScript con el lenguaje de programacin Java Este
ltimo es un lenguaje de programacin orientado a objetos completamente desarrollado. Java es popular para desarrollar
aplicaciones empresariales distribuidas y aplicaciones Web de gran escala. JavaScript es un lenguaje de secuencias de comandos
basado en navegador, lo desarroll Netscape y se implementa en rodos los principales navegadores.
2. JavaScript fiic creado originalmente por Netscape. Tanto Netscape como Microsoft han contribuido en la estandarizacin de
JavaScript por pane de ECMA International (antes conocida como la Asociacin de fabricantes europeos de computadoras)
como ECMAScript (mMv.ecma-1nternat1onal.org/publ1cat1ons/standards/ECMA-262.htm). La versin ms reciente
de JavaScript se basa en ECMAScripr5.

6.2

Su primera secuencia de comandos: mostrar una lnea de texto con JavaScript en una pgina Web

187

<! DOCTYPE htil>

3 < ! - - Fig. 6.1: 8ienven1do.html >


4 < ! Mostrar una l i n e a de te x to . >
3 <h t*1 >
6
<head>
7
o ie ta c h a rs e t = "u tf-8*>
8
<t1tle>El primer programa en Ja v a S c rip t< /t1 tle >
9
< scr1pt type - te x t/ja v a s c r1 p t" >
10
11

12
13
14
13

docum ent.w ri t e l n (

"<hl>B1cnven1do a l a programac1&oacute;n en JavaScr1pt</hl>" );


</scr1pt>
</head> <body></body>

(l p"*** p t>9n n M en At

fiie///Xy<jemplos/cao06/f^06.01/b*en*/cni(JotTtmi

Smos y jp e r & tt

Resultado de
U secuencia
de comandos

* V

f tt) Si> G l e '.

23 Im pcrtK M de I r ttm ,

Bienvenido a la programacin en JavaScript

Figura 6.1 | Mostrar una lnea de texto.


Las lneas 11 y 12 hacen el verdadero trabajo" de la secuencia de comandos, a saber, mostrar la frase Bi envenido a la programacin en JavaScript como un encabezado h l en la pgina Web.
La lnea 6 comienza la seccin <head> del documento. Por el momento, el cdigo de JavaScript que escri
bamos aparecer en la seccin <head>. E l navegador interpreta el contenido de la seccin <head> primero, por
lo que los programas de JavaScript que escribamos ah se ejecutarn a n te s de que se muestre la seccin <body>
del documento de H T M L5. En captulos posteriores sobre JavaScript ilustraremos las secuencias de comandos
en lnea, en donde se escribe JavaScript en el cuerpo (<body>) de un documento de H TM L5.

El elemento se r 1p t y los comentarios en sus secuencias de comandos


La lnea 9 usa la etiqueta <scr1pt> para indicar al navegador que el texto que sigue forma parte de una
secuencia de comandos. El atributo type especifica el tipo M IM E de la secuencia de comandos, as como el
lenguaje de secuencias de com andos utilizado; en este caso, un archivo de texto (text) escrito en JavaScript.
En H T M L5, el tipo M IM E predeterminado para una secuencia de comandos (<scr1pt>)cs "text/htm l", por
lo que podemos omitir el atributo de tipo de las etiquetas <scr1pt>. Lo introdujimos aqu porque lo ver en
documentos de H T M L heredados con cdigo de JavaScript incrustado.

Cadenas de caracteres
Las lneas 11 y 12 instruyen al intrprete de JavaScript del navegador para que realice una accin: mostrar
en la pgina Web la cadena de caracteres contenidos entre comillas dobles (") (lo que tambin se conoce como
literal de cadena). El navegador n o ignora los caracteres individuales de espacio en blanco entre las palabras
en una cadena. Pero si aparecen espacios consecutivos en una cadena, los navegadores los condensan en un

188

Captulo 6

JavaScript introduccin a las secuencias de comandos

solo espacio. Adems ignoran los caracteres de espado en blanco a la izquierda (es decir, el espacio en blanco al
principio de u n a cadena).

Observacin de ingeniera de softw are 6.1


Las cadenas en JavaScript pueden ir encerradas entre comillas dobles (") o comillas sencillas (').

Uso d el objeto docum ent


Las lneas 11 y 12 usan cl o b je to document del navegador, q u e represenra cl docum ento de H T M L 5 que el
navegador m uestra en ese m om ento. E ste objeto nos perm ite especificar el texto a m ostrar en el docum ento de
H T M L 5- El navegador crea u n conjunto de objetos que nos perm iten acceder a cada elem ento de u n docum en
to de H T M L 5 y m anipularlo. En los siguientes captulos veremos una descripcin general de algunos de estos
objetos al hablar sobre cl M odelo de objetos de docum entos (D O M ).
Un objeto reside en la m em oria de la com putadora y contiene la inform acin til bada por la secuencia de
com andos. EJ trm ino o b jeto por lo general implica que hay a trib u to s (datos) y c o m p o rtam ien to s (m todos)
asociados con el objeto. Los m todos del objeto utilizan los atributos para realizar acciones tiles para el d ie n te d d
o b jeto (es decir, la secuencia de com andos que Uama a los m todos). U n mtodo puede requerir informacin adi
cional (argum entos) para realizar sus acciones; esta informacin se encierra entre parntesis despus del nom bre
del m todo en la secuencia d e com andos. En las lneas 11 y 12 llamamos al m to d o w r lte ln del objeto document
para escribir una lnea de marcado de H T M L 5 en cl docum ento de H T M L 5. I>os parntesis que van despus del
nom bre del m todo w r ite l n contienen ese argum ento que requiere el m todo (en este caso, la cadena de H T M L 5
que el navegador va a m ostrar). El m todo wri t e ! n instruye al navegador para que escriba la cadena del argum ento
en la pgina W eb para desplegarla. Si la cadena contiene elem entos de H T M L 5, el navegador interpreta estos ele
mentos y los despliega en pantalla. En este ejemplo, el navegador muestra la frase B ienvenido a l a program acin
en J a v a S c rip t com o un encabezado de H T M L 5 de nivel h l, ya que la frase va encerrada en un elemento h l.

Instrucciones
Los elem entos de cdigo en las lneas 11 y 12 (incluyendo document .w ri t e l n), su argum ento entre parntesis
(la cadena) y el p u n to y co m a (}) se conocen en conju n to com o una in stru c c i n . C ada instruccin term ina
con un p unto y com a (lo q u e tam bin se conoce com o te rm in a d o rd e in stru c c i n ); aunque esta prctica no es
requerida por JavaScript, se recom ienda com o una form a de evitar problem as sutiles. La lnea 14 indica cl final
de la secuencia de com andos. En la lnea 15 las etiquetas <body> y </body> especifican que este docum ento de
H T M L 5 tiene un cuerpo vaco.

Buena prctica de programacin 6.1


Hay que terminar cada instruccin con un punto y coma. Esta notacin aclara en dnde termina una instrucn y en dnde comienza la siguiente.

Error comn de programacin 6.1


Olvidar la etiqueta </SCript>de terminacin puede evitar que el navegador interprete la secuencia
de comandos en forma correcta y que el documento de HTML 5 se cargue de manera apropiada.
Abra el docum ento de H T M L 5 en su navegador. Si la secuencia de com andos no contiene errores de sin
taxis, se producir cl resultado que se m uestra en la figura 6.1.

6.3

Cmo modificar su primera secuencia de comandos

189

Error comn de programacin 6.2


JavaScript es susceptible al uso de maysculas. No utilizar as letras maysculas y minsculas correctas produce
un error de sintaxis. ste ocurre cuando el intrprete de la secuencia de comandos no puede reconocer una ins
truccin. Par lo general el intrprete emite un mensaje de error para ayudarnos a localizary corregir a instruc
cin incorrecta. Los errores de sintaxis son violaciones de las reglas del lenguaje deprogramacin. lil intrprete nos
notifica sobre un error de sintaxis cuando trata de ejecutar la instruccin que contiene el error. Cada navegador
tiene su propiaforma de mostrar os errores de JavaScript. Por ejemplo, frrjx tiene la Consola de errores (estd
en su men Desarrollador Web)y Chrome tiene la consola de JavaScript (en su men Herramientas). Para ver
los erroresde secuencias de comandos en !E9, seleccione O p c i o n e s do I n t o m o t . del men H e r r a m i e n t a s . En el
cuadro de didlogo que aparezca, seleccione laficha O p c i o n e s a v a n z a d a s y haga clic en a casilla de verificacin
M o s t r a r u n a n o t i f i c a c i n s o b r e c a d a e r r o r d e s c r l p t bajo la categora E x a m i n a r .

T ip para prevenir errores 6.1


t

Cuando el intrprete reporta un error de sintaxis, algunas veces el error no estd en la linea indicada por el men
saje de error. Primero verifique la linea en la que se report el error. Si esa linea no contiene errores, retse varias
de as lineas anteriores en a secuencia de comandos.

Utta nota sobre document-wrlteln


En este ejemplo mostramos un elemento h l de H T M L 5 en el navegador Web mediante el uso de document. wrl t e l n
para escribir el elemento en la pgina Web. Para simplificar bis cosas, en los captulos 6 al 9 seguiremos haciendo
esto para enfocarnos en presentar los conceptos de programacin fundamentales de JavaScript. ft>r lo general para mos
trar contenido se modifica un ciernen to existente en una pgina Web; empezaremos a usar esta tcnica en el captulo 10.

Utta nota sobre incrustar cdigo de JavaScript en documentos de H TM L5


En la seccin 4.5 hablamos sobre los beneficios de colocar el cdigo de CSS3 en hojas de estilos externas y vincularlas
a sus docum entos de H T M L 5. Por razones similares, el cdigo de JavaScript se coloca por lo general en un archivo
reparado y luego se incluye en el docum ento de H T M I.5 que usa la secuencia de comandos. Esto mejora la capacidad
de reutilizar el cdigo, ya que puede incluirse en cualquier docum ento de H T M L 5; ste es el caso con las diversas
bibliotecas de JavaScript que se utilizan en d desarrollo Web profesional en la actualidad. Empezaremos a separar el
cdigo de CSS3 y de JavaScript en archivos individuales a partir del captulo 10.

6.3

Cmo modificar su primera secuencia de comandos

Esta seccin co n tin a nuestra introduccin a la program acin en JavaScript con dos ejemplos que m odifican el
ejemplo de la figura 6.1.

Mostrar una Unea de texto coloreado


Una secuencia de comandos puede mostrar Bienvenido a l a programacin en JavaScript de muchas formas.
La figura 6.2 muestra el texto en color magenta mediante el uso de la propiedad color de CSS. La mayor parte de
este ejemplo es idntica a la figura 6.1, por lo que nos concentraremos slo en las lneas 11 a 13 de bt figura 6.2, que
muestran una lnea de texto en d documento. I a primera instruccin usa el mtodo w r lte de document para mostrar
n a cadena. A diferencia de wr1 t e l n, wri t e no coloca el cursor de salida en el docum ento de H T M L 5 al principio de
h siguiente lnea despus de escribir su argumento. [Nota: d cursor de salida mantiene el registro de la posicin en la
que aparecer el siguiente catcrcr en el marcado del docum ento, no la posicin en donde aparecer el siguiente carcter
en la pgina Web que despliegue el navegador]. El siguiente carcter escrito en el docum ento aparece justo despus del

19 0

Captulo 6

JavaScript introduccin a las secuencias de comandos

<!D0CTYPE html>
<! Fig. 6 .2 : bienvenido2.html >
< ! - - Imprimir una l i n e a con v a r ia s In s tr u c c io n e s . -->
<html>
<head>
<meta c h a r s e t "utf-8">
<t1tle>Im prim r una l&1acute;nea con v a r ia s 1n stru cc1o n es< /t1tle>
<scr1pt>
document.wrlteC "<H1 s t y l e 'c o lo r: magenta'" );
document.writ e ( "Bienvenido a l a programacl&oacute;n " +
"en 3avaScr1pt</hl>" );
</scr1pt>
</hea d> <body ></body >
</html>

C
Q)

magenta

j filr///Xycjcm olos/cap06/fi906.0?/bienvcnido2 htmi

u^ende* Wtb $* e Gilkry Q topo**)* de Intem..

. .
..

m i in e m u o

la

99
ju n a r a m a c m n

o __ 9

v n

Figura 6 .2 | Imprimir una lnea con instrucciones separadas.


ltimo carcter escrito con w rlte. As, cuando se ejecutan las lincas 12 y 13, el primer carcter escrito (W") aparece
justo despus del ltim o carcter mostrado con wr 1t e (el carcter > dentro de la com illa doble derecha en la lnea 11).
Cada instruccin w rlte o w rlte ln contina escribiendo caracteres en donde se detuvo la ltima instruccin w rite
o wr1 t e l n. As, despus de una instruccin wr1 t e l n, la siguiente salida aparece al principio de la siguiente linca. Por
ende, las dos insmiccioncs en las lneas 11 a 13 resultan en una lnea de rcxto de H TM L5. Recuerde que en JavaScript
las instrucciones se separan mediante signos de punto y coma (;). IY>r lo tanto, las lneas 12 y 13 slo representan una
instruccin completa. JavaScript permite dividir instrucciones extensas en varias lneas. En la lnea 12, el operador +
(conocido com o operador de concatenacin" aran d o se usa de esta forma) une dos cadenas; en breve lo explicaremos
con ms detalle.

Error comn de programacin 6.3


Dividir una instruccin de JavaScript en medio de una cadena es un error de sintaxis.

La discusin anterior no tiene nada que ver con el verdadero despliegue del texto de H T M L 5- Recuerde q u e el
navegador no crea una nueva lnea de texto a menos que b ventana sea demasiado estrecha para el texto que se
va a desplegar o si el navegador encuentra un elem ento de H T M L 5 que inicie de m anera explcita una nueva
lnea; por ejem plo, <p> para iniciar u n nuevo prrafo.

Error comn de programacin 6.4


jr

Muchas personas confunden la escritura de texto de HTML5 con el despliegue de texto de HTML"). A l escribir
texto de HTML5 se crea el HTML5 que el navegador desplegar para presentarlo al usuario.

6.3

Cmo modificar su primera secuencia de comandos

19 1

A n id a r m arcas de com illas


Recuerde que podem os delim itar una cadena m ediante caracteres de comilla sencilla ( ') o doble ( ). D entro de
una cadena no podem os anidar comillas del m ism o tipo, pero s del otro tipo. Una cadena delimitada por comillas
dobles puede contener comillas sencillas. D e manera similar, una cadena delimitada por comillas sencillas puede
contener comillas dobles anidadas. La lnea 11 anida comillas sencillas dentro de una cadena entre comillas dobles
para encerrar entre comillas el valor del atributo s t y l e en el elemento hL

M ostrar texto en u n dilogo de alerta


Las primeras dos secuencias de com andos en este captulo m uestran texto en el docum ento de H T M L 5. Algunas
veces es til m ostrar inform acin en ventanas conocidas com o dilogos (o cuadros d e dilogo) que aparecen"
en la pantalla para llamar la atencin del usuario. Por lo general los dilogos m uestran mensajes im portantes a los
usuarios que navegan por la pgina W eb. JavaScript nos permite m ostrar con facilidad un cuadro de dilogo que
contiene un mensaje. La secuencia de com andos en la figura 6 .3 muestra B ienvenido a l a program acin en
J a v a S c rip t com o tres lneas en un dilogo predefinido, conocido com o dilogo a l e r t .
I

< !DOCTYPE htil>

3
4
3
6

7
8

9
10
11
12
13
14
13
16
17
18

< ! - - Fig. 6 .3 : bienvenido3.html >


< ! Dilogo de a l e r t a que muestra v a r ia s l i n e a s . >
<htl>
<head>

<neta c h a rs e t = " u t f - 8 M>


< title> Im p rim ir v a ria s 1&iacute;neas
<scr1pt>

en un cuadro de di& aacute;logo< /t1tle>

w in d o w .alert( "Bienvenido a \ n l a programadn\nen Jav aS cript" );


</scr1pt>
</bead>
<body>
<p>Recargue l a p&aacute;gina para e j e c u t a r
</body>
</html>

de nuevo e s t a

secuencia de comandos.</p>

Barra de ttulo
A! hacerclic en el betn
Aceptar seCierra el ddlogo

la

enJevafcret
rscr del ratn

Figura 6 .3 | Dilogo de alerta que muestra varias lineas.

E l o b jeto wlndow
La finca 11 en la secuencia de com andos usa el objeto wlndow del navegador para m ostrar u n dilogo d e alerta.
El argum ento para el m todo a l e r t del objeto wlndow es la cadena a m ostrar. Al ejecutar la instruccin anterior
se m uestra el dilogo que aparece en la figura 6.3. La barra de ttulo de este dilogo d e C h ro m e contiene la
cadena A le rta de Jav aS crip t para indicar q u e el navegador va a presentar un m ensaje al usuario. El dilogo
a te n ta con un b o t n Aceptar que perm ite al usuario descartar (es decir, cerrar) el dilogo al hacer d ic en
l. Para cerrar el dilogo, p o sid o n e el cursor del ratn (tam bin conocido com o puntero del ratn) sobre el

19 2

Captulo 6

JavaScript introduccin a las secuencias de comandos

botn A cep tar y haga clic en el ratn, o puede o p rim ir la tecla Intro. EJ contenido del dilogo vara segn el
navegador. l\ie d e actualizar la pgina para ejecutar la secuencia de com andos o tra vez.

Secuencias de escape
El dilogo a l e r t en este ejem plo contiene tres lneas de texto simple. N orm alm ente un dilogo m uestra los
caracteres de una cadena justo com o aparecen. Sin em bargo, el dilogo no m uestra los caracteres \n (lnea 11).
La b arra d iag o n al in v ersa ( \) en una cadena es un carcter de escape. Indica que se va a usar u n carcter
especial en la cadena. C uando se encuentra una diagonal invertida en una cadena, cl siguiente carcter se
com bina oon esa barra inversa para form ar una secuencia d e escape. La secuencia de escape \n es el carcter d e
n u ev a lnea, el cual hace que el c u rso r (el indicador de la posicin actual en la pantalla) se mueva al principio
de b siguiente lnea en el dilogo. E n la figura 6.4 se m uestran algunas otras secuencias d e escape com unes de
JavaScript. Las secuencias d e escape \ n y \ t en la tabla n o afectan cl despliegue de H T M L5 a menos que se en
cuentren en un e lem en to p re (este elem ento m uestra el texto entre sus etiquetas en una fuente d e anchura fija,
justo com o aparece el form ato entre bs etiquetas, incluyendo los caracteres de espacio en b b n c o a b izquierda
y los caracteres de espacio en b b n co consecutivos).

Secuencia de escape

Descripcin

V*

Nueva linea: coloca cl cursor de la pantalla al principio de la siguiente lnea.

\t

Tabulador horizontal: mueve el cursor de la pantalla al siguiente tope de tabulador.

Barra diagonal inversa: se usa para representar un carcter de barra diagonal inversa en
una cadena.

Camilla doble se usa para representar un carcter de comilla doble en una cadena
contenida entrecomillas dobles. Por ejemplo, rindo*. a l r t( " \Mentre comillas
dobles Y*) ; muestra entre comillas dobles en un dilogo a le r t.

Comilla sencilla: se usa para representar un carcter de comilla sencilla en una cadena.
Por ejemplo, rindo*. a le r t ( 'V e n tre c o m illa s sen clllasV ) : muestra #entre
comillas sencillas* en un dilogo a le rt.

Figura 6.4 | Algunas secuencias d escape comunes.

6.4

Cmo obtener la entrada del usuario mediante dilogos prompt

Las secuencias d e com andos nos d a n la habilidad de generar parte de. o todo cl contenido d e una pgina W eb al
m om ento de m ostrarla al usuario. U na secuencia de com andos puede adaptar el contenido con base en la entra
da del usuario o de otras variables, com o la hora del da o cl tipo de navegador utilizado por cl cliente. Se dice
que dichas pginas W eb son dinmicas en vez de estticas, ya q u e su contenido tien e b Habilidad de cambiar.
Las siguientes dos subsecciones utilizan secuencias de com andos para dem ostrar b s pginas W eb dinm icas.

6.4.1

Pgina de bienvenida dinmica

N uestra siguiente secuencia de com andos crea una pgina de bienvenida dinm ica que obtiene el nom bre de
usuario y luego lo m uestra en la pgina. La secuencia de com andos usa o tro cuadro de dilogo predefinido del
objeto window (un dilogo p ro n p t), el cual perm ite al usuario introducir un valor que b secuencia de com an
dos puede utilizar. La secuencia de com andos p id e al usuario que escriba un nom bre y luego lo m uestra en el

6.4

Cmo obtener la entrada del usuario mediante dilogos prompt

193

docum ento de H T M L 5 . La figura 6.5 presenta la secuencia de com andos y el resultado de ejemplo. E n cap
tulos posteriores obtendrem os entradas m ediante com ponentes d e G U I en form ularios de H T M L 5 , com o se
introdujo en los captulos 2 y 3.

1 <! DOCTYPE htil>


2

3 <1 Fig. 6.S: bienvenido4.html -->


4 <1-- Cuadro ind icad or u t i l i z a d o en una p a n ta lla de bienvenida -->
3 <hutl>
6
<head>
7
<eta c h a rset = "utf-8">
8
<title>U so de cuadros prompt y a l e r t < / t i t l e >
9
< script>
10
11
v a r nombre; / / cadena in tro d u c id a por e l usuario
12
13
/ / l e e e l nombre del cuadro prompt como una cadena
14
nombre window.prompt( "Escriba su nombre" );
15

16
17
18
19
20
21

document.writ e l n ( "<hl>Hola " nombre


", bienvenido a l a programadAoacute;n en 3avaScr1pt</hI>" );
</scr1pt>
</head><body></body>
</ht*l>
C

JavaS cript

Dd
A ccpU c

al

Cyiceir

..

Uio df ca8^opom^> * ,
C

21 St#oi lu ^ ex iet

1 rile///X7cjfnploVcap06/fig06.0S/binvcm do4iitm l

m
P &

[2 W t b t t u f e l f f y Q I m p e l o (JeWiffri.

H o la J i m , b i e n v e n i d o a la p r o g r a m a c i n en J a v a S c r i p t

Figura 6 .5 | Cuadro de mensaje utilizado en una pantalla de bienvenida.

Declaraciones, palabras clavey variables


La linca 11 es una declaracin q u e contiene la p alab ra clave v a r d e JavaScript. Las palabras clave son palabras
que tienen un significado especial en JavaScript. La palabra clave v a r ai principio d e la instruccin indica que
la palabra nombre es una variable. sta es una ubicacin en la m em oria de la com putadora en d o n d e puede
almacenarse u n valor para q u e lo utilice una secuencia de com andos. Todas las variables tienen un nombre y un
valor, y deben declararse con una instruccin v a r antes de usarlas en una secuencia de com andos.

Captulo 6

19 4

JavaScript introduccin a las secuencias de comandos

Identificadores y susceptibilidad a l uso de maysculas


El nom bre d e una variable puede ser cualquier id e n tific a d o r vlido. U n dentifkador es una serie d e caracte
res com puesta por letras, dgitos, guiones bajos (_) y signos de dlar ($) que to com ienza con un dgito y no
es una palabra reseada de JavaScript. [Nota: en la figura 7.2 encontrar una lista com pleta de palabras clave
reservadas]. Los identificadores no pueden contener espacios. Algunos identificadores vlidos son: Bienveni
do, Svalor, _valor, m_campoEntradal y boton7. El nom bre 7boton no es un identificador vlido puesto que
empieza con un dgito; el nom bre campo en trad a tam poco es vlido porque con tien e un espacio. Recuerde
que JavaScript es susceptible al uso d e m aysculas; las letras maysculas y minsculas se consideran distintos
caracteres, por lo que nombre, Nombre y NOMBRE son distintos identificadores.

Buena prctica de programacin 6.2


B egr nombres de variables significativos ayuda a que una secuencia de comandos se "autodocumente"
(es der, que seafdcil de entender con slo leer la secuencia de comandos)

Buena prctica de programacin 6.3


Jbr convencin, los identificadores de nombres de variables comienzan con la primera letra en minscula. Cada
palabra subsiguiente debe empezar con a primera letra en mayscula. Por ejemplo, el identificador p r t c l o A r t l c u l o tiene una A mayscula en su segunda palabra. A r t i c u l o .

Error comn de programacin 6.5


Dividir una instruccin a la mitad de un identificador es un error de sintaxis.

Las declaraciones term inan con u n punto y coma y pueden dividirse en varias lneas, con cada variable en la de
claracin separada por una coma-, a esto se le conoce com o lista de nom bres de variables sep arad a p o r com as.
Es posible declarar varias variables en una o en m ltiples declaraciones.

Comentarios de JavaScript
Es conveniente indicar el propsito de cada variable en b secuencia de comandos; para ello se coloca un comentario
de JavaScript al inicio de cada lnea en b declaracin. En b lnea 11, un com entario de una sola lnea que comienza
con los caracteres / / establece el propsito de b variable en b secuencia de comandos. Esta forma de comentario
se conoce como comentario de una sob lnea ya que termina al final de b lnea en b que aparece. Un comentario / /
puede comenzar en cualquier posicin de una lnea de cdigo de JavaScript y contina hasta el final de esa lnea. Los
comentarios no hacen que el navegador realice ninguna accin al m om ento de interpretar b secuencia de comandos;
por el contrario, el intrprete de JavaScript ignora los comentarios.

Buena prctica de programacin 6.4


Aunque no es obligatorio, a conveniente declarar cada variable en una linea separada. Esto permite insertar con
facilidad un comentario al lado de cada declaracin. ste es un estndar de codificacin profesional muy popular.

Comentarios de mltiples lineas


Tam bin podem os escribir c o m e n ta rio s d e m ltip le s lneas, fo r ejem plo,

/ * Este es un comentario
de m ltip le s ln e a s . Puede
d i v i d i r s e en v a ria s lin e a s /

6.4

Cmo obtener la entrada del usuario mediante dilogos prompt

195

es u n co m en tario de m ltiples lneas q u e se distribuye en varias lneas. D ich o s co m en tario s com ienzan
con el d e lim itad o r /* y term in an con el d elm itad o r * /. El in trp rete ignora todo el tex to en tre los d elim i
tadores del com entario.
JavaScript adopt los com entarios delimitados con /* y * / del lenguaje de program acin C , y los com entarios
de una sola lnea que se delimitan oon / / del lenguaje de program acin C+ . Por lo general, los programadores de
JavaScript prefieren los com entarios de una sola linca estilo C++ a los com entarios estilo C . En este libro usaremos
com entarios de una sola lnea estilo C++.

El mtodo prompt del objeto wlndo*


La lnea 13 es un com entario que indica el propsito de la instruccin en la siguiente lnea. La lnea 14 llama
al m todo prompt del objeto window, el cual m uestra el dilogo de la figura 6.6. E ste dilogo perm ite al usuario
escribir una cadena que representa su nom bre.

escribe el usuario en
el di logo de alerta

valor que escribi se devuelve al programa


como ina cadena

Figura 6.6 | Dilogo de indicador mostrado por el mtodo prompt del objeto window.
El argum ento para prom pt especifica u n mensaje que indica al usuario lo que debe escribir en el cam po de
Kxto. E ste m ensaje se conoce com o indicador debido a que indica al usuario que realice una accin especfica.
Un segundo argum ento opcional, separado del prim ero p o r una com a, puede especificar la cadena predeterm i
nada a m ostrar en el campo de texto; nuestro cdigo no proporciona un segundo argum ento. En este caso la
mayora de los navegadores dejan cl cam po de texto vaco e Internet Explorer m uestra cl valor predeterm inado
undefined. El usuario escribe los caracteres en cl cam po de texto y luego hace clic en cl b o t n A cep tar para
enviar la cadena a b secuencia de com andos. Por lo general recibim os b entrada del usuario por m edio d e un
com ponente de G U I, com o el dilogo prompt en esta secuencia de com andos, o por m edio de u n com ponente
de G U I d e form ubrio de H T M L 5 , com o veremos en captulos posteriores.
El usuario puede escribir cualquier cosa en el cam po de texto del dilogo prompt. Para esta secuencia de
com andos, lo que el usuario escriba se considera com o el nom bre. Si el usuario hace clic en el b o t n C a n c e la r
no se enviar ningn valor a b secuencia d e com andos. En su defecto, el dilogo prom pt enva el valor n u il:
una p a b b ra clave d e JavaScript para indicar q u e una variable no tiene valor. H ay que tener en cuenta que nuil
no es una literal de cadena sino un trm ino predefinido que indica b ausencia de valor. Sin em bargo, al escribir
un valor nuil en el docum ento se m uestra b p a b b ra nu il en b pgina Web.

O perador de asignacin
La instruccin en la lnea 14 asigna el valor devuelto por el m todo prompt del objeto wlndow (una cadena que
aonticne los caracteres escritos por el usuario; o el valor predeterm inado o nul 1 si el usuario hace clic en el b o t n
C an c elar) a b variable nombre m ediante cl aso del a p e ra d o r d e asig n aci n *. La instruccin se lee as: nombre

19 6

Captulo 6

JavaScript introduccin a las secuencias de comandos

recibe el valor desuello por window.prompt("Escriba su nombre"). El o p erad o r se conoce com o o p e ra d o r


b in a rio ya que ciee dos o p eran d o s: nombre y el resultado de la expresin wi ndow.prompt("Escriba su nom
b r e " ). Toda esa instruccin se conoce com o asig n aci n , ya que asigna un valor a una variable. La expresin a
la derecha del operador de asignacin siem pre se es-ala primero.

Buena prctica de programacin 6.5


Coloque un espacio en cada lado de un operador binario. Esteformato hace que el operador sobresalga y
mejora a legibilidad de a secuencia de comandos.

Concatenacin de cadenas
Las lneas 16 y 17 usan document.writeln para m ostrar el nuevo mensaje de bienvenida. La expresin dentro
de b s parntesis usa el operador + para "sum ar una cadena (la literal <hl>Hola, " ), la variable nombre ( b cade
na que el usuario in trodujo en b lnea 14) y o tra cadena (la literal " , bienvenido a l a programaciSoacute ;n
en DavaScript<hl>"X JavaScript tiene una versin del operador + para co n caten aci n de cad en as, el cual
perm ite com binar una cadena y un v a b r de otro tipo de datos (incluyendo o tra cadena). El resultado de esta
operacin es una nueva cadena (por lo general ms larga). Si suponem os que nombre con tien e la literal de cade
na " Jim", la expresin se evala de la siguiente manera: JavaScript determ ina que b s dos operandos del prim er
operador + ( b cadena "<hl>Hola , " y el v a b r d e b variable nombre) son am bos cadenas, entonces b s concate
n a en una sola cadena. A continuacin, JavaScript determ ina que b s dos operandos del segundo operador + (el
resultado d e b prim era operacin de concatenacin, b cadena "<hl>Hola, Jim" y la cadena " , bienvenido a
l a programad Aoacute ;n en Ja v a S c rip t< /h l> " ) son am bos cadena y se concatenan. El navegador despliega
esta cadena com o parte del docum ento d e H T M L 5 . O bserve q u e el espacio entre Hola, y Jim es parte de la
cadena "<hl>Hola, ".
Com o veremos ms ad eb n te, el operador + que se utiliza para concatenacin de cadenas puede convertir
otros tipos de variables en cadenas si es necesario. C om o b concatenacin de cadenas ocurre entre dos cadenas,
JavaScript debe convertir otros tipos de variables en cadenas antes de poder condnuar con b operacin. Por ejemp b ,s i una variable llamada edad tiene un v a b r entero igual a 21, entonces b expresin "mi edad e s " edad
se evala com o b cadena "mi edad es 21". JavaScript convierte el v a b r de edad en u n a cadena y la concatena
con b literal de cadena existente "mi edad es".
Una vez que el navegador interpreta b seccin <head> del docum ento d e H T M L 5 (que contiene el cdigo
de JavaScript), interpreta el elem ento <body> del docum ento de H T M L 5 (que est vaco; lnea 20) y despliega
el H T M L 5 . La pgina de H T M L 5 no se despliega sino hasta que se cierra el indicador, ya que ste detiene
la ejecucin en el elem ento head, antes de procesar e l elem ento body. Si recarga b pgina despus de introducir
un nom bre, el navegador ejecutar b secuencia de com andos de nuevo y usted podr cam biar el nom bre.

6 .4 .2

Sum a de enteros

N uestra siguiente secuencia de com andos ilustra o tro uso de b s d i b g o s prom pt para obtener la entrada del
usuario. La figura 6.7 introduce dos enteros (nm eros enteros com o 7, 1 1 ,0 y 31914) escritos p o r un usuario
m ediante el tecbdo, cakrub b sum a de b s v abres y m uestra el resultado.
Las lneas 11 a 15 d ecb ra n b s variables primerNumero, segundoNumero, numerol, numero2, y suma. Los co
m entarios de una s o b lnea indican el propsito de cada una de estas variables. La lnea 18 emplea u n d i b g o
prompt para que el usuario pueda in tro d u cir una cadena q u e representa el prim ero de b s dos enteros que se van
asu m a. La secuencia de com andos asigna el prim er v a b r introducido por el usuario a b variable primerNumero.

6.4

Cmo obtener la entrada del usuario mediante dilogos prompt

197

La lnea 21 m uestra un dilogo prompt para o b ten er el segundo nm ero a sum ar y asigna este valor a la variable
segundoNumero.

<!DOCTYPE htm1>
<1 Fig. 6 .7 : suma.html -->
< 1-- Secuencia de comandos de suma. -->
<html>
<head>
<meta c h a rs e t "utf-8">
<title>Un programa de suma</title>
< script>
var
var
var
var
var

primerNumero; / / primera cadena in tro d u c id a por e l usuario


segundoNumero; / / segunda cadena in tro d u c id a por el usuario
numerol; / / primer nmero a sumar
numero2; / / segundo nmero a sumar
suma; / / suma de numerol y numero2

/ / le e e l primer nmero del u su a rio como una cadena


primerNumero = window.prompt( "Escriba el primer entero" );
20

21

/ / l e e e l segundo nmero del usuario como una cadena


segundoNumero - window.prompt( "Escriba el segundo entero" ) ;

22

23
24
23
26
27
28
29
30
31
32
33
34

/ / c o n v ie rte lo s nmeros de cadenas a en teros


numerol - parselntC primerNumero );
numero2 = parselntC segundoNumero );
suma = numerol + numero2; / / suma lo s nmeros
/ / muestra lo s resu ltad o s
docum ent.w riteln( "<hl>La suma es tt + suma + "</hl>" );
</scr1pt>
</head> <body></body>
</htl>

CKr*M t f p n m tr emeo
4S

Figura 6 .7 | Secuencia de comandos de suma (parte l de 2)

19 8

Captulo 6

JavaScript introduccin a las secuencias de comandos

OC

P O*

Me//

npos/cap06/.gC^

5 S#tci sugerido Q V\b Sbc6**y

3 |
-

L a s u m a es 117

Fig ura 6 .7 | Secuencia de comandos de suma (parte 2 de 2).


C om o en el ejem plo anterior, el usuario puede escribir cualquier cosa en el dilogo prompt. Para esta
secuencia de com andos, si el usuario escribe un valor que no sea entero o hace clic en el b o t n Cancelar se
producir un error lgico y la sum a d e los dos valores aparecer en el docum ento de H T M L 5 com o NaN (lo que
significa no es u n nmero). U n error lgico es provocado por cdigo con una sintaxis correcta que produce un
resultado incorrecto. En el captulo 11 hablarem os sobre el objeto Number y sus m todos que pueden determ inar
un valor es un nm ero.
Recuerde que un dilogo prompt devuelve a la secuencia de com andos el valor escrito por el usuario en
form a de cadena. Las lneas 2 4 y 25 convierten las dos cadenas introducidas por el usuario en valores enteros
que pueden usarse en un clculo. La funcin p a r s e l n t convierte su argum ento tipo cadena en un entero. La
lnea 24 asigna a la variable numerol el entero que devuelve la funcin p a rs e ln t. D e m anera similar, la lnea 25
asigna un valor entero a la variable numero2. N os referimos a p a r s e ln t com o una funcin y no com o un m to
do debido a q u e no anteponem os a la llamada d e la funcin el nom bre de un objeto (com o document o window)
y un p unto (.). El trm ino m todo significa que la funcin pertenece a un objeto especfico. Por ejem plo, el
m todo w r i t e l n pertenece al objeto document y el m todo prompt pertenece al objeto window.
La linca 27 calcula la sum a de las variables numerol y numero2 m ediante el uso del operador de suma +;
adem s asigna el resultado a b variable suma m ediante el uso del operador de asignacin =. C abe m encionar
que el operador + puede realizar tanto operaciones de sum a com o concatenacin de cadenas. En este caso el
operador + realiza una sum a, ya que ambos operandos contienen enteros. Despus d e que la lnea 27 realiza este
clculo, b lnea 3 0 asa document .w rite l n para m ostrar el resultado de b sum a en la pgina Web.

Error comn de programacin 6.6


Confundir ti operador utilizado para concatenacin de cadenas con d operador que se utiliza para sumas
produce a menudo multados no deseados. Por ejemplo, si a variable entera y tiene el valor 5. la expresin y 2
- " +y * 2 resulta en "y * 2 = 52" y no en "y * 2 = 7" .ya queprimero se concatetia el valor de y (es der, 5)
con la cadena "y 2 = "y luego se coruatena el valor 2 con a nueva cadena ms larga "y* 2 - 5 La expresin
"y * 2 - " + (y * 2) produce la cadena "y + 2 * 7 " debido a que losparntesis aseguran que se calculey 2.

Validacin de JavaScript
C om o vim os en el prefacio, para validar nuestro cdigo usamos herram ientas de validacin de H T M L 5 , CSS3
y JavaScript. E n general, los navegadores son m uy tolerantes y no m uestran los mensajes de error al usuario.
C om o program ador, usted debe probar de m anera exhaustiva sus pginas Web y validarlas. Las herram ientas de
validacin reportan dos tipos de mensajes: errores y advertencias. Por lo general debe resolver los errores; d e lo
contrario tal vez sus pginas Web no se desplieguen o ejecuten en form a correcta.
Las pginas con advertencias com nm ente se despliegan y ejecutan en form a correcta, sin embargo, algunas
organizaciones tienen protocolos estrictos para indicar que todas b s pginas deben estar libres ta n to de adver
tencias com o de errores antes de poder publicarlas en un sitio W eb de produccin.

6.5

Conceptos de la memoria

199

Si valida este ejemplo en w w w .ja v a s c rip tlin t.c o m , las lneas 24 y 25 producen el siguiente mensaje de
advertencia:
p a r s e l n t m issin g ra d ix p aram eter
La funcin p a r s e l n t tiene un segundo parm etro opcional conocido com o raz o base ( nulix ), que especifica
d sistem a num rico base q u e se utiliza para analizar el nm ero (por e je m p b , 8 para octal, 10 para decim al
y 16 para hcxadecimal). El valor predeterm inado es base 10, pero podem os especificar cualquier base desde
2 hasta 32. Por e je m p b , la siguiente instruccin indica que debem os considerar a primerNumero com o un
entero decimal (base 10):
numerol = p a r s e l n t ( primerNumero, 10 ) ;
Esto evita que b s nm eros en otros form atos com o octal (base 8) se conviertan a v ab res incorrectos.

6.5

Conceptos de la memoria

Los nom bres de variables com o num erol, numero2 y suma en realidad corresponden a u b icacio n es en la m em o
ria de la com putadora. C ada variable tiene u n n o m b re, un tip o y un valor.
En la secuencia de com andos de sum a de la figura 6 .7 , cuando se ejecuta la lnea 24 b cadena prim e rNume
ro (que el usuario introdujo anteriorm ente en un d i b g o prompt) se convierte en un entero y se c o b c a en una
ubicacin de Li m em oria a la que el intrprete asign el nom bre num erol. Suponga que el usuario introdujo b
cadena 45 com o el v a b r para primerNumero. La secuencia de com andos convierte primerNumero en un entero
y b com putadora c o b c a el v a b r entero 45 en b ubicacin num erol, com o se m uestra e n b figura 6.8. Cada
vez que se co b c a un v a b r en una ubicacin de b m em oria, el valor sustituye al v a b r anterior que estaba en esa
ubicacin. EJ valor anterior se pierde.

numerol

45

Figura 6.8 | Ubicacin de la memoria que muestra el nombre y el valor de la variable numerol.
Suponga que el usuario introduce 72 com o el segundo entero. Al ejecutar b lnea 25. b secuencia d e com andos
convierte segundoNumero en un entero y c o b c a ese v a b r entero 72 en la ubicacin numero2; entonces b m em o
ria aparece com o se m uestra en b figura 6.9.

nurrwrol

45

numero2

72

Figura 6.9 | Las ubicaciones de la memoria despus de introducir valores para las variables numero I y numero2.
Una vez que la secuencia de com andos obtiene v ab res para numerol y numero2, sum a esos v ab res y co b ca
b sum a en b variable suma. La instruccin

200

Capitulo 6

JavaScript introduccin a las secuencias de comandos

suma num erol + numero2


realiza la sum a y tam bin sustituye el valor anterior de suma. D espus de calcular la suma, la m em oria aparece
com o se m uestra en la figura 6.10. Observe que los valores de num erol y numero2 aparecen justo com o estaban
antes de usarlos en el clculo de suma. E stos valores se usaron pero no se destruyeron cuando la com putadora
realiz el clculo; al leer un valor de una ubicacin d e la m em oria cl proceso es no destructivo.

num eral

45

numera?

72

suma

117

Figura 6.10 | Las ubicaciones de la memoria despus de calcular la suma de numero I y numero2.

Tipos de datos en JavaScript


A diferencia de sus lenguajes antecesores C , C+ y Java. JavaScript no requiere que las variables tengan un tipo
declarado antes de poder usarlas en una secuencia de comandos. Una variable en JavaScript puede contener u n valor
de cualquier tipo de datos; en m uchoscasosJavaScript realiza conversiones de manera autom tica entre valores de
distintos tipos por usted. Debido a esto. JavaScript se considera un lenguaje d b ilm e n te tipificado. Si se declara
una variable en JavaScripr pero no se le asigna un valor, esa variable tiene u n valor indefinido. Por lo general,
intentar usar cl valor de dicha variable es u n error lgico.
Al declarar las variables, no recibirn un valor sino hasta que usted lo especifique. Al asignar el valor nu 11 a una
variable indicamos que no contiene un valor.

6.6

Aritmtica

M uchas secuencias de com andos realizan clculos aritm ticos. La figura 6.11 sintetiza los o p erad o res a ritm ti
cos. Observe el uso de varios sm bolos especiales que no se utilizan en lgebra. El asterisco (*) indica m ultiplica
cin; cl sig n o d e p o rc e n ta je (%) es el o p e ra d o r d e residuo, que veremos en breve. Los operadores aritm ticos
de la figura 6.11 son operadores binarios, ya que cada u n o opera sobre dos operandos. Por ejem plo, la expresin
suma + v a lo r contiene el operador binario y los dos operandos suma y v a lo r.
Operacin
en JavaScript

Operador
aritmtico

Expresin
algebraica

Expresin
en JavaScript

Suma

/ 7

f 7

Resta

p -c

P -c

Multiplicacin

bm

b m

Divisin

xfy o j o x+ y

x / y

Residuo

r mod s

r% s

Figura 6.11 | Operadores aritmticos.

6.6

Aritmtica

201

Operador residuo, %
JavaScript cuenta con el operador residuo X, que produce el residuo despus de la divisin, l a expresin xXy
produce el residuo despus de dividir x entre y. As. 17X5 produce 2 (es decir, 17 dividido entre 5 es 3, con
un residuo de 2) y 7.4X3.1 produce 1.2. En captulos posteriores consideraremos algunas aplicaciones del
operador residuo, como determinar si un nmero es mltiplo de otro. N o existe un operador aritmtico para la
exponenciacin en JavaScript (en el captulo 8 veremos cmo realizar la exponcnciacin en JavaScript mediante
d mtodo pow del objeto Math).
En JavaScript, las expresiones aritmticas deben escribirse en forma de lnea recta para facilitar la introduc
cin de secuencias de comandos en la computadora. Por ende, expresiones como "a dividida entre b" deben
escribirse como a / b de modo que todas las constantes, variables y operadores aparezcan en linea recta. Por lo
general, la siguiente notacin algebraica no es aceptable para las computadoras:

a
b
Los parntesis se usan para agrupar expresiones de la misma forma que en las expresiones algebraicas. Por ejem
plo, para multiplicar a por la cantidad b+c escribimos:
a * (b + c ) .

Precedencia de operadores
JavaScript aplica los operadores en las expresiones aritmticas en una secuencia precisa, la cual se determina
mediante las siguientes reglas de p recedencia de o p e ra d o re s, que por lo general son iguales que las que se
siguen en lgebra:
1. Las operaciones de multiplicacin, divisin y residuo se aplican primero. Si una expresin contiene varias
operaciones de multiplicacin, divisin y residuo, los operadores se aplican de izquierda a derecha. Se
dice que las operaciones de multiplicacin, divisin y residuo tienen el mismo nivel de precedencia.
2. Las operaciones de suma y resta se aplican despus. Si una expresin contiene varias operaciones de suma
y resta, los operadores se aplican de izquierda a derecha. Las operaciones de suma y resta tienen el mismo

nivel de precedencia.
Gracias a las reglas de precedencia de los operadores, JavaScript puede aplicar los operadores en el orden correc
to. Cuando decimos que los operadores se aplican de izquierda a derecha, nos referimos a su asociatividad: el
orden en el que se evalan los operadores de igual prioridad. Despus veremos que algunos operadores se asocian
de derecha a izquierda. La figura 6.12 sintetiza las reglas de precedencia de operadores. La tabla en la figura 6.12
se expandir a medida que introduzcamos operadores adicionales de JavaScript. En el apndice C se incluye una
tabla de precedencia completa.

Opcrador(cs)

Operacin(es)

Orden de evaluacin (precedencia)

,/o %

Multiplicacin
Divisin
Residuo

Se evala primero. Si hay varias de esas op


eraciones, se evalan de izquierda a derecha.

O-

Suma
Resta

Se evala al ltimo. Si hay varias de esas op


eraciones, se evalan de izquierda a derecha.

Figura 6.12 | Precedencia de los operadores aritmticos.

202

Captulo 6

JavaScript introduccin a las secuencias de comandos

C onsiderarem os varias expresiones algebraicas. C ad a ejemplo lista una expresin algebraica y la expresin
equivalente en JavaScript.
El siguiente es un ejemplo de una media aritm tica (prom edio) de cinco trm inos:
. i
Algebra:

*e
m = a * b * c * d- ----

JavaScript:

n = ( a

+ b + C+ d + e ) / 5 ;

Se requieren parntesis para agrupar los operadores de sum a, ya que la divisin tiene m ayor precedencia
que la suma. H ay que dividir la cantidad completa (a+b+x+d+e) entre 5. Si se o m iten los parntesis por error,
obtendrem os a+b+c+d+e/5, lo o jal se evala com o

a+b+c+d+-

y no se obten d ra la respuesta.
El siguiente ejemplo es la ecuacin de una lnea recta:
Algebra:

y = mx * b

JavaScript:

y = ni * x + b;

N o se requieren parntesis. El operador d e m ultiplicacin se aplica prim ero, ya que la m ultiplicacin tie
ne m ayor precedencia que la suma. La asignacin ocurre al ltim o ya que tien e una m enor precedencia que
la m ultiplicacin y la suma.
Al igual que en lgebra, es aceptable usar parntesis innecesarios en una expresin para hacerla ms clara.
A stos tam bin se les llam a parn tesis re d u n d a n te s. Por ejem plo, para representar el siguiente polinom io de
segundo grado podram os aplicar parntesis as:
y = ( a * x * x ) + ( b * x ) + c ;

6.7

Toma de decisiones: operadores de igualdad y relacinales

En esta seccin introducimos una verdn de la instruccin 1f de JavaScript, la cual permite que una secuencia de co
mandas tome una decisin con base en La verdad o falsedad de una condicin. Si se cumple la condicin (es decir, si es
verdadera) se ejecuta b instruccin en el cuerpo de b instruccin i f . Si no se cum ple b condicin (es decir, si es falsa),
no se ejecuta b instruccin del cuerpo de b instruccin 1f. En breve veremos un ejemplo.
Las condiciones en Las instrucciones 1 f pueden formarse m ediante el uso de los o p e ra d o re s de ig u a ld a d
y los a p e ra d o re s relacinales que se sintetizan en la figura 6.13. Todos b s operadores rebcionales tienen el
mismo nivel d e precedencia y se asocian de izquierda a derecha. Ambos operadores de igualdad tienen el m ism o
nivel d e precedencia, que es ms bajo q u e b precedencia de b s operadores rebcionales. Los operadores de igual
dad tam bin se asocian de izquierda a derecha. C ada com paracin produce un v a b r tr u e o f a l se.

Error comn d programacin 6.7


Confi/ndir el operador de igualdad con el operador de asignacin es un error lgica El operador de igualdad
debe leerse como "es igual ay el operador de asignacin debe leerse como "obtiene" o Wcibe el valor de". Algunas
personas prefieren leer el operador de igualdad como doble igual" o migual igual".

6.7

Toma de decisiones: operadores de igualdad y relacinales

Operador de
igualdad o relacional
de JavaScript

Condicin de ejemplo
de JavaScript

Significado de la
condicin de
JavaScript

x = y

x es igual a y

!-

x I y

x n o es igual a y

>

>

x > y

x es m ayor q u e y

<

<

x < y

X es m en o r q u e y

fe

>=

<=

x <= y

Operador de igualdad
o relacional algebraico
estndar

203

O peradores de igualdad

0
Operadores relacinales

>= y

X es m ayor o igual que

x es m e n o r o igual q u e y

Figura 6 .1 3 | Operadores de igualdad y relacinales.


La secuencia de com andos en la figura 6.14 utiliza cuatro instrucciones 1 f para m ostrar un saludo d e
pendiente del tiem po en una pgina de bienvenida. La secuencia d e com andos o b tien e la hora local de la
com putadora del usuario y la convierte de un form ato de reloj de 24 horas (0-23) a un form ato de reloj d e 12
horas (0-11). Al usar este valor, la secuencia de com andos m uestra un saludo apropiado para la hora actual del
da. La secuencia y la salida de ejem plo se m uestran en la figura 6.14. Las lneas 11 a 13 declaran las variables
utilizadas en la secuencia d e com andos. C abe m encionar adem s que JavaScript nos perm ite asignar un valor
a una variable al m om ento d e declararla.

Creacin y uso de un nuevo objeto Date


l a lnea 12 asigna a la variable a h o ra un nuevo objeto Date, el cual contiene inform acin sobre La hora local
actual. En b seccin 6.2 presentam os el objeto document, que encapsub los datos pertenecientes a la pgina
W eb actual. A qu usamos el objeto Date integrado de JavaScript para adquirir b hora local actual. Para crear un
nuevo objeto usamos el operador new seguido del tipo del objeto (en este caso, Date) y un par d e parntesis. En
algunos objetos es necesario colocar argum entos en los parntesis para especificar los detalles sobre el o b jeto que
se va a crear. En este caso dejam os los parntesis vacos para crear un o b jeto Date predeterminado que contiene

<!DOCTYPE htl>

3
4
3
6

7
8

<1 Fig. 6.14: bienvenidoS.html >


< 1-- Uso de operadores de igualdad y r e la c i n a le s . -->
<html>
<head>

<eta c h a rs e t = "utf-8">
<title>Uso de operadores r e la c io n a le s < / t 1 tle >
< script>

10

11
12
13
14
13
16

var nombre; / / cadena in tro d u c id a por e l usuario


var ahora new DateO ;
I I fecha y hora a c tu a le s
var hora = ahora.getH oursO ; / / hora actu al (0 - 2 3 )
/ / le e e l nombre del cuadro in d ic a d o r como una cadena
nombre = window.prompt( "Escriba su nombre" );

Figura 6 .1 4 | Uso de operadores de igualdad y relacinales (parte I de 2).

204

Capitulo 6

JavaScript introduccin a las secuencias de comandos

17
18
19
20
21
22
23

/ / determina s i l a hora es PM
1 f ( hora >- 12 )

24

23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42

/ / determina si es de maana
1 f ( hora < 12 )
docum ent.w rite( "<hl>Buenos d&1acute;as, " ) ;

/ / c o n v ie rte a r e l o j de 12 horas
hora hora - 12;
/ / determina si e s antes de la s
6 PH
i f ( hora < 6 )
document.writ e ( "<hl>Buenas ta r d e s , " );
/ / determina si e s despus de l a s 6 PM
i f ( hora >- 6 )
document.writ e ( "<hl>Buenas noches, " );
} / / end i f
document.writelnC nombre
", bienvenido a l a progranac1&oacute;n en 3avaScript</hl>" );
</scr1pt>
</head><bodyx/body>
</htm l>

9 * * *

A O i]

------ M
mtmt*
C C Nc/Z/X/eeroc 1 4 / t t w * n * ^ l 2
n y a ti 'J
VL*to*, j orx&ztae

f 2 *

EftCtlb* io nombra

f*4____________________________
^

Cmcctof

Buenos d a s . J i m , bien v en id o a la
p r o g r a m a c i n en J a v a S c r i p t

F ig u ra 6 . 14 | Uso de operadores de igualdad y relacinales (parte 2 de 2).


inform acin sobre b fecha y hora actuales. Despus de ejecutar la lnea 12, b variable ahora hace referencia
al nuevo objero Date. N o tuvim os que usar el operador new a ta n d o usamos los objetos document y window
debido a que el navegador siem pre crea estos objetos. La lnea 13 establece la variable hora en un entero igual a
la hora actual (en form ato de reloj de 24 horas) devuelto por el m todo getHours del objeto Date. El captulo
11 presenta u n anlisis ms d e ta lb d o de los atribu to s y m todos del objeto Date y de los objetos en general. La
secuencia de com andos usa wi ndow. prompt para que el usuario pueda introducir el nom bre que se va a m ostrar
com o parte del saludo (lnea 16).

Torna de decisiones con la instruccin 1f


Para m ostrar el saludo correcto dependiendo d e b hora, la secuencia d e com andos debe determ inar si el usuario
est visitando la pgina d u ran te b m aana, rarde o noche, la prim era instruccin 1 f (lneas 19 y 20) com para
el valor de la variable hora con 12. Si hora es m enor que 12, entonces el usuario est visitando b pgina durante

6.7

Toma de decisiones: operadores de igualdad y relacinales

205

la m aana y la instruccin en la lnea 20 produce la cadena "Buenos di as". Si no se cum ple esta condicin, no
se ejecuta la lnea 20. La lnea 23 determ ina si h o ra es m ayor o igual que 12. Si es as, entonces el usuario est
visitando la pgina ya sea en la tarde o en la noche. Se ejecutan las lneas 24 a 35 para determ inar el saludo apro
piado. Si h o ra es m enor q u e 12, entonces el intrprete de Java no ejecuta estas lneas y co n tin a hasta la lnea 37.

Bloques y tom a de decisiones con instrucciones 1f anidadas


La llave { en la lnea 24 com ienza un b lo q u e de instrucciones (lneas 24 a 35) que se ejecutan en conjunto si
hora es m ayor o igual a 12. La lnea 26 resta 12 a ho ra, con lo cual convierte la hora actual de u n form ato de
reloj de 24 horas (0 a 23) en un form ato de reloj d e 12 horas (0 a 11). La instruccin i f (lnea 29) determ ina
si h o ra es ahora m enor que 6. D e ser as, entonces la hora es entre m edioda y las 6 PM , por lo que la lnea 30
produce el inicio de u n elem ento h l de H T M L 5 ("<hl>Buenas t a r d e s ,"). Si h o ra es m ayor o igual a 6, la
hora est entre 6 PM y m edianoche, por lo q u e la secuencia de com andos produce el saludo "Buenas noches"
(lneas 33 y 34). La llave } en b lnea 35 term ina el bloque de instrucciones asociadas con Li instruccin i f en
b lnea 23. C abe m encionar que las instrucciones i f pueden an id arse: es posible colocar una instruccin i f
dentro de otra. Las instrucciones i f que determ inan si el usuario est visitando la pgina en b tarde o en b noche
(lneas 29 a 30 y lneas 33 a 34) se ejecutan slo si la secuencia de com andos ya estableci que h o ra es m ayor
o igual a 12 (lnea 23). Si b secuencia d e com andos ya determ in que b hora actual del da es en b m aana,
no se llevan a cabo estas com paraciones adicionales. En el captulo 7 veremos los bloques y b s instrucciones
i f anidadas. Por ltim o, bs lneas 37 y 38 producen el resto del elem ento h l de H T M L 5 ( b parte restante del
saludo), que no depende de b hora del d a

Buena prctica de programacin 6.6


Incluya comentarios despus de la llave de cierre de as instrucciones de control (como las instrucones 1f)
para indicar en dnde terminan esas instrucciones, como en la linea 35 de la figura 6.14.
Observe b sangra de b s instrucciones i f en roda la secuencia de com andos. D icha sangra m ejora b
legibilidad de b secuencia de com andos.

Buena prctica de programacin 6.7


Aplique sangra a la instruccin en el cuerpo de una instruccin 1f para hacer que el cuerpo de la instruccin
resaltey mejorar la legibilidad de la secuencia de comandos.

La instruccin vacia
Observe que no hay p unto y com a ( ; ) al final de b prim era lnea de cada instruccin i f . Si se incluyera el punto
y com a se producira un error lgico en tiem po de ejecucin. Por ejemplo, b instruccin

i f (h o r a < 12) ;
document .w r it e ( "<hl>Buenos d & ia c u te ;a s , " ) ;
sera interpretada por JavaScript en form a errnea com o

i f (h o r a < 12)

document.write("<hl>Buenos d& iacutc;as, ");

206

Capitulo 6

JavaScript introduccin a las secuencias de comandos

en donde d punto y coma por s solo en b lnea (lo que se conoce com o instruccin vaca) es b instruccin que
se ejecutar si b condicin en b instruccin 1f es verdadera. C uando se ejecuta b instruccin vaca no se realiza ningu
na tarca en b secuencia de comandos. sta contina entonces con b siguiente instruccin, que se ejecutar sin importar
que b condicin sea verdadera o falsa. En este ejemplo, "<hl>Buenos d & ia c u te ;a s, " se imprimira sin importar b
hora del da.

Tip para prevenir errores 6.2


Una instruccin extensa puede esparcirse en varias lineas. Si una sola instruccin debe dividirse en varias Uneos,
dija puntos de divisin que tengan sentido, como despus de una coma en una lista separada por comas o despus
de un operador en una expresin extensa. Si divide una instruccin entre dos o ms Uneos, aplique sangra a
todas las Uneos subsiguientes.

Validacin de la secuencia de comandos de este ejemplo


Si valida este ejem plo con w w w .ja v a sc rip t1 in t.c o m , aparecer el siguiente m ensaje de advertencia para bs
instrucciones i f en bs lincas 19, 29 y 33:
block statement without cu rly braces
Ya vim os que el cuerpo de una instruccin i f puede contener varias instrucciones en un bloque que est deli
m itado por Ibves (lneas 23 a 35). Las Ibves n o se requieren para una instruccin i f con un cuerpo de u n a sola
instruccin, com o b s d e las lneas 19, 29 y 33- M uchos program adores consideran una buena prctica encerrar
el cuerpo de todas b s instrucciones i f entre Ibves; de hecho, m uchas organizaciones lo exigen. Por esta razxSn, d
validador em ite el mensaje de advertencia anterior. Podem os elim inar los mensajes de advertencia de este ejem
p b si encerram os b s cuerpos de las instrucciones 1 f entre Ibves. Por e je m p b , el i f en b s lneas 19 y 20 puede
escribirse com o:
I f ( hora < 12 )
{
document.wr1te("<hl>Buenos d41acute;as, ");
}

Los operadores s tr lc t equals ( = ) y s t r l c t does not equal (l==)


Como mencionamos en b seccin 6.5, JavaScript puede realizar conversiones entre tipos por usted. Esto induye
casos en b s que vamos a comparar vabres. Por ejempb, la comparacin "75" = 75 produce el vabr true ya
que JavaScript convierte la cadena 75" en d nmero 75 antes de realizar b comparacin de igualdad (). Para
evitar conversiones implcitas en bs comparaciones, lo cual puede producir resultados inesperados, JavaScript
cuenta con b s operadores s t r l c t e q u a ls ( = ) y s t r l c t d o es n o t equal ( ! = = ) . La comparacin "75" = =
75 produce el valor fal se debido a que un operando es una cadena y el otro es un nmero. De manera similar,
75" I 75 produce true debido a que b s tipos dd operando no son iguales, por b cual b s vabres no son igua
les. Si no usa estos operadores al comparar vabres con n u il, 0, true, fa l se o b cadena vaca (""), el validador
de JavaScript de javascr1ptl1nt.com muestra advertencias de conversiones potenciales implcitas.

labia de precedencia de operadores


La ta b b en b figura 6.15 m uestra b precedencb de b s operadores introducidos en este captub. Los operadores se
m uestran de arriba h a c b abajo en orden descendente de precedencia. Cabe sealar que todos estos operadores
se asnebn de izquierda a derecha, con b excepcin del operador de asignacin (=). La suma es asociativa a b izquierda,
por b que una expresin com o x + y + z se evala como si se hubiera escrito como (x + y)+z. El operador de

6.8

Recursos Web

207

asignacin (-) se asocia de derecha a izquierda, por lo que una expresin com o x y - 0 se evala como si se hubiera es
crito como x (y - 0 ), que primero asigna el valor 0 a la variable y y luego asigna el resultado de esa asignacin (0) a x.

Buena prctica de programacin 6.8


Consulte la tabla de precedencia de operadora a l escribir expresiona que contengan muchos operadora. Confirme
que as operaciones se realicen en el orden en elque usted espera. Si no estd seguro d d orden de evaluacin, useparntais para forzar el orden, justo como lo hara en las expresiones algebraicas. Asegresede tener en cuenta que algunos
operadora, como d de asignacin (-X se asocian de derecha a izquierda en vez de hacerlo de izquierda a derecha.

Operadores

Asociatividad

Tipo

* / %

bquierda a derecha

multiplicativo

+ -

izquierda a derecha

aditivo

<<=>>=

izquierda a derecha

relaciona!

izquierda a derecha

Igualdad

derecha a bquierda

Asignacin

I - 1=

Figura 6.15 | Precedencia y asociatividad de los operadores vistos hasta ahora.

6.8

Recursos Web

www.deitel.com/javascript
El C entro d e recursos de JavaScript de D eitel contiene vnculos a algunos de los mejores recursos de JavaScript
en Web. Ah encontrar vnculos clasificados a: herram ientas, generadores de cdigo, foros, libros, bibliotecas,
marcos de trabajo sobre JavaScript y ms. Revise adems los tutoriales para todos los niveles de habilidades,
desde principiantes hasta avanzados.

Resumen
Seccin 6.1

Introduccin

JavaScript (pg. 186) se utiliza para mejorar la funcionalidad y apariencia de las pginas Web.

Seccin 6.2

Su primera secuencia de comandos: mostrar una linea de texto conJavaScript en una pgina Web

A menudo, las secuencias de comandos de JavaScript aparecen en la seccin <head> dd documento de HTML5.
El navegador interpreta primero d contenido de la seccin <head>.
la etiqueta <script> indica al navegador que d texto que le sigue es parte de una secuencia de comandos (pg. 186). El
atributo type (pg. 187) especifica el tipo MIME dd lenguaje de secuencias de comandos que se utiliza en la secuencia
de comandos; por ejemplo, text/JavaScript.
Una cadena de caracteres (pg. 187) puede encerrarse entre comillas dobles () (pg. 187).
Algunas veces a una cadena (pg. 187) se denomina cadena de caracteres, mensaje o literal de cadena.
El objeto documnt dd navegador (pg. 188) representa el documento de HTML5 que d navegador muesua en ese
momento. El objeto document nos permite especificar el texto de HTML5 que se va a mostrar en d documento.
El navegador crea un conjunto completo de objetos que nos permiten acceder a todos los dementos de un documento
de HTML5 y manipularlos.

208

Captulo 6

JavaScript: introduccin
5
a las secuencias de comandos

Un objeto (pg. 188) reside en la memoria de la computadora y contiene la informacin utilizada por la secuencia de
comandos. El tmiino objeto por lo general implica que hay atributos (daros) (pg. 188) y comportamientos (mtodos)
(pg. 188) asociados con e sc objeto. Los mtodos del objeto usan los datos de los atributos para reaIr/ar acciones titiles
para el cliente del objeto (es decir, la secuencia de comandos que llama a los mtodos).
El mtodo wri teln del objeto document (pg. 188) escribe una lnea de texto de HTML5 en un documento.
Gada instruccin termina con un punto y coma (lo que tambin se conoce como terminador de instruccin; pg. 188),
aunque JavaScript no requiere esta prctica.
JavaScript es susceptible al uso de maysculas. Si no se utilizan las letras maysculas y minsculas apropiadas se
genera un error de sintaxis.

Seccin 6.3

Cmo modificar su primera secuencia de comandos

Algunas veces es conveniente mostrar informacin en ventanas conocidas como dilogos (o cuadros de dilogo,
pg. 191) que 'aparecen'* en la panralla para llamar la atencin del usuario. Por lo general los dilogos muestran mensajes
importantes al usuario que navega por la pgina Web.
El objeto wi ndow del navegador (pg. 191) usa el mtodo alert (pg. 191) para mostrar un dilogo de alerta.
La secuencia de escape \n es el carcter de nueva lnea (pg. 192). Hace que el cursor en d documento de HTML5
se mueva al principio de la siguiente lnea.

Seccin 6.4

Cmo obtener la entrada del usuario mediante dilogos prompt

Las palabras c U y c (pg. 193) son palabras con un significado especial en JavaScript.
La palabra clave var (pg. 193) al principio de la instruccin indica que la palabra nombre es una variable. Una variable
(pg. 193) es una ubicacin en la memoria de la computadora en donde puede guardarse un valor para que lo use una
secuencia de comandos. Todas las variables tienen un nombre y un valor, y deben declararse con una instruccin var
antes de usarse en una secuencia de comandos.
El nombre de una variable puede ser cualquier idcntificador vlido que consista de letras, dgitos, guiones bajos (_J y
signos de dlar ($) que no empiece con un dgito y no sea una palabra clave reservada de JavaScript
Las declaraciones terminan con un punto y coma y pueden dividirse en varias lincas con cada variable en la declaracin
separada por una coma; a esto se le conoce como lista de nombres de variables separadas por comas. Es pasible declarar
varias variables en una declaracin o en mltiples declaraciones.
Es conveniente indicar cl propsito de una variable en la secuencia de comandos, para ello se coloca un comentario de
JavaScript al final de la declaracin de la variable. Un comentario de una sola Urica (pg. 194) comienza con los caracte
res // y termina al final de la linca. Los comentarios no hacen que d navegador realice ninguna accin al interpretar la
socucncia de comandos; en cambio, d intrprete de JavaScript ignora los comentarios.
los comentarios multilnca comienzan con cl ddimirador / y terminan con cl ddimirador */. Hl intrprete ignora todo
d texto entre los ddimiradores dd comentario.
El mtodo pronpt dd objeto wlndow muestra un dilogo en donde d usuario puede escribir un valor. El primer argu
mento es un mensaje (conocido como indicador) que indica al usuario que realice cierta accin especfica. Un segundo
argumento opcional, que se separa dd primero mediante una coma, puede especificar La cadena predeterminada que se
va a mostrar en d campo de texto.
Una variable recibe un valor a travs de una asignacin (pg. 196), mediante el uso dd operador de asignacin . Al
operador se le conoce como operador binario (pg. 196), ya que tiene dos operandos (pg. 196).
JavaScript tiene una versin dd operador para concatenacin de cadenas (pg. 196) que permite concatenar una cade
na y un valor de otro tipo de datos (incluyendo otra cadena).

Seccin 6.5

Conceptos de la memoria

Toda variable tiene un nombre, un tipo y un valor.


Al colocar un valor en una ubicacin de la memoria, d valor sustituye al valor anterior en esa ubicacin. Al leer un valor
de una ubicacin de la memoria, d proceso es no destructivo.

Ejercicios de autoevaluacin

209

JavaScript no requiere que las variables tengan un tipo declarado antes de poder usarlas en una secuencia de comandos.
Una variable en JavaScript puede contener un valor de cualquier tipo de dato* y, en muchos casos, JavaScript realiza
conversiones automticas entre los valores de distintos tipos por usted. Por esta razn, a JavaScript se le conoce como un
lenguaje dbilmente tipificado (pig. 200).
Cuando se declara una variable en JavaScript pero no recibe un valor, tiene un valor indefinido (pg. 200). Si intentamos
usar el valor de dicha variable, por lo general se produce un error lgico.
Al declarar variables no se Ies asignan valores predeterminados, a menos que lo especifiquemos. Para indicar que una
variable no contiene un valor, podemos asignarle el valor nuil.

Seccin 6 .6

Aritm tica

Los operadores aritmticos bsicos (, *, / y X; pg. 200) son binarios, ya que cada uno opera sobre dos operandos.
Pueden usarse parntesis para agrupar expresiones de la misma forma que en expresiones algebraicas.
JavaScript aplica los operadores en las expresiones aritmticas en una secuencia precisa determinada por las siguientes
reglas de precedencia de operadores (pg. 201).
Cuando decimos que los operadores se aplican de izquierda a derecha, nos referimos a la asociatividad de los operadores
(pg. 201). Algunos operadores se asocian de derecha a izquierda.

Seccin 6 .7

Tonta de decisiones: operadores de igualdad y relacinales

La instruccin i f de JavaScript (pg. 202) permite que una secuencia de comandos tome una decisin con base en
la verdad o falsedad de una condicin. Si se cumple b condicin (es docir, que sea verdadera; pg. 202), se ejecuta la
instruccin en el cuerpo de b instruccin if. Si no se cumple b condicin (es decir, que sea falsa), no se ejecuta b con
dicin en el cuerpo de b instruccin 1f.
Las condiciones en bs instrucciones i f pueden formarse mediante el uso de los operadores de igualdad (pg. 202) y los
operadores relacinales (pg. 202).

Ejercicios de autoevaluacin
6.1

Complete bs siguientes oraciones:


a) _____________ comienza un comentario de una sola lnea.
b) Toda instruccin de JavaScript debe terminar con un(a)_____________ .
c) la instruccin
se utiliza para tomar decisiones.
d) El objero_____________ muestra dilogos alert y pronpt.
e) Las palabras_____________ estn reservadas para uso de JavaScript.
0 Los mtodos___________y
del objeto___________ escriben tacto de HTM L5 en un documento
de HTML5.

6.2

Indique si cada uno de los siguientes enunciados es verdadero ofalso. Si esfabo, explique por qu.
a) Los comentarios hacen que b computadora imprima el texto despus de los caracteres // en la pantalla al mo
mento de ejecutar b secuencia de comandos.
b) JavaScript considera que bs variables nuero y NuMeRo son idnticas.
c) El operador residuo (X) puede usarse slo con operandos numricos.
d) Los operadores aritmticos , / , % , + y tienen todos d mismo nivel de precedencb.
e) El mtodo parselnt convierte un entero en una cadena.

6.3

Escriba instrucciones de JavaScript para realizar cada una de bs siguientes tareas:


a) Declare bs variables c, estaEsUnaVarloble, q76354 y nunero.
b) Muestre un dilogo que pida al usuario que escriba un entero. Muestre un valor predeterminado de 0 en el
dilogo.
c) Convierta una cadena en un entero y almacene d valor convertido en b variable edad. Suponga que b cadena se
almacena en valorCadena.

2 10

Captulo 6

5
JavaScript: introduccin
a las secuencias de comandos

d) Si la variable mjnero no es igual a 7, muestre "La variable numero no es igual a 7" en un dilogo de mensaje,
c) Produzca una lnea de texto de HTML5 que muestre el mensaje Esto es JavaScript en el documento de
HTML5.
6.4

Identifique y corrija los errores en cada una de las siguientes instrucciones:


a) i f

(c < 7 ) ;

window.alertC'c es menor que 7");


b) 1f (c -> 7)
*1ndow.alert("c es igual o mayor que 7");
6.5

Escriba una instruccin (o comentario) para realizar cada una de las siguientes tarcas:
a) Indique que una secuencia de comandos calcular d producto de tres enteros [Sugerencia: use texto que ayude a
documentar una secuencia de comandos].
b) Declare las variables x, y. z y resultado.
c) Declare las variables xVal, yVal y zVal.
d) Pida al usuario que introduzca el primer valor, lea d valor del usuario y almacnelo en la variable xVal.
e) Pida al usuario que introduzca el segundo valor, lea d valor dd usuario y almacnelo en la variable yVal.
0 Pida al usuario que introduzca el tetcer valor, lea d valor dd usuario y almacnelo en la variable zVal.
g) Convierta la cadena xVal en un entero y almacene d resultado en la variable x.
h) Convierta la cadena yVal en un entero y almacene d resultado en b variable y.
i) Convierta b cadena zVal en un entero y almacene d resultado en b variable z.
j) Calcule d producto de los tres enteros contenidos en bs variables x, y y z, y asigne d resultado a b variable
resultado.
le) Escriba una lnea de texto de HTMI-5 que contenga b cadena "El producto es" seguida del valor de b varia
ble resultado.

6.6

Use las instrucciones que escribi en d ejercicio 6.5 para escribir una secuencia de comandos completa que calcule e
imprima el producto de tres enteros.

Respuestas a los ejercicios de autoevaluacin


6.1

a) //. b) Punto y coma (;). c)1f. d)w1ndow. c) Cbve. 0 *r1te, writeln, docunent.

6.2

a) Falso. Los comentarios no provocan que se realice ninguna accin al ejecutar b secuencia de comandos. Se utili
zan para documentar secuencias de comandos y mejorar su legibilidad, b) Falso. JavaScript es susceptible al uso
de maysculas, por lo que estas variables son distintas, c) Verdadero, d) Falso. Los operadores *, / y X estn en
d mismo nivel de precedencia; los operadores + y - estn en un nivd menor de precedencia, e) Falso. Ia>funcin
parselnt convierte una cadena en un valor entero.

6.3

a) var c. estaEsUnaVariable. q76354, numero;


b) valu - window.promptC Escriba un entero", 0 ) ;
c) var edad - parselnt( valorCadena ) :
d ) i f (nu nero I - 7 )

rlndon.alertC "La variable numero no es igual a 7 );


e) docunent.wr1teln( "Esto es JavaScript" );
6.4

a) Error no debe haber un punto y coma despus dd parntesis derecho de b condicin en b instruccin if.
Correccin: elimine d punto y coma despus del parntesis derecho. [Nota: d resultado de este error es que b
instruccin de salida se ejecuta sin importar que b condicin en b instruccin if sea verdadera o no. El punto y
coma despus del parntesis derecho se considera una instruccin vaca: una nstmccin que no hace nada],
b) Error: d operador rdacional -> es incorrecto.
Correccin: cambie -> por >-.

Respuestas a los ejercicios de autoevaluacin

6.5

a)
b)
c)
d)
e)

/ / C a l c u la e l pro d u cto de t r e s e n t e r o s
v a r x , y , z . re s u lta d o ;
v a r x v a l. yVal, zV al;
xVal - w in d o w .p ro n p t( " E s c rib a e l p r i o e r a r t e r o : " . " 0 " );
yVal - w 1ndow .pronpt( " E s c rib a e l segundo e n t e r o : . " 0 " );

0 zVal - *1ndow.pronpt(
g) x - p a r s e l n t ( xVal ) ;
h) y - p a r s e l n t ( yVal ) ;

" E s c rib a e l t e r c e r e n t e r o : " . "0"};

i) z p a r s e l n t ( zVal ) ;
j) r e s u l t a d o - x * y * z ;
le) docum ent.w rit e l n ( "<hi - l p ro d u c to e s " r e s u l t a d o < /hl>' );
6 .6

La secuencia es la siguiente:

1
2

< IDOCTYPE h te l>

<1-- E j e r c i c i o 6.6: producto.html -->

<htal>

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<fcead>

<ueta charset - "utf-*">


<title>Soluc1&oacute:n 6</title>
<script>
<1
/ / Calcula e l producto de t r e s enteros
var x, y , z , r e s u lt a d o ;
v a r xVal, yV al. z V al;
xVal
yVal
zVal

w i n d o w . prompt( " E s c r ib a e l p r i u e r e n t e r o : " ) ;


- window.prompt( " E s c r ib a e l segundo e n t e r o : " ) ;
- window.prompt( " E s c r ib a e l t e r c e r e n t e r o : " ) ;

x - p a r s e l n t ( xVal ) ;
y - p a r s e l n t ( yVal ) ;
z - p a r s e l n t ( zVal ) ;

21
22

23
24
25
26
27

r e s u l t a d o - x y z;
d o c u n e n t .w r it e l n ( "<hl>El p ro d u c to e s " r e s u l t a d o "<l>" )

/ / -->

</script>
</head><body></body>
< / h t* l>

- pf.'*

21 1

2 12

Captulo 6

5
JavaScript: introduccin
a las secuencias de comandos

U= 1a - m
Q S c * a t* n t

C
S ite s

fiie y//X ye je m p lo s^

sugendot _ WebSUtGlley

El producto es 60

Ejercicios
6.7 Complete bs siguientes oraciones:
a) _____________ se utilizan para documentar una secuencia de comandos y mejorar su legibilidad.
b) Un dilogo capaz de recibir entrada dd usuario se muestra con d mtodo_____________ del objeto_____________ .
c) Un instruccin de JavaScript que toma una decisin es b instruccin_____________.
d) Por lo general los clculos se realizan mediante los operadores_____________.
c) El mtodo_____________del objeto_____________ muestra un dilogo con un mensaje para d usuario.
6.8 Escriba instrucciones de JavaScript que realicen cada una de bs siguientes tartas:
a) Muestre el mensaje Escriba dos nmeros" usando el objeto window.
b) Asigne el producto de bs variables b y c a b variable a.
c) Indique que una sccucncb de comandos va a realizar un clculo de nmina de ejemplo.
6.9 Indique si cada uno de los siguientes enunciados es verdadero ofalso. Si esfalso, explique por qu
a) Los operadores de JavaScript se evalan de izquierda a derecha.
b) Los siguientes son nombres de variables vlidos: ..guin bajo_. 928134, t5, j 7, sus ventas!. el_total_de_
su_Jcuenta, a, b$, c, z, z2.
c) Una expresin aritmtica vlida de JavaScript sin parntesis se evala de izquierda a derecha.
d) Los siguientes son nombres de variables invlidos: 3g, 87, 67h2,h22, 2h.
6.10 Complete las siguientes oraciones:
a) Qu operaciones aritmticas tienen b misma precedencb que b multiplicacin?_____________.
b) Cuando hay parntesis anidados, cules se evalan primero?_____________ .
c) Una ubicacin en b memoria de b computadora que puede contener distintos valores en distintos momentos
durante b ejecucin de una sccucncb de comandos se lbma_____________.
6.11 Qu aparece en d dilogo de alerta cuando se ejecuta cada una de bs siguientes instrucciones de JavaScript? Asuma
que x - 2 y y - 3.
a) window.alarte "x - + x ) ;
b) window.alart( "Elvalor de x x as " ( x x ) );
c) window.alartC x
);

d) window.alerte ( x+ y ) 4 " . " ( y x ) );


6.12 Cul de bs siguientes instrucciones de JavaScript contiene variables cuyos valores se modifican?
a ) p * i + j + k + 7;
b) window.alerte "variables cuyos valores se destruyen );
c) window.alert ( "a - 5" ) ;
d) cadenaVal window.prompteMEscriba una cadena:" );
6.13 Dada = a x ' * 7, cules de bs siguientes instrucciones de JavaScript son correctas para esta ecuacin?
a ) y - a * x x * x + 7;
b) y a x x ex 7);
c) y - ea * x) * x * C* + 7);
d) y - Ca * x) * x * x 7;

Ejercicios

213

c ) y - a * ( x # x * x ) ^ 7;

0 y - a * x * (x * x 7 );
6.14 Indique d orden de evaluacin de los operadores en cada una de las siguientes instrucciones de JavaScript, y muestre
d valor de x despus de ejecutar cada instruccin.
a) x - 7 + 3 * 6 / 2 - l ;

b ) x - 2 % 2 + 2* 2 - 2 / 2 ;
c) x -

( 3 9 ( 3 ( 9 * 3 / ( 3 )

) ) );

6.15 Escriba una secuencia de comandos que muestre los nmeros dd I al 4 en b misma linca, con cada par de nmeros
adyacentes separados por un espacio. Escriba la secuencia de comandos usando los siguientes mtodos:
a) Use una instruccin docunent .wri teln.
b) Use cuatro instrucciones docunant .wM t.
6.16 Escriba una secuencia de comandos que pida al usuario que escriba dos nmeros, obtenga los dos nmeros dd
usuario y produzca texto que muestre la suma, producto, diferencia y cociente. Use las tcnicas que se muestran en
b figura 6.7.
6.17 Escriba una secuencia de comandos que pida al usuario que introduzca dos enteros, obtenga los nmeros dd usuario
y produzca texto que muestre d nmero ms grande seguido de las palabras "es mayor que" en un dilogo de alerta.
Si los nmeros son iguales, imprima texto de HTM I.5 que muestre el mensaje "Estos nmeros son iguales". Use
bs tcnicas mostradas en la figura 6.14.
6.18 Escriba una secuencia de comandos que reciba tres enteros dd usuario y muestre la suma, promedio, producto,
menor y mayor de los nmeros en un dilogo a le r t.
6.19 Escriba una secuencia de comandos que obtenga d d usuario d radio de un crculo y produzca texto de HTM L5 que
muestre d dimetro, b circunferencia y d rea de esc circulo. Use d valor constante 3.14159 para t i . Use bs tcnicas de
GUI que se muestran en b figura 6.7. [Nota: tambin puedeusarlaconstantepredefinidaHath.PI parad valor de x. Esta
constante es ms precisa que d valor 3.14159. El objeto Math est definido por JavaScript y provee muchas herramientas
matemticas comunes]. Use las siguientes frmulas (r es el radio): dimetro = 2r, rcunjerencia = 2nr, rea = nr*.
6.20 Escriba una secuencia de comandos que lea cinco enteros, determine y produzca marcado que muestre los enteros
menor y mayor en d grupo. Use slo las tcnicas de secuencias de comandos que aprendi en este captulo.
6 .2 1 Escriba una secuencia de comandos que lea un entero, determine y produzca texto de HTM L5 que muestre si es par
o impar. (Sugerencia: use el operador residuo. Un nmero par es un mltiplo de 2. Cualquier mltiplo de 2 deja
un residuo de cero al dividirse entre 2].
6.22 Escriba una secuencia de comandos que lea dos enteros, determine y produzca texto de HTML5 que muestre si el
primero es mltiplo d d segundo. [Sugerencia: use el operador residuo].
6.23 Escriba una secuencia de comandos que reciba tres nmeros, detetmine y produzca marcado que muestre b cantidad
de nmeros negativos, positivos y ceros introducidos.
6.24 Escriba una secuencb de comandos que calcule los cuadrados y cubos de los nmeros dd 0 al 5 y produzca texto de
H TM L5 que muestre los valores resultantes en un formato de tabb de HTML5, como se muestra a continuacin.
[Nota: esta secuencb de comandos no requiere entrada del usuario].

nmero

cuadrado

cubo

27

16

64

25

125

JavaScript:
instrucciones de control I
Desplacmonos un lugar.
Lcwii Carro

la rueda se convirti a i un circulo


completo.
W iO ia m S h a k r i p r a r r

Cuntas manzanas tuvieron que


caer en a cabeza de Newton antes
de que a i tendiera el suceso!
R oben Fkmi

Objetivos
En este capitulo aprender a:
Reconocer las tcnicas bsicas
de solucin de problemas.
Desarrollar algoritmos a travs
del proceso del refinamiento
arriba-abajo, paso a paso.
Utilizar las instrucciones de
seleccin i f e i f . . .e ls e
para elegir entre acciones
alternativas.
Usar la instruccin de
repeticin w h ile para
ejecutar intrucciones en
una secuencia de comandos
en forma repetida.
Implemertar la repeticin
controlada por contador y
la repeticin controlada
por centinela.
Usar los operadores de
incremento, decremento
y asignacin.

7.4

Plan general

7.1 Introduccin

7.2 Algoritmos
7.3 Pseudocdigo
7.4 Instrucciones de control
7.5 Instruccin de seleccin i f
7.6 Instruccin de seleccin i f . . .e l s e
7.7 Instruccin de repeticin w h ile

Instrucciones de control

215

7.9 Formulacin de algoritmos: repeticin


controlada por centinela
7.10 Formulacin de algoritmos: instrucciones de
control anidadas
7 .1 1 Operadores de asignacin
7 .12 Operadores de incremento y decremento
7.13 Recursos Web

7.8 formulacin de algoritmos: repeticin


controlada por contador
Resumen | Ejercicios de autoevaluacin | Respuestas a los ejercicios de autoevaluacin | Ejercicios

7.1

Introduccin

Antes de escribir una secuencia de com andos para resolver un problem a, debem os conocerlo a profundidad
y tener una m etodologa cuidadosam ente planeada para resolverlo. Al escribir una secuencia d e com andos, es
igual de esencial com prender los tipos de bloques de construccin disponibles y em plear principios reconocidos
de construccin de programas. En ste y en el siguiente captulo hablaremos sobre estas cuestiones a m edida que
presentemos la teora y los principios de la programacin estructurara.

7.2

Algoritmos

C ualquier problem a com putable puede resolverse m ediante la ejecucin de una serie d e acciones en u n orden
especfico. A un p ro c e d im ie n to para resolver un problem a en trm inos de
1.
2.

las acciones a ejecutar y


el o rd e n en el que se van a ejecutar esas acciones

se le conoce com o a lg o ritm o . Es im portante especificar de m anera correcta el o rd en en el q u e se van a ejecutar


las acciones; a esto se le conoce com o c o n tro l d e l p ro g ra m a . En ste y en el siguiente captulo investigaremos
las herram ientas de control de programas de JavaScript.

7.3

Pseudocdigo

El p seu d o c d ig o es un lenguaje inform al que nos ayuda a desarrollar algoritm os. El pseudocdigo q u e presen
taremos aqu es til para desarrollar algoritm os que se convertirn en porciones estructuradas de programas de
JavaScript. El pseudocdigo es similar al ingls cotidiano; es conveniente y am igable con el usuario, aunque en
realidad no sea un lenguaje de program acin de com putadoras.

Observacin de ingeniera de software 7.1


A menudo elpseudocdigo se utiliza para "idear" una secuencia de comaruos duraiue elproceso de diseo.
Si se prepara con cuidado puede convertirsefcilm ente a JavaScript.

7.4

Instrucciones de control

fo r lo general, las instrucciones en una secuencia de com andos se ejecutan una tras o tra en el orden en el que
se escribieron. A este proceso se le conoce com o ejecu ci n secuencia!. Varias de las instrucciones de JavaScript

216

Capitulo 7

JavaScript: instrucciones de control I

que veremos pro nto nos perm iten especificar que la siguiente instruccin a ejecutar no necesariamente tiene que
ser la siguiente en la secuencia. A esto se le conoce com o tran sferen cia d e co n tro l.
D urante la dcada de 1960. se hizo evidente que el uso indiscrim inado de las transferencias de control era
el origen d e muchas d e las dificultades que experim entaban los grupos de desarrollo de software. A quien se
seal com o culpable fue a la in stru c c i n g o to , la cual perm ite al program ador especificar la transferencia de
control a uno de los m uchos posibles destinos dentro de un programa. La investigacin dem ostr que podan
escribirse program as sin instrucciones g o to . 1.a nocin de lo que conocem os com o p ro g ra m a c i n e stru c tu ra d a
se hizo casi un sinnim o de b elim in aci n del goto". JavaScript no tiene una instruccin goto . Los program as
estructurados son ms claros, fciles de depurar y modificar, y es ms probable que sean libres de errores en
prim era instancia.
1.a investigacin d eterm in q u e todos los program as podan escribirse en trm in o s d e tres e s tru c tu ra s
d e c o n tr o l solam ente: la e s tru c tu ra d e se c u e n c ia , la d e se le c c i n y la de re p e tic i n . La estru ctu ra de
secuencia est integrada en JavaScript: a m enos q u e se le in d iq u e lo co n trario , la co m p u tad o ra ejecuta las
instrucciones una despus de o tra, en el orden en q u e estn escritas (es decir, en secuencia). El segm ento
del diagram a de flujo de la figura 7.1 ilustra u n a estru ctu ra de secuencia tpica, en la q u e se realizan dos
clculos en orden.

to ta l - to ta l ca lific a c i n ;

c o n t a d o r - c o n t a d o r 1;

Figura 7.1 | Diagrama de flujo de la estructura de secuencia de JavaScript.


Un d ia g ra m a d e flu jo es la representacin grfica d e un algoritm o o d e una parte del m ism o. Los dia
gram as de flujo se dibujan usando ciertos sm bolos d e propsito especial, com o rectngulos, rom bos, valos
y crculos pequeos; estos sm bolos se conectan m ediante lneas d e flujo, que indican el orden en el q u e se
ejecutan las acciones del algoritm o.
Al igual q u e el pscudocdigo, los diagram as de flujo se utilizan con frecuencia para desarrollar y representar
algoritm os, au n q u e m uchos program adores prefieren el pseudocdigo. Los diagram as de flujo m uestran con
claridad cm o operan las estructuras de control; con este fin b s utilizaremos en este libro.
C onsidere el segm enro del diagram a de flujo para la estructura de secuencia en la figura 7-1. Por cuestin
de sim pleza, usam os el sm b o lo d e re c t n g u lo (o sm b o lo d e a c c i n ) para indicar cualquier tipo de accin,
incluyendo un clculo o una operacin de entrada/salida. Las lneas de flujo en ia figura indican el orden en el
q u e se realizan las acciones: la prim era accin sum a c a l i f i c a c i n a t o t a l y luego la segunda accin sum a
1 a c o n ta d o r. JavaScript nos perm ite tener todas las acciones que deseem os en una estru ctu ra de secuencia.
C om o p ro n to veremos, en d o n d e pueda colocarse una sola accin es posible colocar varias acciones en se
cuencia.
E n un diagram a de flujo que representa a un algoritm o completo, b s sm b o lo s d e valo que contienen bs
palabras Inicio" y Fin" representan el inicio y el fin del algoritm o, respectivamente. En un diagram a de flujo
que m uestra s b u n a parte de un algoritm o, com o en b figura 7 .1 . b s sm bolos de v a b se o m iten y en su lugar
se utilizan sm b o lo s d e crcu lo s p eq u e o s, tam bin conocidos com o sm b o lo s co n ecto res.

7.4

Instrucciones de control

217

Quizs el sm bolo ms im portante en un diagram a de flujo sea el sm b o lo d e ro m b o , tam bin conocido


com o sm b o lo d e d e c isi n , el cual indica que se va a tom ar una decisin. En la siguiente seccin hablarem os
obre el sm bolo de rombo.
JavaScript cuenta con tres tipos d e estructuras de seleccin; en ste y en el siguiente captulo hablarem os
sobre cada una de ellas. La instruccin d e seleccin i f ejecuta (selecciona) u n a accin si una condicin es verda
dera, u o m ite la accin si la condicin es falsa. La instruccin de seleccin i f . . . e l se ejecuta una accin si una
condicin es verdadera y ejecuta una accin diferente si la condicin es falsa. La instruccin de seleccin swi tch
(captulo 8) ejecuta una de muchas acciones diferentes, dependiendo del valor de una expresin.
1 f es una in stru c c i n de seleccin sim ple, ya que selecciona o ignora una sola accin (o, com o pronto
veremos, un solo grupo de acciones). i f . . . e l s e se conoce com o in stru cci n d e seleccin d oble, ya que se
lecciona entre dos acciones distintas (o grupos de acciones), swi tc h es una e stru c tu ra d e seleccin m ltip le , ya
que selecciona entre muchas acciones (o grupos de acciones) diferentes.
JavaScript cuenta con cuatro instrucciones de repeticin: w h ile , do. .w h ile , f o r y f o r . ,1n (en el captulo
8 veremos do. .w h ile y fo r; en el captulo 10 veremos f o r . .in ). C ad a u n a de las palabras i f , e l s e , sw itch ,
w h ile. do. f o r e in es una p ala b ra clave de JavaScript. Estas palabras estn reservadas por el lenguaje para
mplcmcnrar diversas funciones, com o las estructuras de control de JavaScript. Adems de las palabras clave,
JavaScript tiene otras palabras cuyo uso est reservado para este lenguaje, com o los valores n u il, tr u e y f a l s e ,
adems d e palabras que estn reservadas para un posible uso en el futuro. En la figura 7.2 se m uestra una lista
com pleta de palabras reservadas de JavaScript.

Error comn de programacin 7.1


Usar una palabra clave como idenfieador (por ejemplo, para nombres de variables) es un error de sintaxis.

Palabras clave reservadas para JavaScript

break

case

catch

continu

d e f a u lt

d e le te

do

e ls e

false

fln ally

for

functlon

1f

1n

In sta n c eo f

new

n uil

r e tu rn

switch

th 1 s

throw

tr u e

try

ty peo f

var

vold

while

wlth

Palabras clave reservadaspara JavaScript, pero que no utilizan


c la s s

const

enum

export

extends

implements

Import

I n te r f a c e

let

package

p rv a te

protected

public

sta tic

super

y ie ld
Figura 7.2 | Palabras clave reservadas para JavaScript.

C om o hem os visto, JavaScript slo tiene ocho instrucciones de control: secuencia, tres tipos de seleccin y
cuatro tipos de repeticin. U na secuencia de com andos se form a m ediante b com binacin de instrucciones de

218

Captulo 7

JavaScript: instrucciones de control I

control segn sea necesario para im plem entar el algoritmo de la secuencia de com andos. Cada instruccin de con
trol se dibuja en el diagrama con dos sm bolos de crculos pequeos, uno en el punto de entrada a la instruccin de
control y el otro en el punto de salida.
Las in stru ccio n es de c o n tro l d e u n a sola e n tr a d a /u n a so la salid a facilitan la creacin de secuencias de
com andos; slo tenem os que conectar el p u n to de salida de una al p u n to de entrada de la siguiente. Este proceso
es sim ilar a la fbrm a en que u n nio apila bloques de construccin, por lo cual le llamamos a p ila m ic n to d e ins
tru ccio n es d e c o n tro l. E n breve aprenderem os que slo hay una m anera alternativa de conectar las instruccio
nes de control: el a n id a m ie n to d e in stru ccio n es d e c o n tro l. Por lo tanto, los algoritm os en JavaScript se crean
a partir de slo ocho tipos distintos de instrucciones de control, que solam ente se com binan de dos formas.

7.5

Instruccin de seleccin i f

U na instruccin de seleccin se utiliza para elegir entre c u n o s alternativos de accin en una secuencia de co
mandos. Por ejem plo, suponga que el grado para aprobar u n exam en es 60 (de 100). Entonces, la instruccin
de pscudocdigo

Si la calificacin del estudiante es mayor o igual a 60


Im prim ir "Aprobado"
determ ina si la condicin la calificacin del estudiante es m ayor o igual a 60" es verdadera o falsa. En caso de
que sea verdadera, se im prim e A probado y se ejecuta" en o rd en b siguiente instruccin (recuerde que el pseudocdigo no es un verdadero lenguaje de program acin). Si b condicin esfalsa, se ignora b instruccin Imprimir
y se ejecuta en orden b siguiente.
Observe que b segunda lnea de esta instruccin de seleccin tiene sangra. D ich a sangra es opcional pero
se recom ienda am pliam ente, ya que enfatiza b estructura inherente de los program as estructurados. El intrpre
te de JavaScript ignora los caracteres de espacio en blanco: se utilizan espacios, tabubdores y saltos de lnea para
sangra y espaciado vertical.

Buena prctica de programacin 7.1


A I aplicar las convenciones de sangra razonables de manera consistente, mejora la legibilidad de las secuencias

de comandos. Usamos tres espaciospor sangra.


La instruccin anterior S i en pscudocdigo puede escribirse en JavaScript de b siguiente manera:

I f ( c a lI f lc a c io n E s tu d ia n te > 60 )
document.wHtelnC "<p>Aprobado</p>" );
El cdigo en JavaScript corresponde en gran m edida con el pseudocdigo. Esta sim ilitud es una de bs
razones que hace del pseudocdigo u n a herram ienta d e desarrollo de program as tan tiL La instruccin en el
cuerpo de f im prim e b cadena de caracteres Aprobado" en el docum ento de H T M L 5.
El diagram a de flujo de b figura 7.3 ilustra b instruccin i f de seleccin simple. Este diagram a d e flujo
contiene lo que tal vez sea el sm bolo ms im portante de u n diagram a de flujo: el smbolo de rombo (o smbolo
de decisin), el cual indica que se va a tom ar una decisin. Este sm bolo contiene una expresin, com o una con
dicin, que puede ser \c rd a d e ra o falsa. El sm bolo de decisin tien e dos lneas de flujo que salen de l. U na
indica la ru ta a seg u ir en la secuencia d e c o m a n d o s c u a n d o la expresin en el sm b o lo sea verdadera ; la
o tra indica b ruta a seguir en la secuencia de com andos cuando b expresin sea falsa. Es posible tom ar una
decisin en cualquier expresin que se evale en un valor de tipo booleano de JavaScript (es decir, cualquier
expresin que se evale com o tr u e o f a ls e ; a esto tam bin se le conoce com o ex p resi n booleana).

7.6

Instruccin de seleccin i f . . .e ls e

219

Figura 7.3 | Diagrama de flujo de la instruccin i f de seleccin simple.

O bservacin d e ingeniera de softw are 7.2


En JavaScript, cualquier valor numrico distinto de cero en una condicin se evala como true, y Ose evala
como false. Pora as cadenas, cualquier cadena que contenga uno o ms caracteres se evala como t r u e y la
cadena vacia (la cadena que no contiene caracteres, representada como "")se evala como false. Adems, una
variable que se declara con v a r y que no se le ha asignado ningn valor se evala como f a I s e .
"Icnga en cuenta q u e i f es una instruccin d e co n tro l de una en rrad a/u n a salida. P ro n to aprenderem os
que los diagram as de flujo para el resto de las instrucciones de co n tro l tam bin co n tien en (adem s d e sm
bolos de crculos pequeos y lneas de flujo) slo sm bolos de rectngulos, para indicar las acciones a realizar,
adem s de sm bolos d e rom bos para indicar las decisiones a tom ar. E ste tipo d e diagram a d e flujo enfatiza el
m o d e lo d e p ro g ra m a c i n d e a c c i n /d e c isi n . M s adelante hablarem os so b re la variedad de form as en que
pueden escribirse dichas acciones y decisiones.

7.6

Instruccin de seleccin i f . . . el se

La instruccin d e seleccin i f ejecuta una accin indicada slo cuando la condicin se evala com o tr u e ; de
lo contrario se o m ite b accin. Adems nos perm ite especificar que se ejecutar una accin diferente cuando b
condicin es t r u e que a ta n d o es f a l se. Por e je m p b , b instruccin de pscudocdigo
5 la calificacin del estudiante es mayor o igual a 60

Im prim ir "Aprobado
De lo contrario
Im prim ir "Reprobado
im prim e Aprobado si la calificacin del estudiante es m ayor o igual a 6 0 , y Reprobado si la calificacin del
estudiante es m enor a 60. En cualquier caso, despus de b im presin se ejecuta b siguiente instruccin en pscu
docdigo en la secuencia (es decir, la siguiente despus de to d a la instruccin i f . . . e l se). C abe m encionar que
tam bin se aplica sangra a b parte de la instruccin correspondiente al cuerpo del E l se.

Buena prctica d e program acin 7.2


Utilice sangria en ambas instrucciones del cuerpo de una instruccin

1 f. . . e l s e

220

Captulo 7

JavaScript: instrucciones de control I

La instruccin If...Else anterior en el pseudocdigo puede escribirse en JavaScript de la siguiente m anera:

1 f ( c a lIf ic a c io n E s tu d ia n te >- 60 )
docum ent.w riteln( "<p>Aprobado</p>" ) ;
el se
document.writelnC "<p>Reprobado</p> ) ;
El diagram a de Hujo en la figura 7-4 ilustra el flujo de control de la instruccin de seleccin i f . . . e l se. U na
vez ms, observe que los nicos sm bolos en el diagram a de flujo adem s de los crculos pequeos y las flechas
son b s rectngulos para las acciones y un rom bo para una decisin.

J
Figura 7.4 | Diagrama de flujo de la instruccin i f . . . e l s e de seleccin doble.
Operador condicional (? :)
JavaScript cuenta con el o p e ra d o r c o n d ic io n a l (? :), que est m uy relacionado con la instruccin i f . . .e ls e .
ste es el nico o p e ra d o r te m a r io en JavaScript (utiliza tres operandos). En conjunto, b s operandos y el sm b o b 7: form an una expresin c o n d ic io n a l. El prim er operando es una expresin boolcana, el segundo es el
v a b r d e la expresin condicional si la expresin boolcana se evala com o tr u e y el tercer operando es el v a b r de
la expresin condicional si la expresin booleana se evala com o fa l se. Por e je m p b , la instruccin

d o c u *e n t.v *rite ln ( c a lif ic a c io n E s tu d ia n te >= 60 7 Aprobado" : Reprobado" );


contiene una expresin condicional que se evala com o La cadena "Aprobado" si la condicin c a l i f i c a c i o
n E s tu d ia n te >= 60 es verdadera, y se evala com o la cadena "Reprobado si la condicin es falsa. Por b tanto,
esta instruccin con el operador condicional realiza en esencia la m ism a operacin que la instruccin i f .
e l se antes mostrada.

Instrucciones i f . . . e l se anidadas
Las in stru c c io n e s i f . . . e l se a n id a d a s evalan varios casos colocando instrucciones i f . . . e l se dentro de otras
instrucciones i f . . . e l s e . Por eje m p b , la siguiente instruccin en pseudocdigo indica que la secuencia de
com andos debe im p rim ir A para las calificaciones d e exmenes mayores o iguales a 9 0 , B si estn en el rango
d e 80 a 89, C si estn en el rango d e 70 a 79. D para las calificaciones que oscilan entre 60 y 69 y F para todas
las dem s calificaciones:

7.6

Instruccin de seleccin i f . . .e ls e

221

a calificacin del estudiante es mayor o igual a 90


Im prim ir A"
de lo contrario
S i a calificacin del estudiante es mayor o igual a 80
Im prim ir "B "
de lo contrario
S i a calificacin del estudiante es mayor o igual a 70
Im prim ir "C"
de o contrario
S i a calificacin del estudiante es mayor o igual a 60
Im prim ir aD "
de o contrario
Im prim ir "F"
S

Este pseudocdigo puede escribirse en JavaScript com o


1 f ( ca l1fic ac 1 o n E stu d ia n te >- 90 )

document.writelnC "A" );
e l se
1 f ( c a lif ic a c i n E s tu d ia n te >- 80 )

document.writelnC "B" );
e l se
1 f C cal1f1cac1onEstud1ante >= 70 )

do cum ent.w riteln( "C" ) ;


e l se
1 f ( c a l I f i c a d o n E s t u d l a n t e > 60 )

document.writelnC "D" );
e l se

document.writelnC "FM );
Si b variable cal if lc a c io n E s tu d ia n te es mayor o igual a 90, las cuatro condiciones sern verdaderas pero
slo se ejecutar document.wr1teIn despus de la primera prueba. Despus de que se ejecute document. wr1 te ln.se evita b parte el se de b instruccin 1 f . . .el se exterior.
Buena prctica de programacin 7.3
Si hay varios niveles de sangra en cada nivel debe aplicarse sangra con la misma cantidad de espacio.

la mayora de los programadores prefieren escribir b instruccin 1 f anterior en su forma equivalente:


1 f C c a l i f i c a c i n > 90 )
e ls e
e ls e
e ls e
e ls e

document.wr1teln(
1 f ( c a l i f i c a c i n 80
document.writelnC
1f ( c a l i f i c a c i n >= 70
document.writelnC
1f C c a l i f i c a c i n >= 60
document.writelnC
document.writelnC

"A" );
)
"B* );
)

"C" );
)

"0" );
F" ) ;

La segunda form a es ms p o p u b r ya que evita usar m ucha sangra hacia b derecha en el cdigo. Dicha
sangra a m enudo deja poco espacio en una lnea de cdigo, forzando a que b s lneas se dividan y se reduzca b
legibilidad de b secuencia de com andos.

222

Captulo 7

JavaScript: instrucciones de control I

Problema d el e l se suelto
Es im portante tener en cuenta que el intrprete de JavaScript siem pre asocia un e l se con el i f anterior, a menos
que se le indique o tra cosa m ediante la colocacin de llaves ({}). El siguiente cdigo ilustra el problema del
el se suelto. Por ejem plo,

1f ( x > 5 )
if ( y > 5 )

do cum ent.w riteln( "p>x e y son > 5</p>" );

e l se

docu m ent.w riteln ( <p>x es <= 5</p>" ) ;


parece indicar con su sangra que si x es mayor que 5, b estructura i f en su cuerpo determina si y es tambin
mayor que 5. De ser as, el cuerpo de b estructura i f anidada produce como resultado b cadena *'x y y son >
5". De lo contrario, parece ser que si x no es mayor que 5, b instruccin el se que es parte de b estructura i f . . .
el se produce como resultado la cadena "x es <= 5".
Cuidado! La instruccin i f anidada anterior no se ejecuta com o parece ser. El intrprete en realidad la
interpreta as:
if ( x > S )
if ( y > S )

docum ent.w riteln ( "<p>x e y son > S</p>" );


e l se

do cum ent.w riteln( "<p>x es <= 5</p>" );


en d o n d e el cuerpo de b prim era instruccin i f es una instruccin i f . . . el se anidada. sta evala si x es m a
yor q u e 5. D e ser as, la ejecucin contina evaluando si y es tam bin m ayor que 5. Si b segunda condicin es
verdadera, se m uestra la cadena apropiada (x e y son > 5"). Sin em bargo, si la segunda condicin es falsa se
m uestra b cadena "x es <= S, aun cuando sabem os que x es m ayor que 5.
Para forzar a que b primera instruccin i f anidada se ejecute com o se ten a pensado originalm ente, debe
escribirse de b siguiente manera:
If ( x > S )

if ( y > 5 )

do cum ent.w riteln( "<p>x e y son > S</p>" );


}
el se

do cum ent.w riteln( "<p>x es <= S</p>" );


Las Ibves ({}) indican al intrprete de JavaScript que la segunda instruccin i f se encuentra en el cuerpo de la
prim era y que el e l s e est asociado con la primera instruccin i f.

Bloques
La instruccin i f espera slo una instruccin en su cuerpo. Para incluir varias instrucciones en el cuerpo de i f ,
encirrelas entre Ibves ({ y }). E sto tam bin puede hacerse en la seccin e l s e de una instruccin i f . . .e l s e . A
un conjunto de instrucciones contenidas dentro de un par de Uaves se le llama bloque.

Observacin de ingeniera de softw are 7.3


Un bloque puede colocarse en cualquier parte de una secuencia de comandos en donde pueda colocarse una
sola instrucan.

7.7

Instruccin de repeticin *h11e

223

Observacin de ingeniera de software 7.4


A diferencia de as instrucciones individuales, un bloque no termina con un punto y coma. Sin embargo, cada
instruccin dentro de las aves de un bloque debe terminar con un punto y coma.
El siguiente ejemplo incluye un bloque en la parte e l se de una instruccin i f . . .else:

1 f ( c a l i f i c a c i n > 60 )
docum ent.w riteln( "p>Aprobado</p>" );
e l se

document.wr1teln( "<p>Reprobado</p>" );
document.wr1teln( "<p>Debe to n a r e s t e c u rso o t r a vez.</p>" );

}
En este caso, si cal 1 f i cacion es m enor que 60. el programa ejecuta ambas instrucciones en d cuerpo del el se e imprime

Reprobado.
Debe to n a r e s te curso o t r a vez.
Observe las Ibves que rodean a las dos instrucciones en la clu su b e l se . Estas Ibves son im portantes. Sin ellas,
k instruccin

document.wr1teln( "<p>Debe to n a r e s t e curso o t r a vez.</p>M );

estara fuera del cuerpo de b parte e l se de b instruccin i f y se ejecu tar sin importar que b calificacin fuera
m enor a 60.
Los errores de sintaxis (por ejem plo, cuando se o m ite una Ibve en un bloque d e b secuencia d e com andos)
los atrapa el intrprete cuando intenta interpretar el cdigo q u e contiene el error en cuestin. E stos errores evi
tan que el navegador ejecute el cdigo. A unque m uchos navegadores notifican a los usuarios sobre b s errores,
esa inform acin no es de m ucha utilidad. Por eso es im p o rtan te q u e valide sus secuencias de com andos de
JavaScript y b s pruebe en form a exhaustiva. U n e rro r lgico (com o cuando se o m ite n ambas llaves en u n b b que de la secuencia de com andos) tiene su efecto en tiem po de ejecucin. U n erro r lgico fatal hace que una
secuencia de com andos falle y term ine antes de riempo. Un e rro r lgico n o fatal perm ite que una secuencia de
com andos siga ejecutndose, pero produce resultados incorrectos.

Observacin de ingeniera de software 7.5


Ip H P

7.7

Asi como un bloquepuede colocarse en cualquier parte en dondepueda colocarse una sola instruccin individual
tambin es posible no tener instruccin alguna (la instruccin vacia) en esos lugares. La instruccin vacia se
representa colocando un punto y coma (;) en donde normalmente iria una instruccin.

Instruccin de repeticin whi 1e

U na estructura de repeticin (tam bin conocida com o d e lo ) le perm ite especificar q u e una secuencia de com an
dos debe repetir una accin m ientras cierta condicin sea verdadera. La instruccin en pseudocdigo

Mientras existan ms artculos en m i lista de compras


Comprar el siguiente artculo y quitarlo de m i lista
describe b repeticin que ocurre durante una salida de compras. 1o condicin existan ms artcu b s en m i lista de
compras puede ser verdadera o falsa. Si es verdadera, entonces se realiza la accin C o m p rar el siguiente

224

Capitulo 7

JavaScript: instrucciones de control I

artculo y quitarlo de m i lista. E sta accin se realizar en form a repetida m ientras la condicin sea verdadera. La
instruccin (o instrucciones) contenida en la instruccin de repeticin Mientras constituye su cuerpo. El cuerpo
de u n ciclo com o la estructura Mientras puede ser una sola instruccin o un bloque. En algn m om ento, la
condicin ser falsa (cuando el ltim o artculo de la lista de com pras sea adquirido y elim inado de la lista). En
este punto la repeticin term inar y se ejecutar" la prim era instruccin en pseudocdigo que est despus de
la instruccin de repeticin.

Error com n de programacin 7.2


S el cuerpo de una instruccin wh1 le nunca hace que a condicin sea verdadera, ocurre un error lgico.
Ibr lo general dicha estructura de repeticin nunca terminar: a este error te le conoce como ciclo infinito.
Muchos navegadores muestran un dilogo que permite al usuario terminar una secuencia de comandos que
contiene un ciclo infinito.
C om o e je m p b de u n a instruccin w h ile , considere el segm ento de u n a secuencia de com andos diseado
para encontrar la prim era potencia de 2 que sea m ayor a 1000. La variable p ro d u c to com ienza con el v a b r 2.
La instruccin es as:

var producto = 2;
while ( producto <- 1000 )
producto 2 * producto;
C uando la instruccin while term ina de ejecutarse, p ro d u c to contiene el resultado 1024. El diagrama de
flujo de la figura 7.5 lustra el flujo de control de la instruccin de repeticin whi le anterior. Una vez ms, ob
serve que (adems de c rc u b s pequeos y flechas) el diagram a de flujo con tien e slo un sm b o b de rectngulo
y un sm b o b de rom bo.

pro d u cto < - 1000

vetdader

p ro d u cto - 2 * producto

Figura 7.5 | Diagrama de flujo de la instruccin de repeticin while.


C uando b secuencia de com andos entra a while, p ro d u c to es 2. La secuencia de com andos m ultiplica
repetidas veces b variable p ro d u cto por 2, por lo que p ro d u c to recibe b s vabres 4, 8, 16, 32, 6 4 , 128, 256,
512 y 1024 sucesivamente. C uando p ro d u cto se vuelve 1024, b condicin p ro d u cto < - 1000 en b while
se vuelve f a ls e . E sto term ina b repeticin, con 1024 com o el v a b r final de p ro d u cto . La ejecucin contina
con b siguiente instruccin despus de while. [Nota: si la condicin de una instruccin whi l e es fal se en un
p rin c ip b , b o las instrucciones del cuerpo nanease ejecutarn).
El diagram a d e flujo m uestra la repeticin con eb rid ad . La lnea de flujo que emerge del re c t n g u b regresa
a b decisin, que b secuencia de com andos evala cada vez que itera por el ciclo hasta que. en un m om ento
dado, b decisin se vuelve falsa. En este p u n to , while sale y el co n tro l pasa a b siguiente instruccin en b se
cuencia de com andos.

7.8

7.8

Formulacin de algoritmos: repeticin controlada por contador

225

Formulacin de algoritmos: repeticin controlada por contador

Para ilustrar cm o desarrollar algoritm os, resolveremos diversas variaciones de u n problem a para obtener el
prom edio de una clase. C onsidere cl siguiente enunciado del problema:
A una clase de diez estudiantes se les aplic un examen. Las calificaciones (enteros en e l rango de 0 a 100) de este
acamen estn disponibles para usted. Determ ine e l promedio de la clase para este examen.

El prom edio de la d ase es igual a la sum a d e las calificaciones, dividida entre el nm ero de estudiantes (10 en
este caso). EJ algoritm o para resolver este problem a en una com putadora debe recibir com o en trad a cada una de
las calificaciones, realizar el clculo para prom ediar y m ostrar el resultado.
Em plearem os pseudocdigo para enlistar las acciones a ejecutar y especificar el orden en q u e deben ejecu
tarse. Usaremos una rep etici n c o n tro la d a p o r c o n ta d o r para introducir Las calificaciones, una por una. Esta
tcnica utiliza una variable llamada c o n ta d o r para controlar el nm ero de veces que debe ejecutarse un co n
junto de instrucciones. En este ejemplo, la repeticin term ina cuando el contador excede a 10. En esta seccin
presentam os un algoritm o de pseudocdigo (figura 7 .6 ) y la secuencia de com andos correspondiente (figura
7.7). E n b siguiente seccin m ostrarem os cm o desarrollar algoritm os en pseudocdigo. Por lo general, a b
repeticin controlada por contador se le llam a rep etici n d efin id a, ya que el nm ero de repeticiones se conoce
antes de que el ciclo com ience a ejecutarse.
1
2

3
4
3
6
7

A sign ar a to ta l e l valor de cero


A signar a l contador de calificaciones e l vtilor de uno
M ien tras que e l contador de calificaciones sea m enor o ig u a l a diez
R ecib ir como entrada la siguiente calificacin
Sum ar a ca lifica cin a l to ta l
Sum ar uno a l contador de calificaciones

9
10

A sign ar a l prom edio de la clase e l to ta l d i vidido entre diez


Im p rim ir e lprom edio de la clase

Figura 7.6 | /Algoritmo en pseudocdigo que utiliza la repeticin controlada por contador para resolver el problema
del promedio de una clase.

< 1D0CTYPE htl>

3
4
3

< ! Fig. 7.7: promedio.html >


< ! Repeticin c o ntro lada por contador para c a l c u l a r el promedio de una c la s e . -->
<htl>

<hcad>

<*eta ch a rse t = "u tf-S "

<t1tle>Programa del promedio de una c l a s e < / t i t l e >

9
10
11

< script>

12

13
14

var
var
var
var

t o t a l ; / / suma de c a l if i c a c i o n e s
con tad o rC alificacio n es; / / nmero de c a l i f i c a c i o n e s in tro d u c id a s
c a l i f i c a c i n ; / / c a l i f i c a c i n e s c r i t a por el u su a rio (como una cadena)
v a lo rC a lific a c io n ; / / va lo r de l a c a l i f i c a c i n (c o n v e rtid o en e n te ro )

Figura 7.7 | Repeticin controlada por contador para calcular el promedio de una clase (parte I de 2).

226

13
16
17
18
If

Capitulo 7

JavaScript: instrucciones de control I

var promedio; / / promedio de todas l a s c a l i f i c a c i o n e s


/ / Fase de i n i c ia U z a c i n
t o t a l - 0; / / b o rra r el t o t a l
c o n tad o rC alificacio n es 1; / / p re p a ra r para i t e r a r

20

21
22
23
24
23
26
27
28

29
30
31
32
33
34
33
36
37
38
3f
40
41
42
43
44
43
46
47

/ / Fase de procesamiento
while ( c o n ta d o rC alific a cio n es <= 10 ) / / i t e r a r 10 veces
{
/ / p e d ir l a en trad a y l e e r l a c a l i f i c a c i n del usuario
c a l i f i c a c i n window.prompt( "Escriba l a c a l i f i c a c i n e n te r a : " , "O" );
/ / c o n v e r tir c a l i f i c a c i n de cadena en e n te ro
v a lo rC a lific a c io n - parselntC c a l i f i c a c i n ) ;
/ / sumar v a lo r C a lif ic a c io n al t o t a l
t o t a l - t o t a l + v a lo rC a lific a c io n ;
/ / agregar 1 al con tadorC alificacio nes
c o n ta d o rC alificacio n es c o n ta d o rC alific a cio n es + 1;
} / / f i n de while
/ / Fase de terminacin
promedio t o t a l / 10;

/ / c a l c u l a r el promedio

/ / m ostrar el promedio de l a s c a l i f i c a c i o n e s de los exmenes


docum ent.w riteln(
"<hl>El promedio de l a c la s e es " + promedio + </hl>" );
</scr1pt>
</headxbodyx/body>
</html>

a) Este dogo se muestra 10 veces,


la entrada del usuario es lOO. 88.
93. 5 5 .6 8 .7 7 .8 3 .9 5 . 73 y 62. El
usuario irtroduce cada calificacin y
presiona A c e p t a r .

cnb* I*

ente*

b) El po med o de la clase apaece


n una pgina Web

dd promedie

CjacM

V,---

fiIry//X/yefnpk)5/cap07/fig07_07/pfomedio.html M
-

Sdioi lo g fr.d e i

b * k Gry D

\ n ^ t o de Irta m .

E l p r o m e d i o d e la clase es 79.4

Figura 7.7 | Repeticin controlada por contador para calcular el promedio de una clase (parte 2 de 2).

7.8

Formulacin de algoritmos: repeticin controlada por contador

227

Variables utilizadas en el algoritmo


Observe las referencias en el algoritmo a un total y un contador. U n total es una variable en la que una secuencia de
oamandos acum ula la sum a de una serie de valores. U n contador es una variable que una secuencia de com andos
utiliza para contar; en este caso, para contar el nmero de calificaciones introducidas. Por lo general, las variables
que almacenan totales deben inicalizarse en cero antes de poder usarlas en una secuencia de comandos.
Las lneas 11 a 15 declaran las variables t o t a l , c o n ta d o rC a lific a c io n e s , c a lif ic a c i n , v a lo rC a lific a c io n ,
promedio. La variable c a lif ic a c i n almacena h cadena que el usuario introduce en el dilogo prompt. La variable
v a lo r C a lific a c io n almacena el valor entero de la c a lif ic a c i n que el usuario introduce en el dilogo prompt.

hticializacin de variables
Las lneas 18 y 19 son asignaciones que inicializan t o t a l en O y c o n ta d o rC a lif ic a c io n e s en 1. C ab e m encio
nar que las variables t o t a l y c o n ta d o rC a li f ic a c io n e s se inicializan antes de usarse en un clculo.

Error comn d e programacin 7.3


S no te inicializa una variable que se utilizar en un clculo se genera un error lgico, el cualproduce e l valor
NaNf'No es un nmero).

Ijt instruccin de repeticin w h ile


La lnea 22 indica que w h ile seguir iterando m ientras el valor de contadorC al if i c a c i o n e s sea m enor o igual
a 10. La linca 26 corresponde a la instruccin en pseudocdigo Recibir como entrada la siguiente calificacin. \x
instruccin m uestra un dilogo prompt con el indicador " E s c rib a l a c a l i f i c a c i n e n t e r a ; " en la pantalla.
Una vez que el usuario introduce h c a l i f i c a c i n , la lnea 29 la convierte de cadena a entero. Debemos
convertir la cadena a un entero en este ejemplo; de lo contrario, la operacin d e sum a en la lnea 32 ser una

concatenacin de cadenas.
A continuacin, la secuencia de com andos actualiza el t o t a l con el nuevo v alo rC al if ic a c io n introducido
por el usuario. La lnea 32 sum a v a lo r C a lif ic a c io n al valor anterior de t o t a l y asigna el resultado a t o t a l .
Esta instruccin parece algo extraa, ya que no sigue las reglas del lgebra. Tenga en a te n ta que la precedencia de
operadores en JavaScript evala la operacin de sum a (+) antes que la operacin de asignacin (=). El valor de esta
expresin del lado derecho del operador de asignacin siempre reemplaza el valor de la variable del lado izquierdo.
Ahora la secuencia de com andos est lista para increm entar la variable c o n ta d o rC a li f ic a c io n e s para
indicar que se proces una calificacin y para leer la siguiente calificacin del usuario. La lnea 35 sum a 1 a
contadorC al i f ic a c io n e s , por lo q u e en cierto m om ento la condicin en w hil e se volver f a l se y term inar
el ciclo. D espus de ejecutarse esta instruccin, la scatcncia de com andos contina con u n a evaluacin de la
condicin en la instruccin whi le en la lnea 22. Si la condicin sigue siendo tr u e , se repiten las instrucciones
en las lneas 26 a 35. De lo contrario la secuencia de comandos contina la ejecucin con la primera instruccin en
secuencia despus del cuerpo del ciclo (es decir, la linca 39).

Calculo y visualizad n de los resultados


La lnea 39 asigna los resultados del clculo del prom edio a la variable prom edio. Las lneas 42 y 43 escriben una
lnea de texto de H T M L 5 en el docum ento para m ostrar la cadena "El prom edio de l a c la s e es "seg u id a
del valor de la variable prom edio, com o un elem ento <hl>.

Prueba del programa


Abra el docum ento de H T M L 5 en u n navegador Web para ejecutar la secuencia de com andos. Esta secuencia
analiza la entrada del usuario com o un entero. En la ejeaici n de ejem plo de la figura 7 .7 , la sum a de los valores

228

Capitulo 7

JavaScript: instrucciones de control I

introducidos (100. 88. 93, 55, 68. 77, 83, 95, 73 and 62) es 794. A unque la secuencia d e com andos considera
que todas las entradas son enteros, el clculo del prom edio en la secuencia de com andos no produce un entero.
Por el contrario, el clculo produce un nm ero d e p u n to B o tan te (es decir, un nm ero que contiene un p u n to
decim al). El prom edio de los 10 enteros introducidos por el usuario en este ejem plo es 79.4. Si su secuencia de
com andos requiere que el usuario introduzca nm eros de punto flotante, puede convertir la en trad a del usuario
de cadenas a nm eros m ediante la funcin p a r s e F lo a t de JavaScript, que introducirem os en la seccin 9.2.

Observacin de ingeniera de softw are 7.6


S la cadena que sepasa a p a r s e ln t contiene un valor numrico de punto flotante, p a r s e ln t slo trunca la
parte de punto flotante. Por ejemplo, la cadena 2 7 . 95" produce el entero 27, y la cadena -1 2 3 .4 5 produce
el entero -123. Si a cadena que te pasa a p a r s e ln t comienza con un valor numrico, p a r s e ln t devuelve Han
(no es un nmero). Si necesita saber ti p a r s e ln t devolvi NaN, JavaScript cuenta con aJuncin 1sNaN que
determina si su argumento tiene el valor NaNy, de ser asi, devuelve tru e ; de lo contrario devuelve fa Ise.

Nmeros de punto flotante


En realidadJavaScript representa a todos os nmeros en a memoria como nmeros de punto flotante. A m enudo este
tipo de nm eros se desarrollan a travs de la divisin, com o se m uestra en este ejem plo. Al dividir 10 entre 3,
el resultado es 3.3333333, en donde la secuencia de nm eros 3 se repite de m anera indefinida. 1.a com putadora
asigna slo una cantidad fija de espacio para oontener ese valor, por b q u e el v a b r de punto flotante alm acenado
s b puede ser una aproxim acin. A unque b s nm eros de p u n to flotante no siem pre son 100 por ciento pre
cisos, tienen num erosas aplicaciones. Por e je m p b , al hablar de una tem peratura corporal norm al de 98.6, no
necesitamos una precisin con un extenso nm ero de dgitos. C uando vemos la tem peratura en un term m etro
y la interpretam os com o 9 8 .6 , tal vez en realidad sea de 98.5999473210643. El caso aqu es que pocas aplicacio
nes requieren v abres d e p unto flotante d e una precisin tan alta, por b que llamar a este nm ero sim plem ente
com o 98.6 est bien para m uchas aplicaciones.

Una observacin sobre la entrada a travs de dilogos prom pt


En este eje m p b usamos d ib g o s prompt para o b ten er la entrada del usuario. Por b general d ich a entrada se
realiza m ediante elem entos de form ulario en un docum ento de H T M L 5 , pero esto requiere tcnicas adicionales
de secuencias de com andos que presentarem os a p a rtir del c a p tu b 9. Por ahora seguiremos usando d ib g o s

prompt.

7.9

Formulacin de algoritmos: repeticin controlada por centinela

Generalicemos el problem a del prom edio de una clase. C onsidere el siguiente problem a:

Desarrollar una secuencia de comandos que calcule el promedio de una clasey procese un nmero arbitrario
de calificaciones cada vez que se ejecute.
E n el prim er eje m p b del prom edio de una clase, se conoca el nm ero de calificaciones (10) de antem a
no. En este e je m p b no se indica cuntas calificaciones introducir el usuario. La secuencia de com andos debe
procesar un nm ero arbitrario de calificaciones. Cmo puede la secuencia determ inar cundo term inar de
introducir calificaciones? C m o sabr cundo calcular y m ostrar el prom edio de b clase?
Una m anera de resolver este problem a es utilizar un v a b r especial denom inado v alo r c e n tin e la (tam bin
Ibm ado valor d e seal, valor d e p ru e b a o valor de b a n d e ra ) para indicar el fin de la introduccin de datos.
El usuario escribe calificaciones hasta que se haya introducido el nm ero correcto de ellas. Despus, el usuario

7.9

Formulacin de algoritmos: repeticin controlada por centinela

229

escribe el valor centinela para indicar que se in tro d u jo la ltim a calificacin. A la repeticin controlada por
centinela a m enudo se le llam a re p etici n in d e fin id a , ya que el nm ero de repeticiones no se conoce antes de
que com ience b ejecucin del ciclo.
Sin duda, debe elegirse u n valor cen tin eb de tal form a q u e no pueda confundirse con un valor de entrada
perm itido. -1 es un valor centinela aceptable para este problema, puesto q u e norm alm ente las calificaciones
de un examen son enteros no negativos del 0 al 100. Por lo tan to , una ejecucin d e b secuencia d e com andos
para prom ediar una clase podra procesar una cadena de entradas com o 9 5 , 96, 7 5 , 74, 89 y - 1 . La secuencia
entonces calculara e im prim ira el prom edio de la d ase para las calificaciones 9 5 ,9 6 , 75, 74 y 89 (-1 es el valor
centineb, por lo q u e no debe entrar en el clculo del prom edio).

Desarrollo del algoritmo en pseudocdigo cot el mtodo de refittamiento de arriba a abajo, paso a paso:
la cima y el prim er refinamiento
Desarro Ib rem os b secuencia de com andos para prom ediar clases con una tcnica llamada refin am ien to d e
a rrib a a ab ajo , paso a paso, b cual es esencial para el desarrollo de program as bien estructurados. Com enzam os
con una representacin en pseudocdigo de b cim a:

Determinar el promedio de a clase para el examen


La cim a es una sola instruccin que transm ite el propsito general d e b secuencia de com andos. C om o tal,
es en efecto b representacin completa de un programa. Por desgracia, b cim a pocas veces transm ite los detalles
suficientes com o para escribir el algoritm o en JavaScript. Por lo tanto, debemos com enzar un proceso de refi
nam iento. Primero dividiremos b cim a en una serie de tareas ms pequeas y b s enlistaremos en el o rd en en el
que se necesitan realizar, lo que arroja com o resultado el siguiente p rim e r refinam iento:

Inializar variables
Introducir, sumary contar tas calificaciones del examen
Calcular e imprimir el promedio de a dase
Aqu slo se utiliza b estructura de secuencia; los pasos listados deben ejecutarse en orden, uno tras otro.

Observacin de ingeniera de software 7.7


Cada refinamiento, asi como la cima ensi.es una especificacin completa del algoritmo; slo varia el nivel de!
detalle.

Cmo proceder a l segundo refittamiento


Para avanzar al siguiente nivel de refinam iento (es decir, el seg u n d o refin am ien to ), nos com prom etem os a usar
variables especficas. Necesitamos el toral actual de los nm eros, una cuenta de cuntos nm eros se han proce
sado, una variable para recibir la representacin en cadena de cada calificacin a m edida que el usuario las vaya
introduciendo, una variable para alm acenar el valor d e esa calificacin despus de convertirla en entero y una
variable para alm acenar el prom edio calcubdo. La instruccin en pseudocdigo

Inializar as variables
puede mejorarse com o sigue:

Inializar total en cero


Inializar contadorCalificaones en cero

230

Captulo 7

JavaScript: instrucciones de control I

Slo las variables total y contadorCalificaciones necesitan inicializarse antes de poder utilizarse; las variables
promedio, calificadort y valorCalificadon (para el prom edio calculado, la entrada del usuario y la representacin
entera de la calificacin, respectivamente) no necesitan inicializarse, ya que sus valores se determ inarn a m edida
que se calculen o introduzcan.
La instruccin en pseudocdigo

Jntrodudr, sumary contar as calificadones del examen


requiere una estructura de repeticin que introduzca cada calificacin en forma sucesiva. N o .sabemos de antem ano
cuntas calificaciones van a procesarse, por lo que utilizaremos la repeticin controladapor centinela. El usuario introduce
las calificaciones correctas, una a la vez. Despus de introducir la ltima calificacin, el usuario introduce el valor cen
tinela. La secuencia evala el valor centinela despus de que el usuario introduce cada calificacin y termina el ciclo al
encontrarse con el valor centinela. Entonces, el segundo refinamiento de la instruccin anterior en pseudocdigo sera

Redbir como entrada la primera calificadn (puede ser el centinela)


Mientras el usuario no haya introducido an el centinela
Sum ar esta calificadn a l total actual
Sum ar uno a l contador de calificadones
Redbir como entrada a siguiente calificadn (puede ser el centinela)
E n pseudocdigo no utilizam os llaves alrededor del pseudocdigo que form a el cuerpo de b estructura Mientras.
Sim plem ente aplicam os sangra al pseudocdigo bajo el Mientras para m ostrar q u e pertenece a esta instruccin.
D e nuevo, el pseudocdigo es tan slo una herram ienta inform al de desarrollo.
La instruccin en pseudocdigo

Calcular e im prim ir elpromedio de a clase


puede mejorarse de b siguiente manera;

Si el contador no es igual a cero


Asignar a l promedio el total dividido entre el contador
Im prim ir el promedio
De o contrario
Im prim ir "No se introdujeron calificadones"
D ebem os evaluar b posibilidad d e una d iv isi n en tre cero: un error lgico que, si no se detecta, hara que
la secuencia d e com andos produjera resultados invlidos. El segundo refinam iento com pleto del algoritm o en
pseudocdigo para el problem a del prom edio de una cbse se m uestra en b figura 7.8.

Tip para prevenir errores 7.1


Al realizar una divisin entre una expresin cuyo valor pudiera ser cero, debe evaluar explcitamente esta posi
bilidad y manejarla de manera apropiada en su secuencia de comandos (como imprimir un mensaje de error),
en vez de permitir que ocurra la divisin entre cero.
Observacin de Ingeniera de Software 7.8
Muchos algoritmos pueden dividirse lgicamente en tresfases: a de inicializacin, en donde se inializan
lis variables, la de procesamiento en donde se introducen los valores de los datosy se ajustan las variables
delprograma segn sea necesario, y la de terminacin, que calcub e imprime los resultados.

7.9

Formulacin de algoritmos: repeticin controlada por centinela

2 3 1

E l segundo refinamiento completo


El algoritm o en pseudocdigo d e b figura 7.8 resuelve el problem a ms general del prom edio de una dase. Este
algoritm o se desarroll despus de slo dos refinaciones. Algunas veces son necesarias ms refinaciones.
1

Inia ah zar total en cero


metalizar contadorCalificaciones en cero

Recibir como entrada a primera calificacin (puede ser el centinela)

7
8
9

10
11
12
13
14
13

Mientras el usuario no haya introducido an el centinela


Sumar esta calificacin al total actual
Sumar uno al contador de calificaciones
Recibir como entrada a siguiente calificacin(puede ser el centinela)
Si d contador no es igual a cero
Asignar alpromedio el total dividido entre el contador
Imprimir elpromedio
De lo contrario
Imprimir "No se introdujeron calificaciones"

Figura 7.8 | Repeticin controlada por centinela para resolver el problema del promedio de una clase.

Observacin de ingeniera de software 7.9


Termine elproceso de refinamiento de arriba a abajo, paso a paso, cuando haya especificado el algoritmo en
pseudocdigo con el detalle suficiente como para poder convertirlo en JavaScript. Asi, la implementacin
enJavaScript serpor lo general un proceso simpley directo.

Observacin de ingeniera de Software 7.10


la experiencia ha demostrado que la parte mds difcil de solucionar un problema en una computadora es
desarrollar el algoritmo para la solucin.

arai

Observacin de ingeniera de Software 7.11


Muchos programadores experimentados escriben secuencias de comandos sin siquiera usar herramientas de
desarrollo de secuencias de comandos como el pseudocdigo. En su opinin, su meta final es resolver elproblema
en u/u computadora y elpseudocdigo simplemente retarda la produccin de los resultados finales. Aunque este
mtodo pudierafuncionar para problemas sencillosy conocidos, tiende a ocasionar graves erroresy retrasos en
proyectos grandesy complejos.

Implementacin de la repeticin controlada por centinela para calcular el promedio de una clase
La figura 7 .9 muestra b secuencia de JavaScript y una ejecucin de ejemplo. A unque cada calificacin es un
entero, es probable que el clculo del prom edio produzca u n nm ero con un p u n to decim al (un nm ero real).
En este ejem plo vemos que las estructuras de control pueden apilarse una encim a d e b o tra (en secuencia),
as com o un nio apila bloques de construccin. Justo despus d e w h ile (lneas 29 a 43) va una instruccin
i f . . .e l se (fincas 4 6 a 55) en secuencia. G ran parte del cdigo en esta secuencia de com andos es idntico al
cdigo de b figura 7.7, por b que en este eje m p b nos concentrarem os en b s nuevas caractersticas.

232

Captulo 7

<!DOCTYPE html>

JavaScript: instrucciones de control I

3
4
3
6

7
8

9
10
11
12
13
14
13
16
17
18
19

<1 Fig. 7 .9 : promed1o2.html -->


< ! - - Repeticin c o ntro lada por c e n tin e la para c a l c u l a r e l promedio de una c l a s e . -->
<html>
<head>

<meta c h a r s e t * "u tf-8">


<title>Programa del promedio de una c la se: r e p e tic i n controlada por c e n t i n e l a < / t i t l e >
<scr1pt>
var
var
var
var
var

t o t a l ; / / suma de c a l i f i c a c i o n e s
con tado rC alificaclo nes; / / nmero de c a l i f i c a c i o n e s in troducidas
c a l i f i c a c i n ; / / c a l i f i c a c i n e s c r i t a por e l u su a rio (como cadena)
v a lo rC a lific a c io n ; / / v a l o r de l a c a l i f i c a c i n (c o n v e rtid o a e n te ro )
promedio; / / promedio de todas l a s c a l i f i c a c i o n e s

/ / Fase de i n i c i a l l z a c i n
t o t a l 0; / / b o rra r t o t a l
c o n tad o rC alificaclo n es = 0; / / p re p a ra r para i t e r a r

20

21
22
23
24
23
26
27
28
29
30
31
32
33
34
33

/ / Fase de procesamiento
/ / p e d ir l a en trad a y l e e r l a c a l i f i c a c i n del usuario
c a l i f i c a c i n = window.prompt(
"Escriba l a c a l i f i c a c i n e n te r a . -1 para s a l i r : " , "O" );
/ / c o n v e r tir c a l i f i c a c i n de cadena en en te ro
v a lo r C a lif ic a c io n = p a r s e l n t ( c a l i f i c a c i n ) ;
while ( v a lo rC a lific a c io n I - 1 )
{
/ / sumar v a lo rC a lific a c io n al t o ta l
t o t a l - t o t a l + v a lo rC a lific a c io n ;

I I sumar 1 a co ntado rC alificaeio nes


c o n ta d o rC alificaclo n es c o n ta d o rC alific a c io n es +

1;

36

37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
33

/ / p e d ir l a e n tra d a y l e e r c a l i f i c a c i n del usuario


c a l i f i c a c i n = window.prompt(
"Escriba l a c a l i f i c a c i n e n te r a . -1 para s a l i r : " , "0" );
/ / c o n v e r t ir c a l i f i c a c i n de cadena en e n te ro
v a lo rC a lific a c io n = p a r s e l n t ( c a l i f i c a c i n ) ;
} / / f i n de while
/ / Fase de terminacin
i f ( c o n ta d o rC alificaclo n es I 0 )
{
promedio = t o t a l / con tad o rC alificaclo n es;
/ / muestra el promedio de l a s c a l i f i c a c i o n e s de los exmenes
document.wr1teln(
<hl>E1 promedio de l a c la s e es " + promedio + "/hl" );
} / / f i n de i f

Figura 7.9 | Repeticin controlada por centinela para calcular el promedio de una clase (parte l de 2).

7.9

Formulacin de algoritmos: repeticin controlada por centinela

233

e ls e
document.writelnC <p>No se in tro d u jero n c a lific a c io n e s< /p > " );

34
33
36
37
36
39

</scr1pt>
</head> <bodyx/body>
</htl>
fete dlogo se muestra cuatro veces, la entrada
del usuario e s 9 7 .8 8 .7 2 y - I .

r
Knt U
i

-I p'# i*lr

..

Programad pom#<j*cC \
C
!_ SdKrt w j m w

>
|

rjrm p io j/c a p O 7/f 19O7 .0 9 / p ro m c d io 2 iitm l

|o t ' mtm
|

r t r c Sice Ge-lev, C j Im portado t Inftm ...

El p ro m e d io de la clase es 85.66666666666667

Figura 7.9 | Repeticin controlada por centinela para calcular el promedio de una clase (parte 7 de 2).
La linca 19 inicializa c o n ta d o rC a li f ic a c io n e s en 0, ya que an n o se han introducido calificaciones. Re
cuerde que la secuencia de com andos usa la repeticin controlada por centinela. Para m antener un registro preciso
del nm ero de calificaciones introducidas, la secuencia de com andos increm enta c o n ta d o rC a li f ic a c io n e s
slo despus de procesar un valor de calificacin vlido.

Comparacin entre la lgica de la secuencia de comatulas para la repeticin controlada por centinela y la
repeticin controlada por contador
Observe la diferencia en la lgica para b repeticin controlada por c e n tin e b en com paracin con b repeticin
controlada p o r contador en b figura 7.7. E n la repeticin controlada por contador, leemos un valor del usuario
durante cada iteracin del cuerpo de b instruccin w h ile para el nm ero especificado de iteraciones. En la re
peticin co n tro b d a por cen tin eb , leemos un valor (lneas 23 y 24) y lo convertim os en entero (lnea 27) antes
de q u e la secuencia d e com andos Uegue a wh11e. La secuencia d e com andos usa este valor para determ inar si el
flujo de control del program a debe entrar al cuerpo de b instruccin w h ile. Si b condicin d e w h ile es f a l s e
(es decir, el usuario introdujo el valor centineb com o b prim era calificacin), la secuencia de com andos ignora
d cuerpo de b instruccin w h ile (es decir, no se introdujeron calificaciones). Si b condicin es tr u e , el cuerpo
comienza a ejecutarse y procesa el valor introducido por el usuario (es decir, sum a el valor al t o t a l en b lnea 32).
Despus de procesar el valor, b secuencia de com andos increm enta c o n ta d o r C a lif ic a c io n e s en 1 (lnea
35), recibe com o enrrada b siguiente c a l i f i c a c i n del usuario (lincas 38 y 39) y la convierte en un entero
(linca 42) antes de que term ine el cuerpo d e b instruccin w h ile. C uando b secuencia de com andos se acerca
a la Ibve derecha d e cierre (}) del cuerpo en la lnea 4 3 . b ejecucin contina con b siguiente evaluacin de
b condicin d e w hil e (lnea 29), utilizando el nuevo valor que acaba de introducir el usuario para determ inar
si el cuerpo de b instruccin whi le debe ejecutarse o tra vez. C abe m encionar que el siguiente valor siem pre lo
introduce el usuario justo antes d e que la secuencia de com andos evale la condicin d e b instruccin w hile.

Captulo 7

234

JavaScript: instrucciones de control I

Este orden nos perm ite determ inar si el valor q u e acaba de introducir el usuario es el valor centinela antes de
procesarlo (es decir, q u e lo sum e al to t a l) . Si el valor introducido es el valor centinela, whi l e term ina y b se
cuencia de com andos no sum a el valor al t o t a l .
O bserve el bloque en el ciclo w h ile de la figura 7 .9 (lneas 30 a 43). Sin lasllaves, lasltimas tres ins
trucciones en el cuerpo del ciclo quedaran fu e ra de ste, provocando que elcdigo se interpretara d e manera
incorrecta, com o se indica a continuacin:

while ( v a lo r C a lif ic a c io n I - - 1 )
/ / sumar c a l i f i c a c i n a l t o ta l
t o t a l - t o t a l + v a lo rC a lific a c io n ;
/ / sumar 1 a l contador
c o n ta d o rC alific a c io n es = c o n ta d o rC alific a c io n es + 1;
/ / p e d ir entrada y l e e r c a l i f i c a c i n del usuario
c a l i f i c a c i n = window.prompt(
H Escriba l a c a l i f i c a c i n e n te ra . -1 para s a l i r : " , "0" );
/ / c o n v e r tir c a l i f i c a c i n de cadena a e n te ro
v a lo r C a lif ic a c io n p a r s e ln t ( c a l i f i c a c i n ) ;
Esta interpretacin ocasionara un ciclo infinito en la secuencia d e com andos si el usuario no introduce el centi
nela -1 com o el prim er valor introducido en las lneas 23 y 24 (es decir, antes de la instruccin whil e).

7.10

Formulacin de algoritmos: instrucciones de control anidadas

A hora resolvamos o tro problem a com pleto. Form ularem os una vez m is el algoritm o utilizando pseudocdigo y
el refinam iento de arriba a abajo, paso a paso, y despus escribirem os la secuencia de com andos correspondiente.
C onsidere el siguiente enunciado de un problema:

Una universidadofrece un amo que prepara a los estudiantes para el examen estatal de certificacin d d estado como
corredores de bienes races. El ao pasado, diez de bs estudiantes que completaron este amo tomaron el examen.
Como es de esperarse, la universidad desea saber qu tan bien se desempearon sus estudiantes en el examen. A usted
te leba pedido que escriba una secuencia de comandos para sintetizar os resultados. Se le dw una lista de estos 10
estudiantes. Junto a cada nombre hay un 1 escrito si el estudiante aprob el examen, o un 2 si b reprob.
Su secuencia de comandos debe analizar bs resultados del examen de b siguiente manera:
1. Introducir cada resultado de b prueba (es decir, un I o un 2). Mostrar el mensaje "Escriba el resultado" en
b pantalb, cada vez que b secuencia de comandos solicite otro m ultado de b prueba.
2. Contar el nmero de resultados de b prueba, de cada tipo.
3. Mostrar un m um en de bs resultados de b prueba, indicando el nmero de estudiantes que aprobaron y el
nmero de estudiantes que reprobaron.
4. Si ms de ocho estudiantes aprobaron el examen, imprim ir el mensaje Roo para el instructor
Despus de leer el enunciado del program a cuidadosam ente, hacemos las siguientes observaciones:
1. La secuencia de com andos debe procesar los resultados de la prueba para 10 estudiantes. Se utilizar
un ciclo controlado por contador.
2. C ada resultado de la prueba tiene u n valor num rico, ya sea 1 o 2. C ada vez que la secuencia de
com andos lee un resultado de la prueba, debe determ inar si el nm ero es 1 o 2. N osotros evaluamos
un 1 en nuestro algoritm o. Si el nm ero no es 1, suponem os que es un 2.

7.10

Formulacin de algoritmos: instrucciones de control anidadas

235

3 . Se utilizan dos contadores para llevar el registro de los resultados del examen: uno para contar el
nm ero d e estudiantes que aprobaron y uno para contar el nm ero de estudiantes que reprobaron.
Una vez que la secuencia de com andos ha procesado todos los resultados, debe decidir si ms de ocho estu
diantes aprobaron el examen. Veamos ahora el refinam iento de arriba a abajo, paso a paso. C om encem os con la
representacin del pseudocdigo de la cima:

A nalizar los resultados del examen y decidir si debe pagarse un bono o no


Una vez ms, es im portante enfatizar que la cim a es una representacin com pleta de la secuencia d e com an
dos, pero es probable que se necesiten varios refinam ientos antes de que el pseudocdigo pueda evolucionar de
m anera natural en JavaScript. N uestro prim er refinam iento es:

niciabzar variables
Introducir as 10 calificaciones del examen y contar los aprobados y reprobados
Im prim ir un resumen de os resultados del examen y decidir si debe pagarse un bono
Aqu tam bin, aun cuando tenem os una representacin de toda la secuencia de com andos, es necesario refi
nada. Ahora nos com prom etem os con variables especficas. Se necesitan contadores para registrar los aprobados
y reprobados; utilizarem os un contador para controlar el proceso d e los ciclos y necesitaremos una variable para
guardar b entrada del usuario. La instruccin en pseudocdigo

Iniciabzar variables
puede refinarsc de b siguiente manera:

Iniciabzar aprobados en cero


Iniciabzar reprobados en cero
Iniciabzar estudiante en uno
Observe que slo se i n id al izan los contadores para el nm ero d e aprobados, el nm ero de reprobados y el n
mero de estudiantes. La instruccin en pseudocdigo

Introducir las 10 cabficaones del examen y contar os aprobados y reprobados


requiere u n ciclo en el que se introduzca de m anera sucesiva el resultado de cada examen. A qu sabem os de an te
m ano que hay precisam ente 10 resultados del examen, por lo que es apropiado utilizar la repeticin controlada
por contador. D en tro del ciclo (es decir, anidado dentro del ciclo), una estructura de seleccin doble determ i
nar si cada rcsulrado del exam en es aprobado o reprobado, c increm entar el contador apropiado. Entonces, el
refinamiento de b instruccin anterior en pseudocdigo es

Mientras el contador de estudiantes sea menor o igual a 10


Recibir como entrada el siguiente resultado del examen
S i el estudiante aprob
Sumar uno a aprobados
De lo contrario
Sumar uno a reprobados
Sumar uno a l contador de estudiantes
Nademos usar lneas en blanco para aislar la estructura de control Si...D e lo contrario, lo cual m ejora b
legibilidad de b secuencia de com andos. La instruccin en pseudocdigo

Im prim ir un resumen de los resultados de los exmenes y decidir si debe pagarse un bono

236

Capitulo 7

JavaScript: instrucciones de control I

puede retinarse de la siguiente manera:


I m p r im ir e l n u m e r o d e a p r o b a d o s
I m p r im ir e l n m e r o d e re p ro b a d o s
S i m s d e o c lto e s tu d ia n te s a p r o b a r o n
I m p r im ir "B o n o p a r a e l in s tr u c to r

"

Segundo refinamiento completo en pseudocdigo y conversin a JavaScript


E l segundo refinamiento completo aparece en la figura 7.10. Observe que tambin se utilizan lneas en blanco
para separar la estructura M ie n tr a s y mejorar b legibilidad del programa.
1
2
3

I n ic ia liz a r a p ro b a d o s e n cero
I n ic ia liz a r re p ro b a d o s e n cero
I n ic ia l) z a r e s tu d ia n te e n u n o

4
3
6
7
8

M ie n tr a s e l c o n ta d o r d e e s tu d ia n te s sea m e n o r o ig u a l a d ie z
R e c ib ir c o m o e n tr a d a e l s ig u ie n te r e s u lta d o d e l e x a m e n
S i e l e s tu d ia n te a p r o b

10
11
12

S u m a r u n o a a p ro b a d o s
D e lo c o n tr a r io
S u m a r u n o a re p ro b a d o s
S u m a r u n o a l c o n ta d o r d e e s tu d ia n te s

13

14
13
16
17
18

I m p r im ir e l n m e r o d e a p ro b a d o s
I m p r im ir e l n m e r o d e re p ro b a d o s
S i m s d e o ch o e s tu d ia n te s a p r o b a r o n
I m p r im ir "B o n o p a r a e l in s tr u c to r "

Figura 7.10 | El pseudocdigo para el problema de los resultados del examen.


Ahora este pseudocdigo est lo bastante refinado como para convertirlo en JavaScript. En la figura 7.11
se muestra el cdigo de JavaScript y dos ejecuciones de ejemplo.

<!D0CTYPE html>

3
4
3

<! Fig. 7.11: a n a l i s i s .h t m l -->


< ! - - Calculo de lo s re su lta d o s de un examen. -->
<html>
<head>

<meta c h a rs e t = u tf-8 >

< title> A n& aacute;lisis de lo s resultados de un examen</title>


<script>

9
10

11
12
13
14
13

/ / in ic ia liza r
var aprobados
var reprobados
var estudiante
var resultado;

v a r ia b le s en d eclaraciones
0; / / nmero de aprobados
= 0; / / nmero de reprobados
= 1 ; / / contador de e stu d ia n te s
/ / el re su lta d o de un examen

Figura 7 .1 1 | Clculo de los resultados de un examen (parte I de 3).

7.10

16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33

Formulacin de algoritmos: instrucciones de control anidadas

/ / procesar 10 e stu d ia n te s; c i c l o con tro lad o por contador


while ( e s tu d ia n te <- 10 )
{
resultado * window.prompt( Escriba el resultado (l=aprobado,2=reprobado)M, 0" );
i f ( re s u lta d o == 1" )
aprobados - aprobados + 1;
e ls e
reprobados reprobados + 1;
e s tu d ia n te - e s tu d ia n t e + 1;
> / / f i n de while
/ / f a s e de terminacin
document .wri t e l n ( <hl>Resultados del exanen</hl> );
do cum ent.w riteln( " <p>Aprobados:" + aprobados
" Reprobados: + reprobados + M< /p > " );

34

33
36
37
38
39
40

237

i f ( aprobados > 8 )
document.writ e l n ( <p>Bono para e l in stru c to r< /p > " );
< /sc rip t>
</head> <bodyx/body>
< /ht*l>

a) Este dogo se muestra 10


veces. La entrada del usuario
es 1.2. I. 1.1. 1 .1 .1.1 y I.

b) Nueve estudantes apro


taron y ir o reprob, por lo
<^ie se imprime'Bono para
1 I n s t r u c t o r " .

-------------------------------------------------------------------------------------------------------------A n fa n * le t rctu lU d o t

C
Vf04

file ///X /c jc m p lo s /c ^ p 0 7 /f.9 0 7 .1 1 /o n a li$ v h tm l


,Vwfc S ( o f t c r y

Q Im p o n g o 4* H m .

R esultados del exam en


Api epodos 9. Repcobados 1
Booo

c) Fste d iio g o se muestra 10


veces. La entrada del usuario
es 1.2. I. 2 . 2 . I. 2 . 2 . 1 y I.

d sulnxtc*

benb e<rufttdo \l*pfcO*do2rfpfobNcj

7"
js

sa fe

Figura 7 .11 | Clculo de los resultados de un examen (parte 2 de 3)

238

Captulo 7

JavaScript: instrucciones de control I

;----------------------------------- *
AnjfcSB *05r&'MtO- * \ ^ _

d) Gnco estudiantes aprobaron


y onco reprobaron. por lo que el
instructor no recibe bono.

C
j

3 fley//X/e^tnplos/cap07/fig07,ll/dfWltSS.html |M

Ubo% iu9rtdei

.Vt S I** C a te y

I n je rta d o

~
=

fa te lL .

R e s u l t a d o s del e x a m e n
Aprobado* 5. Reprobado* 5

Figura 7.11 | Clculo de los resultados de un examen (parte 3 de 3).


Las lneas 12 a 15 declaran las variables utilizadas para procesar los resultados del examen. Cabe mencionar que
JavaScript perm ite incorporar la cializacin de variables en las declaraciones (a aprobados se le asigna O, a re p ro
bados se le asigna Oy a e s tu d ia n te se le asigna l). Algunas secuencias d e comandos pueden requerir una rcinicializacin al principio de cada repeticin; por lo general, dicha rcinicializacin se realiza en las instruccionesdc asignacin.
El procesam iento de los resultados del examen ocurre en la instruccin whl l e de las lneas 18 a 28. Observe
que i f . . . e 1se en las lneas 22 a 25 en el ciclo se evala slo si el resultado del exam en foe 1; asume que todos
los dem s resultados del examen son 2. Por lo general es necesario validar los valores introducidos por el usuario
(es decir, determ inar si los valores son correctos).

Buena prctica de programacin 7.4


Al recibir valores introducidospor el usuario, valide a entrada para asegurar que sea correcta. Si un valor de
entrada es incorrecto, pida al usuario que introduzca el valor de nueva Los controles de autovalidacin de
HTML5 pueden ayudarle a verificar elformato de sus datos, pero tal vez necesite pruebas adicionales para
verificar que los valores con un formato apropiado tengan sentido en el contato de su aplicacin.

7.11

Operadores de asignacin

JavaScript cuenta con varios operadores de asignacin adicionales (conocidos com o o p e ra d o re s d e asignacin
co m p u esto s) para abreviar las expresiones de asignacin. Por ejem plo, la instruccin
c - c + 3;
puede abreviarse con el o p e ra d o r d e asig n aci n d e su m a
C

as

3;

El operador + - sum a el valor de la expresin a la derecha del operador con el valor d e la variable a la izquierda del
operado i; y almacena el resultado en la variable a la izquierda del operador. C ualquier instruccin de la form a

variable - variable operador expresin;


en d o n d e operadores uno de los operadores binarios
lante en el libro), puede escribirse de la siguiente forma:

variable operador= expresin;

o %(o alguno de los otros que veremos ms ade

7.12

Operadores de incremento y decremento

239

Ib r lo tanto, la expresin de asignacin c + - 3 sum a 3 a c. La figura 7 .1 2 m uestra los operadores de


asignacin aritm ticos com puestos, algunas expresiones de ejemplo en las que se utilizan estos operadores y las
explicaciones de lo que estos operadores hacen.
Operador de
asignacin

Valor inicial
dla variable

Expresin de
ejemplo

Explicacin

Asignacin

+-

C- 3

c - c + 7

10 a c

-e s

d = 5

d - 4

d = d - 4

la d

e - 4

e *- 5

e - e * 5

20 a e

/-

f - 6

f /- 3

f - f / 3

2af

%=

g - 12

g SU 9

g * g %9

3 ag

Figura 7.12 | Operadores de asignacin aritmticos.

7.12

Operadores de incremento y decremento

JavaScript cuenta con el o p e ra d o r d e in c re m e n to unario (++) y el o p e ra d o r d e d e c rc m e n to uara ( - - ) (sinetizados en la figura 7-13). Si una variable c se increm enta en 1, es posible usar el operador de increm ento ++
en lugar de usar la expresin c c + 1 o c+ L Si un operador de increm ento o decrem ento se coloca antes
de una variable, se le llam a o p e ra d o r d e p re in c re m c n to o p rcd ccrcm en to , respectivamente. Si un operador de
increm ento o decrcm ento se coloca despus de una variable, se le llama o p e ra d o r d e p o stin c re m e n to o p o std ecrem ento, respectivamente.
Operador
++

Ejemplo
M-a

++

---

---

K b~~

Se llama

Explicacin

prrincrcmenro

1ncrcmentar a en 1, despus utilizar d nuevo valor de


a en b expresin en que esta variable reside.

post incremento

Usar d valor acrual de a en la expresin en b que


esta variable reside, despus incrementar a en 1.

prcdccrcmento

Dccremcntar b en 1, despus util7.ar d nuevo valor de


b en b expresin en que esta variable reside.

postdccrcmcnto

Usar d valor acrual de b en la expresin en b que


esta variable reside, despus docrcmeruar b en I .

Figura 7.13 | Operadores de incremento y decrcmento.


Al preincrem entar (o predecrem ontar) una variable, la secuencia d e com andos increm enta (decrem enta)
b variable por 1 y luego usa el nuevo valor de b variable en b expresin en b que aparece. Al postincrem entar
(postdccrem cntar) b variable, b secuencia de com andos usa el valor actual de la variable en b expresin en b
que aparece, despus increm enta (decrem enta) b variable por 1.

240

Captulo 7

JavaScript: instrucciones de control I

<!DOCTYPE htnl>

<1-- F i g . 7.14: 1ncremento.html >


< ! Preincremento y postincrem ento. -->
<html>
<head>
<eta c h a rs e t "utf-8">
8
<title> Preincrem ento y p o stin c re m en to < /title>
<scr1pt>
9
3
4
3
6
7

10
11
12
13

v a r c;
C = S;

14
13
16
17
18
19

docum ent.w riteln( <h3>Postincremento</h3> );


document.writelnC <p>" + c ) / / imprime 5
/ / imprime 5 y luego incrementa
docum ent.w riteln( + c++ );
docum ent.w riteln( + c </p> ) ; / / imprime 6

20

C - 5;

21

document.writelnC ,'<h3>Preincremento</h3>" ) ;
document.writelnC <p>M c ); / / imprime 5
/ / incrementa y luego imprime 6
docum ent.w riteln( " + ++c );
docum ent.w riteln( *' + c + </p>" ); / / impri e 6

22
23
24
23
26
27
28
29

</script>
</ hea d><body></ body >
</html>

y pottmc
C
L

x ^

L' lle7 //X V ejem p lo s/cap 0 7 /fi^

S xio t e*9 #o 4 o t

[2 W *b SJk * GlWry

PoMincremento
556

Preincremento
566

Figura 7.13 | Preincremento y postincremento.


La secuencia de com andos en la figura 7.14 muestra b diferencia entre las versiones prcincrem cnto y postncrem ento del operador de increm ento ++. Al postincrem tentar b variable c, sta se increm enta despus de usarb
en la Uamada al m todo d o cu m en t.w riteln (lnea 17). Al preincrementar b variable c, sta se increm enta antes de
usarb en b llamada al m todo docum ent.w ri te l n (lnea 24). La secuencia de com andos muestra el valor de c antes
y despus d e usar el operador ++. El operador de decrcm ento (- -) funciona de m anera sim ibr.

Buena prctica de programacin 7.5


cuestin de legibil(Lid, los operadores nanos deben colocarse enseguida de sus operandos. sin espacios entre
ellos.
Ibr

7.12

Operadores de incremento y decremento

241

Las tres instrucciones de asignacin de b figura 7.11 (lneas 23, 25 y 27, respectivamente):

aprobados - aprobados 1;
reprobados = reprobados + 1;
e s tu d ia n te - e s tu d ia n te + 1;
pueden escribirse en form a ms concisa con operadores de asignacin com puestos, de b siguiente manera:

aprobados +- 1;
reprobados += 1;
e s tu d ia n te * - 1;
oon operadores de preincrem ento de b siguiente forma:

++aprobados;
reprobados;
estu d ian te;
o con operadores de postincrem ento de b siguiente forma:

aprobados-H-;
reprobados++;
estud1ante++;
Al increm entar o decrem entar una variable q u e se encuentre en una instruccin p o r s sola, las formas
preincrem ento y postincrem ento tienen el mismo efecto, al igual que b s form as predecrem ento y postdecrem ento. Solam ente cuando una variable aparece en el contexto de una expresin ms grande es cuando los operadores
preincrem ento y postdecrem ento tienen distintos efectos sobre esa variable. Los operadores de predecrem ento
y postdccrcm cnto se com portan de m anera similar.

Error comn de programacin 7.4


jF

Tratar de usar ei operador de incremento o decremento en una expresin que no sea una expresin del
lado izquierdo (lo que se conoce comnmente como Ivalue^ es un error de sintaxis. Una expresin del lado
izquierdo es una variable o expresin que puede aparecer en el lado izquierdo de una operacin de asignacin.
Ibr ejemplo, escribir **(x 1 ) es un error de sintaxis, ya que (x l) no es una expresin del lado izquierdo.

La figura 7.15 lista la precedencia y b asociatividad d e los operadores introducidos hasta este punto. Los
operadores se m uestran de arriba a abajo, en orden descendente de precedencia. La segunda colum na describe
h asociatividad de los operadores en cada nivel de precedencia. El operador condicional (?:X los operadores
unarios de increm ento (+) y decrcm ento
y los operadores de asignacin , + -,
/ y X- se asocian
de derecha a izquierda. Todos los dems operadores que se m uestran aqu se asocian de izquierda a derecha. La
tercera colum na nom bra los grupos de operadores.
Operador

Asociatividad

Tipo

derecha a izquierda

unario

<

izquierda a derecha

m ultiplicativo

<a

izquierda a derecha
izquierda a derecha

aditivo
rebeional

Figura 7.15 | Precedencia y asociatividad de los operadores vistos hasta ahora (parte I de 2)

242

Capitulo 7

JavaScript: instrucciones de control I

Operador
s=b

!=

===

1==

?:
=

+ = - = * = / = % =

Asociatividad

Tipo

izquierda a derecha

igualdad

derocha a izquicrd

condicional

derocha a izquierda

asignacin

Figura 7.15 | Precedencia y asociatividad de los operadores vistos hasta ahora (parte 2 de 2).

7.13

Recursos Web

w w w .d e ite l.c o m /Ja v a S c rip t/


El C entro d e recursos de JavaScript d e D eitel contiene vnculos a algunos de los mejores recursos de JavaScript
en Web. Ah encontrar vnculos clasificados a herram ientas, generadores de cdigo, foros, libros, bibliotecas,
marcos de trabajo de JavaScript y ms. Revise tam bin los tutoriaies para todos los niveles de experiencia, desde
introductorio hasta avanzado. Asegrese de visitar los C entros de recursos relacionados sobre H T M L 5 (www.
d e i t e l .com /htm l 5 / ) y C SS3 (w w w .d eite l. co m /css3 /).

Resumen
Seccin 7.2 Algoritmos
Cualquier problema computablc puede resolverse mediante la ejecucin de una serie de acciones en un orden especifico.
Un procedimiento (pg. 215) para resolver un problema en trminos de las acciones (pg. 21 5) a ejecutar y d orden en
el que se van a ejecutar las acciones (pg. 215) se llama algoritmo (pg. 215).
Al proceso de especificar el orden en el que van a ejecutarse las acciones en un programa de computadora se le conoce
como control del programa (pg. 215).

Seccin 7 3 Pseudocdigo
El pseudocdigo (pg. 215) es un lenguaje informal que nos ayuda a desarrollar algoritmos.
El pseudocdigo cuidadosamente preparado puede convertirse con facilidad en su correspondiente sccucncb de comandos.

Seccin 7.4 Instrucciones de control

Por lo general, las instrucciones en una secuencia de comandos se ejecutan, una despus de la otra, en el orden en el que
estn escritas. A este proceso se le conoce como ejecucin sccucncial (pg. 215).
Varias instrucciones de JavaScript nos permiten especificar que la siguiente instruccin a ejecutar no es necesariamente
la siguiente en la secuencia. A esto se le conoce como transferencia de control (pg. 216).
Todas las secuencias de comandos podran escribirse en trminos de slo tres estructuras de control: la de sccucncb
(pg. 216). la de seleccin (pg. 216) y la de repeticin (pg. 216).
I h diagrama de flujo (pg. 216) es una representacin grfica de un algoritmo o de una parte del mismo. Los diagramas
de (lujo se dibujan medianre el uso de ciertos smbolos de propsito especial, como rectngulos (pg. 216), rombos
(pg. 217). valos (pg. 216) y crculos pequeos (pg. 216); estos smbolos se conectan mcdhntc flechas llamadas
lneas de flujo (pg. 216), que indican d orden en el que se ejecutan las acciones d d algoritmo.
JavaScript cuenta con tres estructuras de seleccin. La instruccin de seleccin i f (pg. 217) realiza una accin slo si una
condicin es verdadera. 1 f. . .e l se realiza una accin si una condicin es verdadera y una accin diferente si la condicin es
falsa. La instruccin de seleccin switch realiza una de muchas acciones distintas, dependiendo dd valor de una expresin.
JavaScript cuenta con cuatro instmeeiones de repeticin: wrhile (pg. 217), do. -while, for y fo r. . i n .

Resumen

243

Las palabras clave (pg. 217) no pueden usarse como idcmificadorcs (por ejemplo, para los nombres de variables).
Las mientras de una sola enriada /una sola salida (pg. 218) facilitan la creacin de secuencias de comandos, las
instrucciones de control se unen entre s al conectar el punto de salida de una instruccin de control con d punto de
entrada de la siguiente. A este procedimiento se le conoce como apilamiento de instrucciones de control (pg. 218). Slo
hay una forma de conectar las instrucciones de control: anidamiento de instrucciones de control (pg. 218).

Seccin 7.5 Instruccin de seleccin 1 f


E l intrprete de JavaScript ignora los caracteres de espacio en blanco: espacios, fabuladores y saltos de lnea que se uti
lizan para sangra y cspacbmicnto vertical. Los programadores insertan caracteres de espacio en bbnco para mejorar la
daridad de las secuencias de comandos.
Es posible tomar una decisin en cualquier expresin que se evale como true o f al se (pg. 218).
La convencin de sangra que sdeccione debe aplicarse con cuidado en todas sus secuencias de comandos. Es difcil leer
secuencias de comandos que no usen convenciones de espactamiento uniforme.
9

Seccin 7.6 Instruccin de seleccin 1 f . . . e l s e


9

El operador condicional (?:; pg. 220) est muy relacionado con la instruccin 1f.. .else. El operador ?: es d nico
operador temario de JavaScript: recibe tres opaandos. Los opetandos junto con d operador ?: forman una expresin
condicional (pg. 220). El primer operando es una expresin boolcana, d segundo es d valor de la expresin condicio
nal si la expresin boolcana se evala como verdadera y d rocero es el valor de la expresin condicional si la expresin
boolcana se evala como falsa.
Las instrucciones i f .. .else anidadas (pg. 220) evalan casos mltiples al colocar instrucciones i f . . .el se dentro de
orras estructuras if..else.
El intrprete de JavaScript siempre asocia un el se con el 11 anterior* a menos que se le indique lo contrario mediante
b colocacin de llaves ({}).
La instruccin de sdcccin 1f espera slo una instruccin en su cuerpo. Rara incluir varas instrucciones en el cuerpo,
encierre bs instrucciones en un bloque (pg. 222) ddimitado por llaves ({ y }).
Un error lgico (pg. 223) tiene su efecto en tiempo de ejecucin. Un error lgico fatal (pg. 223) provoca que una
secuencb de comandos falle y termine antes de tiempo. Un error lgico no fatal (pg. 223) permite que una secuencb
de comandos siga ejecutndose, pero sta produce resultados incorrectas.

Seccin 7 .7 Instruccin de repeticin while


9

la instruccin de repeticin while nos permite especificar que se va a repetir una accin mientras cierta condicin siga
siendo verdadera.

Seccin 7.8 Formulacin de algoritmos: repeticin controlada por contador


A la repeticin controlada por contador (pg. 225) se le conoce comnmente como repeticin definida, ya que el n
mero de repeticiones se conoce desde antes que empiece a ejecutarse el ciclo.
Las variables sin inieblizar que se utilizan en clculos matemticos producen errores lgicos y el valor fiaN (no es un
nmero).
JavaScript representa a todos los nmeros como de punto flotante en b memoria. A menudo los nmeros de punco
flotante (pg. 228) se desarrollan por modio de b divisin. La computadora asigna slo una cantidad fija de espacio para
guardar dicho valor, por lo que d valor de punto flotante almacenado slo puede ser una aproximacin.

Seccin 7.9: Formulacin de algoritmos: repeticin controlada por un cefttinela


En b repeticin controbda por un centineb. un valor especial conocido como valor centineb (tambin ibmado valor de
seal, valor de prueba o valor de bandera, pg. 228) indica d fin de b entrada de datos. A b repeticin controbda por
un centineb se le conoce comnmente como repeticin indefinida (pg. 229), debido a que no se conoce de antemano
d nmero de repeticiones.
Es necesario degir un valor ccntinda que no pueda confundirse con un valor de entrada aceptable.

244

Captulo 7

JavaScript: instrucciones de control I

El mtodo de refinamiento de arriba a abajo, paso a paso (pg. 229), es una tcnica esencial para el desarrollo de algo
ritmos bien estructurados. La cima (pg. 229) es una sola instruccin que transmite el propsito general de la secuencia
de comandos. Como tal, la cima es, en efecto, una representacin completa de una secuencia de comandos. El proceso de
refinamiento paso a paso divide la cima en una serie de tareas ms pequeas. Termine el proceso de refinamiento arribaabajo, paso a paso cuando se especifique el algoritmo de pseudocdigo con ef suficiente detalle para que usted pueda
convertir d pseudocdigo en JavaScript.

Seccin 7.10 Formulacin de algoritmos: instrucciones de control anidadas

Es posible anidar las instrucciones de control para realizar tareas mis complejas.

Seccin 7 .11 Operadores de asignacin


JavaScript cuenta con los operadores de asignacin aritmticos
comunes de expresiones.

/- y

(pg. 238), que abrevian ciertos tipos

Seccin 7.12 Operadores de incremento y decremento

El operador de incremento + (pg. 239) y d operador de decrcmento -- (pg. 239) incrementan o dccremen tan una
variable por 1. respectivamente. Si el operador est antes de la variable, sta se incrementa o dccremenea por I y luego
se usa en su expresin. Si el operador va despus de la variable, sta se utiliza en su expresin y luego se incrementa o
dccrcmcnta por 1.

Ejercicios de autoevaluacin
7.1

Complete los siguientes enunciados:


a) Todas las secuencias de comandos pueden escribirse en trminos de tres tipos de estructuras de control:

-------------. ------------ y -------------


b) La instruccin de seleccin doble____________ se utiliza para ejecutar una accin cuando una condicin es ver
dadera, y otra acdn cuando esa condicin es falsa.
c) Al proceso de repetir un conjunto de instrucciones un nmero especfico de veces se le llama repeticin
^

d) Cuando no s e sabe de anremano cuntas veces se repetir un conjunto de instrucciones, se puede usar un valor
_____________(o un_____________ , _____________ o _____________ ) para terminar la repeticin.
7.2
7.3

7.4

7.5

Escriba cuatro instrucciones de JavaScript que sumen i , cada una. a la variable x, que contiene un nmero.
Escriba instrucciones en JavaScript para realizar cada una de las siguientes tareas:
a) Asignar la suma de x y y a z, c incrementar el valor de x en 1 despus dd clculo. Usar slo una instruccin.
b) Evaluar si d valor de b variable cuenta es mayor que 10. De ser as, imprimir "Cuenta es nayor que 10".
c) Decremcntar b variable x en 1, luego rcstarb a la variable total. Usar slo una instruccin.
d) Calcubr d residuo despus de dividir q entre divisor y asignar d resultado a q. Escriba esta instruccin de dos
maneras distintas.
Escriba una instruccin en JavaScript para realizar cada una de bs siguientes tareas:
a) Declarar las variables suma y x.
b) Asignar l a b variable x.
c) Asignar 0a b variable suma.
d) Sumar b variable x a suma y asignar d resultado a b variable suma,
c) Imprimir La suma es: seguido del valor de b variable suma.
Combine bs instrucciones que escribi en d ejercicio 7.4 para formar una secuencia de comandos que calcule e im
prima b suma de los enteros del 1 al 10. Use b instruccin whlle para iterar a travs debs instrucciones de clculo
c incremento. El ciclo debe terminar cuando el valor de x se vudva 11.

Respuestas a los ejercicios de autoevaluacin

7.6

245

Determine d valor de cada variable despus de realizar d clculo. Suponga que, cuando se empieza a ejecutar cada
instruccin, todas las variables tienen el valor entero 5.
a) producto * b ) c o c i e n te / +xx;

7.7

Identifique y corrija los erroresen cada uno de los siguientes segmentos de cdigo:

a) mH11 ( c <- S ) {
p ro d u c to * - c;
++c:
b ) 1 f ( genero 1 )
d o c u m e n t . w r l t e l n ( M u j e r " ) ;

else;
docum ent.w rlteln(

7.8

Hombre" ) ;

Qu est mal en b .siguiente instruccin de repeticin


while ( 7 >- 0 )
su m a

le?

Respuestas a los ejercicios de autoevaluacin


7.1
7.2

a) Secuencia, seleccin y repeticin. b ) 1 f ...e l s e . c) controlada por contador (o definida). d)centinela, de seal,
de bandera o de prueba.
x - x 1;
x *m 1;
+x;
x* * ;

7.3

a) z x+* y;

7.4

b) 1f ( cuenta > 10 )
document.wr1teln( "Cuenta es mayor que 10 ) ;
c) t o t a l - - x:
d) q % d iv iso r;
q q X divisor;
a) var suma, x;
b) x - 1;
c) suna - 0 ;
d) suna
x; o suma - suma x;
e) document.wr1teln( La suma es:
suma );
Esta es b solucin:

7.5
1

< IOOCTYPE html

3
4
3
6
7
8
9

10
II
12
13
14

<1 E j e r c i d o 7 . 5 : e J 0 7 _ 0 S .h t n l >
< h ta l>
< e t* c K a r s e t - u l f - a "
< t 1 t l o S w a r l o s e n t e r o s del 1 al l 0 < / t 1 t l e >
< scr1pt>
v a r suna; / / almacena el t o t a l
v a r x; / / v a r i a b l e c o n ta d o r de c o n tro l
x - l;
suma - 0 ;

246

Captulo 7

JavaScript instrucciones de control I

15

w h ile ( x < - 10 )

i*

17

sima 4- x;

18

4*x;

19

} / / fin de while

20

d o c u m e n t.w r 1 te ln ( "La suma es: suma ) ;

21
22
23

</script
</head><body></body>
< / h te l>

4-

filey//C:/books/2011/IW3HTP5/examples/ch08/ex08_05/'ft ^

The sum is- 55

7.6

a ) pro d u cto - 2 5 , x - 6;
b ) c o c i e n t e - 0 . 8 3 3 3 3 3 . . x - 6;

7.7

a) m>n falta la llave derecha de cierre d d cuerpo de la instruccin while.


Correccin: Agregar una llave derecha de cierre despus de la instruccin +4c;.
b) E rror El ; despus de el se produce un error lgico. La segunda instruccin de salida siempre se ejecutar.
Correccin: Quitar el punto y coma despus de el se.
El valor de la variable r nunca se cambia en d cuerpo de la nsrruccin while. Por lo tanto, si la condicin de con
tinuacin de ciclo ( 7 >- 0 ) es verdadera, se crea un clo infinito. Para evitar que ocurra un cido infinito, 7 debe
docremenearse de manera que en un momento dado se vudva menor que 0.

7.8

Ejercicios
7.9

Identifique y corrija los errores en cada uno de los siguientes segmentos de cdigo. [Notas puede haber ms de un
error en cada fragmento; a menos que haya declaraciones presentes, suponga que todas las variables estn declaradas
e inieblizadas correctamente].
a ) 1 f ( edad 6 5 ) ;
do cu m en t.w r1te 1n ( "Edad e s a a y o r o Ig u al que 6 5 " ) ;

el s e
d o c u m e n t.w r1 te ln ( "Edad es m o r que 6S ) ;

b) v a r x 1, to ta l;
while ( x <m 1 0 )

(
to ta l x;
x;

}
c) v a r x 1;
v a r t o t a l - 0;

while ( x <- 100 )


to tal
x;
d) v a r y - 5;

x;

while ( y > 0 )

{
d o c u m e n t.w r1 te ln ( y ) ;

44y;

Ejercicios

7.10

247

Si n e jecu tarla, d e te r m in e lo q u e im p rim e esta secu en cia d e c o m a n d o s :

1 <! DOCTYPE h t a l >


2

3 <1 E j e r c i c i o 7 . 1 0 : e j 0 7 _ 1 0 . h t n l >

4 <hta1>
5
4
7
8

<head>
< M ta c h a r s e t - " u t f - 8 >
< t i t l a > S e c u e n c i a de comandos i s t e r i o s a < / t i t l a >
<scr1pt>

f
10
11
12
13
14
13

v a r y;
v a r x - 1;
v a r t o t a l - 0;
w h ila ( x < - 10 )
{

16
17
18
I
20
21
22
23
24
25

y x * x;
docum ent.w ritelnC "<p y </P>" ) :
t o t a l - y;
x;
) / / f i n de w hile
d o c u n e n t.w r ite ln C <p>El t o t a l a s + t o t a l "</p>" ) ;
< /script>
</had><body></body>

26 </htm
l>

Pira los ejercicios 7.11 a 7.14 realice cada uno de ios siguientes pasos:
a) Lea el enunciado del problema.
b) Formule el algpritmo usando pseudocdigo y el refinamiento arriba-abajo, paso a paso.
c) Defina el algoriemo en JavaScript.
d) Pruebe, depure y ejecute d JavaScript.
c) Procese u ts conjuntos completos de datos.
7.11 Los conductores se preocupan acerca del kilometraje de sus automviles. Un conductor ha llevado d control de va
rios rea bastee im icntos de gasolina, registrando los kilmetros conducidos y los litros usados en cada viaje. Desarrolle
una secuencia de onmandns que reciba como entrada los kilmetros conducidas y los litros usados por cada viaje. 1.a
secuencia de comandos debe calcular y producir texto de HTML5 que muestre d nmero de kilmetros por litro
obtenidos en cada viaje, y debe imprimir d total de kilmetros por litro obtenidos en todos los rea bastee im icntos
hasta este punto. Use dilogos prompt para obtener los datos del usuario.
7.12 Desarrolle una secuencia de comandos que determine si alguno de los clientes de una tienda de departamentos se ha
excedido del limite de crdito en una cuenta. Pira cada cliente se tienen los siguientes datos:
a) 1 nmero de cuenta.
b) El saldo al inicio del mes.
c) El total de todos los artculos cargados por d cliente en el mes.
d) El total de todos los crditos aplicados a la cuenta dd cliente en el mes.
e) 1 lmite de crdito permitido.
La secuencia de comandos debe recibir como entrada cada uno de estos datos desde un dilogo pronpt como
entero, debe calcular d nuevo saldo (= saldo inicial cargos - crditos), mostrar d nuevo balance y determinar si ste
excede d lmite de crdito d d cliente. Para los clientes cuyo lmite de crdito sea excedido, la secuencia de comandos
debe producir texto de H TM L5 que muestre d mensaje Se excedi d lmite de su crdito.
7.13 Una empresa grande paga a sus vendedores mediante comisiones. Los vendedores reciben $200 por semana, ms el
9 por ciento de sus ventas brutas durante esa semana. Por ejemplo, un vendedor que vende $5000 de mercanca en

248

Capitulo 7

JavaScript: instrucciones de control I

una sanana, recibe $200 ms el 9 por ciento de 5000, o un total de $650. Usted acaba de recibir una lista de los
artculos vendidos por cada vendedor. Los valores de estos artculos son los siguientes:
A r tic u lo

V alor

2 3 9 .9 9

1 2 9 .7 5

9 9 .9 5

3 5 0 .8 9

Desarrolle una secuencia de comandos que reciba como entrada los artculos vendidos por un vendedor durante la
ltima semana, que calcule los ingresos de ese vendedor y produzca texto de HTML5 para mostrar los ingresos de
esc vendedor.
7.14 Desarrolle una secuencia de comandos que determine el sueldo bruto para cada uno de tres empleados. La empresa
paga la cuota normal* en las primeras 40 horas de trabajo de cada empleado, y paga cuota y media en todas bs
horas trabajadas que excedan de 40. Usted recibe una lista de los empleados de b empresa, el nmero de horas que
trabaj cada uno b semana pasada y b tarifa por horas de cada empleado. Su programa debe recibir como entrada
esta informacin para cada empleado, determinar d suddo bruto de cada uno y producir texto de HTML5 que
muestre esc sueldo bruto. Utilice dilogos pronpt pata introducir los datos.
7.15 El proceso de encontrar el valor rm is g ra n d e (es dedr, d mximo de un grupo de valores) se utiliza con frecuencia en
aplicaciones de computadora. Por ejemplo, tina seareoda de datos para determinare! ganador do un concurso de ventas
recibe como entrada el nmero de unidades vendidas por cada vendedor. El que haya vendido ms unidades es d que
gana d concurso. Escriba un algoritmo en pseudocdigo y despus una secuencia de comandos que recibacomo entrada
una serie de 10 nmeros de un solo dgito como caracteres, determine d mayor de los nmeros y produzca un mensaje
que muestre cl nmero ms grande. Su secuencia de comandos debe utilizar bs siguientes tres variables:
a) contador: un contador para contar hasta 10 (es decir, para llevar el registro de cuntos nmeros se han introdu
cido, y para dacrminar que se hayan procesado los 10 nmeros).
b) numero: d entero ms reciente introducido por d usuario.
c) nayor: d nmero ms grande encontrado hasta ahora.
7.16 Escriba una secuencia de comandos que utilice ciclos para imprimir b siguiente tabb de valores. Muestre los resul
tados en una tabb de HTML5. Use CSS para centrar los datos en cada columna.
0 SoKkio*416
C
L';

^
iieZ/ZX/ejemplos/cap-

SitKH ugtnc*

> 10* VIOO'N

W *

Gfttor, O

or>8 . 1 6 .ht'

im p o iU d c <J

1000N

10

100 j

1000

7
*
i

20

200

2000

50

500

3000

10

400

4000

50

500

5000

60

600

6000

7.17 Utilbando una metodologa simibr a b del ejercicio 7.15, encuentre los dos valores ms grandes de los 10 que se
introdujeron. [A'ota: puede introducir cada nmero slo una vez].
7.18 Sin ejecutar b siguiente secuencia de comandos, determine lo que imprime:
1 <ID0CTYPE hta1>
2

3 < 1 - - E j e r c i c i o 7 .1 8 : e j 0 8 _ 1 8 . h t n l - - >

4 <html>

<had>

Ejercicios

A
7
8

249

<aeta charset - 'u tf-8>


<title>Scuncia de comandos mistriosa</titl*>
<scr1pt>

9
10
var f i l a - 10;
11
var colunna;
12
13
while ( f i l a >- 1 )
14

13
colunna - 1;
I*
docwtent.wr1teln("<p>" );
17
18
while ( columna < 10 )
If
{
20
document.writ e ( f i l a * 2 1
21
coltwma;
22
} // end while
23
24
--fila ;
23
document. wri te l n( </p>" );
26
> / / end while
27
28
</script>
20
</head<body></body>
30 </htnl>

"<" : ">" );

7.19 (Problema del e ls * suelto) Determine La salida de cada uno de los siguientes segmentos de cdigo, cuando x es 9
y y es 11, y cuando x es 11 y y es 9. Observe que el intptetc ignora la sangra en una secuencia de comandos. Ade
ms, el intrprete de JavaScript siempre asocia un el se con el 1f anterior, a menos que se le indique de otra forma
mediante la colocacin de llaves ({}). A primera vista, tal vez no est seguro de cul 1f corresponde a cul el se. Esta
situacin se conoce como el problema del el se suelto". Hemos diminado b sangra del siguiente cdigo para hacer
d problema ms retador. ( Sugerencia: Aplique las convenciones de sangra que ha aprendido],
a) i f ( x < 10 )
I f ( y > 10 )
document.writeln ( "<p>*****</p>- );
el se

document.write ln (
);
document.writeln( "<p>S$SS$</p> );
b) i f ( x < 10 )
{

i f ( y > 10 )
document.write1n(

>;

)
el se

{
document.writeln( "<p>#####</p>" );
document.writeln( '<p>S3SSS</p>" );
)
7.20 Un palndromo es un nmero o una frase de tcxro que se lee igual al derecho y al revs. Por ejemplo, cada uno de
los siguientes enteros de cinco dgitos es un palndromo: 12321, 55555, 45554 y 11611. Escriba una secuencia
de comandos que lea un entero de cinco dgitos y determine si es un palndromo. Si el nmero no es de cinco

250

Captulo 7

JavaScript instrucciones de control I

dgitos, muestre un dilogo a le rt que indique el problema al usuario y le permita introducir un nuevo valor despus de
cerrar d dilogo a le r t. [Sugerencia: es posible hacer este ejercicio con las tcnicas que aprendi en este capitulo.
Tendr que usar operaciones de divisin y de residuo para sdeccionar" cada dgito).
7 .2 1 Escrba una secuencia de comandos que produzca texto de HTM L5 que siga mostrando en la ventana de comandos
los mltiplos del entero 2 (a saber. 2. 4. 8. 16.32.64, etctera). Su ciclo no debe terminar (es decir, debe crear un ciclo
infinito). Qu ocurre cuando e