1

Carta de reconocimiento del autor de los derechos a favor del

TECNM
Ciudad de México, 14/Feb/2021

TECNOLÓGICO NACIONAL DE MÉXICO.

PRESENTE.

Bajo protesta de decir verdad, Nicolás Alonzo Gutiérrez, personal docente adscrito al
Instituto Tecnológico de Apizaco del Tecnológico Nacional de México, manifiesto que, en
cumplimiento de mis actividades relacionadas con el Año Sabático, elaboré la obra titulada
“ELABORACIÓN DE APUNTES”. Con base en lo anterior, y con fundamento en los
artículos 83 de la Ley Federal del Derecho de Autor y 46 de su Reglamento, reconozco que
el Tecnológico Nacional de México es titular de los derechos patrimoniales sobre la misma
y le corresponden las facultades relativas a la divulgación, integridad de la obra y de
colección, conservando el derecho a figurar como autor. Asimismo, respondo por la autoría
y originalidad de la citada obra; y relevo de toda responsabilidad al Tecnológico Nacional de
México de cualquier demanda o reclamación que llegara a formular alguna persona física o
moral que considere que con esta obra es afectado en alguno de los derechos protegidos por
la Ley en cita, asumiendo todas las consecuencias legales y económicas.

ATENTAMENTE

___________________________

Nicolás Alonzo Gutiérrez Nicolás

AUTOR

ii
Contribución académica
La programación web ha crecido exponencialmente durante los últimos años. El enfoque
de desarrollo de software basado en escritorio ha demostrado tener más desventajas que
ventajas cuando se trata de sistemas de atención al cliente de forma masiva. Aquí es donde
entra el concepto de intranet en contraposición al concepto de internet. La intranet se refiere
al desarrollo de una ‘internet’ local que permita ejecutar las aplicaciones locales en un
servidor web al cual puedan acceder todos los departamentos de una empresa o una
institución. El desarrollo de aplicaciones de intranet permite migrar muy fácilmente a las
aplicaciones de internet o de desarrollo web. Además, las ventajas de las aplicaciones web
es que son muy fácilmente escalables: sólo requieren un sistema operativo y un navegador
web para poder funcionar. No es necesario instalar la aplicación computadora por
computadora, simplemente se comparte la dirección o URL del servidor que aloja la
aplicación y tener los permisos correspondientes. Todo esto abre muchas posibilidades a los
ingenieros en TICS.

El ingeniero de TICS entonces, haciendo uso de los conocimientos de esta materia, puede
implementar aplicaciones computacionales para solucionar problemas de diversos contextos,
integrando diferentes tecnologías, plataformas o dispositivos. Puede también implementar
aplicaciones computacionales para solucionar problemas de diferentes contextos, integrando
diferentes tecnologías, plataformas o dispositivos. Puede también administrar proyectos que
involucren tecnologías de la información y comunicaciones para el logro de objetivos
organizacionales conforme a los requerimientos establecidos ayudándose, naturalmente de
otras materias de la retícula, considerando que la programación web es una parte importante
en el ciclo de desarrollo de software. En esta materia recae la responsabilidad de lograr un
producto tangible para el cliente.

Dentro del desarrollo e implementación de sistemas de información para la gestión de

procesos es necesario recalcar que los datos reflejados en estadísticas apoyan en la toma de

iii
Contribución académica
decisiones que realizan los directivos. Estas estadísticas están –la mayoría de las veces- a un
clic de distancia.

En ingeniero en Tics a través de esta materia tiene un primer contacto con las metodologías
basadas en estándares internacionales y que son de uso común en las empresas de desarrollo
de software.

Aunque el diseñar, desarrollar y mantener sistemas de bases de datos se ve a profundidad

en otras materias, la programación web integra a éstas como parte del ciclo de desarrollo de
software extendiendo los conceptos de integridad, disponibilidad y confidencialidad de la
información almacenada como parte del desarrollo de sistemas para la web.

El proceso de programación es una combinación de ciencia y arte lo que obliga al

ingeniero en tics a utilizar tecnologías y herramientas actuales y emergentes acordes a las
necesidades del entorno. Viviendo en un avance tecnológico acelerado es imprescindible
actualizarse continuamente sin perder de vista que la creatividad es fundamental en el
desarrollo de sistemas.

En la programación del lado del cliente el ingeniero en tics, diseña e implementa interfaces
gráficas de usuario para facilitar la interacción entre el ser humano y los equipos de cómputo
y sistemas electrónicos. Actualmente los lenguajes de programación ofrecen muchas
herramientas para construir sistemas con interfaces gráficas prediseñadas utilizando marcos
de trabajo o frameworks lo que facilita enormemente el proceso de desarrollo de software,
permitiendo la interfaz entre la base de datos, la lógica de negocio, el control del sistema y
la vista o interfaz de usuario.

Por último, el ingeniero en tics con ayuda de la programación web puede ser capaz de
empezar a desarrollar sistemas que resuelvan una necesidad y en ocasiones es posible crear
empresas en el ámbito de las tecnologías de la información y comunicaciones contribuyendo
de esta forma al desarrollo de su entorno.

Por último, una aplicación de escritorio requiere menos atención sobre los aspectos de
seguridad, ya que en algunas ocasiones puede ser relegada al sistema operativo o administrar
permisos sobre clientes locales o una red local.

iv
Contribución académica
 En una aplicación web, la seguridad recae en el mismo sistema y debe considerarse
cuidadosamente. Aparte de asignar los permisos a los usuarios de la empresa. Existen
módulos que están de cara a internet y expuestos a diferentes ataques de fuerza bruta, ataques
cruzados, suplantación de identidad, ataques de denegación de permisos, inyección de código
a bases de datos o de inyección de código de JavaScript.

v
Contribución académica
Contenido
Carta de reconocimiento del autor de los derechos a favor del TECNM ............................................ ii
Contribución académica......................................................................................................................iii
Contenido ............................................................................................................................................vi
Índice de tablas ...................................................................................................................................xi
Índice de ilustraciones........................................................................................................................ xii
Planeación del curso ......................................................................................................................... xiii
Caracterización de la asignatura .................................................................................................. 14
Intención didáctica ....................................................................................................................... 14
Capítulo 1 Introducción a las aplicaciones web ................................................................................ 20
Competencias específicas y genéricas ......................................................................................... 20
Temario detallado de la unidad ................................................................................................... 20
Introducción ................................................................................................................................. 20
1.1. Evolución de las aplicaciones web ........................................................................................ 21
1.1.1. Orígenes de la internet ................................................................................................. 21
1.1.2. Evolución del desarrollo web ........................................................................................ 35
1.2. Arquitectura de las aplicaciones web ................................................................................... 44
1.2.1. ¿Qué es la arquitectura de aplicaciones web? ............................................................. 45
1.2.2. Resumen de estilos arquitectónicos ............................................................................. 46
1.2.2. Arquitectura cliente servidor ........................................................................................ 47
1.2.3. Arquitectura basada en CGI .......................................................................................... 48
1.2.4. Arquitectura modelo vista controlador MVC................................................................ 51
1.2.5. Elementos arquitectónicos de sistema básicos ............................................................ 53
1.3. Tecnologías para el desarrollo de aplicaciones web ............................................................. 58
1.3.1. Prototipo ....................................................................................................................... 60
1.3.2. Diseño ........................................................................................................................... 60
1.3.2. Infraestructura .............................................................................................................. 61
1.3.3. Tecnologías para administración de bases de datos .................................................... 69
1.3.4. Administración de versiones ......................................................................................... 71
1.3.5. Editores para programación ......................................................................................... 73
1.4. Planificación de aplicaciones web ......................................................................................... 74
1.4.1. Requerimientos............................................................................................................. 75
1.4.2. Análisis y diseño ............................................................................................................ 76
1.4.2. Construcción ................................................................................................................. 76
vi
Contenido
 1.4.3. Integración y pruebas ................................................................................................... 77
1.4.4. Cierre............................................................................................................................. 78
Capítulo 2 HTML, XML, CSS ............................................................................................................... 80
Competencias específicas y genéricas ......................................................................................... 80
Temario detallado de la unidad ................................................................................................... 80
2.1. Introducción .......................................................................................................................... 81
2.2. Estructura global de un documento web .............................................................................. 82
1.2.1. Estructura de un documento web ................................................................................ 82
1.2.2. Bloques de texto ........................................................................................................... 83
1.2.3. Marcadores lógicos ....................................................................................................... 84
1.2.2. Estructura de directorios de un proyecto ..................................................................... 84
2.3. Elementos básicos ................................................................................................................. 88
2.3.1. Tipos de letra ................................................................................................................ 88
2.3.2. Vínculos ......................................................................................................................... 90
2.3.3. Listas.............................................................................................................................. 93
2.3.4. Tablas ............................................................................................................................ 94
2.3.5. Objetos ........................................................................................................................ 100
2.3.6. Imágenes ..................................................................................................................... 100
2.3.7. Aplicaciones ................................................................................................................ 103
2.4. Formularios ......................................................................................................................... 113
2.4.1. Definiciones................................................................................................................. 113
2.4.2. Atributos de formularios ............................................................................................. 114
2.4.3. Elementos de formularios ........................................................................................... 116
2.4.4 Tipos de entrada .......................................................................................................... 121
2.4.5. Atributos de input ....................................................................................................... 130
2.4.6. Atributos de form........................................................................................................ 139
2.5. Lenguajes de presentación en documentos web................................................................ 144
2.5.1. Metadatos ................................................................................................................... 144
2.5.2. Representación y codificación .................................................................................... 144
2.5.3. XML ............................................................................................................................. 147
2.6. Selectores ............................................................................................................................ 158
2.6.1. Introducción a CSS ...................................................................................................... 158
2.6.2. Importar una hoja de estilo ........................................................................................ 159
2.6.3. Identificadores ............................................................................................................ 160
vii
Contenido
 2.6.4. Clases .......................................................................................................................... 160
2.6.5. Reglas CSS ................................................................................................................... 161
2.6.6. Tipos de estilo ............................................................................................................. 163
2.6.7. Hojas de estilo externas .............................................................................................. 164
2.6.8. Estilos internos ............................................................................................................ 164
2.6.9. Estilos en línea ............................................................................................................ 165
2.6.10. Selectores CSS ........................................................................................................... 165
2.7. Modelo de caja.................................................................................................................... 172
2.7.1. Establecer los márgenes ............................................................................................. 172
2.7.2. Aplicación de los bordes ............................................................................................. 174
2.7.3. Ajustar el relleno ......................................................................................................... 176
Capítulo 3 Programación del lado del cliente ................................................................................. 179
Competencias específicas y genéricas ....................................................................................... 179
Temario detallado de la unidad ................................................................................................. 179
3.1. Introducción al lenguaje...................................................................................................... 180
3.1.1. Introducción a JavaScript ............................................................................................ 180
3.1.2. Sintaxis ........................................................................................................................ 180
3.1.3. Variables...................................................................................................................... 181
3.1.3. Operadores ................................................................................................................. 182
3.1.3. Tipos de datos ............................................................................................................. 185
3.1.4. Funciones .................................................................................................................... 186
3.1.5. Ámbito de variables .................................................................................................... 188
3.1.6. Cadenas ....................................................................................................................... 190
3.1.7. Uso de onerror ............................................................................................................ 194
3.2. Manejo de frameworks ....................................................................................................... 195
3.2.1. Introducción a los frameworks del lado del cliente .................................................... 195
3.2.2. Angular ........................................................................................................................ 196
3.2.3. Vue .............................................................................................................................. 197
3.2.4. React ........................................................................................................................... 197
3.3. Estructuras de control ......................................................................................................... 197
3.3.1. Condiciones simples .................................................................................................... 198
3.3.2. Condición múltiple ...................................................................................................... 200
3.3.3. Ciclos ........................................................................................................................... 201
3.3.4. Eventos........................................................................................................................ 204
viii
Contenido
 3.3.5. Formularios ................................................................................................................. 216
3.4. Manipulación de objetos .................................................................................................... 227
3.4.1 Representación de objetos .......................................................................................... 227
3.4.2. Operaciones sobre objetos ......................................................................................... 229
Capítulo 4 Programación del lado del servidor ............................................................................... 232
Competencias específicas y genéricas ....................................................................................... 232
Temario detallado de la unidad ................................................................................................. 232
4.1. Introducción al lenguaje...................................................................................................... 233
4.1.1. Introducción a las tecnologías de scripting del lado del servidor ............................... 233
4.1.2. Algunos lenguajes de programación para web ........................................................... 233
4.1.3. Variables y tipos de datos ........................................................................................... 235
4.1.4. Expresiones ................................................................................................................. 252
4.1.5. Operadores ................................................................................................................. 253
4.2. Estructuras de control ......................................................................................................... 255
4.2.1 Sentencia IF .................................................................................................................. 255
4.2.2. Sentencia switch ......................................................................................................... 257
4.2.2. Sentencia while ........................................................................................................... 258
4.2.3. Sentencia do while ...................................................................................................... 259
4.2.4. Sentencia for ............................................................................................................... 260
4.2.5. Constructor foreach .................................................................................................... 261
4.3. Tratamiento de formularios ................................................................................................ 262
4.3.1. Formularios HTML (GET y POST) ................................................................................. 262
4.3.2. Saneamiento y validación de variables de entrada .................................................... 264
4.3.3. Subida de archivos ...................................................................................................... 271
4.4. Manejo de objetos en el servidor ....................................................................................... 274
4.4.1 Terminología ................................................................................................................ 275
4.5. Creación de clases ............................................................................................................... 276
4.5.1. Propiedades y métodos .............................................................................................. 277
4.5.2. Creación de un objeto ................................................................................................. 277
4.5.3. Herencia (Extends) ...................................................................................................... 278
4.5.4. Visibilidad .................................................................................................................... 279
4.6. Acceso a datos..................................................................................................................... 283
4.6.1. Conexiones y su administración.................................................................................. 284
4.6.2. Transacciones y auto-commits ................................................................................... 286
ix
Contenido
 4.6.3. Sentencias preparadas ................................................................................................ 287
4.6.4. Errores y su manejo .................................................................................................... 289
Capítulo 5 Cómputo en la nube y servicios ..................................................................................... 292
Competencias específicas y genéricas ....................................................................................... 292
Temario detallado de la unidad ................................................................................................. 292
5.1. Conceptos generales ........................................................................................................... 293
5.1.1. Características esenciales ........................................................................................... 293
5.1.2. Modelos de servicio .................................................................................................... 294
5.1.3. Modelos de despliegue ............................................................................................... 295
5.2. Tipos de servicios en la nube .............................................................................................. 296
5.2.1. Conectividad y administración de redes ..................................................................... 297
5.2.2. Virtualización .............................................................................................................. 298
5.3. Patrones de diseño.............................................................................................................. 301
5.3.1. Patrones de diseño de software ................................................................................. 301
5.3.2. Patrones de diseño en la nube.................................................................................... 320
5.4. Estándares en servicios ....................................................................................................... 324
5.4.1. Introducción ................................................................................................................ 324
5.4.2. Conceptos básicos de Cloud Computing ..................................................................... 326
5.4.3. Estándares de Cloud Computing ................................................................................. 327
5.5. Plataformas tecnológicas .................................................................................................... 329
5.5.1 AWS .............................................................................................................................. 330
5.5.2. Azure ........................................................................................................................... 331
5.5.3. Google ......................................................................................................................... 331
5.5.4. Red Hat openshift ....................................................................................................... 333
5.5.5. IBM SmartCloud .......................................................................................................... 333
5.5.7 VM Cloud Suite............................................................................................................. 333
5.5.8. OpenStack ................................................................................................................... 334
5.5.9. DigitalOcean ................................................................................................................ 334
5.5.10. Oracle Cloud OCl ....................................................................................................... 335
5.6. Seguridad e interoperabilidad ............................................................................................ 338
5.6.1 Seguridad en la nube ................................................................................................... 338
5.6.2. Interoperabilidad en la nube ...................................................................................... 346
Bibliografía ...................................................................................................................................... 349

x
Contenido
Índice de tablas
TABLA 0.1 PLANEACIÓN DEL CURSO .......................................................................................................................... XIII
TABLA 1.1 RESUMEN DE ESTILOS ARQUITECTÓNICOS .................................................................................................... 46
TABLA 1.2 ALGUNAS HERRAMIENTAS PARA PROGRAMACIÓN WEB................................................................................... 59
TABLA 1.3 HERRAMIENTAS DE MODELADO ................................................................................................................. 70
TABLA 1.4 HERRAMIENTAS DE ADMINISTRACIÓN ......................................................................................................... 71
TABLA 1.5 ALGUNOS EDITORES PARA DESARROLLO ...................................................................................................... 73
TABLA 2.1 BLOQUES DE TEXTO................................................................................................................................. 83
TABLA 2.2 MARCADORES LÓGICOS ........................................................................................................................... 84
TABLA 2.3 TIPOS DE LETRA ...................................................................................................................................... 88
TABLA 2.4 VALORES DEL ATRIBUTO TARGET ................................................................................................................ 91
TABLA 2.5 PROPIEDADES DE REJILLA ......................................................................................................................... 98
TABLA 2.6 FORMATOS Y TIPOS DE IMAGEN ............................................................................................................... 103
TABLA 2.7 EVENTOS DISPONIBLES EN UN OBJETOS EVENTSOURCE ................................................................................. 113
TABLA 2.8 VALORES DEL ATRIBUTO TARGET .............................................................................................................. 114
TABLA 2.9 ATRIBUTOS DE LA ETIQUETA FORM ........................................................................................................... 116
TABLA 2.10 ELEMENTOS DE FORMULARIOS .............................................................................................................. 120
TABLA 2.11 RESTRICCIONES DE ENTRADA COMUNES .................................................................................................. 127
TABLA 2.12 ELEMENTOS SINTÁCTICOS DE DTD ......................................................................................................... 153
TABLA 2.13 ATRIBUTOS ....................................................................................................................................... 155
TABLA 2.14 VALORES .......................................................................................................................................... 156
TABLA 3.1 ALGUNOS OPERADORES DE JAVASCRIPT .................................................................................................... 183
TABLA 3.2 PRECEDENCIA DE OPERADORES DE MAYOR A MENOR ................................................................................... 184
TABLA 3.3 CICLOS DE JAVASCRIPT .......................................................................................................................... 201
TABLA 3.4 ALGUNOS EVENTOS DEFINIDOS EN JAVASCRIPT ........................................................................................... 205
TABLA 3.5 PROPIEDADES/MÉTODOS DEFINIDAS POR DOM ........................................................................................ 214
TABLA 3.6 VALIDACIONES COMUNES ....................................................................................................................... 224
TABLA 3.7 ALGUNAS VALIDACIONES COMUNES ......................................................................................................... 226
TABLA 4.1 TIPOS BÁSICOS DE PHP ........................................................................................................................... 236
TABLA 4.2 TIPOS COMPUESTOS DE PHP 7 ................................................................................................................. 244
TABLA 4.3 PRECEDENCIA DE OPERADORES................................................................................................................ 254
TABLA 4.4 FILTROS DE SANEAMIENTO ..................................................................................................................... 264
TABLA 4.5 TIPOS DE FILTROS DE VALIDACIÓN PARA LA FUNCIÓN FILTER_VAR ................................................................... 267
TABLA 4.6 VALORES DE ERROR PARA SUBIR ARCHIVOS ................................................................................................ 273
TABLA 5.1 DIFERENCIAS ENTRE VIRTUALIZACIÓN Y CLOUD COMPUTING ......................................................................... 300
TABLA 5.2 PATRONES DE ADMINISTRACIÓN DE DATOS ............................................................................................... 320
TABLA 5.3 PATRONES DE DISEÑO E IMPLEMENTACIÓN ................................................................................................ 321
TABLA 5.4 PATRONES DE MENSAJERÍA ..................................................................................................................... 323
TABLA 5.5 OTROS SERVICIOS DE NUBE ..................................................................................................................... 336

xi
Índice de tablas
Índice de ilustraciones
ILUSTRACIÓN 1.1 ARQUITECTURA CLIENTE SERVIDOR .................................................................................................... 48
ILUSTRACIÓN 1.2 ARQUITECTURA CLIENTE-SERVIDOR CON CGI ...................................................................................... 48
ILUSTRACIÓN 1.3 MODELO VISTA CONTROLADOR ........................................................................................................ 51
ILUSTRACIÓN 1.4 INFRAESTRUCTURA WEB TÍPICA......................................................................................................... 53
ILUSTRACIÓN 1.5 EJECUCIÓN DE POWERSHELL............................................................................................................ 62
ILUSTRACIÓN 1.6 COMPATIBILIDAD CON HYPER-V ....................................................................................................... 63
ILUSTRACIÓN 1.7 DESCARGAR DISTRIBUCIÓN A INSTALAR .............................................................................................. 64
ILUSTRACIÓN 1.8 PHP INSTALADO CORRECTAMENTE.................................................................................................... 66
ILUSTRACIÓN 1.9 SELECCIONAR APACHE2 .................................................................................................................. 67
ILUSTRACIÓN 2.1 FORMATO DE ETIQUETA EN XML .................................................................................................... 149
ILUSTRACIÓN 2.2 REFERENCIA PRIVADA DE XML ....................................................................................................... 152
ILUSTRACIÓN 2.3 REFERENCIA PÚBLICA DE XML........................................................................................................ 152
ILUSTRACIÓN 2.4 RESULTADO DE OL OL ................................................................................................................... 167
ILUSTRACIÓN 2.5 RESULTADO DE LA LISTA EN NEGRITAS .............................................................................................. 168
ILUSTRACIÓN 2.6 USO DE MÁRGENES CON CSS ......................................................................................................... 174
ILUSTRACIÓN 2.7 APLICACIÓN DE BORDES ................................................................................................................ 175
ILUSTRACIÓN 2.8 APLICACIÓN DE RELLENO ............................................................................................................... 177
ILUSTRACIÓN 3.1 SALIDA DEL SCRIPT DEL EJEMPLO DE JAVASCRIPT ................................................................................ 181
ILUSTRACIÓN 3.2 USO DE VARIABLES....................................................................................................................... 182
ILUSTRACIÓN 3.3 RESULTADO DE OPERADORES DE JAVASCRIPT .................................................................................... 185
ILUSTRACIÓN 3.4 RESULTADO DE LA FUNCIÓN ........................................................................................................... 187
ILUSTRACIÓN 3.5 SALIDA DEL SCRIPT ÁMBITO DE VARIABLES......................................................................................... 190
ILUSTRACIÓN 3.6 MANEJO DE CADENAS Y ARREGLOS .................................................................................................. 192
ILUSTRACIÓN 3.7 MÉTODOS POP() Y PUSH()............................................................................................................. 194
ILUSTRACIÓN 3.8 CAPTURA DE ERRORES .................................................................................................................. 195
ILUSTRACIÓN 3.9 RESULTADO DEL SCRIPT CON CONDICIÓN SIN ELSE .............................................................................. 199
ILUSTRACIÓN 3.10 CONDICIONAL CON ELSE .............................................................................................................. 200
ILUSTRACIÓN 3.11 RESULTADO DE LA SENTENCIA SWITCH ........................................................................................... 201
ILUSTRACIÓN 3.12 RESULTADO CICLO WHILE ........................................................................................................... 203
ILUSTRACIÓN 3.13 FUNCIONAMIENTO DE EVENT BUBBLING EN MOZILLA ........................................................................ 211
ILUSTRACIÓN 3.14 ESQUEMA DEL FLUJO DEL MODELO DOM EVENT ............................................................................. 212
ILUSTRACIÓN 3.15 VENTANAS EMERGENTES DE JAVASCRIPT ........................................................................................ 224
ILUSTRACIÓN 5.1 TIPOS DE PATRONES DE DISEÑO ...................................................................................................... 304
ILUSTRACIÓN 5.2 PATRÓN DE ACTIVE RECORD .......................................................................................................... 309

xii
Índice de ilustraciones
Planeación del curso
El curso está diseñado para impartirse en dieciséis semanas incluyendo los exámenes que
se realizarán en el último día de la última semana correspondiente al tema.

La semana consta de 1 hora teórica y cuatro horas prácticas de acuerdo con el temario
correspondiente.
Tema Subtema Subtema Subtema Subtema Subtema Subtema Subtema 7 Semanas
1 2 3 4 5 6

Tema 1. 3 horas 3 horas 4 horas 4 horas 2

Introducción a las
aplicaciones WEB.

Tema 2. HTML, 3 horas 2 horas 4 horas 3 horas 3 horas 3 horas 2 horas 4

XML y CSS

Tema 3 5 horas 3 horas 2 horas 5 horas 3

Programación del
lado del cliente

Tema 4 2 horas 2 horas 4 horas 4 horas 4 horas 4 horas 4

Programación del
lado del servidor

Tema 5 Cómputo en 2 horas 2 horas 2 horas 2 horas 2 horas 2 horas 3

la nube y servicios

Tabla 0.1 Planeación del curso

xiii
Planeación del curso
Presentación

Caracterización de la asignatura
Esta asignatura aporta al perfil del egresado la capacidad para desarrollar y administrar
software que apoye la productividad y competitividad de las organizaciones cumpliendo con
estándares de calidad, mediante el desarrollo de aplicaciones web utilizando lenguajes de
marcas, de presentación, del lado del cliente, del servidor y con la colaboración de cómputo
en la nube.

Es de suma importancia porque permite al estudiante concluir en un proyecto formal de

desarrollo de software aplicando varias competencias adquiridas durante su trayectoria de
formación, por ello se inserta en los últimos semestres.

Para adquirir la competencia planteada en esta asignatura es necesario que el estudiante

haya acreditado la asignatura de Programación Orientada a Objetos, Taller de Bases de Datos
y Taller de Ingeniería de Software.

Intención didáctica
La asignatura está organizada en cinco temas:

El primer tema, se centra en antecedentes de las aplicaciones web, su arquitectura, las

tecnologías utilizadas y la forma en que se deberán planificar.

El segundo, aborda los lenguajes de marcado, como lo es HTML, XML en sus versiones
más recientes, de la misma forma se aborda el tema de lenguaje de presentación CSS para la
creación de hojas de estilo en cascada, en donde se obtenga una comprensión de su estructura
y forma de trabajar con los elementos que la integran.

El tercer tema, se centra en la creación, control y manipulación de objetos utilizados por

el cliente de las aplicaciones web, así como la integración de diversos Frameworks
disponibles.

xiv
Planeación del curso
 En el cuarto tema, se aborda la programación del lado del servidor en donde se logre la
manipulación de objetos y el acceso a datos para la presentación de procesos dinámicos y sus
resultados en una aplicación web.

En el quinto tema, se trata lo relacionado al cómputo en la nube, los patrones de diseño y

desarrollo, para su posterior integración con servicios web.

La importancia de la asignatura se centra en conocer y desarrollar cada una de las etapas

de la programación para la solución de problemas en un lenguaje de programación en
ambiente web, por lo que se recomienda que el estudiante desarrolle programas
demostrativos en cada tema visto en clase generando un proyecto integrador y poniendo
atención en los avances de los estudiantes..

xv
Planeación del curso
Introducción

Existen muchos libros que hablan sobre la programación web. La mayoría traen más
información de la que puede ser tratada en un curso de seis meses. En estos apuntes se trató
de incluir aquella información que se consideró más importante para poder concluir el curso
en el tiempo señalado. No se pretende la substitución de la investigación por parte del
estudiante sobre los temas de la materia, más bien, proporcionar un marco que ubique al
estudiante para que, de ser necesario y a partir de ello, tenga una idea clara de los conceptos
clave y luego dirigir su búsqueda en otras fuentes informativas.

Es importante recalcar que es obligatorio para el alumno y el docente profundizar hasta

donde sea necesario en otras fuentes de información sobre los temas analizados para una
mayor comprensión.

También es muy importante que el alumno haya cursado las materias básicas de
programación incluyendo estructuras de datos y programación II. Sin estas bases sería muy
difícil dar seguimiento a las ideas subyacentes de programación web.

Existen muchos temas en los que se recomienda encarecidamente que el alumno haga
programas breves en donde desarrolle los fundamentos de los módulos más comunes de los
que consta un sistema web.

Al mismo tiempo que se enseña la teoría, se recomienda también poner ejemplos sobre el
uso de las interfaces o instrucciones que están directamente involucradas con el tema. En la
mayoría de las unidades se incluyen algunas técnicas de implementación de módulos
comunes en los sistemas web.

En el cuaderno de trabajo se proponen las actividades complementarias y las prácticas que

deben de llevarse a cabo.

Por último, quiero agradecer también a todos aquellos que directa o indirectamente
intervinieron para que este trabajo se hiciera realidad.

xvi
Planeación del curso
 Ojalá también este libro sea la base para futuros trabajos y como toda obra humana, el
escrito actual puede aún mejorarse de innumerables formas. Cualquier sugerencia o
aportación será bienvenida.

Espero también que nuestros alumnos hagan uso intensivo de este material como una guía
dentro de su aprendizaje, que al final es el objetivo principal de esta y de todas las obras del
ser humano.

xvii
Planeación del curso
Estructura conceptual

xviii
Planeación del curso
 Competencias específicas y genéricas

Capítulo 1 Introducción a las aplicaciones web

Competencias específicas y genéricas

Competencias específicas

Conoce la evolución, arquitectura, tecnologías y planificación de las aplicaciones

Web para la preparación de un ambiente de desarrollo.

Competencias genéricas

Comunicación oral y escrita.

Habilidad para buscar, analizar, clasificar y sintetizar información proveniente de

fuentes diversas.

Capacidad crítica y autocrítica.

Capacidad de trabajo en equipo.

Capacidad de aplicar los conocimientos en la práctica.

Temario detallado de la unidad

1.- Introducción a las aplicaciones web

1.1. Evolución de las aplicaciones web.

1.2. Arquitectura de las aplicaciones web

1.3. Tecnologías para el desarrollo de aplicaciones web.

1.4. Planificación de aplicaciones web

Introducción

20
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

1.1. Evolución de las aplicaciones web

1.1.1. Orígenes de la internet

‘La primera descripción registrada de las interacciones sociales que podrían haber sido
habilitadas a través de la red fue una serie de memorándums escritos por J.C.R. Licklider del
MIT en agosto de 1962 en donde discutían su concepto de “red galáctica”, vislumbró un
conjunto de computadoras interconectadas por medio de las cuales cualquiera podría tener
un acceso rápido a datos y programas desde cualquier sitio. En esencia, el concepto fue muy
parecido al internet actual. Licklider fue el primero en encabezar el programa de
investigación de computadoras en DARPA, comenzando en octubre de 1962. También
convención a sus sucesores, Ivan Sutherland, Bob Taylor, y al investigador del MIT
Lawrence G. Roberts, de la importancia del concepto de interconexión de computadoras.

‘Leonard Kleinrock, del MIT, publicó el primer artículo sobre la teoría de la conmutación
de paquetes en julio de 1961 y el primer libro sobre el tema en 1964. Kleinrock convenció a
Roberts de la viabilidad teórica de las comunicaciones mediante paquetes en lugar de
circuitos, lo que supuso un paso importante en el camino hacia la creación de redes de
computadoras. El otro paso clave era hacer que las computadoras se comunicaran entre sí.
Para ello, en 1965, Roberts, en colaboración con Thomas Merrill, conectó el ordenador TX-
2 de Massachusetts con el Q-32 de California mediante una línea telefónica de baja velocidad,
creando la primera red de computadoras de área amplia (por pequeña que fuera) jamás
construida. El resultado de este experimento fue la constatación de que las computadoras de
tiempo compartido podían trabajar bien juntos, ejecutando programas y recuperando datos
según fuera necesario en la máquina remota, pero que el sistema telefónico de conmutación
de circuitos era totalmente inadecuado para el trabajo. La convicción de Kleinrock sobre la
necesidad de la conmutación de paquetes se confirmó. A finales de 1966, Roberts se dirigió
a DARPA para desarrollar el concepto de red computadoras y elaboró rápidamente su plan
para la "ARPANET", publicándolo en 1967. En la conferencia en la que presentó el
documento, también había un documento sobre un concepto de red de paquetes del Reino
21
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

Unido por Donald Davies y Roger Scantlebury del NPL. Scantlebury le habló a Roberts del
trabajo del NPL, así como del de Paul Baran y otros de la RAND. El grupo RAND había
escrito un documento sobre redes de conmutación de paquetes para seguridad de voz en el
ejército en 1964. Resulta que los trabajos del MIT (1961-1967), de RAND (1962-1965) y del
NPL (1964-1967) se desarrollaron en paralelo sin que ninguno de los investigadores supiera
nada de los otros trabajos. La palabra "paquete" se adoptó a partir del trabajo del NPL y la
velocidad de línea propuesta para el diseño de ARPANET pasó de 2,4 kbps a 50 kbps.5 En
agosto de 1968, después de que Roberts y la comunidad financiada por DARPA hubieran
perfeccionado la estructura general y las especificaciones de ARPANET, DARPA publicó
una solicitud de ofertas para el desarrollo de uno de los componentes clave, los conmutadores
de paquetes denominados procesadores de mensajes de interfaz (IMP). Mientras el equipo de
BBN trabajaba en los IMP, con Bob Kahn desempeñando un papel importante en el diseño
arquitectónico general de ARPANET, la topología y la economía de la red fueron diseñadas
y optimizadas por Roberts trabajando con Howard Frank y su equipo de Network Analysis
Corporation, y el sistema de medición de la red fue preparado por el equipo de Kleinrock en
la UCLA. Debido al temprano desarrollo de Kleinrock de la teoría de la conmutación de
paquetes y a su enfoque en el análisis, el diseño y la medición, su Centro de Medición de
Redes en la UCLA fue seleccionado para ser el primer nodo de la ARPANET. Todo ello se
materializó en septiembre de 1969, cuando BBN instaló el primer IMP en la UCLA y se
conectó el primer ordenador central. El proyecto de Doug Engelbart sobre "Aumento del
intelecto humano" (que incluía NLS, un primer sistema de hipertexto) en el Stanford
Research Institute (SRI) proporcionó un segundo nodo. El SRI apoyó el Centro de
Información de Redes, dirigido por Elizabeth (Jake) Feinler y que incluía funciones como el
mantenimiento de tablas de mapeo de nombres de host a direcciones, así como un directorio
de RFC's.

‘Un mes después, cuando el SRI se conectó a la ARPANET, se envió el primer mensaje
de host a host desde el laboratorio de Kleinrock al SRI. Se añadieron dos nodos más en la
UC Santa Barbara y en la Universidad de Utah. Estos dos últimos nodos incorporaron
proyectos de visualización de aplicaciones, con Glen Culler y Burton Fried en la UCSB
investigando métodos para la visualización de funciones matemáticas utilizando pantallas de
22
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

almacenamiento para tratar el problema de la actualización a través de la red, y Robert Taylor

e Ivan Sutherland en Utah investigando métodos de representaciones en 3-D a través de la
red. Así, a finales de 1969, cuatro computadoras centrales estaban conectadas en la
ARPANET inicial, y la incipiente Internet estaba en marcha. Incluso en esta primera etapa,
hay que señalar que la investigación en redes incorporó tanto el trabajo sobre la red
subyacente como el trabajo sobre cómo utilizar la red. En los años siguientes se añadieron
rápidamente computadoras a ARPANET y se siguió trabajando para completar un protocolo
Host-to-Host funcionalmente completo y otros programas de red. En diciembre de 1970, el
Grupo de Trabajo de la Red (NWG), bajo la dirección de S. Crocker, finalizó el protocolo
inicial ARPANET Host-to-Host, llamado Network Control Protocol (NCP). A medida que
los sitios de ARPANET terminaron de implementar el NCP durante el período 1971-1972,
los usuarios de la red finalmente pudieron comenzar a desarrollar aplicaciones.

‘En octubre de 1972, Kahn organizó una gran demostración de ARPANET, que tuvo
mucho éxito, en la Conferencia Internacional de Comunicaciones de Computadoras (ICCC).
Esta fue la primera demostración pública de esta nueva tecnología de red al público. También
fue en 1972 cuando se presentó la primera aplicación "caliente", el correo electrónico. En
marzo, Ray Tomlinson, de BBN, escribió el software básico de envío y lectura de mensajes
de correo electrónico, motivado por la necesidad de los desarrolladores de ARPANET de
contar con un mecanismo de coordinación sencillo. En julio, Roberts amplió su utilidad
escribiendo el primer programa de utilidad de correo electrónico para listar, leer
selectivamente, archivar, reenviar y responder a los mensajes. A partir de ahí, el correo
electrónico despegó como la mayor aplicación de red durante más de una década. Esto fue
un presagio del tipo de actividad que vemos en la World Wide Web, es decir, el enorme
crecimiento de todo tipo de tráfico "de persona a persona".

[Link]. Los conceptos iniciales

‘La ARPANET original se convirtió en Internet. Internet se basó en la idea de que habría
múltiples redes independientes de diseño más bien arbitrario, empezando por ARPANET
como red pionera de conmutación de paquetes, pero que pronto incluiría redes de satélites de
paquetes, redes de radio de paquetes en tierra y otras redes. Internet, tal y como la conocemos
23
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

ahora, encarna una idea técnica clave, la de las redes de arquitectura abierta. En este enfoque,
la elección de cualquier tecnología de red individual no estaba dictada por una arquitectura
de red concreta, sino que un proveedor podía seleccionarla libremente y hacerla funcionar
con las demás redes a través de una "arquitectura de interconexión" de meta nivel. Hasta
entonces sólo existía un método general para federar redes. Se trataba del método tradicional
de conmutación de circuitos, en el que las redes se interconectaban a nivel de circuito,
pasando bits individuales de forma sincrónica a lo largo de una parte de un circuito de
extremo a extremo entre un par de ubicaciones finales. Recordemos que Kleinrock había
demostrado en 1961 que la conmutación de paquetes era un método de conmutación más
eficaz. Junto con la conmutación de paquetes, los acuerdos de interconexión para fines
especiales entre redes eran otra posibilidad. Aunque había otras formas limitadas de
interconectar diferentes redes, requerían que una se utilizara como componente de la otra, en
lugar de actuar como par de la otra para ofrecer un servicio de extremo a extremo.

‘En una red de arquitectura abierta, las redes individuales pueden diseñarse y desarrollarse
por separado y cada una de ellas puede tener su propia interfaz única que puede ofrecer a los
usuarios y/o a otros proveedores. incluidos otros proveedores de Internet. Cada red puede
diseñarse de acuerdo con el entorno específico y los requisitos de los usuarios de esa red. Por
lo general, no hay limitaciones en cuanto a los tipos de red que pueden incluirse o en su
alcance geográfico, aunque ciertas consideraciones pragmáticas dictarán lo que tiene sentido
ofrecer.

‘La idea de las redes de arquitectura abierta fue introducida por primera vez por Kahn
poco después de haber llegado a DARPA en 1972. Este trabajo formaba parte originalmente
del programa de radiocomunicación por paquetes, pero posteriormente se convirtió en un
programa independiente por derecho propio. En aquella época, el programa se llamaba
"Internetting". La clave para que el sistema de paquetes de radio funcionara era un protocolo
de extremo fiable que pudiera mantener una comunicación eficaz frente a las interferencias
de radio o soportar apagones intermitentes como los causados por estar en un túnel o
bloqueados por el terreno local. Kahn pensó primero en desarrollar un protocolo local sólo

24
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

para la red de paquetes de radio, ya que así evitaría tener que lidiar con la multitud de sistemas
operativos diferentes, y seguir utilizando el NCP.

‘Sin embargo, NCP no tenía la capacidad de dirigirse a redes (y máquinas) más allá de un
PDI de destino en la ARPANET y, por tanto, también sería necesario realizar algún cambio
en NCP. (Se suponía que ARPANET no era modificable en este sentido). NCP dependía de
ARPANET para proporcionar fiabilidad de extremo a extremo. Si se perdía algún paquete,
el protocolo (y presumiblemente las aplicaciones que soportaba) se paralizaba. En este
modelo, NCP no tenía control de errores de extremo a extremo, ya que ARPANET iba a ser
la única red existente y sería tan fiable que no sería necesario ningún control de errores por
parte de los hosts. Así, Kahn decidió desarrollar una nueva versión del protocolo que pudiera
satisfacer las necesidades de un entorno de red de arquitectura abierta. Este protocolo
acabaría llamándose Protocolo de Control de Transmisión/Protocolo de Internet (TCP/IP).
Mientras que NCP tendía a actuar como un controlador de dispositivos, el nuevo protocolo
sería más bien un protocolo de comunicaciones.

Otras preguntas clave que debían abordarse eran:

1. Algoritmos para evitar que los paquetes perdidos inhabiliten las comunicaciones
de forma permanente y permitir que se retransmitan con éxito desde el origen;

2. Proporcionar "canalización" de host a host para que varios paquetes puedan ir del
origen al destino a discreción de los hosts participantes, si las redes intermedias lo
permiten;

3. Funciones de pasarela para permitir el reenvío de paquetes de forma adecuada.

Esto incluye la interpretación de las cabeceras IP para el enrutamiento, el manejo
de las interfaces, la división de los paquetes en trozos más pequeños si es
necesario, etc.

4. La necesidad de sumas de comprobación de extremo, el re ensamblaje de paquetes

a partir de fragmentos y la detección de duplicados, si los hubiera.

5. La necesidad de direccionamiento global.

6. Técnicas para el control de flujo de host a host.

25
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

7. Interfaz con los distintos sistemas operativos.

‘También había otras preocupaciones, como la eficiencia de la implementación, el

rendimiento de la red interna, pero estas eran consideraciones secundarias al principio.

‘Kahn comenzó a trabajar en un conjunto de principios de sistemas operativos orientados

a las comunicaciones mientras estaba en BBN y documentó algunas de sus primeras ideas en
un memorando interno de BBN titulado "Communications Principles for Operating
Systems". En ese momento se dio cuenta de que sería necesario aprender los detalles de
implementación de cada sistema operativo para tener la oportunidad de incorporar cualquier
protocolo nuevo de forma eficiente. Así, en la primavera de 1973, tras iniciar el esfuerzo de
internetting, pidió a Vint Cerf (entonces en Stanford) que trabajara con él en el diseño
detallado del protocolo. Cerf había estado íntimamente involucrado en el diseño y desarrollo
del NCP original y ya tenía conocimientos sobre la interconexión con los sistemas operativos
existentes. Así que, armados con el enfoque arquitectónico de Kahn en el aspecto de las
comunicaciones y con la experiencia de Cerf en el NCP, se asociaron para definir los detalles
de lo que se convirtió en TCP/IP.

‘La interacción fue muy productiva y la primera versión escrita del enfoque resultante se
distribuyó en una reunión especial del Grupo de Trabajo de la Red Internacional (INWG)
que se había creado en una conferencia en la Universidad de Sussex en septiembre de 1973.
Cerf había sido invitado a presidir este grupo y aprovechó la ocasión para celebrar una
reunión de los miembros del INWG que estaban fuertemente representados en la conferencia
de Sussex. De esta colaboración entre Kahn y Cerf surgieron algunos planteamientos básicos:

1. La comunicación entre dos procesos consistiría lógicamente en un flujo muy largo de

bytes (los llamaron octetos). La posición de cualquier octeto en el flujo se utilizaría
para identificarlo.

2. El control de flujo se haría mediante ventanas deslizantes y acuses de recibo (acks).

El destino podría seleccionar cuándo acusar recibo y cada ack devuelto sería
acumulativo para todos los paquetes recibidos hasta ese punto.

26
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

3. Se dejó abierto cómo exactamente la fuente y el destino se pondrían de acuerdo en los

parámetros de las ventanas que se utilizaría. Inicialmente se utilizaron los valores por
defecto.

4. Aunque Ethernet estaba en desarrollo en Xerox PARC en ese momento, la

proliferación de LANs no estaba prevista en ese momento, y mucho menos PCs y
estaciones de trabajo. El modelo original era el de las redes de ámbito nacional, como
ARPANET, de las que se esperaba que sólo existiera un número relativamente
pequeño. Por lo tanto, se utilizó una dirección IP de 32 bits, de los cuales los primeros
8 bits significaban la red y los 24 bits restantes designaban el host en esa red. Esta
suposición, de que 256 redes serían suficientes para el futuro previsible, tuvo que ser
claramente reconsiderada cuando las LAN empezaron a aparecer a finales de los años
70.

‘El documento original de Cerf/Kahn sobre Internet describía un protocolo, llamado TCP,
que proporcionaba todos los servicios de transporte y reenvío en Internet. Kahn pretendía
que el protocolo TCP soportara una serie de servicios de transporte, desde la entrega
secuenciada de datos totalmente fiable (modelo de circuito virtual) hasta un servicio de
datagramas en el que la aplicación hiciera un uso directo del servicio de red subyacente, lo
que podría implicar la pérdida ocasional de paquetes, corruptos o reordenados. Sin embargo,
el esfuerzo inicial para implementar TCP resultó en una versión que sólo permitía circuitos
virtuales. Este modelo funcionaba bien para la transferencia de archivos y las aplicaciones
de inicio de sesión remoto, pero algunos de los primeros trabajos sobre aplicaciones de red
avanzadas, en particular la voz por paquetes en la década de 1970, dejaron claro que en
algunos casos las pérdidas de paquetes no debían ser corregidas por TCP, sino que debían
dejarse en manos de la aplicación. Esto condujo a una reorganización del TCP original en
dos protocolos, el simple IP, que sólo proporcionaba el direccionamiento y el reenvío de
paquetes individuales, y el TCP separado, que se ocupaba de características de servicio como
el control de flujo y la recuperación de paquetes perdidos. Para aquellas aplicaciones que no
querían los servicios de TCP, se añadió una alternativa llamada Protocolo de Datagramas de
Usuario (UDP) para proporcionar acceso directo al servicio básico de IP.

27
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

acceso al servicio básico de IP.

‘Una de las principales motivaciones iniciales tanto de ARPANET como de Internet fue
la compartición de recursos: por ejemplo, permitir a los usuarios de las redes de
radiocomunicación por paquetes acceder a los sistemas de tiempo compartido conectados a
ARPANET. Conectar ambas redes resultaba mucho más económico que duplicar estos
costosos ordenadores. Sin embargo, aunque la transferencia de archivos y el inicio de sesión
remoto (Telnet) fueron aplicaciones muy importantes, el correo electrónico ha tenido
probablemente el impacto más significativo de las innovaciones de esa época. El correo
electrónico proporcionó un nuevo modelo de cómo la gente podía comunicarse entre sí, y
cambió la naturaleza de la colaboración, primero en la construcción de la propia Internet
(como se discute más adelante) y más tarde para gran parte de la sociedad. Hubo otras
aplicaciones propuestas en los primeros días de Internet, incluyendo la comunicación de voz
basada en paquetes (el precursor de la telefonía de Internet), varios modelos de intercambio
de archivos y discos, y los primeros programas de "gusanos" que mostraron el concepto de
agentes (y, por supuesto, los virus). Un concepto clave de Internet es que no se diseñó para
una sola aplicación, sino como una infraestructura general sobre la que podían concebirse
nuevas aplicaciones, como se ilustró posteriormente con la aparición de la World Wide Web.
Es la naturaleza de propósito general del servicio proporcionado por TCP e IP lo que hace
esto posible.

[Link]. Transición a una infraestructura generalizada

‘Al mismo tiempo que la tecnología de Internet se validaba experimentalmente y se

utilizaba de forma generalizada entre un subconjunto de investigadores de informática, se
buscaban otras redes y tecnologías de red. La utilidad de las redes informáticas -
especialmente el correo electrónico- demostrada por DARPA y los contratistas del
Departamento de Defensa en la ARPANET no pasó desapercibida para otras comunidades y
disciplinas, de modo que a mediados de la década de 1970 las redes informáticas habían
empezado a surgir allí donde se podía encontrar financiación para ello. El Departamento de
Energía de los Estados Unidos (DoE) creó MFENet para sus investigadores en energía de
fusión magnética, a lo que los físicos de altas energías del DoE respondieron con la creación
28
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

de HEPNet. Los físicos espaciales de la NASA siguieron con SPAN, y Rick Adrion, David
Farber y Larry Landweber crearon CSNET para la comunidad (académica e industrial) de las
ciencias de la computación con una subvención inicial de la Fundación Nacional de la
Ciencia (NSF) de Estados Unidos. La difusión libre del sistema operativo UNIX por parte de
AT&T dio lugar a USENET, basada en los protocolos de comunicación UUCP incorporados
en UNIX, y en 1981 Ira Fuchs y Greydon Freeman idearon BITNET, que conectaba las
computadoras centrales académicas en un paradigma de "correo electrónico como imágenes
de tarjetas".

‘Con la excepción de BITNET y USENET, estas primeras redes (incluida ARPANET)

fueron creadas a propósito, es decir, estaban destinadas a comunidades cerradas de
académicos y en gran medida restringidas a ellas; por tanto, había poca presión para que las
redes individuales fueran compatibles y, de hecho, en gran medida no lo eran. Además, en el
sector comercial se buscaban tecnologías alternativas, como XNS de Xerox, DECNet y SNA
de IBM.8 Sólo los programas JANET británico (1984) y NSFNET estadounidense (1985)
anunciaron explícitamente su intención de servir a toda la comunidad de la enseñanza
superior, independientemente de la disciplina. De hecho, una condición para que una
universidad estadounidense recibiera financiación de la NSF para una conexión a Internet era
que "... la conexión debe ponerse a disposición de TODOS los usuarios cualificados del
campus".

‘En 1985, Dennis Jennings vino de Irlanda para pasar un año en la NSF dirigiendo el
programa NSFNET. Trabajó con la comunidad para ayudar a la NSF a tomar una decisión
crítica: que TCP/IP fuera obligatorio para el programa NSFNET. Cuando Steve Wolff se hizo
cargo del programa NSFNET en 1986, reconoció la necesidad de una infraestructura de red
de área amplia para apoyar a la comunidad académica y de investigación en general, junto
con la necesidad de desarrollar una estrategia para establecer dicha infraestructura sobre una
base en última instancia independiente de la financiación federal directa. Se adoptaron
políticas y estrategias (véase más adelante) para lograr ese fin.

‘La NSF también optó por apoyar la infraestructura organizativa de Internet existente en
DARPA, organizada jerárquicamente bajo la (entonces) Junta de Actividades de Internet

29
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

(IAB). La declaración pública de esta elección fue la autoría conjunta de los Grupos de
Trabajo de Ingeniería y Arquitectura de Internet del IAB y del Grupo de Asesoramiento
Técnico de Redes de la NSF de la RFC 985 (Requirements for Internet Gateways), que
aseguraba formalmente la interoperabilidad de las partes de Internet de DARPA y NSF.

‘Además de la selección de TCP/IP para el programa NSFNET, las agencias federales

tomaron y aplicaron otras decisiones políticas que dieron forma a la Internet de hoy.

1. Las agencias federales compartieron el coste de la infraestructura común, como los

circuitos transoceánicos. También apoyaron conjuntamente los "puntos de
interconexión gestionados" para el tráfico interinstitucional; los Intercambios
Federales de Internet (FIX-E y FIX-W) construidos con este fin sirvieron de modelo
para los Puntos de Acceso a la Red y las instalaciones "*IX" que son que son
características prominentes de la arquitectura actual de Internet.

2. Para coordinar este intercambio, se creó el Consejo Federal de Redes. La FNC también
cooperó con otras organizaciones internacionales, como RARE en Europa, a través
del Comité de Coordinación de Redes de Investigación Intercontinentales, CCIRN,
para coordinar el apoyo de Internet a la comunidad investigadora en todo el mundo.

3. Este intercambio y cooperación entre organismos en cuestiones relacionadas con

Internet tiene una larga historia. Un acuerdo sin precedentes en 1981 entre Farber, que
actuaba en nombre de CSNET y la NSF, y Kahn, de DARPA, permitió que el tráfico
de CSNET compartiera la infraestructura de ARPANET sobre una base estadística y
sin medición.

4. Posteriormente, de forma similar, la NSF animó a sus redes regionales (inicialmente

académicas) de la NSFNET a buscar clientes comerciales, no académicos, ampliar sus
instalaciones para darles servicio y aprovechar las economías de escala resultantes
para reducir los costes de suscripción de todos.

5. En el Backbone de la NSFNET -el segmento a escala nacional de la NSFNET- la NSF

aplicó una "Política de Uso Aceptable" (AUP) que prohibía el uso del Backbone para
fines "no relacionados con la investigación y la educación". El resultado previsible (y

30
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

pretendido) de fomentar el tráfico de la red comercial a nivel local y regional, al tiempo

que se denegaba su acceso al transporte a escala nacional, fue estimular la aparición
y/o el crecimiento de redes "privadas", competitivas y de largo recorrido, como PSI,
UUNET, ANS CO+RE y (posteriormente) otras. Este proceso de aumento de la
financiación privada para usos comerciales se debatió a partir de 1988 en una serie de
conferencias iniciadas por la NSF en la Kennedy School of Government de Harvard
sobre "La comercialización y privatización de Internet" - y en la lista "com-priv" de la
propia red.

6. En 1988, un comité del Consejo Nacional de Investigación, presidido por Kleinrock y

con Kahn y Clark como miembros, elaboró un informe encargado por la NSF titulado
"Hacia una red nacional de investigación". Este informe influyó en el entonces senador
Al Gore, y dio paso a las redes de alta velocidad que sentaron las bases de la futura
superautopista de la información.

7. En 1994, un informe del Consejo Nacional de Investigación, de nuevo presidido por

Kleinrock (y con Kahn y Clark como miembros de nuevo), titulado "Realizing The
Information Future: The Internet and Beyond". Este informe, encargado por la NSF,
fue el documento en el que se articuló un proyecto para la evolución de la
supercarretera de la información y que ha tenido un efecto duradero en la forma de
pensar sobre su evolución. En él se anticipaban las cuestiones críticas de los derechos
de propiedad intelectual, la ética, la fijación de precios, la educación, la arquitectura y
la regulación de Internet.

8. La política de privatización de la NSF culminó en abril de 1995 con la des financiación

de la NSFNET Backbone. Los fondos así recuperados se redistribuyeron (de forma
competitiva) a las redes regionales para comprar conectividad a Internet a escala
nacional de las ahora numerosas redes privadas de larga distancia.

‘El backbone había hecho la transición de una red construida con routers de la comunidad
investigadora (los routers "Fuzzball" de David Mills) a equipos comerciales. En sus 8 años y
medio de vida, la red troncal había pasado de seis nodos con enlaces de 56 kbps a 21 nodos
con múltiples enlaces de 45 Mbps. Había visto crecer Internet hasta alcanzar más de 50.000
31
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

redes en los siete continentes y el espacio exterior, con aproximadamente 29.000 redes en
Estados Unidos.

‘Tal fue el peso del ecumenismo y la financiación del programa NSFNET (200 millones
de dólares de 1986 a 1995) - y la calidad de los propios protocolos - que, en 1990, cuando la
propia ARPANET fue finalmente desmantelada, el TCP/IP había suplantado o marginado a
la mayoría de los demás protocolos de redes informáticas de área amplia en todo el mundo,
y el IP iba camino de convertirse en el servicio portador de la Infraestructura Global de la
Información.

[Link]. Comercialización de la tecnología

‘La comercialización de Internet no sólo implicó el desarrollo de servicios de red privados

y competitivos, sino también el desarrollo de productos comerciales que implementaran la
tecnología de Internet. A principios de la década de 1980, decenas de proveedores
incorporaban el TCP/IP a sus productos porque veían compradores para ese enfoque de la
red. Desgraciadamente, carecían de información real sobre cómo debía funcionar la
tecnología y cómo los clientes planeaban utilizar este enfoque de las redes. Muchos lo veían
como un complemento molesto que había que pegar a sus propias soluciones de red
propietarias: SNA, DECNet, Netware, NetBios. El Departamento de Defensa había ordenado
el uso de TCP/IP en muchas de sus compras, pero dio poca ayuda a los vendedores sobre
cómo construir productos TCP/IP útiles.

‘En 1985, reconociendo esta falta de disponibilidad de información y de formación

adecuada, Dan Lynch, en cooperación con el IAB, organizó un taller de tres días para que
TODOS los vendedores vinieran a aprender cómo funcionaba TCP/IP y lo que todavía no
podía hacer bien. Los ponentes procedían en su mayoría de la comunidad de investigadores
de DARPA, que habían desarrollado estos protocolos y los utilizaban en su trabajo diario.
Alrededor de 250 empleados de proveedores acudieron a escuchar a 50 inventores y
experimentadores. Los resultados fueron sorprendentes para ambas partes: los vendedores se
sorprendieron al ver que los inventores eran tan abiertos sobre el funcionamiento de las cosas

32
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

(y lo que aún no funcionaba) y los inventores se alegraron de escuchar nuevos problemas que
no habían considerado, pero que estaban siendo descubiertos por los vendedores en el campo.

‘Así se formó un debate bidireccional que ha durado más de una década.

‘Tras dos años de conferencias, tutoriales, reuniones de diseño y talleres, se organizó un

evento especial en el que se invitó a los proveedores cuyos productos funcionaban lo
suficientemente bien con TCP/IP a reunirse en una sala durante tres días para mostrar lo bien
que funcionaban todos juntos y también en Internet. En septiembre de 1988 nació la primera
feria Interop. Se presentaron 50 empresas. 5.000 ingenieros de organizaciones de clientes
potenciales acudieron para ver si todo funcionaba como se había prometido. Y así fue. ¿Por
qué? Porque los proveedores se esforzaron al máximo para garantizar que los productos de
todos ellos interoperaran con todos los demás productos, incluso con los de sus competidores.
La feria Interop ha crecido enormemente desde entonces y hoy se celebra en 7 lugares del
mundo cada año ante un público de más de 250.000 personas que acuden para saber qué
productos funcionan entre sí de forma transparente, conocer los últimos productos y debatir
sobre lo último en tecnología.

‘Paralelamente a los esfuerzos de comercialización que se pusieron de manifiesto en las

actividades de Interop, los proveedores comenzaron a asistir a las reuniones del IETF que se
celebraban 3 o 4 veces al año para debatir nuevas ideas sobre extensiones del conjunto de
protocolos TCP/IP. Estas reuniones, que empezaron con unos pocos cientos de asistentes, en
su mayoría procedentes del mundo académico y pagados por el gobierno, superan ahora a
menudo el millar de asistentes, en su mayoría procedentes de la comunidad de vendedores y
pagados por los propios asistentes. Este grupo autoseleccionado hace evolucionar el conjunto
TCP/IP de manera mutuamente cooperativa. La razón por la que es tan útil es que está
compuesto por todas las partes interesadas: investigadores, usuarios finales y vendedores.

‘La gestión de redes es un ejemplo de la interacción entre las comunidades investigadora

y comercial. En los inicios de Internet, el énfasis se puso en la definición e implementación
de protocolos que permitieran la interoperabilidad.

33
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

‘A medida que la red crecía, se hizo evidente que los procedimientos ad hoc utilizados en
algún momento para gestionar la red no podrían ampliarse. La configuración manual de las
tablas se sustituyó por algoritmos automatizados distribuidos, y se idearon mejores
herramientas para aislar los fallos. En 1987 quedó claro que se necesitaba un protocolo que
permitiera gestionar a distancia los elementos de la red, como los routers, de manera
uniforme. Se propusieron varios protocolos para este fin, entre ellos el Simple Network
Management Protocol o SNMP (diseñado, como su nombre indica, para la simplicidad, y
derivado de una propuesta anterior llamada SGMP), HEMS (un diseño más complejo de la
comunidad de investigadores) y CMIP (de la comunidad OSI). En una serie de reuniones se
decidió que HEMS se retiraría como candidato a la normalización, para ayudar a resolver el
conflicto, pero que se seguiría trabajando tanto en SNMP como en CMIP, con la idea de que
el SNMP podría ser un sistema más solución a corto plazo y el CMIP un enfoque a más largo
plazo. El mercado podría elegir la que le pareciera más adecuado. En la actualidad, SNMP
se utiliza de forma casi universal para la gestión basada en la red.

‘En los últimos años hemos asistido a una nueva fase de comercialización. Al principio,
los esfuerzos comerciales comprendían principalmente a los vendedores que proporcionaban
los productos básicos de red, y a los proveedores de servicios que ofrecían la conectividad y
los servicios básicos de Internet. Ahora Internet se ha convertido casi en un servicio "básico",
y gran parte de la atención más reciente se ha centrado en el uso de esta infraestructura global
de información para apoyar otros servicios comerciales. Esto se ha visto tremendamente
acelerado por la adopción generalizada y rápida de los navegadores y la tecnología de la
World Wide Web, que permite a los usuarios acceder fácilmente a la información conectada
en todo el mundo. Existen productos que facilitan el suministro de esa información y muchos
de los últimos desarrollos tecnológicos se han orientado a proporcionar servicios de
información cada vez más sofisticados, además de las comunicaciones básicas de datos por
Internet’. (Leiner, y otros, 1997, págs. 3-11,15-16).

34
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

1.1.2. Evolución del desarrollo web

[Link] Desarrollo del frontend

Los desarrolladores web han tenido un arsenal de herramientas, marcos de trabajo y

librerías al alcance de sus dedos, sin embargo, es importante recordar que esto no ha sido
siempre el caso.

1. En 1993, Tim Berners-Lee escribió la primera versión de HTML. Era un físico e

informático que implementó la primera comunicación exitosa entre un cliente del
Protocolo de Transferencia de Hipertexto (HTTP). HTML tuvo muchas iteraciones a
lo largo de los dos años siguientes. HTML v2 fue lanzado en 1995, seguido de v3 y
v4 en 1997. Finalmente, eso nos lleva a HTML5, que fue lanzado en 2011.

2. En 1995, un programador de Netscape llamado Brandan Eich desarrolló un nuevo

lenguaje de scripting llamado Mocha, que acabó conociéndose como JavaScript.

En la década de 2000, la web se convirtió en la plataforma número uno para el desarrollo

con la pila de tecnología web estándar HTML, CSS y JavaScript.

Un desarrollador debe seguir sólo tres simples pasos para obtener una aplicación web /
sitio de trabajo: (Plitnichenko, 2019)

1. Escribir y guardar el código.

2. Abrir los archivos localmente en el navegador para asegurarse de que funcionan

correctamente.

3. Desplegar la aplicación web con ayuda de un servicio o aplicación.

Con el desarrollo de la web, los requisitos de una plataforma web eran cada vez más
complejos. Codificar cada cosa manualmente llevaba mucho tiempo. Los desarrolladores de
JavaScript necesitaban literalmente reinventar la rueda en cada nuevo proyecto.

El desarrollo de tecnologías emergentes como los marcos de trabajo y librerías de java

script llegaron para mitigar el problema.

Nombre Año Tipo Descripción

35
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

jQuery 2006 Librería Hace que un desarrollador escriba menos líneas de

código simplificando numerosas cosas de JavaScript (es
decir, AJAX y la manipulación virtual del DOM).

CSS 2007 Framework Permite estandarizar el uso de CSS, orientado al diseño

y centrado en la interfaz de usuario.

Backbone 2010 Librería Una herramienta ligera para desarrollar un SPA y

mantener sincronizadas las diferentes partes de una
aplicación web.

AngularJS 2010 Framework Facilita el desarrollo de las aplicaciones web dinámicas

con la vinculación de datos bidireccional para escribir
menos código.

Ember 2011 Framework Diseñado para crear un SPA escalable con las mejores
prácticas.

React 2013 Library Permite construir aplicaciones web grandes, escalables

y rápidas. Requiere la instalación de bibliotecas
adicionales.

Vue 2014 Framework Ayuda a construir interfaces de usuario y SPA.

Angular 2016 Framework Proporciona las herramientas de desarrollo web

necesarias desde el principio.

Svelte 2016 Framework Herramienta ligera para la construcción de PWA.

En 2020, cada reto importante al que se enfrenta un desarrollador web implica una
herramienta personalizada para resolver el problema, es decir:

La librería de componentes Angular Material UI para construir formularios

impresionantes.

1. Redux/ MobX es la librería para la gestión de estados de React.

36
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

2. D3 es una poderosa herramienta de visualización para HTML, CSS.

3. [Link] para formatear datos.

4. React DnD para la construcción de interfaces complejas de arrastrar y soltar.

Como resultado, el enfoque de los desarrolladores cambió de "¿Cómo codificar?" a "¿Qué

herramienta elegir?".

¿Qué tecnologías parecen ser la tendencia para 2020? El informe basado en los datos de
Stack Overflow ha definido a los ganadores:

1. React;

2. Angular;

3. jQuery.

Son los Frameworks de frontend más populares.

Como se puede ver, Angular y React son dos de los más utilizados en la actualidad, lo que
ha desencadenado múltiples discusiones para saber cuál es el mejor.

Por supuesto, estos lenguajes no pueden hacer mucho sin un lenguaje de scripting del lado
del servidor que los acompañe.

[Link] Desarrollo del Backend

Un servidor de páginas web proporciona archivos de texto con etiquetas HTML que
interpreta un navegador. Si se requería hacer algo más que proporcionar archivos, se tenía
que escribir el propio servidor web. Naturalmente, era tremendamente incómodo, los
principales proveedores de servidores web idearon APIs para hacer sus productos más
extensibles. Sin embargo, desarrollar sitios web dinámicos con ellas habría sido casi igual de
lento: programar en C o C++, recompilar, parar y reiniciar el servidor y, por supuesto, depurar
en memoria era extremadamente tedioso, más si hablamos de programas multihilo para
mejorar el rendimiento.

En algún momento, algunas personas consideraron que esta situación exigía demasiado
esfuerzo para objetivos triviales, y crearon una forma para que lo que eventualmente se
37
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

convertiría en aplicaciones web se ejecutara como simples programas basados en texto y

creados para tal fin. Estos programas existirían como archivos en el servidor web, a menudo
entre archivos simples. Cuando se llamaban desde un navegador, el servidor los ejecutaba en
un canal, alimentando la petición del cliente y consumiendo su salida para transmitirla como
respuesta. Esto se conoce como la Interfaz Común de Pasarela (CGI Common Gateway
Interface), y un beneficio secundario era que, siempre que se ajustara al patrón, se podía
utilizar cualquier lenguaje que se quisiera, incluso los shell-scripts que se programan en dos
minutos. Sin embargo, el rey del script CGI era Perl.

A medida que los sitios web se hacían más sofisticados, la gente se daba cuenta de que
copiaba y pegaba muchos de los mismos contenidos. El mantenimiento de estos contenidos
habría sido una pesadilla, al tener que buscar constantemente enlaces rotos, errores
tipográficos y pequeñas incongruencias. La solución llegó con la idea de los server-side
includes, que permitían a los autores llamar a otros archivos del servidor web. De esta forma,
se podían guardar trozos de contenido en un único lugar y mandarlos a traer. Además, se
podía hacer referencia a los programas CGI y entrelazar su salida directamente en el HTML.
Esto era una ventaja especial, como puede decir cualquiera que haya hecho aplicaciones CGI
a mano.

La progresión natural de este paradigma fue plantar trozos de código ejecutable

directamente en los archivos HTML, y ejecutarlos a través de un intérprete especial. Hay
varias implementaciones populares que todavía se utilizan hoy en día:

1. En 1994, Rasmus Lerdorf escribió un conjunto de binarios Common Gateway

Interface (CGI) escritos en el lenguaje de programación C. Esto permitió a Rasmus
crear un sencillo script del lado del servidor para su "Página de Inicio Personal", que
fue cuando nació el lenguaje de programación PHP. Siguió creciendo en popularidad,
y se utilizó para crear el popular CMS, Wordpress. PHP también se utilizó para crear
muchos sitios web populares, incluido Facebook. PHP, un lenguaje de programación
orientado a la web que, a menudo se olvida, comenzó su vida como un script CGI de
Perl;

38
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

2. ASP, un protocolo teóricamente genérico para contener y ejecutar lenguajes de

scripting en páginas HTML. Microsoft acabó adoptando y utilizando ASP para crear
[Link] y C# para escribir aplicaciones del lado del servidor;

3. ColdFusion, un intento de ahorrar en costosos programadores al vestir el código de

una manera que los codificadores baratos de HTML pudieran entender, y

4. JSP, esencialmente un front-end de la arquitectura Java servlet de Sun y un competidor

de ASP.

5. En 2005, Ruby es otro lenguaje del lado del servidor con muchas funcionalidades,
específicamente con el marco de trabajo Ruby On Rails (RoR).

6. También en 2005, aparece Django es un nuevo marco de trabajo, está incrementando

su popularidad. Esto impulsa el uso de Python como lenguaje del lado del servidor.
Hoy en día, Python se utiliza ampliamente para muchas aplicaciones web.

7. En 2009, Ryan Dahl creó algo que crearía un efecto dominó de nuevos desarrolladores.
Creó una forma de escribir JavaScript que lo ejecutara como un lenguaje del lado del
servidor. Este lenguaje de programación se conoce como NodeJS, y rápidamente se
hizo popular y muy utilizado. (technotoken, 2021)

8. En 2011, Taylor Otwell lanzó un nuevo marco de trabajo llamado Laravel, que se
disparó en popularidad durante el siguiente par de años y sigue siendo muy popular
hoy en día, PHP comenzó un rápido regreso en la comunidad de desarrollo web.

Aunque la llegada del CGI permitió una enorme innovación a un coste insignificante,
no fue la única parte de la infraestructura conceptual de la Web que evolucionó. Para los
que insistían en gastar grandes sumas de dinero en proyectos informáticos, había
soluciones empresariales a la altura. Al mismo tiempo que evolucionaba el paradigma de
la incrustación de código en HTML, lo hacía el de la API del servidor, en forma de
servidor de aplicaciones.

Al principio, un servidor de aplicaciones se concebía como una máquina propia o un

clúster de ellas, que se situaba entre un servidor web normal y un servidor de base de datos
-de nuevo, o clústeres de ellos-. Es caro. La idea era que los servidores de contenido
39
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

regulares respondieran al mayor volumen de peticiones estáticas mientras que reenviaban

las peticiones dinámicas al servidor de aplicaciones, que serían menos numerosas, pero
más intensivas en recursos. En teoría, esto permitiría a la aplicación escalar de forma
rápida y transparente para sus usuarios, al tiempo que se evitarían las lentas y costosas
consideraciones de ingeniería.

En esta configuración, era inconcebible andar dando vueltas con archivos individuales
e intentando mantenerlos sincronizados en varios servidores de aplicaciones. Lo que
exigía era meter toda una aplicación web en un paquete monolítico para que pudiera ser
empujado al clúster en una sola pieza. Al mismo tiempo, los archivos del paquete no se
correspondían necesariamente con las páginas del sitio web, sino que se generaban sobre
la marcha, al igual que las API del servidor. El ejemplo más destacado de estos paquetes
es probablemente el servlet Java, para el que casi todas las grandes empresas de software,
clubes y otros tienen su propia marca de servidor de aplicaciones. Excepto Microsoft, por
supuesto, que tiene [Link], que es su versión propietaria de básicamente lo mismo.

A los lenguajes específicos de dominio destinados a generar tablas y rellenar

formularios en HTML les agregaron herramientas para facilitar el desarrollo. Los marcos
de trabajo de la web se suministran ahora con sus propios servidores incrustados para
pruebas, o son servidores web diseñados desde cero. Las distintas funciones de los
servidores de contenidos y aplicaciones han vuelto a fusionarse y ahora pueden alquilarse
a precios asequibles en función del almacenamiento, el tráfico y el tiempo de cálculo.
Posiblemente lo más destacable sea la gran cantidad de estado de las aplicaciones, la lógica
de presentación e incluso la lógica empresarial que ha migrado al navegador y/o se ofrece
como widget de terceros, posiblemente bajo algún tipo de modelo de negocio freemium.

Ahora nos encontramos flotando en un mar de productos, en todos los puntos de lo que
se conoce como pila (stack). La pila comienza con el sistema operativo y/o la máquina
virtual, luego pasa por el servidor web, el almacén de datos, el lenguaje de programación
de aplicaciones, el marco de trabajo de las aplicaciones y, por último, el sistema de gestión
de contenidos, en el que se puede incluir las plataformas de blogs, wikis y redes sociales.
Si se elige un producto en cualquier lugar de esta pila, se observa que se solapa en gran

40
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

medida con casi todos los demás productos de su categoría, y que los pocos
comportamientos únicos que ofrece, los hace de forma sorprendentemente incompatible.
Mezclar y combinar pequeños trozos de funcionalidad no es económico, así que se escribe
lo propio; todavía no existe el Lego Web. Esta incompatibilidad ha tenido un respiro con
la llegada de los servicios web y los objetos de JavaScript que se aventuran a superar la
sofisticación de los bloggers, aunque crean su propia colección de problemas.

[Link]. El estado del desarrollo web

La computación utilitaria es genial porque amortiza los grandes costes de capital en

pequeños gastos de funcionamiento, pero ¿puede ejecutar una aplicación de Amazon EC2
AWS en Azure o Google App Engine? ¿Pueden los motores de búsqueda indexar los
comentarios de un blog de terceros y, lo que es más importante, asociarlos a un sitio en
particular? ¿Puede un widget interactuar inteligentemente con otro si ambos están en la
misma página? ¿Se podría hacer? ¿Es adecuado no tener la posesión física de sus datos? Si
uno de estos proveedores desapareciera de la noche a la mañana, ¿qué pasa con el sitio? Si
sucede, ¿quién se enteraría primero? ¿el dueño del sitio o sus clientes?

Ah, ¿y qué hay de las docenas de cuentas que todo el mundo acaba registrando para
interactuar con todos estos productos, como usuarios, propietarios de sitios y
desarrolladores? ¿Gestión de identidades federadas? Se está acercando, pero aún falta mucho.

Lo interesante de todo este desarrollo reciente en la Web es que realmente enreda las
relaciones comerciales con las tecnológicas. Luego toma ese desorden y lo expone para que
todo el mundo lo vea. Esto significa que tu relación con tus clientes puede verse afectada con
demasiada facilidad por la relación de otra persona con uno de tus proveedores. Posiblemente
siempre ha sido así, pero no hasta el punto de depender de dos docenas de empresas diferentes
para que tu sitio funcione como es debido, cada vez que alguien carga una página. Es posible
que la interdependencia sea algo bueno, pero lo que tenemos actualmente es sólo
dependencia. Lo que se busca es que los sistemas sean un poco más robustos que estar sujetos
al capricho de un proveedor en particular, o del proveedor de un proveedor. Además, si hay
un problema con alguno de ellos, el dueño del sitio debería enterarse primero.

41
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

En su forma más cruda, la web no tiene estado, es anónima y está muy poco acoplada.
Esto significa que cualquier cosa que pueda entender HTTP y HTML también puede mover
información de un lado a otro y navegar entre recursos. La encarnación actual del protocolo
se diseñó explícitamente para aprovechar al máximo la negociación de contenidos, el
almacenamiento en caché y los proxies. El contenido fue concebido para ser transformado,
filtrado, cortado y demás. Parece que nos hemos olvidado de gran parte de esta funcionalidad,
y sólo nos aventuramos en ella cuando la situación lo exige de forma incontestable. Hoy en
día, muchos sitios simplemente no funcionan fuera de un navegador convencional con
cookies y JavaScript activados.

Muchas API, incluso las que dicen ser RESTful, hacen poco más que proporcionar la
misma información que la que hay en las páginas, o la misma funcionalidad que el envío de
ciertos formularios en un sitio determinado. Lo hacen dentro de una caja de arena de claves
de API, apretones de manos criptográficos dudosos y limitación de velocidad. Luego exigen
la creación de envoltorios para traducir sus barrocas entrañas en bibliotecas de software
utilizables, una para cada lenguaje de programación. Se supone que el beneficio de esto es el
acceso a un conducto de datos fiables y legibles por la máquina.

La cuestión es que los datos, sean los que sean, ya están en la página. Puedes ir a buscarlos
visitando su URI. Luego puedes extraerlos con las herramientas que consideres oportunas.
¿No te gusta la sobrecarga del HTML superfluo, o temes que un cambio en el diseño torpedee
tu canal de datos? Pues bien, se puede proporcionar una variante de los mismos datos que sea
más fácil de procesar y colocarla más o menos en la misma dirección. Algunas empresas lo
hacen, pero sólo unas pocas. Twitter es uno de ellos. Además de abrirse a los desarrolladores
de terceros, parece que utilizan su API para impulsar su propio sitio. También proporcionan
una opción para utilizar la autenticación HTTP sin estado, sin cookies, secretos compartidos
o criptografía falsa.

El problema es que las representaciones de los objetos de datos que hacen las máquinas
son sus representaciones. Tienen su propia comprensión idiosincrática de lo que es un objeto
de usuario, por ejemplo. Aunque suministren los datos en una sintaxis neutral para el
proveedor, como XML o JSON, se tiene que traducir la semántica de lo que significa cada

42
Introducción a las aplicaciones web
 1.1. Evolución de las aplicaciones web

campo a la representación interna que use el desarrollador. Esto significa que no se puede
simplemente transportar los datos desde Twitter, o cualquier otro proveedor de API, con una
interfaz de datos genérica. Se tiene que escribir una capa adicional de código, específica para
ellos. Esta es la diferencia entre escribir un adaptador para todos los sitios web, y escribir uno
para cada sitio que sea necesario para la aplicación.

[Link]. Consumo de recursos

Un sitio no es como una carpeta llena de archivos en un servidor, ni como una aplicación
monolítica en la nube, sino como una colección de recursos potencialmente dispares bajo la
gestión de una entidad empresarial concreta. Cualquier recurso en la web puede apuntar y
utilizar cualquier otro recurso en cualquier otro lugar con el mismo esfuerzo. Incluso puede
hacerlo a través de los límites de la organización, a menos que la organización de destino se
niegue a cooperar, que sería extraño, ya que la organización en cuestión suele salir ganando
en conjunto con lo que se ha convertido en una forma de referencia perfectamente natural
que llamamos enlace.

Lo que se busca es un sistema que es, en cierto modo, un conducto de información tanto
como un origen, que interactúa en gran medida con otros sistemas basados en la web, pero
no confía completamente en ninguno de ellos. Funciona con todos los clientes, no sólo con
los últimos navegadores, donde funciona como "puede consumir contenidos, seguir enlaces
y enviar datos". No depende de mecanismos de estado o código del lado del cliente, como
cookies o JavaScript, aunque puede utilizarlos para aumentar la experiencia. Es amigable y
próxima a los robots y motores de búsqueda, aunque resistente al abuso. Transmite datos
hacia y desde terceros, pero mantiene su posición entre sus usuarios y otras entidades para
garantizar que puede cumplir sus promesas. Registra cada clic para un análisis estadístico
más completo. Cada dato se representa en una estructura semántica para cada representación
capaz de hacerlo, y cada URI se duplica efectivamente como un punto final de la API. Una
parte podría residir en la nube, mientras que otra podría vivir fácilmente en su oficina o en o
en un centro de datos.

43
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

La ganancia, es múltiple. Al reducir el lenguaje de comandos a HTTP simple, se puede

dar cabida a todo el mundo, independientemente de la plataforma de desarrollo. Esto incluye
las operaciones dentro de los confines del propio sistema, componiéndolo potencialmente de
muchas plataformas diferentes que se ejecutan en muchos lugares distintos, cada una de las
cuales aporta trozos de funcionalidad. También se puede tomar prestados vocabularios
establecidos por personas que tienen mucho más tiempo para considerar cómo deben ser esas
estructuras, y que es mucho más probable que sean adoptadas por otras personas. Asimismo,
se puede consumir datos de cualquier fuente apropiada y entrelazarlos con la aplicación. Al
maximizar la operatividad y la ausencia de estado del sistema, ya no hay que preocuparse de
rechazar a los usuarios paranoicos o a los que tienen navegadores anticuados, aunque su
experiencia pueda ser decididamente más lenta. (Taylor, 2010)

1.2. Arquitectura de las aplicaciones web

La mayoría de las aplicaciones empresariales están compuestas por un gran número de
componentes en todo el entorno. Además, estos componentes suelen tener diferentes niveles
de abstracción. Para cumplir con los requisitos empresariales siempre cambiantes, se debe
crear una arquitectura de aplicaciones que soporte:

1. Mantenibilidad

2. Reutilización

3. Escalabilidad

4. Robustez

5. Seguridad

Esta sección contiene una serie de temas que ayudarán a comprender los fundamentos de
la arquitectura y el diseño. Comienza describiendo qué es la arquitectura de software y por
qué es importante. Discute los temas generales que debes considerar, como los requisitos y
las restricciones y la intersección entre el usuario, el negocio y el sistema en el que se
ejecutará la aplicación. A continuación, se describen principios clave de diseño y los patrones

44
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

y estilos arquitectónicos que se utilizan hoy en día. Por último, se ofrece una visión del
enfoque que debe seguir al diseñar su arquitectura.

1.2.1. ¿Qué es la arquitectura de aplicaciones web?

La arquitectura de aplicaciones de software es el proceso de definición de una solución
estructurada que cumple todos los requisitos técnicos y operativos, al tiempo que optimiza
los atributos de calidad comunes, como el rendimiento, la seguridad y la capacidad de
gestión. Implica una serie de decisiones basadas en una amplia gama de factores, y cada una
de estas decisiones puede tener un impacto considerable en la calidad, el rendimiento, la
capacidad de mantenimiento y el éxito general de la aplicación.

Philippe Kruchten, Grady Booch, Kurt Bittner y Rich Reitman derivaron y refinaron una
definición de arquitectura basada en el trabajo de Mary Shaw y David Garlan (Shaw y Garlan
1996). Su definición es:

"La arquitectura de software abarca el conjunto de decisiones significativas sobre la

organización de un sistema de software, incluyendo la selección de los elementos
estructurales y sus interfaces por los que se compone el sistema; el comportamiento
especificado en la colaboración entre esos elementos; la composición de estos elementos
estructurales y de comportamiento en subsistemas más grandes; y un estilo arquitectónico
que guía esta organización. La arquitectura del software también implica la funcionalidad, la
usabilidad, la resistencia, el rendimiento, la reutilización, la comprensibilidad, las
limitaciones tecnológicas, compensaciones y preocupaciones estéticas".

La arquitectura se centra en cómo los principales elementos y componentes de una

aplicación son utilizados por, o interactúan con, otros elementos y componentes principales
dentro de la aplicación. La selección de estructuras de datos y algoritmos o los detalles de los
componentes individuales son cuestiones de diseño. Los problemas de arquitectura y diseño
a menudo se solapan. En lugar de utilizar reglas rígidas para distinguir entre arquitectura y
diseño, tiene sentido combinar estas dos áreas. En algunos casos, las decisiones son
claramente de naturaleza arquitectónica. En otros casos, las decisiones son más sobre el
diseño, y cómo ayudan a realizar esa arquitectura. (Microsoft, 2009).
45
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

El desarrollo de un sistema basado en la web supone mucho más trabajo para un ingeniero
de software que el desarrollo de software tradicional. El ciclo de vida de un sistema web, el
proceso de desarrollo, el seguimiento y el mantenimiento son algunos conceptos que difieren
significativamente en la ingeniería de software clásica. Es comprensible que los métodos de
desarrollo tradicionales no sean adecuados para los sistemas basados en la web, y por qué
suelen necesitar correcciones y extensiones para hacerlos utilizables para el desarrollo web.

En el caso de proyectos a gran escala, el uso de patrones de diseño es esencial. Existen

numerosos patrones de diseño, y tanto en entornos de escritorio como en la web, el más
popular es el modelo-vista-controlador (MVC).

1.2.2. Resumen de estilos arquitectónicos

Tabla 1.1 Resumen de estilos arquitectónicos

Estilo arquitectónico Descripción

Cliente/Servidor Segrega el sistema en dos aplicaciones, donde el cliente hace

peticiones al servidor. En muchos casos, el servidor es una base
de datos con la lógica de la aplicación.

Representada como procedimientos almacenados.

Aplicaciones CGI Basada en cliente-servidor. Usa un navegador, scripts CGI y

bases de datos.

Arquitectura MVC Separa la presentación de los datos a través de una capa

intermedia llamada controlador.

Arquitectura Se refiere a las aplicaciones que exponen y consumen

Orientada a servicios funcionalidad como un servicio mediante contratos y mensajes.
(SOA)

46
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

1.2.2. Arquitectura cliente servidor

La arquitectura cliente/servidor describe los sistemas distribuidos que implican un sistema
cliente y servidor separados, y una red de conexión. La forma más sencilla de sistema
cliente/servidor implica una aplicación de servidor a la que acceden directamente varios
clientes, lo que se conoce como estilo arquitectónico de 2 niveles.

En la actualidad, algunos ejemplos del estilo arquitectónico cliente/servidor son los

programas basados en el navegador web que se ejecutan en Internet o en una intranet;
aplicaciones que acceden a servicios de datos en red; aplicaciones que acceden a almacenes
de datos remotos (como lectores de correo electrónico, clientes FTP y herramientas de
consulta de bases de datos); y herramientas y utilidades que manipulan sistemas remotos
(como herramientas de gestión de sistemas y herramientas de monitorización de red).

Las principales ventajas del estilo arquitectónico cliente/servidor son:

1. Mayor seguridad. Todos los datos se almacenan en el servidor, que generalmente

ofrece un mayor control de la seguridad que las máquinas cliente.

2. Acceso centralizado a los datos. Como los datos se almacenan sólo en el servidor, el
acceso y las actualizaciones a los datos son mucho más fáciles de administrar que en
otros estilos arquitectónicos.

3. Facilidad de mantenimiento. Las funciones y responsabilidades de un sistema

informático se distribuyen entre varios servidores que se conocen entre sí a través de
una red. Esto garantiza que un cliente no se vea afectado por la reparación de un
servidor, actualización o reubicación del servidor.

47
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

Ilustración 1.1 Arquitectura cliente servidor

1.2.3. Arquitectura basada en CGI

Fue una de las primeras arquitecturas utilizadas para el desarrollo de aplicaciones WEB.
CGI significa Common Gateway Interface o interfaz de pasarela común. Es un mecanismo
que permite que un servidor web ejecute un programa escrito en cualquier lenguaje de
programación, por lo común en respuesta a un formulario HTML u otro tipo, el cual le pasa
parámetros que vienen del usuario a través de formularios, parámetros de configuración y
con esta información ejecuta el programa o script y el resultado se regresa al usuario como
una página web o cualquier otro tipo de contenido.

Ilustración 1.2 Arquitectura cliente-servidor con CGI

48
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

Gracias a este sencillo mecanismo, las páginas web, que hasta el momento de la aparición
de CGI tenían unos contenidos estáticos e inmutables, son generadas dinámicamente en
respuesta a peticiones concretas. Se abre así un nuevo mundo a los programadores de
aplicaciones web. Estudiaremos a continuación el API de CGI, el cual ha quedado relegado
en muchos casos a un papel secundario, pues adolece de muchos problemas, siendo la falta
de rendimiento el más destacado de todos.

Lo primero que debemos recordar a la hora de escribir programas como CGI es el

mecanismo de comunicación que nos proporciona el servidor web. Disponemos de dos
opciones para enviar datos a un CGI (los datos generalmente procederán de un usuario, por
norma general a partir de un formulario):

1. Método GET. El método GET pasa toda la información (excepto archivos) al CGI en
la línea de dirección de la petición HTTP.

2. Método POST. El método POST pasa toda la información al CGI en la entrada

estándar, incluyendo archivos.

Una vez recibe una petición que debe dirigir a un archivo CGI, el servidor ejecuta este
programa, el CGI, y recibe la información a través de variables de entorno (o a través de la
entrada estándar, si fuese pertinente). Algunas de las variables de entorno definidas por el
estándar CGI son:

SERVER_NAME Nombre del servidor.

SERVER_PROTOCOL Protocolo utilizado por la petición.

REQUEST_METHOD Método utilizado para la invocación (GET o POST).

PATH_INFO Información de la ruta especificada en la petición.

PATH_TRANSLATED Ruta física a la ubicación del CGI en el servidor.

SCRIPT_NAME Nombre del CGI.

REMOTE_ADDR Dirección IP del ordenador que realiza la petición.

REMOTE_HOST Nombre del ordenador que realiza la petición.

49
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

REMOTE_USER Usuario que realiza la petición.

AUTH_TYPE Tipo de autentificación.

CONTENT_TYPE Tipo MIME del contenido de la petición, especialmente útil en peticiones

POST.

CONTENT_LENGTH Tamaño del contenido especialmente útil en peticiones POST.

La mayoría de servidores web proveen además de la variable de entorno llamada

QUERY_STRING, que contiene los datos de la petición si ésta ha sido de tipo GET o si
hemos añadido datos a la URL.

La decodificación y análisis de esta cadena manualmente. Afortunadamente existen

librerías para casi todos los lenguajes de programación destinadas a facilitarnos la tarea.

Las reglas de codificación son las siguientes:

1. Se separa la lista de parámetros del resto de la dirección URL con el caracter ?

2. Se separan los parámetros (que siempre van en pares nombre, valor) mediante el
caracter &. En algunos casos se acepta el carácter; como sustituto para la separación.

3. Los nombres de parámetro se separan de los valores con el carácter =.

4. Se sustituyen los caracteres especiales siguiendo la siguiente tabla:

 El carácter ‘ ‘ (espacio en blanco) se convierte en +.

 Los caracteres no alfanuméricos y los caracteres especiales, como los usados para
codificación (+, etc.), se representan de la forma %HH, donde HH representa el
valor hexadecimal del código ASCII del carácter.

 Los saltos de línea se representan con %0D %0A.

Algunos servidores web añaden datos extra al entorno. La mayoría de estas variables
adicionales empiezan con HTTP_ para evitar conflictos con versiones posteriores del
estándar.

50
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

Los CGI deben responder a las peticiones construyendo ellos mismos parte de la respuesta
HTTP que recibirá el cliente. Es decir, deben indicar, en primer lugar, el tipo MIME del
contenido que sirven. Pueden añadir posteriormente algunos campos adicionales (los
especificados en el estándar HTTP). Después de una línea en blanco separadora, debe
aparecer el contenido.

Actualmente este método casi no se utiliza, pero el estándar se sigue respetando. Por
ejemplo, PHP que significa PHP: Hypertext Preprocessor. Es rápido, interpretado, orientado
a objetos y multiplataforma y tiene disponibles una gran cantidad de librerías y se utiliza para
aprender a programar o para desarrollar aplicaciones web complejas. Además de que todo su
entorno es de código libre. Se usa conjuntamente con Linux, Apache y MySQL o Postgres
SQL dando lugar al acrónimo LAMP. Comúnmente al servidor Apache se le integra un
módulo propio que permite a las aplicaciones escritas en PHP resulten mucho más rápidas
que las aplicaciones CGI. (Mateu, 2004)

1.2.4. Arquitectura modelo vista controlador MVC

El patrón de diseño MVC no es un invento nuevo. En 1979, Trygve Reenskaug vio la
necesidad de crear un patrón que llamó "Thing-Model-View-Editor".

Una versión revisada del mismo fue implementada en Smalltalk-80, con su nuevo nombre,
MVC.

Ilustración 1.3 Modelo vista controlador

51
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

El patrón de diseño MVC asigna uno de los tres papeles diferentes a un objeto en una
aplicación. Estos roles son: modelo, vista y controlador. Esta asignación define no sólo el
papel de un objeto, sino también la forma en que puede comunicarse con otros objetos. Un
grupo de objetos MVC similares suele llamarse capa; por ejemplo, un grupo de modelos se
llama capa de modelos.

El MVC tiene muchas ventajas para el desarrollo web. Los objetos de las aplicaciones
basadas en MVC son más reutilizables; sus interfaces se definen con mayor precisión, y la
aplicación es mucho más ampliable que otras aplicaciones.

Modelo. El modelo encapsula los datos específicos de una aplicación y define la lógica y
el proceso computacional que modifica, manipula o procesa estos datos.

Un objeto modelo puede, obviamente, conectarse a otro modelo, con relaciones uno-uno
o uno-muchos. Los objetos modelo representan conocimientos y la experiencia relacionados
con un dominio específico, por lo que pueden volver a utilizarse en el futuro si hay que
resolver problemas similares.

Por lo general, un objeto modelo no tiene una conexión directa con los objetos de la vista.
Este es un requisito importante, ya que los datos y la vista suelen estar en estrecha relación.
Los objetos de vista presentan datos, aunque un objeto de vista permite actualizar o modificar
estos datos en una interfaz de usuario. Sin embargo, el proceso correcto es que las
operaciones en la capa de vista, que crean o modifican datos, se comunican a través de un
objeto controlador y dan lugar a la creación o actualización de un objeto modelo. En el
sentido inverso, la situación es la misma, cuando un objeto modelo cambia (es decir, los datos
llegan a través de la conexión de red), éste notifica a un objeto controlador, que actualiza el
objeto vista correspondiente.

Vista. Un objeto vista es un objeto que los usuarios pueden ver en su aplicación. La vista
sabe cómo reaccionar con las acciones del usuario y cómo dibujarse a sí mismo. El principal
propósito de los objetos vista es mostrar los datos de los objetos modelo y hacer que sea
posible editar esos datos. A pesar de esto, el objeto vista no está en relación directa con
objetos modelo en la aplicación MVC.

52
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

Los objetos de vista reciben información sobre los cambios en los datos del modelo a
través de los objetos controlador y comunican las acciones iniciadas por el usuario (por
ejemplo, una dirección de correo electrónico introducida en un campo de texto) a través del
controlador a los objetos modelo.

Controlador. Como se ha mostrado anteriormente, el objeto controlador juega un papel

de intermediario entre un modelo y un objeto de vista. El propósito principal de la capa del
controlador es emitir y transmitir los cambios de la capa de la vista y del modelo en ambas
direcciones.

Un controlador puede servir para configurar y coordinar tareas en una aplicación y

gestionar el ciclo de vida de otros objetos.

1.2.5. Elementos arquitectónicos de sistema básicos

El diagrama siguiente es una representación aproximada de infraestructura web.

Ilustración 1.4 Infraestructura web típica

‘Un usuario busca en Google algo relacionado con nuestro sitio. El primer resultado es de
nuestro sitio web. El usuario hace clic en el resultado que redirige su navegador a la liga
correspondiente. El navegador del usuario envía una solicitud a un servidor DNS, el cual está
en nuestro dominio. Se revisa de qué país es la petición y regresa una IP al navegador y de
esta forma sabe cómo contactar con nuestro sitio.
53
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

La solicitud llega a nuestro balanceador de carga, que elige por algún algoritmo como
Round-Robin, uno de los n servidores web que tiene el sitio en ese momento para procesar
la solicitud. El servidor web busca alguna información sobre la imagen en nuestro servicio
de caché y obtiene el resto de los datos de la base de datos.

El servidor ahora renderiza la vista como HTML y la envía de vuelta al navegador del
usuario, pasando primero por el balanceador de carga. La página contiene activos JavaScript
y CSS que se cargan del sistema de almacenamiento en la nube, que está conectado a nuestra
CDN, por lo que el navegador del usuario se pone en contacto con la CDN para recuperar el
contenido. Por último, el navegador muestra la página para que el usuario la vea.

[Link] DNS

‘DNS son las siglas de "Domain Name System" (Sistema de Nombres de Dominio) y es
una tecnología troncal que hace posible la World Wide Web. En el nivel más básico, el DNS
proporciona una búsqueda clave/valor de un nombre de dominio (por ejemplo, [Link])
a una dirección IP (por ejemplo, [Link]), que es necesaria para que la computadora
dirija una solicitud al servidor apropiado. Haciendo una analogía con los números de
teléfono, la diferencia entre un nombre de dominio y una dirección IP es la diferencia entre
"llamar a Juan Pérez" y "llamar al 201-867-5309". Al igual que antes se necesitaba una guía
telefónica para buscar el número de Juan, se necesita el DNS para buscar la dirección IP de
un dominio. Así que se puede pensar en el DNS como la guía telefónica de Internet.

[Link] Balanceador de carga

‘Antes de entrar en detalles sobre el balanceo de carga, tenemos que dar un paso atrás para
discutir el escalado de aplicaciones horizontal vs. vertical. ¿Qué son y cuál es la diferencia?
Dicho de forma muy sencilla en este post de StackOverflow, el escalado horizontal significa
que se escala añadiendo más máquinas al conjunto de recursos, mientras que el escalado
"vertical" significa que se escala añadiendo más potencia (por ejemplo, CPU, RAM) a una
máquina existente.

54
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

‘En el desarrollo web, (casi) siempre se quiere escalar horizontalmente porque, para
simplificar, las cosas se rompen, los servidores se caen al azar. Las redes se degradan. Centros
de datos enteros se desconectan ocasionalmente. Tener más de un servidor permite planificar
las interrupciones para que la aplicación siga funcionando. En otras palabras, la aplicación
es "tolerante a fallos". En segundo lugar, el escalado horizontal permite acoplar mínimamente
diferentes partes del backend de su aplicación (servidor web, base de datos, servicio X, etc.)
haciendo que cada una de ellas se ejecute en diferentes servidores. Por último, se puede llegar
a una escala en la que ya no sea posible escalar verticalmente. No hay ninguna computadora
en el mundo lo suficientemente grande como para realizar todos los cálculos de la aplicación.
En la plataforma de búsqueda de Google como ejemplo por excelencia, aunque esto se aplica
a empresas a escalas mucho más pequeñas. Algunas empresas, por ejemplo, ejecutan entre
150 y 400 instancias AWS EC2 en un momento dado. Sería un reto proporcionar toda esa
potencia de cálculo a través del escalado vertical.

‘Los balanceadores de carga hacen posible el escalado horizontal. Dirigen las solicitudes
entrantes a uno de los muchos servidores de aplicaciones que suelen ser clones / imágenes en
espejo de cada uno y envían la respuesta del servidor de aplicaciones de vuelta al cliente.
Cualquiera de ellos debería procesar la solicitud de la misma manera, así que sólo es cuestión
de distribuir las solicitudes entre el conjunto de servidores para que ninguno de ellos esté
sobrecargado.

‘Conceptualmente, los balanceadores de carga son bastante sencillos. Pero para

implementarlos hay ciertas complicaciones.

[Link]. Servidores de aplicaciones web

‘A alto nivel, los servidores de aplicaciones web son relativamente sencillos de describir.
Ejecutan la lógica de negocio principal que maneja la solicitud de un usuario y devuelve el
HTML al navegador del usuario. Para hacer su trabajo, normalmente se comunican con una
variedad de infraestructura de backend como bases de datos, capas de caché, colas de trabajo,
servicios de búsqueda, otros microservicios, colas de datos/registro, y más. Como se ha

55
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

mencionado anteriormente, normalmente se tienen al menos dos, y a menudo muchos más,

conectados a un balanceador de carga con el fin de procesar las solicitudes de los usuarios.

‘Las implementaciones de servidores de aplicaciones requieren la elección de un lenguaje

específico ([Link], Ruby, PHP, Scala, Java, C# .NET, etc.) y un marco MVC web para ese
lenguaje (Express para [Link], Ruby on Rails, Play para Scala, Laravel, Yii2, para PHP,
etc.).

[Link]. Servidores de bases de datos

‘Toda aplicación web moderna aprovecha una o más bases de datos para almacenar
información. Las bases de datos proporcionan formas de definir sus estructuras de datos,
insertar nuevos datos, encontrar datos existentes, actualizar o eliminar datos existentes,
realizar cálculos a través de los datos, y más. En la mayoría de los casos, los servidores de la
aplicación web se comunican directamente con una, al igual que los servidores de trabajo.
Además, cada servicio backend puede tener su propia base de datos aislada del resto de la
aplicación.

‘Los manejadores de bases de datos se clasifican básicamente en: SQL y NoSQL.

‘SQL significa "Structured Query Language" (Lenguaje de Consulta Estructurado) y se

inventó en la década de 1970 para proporcionar una forma estándar de consultar conjuntos
de datos relacionales que fuera accesible a un amplio público. Las bases de datos SQL
almacenan los datos en tablas que están vinculadas entre sí a través de identificadores
comunes, normalmente enteros, que se denominan claves primarias.

‘NoSQL, que significa "Non-SQL", es un nuevo conjunto de tecnologías de bases de datos

que ha surgido para manejar las cantidades masivas de datos que pueden ser producidos por
las aplicaciones web a gran escala (la mayoría de las variantes de SQL no escalan
horizontalmente muy bien y sólo puede escalar verticalmente a un cierto punto).

‘En general, la industria se está alineando en SQL como una interfaz incluso para las bases
de datos NoSQL, por lo que realmente se debe aprender SQL.

56
Introducción a las aplicaciones web
 1.2. Arquitectura de las aplicaciones web

[Link]. Servicio de caché

‘Un servicio de almacenamiento en caché proporciona un sencillo almacén de datos

clave/valor que permite guardar y buscar información en un tiempo cercano a O(1). Las
aplicaciones suelen aprovechar los servicios de caché para guardar los resultados de cálculos
costosos, de modo que sea posible recuperar los resultados de la caché en lugar de volver a
calcularlos la próxima vez que se necesiten. Una aplicación puede almacenar en caché los
resultados de una consulta a la base de datos, las llamadas a servicios externos, el HTML de
una determinada URL, etc.

[Link]. Servicios

‘Una vez que una aplicación alcanza una cierta escala, es probable que haya ciertos
"servicios" que se ejecuten como aplicaciones separadas. No están expuestos al mundo
exterior, pero la app y otros servicios interactúan con ellos:

1. Servicio de cuentas. almacena los datos de los usuarios en todos nuestros sitios, lo
que nos permite ofrecer fácilmente oportunidades de venta cruzada y crear una
experiencia de usuario más unificada.

2. Servicio de pago. proporciona una interfaz para facturar las tarjetas de crédito de los
clientes.

3. Servicio de formatos. Proporciona una interfaz sencilla, por ejemplo, convertir

HTML y devolver el documento PDF correspondiente.

[Link]. Almacenamiento en la nube

‘"El almacenamiento en la nube es una forma sencilla y escalable de almacenar, acceder

y compartir datos a través de Internet", según AWS. Se puede utilizar para almacenar y
acceder a más o menos cualquier cosa que se almacene en un sistema de archivos local con
las ventajas de poder interactuar con él a través de una API RESTful sobre HTTP. La oferta
de S3 de Amazon es, con mucho, el almacenamiento en la nube más popular disponible hoy
en día.

57
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

[Link]. CDN

‘CDN son las siglas de "Content Delivery Network" (Red de Entrega de Contenidos) y la
tecnología proporciona una forma de servir activos como HTML estático, CSS, Javascript e
imágenes a través del web mucho más rápido que servirlos desde un único servidor de origen.
Funciona distribuyendo el contenido a través de muchos servidores "de borde" en todo el
mundo, de modo que los usuarios acaban descargando los activos desde los servidores "de
borde" en lugar del servidor de origen. Por ejemplo, en la imagen siguiente, un usuario de
España solicita una página web de un sitio con servidores de origen en Nueva York, pero los
activos estáticos de la página se cargan desde un servidor de "borde" de la CDN en Inglaterra,
lo que evita muchas peticiones HTTP lentas a través del Atlántico’ (Fulton, 2017).

1.3. Tecnologías para el desarrollo de aplicaciones web

Inicialmente la web era simplemente una colección de páginas estáticas, documentos, etc.,
que podían consultarse o descargarse.

El siguiente paso en su evolución fue la inclusión de un método para confeccionar páginas

dinámicas que permitiesen que lo mostrado fuese dinámico (generado o calculado a partir de
los datos de la petición). Dicho método fue conocido como CGI (Common Gateway
interface) y definía un mecanismo mediante el cual podíamos pasar información entre el
servidor HTTP y programas externos. Los CGI siguen siendo muy utilizados, puesto que la
mayoría de los servidores web los soportan debido a su sencillez. Además, nos proporcionan
total libertad a la hora de escoger el lenguaje de programación para desarrollarlos.

El esquema de funcionamiento de los CGI tenía un punto débil: cada vez que recibíamos
una petición, el servidor web lanzaba un proceso que ejecutaba el programa CGI. Como, por
otro lado, la mayoría de CGI estaban escritos en algún lenguaje interpretado (Perl, Python,
etc.) o en algún lenguaje que requería run-time environment (VisualBasic, Java, etc.), esto
implicaba una gran carga para la máquina del servidor.

Además, si la web tenía muchos accesos al CGI, esto suponía problemas graves. Por ello
se empiezan a desarrollar alternativas a los CGI para solucionar este grave problema de

58
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

rendimiento. Las soluciones vienen principalmente por dos vías. Por un lado, se diseñan
sistemas de ejecución de módulos más integrados con el servidor, que evitan que éste tenga
que instanciar y ejecutar multitud de programas. La otra vía consiste en dotar al servidor de
un intérprete de algún lenguaje de programación (RXML, PHP, VBScript, etc.) que nos
permita incluir las páginas en el código de manera que el servidor sea quien lo ejecute,
reduciendo así el tiempo de respuesta.

A partir de este momento, se vive una explosión del número de arquitecturas y lenguajes
de programación que nos permiten desarrollar aplicaciones web. Todas ellas siguen alguna
de las dos vías ya mencionadas. De ellas, las más útiles y las que más se utilizan son aquellas
que permiten mezclar los dos sistemas, es decir, un lenguaje de programación integrado que
permita al servidor interpretar comandos que “incrustemos” en las páginas HTML y un
sistema de ejecución de programas más enlazado con el servidor que no presente los
problemas de rendimiento de los CGI.

Una de las tecnologías que más éxito ha obtenido y una de las que más se utiliza en Internet
es el lenguaje de programación interpretado por el servidor PHP. Se trata de un lenguaje que
permite incrustar HTML en los programas, con una sintaxis que proviene de C y Perl.
Además, habida cuenta de su facilidad de aprendizaje, su sencillez y potencia, se está
convirtiendo en una herramienta muy utilizada para algunos desarrollos.

En la tabla siguiente tenemos las más comunes.

Tabla 1.2 Algunas herramientas para programación web

Fase Descripción Herramientas

Prototipo Bosquejo del diseño de la [Link], balsamiq

aplicación

Diseño Html, imágenes Gimp, Paint, bootstrap

Infraestructura Software para programación e LAMP, WAMP, GitHub

implementación

59
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Base de datos Diseño, administración phpMyAdmin, PgAdmin4, dbEaver,

dbVisualizer, pgModeler

Estructura Arquitectura inicial Laravel, YII2, DJango

Programación Codificación y pruebas VS Code, Sublime,

1.3.1. Prototipo
El prototipo o bosquejo de la aplicación incluye la elaboración de diagramas de flujo y
pantallas que permiten dar una idea del sistema que cumpla con los requerimientos del
cliente.

Para desarrollar el bosquejo se recurren a aplicaciones como balsamiq, [Link] entre

otras.

Se busca que el prototipo tenga el suficiente detalle a nivel de pantallas como para dar una
idea precisa sobre las interfaces del sistema y posibles reportes que genere.

Los bosquejos son un puente entre el diseñador web y el desarrollador, por lo tanto, hay
que estar conscientes que es posible que un diseño de alguna interfaz no sea posible
transformarlo en código tal y como lo presenta el diseñador.

En esta fase, es posible que el cliente solicite que la aplicación se ajuste a diferentes
dispositivos como computadoras, tabletas o teléfonos inteligentes. A este comportamiento se
conoce como diseño web responsivo.

1.3.2. Diseño
Cuando el prototipo es aprobado se pasa ahora al diseño del sistema. Es hora de pasar los
elementos establecidos en el prototipo a código real. Es importante considerar el diseño de
los logos, los íconos, los banners y el contenido audiovisual de la aplicación.

60
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

El diseñador gráfico utiliza herramientas de manipulación de gráficos, tales como Gimp,

Photoshop, Corel Draw, entre otras para diseñar imágenes de acuerdo a cada necesidad.

Para los gráficos, es importante tener en cuenta:

1. Medir los gráficos tal y como queremos que aparezcan

2. Tener en cuenta cuando el usuario tiene sesión abierta y cuando no.

3. Etiquetar adecuadamente los campos de formularios, botones, etc.

4. Tener presente los diferentes estados de interacción como menús abiertos, cerrados
botones habilitados o deshabilitados.

5. Considerar que, a mayor tamaño de las imágenes, más pesada será la página para
cargar, pero gráficos con una resolución pequeña escalarán mal y se verán
cuadriculadas dando mala imagen a la página.

1.3.2. Infraestructura
El sistema operativo es la interfaz con la computadora y comúnmente se escoge uno
basado en Unix/Linux, aunque también se puede instalar alguno comercial, por ejemplo,
Windows Server 2016 o basado en Unix como el sistema operativo de IBM AIX Unix.

El sistema operativo es la base de muchas aplicaciones empresariales básicas y entornos

de bases de datos. Sigue siendo la piedra angular de la computación de misión crítica, al
tiempo que evoluciona para introducir una gran cantidad de nuevas capacidades híbridas de
nube múltiple y de código abierto. Permiten mayor escalabilidad de las cargas de trabajo,
mejor automatización de la nube y mayor seguridad, entre otros.

[Link]. Instrucciones básicas para instalar el sistema operativo Debian.

Esta es una pequeña guía de los pasos que se siguen durante el proceso de instalación:

1. Realice una copia de seguridad de los datos o documentación existentes en el disco

duro donde se planea realizar la instalación.
2. Reunir la información sobre su sistema, así como toda la documentación que
necesite antes de iniciar la instalación.

61
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

3. Localizar y/o descargar el programa del instalador, así como los archivos de
cualquier controlador especializado que su máquina necesite.
4. Configurar un dispositivo de arranque como CD/DVD/dispositivo USB, o
proporcionar una infraestructura de arranque por red desde el que arrancar el
instalador.
5. Arrancar el sistema de instalación.
6. Elegir el idioma para la instalación.
7. Activar la conexión de red, si está disponible.
8. Si es necesario, redimensionar las particiones existentes en el disco duro de destino
para liberar espacio para la instalación.
9. Crear y montar las particiones en las que instalará Debian.
10. Esperar a la descarga/instalación/configuración automática del sistema base.
11. Seleccionar e instalar software adicional.
12. Instalar un gestor de arranque que pueda iniciar Debian GNU/Linux y/o los
sistemas existentes.
13. Iniciar por primera vez el sistema que acaba de instalar.

Se puede usar una versión del sistema de instalación gráfico en 64-bit PC. (debian, 2021)

Se recomienda instalar el manejador de bases de datos, el servidor apache y PHP cuando

se instale el sistema operativo.

[Link]. Instalación de Debian con WSL2

Hay que instalar primeramente WSL y luego WSL2. Para instalar WSL ejecutar Power
Shell en modo administrador.

Ilustración 1.5 Ejecución de PowerShell

62
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Ejecutar en la línea de órdenes:

[Link] /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all

/norestart

Verificar que el procesador sea compatible con WSL2.

Ejecutar msinfo32

Ilustración 1.6 Compatibilidad con Hyper-V

A continuación, se instala WSL2 con la siguiente orden en Power Shell

[Link] /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Para instalar la última versión del Linux Debian kernel de WSL2 solo tenemos que dar clic
aquí, y descargar Debian o Ubuntu o descargarlo de Windows Store.

63
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Ilustración 1.7 Descargar distribución a instalar

Después de haber descargado el archivo ir a la carpeta de descargas

cd .\Users\nalonzo\Downloads\

e instalarlo:

Add-AppxPackage .\TheDebianProject.DebianGNULinux_1.[Link]

Esperar a que termine la instalación. Agregar el usuario normal cuando se instale y éste
tendrá privilegios de sudo.

Para ejecutar el sistema operativo, aparecerá como un ícono en el menú de Windows 10.

Hay que tener en cuenta que el núcleo de Linux para WSL y WSL2 no soporta todas las
características y tampoco soporta niveles de ejecución que son básicos para algunas
aplicaciones. Con esto, implica que no se puede correr aplicaciones que usen iptables, como
fail2ban o dockers.

Para permitir que la desinstalación de paquetes se haga correctamente ejecutar con

permisos de root el siguiente código para emular los niveles de ejecución del núcleo.
#tee /usr/sbin/policy-rc.d > /dev/null <<EOF
# !/bin/sh
exit 101
EOF
chmod +x /usr/sbin/policy-rc.d

dpkg-divert --local --rename --add /sbin/initctl

ln -fs /bin/true /sbin/initctl

64
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Básicamente implica sobre escribir el archivo /usr/bin/policy-rc.d por un script que regresa
el valor 101 y poner permisos de ejecución al mismo. Se renombra el paquete initctl y se
pone una liga para que cuando se mande a traer /sbin/initctl siempre regrese true. (github,
2018)

[Link]. Instalar Apache 2

# apt-get install apache2 apache2-utils -y

[Link]. Instalar MariaDB

# apt-get install mariadb-server mariadb-client –y

Habilitarlo
# /etc/init.d/mariadb start

Configurar MariaDB para asignar claves de acceso. Ejecutar la siguiente instrucción:

# mysql_secure_installation
Seguir las instrucciones.

Conectarse para verificar su funcionamiento:

# mysql -u root -p

[Link]. Instalar PHP y las librerías adicionales

# apt-get install php libapache2-mod-php php-cli php-mysql php-zip php-
curl php-xml -y
Crear un virtual host para Apache. Este paso sólo se realiza si está disponible un DNS en
su red local que regrese la ip correspondiente al sitio. En caso contrario. Usa /var/www/html
en el servidor local.
# mkdir /var/www/html/[Link]
# chown -R www-data:www-data /var/www/html/[Link]

Editar el archivo y añadir el texto siguiente

nano /etc/apache2/sites-available/[Link]
<VirtualHost *:80>
ServerAdmin webmaster@localhost
ServerName [Link]
DocumentRoot /var/www/html/[Link]
ErrorLog ${APACHE_LOG_DIR}/[Link]
65
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

CustomLog ${APACHE_LOG_DIR}/[Link] combined

</VirtualHost>
Habilitar:
# a2ensite [Link]

# /etc/init.d/apache2 restart

Verificar que funcione php y agrega la línea de abajo

# nano /var/www/HTML/[Link]/[Link]
<?php phpinfo(); ?>
Ctrl-o para guardar

Ctrl-x para salir.

Para probar abre el navegador y escribir lo siguiente: [Link] Si se ve la

imagen siguiente, entonces ya está bien configurado.

Ilustración 1.8 PHP instalado correctamente

[Link]. Instalación de PHPMyAdmin

Ejecute la siguiente instrucción

# apt-get install phpmyadmin

Seguir las instrucciones. Seleccionar apache2, para ello utilizar las flechas de arriba/abajo
y presione la barra espaciadora y presione la tecla de tabulación y dar enter, en caso de
solicitar el servidor web.

66
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Ilustración 1.9 Seleccionar apache2

Configurar con db-config-common. Presione en enter en Sí. En el siguiente paso
introduzca la contraseña para phpmyadmin y repetirla. Usar las teclas de tabulación para
cambiar entre campos y flecha izquierda y derecha para cambiar opciones. Presione enter
cuando termine.

Configurar phpmyadmin para que administre todas las bases de datos.

# mysql –u root -p

Escribir la contraseña de root de mariadb.

MariaDB [(none)]> use mysql;

Database changed
MariaDB [(none)]> GRANT ALL PRIVILEGES ON *.* TO 'phpmyadmin'@'localhost'
WITH GRANT OPTION;
Query OK, 1 row affected (0.001 sec)

Rows matched: 1Changed: 1 Warnings:0

MariaDB [mysql]> flush privileges;

MariaDB [mysql]> quit

Ahora ya se puede entrar con el usuario phpmyadmin desde localhost/phpmyadmin

Si se requiere entrar con root,

MariaDB [(none)]> GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' WITH
GRANT OPTION;
Luego con privilegios de root editar el archivo. Use el editor nano:

/etc/dbconfig-common/[Link]

67
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Y reemplazar las líneas siguientes:

# dbc_dbuser: database user
# the name of the user who we will use to connect to the database.
dbc_dbuser='root'

# dbc_dbpass: database user password

# the password to use with the above username when connecting
# to a database, if one is required
dbc_dbpass='some_pass'
O reconfigurar phpmyadmin nuevamente:
sudo dpkg-reconfigure phpmyadmin
<Ok>
Reinstall database for phpmyadmin: <Yes>
Connection method for MySQL database server for phpmyadmin: TCP/IP
Host name of the MySQL database server for phpmyadmin: localhost
Port number for the MySQL service: 3306
MySQL database name for phpmyadmin: phpmyadmin
<Ok>
MySQL username for phpmyadmin: root
MySQL application password for phpmyadmin: pass # OR ANY PASSWORD YOU
WANT
Password confirmation: pass
Name of the database's administrative user: root
Web server to reconfigure automatically: apache2
An error occurred while installing the database: ignore

[Link]. Instalación de git

La siguiente herramienta que se instala es el cliente de git para poder administrar las
versiones en desarrollo de la aplicación. Como administrador ejecute la siguiente instrucción
#apt-get install git

[Link]. Instalación de Laravel

Instalación de extensiones (Rivera, 2020) (codersfree, 2021)

#apt-get install php7.4-intl php7.4-bcmath php7.4-common php7.4-json
php7.4-mbstring openssl php7.4-xml

Configurar directorio de trabajo

chown -R nalonzo:www-data /var/www/HTML/
#chmod -R 775 /var/www/HTML/
#chmod -R g+s HTML

Habilitar el módulo rewrite

68
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

#a2enmod rewrite
#/etc/init.d/apache2 restart
Instalar curl:

apt install -y curl unzip php7.4-curl

Instalar composer:

~$ curl -sS [Link] | php

Por comodidad hacerlo global:

sudo mv [Link] /usr/local/bin/composer

Instalar laravel

$composer global require laravel/installer

Para crear nuevos proyectos de laravel agrega lo siguiente al PATH de tu usuario de Linux:

PATH=/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games$HOME/.con
fig/composer/vendor/bin

Ve a tu directorio de trabajo y utiliza la siguiente orden

$laravel new proyectoNuevo

Acceder a localhost/proyectoNuevo/public/

1.3.3. Tecnologías para administración de bases de datos

[Link]. Modelado.

El modelado es estructurar y organizar datos para que se utilicen fácilmente. Se dividen

en dos grandes ramas. Modelos entidad-relación y modelos no relacionales.

Un modelo de datos es una descripción de un contenedor de datos también conocido como

metadato. Un metadato es una abstracción que permite generalizar información mediante la
definición adecuada de tipos de datos. Los metadatos usados para definir un modelo son dos:
entidades y relaciones. Una entidad es un conjunto de datos relacionados a los que se les
asigna un tipo. Una relación permite indicar las operaciones que se realizan entre entidades

69
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

y se expresa a través de otra tabla que tiene tantas claves primarias como entidades participen
en ella.

Las herramientas usadas para modelar bases de datos se dividen en dos grandes grupos
software libre y comerciales.

Las herramientas de modelado más sencillas solamente permiten hacer la representación

gráfica de las entidades y las relaciones con cierto nivel de detalle. Dentro de éstas tenemos
[Link] y dia. Se puede encontrar mucho software de modelado en línea. La mayoría de
las herramientas de modelado permiten obtener el código correspondiente como umbrello,
para poder ser ejecutado directamente en la consola, también ayudan a obtener diferencias
entre una base de datos de desarrollo y producción, produciendo sólo las instrucciones
necesarias para sincronizar ambas bases de datos. Dentro del software libre, la herramienta,
muchas de las veces, dependerá del manejador de bases de datos. En la siguiente tabla
tenemos algunas de las más comunes:

Tabla 1.3 Herramientas de modelado

Manejador Herramienta Descripción

postgres PGModeler Modelado, comparación de bd’s

MySql MySql workBench Modelado

MySql PHPMyAdmin Modelado básico/Administraicón

MariaDB PHPMyAdmin Modelado básico/Administración

mongoDB compass Administración

[Link]. Administración de bases de datos.

Una vez que se ha modelado la base de datos a utilizar es necesario contar con software
que permita administrar la información contenida en esta. Este software hace uso de las
órdenes propias del manejador para realizar las tareas más comunes denominadas CRUD
(Creación, lectura, actualización y eliminación –Create, Read, Update, Delete-).

70
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Otras tareas importantes son el respaldo de la base de datos, la importación de datos y

exportación de información, etc. En la siguiente tabla se indican las herramientas más
comunes para la administración de bases de datos.

Tabla 1.4 Herramientas de administración

Manejador Herramienta Descripción

postgres PgAdmin4 Administración web

postgres DBEaver Escritorio, Modelado básico/Administración

MySql PHPMyAdmin Administración WEB

MySql DBEaver Escritorio, Modelado básico/Administración

MariaDB PHPMyAdmin Modelado básico/Administración

MariaDB DBEaver Escritorio, Modelado básico/Administración

mongoDB compass Modelado/Administración

1.3.4. Administración de versiones

Un sistema de control de versiones (o VCS, por sus siglas en inglés), también conocido
como sistema de control de revisiones o de fuentes, es una herramienta de software que
monitorea y administra cambios en un sistema de archivos. Asimismo, un VCS ofrece
herramientas de colaboración para compartir e integrar dichos cambios en otros usuarios del
VCS. Al operar al nivel del sistema de archivos, un VCS monitoreará las acciones de adición,
eliminación y modificación aplicadas a archivos y directorios. Un repositorio es un término
del VCS que describe cuando un VCS está monitoreando un sistema de archivos. En el
alcance los archivos individuales de códigos fuente, un VCS lleva el registro de las adiciones,
eliminaciones y modificaciones de las líneas de texto que contiene ese archivo (Bitbucket,
2021).

La administración de versiones es una tarea básica en el desarrollo de software.

71
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

Las tareas más comunes que se puede realizar con un VCS son:

Resolución de conflictos. Cuando un equipo trabaja en un proyecto, es común que dos o

más desarrolladores trabajen sobre el mismo archivo, e incluso sobre la misma línea. A esto
se le conoce como conflicto. Cuando se quieran integrar los cambios, el VCS informará sobre
estas líneas y el integrador decidirá cuáles son las que se quedarán en la versión final. A su
vez, se lleva el registro de todos los cambios realizados, incluido el número de línea.

Deshacer o revertir los cambios en el código fuente. Cada vez que se integran los
cambios de los desarrolladores se lleva un registro de todos los cambios con los que ha
contribuido cada uno. Así, existe la posibilidad de deshacer o regresar a un punto anterior
conocido, desde donde empezar nuevamente el desarrollo, si es que se detecta un fallo en el
código que está en producción.

Respaldo externo del código fuente. Cada programador puede llevar un respaldo sobre
el trabajo que está realizando que es independiente de la rama principal que se conoce como
master o primaria. En caso de que el programador sufra una pérdida o falla del equipo donde
está trabajando, se puede recuperar la mayor parte del trabajo, si es que no todo, dependiendo
de la última vez que se actualizó su rama.

Herramientas para trabajo en equipo. El VCS tiene herramientas que ayudan a los
desarrolladores a tener una mayor comunicación que permiten tener una línea clara durante
el desarrollo. Las herramientas de comunicación soportan varios hilos de comunicación lo
que ayuda a mejorar el debate entre equipos con respecto a la mejora del código fuente.

Responsabilidades y estadísticas. Los jefes de proyecto y gerentes pueden obtener

estadísticas sobre la eficiencia y rendimiento de sus desarrolladores y conocer el avance real
del proyecto y otros datos como el tiempo invertido en desarrollo, los errores inyectados y
resueltos. También el desarrollador puede conocer sus estadísticas y aportaciones.
Actualmente es común usar la información existente en VCS como parte de la experiencia
profesional y poder acceder a otras oportunidades de trabajo en el ramo (Bitbucket, 2021).

Hay muchos sistemas de control de versiones, tenemos por ejemplo

bitbucket([Link] GitHub([Link] GitLab([Link]

72
Introducción a las aplicaciones web
 1.3. Tecnologías para el desarrollo de aplicaciones web

GitLab y SVN, pueden ser instalados en un servidor empresarial. Bitbucket ofrece cuenta
gratuita ilimitada para máximo cinco colaboradores, GitHub y GitLab también ofrecen
cuentas gratuitas y proyectos ilimitados para proyectos de software libre, pero para proyectos
privados se requiere pagar una cuota mensual o anual.

Para el trabajo cotidiano, es necesario instalar git o mercurial para utilizarlos como
clientes. Tanto mercurial como git son software libre. Para las prácticas se utilizará git como
cliente.

Para este tema, es importante crear al menos dos cuentas: una en bitbucker y otra en
github.

1.3.5. Editores para programación

La programación web se puede realizar utilizando cualquier editor de texto plano, desde
el más simple como nano, notepad++ para cambios rápidos o algún veterano como vi, vim o
emacs, o de entorno gráfico como netbeans de apache. Se recomienda usar mínimo un editor
que tenga coloreado de código y verificación de sintaxis. Hay otros editores comerciales que
están ganando mucha popularidad porque combinan código abierto con las características
más importantes y las versiones de pago tienen muchas más prestaciones. En esta categoría
tenemos muchos editores. A continuación, se muestra una lista de los más utilizados:

Tabla 1.5 Algunos editores para desarrollo

Editor Descripción

Atom Comercial, y versión comunidad,

Multiplataforma, integra git,

Sublime text Comercial tipo shareware, Multiplataforma,

integra git

eclipse Software libre, Multiplataforma, integra git,

basado en java

73
Introducción a las aplicaciones web
 1.4. Planificación de aplicaciones web

NetBeans Software libre, Multiplataforma, integra git,

basado en java

Visual Studio Code Gratuito, multiplataforma, con multitud de

paquetes libres y comerciales, integra git

Se recomienda instalar tres editores. La selección de cualquiera de ellos para trabajar es

una cuestión de gustos, ideología o funcionalidades.

1.4. Planificación de aplicaciones web

El objetivo de la planificación de desarrollo de aplicaciones es la realización sistemática
de las actividades del ciclo del software (Oktaba, y otros, 2005):

1. Requerimientos. Como etapa inicial, se obtiene del cliente qué es lo que desea que
haga el sistema.

2. Análisis y Diseño. Actividades que revisan los requerimientos y generan una

descripción de la estructura de los módulos de software que sirve de base para el
siguiente paso.

3. Construcción. Actividades que producen los módulos del software producidos en la

etapa de análisis y diseño. En esta etapa se realizan también las pruebas unitarias. El
resultado es el conjunto de módulos y componentes de software probados.

4. Integración y pruebas. Actividades para integrar los componentes producidos en la

etapa anterior. Se realizan también las pruebas de integración del sistema con la
finalidad de obtener una versión de software entregable al cliente.

5. Cierre. Integración final de la configuración de software generada en las fases para su

entrega. Identificación y documentación de las lecciones aprendidas. Generación del
reporte de mediciones y sugerencias de mejora.

74
Introducción a las aplicaciones web
 1.4. Planificación de aplicaciones web

1.4.1. Requerimientos
Los requerimientos del usuario son declaraciones en un lenguaje natural acompañado de
diagramas de los servicios que se espera que el sistema brinde a los usuarios del sistema y
las restricciones bajo las cuales debe operar. Se presentan como una descripción general del
problema o la necesidad que se requiere resolver, así como los flujos y la estructura de la
información (Alonso Amo, Martínez Normand, & Segovia Pérez, 2005).

Desde el punto de vista del producto se debe contar con descripciones de: las interfaces
del sistema; el hardware; el software, la comunicación; las restricciones de memoria; las
operaciones, y los requisitos de adaptación. Además, se describe las funciones del producto,
las características del usuario, las restricciones, los supuestos y las dependencias.

Requerimientos funcionales. Son necesidades establecidas que necesita cumplir el software

que se usa en las condiciones establecidas. Las funcionalidades deben ser adecuadas, exactas
y seguras.

Interfaces de usuario. Definición de aquellas características de la interfaz de usuario que

permiten que el software sea fácil de entender, aprender, que genere satisfacción y con el
cual, el usuario pueda desempeñar su tarea eficientemente. Incluyendo la descripción del
prototipo de la interfaz.

Interfaces externas. Definen la forma de comunicarse con otras aplicaciones o software.

Confiabilidad. Especificación del nivel de desempeño del software con respecto a la

madurez, tolerancia a fallas y recuperación.

Eficiencia. Especificación del nivel de desempeño del software con respecto al tiempo y a la
utilización de recursos.

Mantenimiento. Descripción de los elementos que facilitarán la comprensión y la

realización de las modificaciones futuras del software.

Portabilidad. Descripción de las características del software que permitan su transferencia

de un ambiente a otro.

Restricciones de diseño y construcción. Necesidades impuestas por el cliente.

75
Introducción a las aplicaciones web
 1.4. Planificación de aplicaciones web

Legales y reglamentarios. Necesidades impuestas por leyes, reglamentos, entre otros.

1.4.2. Análisis y diseño

Es el conjunto de actividades en donde se analizan los requerimientos especificados para
producir una descripción de la estructura interna de los componentes de software, y su
descomposición en subsistemas, la cual servirá de base para la construcción. Los documentos
resultantes son la documentación del análisis y diseño y plan de pruebas de integración.

Se describe el detalle de los componentes que permita claramente su construcción.

Este documento contiene la descripción textual y grafica de la estructura de los

componentes de software. El cual consta de las siguientes partes:

Arquitectónica:

Contiene la estructura interna del sistema, es decir la descomposición del sistema en

subsistemas. Y la identificación de los componentes que integran los subsistemas y las
relaciones de interacción entre ellos.

Detallada:

Contiene el detalle de los componentes que permita de manera evidente su construcción y

prueba en el ambiente de programación.

Un componente es un conjunto de unidades de código relacionadas.

El Software o sistema de software, destinado a un cliente o usuario, está constituido por

componentes agrupados en subsistemas, y pueden estar anidados.

1.4.2. Construcción
Es el conjunto de actividades para producir los componentes de software que
correspondan al análisis y diseño, así como la realización de pruebas unitarias. Como
resultado se obtienen los componentes de software probados.

Se distribuye las tareas a los miembros del equipo de trabajo según su rol.

76
Introducción a las aplicaciones web
 1.4. Planificación de aplicaciones web

Se construyen y modifican los componentes de software con base a la parte detallada del
análisis y diseño.

Se definen y aplican pruebas unitarias para verificar el funcionamiento de cada

componente de acuerdo con la parte detallada del análisis y diseño.

Se corrigen los defectos encontrado hasta lograr pruebas unitarias exitosas. Se actualizan
los registros de rastreo incorporando los componentes construidos o modificados.

Se elabora el reporte de actividades, registrando las actividades realizadas, incluyendo

fechas de inicio y fin, el responsable por actividad y las mediciones requeridas.

1.4.3. Integración y pruebas

Son las actividades para integrar y probar los componentes de software, basadas en los
planes de prueba de integración y de sistema, con la finalidad de obtener software que
satisfaga los requerimientos especificados. Se genera la versión final del manual de usuario,
manual de operación y manual de mantenimiento. Como resultado se obtiene el producto de
software probado y documentado.

Se distribuyen las tareas a los miembros del equipo de trabajo según su rol.

Se integran los componentes en subsistemas o en el sistema de software y se aplican las

pruebas, documentando los resultados en un reporte de pruebas de integración.

Se regresa a los programadores y se corrigen los defectos encontrados en el reporte de

pruebas de integración hasta que se logren todas las pruebas de integración exitosas

Se actualiza también el registro de rastreo.

Se documenta o modifica el manual de usuario incluyendo de acuerdo a cada componente

nuevo o modificado y se incorpora al software.

Se realiza el reporte de actividades registrando las actividades realizadas con fecha de

inicio y fin, el responsable por actividades y las mediciones requeridas.

77
Introducción a las aplicaciones web
 1.4. Planificación de aplicaciones web

1.4.4. Cierre
Es la integración final de la configuración de software generada en las fases para su
entrega. Se identifican y documentan las lecciones aprendidas y se genera el reporte de
mediciones y sugerencias de mejora.

Se documenta el manual de mantenimiento o se modifica el existente. Se corrigen los

defectos encontrados en el mismo y se agregan los componentes nuevos y modifican los
componentes que sufrieron cambios.

Se identifican las lecciones aprendidas y se integran a la base de conocimiento. Por

ejemplo, cuáles fueron las mejores prácticas, experiencias exitosas, problemas recurrentes,
entre otros.

Por último, se genera el reporte de mediciones y sugerencias de mejora y se elabora el

reporte de actividades registrando las actividades realizadas, fechas de inicio y fin,
responsables por actividad y las mediciones requeridas.

78
Introducción a las aplicaciones web
 Competencias específicas y genéricas

Capítulo 2 HTML, XML, CSS

Competencias específicas y genéricas

Competencias específicas

Conoce y aplica las herramientas para construir páginas web, considerando la

interfaz gráfica de usuario, un lenguaje de marcado y de presentación.

Competencias genéricas

Comunicación oral y escrita.

Habilidad para buscar, analizar, clasificar y sintetizar información proveniente de

fuentes diversas.

Capacidad de trabajo en equipo.

Capacidad de aplicar los conocimientos en la práctica.

Temario detallado de la unidad

2.- Administración de procesos y del procesador

2.1. Introducción.

2.2. Estructura global de un documento web.

2.3. Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y

aplicaciones.

2.4. Formularios.

2.5. Lenguajes de presentación en documentos web.

2.6. Selectores.

2.7. Modelo de caja.

80
HTML, XML, CSS
 2.1. Introducción

2.1. Introducción
El lenguaje HTML que significa Lenguaje de Marcas de Hipertexto (Hypertext Markup
Language) permite diseñar documentos basados en una estructura de hipertexto. Un
documento de este tipo contiene información cruzada con otros documentos ya sea del mismo
sitio o sitios externos, llamados documentos referenciados. A estas referencias se les llama
ligas o links. HTML permite, además incrustar archivos multimedia tales como imágenes,
video, sonido, plugins o pequeños programas para mejorar la interactividad con el usuario.

Los documentos HTML son de texto plano que no contienen ningún tipo de formateo. Lo
que significa que no se pueden usar editores de texto formateados como procesadores de
texto como Microsoft Word u otros, aunque es posible expórtalos a formato HTML.

En los archivos de texto plano el formato de texto se especifica mediante marcas de texto
llamados etiquetas o tags que delimitan el contenido a los que afecta la etiqueta. Las etiquetas
o tags empiezan por el carácter <, seguido del nombre de la etiqueta, seguido de los atributos
que permite la propia etiqueta y terminan con el carácter >, estas son las etiquetas de inicio.
A las etiquetas del final se le añade la barra invertida al principio del nombre de la etiqueta
encerrada en < y >. Ejemplo <Etiqueta></Etiqueta>. Es importante mantener
correctamente pareadas las etiquetas de apertura y cierre, aunque el navegador hace un gran
esfuerzo por mantener la coherencia de cierre de etiquetas, es buena costumbre. Las etiquetas
no son sensibles a mayúsculas y minúsculas.

Los atributos de las etiquetas siempre van separados por espacios en blanco, ejemplo:

<Etiqueta atributo1 atributo2 atributo3 …></Etiqueta>

Los atributos pueden ser solamente el nombre del atributo o puede incluir un valor, para
este caso se agrega un igual y generalmente va entrecomillado, ejemplo:

<A HREF =”[Link] a definiciones de w3c</A>

81
HTML, XML, CSS
 2.2. Estructura global de un documento web

<IMG SRC=”[Link]” BRODER=0 ALT=”Foto”>

Cabe mencionar que HTML permite omitir en algunos casos omitir la etiqueta del final si
la etiqueta no debe envolver ningún texto que la afecte, por ejemplo, la etiqueta IMG. Otra
cosa a remarcar es que, si un navegador no entiende una etiqueta o atributo, la ignorará y
hará lo mismo con todo el texto afectado por la misma.

HTML5 es un nuevo concepto que logra integrar Javascript HTML y CSS de tal forma
que proporciona los cimientos, CSS se encarga que esos cimientos sean utilizables y
atractivos a la vista, permitiendo cambiar de estilo cualquier elemento en toda la estructura
del sitio y javascript provee la potencia para construir aplicaciones web completamente
dinámicas y funcionales.

2.2. Estructura global de un documento web

1.2.1. Estructura de un documento web

Todos los documentos HTML siguen más o menos la misma estructura. Para html5 se usa la
etiqueta <¡doctype html>. Van contenidos en una etiqueta HTML de inicio y fin y embebida en ella
una etiqueta HEAD de encabezado y una etiqueta BODY para el contenido. Por ejemplo:

<!doctype html>
<HTML lang=”es”>
<HEAD>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description"
content="Mi página trata de esto">

<meta name="keywords"
content="HTML5, CSS3, Javascript, palabra clave">
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
Texto del documento
</BODY>
</HTML>
82
HTML, XML, CSS
 2.2. Estructura global de un documento web

Si se abre el documento en el navegador se observa que el título del documento no aparece

en la página. Se usa en la barra del título de la ventana. La etiqueta meta ayuda a configurar
varios aspectos de la página como la presentación de caracteres, el dispositivo,
compatibilidades, palabras clave de la página.

En HTML, los comentarios se utilizan para clarificar algún texto, pero son ignorados por
el navegador y no las ve el usuario, no obstante, se pueden ver en el código fuente. Se utilizan
las etiquetas
<!-- Mi comentario -->

1.2.2. Bloques de texto

En la siguiente tabla se tiene un resumen de las etiquetas para bloques de texto más
comunes en HTML.

Tabla 2.1 Bloques de texto

Tipo Etiqueta Atributos Descripción

Párrafos <P></P> ALIGN= Separa párrafos. HTML ignora
LEFT|RIGHT| saltos de línea introducidos en el
CENTER archivo de texto plano.

Saltos de línea <BR> Ninguno Nueva línea. No modifica los

parámetros del párrafo.

Regla horizontal <HR> NOSHADE|WIDTH| Regla horizontal para dividir texto

SIZE

Párrafos citados <BLOCKQUOTE> Ninguno Texto literal citado de otra fuente.

</BLOCKQUOTE> No use para identar.

Divisiones <DIV></DIV> ALIGN= Permite dividir el texto el bloques

LEFT|RIGHT| agregando una nueva línea, como
CENTER BR, pero admitiendo los mismos
atributos que P

Texto <PRE><PRE> Ninguna Muestra el texto tal y como está

preformateado con saltos de línea y espacios con
tipo de letra de máquina de escribir

83
HTML, XML, CSS
 2.2. Estructura global de un documento web

Centrados

1.2.3. Marcadores lógicos

Tabla 2.2 Marcadores lógicos

Etiqueta Descripción
<CITE></CITE> Cita literal de texto o documento

<ADDRESS></ADDRESS> Dirección

<SAMP></SAMP> Ejemplo de código o resultado

<CODE></CODE> Código de programa

<KBD></KBD> Código que debe teclearse

<VAR></VAR> Definición de variable

1.2.2. Estructura de directorios de un proyecto

La estructura de directorios para la arquitectura MVC puede hacerse como se ve en el
siguiente listado:

En la estructura de directorios tenemos el directorio principal llamado PROYECTO.

PROYECTO
├── clases
│ ├── css
│ ├── fpdf
│ ├── html
│ ├── iconos
│ ├── images
│ ├── js
│ └── seguridad
├── conexiones
├── [Link]
├── Inicio
│ ├── Inicio
84
HTML, XML, CSS
 2.2. Estructura global de un documento web

│ │ ├── controlador
│ │ ├── modelo
│ │ └── vistas
│ │ ├── html
│ │ ├── imágenes
│ │ └── js
│ └── Slider
│ ├── controlador
│ ├── modelo
│ └── vistas
└── Login
├── Login
│ ├── controlador
│ ├── modelo
│ └── vistas
│ ├── css
│ ├── imagenes
│ └── js
└── LoginCaptcha
├── controlador
└── vistas
├── css
└── js
Se tiene un directorio llamado clases que contiene las clases base del sistema y clases
generales que se ocupan en todo el sistema, una carpeta llamada conexiones para mantener
ahí todas las clases usadas para conectarse a las bases de datos correspondientes al proyecto.
El punto de entrada del sistema que es [Link]. Las siguientes carpetas Inicio y Login, son
submódulos que tienen subcarpetas que implementan la funcionalidad del sistema. Una
subcarpeta de Login que cuenta con dos funcionalidades: Login y LoginCaptcha, -en caso de
que el usuario se equivoque al escribir su contraseña- que debe tener todo sistema para la
validación de usuarios. Una carpeta de inicio que muestra un slider de noticias cuando el
usuario accede por primera vez. De acuerdo a esta estructura, se irá agregando más módulos
y funcionalidades con sus respectivos controladores, modelos y vistas.

La estructura más detallada la vemos en este listado:

PROYECTO
├── clases
│ ├── [Link]

85
HTML, XML, CSS
 2.2. Estructura global de un documento web

│ ├── captcha
│ │ └── [Link]
│ ├── css
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── fontawesome-free-5.6.3-web
│ │ └── [Link]
│ ├── fpdf
│ ├── html
│ │ ├── [Link]
│ │ └── [Link]
│ ├── iconos
│ │ ├── [Link]
│ │ ├── [Link]
│ ├── images
│ │ ├── [Link]
│ │ └── [Link]
│ ├── js
│ │ ├── [Link]
│ │ │ ├── [Link]
│ │ ├── sweetalert2
│ │ │ └── [Link]
│ │ └── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── seguridad
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ └── [Link]
├── conexiones
│ └── [Link]
├── [Link]
├── Inicio
│ ├── Inicio
│ │ ├── controlador
│ │ │ └── [Link]
│ │ ├── modelo
│ │ │ └── [Link]
│ │ └── vistas
│ │ ├── html
│ │ │ ├── [Link]

86
HTML, XML, CSS
 2.2. Estructura global de un documento web

│ │ │ └── [Link]
│ │ ├── imagenes
│ │ │ ├── error_slider.jpg
│ │ │ └── [Link]
│ │ └── [Link]
│ └── Slider
│ ├── controlador
│ │ └── [Link]
│ ├── modelo
│ │ └── [Link]
│ └── vistas
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── html
│ │ ├── [Link]
│ │ └── [Link]
│ ├── js
│ │ └── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
└── Login
├── Acceso
│ └── modelo
│ ├── [Link]
│ └── [Link]
├── Login
│ ├── controlador
│ │ └── [Link]
│ ├── modelo
│ │ └── [Link]
│ └── vistas
│ ├── css
│ │ └── [Link]
│ ├── imagenes
│ │ ├── [Link]
│ │ └── [Link]
│ ├── js
│ │ ├── [Link]
│ │ └── [Link]
│ ├── [Link]

87
HTML, XML, CSS
 2.3. Elementos básicos

│ └── [Link]
└── LoginCaptcha
├── controlador
│ └── [Link]
└── vistas
├── css
│ ├── [Link]
│ └── [Link]
├── js
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
└── [Link]

En esta versión ampliada, se observa que tenemos un archivo php en cada carpeta
correspondiente a controlador, modelo y vista.

2.3. Elementos básicos

2.3.1. Tipos de letra

Tabla 2.3 Tipos de letra

Etiqueta Atributos Descripción

<Hx></H> Ninguno Cabecera de tamaño x del 1 al 6

Tipo de letra Las fuentes Serif tienen Familia Ejemplos de nombres de

un pequeño trazo en los genérica fuentes
bordes de cada letra.
Crean una sensación de
Times New
formalidad y elegancia.
Serif
Roman
Las fuentes Sans-serif
Georgia
tienen líneas limpias (sin Garamond
pequeños trazos). Crean
Arial
un aspecto moderno y
minimalista.
Sans-serif Verdana
Fuentes monospaced:
Helvetica
aquí todas las letras

88
HTML, XML, CSS
 2.3. Elementos básicos

tienen la misma
anchura fija. Crean un
Courier New
aspecto mecánico. Monospace
Lucida
Console
Las fuentes cursive
imitan la escritura
Monaco
humana. Brush Script MT
Las fuentes de fantasy Cursive Lucida
son fuentes decorativas
o lúdicas.
Handwriting
Copperplate
Fantasy
Papyrus
<B></B> Negrita

<I></I> Itálica

<U></U> Subrayado

<STRIKE></STRIKE> tachado

<SUP></SUP> Superíndice

<SUB></SUB> Subíndice

<BLINK></BLINK> Parpadeo

<TT></TT> Teletipo

<BIG></BIG> Grande

<SMALL></SMALL> Pequeño

<EM></EM> Enfatizado

<STRONG></STRONG> Destacado

[Link]. La propiedad Font-family de CSS

La propiedad font-family debería contener varios nombres de fuentes como sistema de

"reserva", para asegurar la máxima compatibilidad entre navegadores/sistemas operativos.
Para que la página se muestra correctamente la fuente debe existir en el sistema operativo del
89
HTML, XML, CSS
 2.3. Elementos básicos

cliente. Se recomienda empezar entonces con la fuente deseada, e incluir fuentes de una
familia genérica (para permitir que el navegador elija una fuente similar en la familia
genérica, si no hay otras fuentes disponibles). Los nombres de las fuentes deben estar
separados por comas. Si el nombre de la fuente incluye más de una palabra entonces debe ir
entrecomillada. Ejemplo:
.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}

2.3.2. Vínculos
Las ligas se encuentran en cualquier documento web y permiten navegar dentro de la
misma página o de página a página. También es posible enviar a un nuevo sitio a una página
especifica.

La característica principal es que cuando se pasa el apuntador del ratón encima de una
liga, éste cambia por una manita. Las ligas no tienen por qué ser texto, también pueden ser
imágenes u otro elemento HTML. Una etiqueta de liga HTML se define como una hiperliga
y tiene la siguiente sintaxis:
<a href="url">Texto de la liga</a>
El atributo más importante de la etiqueta <a>, es el atributo href, que indica el destino
de la liga. El texto de la liga es la parte que será visible al lector.

Ejemplo:
<a href="[Link] TecNM campus Apizaco!</a>
Por omisión, las ligas aparecerán como sigue en los navegadores:

90
HTML, XML, CSS
 2.3. Elementos básicos

Una liga que no ha sido visitada, está subrayada en azul

Una liga que ya ha sido visitada se pone de color violeta

Una liga activa está subrayada en color rojo.

[Link]. El Atributo Target (destino)

Este atributo especifica dónde se abre el documento ligado

Tabla 2.4 Valores del atributo target

Valor Descripción

_self Abre el documento en la misma ventana/pestaña en donde se hizo clic.

_blank Abre el documento en una nueva ventana o pestaña.

_parent Abre el documento en el frame padre.

_top Abre el documento en el cuerpo entero de la ventana.

Ejemplo:
<a href="[Link] target="_blank">Visita TecNM Campus
Apizaco!</a>

[Link]. Ligas absolutas y ligas relativas.

Los ejemplos anteriores hicieron uso de ligas absolutas o direcciones web completas en el
atributo href.

Una liga local es una liga a una página dentro del mismo sitio web y se denomina URL
relativa y no lleva la parte [Link]

Ejemplos:
<h2>URLs Absolutas</h2>
<p><a href="[Link] Nacional de México</a></p>
<p><a href="[Link]

<h2>URLs Relativas</h2>
<p><a href="Imágenes">Imágenes HTML</a></p>
<p><a href="/css/[Link]">Mi estilo CSS</a></p>
91
HTML, XML, CSS
 2.3. Elementos básicos

[Link]. Uso de una imagen como liga

Para usar una imagen como una liga simplemente introduce un elemento <img> dentro de
la etiqueta <a>. Por ejemplo:
<a href="[Link]">
<img src="[Link]" alt="Una sonrisa" style="width:42px;height:42px;">
</a>
Descargar la imagen con el atributo download
<a href="/images/[Link]" download="Logo">

[Link]. Liga a un correo electrónico

Para poner una liga a un correo electrónico se usa la etiqueta mailto: en el atributo href.
Cuando el usuario da click en la liga, se abre el programa de correo electrónico del usuario
para que éste pueda mandar un correo electrónico a la dirección dada. Por ejemplo:
<a href="[Link] un correo</a>.
Actualmente hay bots que coleccionan los correos referenciados con mailto: lo que ha
ocasionado un grave problema de spam. Se recomienda utilizar alguna técnica de ofuscación
o javascript para evitar que el correo caiga en manos equivocadas.

[Link]. Botones como ligas

Para usar los botones como ligas es necesario añadir código javascript para poder
especificar algunos eventos como el hacer clic en un botón. Por ejemplo:
<button onclick="[Link]=[Link]'">Página HTML</button>

[Link]. El atributo title

El atributo title especifica información extra sobre un elemento. La información suele

mostrarse como texto de ayuda cuando el ratón se mueve sobre el elemento. Por ejemplo:
<a href="[Link] title="Vas a ir a la sección oficial">Visita
la sección oficial</a>

92
HTML, XML, CSS
 2.3. Elementos básicos

2.3.3. Listas
Las listas permiten a los desarrolladores web agrupar un conjunto de datos relacionados.
Se tienen dos tipos de listas:

[Link]. Listas desordenadas.

Una lista desordenada usa viñetas para indicar los elementos. La etiqueta usada es
<ul></ul> y cada elemento de la lista empieza con la etiqueta <li></li>. Los elementos de la
lista se marcarán con viñetas (pequeños círculos negros) por defecto. Por ejemplo:
<ul>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>

[Link]. Listas ordenadas.

Una lista ordenada usa números para los elementos de la lista. Una lista ordenada
comienza con la etiqueta <ol></ol>. Cada elemento de la lista comienza con la etiqueta
<li></li>. Por ejemplo:
<ol>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ol>
Los elementos de la lista se marcarán con números por defecto.

[Link]. Listas de descripción

HTML también admite listas de descripción.

Una lista de descripción es una lista de términos, con una descripción de cada término.

La etiqueta <dl></dl> define la lista de descripción, la etiqueta <dt></dt> define el

término (nombre) y la etiqueta <dd></dd> describe cada término. Por ejemplo:
<dl>
<dt>Café</dt>
<dd>- Café negro de olla</dd>
93
HTML, XML, CSS
 2.3. Elementos básicos

<dt>Leche</dt>
<dd>- Bebida blanca de leche de vaca</dd>
</dl>

2.3.4. Tablas

[Link]. Tablas simples

Las tablas HTML permiten a los desarrolladores web arreglar datos en filas y columnas.
Una tabla en HTML consiste de celdas dentro de filas y columnas. Una tabla se define con
las etiquetas <table></table> Las celdas están definidas con las etiquetas <td></td> td
significa Table Data. Cada fila comienza con una etiqueta <tr></tr>. TR significa Table Row.
Se puede tener tantas filas como sea necesario, sólo hay que asegurarse que haya las mismas
celdas en cada fila. Si se necesita un encabezado en la tabla, podemos substituir los primeros
td por th (Table Header) Otra etiqueta útil es <caption> </caption> que se usa para poner un
nombre a la tabla. Por ejemplo:
<!DOCTYPE html>
<html>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>

<table style="width:100%">

94
HTML, XML, CSS
 2.3. Elementos básicos

<caption style="caption-side:bottom">Mi tabla</caption>

<tr>
<th>Persona 1</th>
<th>Persona 2</th>
<th>Persona 3</th>
</tr>
<tr>
<td>Emilio</td>
<td>Tomás</td>
<td>Linus</td>
</tr>
<tr>
<td>18</td>
<td>15</td>
<td>11</td>
</tr>
</table>
</body>
</html>

[Link]. Tablas con encabezado y pie

Se puede agregar la etiqueta <tbody></tbody> pera definir el cuerpo de una tabla. Con
ello, también se puede incluir elementos con las etiquetas <thead></thead> y
<tfoot></tfoot>. La etiqueta <tbody> se utiliza para agrupar el contenido del cuerpo en una
tabla HTML.

El elemento <tbody> se utiliza junto con los elementos <thead> y <tfoot> para especificar
cada parte de una tabla (cuerpo, cabecera, pie de página).

Los navegadores pueden utilizar estos elementos para permitir el desplazamiento del
cuerpo de la tabla independientemente de la cabecera y el pie de página. Además, cuando se
imprime una tabla grande que abarca varias páginas, estos elementos pueden permitir que la
cabecera y el pie de la tabla se impriman en la parte superior e inferior de cada página.

Nota: El elemento <tbody> debe tener una o más etiquetas <tr> en su interior.

La etiqueta <tbody> debe utilizarse en el siguiente contexto: Como hijo de un elemento

<table>, después de cualquier elemento <caption>, <colgroup> y <thead>.

95
HTML, XML, CSS
 2.3. Elementos básicos

Consejo: Los elementos <thead>, <tbody> y <tfoot> no afectarán al diseño de la tabla por
defecto. Sin embargo, puede utilizar CSS para dar estilo a estos elementos (véase el ejemplo
siguiente).
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}

table, th, td {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>

<table>
<thead>
<tr>
<th>Mes</th>
<th>Gastos</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enero</td>
<td>$50</td>
</tr>
<tr>
<td>Febrero</td>
<td>$70</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$120</td>
</tr>

96
HTML, XML, CSS
 2.3. Elementos básicos

</tfoot>
</table>

[Link]. Rejillas

CSS tiene un módulo de diseño para rejillas. El módulo CSS de diseño de rejillas ofrece un sistema de
maquetación basado en cuadrículas, con filas y columnas, que facilita el diseño de páginas web sin
tener que utilizar flotadores ni posicionamiento. Todos los hijos directos del contenedor de la rejilla
se convierten automáticamente en elementos de la rejilla. Los espacios entre cada columna/fila se
llaman huecos (gaps). Se usan las propiedades grid-row-gap y grid-column-gap. Se pueden
establecer a un valor en conjunto utilizando la propiedad grid-gap.

Un diseño de cuadrícula consiste en un elemento padre, con uno o más elementos hijos.
Para que un contenedor de tipo <div> se convierta en cuadrícula, se utiliza la propiedad
display y se establece al valor de grid o inline-grid. La propiedad grid distribuye el contenido
completamente en el contenedor, inline-grid, ajusta la rejilla al texto. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-rejilla {
display: grid;
grid-row-gap: 50px;
grid-column-gap: 50px;
/* O utilizar la siguiente instrucción para establecer ambos valores*/
grid-gap: 50px 70px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.dato-rejilla {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;

97
HTML, XML, CSS
 2.3. Elementos básicos

text-align: center;
}
</style>
</head>
<body>

<h1>Mostrando una rejilla (grid y inline-grid)</h1>

<p>Usar la propiedad display: grid; para hacer un contenedor de rejilla:</p>

<div class="contenedor-rejilla">
<div class="dato-rejilla">A</div>
<div class="dato-rejilla">B</div>
<div class="dato-rejilla">C</div>
<div class="dato-rejilla">D</div>
<div class="dato-rejilla">E</div>
<div class="dato-rejilla">F</div>
<div class="dato-rejilla">G</div>
<div class="dato-rejilla">H</div>
<div class="dato-rejilla">I</div>
</div>
</body>
</html>

Tabla 2.5 Propiedades de rejilla

Propiedad Valor

column-gap Especifica el espacio entre las columnas.

gap Una propiedad abreviada para las propiedades row-gap y

column-gap.

grid Una propiedad abreviada para las propiedades grid-template-

rows, grid-template-columns, grid-template-areas, grid-auto-
rows, grid-auto-columns y grid-auto-flow.

98
HTML, XML, CSS
 2.3. Elementos básicos

grid-area Especifica un nombre para el elemento de la cuadrícula, o esta

propiedad es una propiedad abreviada para las propiedades grid-
row-start, grid-column-start, grid-row-end y grid-column-end.

grid-auto-columns Especifica un tamaño de columna por defecto.

grid-auto-flow Especifica cómo se insertan los elementos autocolocados en la

rejilla.

grid-auto-rows Especifica un tamaño de fila por defecto.

grid-column Una propiedad abreviada para las propiedades grid-column-start

y grid-column-end.

grid-column-end Especifica dónde terminar el elemento de la cuadrícula.

grid-column-gap Especifica el tamaño del espacio entre columnas.

grid-column-start Especifica dónde empieza el elemento de la cuadrícula

grid-gap Una propiedad abreviada para las propiedades grid-row-gap y

grid-column-gap.

grid-row Una propiedad abreviada para las propiedades grid-row-start y

grid-row-end.

grid-row-end Especifica dónde terminar el elemento de la cuadrícula.

grid-row-gap Especifica el tamaño del espacio entre filas.

grid-row-start Especifica dónde empieza el elemento de la cuadrícula.

grid-template Una propiedad abreviada para las propiedades grid-template-

rows, grid-template-columns y grid-areas.

grid-template-areas Especifica cómo mostrar las columnas y las filas, utilizando

elementos de rejilla con nombre.

grid-template-columns Especifica el tamaño de las columnas, y cuántas columnas en un

diseño de cuadrícula.
99
HTML, XML, CSS
 2.3. Elementos básicos

grid-template-rows Especifica el tamaño de las filas en un diseño de cuadrícula.

Justify-content Se usa para justificar el contenido. Los valores que puede adoptar
son: space-evenly, space-around, space-betwen , center, start, end

Align-content Se usa para alinear verticalmente la rejilla completa dentro del

contenedor. Sus valores pueden ser: space-evenly, space-around,
space-between , center, start, end

row-gap Especifica el espacio entre las filas de la cuadrícula.

2.3.5. Objetos
La etiqueta <object></object> permite incrustar objetos embebido en la página. Por
ejemplo
<object data="[Link]" width="300" height="200"></object>
O este otro ejemplo:
<object data="[Link]" width="500" height="200"></object>
Muestra una página html embebida en el recuadro.

2.3.6. Imágenes
Las imágenes pueden mejorar el diseño y la apariencia de una página web. La etiqueta
HTML <img> se utiliza para incrustar una imagen en una página web.

Técnicamente, las imágenes no se insertan en una página web; las imágenes están
vinculadas a páginas web. La etiqueta <img> crea un espacio de retención para la imagen
referenciada.

La etiqueta <img> está vacía, sólo contiene atributos y no tiene etiqueta de cierre. La
etiqueta <img> tiene dos atributos obligatorios:

 src - Especifica la ruta de acceso a la imagen

 alt - Especifica un texto alternativo para la imagen

100
HTML, XML, CSS
 2.3. Elementos básicos

El atributo src requerido especifica la ruta (URL) de la imagen.

Ejemplo:
<img src="imagen_ciudad.jpg" alt="Imagen de una ciudad" style="width:500px;
height:600px;">
Nota: Cuando se carga una página web, es el navegador, en ese momento, el que obtiene
la imagen de un servidor web y la inserta en la página. Por lo tanto, asegúrese de que la
imagen permanece realmente en el mismo lugar en relación con la página web, de lo contrario
sus visitantes obtendrán un icono de enlace roto. El icono de enlace roto y el texto alternativo
se muestran si el navegador no puede encontrar la imagen.

El atributo alt requerido proporciona un texto alternativo para una imagen, si el usuario
por alguna razón no puede verla (debido a una conexión lenta, un error en el atributo src, o
si el usuario utiliza un lector de pantalla).

El valor del atributo alt debe describir la imagen.

Consejo: Un lector de pantalla es un programa de software que lee el código HTML y

permite al usuario "escuchar" el contenido. Los lectores de pantalla son útiles para las
personas con problemas de visión o de aprendizaje.

Puede utilizar el atributo de estilo para especificar la anchura y la altura de una imagen.
También puede utilizar los atributos de anchura y altura.

Los atributos de anchura y altura siempre definen la anchura y la altura de la imagen en

píxeles. Los atributos width, height y style son todos válidos en HTML.

Sin embargo, le sugerimos que utilice el atributo style. Éste evita que las hojas de estilo
cambien el tamaño de las imágenes.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
101
HTML, XML, CSS
 2.3. Elementos básicos

<body>

<img src="[Link]" alt="Ícono HTML5" width="128" height="128">

<img src="[Link]" alt="Ícono HTML5" style="width:128px; height:128px;">

</body>
</html>
Si tiene sus imágenes en una subcarpeta, debe incluir el nombre de la carpeta en el atributo
src. Algunos sitios web apuntan a una imagen en otro servidor.
<img src="/imagenes/[Link]" alt="Ícono HTML5" style="width:128px; height:128px;">
Para apuntar a una imagen en otro servidor, debe especificar una URL absoluta (completa)
en el atributo src.
<img src=" [Link]
alt="Logo Tecnm">
Notas sobre las imágenes externas: Las imágenes externas pueden estar sujetas a derechos
de autor. Si no obtienes permiso para usarlas, puedes estar violando las leyes de derechos de
autor. Además, no puede controlar las imágenes externas; pueden ser eliminadas o
modificadas repentinamente.

El HTML permite el uso de GIFs animados.

<img src="[Link]" alt="Un programador" style="width:48px;height:48px;">
Utilice la propiedad CSS float para que la imagen flote a la derecha o a la izquierda de un
texto.

<p><img src="[Link]" alt="Animación de izquierda a derecha"

style="float:right;width:42px;height:42px;">

Para usar una imagen como liga, se coloca la etiqueta <img> dentro de una etiqueta <a>.
<a href="[Link]">
<img src="[Link]" alt="Aprende más" style="width:42px;height:42px;">
</a>
Aquí están los tipos de archivos de imagen más comunes, que son compatibles con todos los
navegadores (Chrome, Edge, Firefox, Safari, Opera):

102
HTML, XML, CSS
 2.3. Elementos básicos

Tabla 2.6 Formatos y tipos de imagen

Abreviación Formato del archivo Extensión del archivo

APNG Gráfico de Red Portable .apng

Animado

GIF Formato de Intercambio ,gif

Gráfico

ICO Ícono de Microsoft .ico, .cur

JPEG Imagen del Grupo Mixto de .jpg, .jpeg, .jfif, .pjpeg, .pjp
Expertos en Fotografía

PNG Gráficos de red portátil .png

SVG Scalable Vector Graphics .svg

2.3.7. Aplicaciones

[Link]. Diseño web responsivo

El diseño web responsivo consiste en crear páginas web que se vean bien en todos los
dispositivos.

Un diseño web responsivo se ajustará automáticamente a los diferentes tamaños de

pantalla y puertos de visualización.

El diseño web responsivo consiste en utilizar HTML y CSS para redimensionar, ocultar,
reducir o ampliar automáticamente un sitio web, para que se vea bien en todos los
dispositivos (ordenadores de sobremesa, tabletas y teléfonos).

Para crear un sitio web responsivo, añada la siguiente etiqueta <meta> a todas sus páginas
web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

103
HTML, XML, CSS
 2.3. Elementos básicos

Las imágenes responsivas son imágenes que se adaptan bien a cualquier tamaño de
navegador.

Si la propiedad de anchura CSS se establece en 100%, la imagen será responsiva y se

escalará hacia arriba y hacia abajo.
<img src="img_girl.jpg" style="width:100%;">
Hay que notar que la imagen puede ser escalada para ser más grande que su tamaño
original. Una mejor solución, en muchos casos, será utilizar la propiedad max-width en su
lugar.

Si la propiedad max-width se establece en 100%, la imagen se reducirá si es necesario,

pero nunca se ampliará para ser más grande que su tamaño original:
<img src="[Link]" style="max-width:100%;height:auto;">
Para mostrar diferentes imágenes según el ancho del navegador se utiliza el elemento
HTML <picture> que permite definir diferentes imágenes para diferentes tamaños de ventana
del navegador.

Cambia el tamaño de la ventana del navegador para ver cómo cambia la imagen en función
de la anchura:
<picture>
<source srcset="[Link]" media="(max-width: 600px)">
<source srcset="[Link]" media="(max-width: 1500px)">
<source srcset="[Link]">
<img src="[Link]" alt="mi imagen">
</picture>
Para hacer el tamaño del texto responsivo, puede establecerse con una unidad "vw", que
significa el "ancho de la ventana gráfica".

De este modo, el tamaño del texto seguirá el tamaño de la ventana del navegador:
<h1 style="font-size:10vw">Hola mundo!!!</h1>
Viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana.
Si la ventana gráfica tiene 50 cm de ancho, 1vw es 0,5 cm.

Además de redimensionar el texto y las imágenes, también es habitual utilizar consultas

de medios en las páginas web responsivas.

104
HTML, XML, CSS
 2.3. Elementos básicos

Con las consultas de medios se pueden definir estilos completamente diferentes para
distintos tamaños de navegador.

Ejemplo: cambiar el tamaño de la ventana del navegador para ver que los tres elementos
div de abajo se mostrarán horizontalmente en pantallas grandes y apilados verticalmente en
pantallas pequeñas:
<style>
.left, .right {
float: left;
width: 30%; /* El ancho es 30%, por omisión */
}

.main {
float: left;
width: 50%; /* El ancho es 50%, por omisión */
}

/* Se usa una consulta de medios para añadir un punto de ruptura a 800px: */

@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* el ancho es del 100%, cuando el viewport es 800px o más pequeño */
}
}
</style>

[Link]. Marcos para diseño web responsivo

Todos los Frameworks CSS populares ofrecen diseño responsivo. Son gratuitos y fáciles
de usar. [Link]. [Link] es un moderno framework CSS con soporte para diseño de
escritorio, tableta y móvil por defecto. [Link] es más pequeño y más rápido que otros
frameworks CSS similares. [Link] está diseñado para ser una alternativa de alta calidad a
Bootstrap. [Link] está diseñado para ser independiente de jQuery o cualquier otra
biblioteca de JavaScript.

Otro marco CSS muy popular es Bootstrap. Bootstrap utiliza HTML, CSS y jQuery para
hacer páginas web responsivas.

105
HTML, XML, CSS
 2.3. Elementos básicos

[Link]. Geolocalización

La API de geolocalización de HTML se utiliza para localizar la posición de un usuario.

Localizar la posición del usuario. La API de geolocalización de HTML se utiliza para obtener
la posición geográfica de un usuario. Como esto puede comprometer la privacidad, la
posición no está disponible a menos que el usuario lo apruebe.

Para usar de la geolocalización en HTML tenemos el método getCurrentPosition() para

devolver la posición del usuario.

El ejemplo siguiente devuelve la latitud y la longitud de la posición del usuario:

<script>
var x = [Link]("localizacion");
function getLocation() {
if ([Link]) {
[Link](muestraPosicion, muestraError);
} else {
[Link] = "La Geolocalización no está soportada por este navegador.";
}
}

function muestraPosicion(posicion) {
[Link] = "Latitud: " + [Link] +
"<br>Longitud: " + [Link];
}

function muestraMapa(posicion) {
var latlon = [Link] + "," + [Link];

var img_url = "[Link]

"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
[Link]("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function muestraError(error) {
switch([Link]) {
case error.PERMISSION_DENIED:
[Link] = "El Usuario negó la petición para la geolocalización."
break;
case error.POSITION_UNAVAILABLE:
[Link] = "No está disponible la información para localización."
break;
case [Link]:
106
HTML, XML, CSS
 2.3. Elementos básicos

[Link] = " La solicitud para obtener la ubicación del usuario se ha agotado."

break;
case error.UNKNOWN_ERROR:
[Link] = " Se ha producido un error desconocido."
break;
}
}
</script>
Para visualizar el resultado en un mapa, es necesario acceder a un servicio de mapas, como
Google Maps.

En el siguiente ejemplo, la latitud y la longitud devueltas se utilizan para mostrar la

ubicación en un mapa de Google (utilizando una imagen estática). Para que funciones se debe
de adquirir una clave para tener acceso a la API de google maps.

[Link]. Almacenamiento Web

Con el almacenamiento web, las aplicaciones web pueden guardar los datos localmente
en el navegador del usuario.

Antes de HTML5, los datos de las aplicaciones tenían que almacenarse en cookies,
incluidas en cada solicitud del servidor. El almacenamiento web es más seguro, y se pueden
guardar grandes cantidades de datos localmente, sin afectar al rendimiento del sitio web.

A diferencia de las cookies, el límite de almacenamiento es mucho mayor (al menos 5

MB) y la información nunca se transfiere al servidor.

El almacenamiento en la web es por origen (por dominio y protocolo). Todas las páginas,
desde un mismo origen, pueden almacenar y acceder a los mismos datos.

El almacenamiento web HTML proporciona dos objetos para almacenar datos en el

cliente:

 [Link] - almacena datos sin fecha de caducidad.

 [Link] - almacena datos para una sesión (los datos se pierden cuando
se cierra la pestaña del navegador).

107
HTML, XML, CSS
 2.3. Elementos básicos

Antes de utilizar el almacenamiento web, compruebe la compatibilidad del navegador con

localStorage y sessionStorage:
<!DOCTYPE html>
<html>
<body>
<div id="resultado"></div>
<script>
// Verificar el soporte de almacenamiento Web
if (typeof(Storage) !== "undefined") {
// Store
[Link]("Apellido", "Perez");
// Retrieve
[Link]("resultado").innerHTML = [Link]("Apellido");}
else {
[Link]("resultado").innerHTML = "Lo siento tu navegador no soporta
almacenamiento Web...";
}
</script>
</body>
</html>

La sintaxis para eliminar el elemento localStorage "lastname" es la siguiente:

[Link]("Apellido");

Nota: Los pares nombre/valor se almacenan siempre como cadenas. Recuerde convertirlos
a otro formato cuando sea necesario.

El objeto sessionStorage es igual al objeto localStorage, salvo que almacena los datos de
una sola sesión. Los datos se eliminan cuando el usuario cierra la pestaña específica del
navegador.
<!DOCTYPE html>
<html>
<head>
<script>

108
HTML, XML, CSS
 2.3. Elementos básicos

function contador() {
if (typeof(Storage) !== "undefined") {
if ([Link]) {
[Link] = Number([Link])+1;
} else {
[Link] = 1;
}
[Link]("resultado").innerHTML = "Haz presionado el botón " +
[Link] + " veces en esta sesión.";
} else {
[Link]("resultado").innerHTML = " Lo siento tu navegador no soporta
almacenamiento Web...";
}
}
</script>
</head>
<body>
<p><button onclick="contador()" type="button">Haz clic aquí!!</button></p>
<div id="resultado"></div>
<p>Haz clic para incrementar el contador.</p>
<p>Cierra la pestaña (o ventana) del navegador, e inténtalo de nuevo, y el contador se
reiniciará.</p>
</body>
</html>

[Link]. Trabajadores Web

Un web worker es un JavaScript que se ejecuta en segundo plano, sin afectar al

rendimiento de la página.

Cuando se ejecutan scripts en una página HTML, la página deja de responder hasta que el
script finaliza.

Se puede seguir haciendo lo que quiera: hacer clic, seleccionar cosas, etc., mientras el web
worker se ejecuta en segundo plano.

Antes de crear un web worker, comprueba si el navegador del usuario lo soporta:

109
HTML, XML, CSS
 2.3. Elementos básicos

if (typeof(Worker) !== "undefined") {

// hay soporte para los trabajadores web!
// Mucho código.....
} else {
// No hay soporte para los trabajadores web..
}

Ahora, vamos a crear nuestro web worker en un JavaScript externo.

Aquí, creamos un script que cuenta. El script se almacena en el archivo

"trabajador_demo.js":

var i = 0;
function contador() {
i = i + 1;
postMessage(i);
setTimeout("contador()",500);
}
contador();

La parte importante del código anterior es el método postMessage(), que se utiliza para
enviar un mensaje a la página HTML.
<!DOCTYPE html>
<html>
<body>

<p>Número de contadores: <output id="resultado"></output></p>

<button onclick="comienzaTrabajador()"> Empezar trabajador</button>
<button onclick="detenTrabajador()">Detener trabajador</button>

<script>
var w;

function comienzaTrabajador() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("trabajador_demo.js");
}
110
HTML, XML, CSS
 2.3. Elementos básicos

[Link] = function(event) {
[Link]("resultado").innerHTML = [Link];
};
} else {
[Link]("resultado").innerHTML = "Lo siento: No hay soporte para
trabajadores web.";
}
}

function detenTrabajador() {
[Link]();
w = undefined;
}
</script>

</body>
</html>

[Link]. API HTML para eventos enviados al servidor

Los eventos enviados por el servidor (SSE) permiten que una página web reciba
actualizaciones de un servidor.

Un evento enviado por el servidor es cuando una página web recibe automáticamente
actualizaciones de un servidor.

Esto también era posible antes, pero la página web tenía que preguntar si había
actualizaciones disponibles. Con los eventos enviados por el servidor, las actualizaciones
llegan automáticamente.

Ejemplos: Actualizaciones de Facebook/Twitter, de las cotizaciones bursátiles, de las

noticias, de los resultados deportivos, etc.

Comprobar el soporte de eventos enviados por el servidor

En el ejemplo de tryit anterior había algunas líneas de código adicionales para

comprobar el soporte del navegador para los eventos enviados por el servidor:

111
HTML, XML, CSS
 2.3. Elementos básicos

Para recibir notificaciones de eventos enviados por el servidor se utiliza un objeto

llamado EventSource.

if(typeof(EventSource) !== "undefined") {

// Hay soporte para eventos enviados por el servidor!!
var source = new EventSource("sse_demo.php");
[Link] = function(event) {
[Link]("resultado").innerHTML += [Link] + "<br>";
};

} else {
// Lo sentimos. No hay soporte para eventos enviados por el servidor!!.
}

En este ejemplo se crea un Nuevo objeto EventSource y se especifica la URL de la

página que envía las actualizaciones (en este ejemplo "demo_sse.php") Cada vez que se
recibe una actualización, se produce el evento onmessage Cuando se produce un evento
onmessage, y se colocan los datos recibidos en el elemento con id="resultado".

Para que el ejemplo anterior funcione, se necesita un servidor capaz de enviar

actualizaciones de datos (como PHP o ASP u otro).

La sintaxis del flujo de eventos del lado del servidor es sencilla. Se establece la cabecera
"Content-Type" como "text/event-stream". Ahora se puede empezar a enviar flujos de
eventos.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

El Código realiza lo siguiente:

 Establecer la cabecera "Content-Type" como "text/event-stream".

112
HTML, XML, CSS
 2.4. Formularios

 Se especifica que la página no debe almacenarse en caché.

 Se emiten los datos a enviar (Siempre comienzan con "data: ").
 Se Vacían los datos de salida de vuelta a la página web.

También están disponibles los siguientes eventos:

Tabla 2.7 Eventos disponibles en un objetos EventSource

Evento Descripción

onopen Cuando se abre una conexión al servidor

onmessage Cuando se recibe un mensaje

onerror Cuando ocurre un error

2.4. Formularios

2.4.1. Definiciones
Un formulario HTML se utiliza para recoger la información del usuario. La entrada del
usuario suele enviarse a un servidor para su procesamiento.

El elemento HTML <form> se utiliza para crear un formulario HTML para la entrada del
usuario

El elemento <form> es un contenedor para diferentes tipos de elementos de entrada, como:

campos de texto, casillas de verificación, botones de radio, botones de envío, etc.

<form>
.
Elementos de formulario
.
</form>

113
HTML, XML, CSS
 2.4. Formularios

2.4.2. Atributos de formularios

[Link]. Atributo Action

El atributo action define la acción que se realizará cuando se envíe el formulario.

Normalmente, los datos del formulario se envían a un archivo en el servidor cuando el

usuario hace clic en el botón de envío.

En el ejemplo siguiente, los datos del formulario se envían a un archivo llamado

"[Link]". Este archivo contiene un script del lado del servidor que maneja los datos del
formulario.
<form action="[Link]" method="post" >
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan"><br>
<label for="ApellidoPaterno">Apellido paterno:</label><br>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"
value="Juárez"><br><br>
<label for="ApellidoMaterno">Apellido materno:</label><br>
<input type="text" id="apellidoMaterno" name="apellidoMaterno"
value="Sosa"><br><br>
<input type="submit" value="Submit">
</form>
Consejo: Si se omite el atributo de acción, la acción se establece en la página actual.

[Link]. Atributo Target

El atributo target especifica dónde mostrar la respuesta que se recibe después de enviar el
formulario. El atributo target puede tener uno de los siguientes valores:

Tabla 2.8 Valores del atributo target

Valor Descripción

_blank La respuesta se muestra en una nueva ventana o pestaña

_self La respuesta se muestra en la ventana actual

_parent La respuesta se muestra en el marco principal

114
HTML, XML, CSS
 2.4. Formularios

_top La respuesta se muestra en el cuerpo completo de la ventana

framename La respuesta se muestra en un iframe con nombre

[Link]. Atributo Method

El atributo method especifica el método HTTP que se utilizará al enviar los datos del
formulario.

Los datos del formulario pueden enviarse como variables URL (con method="get") o
como transacción HTTP post (con method="post").

El método HTTP por defecto al enviar los datos del formulario es GET.

Notas sobre GET. Añade los datos del formulario a la URL, en pares nombre/valor
¡Nunca use GET para enviar datos sensibles! (los datos del formulario enviado son visibles
en la URL) La longitud de una URL está limitada (2048 caracteres) Es útil para los envíos
de formularios en los que el usuario quiere marcar el resultado GET es bueno para datos no
seguros, como las cadenas de consulta en Google

Notas sobre POST. Añade los datos del formulario dentro del cuerpo de la petición HTTP
(los datos del formulario enviado no se muestran en la URL) POST no tiene limitaciones de
tamaño, y puede utilizarse para enviar grandes cantidades de datos. Los envíos de formularios
con POST no pueden marcarse como favoritos.

Consejo. Utilice siempre POST si los datos del formulario contienen información sensible
o personal.

[Link]. Atributo de autocompletar

El atributo autocomplete especifica si un formulario debe tener activado o desactivado el

autocompletado.

Cuando el autocompletado está activado, el navegador completa automáticamente los

valores basándose en los valores que el usuario ha introducido anteriormente.

115
HTML, XML, CSS
 2.4. Formularios

[Link]. Atributo novalidate

El atributo novalidate es un atributo booleano. Cuando está presente, especifica que los
datos del formulario (entrada) no deben ser validados cuando se envían.

Tabla 2.9 Atributos de la etiqueta form

Atributo Descripción

accept-charset Especifica las codificaciones de caracteres utilizadas para el envío de

formularios

action Especifica dónde enviar los datos del formulario cuando se envía un
formulario

autocomplete Especifica si un formulario debe tener activado o desactivado el

autocompletado

enctype Especifica cómo deben codificarse los datos del formulario al enviarlo al
servidor (sólo para method="post")

method Especifica el método HTTP a utilizar cuando se envían los datos del
formulario

name Especifica el nombre del formulario

novalidate Especifica que el formulario no debe ser validado cuando se envía

rel Especifica la relación entre un recurso vinculado y el documento actual

target Especifica la relación entre un recurso vinculado y el documento actual

2.4.3. Elementos de formularios

El elemento HTML <form> puede contener uno o más de los siguientes elementos de
formulario:

116
HTML, XML, CSS
 2.4. Formularios

[Link]. El elemento <input>

Uno de los elementos de formulario más utilizados es el elemento <input>.

El elemento <input> puede mostrarse de varias maneras, dependiendo del atributo type.

Ejemplo:
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
Todos los diferentes valores del atributo type se tratan en el siguiente subtema.

[Link]. El elemento <label>

El elemento <label> define una etiqueta para varios elementos del formulario.

El elemento <label> es útil para los usuarios de lectores de pantalla, porque el lector de
pantalla leerá en voz alta la etiqueta cuando el usuario se centre en el elemento de entrada.

El elemento <label> también ayuda a los usuarios que tienen dificultades para hacer clic
en regiones muy pequeñas (como botones de radio o casillas de verificación), porque cuando
el usuario hace clic en el texto dentro del elemento <label>, se activa el botón de radio/casilla
de verificación.

El atributo for de la etiqueta <label> debe ser igual al atributo id del elemento <input>
para unirlos.

[Link]. El elemento <select>

El elemento <select> define una lista desplegable:

Ejemplo
<label for="auto">Selecciona un auto car:</label>
<select id="auto" name="auto">
<option value="vocho">Volkswagen</option>
<option value="focus">Focus</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
117
HTML, XML, CSS
 2.4. Formularios

Los elementos <option> definen una opción que puede ser seleccionada. Por defecto, se
selecciona el primer elemento de la lista desplegable. Para definir una opción
preseleccionada, añada el atributo selected a la opción:
<option value="fiat" selected>Fiat</option>
Utilice el atributo size para especificar el número de valores visibles:
<label for="auto">Selecciona un auto:</label>
<select id="auto" name="auto" size="3">
<option value="vocho">Volkswagen</option>
<option value="focus">Focus</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Para Permitir selecciones múltiples:

Utilice el atributo múltiple para permitir que el usuario seleccione más de un valor:
<label for="auto">Selecciona un auto:</label>
<select id="auto" name="auto" size="4" multiple>
<option value="vocho">Volkswagen</option>
<option value="focus">Focus</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

[Link]. El elemento <textarea>

El elemento <textarea> define un campo de entrada de varias líneas (un área de texto):

Ejemplo
<textarea name="message" rows="10" cols="30">
Hay algo importante aquí.
</textarea>
El atributo rows especifica el número de líneas visibles en un área de texto. El atributo
cols especifica el ancho visible de un área de texto.

Así es como el código HTML anterior se mostrará en un navegador:

Hay algo importante aquí.

También puede definir el tamaño del área de texto utilizando CSS:

118
HTML, XML, CSS
 2.4. Formularios

<textarea name="message" style="width:200px; height:600px;">

The cat was playing in the garden.
</textarea>

[Link]. El elemento <button>

El elemento <button> define un botón sobre el que se puede hacer clic:

<button type="button" onclick="alert(Haz hecho click!')">Haz click aquí!</button>
Nota: Especifique siempre el atributo type para el elemento botón. Diferentes navegadores
pueden utilizar diferentes tipos por defecto para el elemento botón.

[Link]. Los elementos <fieldset> y <legend>

El elemento <fieldset> se utiliza para agrupar datos relacionados en un formulario.

El elemento <legend> define un título para el elemento <fieldset>.

Ejemplo
<form action="/[Link]">
<fieldset>
<legend>Datos de la persona:</legend>
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan"><br>
<label for="apellidoPaterno">Apellido paterno:</label><br>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"
value="Sánchez"><br><br>
<label for="apellidoMaterno">Apellido materno:</label><br>
<input type="text" id="apellidoMaterno" name="apellidoMaterno"
value="Pérez"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

[Link]. El elemento <datalist>

El elemento <datalist> especifica una lista de opciones predefinidas para un elemento

<input>.

Los usuarios verán una lista desplegable de las opciones predefinidas cuando introduzcan
los datos.

119
HTML, XML, CSS
 2.4. Formularios

El atributo list del elemento <input> debe hacer referencia al atributo id del elemento
<datalist>.
<form action="/[Link]">
<input list="navegadores">
<datalist id="navegadores">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

[Link]. El elemento <output>

El elemento <output> representa el resultado de un cálculo (como el realizado por un

script).

Ejemplo:

Realizar un cálculo y mostrar el resultado en un elemento <output>:

<form action="/[Link]"
oninput="[Link]=parseInt([Link])+parseInt([Link])">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Tabla 2.10 Elementos de formularios

Etiqueta Descripción

<form> Define un formulario HTML para la entrada del usuario.

<input> Define un control de entrada.

<textarea> Define un control de entrada multilínea (área de texto).

120
HTML, XML, CSS
 2.4. Formularios

<label> Define una etiqueta para un elemento <input>.

<fieldset> Agrupa elementos relacionados en un formulario.

<legend> Define un título para un elemento <fieldset>.

<select> Define una lista desplegable.

<optgroup> Define un grupo de opciones relacionadas en una lista desplegable.

<option> Define una opción en una lista desplegable.

<button> Define un botón clicable.

<datalist> Especifica una lista de opciones predefinidas para los controles de entrada.

<output> Define el resultado de un cálculo.

2.4.4 Tipos de entrada

Estos son los diferentes tipos de entrada que puede utilizar en HTML:

[Link]. Tipo de entrada de texto

<input type="text"> define un campo de entrada de texto de una sola línea:

<form>
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre"><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno ">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno ">
</form>

[Link]. Tipo de entrada password

Los caracteres de un campo de contraseña están enmascarados (se muestran como

asteriscos o círculos).
<form>
<label for="usuario">Usuario:</label><br>
<input type="text" id="usuario" name="usuario"><br>
121
HTML, XML, CSS
 2.4. Formularios

<label for="clave">Clave:</label><br>
<input type="password" id="clave" name="clave">
</form>

[Link]. Tipo de entrada Submit

<input type="submit"> define un botón para enviar los datos del formulario a un
manejador de formularios.

El manejador de formularios suele ser una página del servidor con un script para procesar
los datos de entrada.

El manejador de formularios se especifica en el atributo action del formulario:

Ejemplo:
<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre"><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno ">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno ">
<input type="submit" value="Enviar">
</form>
Si omite el atributo de valor del botón de envío, el botón obtendrá un texto por defecto:
<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre"><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno ">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno ">
<input type="submit">
</form>

[Link]. Tipo de entrada reset

<input type="reset"> define un botón de reinicio que restablecerá todos los valores del
formulario a sus valores por defecto:
<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
122
HTML, XML, CSS
 2.4. Formularios

<input type="text" id="nombre" name="nombre" value="Juan"><br>

<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<input type="submit">
<input type="reset" value="Restaurar">
</form>
Si cambia los valores de entrada y luego hace clic en el botón "Restaurar", los datos del
formulario se restablecerán a los valores predeterminados.

[Link]. Tipo de entrada Radio

<input type="radio"> define un botón de radio.

Los botones de radio permiten al usuario seleccionar sólo una de un número limitado de
opciones:
<p> Elija su lenguaje web favorito:</p>

<form>
<input type="radio" id="html" name="lenguajeFavorito" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name=" lenguajeFavorito " value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name=" lenguajeFavorito " value="JavaScript">
<label for="php">PHP</label><br>
<input type="radio" id="php" name=" lenguajeFavorito " value="PHP">
<label for="php">PHP</label>
</form>

[Link]. Tipo de entrada checkBox

<input type="checkbox"> define una casilla de verificación.

Las casillas de verificación permiten al usuario seleccionar cero o más opciones de un

número limitado de opciones.
<form>
<input type="checkbox" id="vehiculo1" name="vehiculo1" value="Auto">
<label for=" vehiculo 1"> Tengo auto</label><br>
<input type="checkbox" id="vehiculo2" name=" vehiculo 2" value="Moto">
<label for=" vehiculo 2"> Tengo moto</label><br>
123
HTML, XML, CSS
 2.4. Formularios

<input type="checkbox" id="vehiculo3" name=" vehiculo 3" value="Yate">

<label for=" vehiculo 3"> Tengo yate</label>
</form>

[Link]. Tipo de entrada Button

<input type="button"> define un botón:

Ejemplo
<input type="button" onclick="alert(Hola a todos!')" value="="¡Hazme clic!">

[Link]. Tipo de entrada Color

El <input type="color"> se utiliza para los campos de entrada que deben contener un
color.

Dependiendo del soporte del navegador, un selector de color puede aparecer en el campo
de entrada.
<form>
<label for="color">Selecciona tu color favorito:</label>
<input type="color" id="color" name="favcolor">
</form>

[Link]. Tipo de entrada Fecha

El <input type="date"> se utiliza para los campos de entrada que deben contener una
fecha.

Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo
de entrada.

Ejemplo
<form>
<label for="fechaNacimiento"> Cumpleaños:</label>
<input type="date" id=" fechaNacimiento " name=" fechaNacimiento ">
</form>
También puedes utilizar los atributos min y max para añadir restricciones a las fechas:

Ejemplo

124
HTML, XML, CSS
 2.4. Formularios

<form>
<label for="fechaMax"> Ingrese una fecha anterior a 1980-01-01:</label>
<input type="date" id=" fechaMax " name=" fechaMax " max="1979-12-31"><br><br>
<label for=" fechaMin "> Ingrese una fecha posterior al 2000-01-01:</label>
<input type="date" id=" fechaMin " name=" fechaMin " min="2000-01-02">
</form>

[Link]. Tipo de entrada Datetime-local

El <input type="datetime-local"> especifica un campo de entrada de fecha y hora, sin

zona horaria.

Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo
de entrada.

Ejemplo:
<form>
<label for=" fechaNacimientoHora "> Cumpleaños (fecha y hora):</label>
<input type="datetime-local" id=" fechaNacimientoHora " name=" fechaNacimientoHora
">
</form>

[Link]. Tipo de entrada Email

El <input type="email"> se utiliza para los campos de entrada que deben contener una
dirección de correo electrónico.

Dependiendo del soporte del navegador, la dirección de correo electrónico puede ser
validada automáticamente cuando se envía.

Algunos teléfonos inteligentes reconocen el tipo de correo electrónico y añaden ".com" al

teclado para que coincida con la entrada de correo electrónico.

Ejemplo
<form>
<label for="correo"> Ingrese su correo electrónico:</label>
<input type="email" id=" correo " name=" correo ">
</form>

125
HTML, XML, CSS
 2.4. Formularios

[Link]. Tipo de entrada file

El <input type="file"> define un campo de selección de archivos y un botón "Navegar"

para la carga de archivos.

Ejemplo
<form>
<label for="miArchivo"> Seleccione un archivo:</label>
<input type="file" id=" miArchivo " name=" miArchivo ">
</form>

[Link]. Tipo de entrada hidden

El <input type="hidden"> define un campo de entrada oculto (no visible para un usuario).

Un campo oculto permite a los desarrolladores web incluir datos que no pueden ser vistos
o modificados por los usuarios cuando se envía un formulario.

Un campo oculto a menudo almacena el registro de la base de datos que necesita ser
actualizado cuando se envía el formulario.

Nota: Aunque el valor no se muestra al usuario en el contenido de la página, es visible (y

puede editarse) utilizando las herramientas de desarrollo de cualquier navegador o la función
"Ver fuente". No utilice las entradas ocultas como forma de seguridad.

Ejemplo
<form action="/[Link]">
<input type="hidden" id="identificadorUsuario" name=" identificadorUsuario "
value="8313">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan"><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<input type="submit">
<input type="reset" value="Restaurar">
</form>

126
HTML, XML, CSS
 2.4. Formularios

[Link]. Tipo de entrada month

El <input type="month"> permite al usuario seleccionar un mes y un año.

Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo
de entrada.

Ejemplo
<form>
<label for="MesAnio"> Cumpleaños (mes y año):</label>
<input type="month" id=" MesAnio " name=" MesAnio ">
</form>

[Link]. Tipo de entrada number

El <input type="number"> define un campo de entrada numérico.

También puede establecer restricciones sobre los números que se aceptan.

El siguiente ejemplo muestra un campo de entrada numérico, donde se puede introducir

un valor del 1 al 10:

Ejemplo
<form>
<label for=" cantidad "> Cantidad (entre 1 y 10):</label>
<input type="number" id=" cantidad " name=" cantidad " min="1" max="10">
</form>

[Link]. Restricciones de entrada

En la tabla Tabla 2.11 hay una lista de algunas restricciones de entrada comunes:

Tabla 2.11 Restricciones de entrada comunes

Atributo Descripción

checked Especifica que un campo de entrada debe ser preseleccionado cuando se

carga la página (para type="checkbox" o type="radio")

disabled Especifica que un campo de entrada debe estar deshabilitado

max Especifica el valor máximo de un campo de entrada

127
HTML, XML, CSS
 2.4. Formularios

min Especifica el valor mínimo de un campo de entrada

pattern Especifica una expresión regular para comprobar el valor de la entrada

readonly Especifica que un campo de entrada es de sólo lectura (no puede ser
modificado)

required Especifica que un campo de entrada es obligatorio (debe ser rellenado)

size Especifica la anchura (en caracteres) de un campo de entrada

step Especifica los intervalos de números legales para un campo de entrada

value Especifica el valor por defecto de un campo de entrada

El siguiente ejemplo muestra un campo de entrada numérico, donde se puede introducir

un valor de 0 a 100, en pasos de 10. El valor por defecto es 30:

Ejemplo
<form>
<label for="cantidad">Cantidad:</label>
<input type="number" id="cantidad" name="cantidad " min="0" max="100" step="10"
value="30">
</form>
Rango del tipo de entrada

[Link]. Tipo de entrada range

El <input type="range"> define un control para introducir un número cuyo valor exacto
no es importante (como un control deslizante). El rango por defecto es de 0 a 100. Sin
embargo, puede establecer restricciones sobre los números que se aceptan con los atributos
min, max y step:

Ejemplo
<form>
<label for="volumen">Volumen (between 0 and 30):</label>
<input type="range" id=" volumen " name=" volumen " min="0" max="30">
</form>
128
HTML, XML, CSS
 2.4. Formularios

[Link]. Tipo de entrada search

El <input type="search"> se utiliza para los campos de búsqueda (un campo de búsqueda
se comporta como un campo de texto normal).

Ejemplo:
<form>
<label for="buscaGoogle"> Buscar en Google:</label>
<input type="search" id="buscaGoogle" name="buscaGoogle">
</form>

[Link]. Tipo de entrada tel

El <input type="tel"> se utiliza para los campos de entrada que deben contener un número
de teléfono.

Ejemplo
<form>
<label for="telefono"> Ingrese su número de teléfono:</label>
<input type="tel" id="telefono" name="telefono" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

[Link]. Tipo de entrada time

El <input type="time"> permite al usuario seleccionar una hora (sin zona horaria).

Dependiendo del soporte del navegador, puede aparecer un selector de hora en el campo
de entrada.

Ejemplo
<form>
<label for="appt"> Seleccione una hora:</label>
<input type="time" id="hora" name="hora">
</form>

129
HTML, XML, CSS
 2.4. Formularios

[Link]. Tipo de entrada Url

El <input type="url"> se utiliza para los campos de entrada que deben contener una
dirección URL.

Dependiendo del soporte del navegador, el campo url puede ser validado automáticamente
cuando se envía.

Algunos smartphones reconocen el tipo url y añaden ".com" al teclado para que coincida
con la entrada url.

Ejemplo
<form>
<label for=" paginaInicio "> Añade tu página de inicio:</label>
<input type="url" id="paginaInicio" name=" paginaInicio ">
</form>

[Link]. Tipo de entrada week

El <input type="week">permite al usuario seleccionar una semana y un año.

Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo
de entrada.

Ejemplo
<form>
<label for="semana">Select a week:</label>
<input type="week" id="semana" name="semana">
</form>

2.4.5. Atributos de input

En este subtema se describe los diferentes atributos del elemento HTML <input>.

[Link]. El atributo value

El atributo value de entrada especifica un valor inicial para un campo de entrada:

Ejemplo
130
HTML, XML, CSS
 2.4. Formularios

Campos de entrada con valores iniciales (por defecto):

<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan"><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<input type="submit">
<input type="reset" value="Restaurar">
</form>

[Link]. El atributo readonly

El atributo input readonly especifica que un campo de entrada es de sólo lectura.

Un campo de entrada de sólo lectura no puede ser modificado (sin embargo, un usuario
puede tabular hasta él, resaltarlo y copiar el texto de él).

El valor de un campo de entrada de sólo lectura se enviará cuando se envíe el formulario.

Ejemplo:

Un campo de entrada de sólo lectura:

<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan" readonly ><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<input type="submit">
<input type="reset" value="Restaurar">
</form>

[Link]. El atributo disabled

El atributo input disabled especifica que un campo de entrada debe estar deshabilitado.

Un campo de entrada deshabilitado es inutilizable y no se puede hacer clic en él.

El valor de un campo de entrada deshabilitado no se enviará al enviar el formulario.

131
HTML, XML, CSS
 2.4. Formularios

Ejemplo:

Un campo de entrada deshabilitado:

<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan" disabled ><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<input type="submit">
<input type="reset" value="Restaurar">

</form>

[Link]. El atributo size

El atributo size de input especifica el ancho visible, en caracteres, de un campo de entrada.

El valor por defecto del tamaño es 20.

Nota: El atributo size funciona con los siguientes tipos de entrada: text, search, tel, url,
email y password.

Ejemplo

Establecer un ancho para un campo de entrada:

<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan" disabled ><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
<input type="submit">
<input type="reset" value="Restaurar">

</form>

132
HTML, XML, CSS
 2.4. Formularios

[Link]. El atributo maxlength

El atributo maxlength especifica el número máximo de caracteres permitidos en un campo

de entrada.

Nota: Cuando se establece una longitud máxima, el campo de entrada no aceptará más
que el número de caracteres especificado. Sin embargo, este atributo no proporciona ninguna
información. Por lo tanto, si quiere alertar al usuario, debe escribir código JavaScript.

Ejemplo

Establecer una longitud máxima para un campo de entrada:

<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan" disabled ><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
<input type="submit">
<input type="reset" value="Restaurar">

</form>

[Link]. Los atributos min y max

Los atributos min y max de entrada especifican los valores mínimos y máximos de un
campo de entrada.

Los atributos min y max funcionan con los siguientes tipos de entrada: number, range,
date, datetime-local, month, time y week.

Consejo: Utilice los atributos máx. y mín. juntos para crear un rango de valores legales.

Ejemplo:

Establezca una fecha máxima, una fecha mínima y un rango de valores legales:

133
HTML, XML, CSS
 2.4. Formularios

<form>
<label for="fechamax"> Ingrese una fecha anterior a 1980-01-01:</label>
<input type="date" id="fechamax " name="fechamax" max="1979-12-31"><br><br>

<label for="fechamin"> Ingrese una fecha posterior al 2000-01-01:</label>

<input type="date" id="fechamin" name="fechamin" min="2000-01-02"><br><br>

<label for="cantidad"> Cantidad (entre 1 y 5):</label>

<input type="number" id=="cantidad" name=="cantidad" min="1" max="5">
</form>

[Link]. El atributo multiple

El atributo multiple en input especifica que el usuario puede introducir más de un valor
en un campo de entrada.

El atributo múltiple funciona con los siguientes tipos de entrada: email y file.

Ejemplo:

Un campo de carga de archivos que acepta múltiples valores:

<form>
<label for="archivos">Seleccione los archivos:</label>
<input type="file" id="archivos" name="archivos" multiple>
</form>

[Link]. El atributo pattern

El atributo de patrón de entrada especifica una expresión regular con la que se comprueba
el valor del campo de entrada, cuando se envía el formulario.

El atributo pattern funciona con los siguientes tipos de entrada: text, date, search, url, tel,
email y password.

Consejo: Utilice el atributo global title para describir el patrón para ayudar al usuario.

Ejemplo

Un campo de entrada que sólo puede contener tres letras (sin números ni caracteres
especiales):
<form>
<label for="codigoPais"> Código de país:</label>
134
HTML, XML, CSS
 2.4. Formularios

<input type="text" id="codigoPais" name="codigoPais"

pattern="[A-Za-z]{3}" title="Se require un código de tres letras">
<input type="submit" value="Submit">
</form>

[Link]. El atributo placeholder

El atributo placeholder de input especifica una breve pista que describe el valor esperado
de un campo de entrada (un valor de muestra o una breve descripción del formato esperado).

La breve pista se muestra en el campo de entrada antes de que el usuario introduzca un

valor.

El atributo placeholder funciona con los siguientes tipos de entrada: text, search, url, tel,
email y password.

Ejemplo:

Un campo de entrada con un texto de marcador de posición:

<form>
<label for="telefono"> Ingresa un número de teléfono:</label>
<input type="tel" id="telefono" name="telefono"
placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}">
</form>

[Link]. El atributo required

El atributo required de input especifica que un campo de entrada debe ser rellenado antes
de enviar el formulario.

El atributo required funciona con los siguientes tipos de entrada: text, search, url, tel,
email, password, date, number, checkbox, radio y file.

Ejemplo:

Un campo de entrada obligatorio

<form>
<label for="nombreUsuario">Nombre de usuario:</label>
<input type="text" id="nombreUsr" name="nombreUsr" required>
</form>

135
HTML, XML, CSS
 2.4. Formularios

[Link]. El atributo step

El atributo step de input especifica los intervalos de números legales para un campo de
entrada.

Ejemplo: si step="3", los números legales podrían ser -3, 0, 3, 6, etc.

Consejo: Este atributo puede utilizarse junto con los atributos max y min para crear un
rango de valores legales.

El atributo step funciona con los siguientes tipos de entrada: number, range, date,
datetime-local, month, time y week.

Ejemplo:

Un campo de entrada con un intervalo de números legal especificado:

<form>
<label for="pasos">Pasos:</label>
<input type="number" id="pasos" name="pasos" step="3">
</form>
Nota: Las restricciones de entrada no son infalibles, y JavaScript ofrece muchas formas de
añadir entradas ilegales. Para restringir la entrada de forma segura, verifique la información
del lado del servidor.

[Link]. El atributo autofocus

El atributo autofocus de input especifica que un campo de entrada debe obtener

automáticamente el foco cuando se carga la página.

Ejemplo:

Permite que el campo de entrada "Nombre" obtenga automáticamente el foco cuando se

cargue la página
<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan" autofocus ><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">

136
HTML, XML, CSS
 2.4. Formularios

<label for="apellidoMaterno"> Apellido Materno:</label><br>

<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
<input type="submit">
<input type="reset" value="Restaurar">

</form>

[Link]. Los atributos de height y width

Los atributos de height y width de la entrada especifican la altura y la anchura de un

elemento <input type="image">.

Consejo: Especifique siempre los atributos de altura y anchura para las imágenes. Si se
establecen la altura y la anchura, el espacio necesario para la imagen se reserva cuando se
carga la página. Sin estos atributos, el navegador no conoce el tamaño de la imagen y no
puede reservarle el espacio adecuado. El efecto será que el diseño de la página cambiará
durante la carga (mientras se cargan las imágenes).

Ejemplo

Definir una imagen como botón de envío, con atributos de altura y anchura:
<form action="/[Link]">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan" autofocus ><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">
<label for="apellidoMaterno"> Apellido Materno:</label><br>
<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
<input type="image" src="[Link]" alt="Enviar" width="48" height="48">
<input type="submit" value="Enviar">
<input type="reset" value="Restaurar">

</form>

137
HTML, XML, CSS
 2.4. Formularios

[Link]. El atributo list

El atributo list de input se refiere a un elemento <datalist> que contiene opciones

predefinidas para un elemento <input>.

Ejemplo:

Un elemento <input> con valores predefinidos en un <datalist>:

<form>
<input list="navegadores">
<datalist id="navegadores">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

[Link]. El atributo autocomplete

El atributo autocomplete de input especifica si un formulario o un campo de entrada debe

tener activado o desactivado el autocompletado.

El autocompletado permite al navegador predecir el valor. Cuando un usuario comienza a

escribir en un campo, el navegador debería mostrar opciones para rellenar el campo,
basándose en los valores escritos anteriormente.

El atributo de autocompletar funciona con <form> y los siguientes tipos de <input>: text,
search, url, tel, email, password, datepickers, range y color.

Ejemplo:

Un formulario HTML con autocompletar activado y desactivado para un campo de

entrada:
<form action="/[Link]" autocomplete="on">
<label for="nombre"> Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Juan" autofocus ><br>
<label for="apellidoPaterno"> Apellido Paterno:</label><br>
<input type="text" id=" apellidoPaterno " name=" apellidoPaterno" value="Pérez">

138
HTML, XML, CSS
 2.4. Formularios

<label for="apellidoMaterno"> Apellido Materno:</label><br>

<input type="text" id=" apellidoMaterno " name=" apellidoMaterno " value="García">
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
<label for="correo">Correo:</label>
<input type="email" id="correo" name="correo" autocomplete="off"><br><br>
<input type="image" src="[Link]" alt="Enviar" width="48" height="48">
<input type="submit" value="Enviar">
<input type="reset" value="Restaurar">

</form>

Sugerencia: En algunos navegadores puede ser necesario activar la función de

autocompletar para que esto funcione (Busque en "Preferencias" en el menú del navegador).

2.4.6. Atributos de form

[Link]. El atributo form

El atributo form especifica el formulario al que pertenece el elemento <input>.

El valor de este atributo debe ser igual al atributo id del elemento <form> al que pertenece.

Un campo de entrada situado fuera del formulario HTML (pero que sigue siendo parte del
formulario):

<form action="/[Link]" id="formulario">

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<input type="submit" value="Enviar">
</form>
<label for="Apellido paterno">Apellido paterno:</label>
<input type="text" id="apellidoPaterno" name="apellidoPaterno" form="formulario">

[Link]. El atributo formaction

El atributo formaction de la entrada especifica la URL del archivo que procesará la entrada
cuando se envíe el formulario.
139
HTML, XML, CSS
 2.4. Formularios

Nota: Este atributo anula el atributo action del elemento <form>.

El atributo formaction funciona con los siguientes tipos de entrada: submit e image.
Ejemplo

Un formulario HTML con dos botones de envío, con acciones diferentes:

<form action="/[Link]">
<label for="Nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="apellidoPaterno">Apellido paterno:</label>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"><br><br>
<input type="submit" value="Enviar">
<input type="submit" formaction="/[Link]" value="Enviar como administrador">
</form>

[Link]. El atributo formenctype

El tributo formenctype especifica cómo deben codificarse los datos del formulario cuando
se envían (sólo para formularios con method="post").

Nota: Este atributo anula el atributo enctype del elemento <form>.

El atributo formenctype funciona con los siguientes tipos de entrada: submit e image.

Ejemplo:

Un formulario con dos botones de envío. El primero envía los datos del formulario con la
codificación por defecto, el segundo envía los datos del formulario codificados como
"multipart/form-data":
<form action="/acció[Link]" method="post">
<label for="Nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="apellidoPaterno">Apellido paterno:</label>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"><br><br>
<input type="submit" value="Enviar">
<input type="submit" formenctype="multipart/form-data"
value="Enviar como Multipart/form-data">
</form>

140
HTML, XML, CSS
 2.4. Formularios

[Link]. El atributo formmethod

El atributo formmethod de la entrada define el método HTTP para enviar los datos del
formulario a la URL de la acción.

Nota: Este atributo anula el atributo method del elemento <form>.

El atributo formmethod funciona con los siguientes tipos de entrada: submit e image.

Los datos del formulario pueden enviarse como variables de la URL (method="get") o
como una transacción HTTP post (method="post").

Notas sobre el método "get":

 Este método añade los datos del formulario a la URL en pares nombre/valor

 Este método es útil para los envíos de formularios en los que el usuario quiere marcar el
resultado.

 Hay un límite en la cantidad de datos que puede colocar en una URL (varía entre los
navegadores), por lo tanto, no puede estar seguro de que todos los datos del formulario
serán transferidos correctamente.

 Nunca utilice el método "get" para pasar información sensible. (la contraseña u otra
información sensible será visible en la barra de direcciones del navegador).

Notas sobre el método "post":

 Este método envía los datos del formulario como una transacción HTTP post.

 Los envíos de formularios con el método "post" no se pueden marcar como favoritos.

 El método "post" es más robusto y seguro que "get", y "post" no tiene limitaciones de
tamaño.

Ejemplo

Un formulario con dos botones de envío. El primero envía los datos del formulario con
method="get". El segundo envía los datos del formulario con method="post":

141
HTML, XML, CSS
 2.4. Formularios

<form action="/[Link]" method="get">

<label for="Nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="apellidoPaterno">Apellido paterno:</label>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"><br><br>
<input type="submit" value="Enviar con GET">
<input type="submit" formmethod="post" value="Enviar usando POST"
</form>

[Link]. El atributo formtarget

El atributo formtarget especifica un nombre o una palabra clave que indica dónde mostrar
la respuesta que se recibe después de enviar el formulario.

Nota: Este atributo anula el atributo target del elemento <form>.

El atributo formtarget funciona con los siguientes tipos de entrada: submit e image.

Ejemplo:

Un formulario con dos botones de envío, con diferentes ventanas de destino:

<form action="/[Link]">
<label for="Nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="apellidoPaterno">Apellido paterno:</label>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"><br><br>
<input type="submit" value="Enviar">
<input type="submit" formmethod="post" value="Enviar usando POST"

<input type="submit" formtarget="_blank" value="Enviar a una nueva pestaña"

</form>

142
HTML, XML, CSS
 2.4. Formularios

[Link]. El atributo formnovalidate

El atributo formnovalidate de entrada especifica que un elemento <input> no debe ser

validado cuando se envía.

Nota: Este atributo anula el atributo novalidate del elemento <form>.

El atributo formnovalidate funciona con los siguientes tipos de entrada: submit.

Ejemplo:

Un formulario con dos botones de envío (con y sin validación):

<form action="/[Link]">
<label for="Nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="apellidoPaterno">Apellido paterno:</label>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"><br><br>

<label for="correoElectronico">Su correo Electrónico:</label>

<input type="text" id="correoElectronico" name="correoElectronico"><br><br>
<input type="submit" value="Enviar">
<input type="submit" formmethod="post" value="Enviar usando POST"

<input type="submit" formnovalidate="formnovalidate" value="Enviar sin validación"

</form>

[Link]. El atributo novalidate

El atributo novalidate es un atributo de la etiqueta <form>.

Cuando está presente, novalidate especifica que todos los datos del formulario no deben
ser validados cuando se envían.

Ejemplo:

Especifica que no se deben validar los datos del formulario al enviarlo:

143
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

<form action="/[Link]" novalidate >

<label for="Nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="apellidoPaterno">Apellido paterno:</label>
<input type="text" id="apellidoPaterno" name="apellidoPaterno"><br><br>

<label for="correoElectronico">Su correo Electrónico:</label>

<input type="text" id="correoElectronico" name="correoElectronico"><br><br>
<input type="submit" value="Enviar">
<input type="submit" formmethod="post" value="Enviar usando POST"

<input type="submit" formnovalidate="formnovalidate" value="Enviar sin validación"

</form>

2.5. Lenguajes de presentación en documentos web

Para que dos entidades puedan intercambiar información es necesario que
tengan un acuerdo previo. Las especificaciones de formatos son el acuerdo desde
el punto de vista de los datos.

2.5.1. Metadatos
Un metadato permite describir otros datos. El estándar ISO/IEC 11179 proporciona el
concepto de metadato.

Los metadatos están fuertemente estructurados, lo que se refleja directamente en el código

que los debe leer o escribir, así como en el diseño de las estructuras de datos o clases que los
representan.

Los metadatos comúnmente van al principio de los datos que representan.

2.5.2. Representación y codificación

La codificación de datos depende muchas veces del tema de estudio, por ejemplo, en
programación se representan estructuras de datos estáticas o dinámicas, datos numéricos o
144
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

alfanuméricos, entre otros. En el área de comunicaciones tenemos señales analógicas y

digitales, cómo se transporta la información analógica y digital, o cómo se convierte una
señal a otra o de un sistema de codificación a otro.

En la web hay un conjunto de formatos estándar. El objetivo es describir las opciones para
codificar los tipos de información existentes y qué ventajas e inconvenientes tienen cada uno.

[Link]. Texto plano

‘La codificación de caracteres no tuvo una solución universal desde sus inicios. Hubo
diferentes representaciones parciales que tuvieron que ir cambiando para incluir un conjunto
mayor de caracteres dependiendo del lenguaje natural a representar.

 ASCII. Se creó en 1963, evolucionó de los códigos de telegrafía. Usa siete bits para
representar un caracter, más un bit de paridad. El bit de paridad se usa para la
verificación de errores durante la transmisión. Con siete bits es posible representar 27
posibles símbolos. Actualmente tiene 32 para códigos de control no imprimibles (y
que ya no se ocupan actualmente) y 95 imprimibles. Los códigos de control se usaban
como instrucciones o metadatos para otros dispositivos como impresoras o cintas
magnéticas. Los símbolos están ordenados alfabéticamente de menor a mayor. Las
minúsculas y mayúsculas se diferencian por un bit. Los caracteres que representan
dígitos empiezan en la posición 48, o que facilita la conversión a BCD tomando sólo
los últimos cuatro bits de los caracteres cuyos bits empiecen con 0011. Su problema
principal es que fue diseñado para representar al idioma inglés y codifica pocos
símbolos.

 Codepages. ASCII desperdicia un bit, el de paridad el cual ya no es necesario porque

los sistemas de almacenamiento ya incorporan redundancia para la detección de
errores. También en la transmisión de datos los protocolos cuentan con técnicas de
detección de errores. Así, muchas empresas crearon tablas de símbolos como IBM,
que casi siempre creó una por cada país conocidas como CP-número, como el CP-437
que se conoce erróneamente como ASCII extendido. La organización ISO implementó
las ISO/IEC 8859-x y Microsoft las codificaciones Windows-xxxx. Con esta
145
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

ampliación fue posible cubrir la mayor parte de idiomas cubran su alfabeto con sus
propios símbolos con la ventaja de ser compatibles hacia atrás, esto es, con los códigos
imprimibles del ASCII de siete bits. El problema es la incompatibilidad entre
diferentes codepages para los caracteres extra (del 128 hasta el 255). Un código
representa diferentes caracteres y si no se sabe el codepage correcto, no es posible
obtener el símbolo adecuado. Otro problema es que no es posible representar con
codepages los lenguajes asiáticos.

 Asia. El problema de muchos lenguajes asiáticos es que son ideográficos y necesitan

codificar miles de símbolos. Este problema fue abordado usando una técnica llamada
Conjunto de caracteres de doble byte (Double-Byte Character Set) o DBCS, Los
primeros 8 bits son para los símbolos más comunes y dos bytes para el resto. Esta
característica permite que en DBCS sea fácil recorrer una cadena hacia adelante,
porque se sabe que el primer byte representa un símbolo común, pero al recorrerla
hacia atrás ya no es posible saber si un byte forma parte de un símbolo de dos bytes o
de uno solo. Este problema se llama ambigüedad de límites.

 UTF (Unicode Transformation Format). Hasta la fecha sus diferentes versiones son el
sistema más universal, permiten dar soporte a los idiomas mayoritarios

o UTF 16: se divide en 17 planos de 216 símbolosy su longitud varía de una a

dos palabras de 16 bits. El plano básico multilingüe permite representar todos
los símbolos de codepages anteriores y ocupa una sola palabra. Al ser su
longitud mínima de 16 bits, no es compatible con ASCII.

o UTF 32: Tiene una longitud fija de 32 bits y permite representar 232 símbolos,
lo que es más que suficiente. El único problema de UTF-32 es su baja
eficiencia por la memoria que ocupa. Tampoco es compatible con ASCII.

o UTF 8: En este sistema la longitud varía de entre uno a seis bytes. Los códigos
de un byte permiten compatibilidad con ASCII para los otros símbolos se
siguen varios criterios, por ejemplo, se intenta usar la menor longitud posible
para codificar los símbolos más comunes o juntar los símbolos de un idioma

146
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

tanto como se pueda. Ocupa un poco más de espacio que los codepages porque
los símbolos específicos se codifican con más de un byte, y también ocupa un
poco más que DBCS, pero la diferencia, en promedio, es pequeña. Permite
recorrer una cadena hacia adelante y atrás sin generar ambigüedad de límites,
y puede soportar todos los lenguajes con todos sus símbolos. Un pequeño
problema es que, al ser un código de longitud variable, para acceder al símbolo
n-ésimo de una cadena se necesita recorrerla desde el principio, pasando una
operación de complejidad O(1) a una de complejidad O(n). Esta codificación
es el estándar de Linux. La mayoría de los editores soportan esta codificación.

2.5.3. XML
‘XML son las siglas de eXtensible Markup Language, lenguaje extensible de marcas. Se
trata de un estándar del Word Wide Web Consortium ([Link] es una referencia
básica de XML), cuyo objetivo original consistía en permitir afrontar los retos de la
publicación electrónica de documentos a gran escala.

Un objeto XML (o un documento XML) se define como un documento formado por

etiquetas y valores que cumple con la especificación de XML, y que estará bien formado.

La característica importante de XML es que está diseñado para describir datos, separando
el contenido de la presentación, a diferencia de HTML. Un archivo XML se almacena como
texto plano legible por cualquier editor. El XML es el formato base de la mayor parte de las
tecnologías usadas por las aplicaciones web.

XML deriva del lenguaje de marcas SGML (un estándar ISO, concretamente el ISO-
8879). Concretamente, es un subconjunto de SGML que pretende que éste pueda ser servido,
recibido y procesado en la web de la misma forma que el HTML. XML ha sido diseñado
buscando la simplicidad de implementación y la interoperabilidad con SGML y HTML y
tratando, por otra parte, de que sea usado para diseñar aplicaciones centradas en los datos.

XML nace en 1996, desarrollado por un grupo auspiciado por el W3C y al que
inicialmente se conocía como grupo de trabajo de SGML, con los siguientes objetivos, tal
como se enumeran en el documento de definición del estándar.
147
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

XML no es un lenguaje, sino un meta-lenguaje que permite definir multitud de lenguajes

para propósitos específicos. Estas definiciones, e incluso las definiciones de programas de
traducción y transformación de archivos XML, se definen en XML, lo que da una muestra
de la potencia de XML. En XML se ha definido gran número de lenguajes. De hecho, el
fichero de configuración de algunos de los programas más usados en la web (Tomcat, Roxen,
etc.) está definidos con XML. Hay muchos ficheros de datos, de documentos, etc., que
también lo usan para su definición.

Algunos de los lenguajes definidos con XML más conocidos son:

• SVG (scalable vector graphics).

• DocBook XML (Docbook-XML).

• XMI (XML metadata interface format).

• WML (WAP markup language).

• MathML (mathematical markup language).

• XHTML (XML hypertext markup language).

[Link]. Estructura de un documento XML

‘Las primeras líneas de un archivo XML conforman el Prólogo y son opcionales. El

prólogo puede incluir la versión del XML, la codificación del texto –que debe ser plano–, la
gramática con la que se valida el documento, o la ruta donde se puede encontrar. Lo que sigue
del documento se puede visualizar como un árbol, que empieza con una única raíz. Cada
elemento puede ser una rama u hoja. La rama sería otro elemento y una hoja sería uno o más
atributos y otros elementos o ramas anidados en él. Las cadenas de caracteres se delimitan
por comillas, que pueden ser simples o dobles.

Una etiqueta sigue el formato mostrado en la Ilustración 2.1 Formato de etiqueta en XML.

148
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

Ilustración 2.1 Formato de etiqueta en XML

No es válido intercalar etiquetas de diferentes elementos, es decir, esto es válido:

<E1>...<E2>...</E2>...</E1>, pero esto no: <E1>...<E2>...</E1>...</E2>. En los
identificadores en XML:

 Las mayúsculas y minúsculas son distintas, lo que significa que los identificadores
nombre y Nombre son distintos, lo que no sucede con HTML.

 No puede empezar con número o símbolo especial, excepto ‘_’, los caracteres
siguientes sí pueden ser signos de puntuación.

 No puede empezar con la secuencia xml.

 Naturalmente, no puede tener espacios en blanco.

Los caracteres <, > y " siempre representados por entidades de carácter: para representar
estos caracteres (en el texto, no como marcas de etiqueta) debemos usar siempre las entidades
de carácter especiales: &lt;, &gt; y &quot;. Estos caracteres son especiales para XML.

A la parte de un documento XML que contiene una cadena de caracteres se le denomina

CDATA (Character Data) y no debe interpretarse por el parser como si fueran marcas
XML. Hay la posibilidad de que un elemento muestre su contenido de este modo: <elemento
attr = “valor del atributo”>este es el contenido</elemento>. Cuando un elemento no tiene
contenido, tenga o no atributos, se abre y se cierra en la misma línea: <elemento/> o
149
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

<elemento atributo = “valor del atributo”/>. Tanto la cadena este es el contenido como valor
del atributo son CDATA.

Se le denomina Datos interpretados por el parser (Parsed Character DATA) o PCDATA

a los datos que van a ser interpretados por el parser y que pueden tener una mezcla de
elementos XML y cadenas de caracteres.

Para saber si un documento está bien formado o no se utilizan un parser que libera al
programador de esta tarea. Pero el parser sólo revisa si el documento es válido sintéticamente.
¿Qué sucede si el documento es sintácticamente correcto, pero no tiene sentido? Para ello,
XML nos proporciona un par de lenguajes de especificación de estructura del documento,
XML Schema y DTD.

XML es un estándar que permite compartir información fácilmente. ¿Qué sucedería si se

une información en XML que viene de dos fuentes distintas para enviarla a otra? Para evitar
que haya duplicidad en las etiquetas XML permite definir espacios de nombres. Los espacios
de nombres son un prefijo que ponemos a las etiquetas de XML para indicar a qué contexto
se refiere la etiqueta en cuestión.

La definición consta de unos atributos xmlns (XML namespace), donde proporcionamos

el prefijo que usaremos para el espacio de nombres y una URI (Uniform Resource Identifier)
que será un identificador único del espacio de nombres. Por ejemplo, se puede definir:
<?xml version=“1.0” encoding=“iso-8859-1”?>
<carteraclientes xmlns:comercial=“[Link]
xmlns:cliente=“[Link]
xmlns:redocal=“[Link]
<cliente>
...
<comer:direccion>Calle Camino Real</comer:direccion>
...
<aten:direccion>ventas@[Link]</aten:direccion>
...
<red:direccion>[Link]</red:direccion>
...
</cliente>
</carteraclientes>
<redLocal:direccion>: para uso de red local.

150
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

<cliente:direccion>: para uso por el servicio de atención al cliente.

<comercial:direccion>: para uso por el departamento comercial.

[Link]. Validación DTD y XML Schema

‘XML posibilita la comprobación automática de la correcta forma de un documento, pero

sin información adicional es imposible comprobar la validez de éste a partir del propio
documento.

Para ello, el W3C ha desarrollado algunos estándares de XML que permiten validar un
documento a partir de una especificación formal de cómo debe ser éste. Dichos estándares
son DTD y XSchema.

DTD es un estándar antiguo, derivado de SGML y que adolece de algunas deficiencias

graves, siendo la más grave de ellas el hecho de no estar escrito en XML. XSchema, por otro
lado, es un estándar relativamente moderno, muy potente y extensible, que además está
escrito en XML íntegramente.

[Link]. Definiciones de tipo de documento DTD

‘El DTD define un conjunto de metadatos sobre archivos XML que indican al parser la
estructura del documento y una lista de elementos o ramas y atributos u hojas, esto es, definen
una gramática para ese archivo XML. Los DTD son opcionales y no hay necesidad de
referenciar a algún documento. Es posible (y común) incluir el DTD en el propio archivo
XML. A esto se le conoce como referencia privada. La contraparte –colocar el DTD en
archivos separados– se conoce como referencia pública. La referencia al DTD empieza con
la sintaxis <!DOCTYPE raíz …> en donde raíz es el nombre del primer elemento del árbol.

151
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

Ilustración 2.2 Referencia privada de XML

Ilustración 2.3 Referencia pública de XML

Una definición DTD para n documentos XML especifica: qué elementos pueden existir
en un documento XML, qué atributos pueden tener éstos, qué elementos pueden o deben
aparecer contenidos en otros elementos y en qué orden.

La mayoría de los parsers de XML permiten de validar documentos con DTD al leer el
documento y el DTD asociado. Si el documento XML no cumple los requerimientos que le
impone el DTD, advertirán del error y el documento no será validado.

El DTD es el medio para definir cómo será el dialecto de XML personalizado (nosotros
definimos qué etiquetas usar en nuestros documentos, el significado que les asociamos, etc.).
Aunque DTD es un estándar que en un futuro será sustituido por XML Schema, sea usa
mucho debido a que es más simple que XML Schema. También es más compacto. Las
mejoras adicionales que proporciona XML Schema no se requieren para la mayoría de los
casos. Con DTD se han definido multitud de dialectos de XML que son usados ampliamente
en Internet.

152
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

[Link]. Convenciones de DTD

‘Para entender las convenciones hay que conocer las definiciones y usos de los diferentes
símbolos usados, que podemos ver en la tabla siguiente:

Tabla 2.12 Elementos sintácticos de DTD

Símbolo Descripción

() Para agrupar subetiquetas se usan paréntesis como:

<!ELEMENT algo (Cantidad, dato).

, Ordenación exacta de loes elementos.

(Nombre, Descripcion?, Ingredientes?, Instrucciones?)

| Uno sólo de los elementos indicados

(Cocer | Freir)

+ Una o más veces

Paso+

* Cero o más veces

Paso*

#PCDATA Parsed Character Data

<!ELEMENT Dato (#PCDATA)>

? Elemento opcional
Opcional?

[Link]. Element

‘Definen una etiqueta del dialecto que estamos construyendo. Por ejemplo:
<!ELEMENT Trabajador (Nombre, DireccionCasa?,
DireccionTrabajo?, DescripcionTrabajo?)>
Define la etiqueta Trabajador, e indica que contiene las subetiqueta Nombre,
DireccionCasa, DireccionTrabajo y DescripcionTrabajo. Las tres últimas son opcionales
como lo indica el símbolo ?.

La definición de ELEMENT es la siguiente:

153
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

<!ELEMENT nombre categoria>

<!ELEMENT nombre (contenido)>
• Elementos vacíos. Los elementos vacíos se declaran empleando la categoría EMPTY.
<!ELEMENT nombre EMPTY>
Este elemento nombre, en XML se usaría así:
<nombre />
• Elementos con sólo caracteres. Los elementos que sólo contendrán datos alfanuméricos
se declaran usando #PCDATA entre paréntesis.
<!ELEMENT nombre (#PCDATA)>
• Elementos con cualquier contenido. Los elementos que declaremos usando ANY como
indicador de contenido pueden contener cualquier combinación de datos parseables:
<!ELEMENT nombre ANY>
• Elementos con subelementos (secuencias). Los elementos con uno o más elementos
hijos se definen con el nombre de los elementos hijos entre paréntesis:
<!ELEMENT nombre (hijo1)>
<!ELEMENT nombre (hijo1, hijo2, ......)>
Por ejemplo:
<!ELEMENT coche (marca, matricula, color)>

Los hijos que se declaran como una secuencia de elementos separados por comas deben
aparecer en el mismo orden en el documento. Los elementos hijo también deben declararse
en el documento DTD. Estos elementos hijo pueden, a su vez, tener elementoshijo. La
declaración completa de coche sería entonces:
<!ELEMENT coche (marca, matricula, color)>
<!ELEMENT marca (#PCDATA)>
<!ELEMENT matricula (#PCDATA))>
<!ELEMENT color (#PCDATA)>
• Cardinalidad de las ocurrencias de elementos. La siguiente declaración nos indica
que el elemento hijo sólo puede ocurrir una vez dentro del elemento padre:
<!ELEMENT nombre (hijo)>
Si deseamos que el elemento hijo aparezca más de una vez y como mínimo una vez:
<!ELEMENT nombre (hijo+)>

154
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

Si deseamos que pueda aparecer cualquier número de veces (incluyendo la posibilidad de

que no aparezca ninguna):
<!ELEMENT nombre (hijo*)>
Si sólo deseamos que pueda aparecer una vez, pero que no sea obligatorio:
<!ELEMENT nombre (hijo?)>
• Elementos con contenido mixto. Podemos declarar también elementos que contengan
otros elementos hijos y/o datos alfanuméricos.
<!ELEMENT nombre (#PCDATA hijo hijo2)*>

[Link]. ATTLIST

‘Como ya hemos visto, los elementos en XML pueden tener atributos. Evidentemente, en
DTD disponemos de un mecanismo para indicar qué atributos puede tener un ELEMENT,
de qué tipo, si son o no obligatorios, etc. Para ello disponemos del elemento ATTLIST, cuya
sintaxis es:
<!ATTLIST elemento atributo tipo-atributo valor-defecto>
Un ejemplo de uso sería:
<!ATTLIST pago metodo CDATA "contra-reembolso">
Y su uso en XML:
<pago metodo=“contra-reembolso” />
El tipo de atributo debe ser uno de los de la lista:

Tabla 2.13 Atributos

Valor Descripción

CDATA El valor son caracteres alfanuméricos

(v1 | v2 | ..) El valor será uno de la lista explicitada

ID El valor será un identificador único

IDREF El valor es el ID de otro elemento

IDREFS El valor es una lista de ID otros elementos

NMTOKEN El valor es un nombre XML válido

NMTOKENS El valor es una lista de nombres XML válidos

155
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

ENTITY El valor es una entidad

ENTITIES El valor es una lista de entidades

NOTATION El valor es el nombre de una notación

xml: El valor es un valor XML predefinido

El valor por defecto puede ser uno de la siguiente tabla:

Tabla 2.14 Valores

Valor Descripción

valor El valor por defecto del atributo

El valor del atributo debe aparecer obligatoriamente
#REQUIRED
en el elemento

#IMPLIED El atributo no tiene por qué ser incluido

#FIXED valor El valor del atributo es fijo

• Valor por defecto

En el siguiente ejemplo:
<!ELEMENT pago EMPTY>
<!ATTLIST pago metodo CDATA "contra-reembolso" >
El siguiente XML se considera válido:
<pago />

En este caso, donde no especificamos valor para método, éste contendrá el valor por
defecto de contra-reembolso.

• Sintaxis de #IMPLIED

En el siguiente ejemplo:
<!ELEMENT pago EMPTY>
<!ATTLIST pago metodo CDATA #IMPLIED >
Validará correctamente el siguiente XML:
<pago metodo="tarjeta" />
<pago />

156
HTML, XML, CSS
 2.5. Lenguajes de presentación en documentos web

Usaremos, pues, #IMPLIED en aquellos casos en los que no queremos forzar al usuario a
usar atributos, pero no podemos poner valores por defecto.

• Sintaxis de #REQUIRED

En el siguiente ejemplo:
<!ELEMENT pago EMPTY>
<!ATTLIST pago metodo CDATA #REQUIRED >
Validará correctamente el siguiente XML:
<pago metodo=“tarjeta” />
pero no validará:
<pago />
Usaremos #REQUIRED en aquellos casos en los que no podemos proporcionar un valor
por defecto, pero deseamos que el atributo aparezca y se le asigne algún valor.

[Link]. Asociar un DTD a un documento

‘Para que un documento XML quede vinculado a un DTD determinado, tenemos dos
opciones: incluir el DTD en el documento XML o usar una referencia externa al DTD.

La primera opción es la más fácil de usar, pero la que presenta más inconvenientes, ya que
aumenta el tamaño de los documentos XML y complica su mantenimiento, puesto que un
cambio en el DTD implica revisar todos los documentos en los que lo hemos incluido.

Podemos referenciar un DTD externo al documento XML. Para ello disponemos

de dos tipos de referencias posibles: públicas o privadas.

El formato de un documento XML donde hubiésemos incluido sería:

<?xml version="1.0"?>
<!DOCTYPE Receta [
<!ELEMENT Receta (Nombre, Descripcion?,
Ingredientes?, Instrucciones?)>
<!ELEMENT Nombre (#PCDATA)>
<!ELEMENT Descripcion (#PCDATA)>
<!ELEMENT Ingredientes (Ingrediente)*>
<!ELEMENT Ingrediente (Cantidad, Item)>
<!ELEMENT Cantidad (#PCDATA)>

157
HTML, XML, CSS
 2.6. Selectores

<!ATTLIST Cantidad unidad CDATA #REQUIRED>

<!ELEMENT Item (#PCDATA)>
<!ATTLIST Item opcional CDATA "0"
vegetariano CDATA "si">
<!ELEMENT Instructiones (Paso)+>
<!ELEMENT Paso (#PCDATA)>
]>
Un ejemplo de referencia privada es el siguiente:
<?xml version=“1.0”?>
<!DOCTYPE Receta SYSTEM “[Link]”>
<Receta>
...
Y otro, usando ahora una referencia externa pública:
<?xml version="1.0"?>
<!DOCTYPE Receta
PUBLIC "-//W3C//DTD XHTML 1.0 STRICT/EN"
"[Link]
<Receta>
...

Referencia (Mateu, 2004)

2.6. Selectores

2.6.1. Introducción a CSS

Con las hojas de estilo en cascada (CSS), puede aplicar estilos a sus páginas web para que
para que se vean exactamente como usted quiere. Esto funciona porque las CSS están
conectadas al DOM (Document Object Model).

Con CSS y su integración con el DOM, puedes cambiar el estilo de cualquier elemento de
forma rápida y sencilla. Por ejemplo, si no te gusta el aspecto por defecto de las etiquetas
<h1>, <h2> y otras etiquetas de encabezado, puede asignar nuevos estilos para anular la
configuración predeterminada de la familia de fuentes y el tamaño utilizado, o si se debe
establecer la negrita o la cursiva, y muchas más propiedades también.

158
HTML, XML, CSS
 2.6. Selectores

Una forma de añadir estilos a una página web es insertando las declaraciones necesarias
en la cabecera de una página web entre las etiquetas <head> y </head>. Así, para cambiar el
estilo de la etiqueta <h1>, podrías usar el siguiente código:
<style>
h1 { color:red; font-size:3em; font-family:Arial; }
</style>

2.6.2. Importar una hoja de estilo

Cuando se desea dar estilo a todo un sitio, en lugar de a una sola página, una mejor manera
de gestionar hojas de estilo es moverlas completamente fuera de sus páginas web a archivos
separados, y luego importar las que necesite. Esto le permite aplicar diferentes hojas de estilo
para diferentes diseños (como la web y la impresión), sin cambiar el HTML.

Hay un par de maneras diferentes de lograr esto, la primera de las cuales es mediante el
uso de la directiva @import de CSS de la siguiente manera:
<style>
@import url('[Link]');
</style>
Esta declaración le dice al navegador que busque una hoja de estilo con el nombre
[Link]. El comando El comando @import es bastante flexible ya que puede crear hojas de
estilo que a su vez, traen otras hojas de estilo, y así sucesivamente. Sólo tiene que asegurarse
de que no hay etiquetas <style> o </style> en ninguna de sus hojas de estilo externas, o no
funcionarán.

También puede incluir una hoja de estilo con la etiqueta HTML <link> de la siguiente
manera:
<link rel='stylesheet' type='text/css' href='[Link]'>
Esto tiene exactamente el mismo efecto que la directiva @import, excepto que <link>
es una etiqueta sólo HTML y no es una directiva de estilo válida, por lo que no se puede
utilizar desde dentro de una hoja de estilo para tirar de otra, y tampoco se puede colocar
dentro de un par de etiquetas <style> .... </ style>.

159
HTML, XML, CSS
 2.6. Selectores

2.6.3. Identificadores
Una mejor solución para establecer el estilo de un elemento es asignarle un ID en el
HTML, así:
<div id=bienvenido>Hola</div>
Esto establece que el contenido del <div> con el ID bienvenido debe tener aplicado a ellos
el estilo definido en la configuración de estilo de bienvenida. La declaración CSS
correspondiente para esto podría ser como la siguiente
#bienvenido { font-style:italic; color:blue; }
Observe el uso del símbolo #, que especifica que sólo el ID con el nombre bienvenido
debe ser estilizado con esta declaración.

2.6.4. Clases
Si desea aplicar el mismo estilo a muchos elementos, no tiene que dar a cada uno un ID
diferente porque puedes especificar una clase para manejarlos todos, así:
<div class='bienvenido'>Hola</div>
Esto establece que el contenido de este elemento (y cualquier otro que utilice la clase)
debe tener aplicado el estilo definido en la clase bienvenido. Una vez aplicada la clase se
puede utilizar la siguiente regla, ya sea en la cabecera de la página o dentro de una hoja de
estilo externa para establecer los estilos de la clase:
.bienvenido { font-style:italic; color:blue; }
En lugar del símbolo #, que está reservado para las identificaciones, las declaraciones de
clase van precedidas de un . (punto).

2.6.5. Uso del punto y coma

En CSS, el punto y coma se utiliza para separar varias sentencias CSS en la misma línea.
Pero si sólo hay una declaración en una regla (o en una configuración de estilo en línea dentro
de una etiqueta HTML), puede omitir el punto y coma, al igual que para la última sentencia
de un grupo.

160
HTML, XML, CSS
 2.6. Selectores

Sin embargo, para evitar errores de CSS difíciles de encontrar, es posible que prefieras
utilizar siempre un punto y coma después de cada ajuste CSS. A continuación, puede copiar,
pegar y modificar las propiedades, sin preocuparse de quitar puntos y comas donde no son
estrictamente necesarios o de tener que añadirlos donde son necesarios.

2.6.5. Reglas CSS

Cada declaración de una regla CSS comienza con un selector, que es el elemento al que
se aplicará la regla se aplicará la regla. Por ejemplo, en esta asignación, h1 es el selector al
que se le da un tamaño de fuente 240% mayor que el predeterminado:
h1 { font-size:240%; }
font-size es una propiedad. Proporciona un valor de 240% a la propiedad font-size del
selector asegura que el contenido de todos los pares de etiquetas <h1> ... </h1> de las
etiquetas se mostrará con un tamaño de fuente que es el 240% del tamaño por defecto. Todos
los cambios en las reglas deben estar dentro de los símbolos { y } que siguen al selector. En
font-size:240%; la parte anterior a los : (dos puntos) es la propiedad, mientras que el resto es
el valor que se le aplica.

Por último viene un ; (punto y coma) para terminar la declaración. En este caso, como
font-size es la última propiedad de la regla, el punto y coma no es necesario (pero sí lo sería
si siguiera otra asignación).

[Link]. Asignaciones múltiples

Puede crear múltiples declaraciones de estilo de un par de maneras diferentes. En primer

lugar, puede concatenarlas en la misma línea, así:
h1 { font-size:240%; color:blue; }
Esto añade una segunda asignación que cambia el color de todos los encabezados <h1> a
azul. También se puede colocar las asignaciones una por línea, como la siguiente:
h1 { font-size:240%;
color:blue;
}

161
HTML, XML, CSS
 2.6. Selectores

O puede espaciar un poco más las asignaciones, de modo que se alineen unas debajo de
otras en una columna en los dos puntos, así:
h1 { font-size:240%;
color:blue;
}
De esta manera, puede ver fácilmente dónde comienza cada nuevo conjunto de reglas,
porque el selector está siempre en la primera columna, y las asignaciones que siguen están
perfectamente alineadas con todos valores de la propiedad comenzando en el mismo
desplazamiento horizontal. En los ejemplos anteriores, el punto y coma final es innecesario,
pero si alguna vez quiere concatenar alguno de estos grupos de sentencias en una sola línea,
es muy rápido hacerlo con todos los puntos y comas ya colocados.

Puede especificar el mismo selector tantas veces como quiera, y CSS combina todas las
propiedades. Así que el ejemplo anterior también podría especificarse como
h1 { font-size: 240%; }
h1 { color : blue; }
No hay una forma correcta o incorrecta de diseñar su CSS, pero se recomienda que al
menos intente mantener cada bloque de CSS consistente con mismo, para que otras personas
puedan entenderlo de un vistazo.

¿Qué pasa si especifica la misma propiedad al mismo selector dos veces?

h1 { color : red; }
h1 { color : blue; }
Se aplicaría el último valor especificado, en este caso, el azul. En un archivo único, la
repetición de la misma propiedad para el mismo selector no tendría sentido, pero tal
repetición ocurre en la vida real cuando se aplican múltiples hojas de estilo. Es una de las
características valiosas de CSS, y de donde viene el término cascada.

[Link]. Uso de comentarios

Es una buena idea comentar sus reglas CSS, incluso si describe sólo los principales grupos

de declaraciones en lugar de todos o la mayoría de ellos. Puedes hacerlo de dos maneras

diferentes.

162
HTML, XML, CSS
 2.6. Selectores

En primer lugar, puedes colocar un comentario dentro de un par de etiquetas /* ... */, de
la siguiente manera:
/* Esto es un comentario CSS */
O puedes extender un comentario a lo largo de varias líneas, como esto:
/*
Un comentario de varias
líneas
comentario
*/
Cuando utilice comentarios multilínea, tenga en cuenta que no puede anidar comentarios
de una línea (o cualquier otro) dentro de ellos. Si lo hace, puede provocar errores
imprevisibles.

2.6.6. Tipos de estilo

Existen varios tipos de estilo, que van desde los estilos por defecto establecidos por su
navegador (y cualquier estilo de usuario que haya aplicado en su navegador para anular sus
por defecto), pasando por los estilos en línea o incrustados, hasta las hojas de estilo externas.
Los estilos definidos en cada tipo tienen una jerarquía de precedencia, de menor a mayor.

[Link]. Estilos por defecto

El nivel más bajo de precedencia de estilo es el estilo por defecto aplicado por un
navegador web. Estos estilos de estilos se crean como un recurso para cuando una página
web no tiene ningún estilo, y están pretenden ser un conjunto genérico de estilos que se
muestren razonablemente bien en la mayoría de los casos.

Antes de que existiera el CSS, estos eran los únicos estilos que se aplicaban a un
documento, y sólo un puñado de ellos podían ser cambiados por una página web (como la
cara de la fuente, el color y el tamaño, y unos pocos argumentos de tamaño de los elementos).
de los elementos).

163
HTML, XML, CSS
 2.6. Selectores

[Link]. Estilos de usuario

Estos son los siguientes estilos de mayor precedencia, y son soportados por la mayoría de
los navegadores modernos, pero se implementan de forma diferente en cada uno de ellos. Si
quiere aprender a crear sus propios estilos por defecto para la navegación, utilice un motor
de búsqueda para introducir el nombre de su navegador nombre de su navegador seguido de
"estilos de usuario" (por ejemplo, "estilos de usuario de Firefox" o "estilos de usuario de
Opera") para averiguar cómo hacerlo.

Si se asigna un estilo de usuario que ya ha sido definido como predeterminado por el

navegador, éste anulará la configuración por defecto del navegador. Cualquier estilo no
definido en una hoja de estilo de usuario mantendrá sus valores por defecto tal y como están
configurados en el navegador.

2.6.7. Hojas de estilo externas

Los siguientes tipos de estilos son los asignados en una hoja de estilo externa. Estos ajustes
anulan las asignadas por el usuario o por el navegador. Las hojas de estilo externas son la
manera recomendada de crear sus estilos porque puede producir diferentes hojas de estilo
para diferentes propósitos, como la creación de estilos para el uso general de la web, para la
visualización en un navegador móvil con una pantalla más pequeña, para fines de impresión,
etc. Sólo tiene que aplicar la que necesaria para cada tipo de medio cuando cree la página
web.

2.6.8. Estilos internos

Luego están los estilos internos, que se crean dentro de las etiquetas <style> ... </style>,
y que tienen prioridad sobre todos los tipos de estilo anteriores. En este punto, sin embargo,
se está violando la regla de la separación entre el estilo y el contenido, ya que cualquier hoja
de estilo externa cargada al mismo tiempo tendrá una precedencia menor.

164
HTML, XML, CSS
 2.6. Selectores

2.6.9. Estilos en línea

Por último, los estilos en línea permiten asignar una propiedad directamente a un
elemento. Tienen la mayor precedencia de cualquier tipo de estilo, y se utilizan así:
<a href="[Link] style="color:green;">Visita Google</a>
En este ejemplo, el enlace especificado se mostrará en verde, independientemente de
cualquier configuración de color por defecto o cualquier otra configuración de color aplicada
por cualquier otro tipo de hoja de estilo, ya sea directamente a este enlace o genéricamente
para todos los enlaces.

Cuando se utiliza este tipo de estilo, se rompe la separación entre el diseño y el contenido;
por lo tanto, se recomienda que, por lo tanto, se recomienda que lo haga sólo cuando tenga
una buena razón.

2.6.10. Selectores CSS

El medio por el que se accede a uno o más elementos se llama selección, y la parte de una
regla CSS que hace esto se conoce como selector. Como es de esperar, hay muchas
variedades de selectores.

[Link]. El selector type

El selector de tipo funciona en tipos de elementos HTML como <p> o <i>. Por ejemplo,
la siguiente regla garantizará que todo el texto dentro de las etiquetas <p> ... </p> está
totalmente justificado:
p { text-align:justify; }

[Link]. El selector descendant

Los selectores descendientes le permiten aplicar estilos a elementos que están contenidos
dentro de otros elementos. Por ejemplo, la siguiente regla establece todo el texto dentro de
las etiquetas
<b> ... </b>

165
HTML, XML, CSS
 2.6. Selectores

de color rojo, pero sólo si se encuentran dentro de las etiquetas <p> ... </p> (así:
<p><b>Hola</b></p>):
p b { color:red; }
Los selectores descendientes pueden continuar anidando indefinidamente, por lo que la
siguiente es una regla perfectamente regla válida para hacer que el texto sea azul dentro de
un texto en negrita, dentro de un elemento de lista de una lista desordenada lista:
ul li b { color:blue; }
Como ejemplo práctico, suponga que quiere utilizar un sistema de numeración diferente
para una lista ordenada que está anidada dentro de otra lista ordenada. Puede conseguirlo de
la siguiente manera, que sustituirá la numeración numérica por defecto (empezando por el 1)
por letras minúsculas (empezando por la a):
<!DOCTYPE html>
<html>
<head>
<style>
ol ol {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ol>
<li>1</li>
<li>2</li>
<li>3
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</li>
</ol>
</body>
</html>
El resultado de cargar este HTML en un navegador web está en la Ilustración 2.4, en el
que se puede ver que los segundos elementos de la lista se muestran de forma diferente:

166
HTML, XML, CSS
 2.6. Selectores

Ilustración 2.4 Resultado de ol ol

[Link]. El selector child

El selector child es similar al selector descendiente, pero es más restrictivo en cuanto a cuando se
aplicará el estilo, seleccionando sólo aquellos elementos que son hijos directos de otro elemento.
Por ejemplo, el siguiente código utiliza un selector descendiente que cambiará cualquier texto en
negrita dentro de un párrafo a rojo, incluso si el texto en negrita está en cursiva (como este
<p><i><b>Hola</b> allí</i></p>):
p b { color:red; }
En este caso, la palabra Hola se muestra en rojo. Sin embargo, cuando este tipo de
comportamiento más general de comportamiento no es necesario, se puede utilizar un
selector children para restringir el alcance del selector. Por ejemplo, el siguiente selector hijo
pondrá el texto en negrita en rojo sólo si el elemento es hijo directo de un párrafo y no está
contenido en otro elemento:
p > b { color:red;}
Ahora la palabra Hola no cambiará de color porque no es hija directa del párrafo. Para un
ejemplo práctico, suponga que desea poner en negrita sólo los elementos <li> que son hijos
directos de los elementos <ol>. Puede conseguirlo de la siguiente manera, donde los
elementos <li> que son hijos directos de elementos <ul> no se ponen en negrita:
<!DOCTYPE html>
<html>
<head>
<style>
ol>li {
font-weight: bold;
}
</style>
167
HTML, XML, CSS
 2.6. Selectores

</head>
<body>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
El resultado de cargar este HTML en un navegador será el siguiente:

Ilustración 2.5 Resultado de la lista en negritas

[Link]. El selector ID

Si se le da a un elemento un nombre de identificación (como este: <div id='midiv'>)

entonces puedes acceder directamente acceder a él desde CSS de la siguiente manera, que
cambia todo el texto del elemento a cursiva:
#midiv { font-style:italic; }
Los IDs sólo se pueden utilizar una vez dentro de un documento, por lo que sólo la primera
ocurrencia encontrada recibirá el nuevo valor de la propiedad asignada por una regla CSS.
Pero en CSS se puede referenciar directamente a cualquier ID que tenga el mismo nombre,

168
HTML, XML, CSS
 2.6. Selectores

siempre que se encuentren dentro de diferentes tipos de elementos tipos de elementos, como
este:
<div id='miid'>Hola</div> <span id='miid'>Hola</span>
Como los IDs normalmente se aplican sólo a elementos únicos, la siguiente regla aplicará
un subrayado sólo a la primera ocurrencia de myid:
#miid { text-decoration:underline; }

Sin embargo, puedes asegurarte de que CSS aplique la regla a ambas apariciones de la
siguiente manera
span#miid { text-decoration:underline; }
div#miid { text-decoration:underline; }
O, más sucintamente, así
span#miid, div#miid { text-decoration:underline; }
No se recomienda usar esta forma de selección porque cualquier JavaScript que también
deba acceder a estos elementos no puede hacerlo fácilmente porque la función
getElementByID() comúnmente utilizada devolverá sólo la primera ocurrencia. Para referirse
a cualquier otra instancia, un programa tendría que buscar en toda la lista de elementos del
documento, una tarea más complicada. Por lo tanto, generalmente es mejor utilizar siempre
nombres de identificación únicos.

[Link]. El selector class

Cuando hay un número de elementos en una página que desea compartir el mismo estilo,
se puede asignar a todo el mismo nombre de clase (así: <span class='miclase'>); entonces
crear una única regla para modificar todos esos elementos a la vez, como en la siguiente
regla, que crea un desplazamiento del margen izquierdo de 10 píxeles para todos los
elementos que utilizan la clase:
.miclase { margin-left:10px; }
En los navegadores modernos, puede hacer que los elementos HTML utilicen más de una
clase separando los nombres de las clases con espacios, así: <span class='clase1 clase2
clase3'>. Recuerde, sin embargo, que algunos navegadores muy antiguos sólo permiten un
único nombre de clase en un argumento de clase.
169
HTML, XML, CSS
 2.6. Selectores

Puede limitar el ámbito de acción de una clase especificando los tipos de elementos a los
que debe aplicarse. Por ejemplo, la siguiente regla aplica la configuración sólo a los párrafos
que utilizan la clase main:
[Link] { text-indent:30px; }
En este ejemplo, sólo los párrafos que utilizan la clase main (como este: <p
class="main">) recibirán el nuevo valor de la propiedad. Cualquier otro tipo de elemento que
intente utilizar la clase (como <div class="main">) no se verá afectado por esta regla.

[Link]. El selector attribute

Muchas etiquetas HTML admiten atributos, y el uso de este tipo de selector puede
ahorrarle tener que usar IDs y clases para referirse a ellos. Por ejemplo, puede referirse
directamente a los atributos de la siguiente manera, que establece todos los elementos con el
atributo type="submit" a un ancho de 100 píxeles:
[type="submit"] { width:100px; }
Si desea limitar el alcance del selector a, por ejemplo, sólo los elementos de entrada del
formulario con ese tipo de atributo, puede utilizar la siguiente regla:
form input[type="submit"] { width:100px; }
Los selectores de atributos también funcionan con los ID y las clases, de modo que, por
ejemplo, [class~="nombreClase"] funciona exactamente igual que el selector de clase
.nombreClase (salvo que este último tiene una mayor precedencia). Del mismo modo,
[id="nombreid"] equivale a utilizar el selector de ID #nombreid.

Por lo tanto, los selectores de clase e ID precedidos por # y . pueden considerarse como
una abreviatura de los selectores de atributos, pero con una mayor precedencia. El operador
~= coincide con un atributo incluso si es uno de un grupo de atributos separados por espacios
de atributos separados por espacios.

[Link]. El selector universal

El comodín * o selector universal coincide con cualquier elemento, por lo que la siguiente
regla hará un completo desastre de un documento dando un borde verde a todos sus
elementos:
170
HTML, XML, CSS
 2.6. Selectores

* { border:1px solid green; }

Por lo tanto, es poco probable que utilice el * por sí solo, pero como parte de una regla
compuesta puede ser muy potente. Por ejemplo, la siguiente regla aplicará el mismo estilo
que la anterior, pero sólo a todos los párrafos que sean subelementos del elemento con

el ID boxout, y sólo mientras no sean hijos directos:

#boxout * p {border:1px solid green; }
Veamos lo que ocurre aquí. El primer selector que sigue a #boxout es un símbolo *, por
lo que se refiere a cualquier elemento dentro del objeto boxout. El siguiente selector p reduce
el foco de selección el foco de selección cambiando el selector para que se aplique sólo a los
párrafos (definidos por el p) que son subelementos de elementos devueltos por el selector *.
Por lo tanto, esta regla CSS realiza las siguientes acciones (en las que utilizo los términos
objeto y elemento indistintamente):

1. Encuentra el objeto con el ID de boxout.

2. Buscamos todos los sub elementos del objeto devuelto en el paso 1.

3. Encuentre todos los p subelementos de los objetos devueltos en el paso 2 y, como éste
es el último selector en el grupo, encontrar también todos los p sub- y sub-sub-elementos (y
así sucesivamente) de los objetos devueltos en el paso 2.

4. Aplicar los estilos dentro de los caracteres { y } a los objetos devueltos en el paso 3.

El resultado neto de esto es que el borde verde se aplica sólo a los párrafos que son nietos
(o bisnietos, etc.) del elemento principal.

[Link]. Seleccionar por grupo

Con CSS puede aplicar una regla a más de un elemento, clase o cualquier otro tipo de
selector al mismo tiempo separando los selectores con comas. Así, por ejemplo, la regla
siguiente regla colocará una línea punteada naranja debajo de todos los párrafos, el elemento
con el ID de idname, y todos los elementos que utilicen la clase classname:

p, #idname, .classname { border-bottom:1px dotted orange; }

171
HTML, XML, CSS
 2.7. Modelo de caja

2.7. Modelo de caja

Las propiedades CSS que afectan al diseño de una página se basan en el modelo de caja,
un conjunto anidado de propiedades que rodean a un elemento. Prácticamente todos los
elementos tienen (o pueden tener) estas propiedades, incluido el cuerpo del documento, cuyo
margen puede, por ejemplo, eliminar con la siguiente regla:
body { margin:0px; }
El modelo de caja de un objeto comienza en el exterior, con el margen del objeto. Dentro
de éste se encuentra el borde, luego hay un relleno entre el borde y el contenido interior, y
finalmente está el contenido del objeto.

Una vez que sepas cómo funciona el modelo de caja, estarás en camino de crear páginas
con un diseño profesional, ya que estas propiedades por sí solas conformarán gran parte del
estilo de tu página.

2.7.1. Establecer los márgenes

El margen es el nivel más externo del modelo de caja. Separa los elementos entre sí y su
uso es bastante inteligente. Por ejemplo, suponga que ha elegido dar a un número de
elementos un margen por defecto de 10 píxeles alrededor de cada uno. Cuando se colocan
encima de uno encima del otro, esto crearía un espacio de 20 píxeles (el total de los anchos
de los bordes adyacentes).

Sin embargo, CSS supera este posible problema: cuando dos elementos con bordes se
colocan directamente uno encima del otro, sólo se utiliza el mayor de los dos márgenes para
separarlos. Si ambos márgenes tienen la misma anchura, sólo se utiliza una de las anchuras.
De este modo, es mucho más probable que obtenga el resultado que desea. Pero debe tener
en cuenta que los márgenes de los elementos absolutamente posicionados o en línea no se
contraen.

Los márgenes de un elemento se pueden cambiar en masa con la propiedad margin, o

individualmente con margin-left, margin-top, margin-right y margin-bottom.

172
HTML, XML, CSS
 2.7. Modelo de caja

Cuando se establece la propiedad margin, se pueden proporcionar uno, dos, tres o cuatro
argumentos, que tienen los efectos comentados en las siguientes reglas:
/* Establecer todos los márgenes a 1 píxel */
margin: 1px
/* Establecer la parte superior e inferior a 1 píxel, y la izquierda y la
derecha a 2 */
margin: 1px 2px;
/* Establecer la parte superior a 1 píxel, la izquierda y la derecha a 2, y
la parte inferior a 3 */
margin:1px 2px 3px;

margin: 1px 2px 3px;

/* Establecer la parte superior en 1 píxel, la derecha en 2, la parte
inferior en 3 y la izquierda en 4 */
margin: 1px 2px 3px 4px;
<!DOCTYPE html>
<html>
<head>
<title>Margins</title>
<style>
#object1 {
background: lightgreen;
border-style: solid;
border-width: 1px;
font-family: "Courier New";
font-size: 9px;
width: 100px;
height: 100px;
padding: 5px;
margin: 10px 20px 30px 40px;
}
table {
padding: 0;
border: 1px solid black;
background: cyan;
}
</style>
</head>
<body>
<table>
173
HTML, XML, CSS
 2.7. Modelo de caja

<tr>
<td>
<div id='object1'>margin:<br>10px 20px 30px 40px;</div>
</td>
</tr>
</table>
</body>
</html>
La Ilustración 2.6 se muestra un ejemplo con la regla de la propiedad margin (resaltada en
negrita) aplicada a un elemento cuadrado que ha sido colocado dentro de un elemento tabla
que ha sido colocado dentro de un elemento tabla. A la tabla no se le han dado dimensiones,
por lo que simplemente se envolverá tan estrechamente alrededor del elemento <div> interior
como pueda. Como consecuencia, hay un margen de 10 píxeles por encima, 20 píxeles a la
derecha, 30 píxeles por debajo y 40 píxeles a la izquierda.

Ilustración 2.6 Uso de márgenes con CSS

2.7.2. Aplicación de los bordes

El nivel de borde del modelo de caja es similar al margen, excepto que no hay colapso.

Es el siguiente nivel a medida que nos adentramos en el modelo de caja. Las principales
propiedades utilizadas para modificar los bordes son border, border-left, border-top, border-
right y borderbottom, y cada una de ellas puede tener otras subpropiedades añadidas como
sufijos, como -color, -estyle y -width.

174
HTML, XML, CSS
 2.7. Modelo de caja

Las cuatro formas de acceder a los ajustes de las propiedades individuales utilizadas para
la propiedad margin también se aplican con la propiedad border-width, por lo que todas las
siguientes son reglas válidas:
/* Todos los bordes */
border-width:1px;
/* Superior/inferior izquierda/derecha */
border-width:1px 5px;
/* Arriba izquierda/abajo derecha */
border-width:1px 5px 10px;
/* Arriba derecha abajo izquierda */
border-width:1px 5px 10px 15px;
La Ilustración 2.7 muestra cada una de estas reglas aplicadas sucesivamente a un grupo
de elementos cuadrados.

En la primera, se puede ver claramente que todos los bordes tienen una anchura de 1 píxel.
El segundo elemento, sin embargo, tiene un ancho de borde superior e inferior de 1 píxel,
mientras que sus anchos laterales son de 5 píxeles cada uno.

Ilustración 2.7 Aplicación de bordes

El tercer elemento tiene una parte superior de 1 píxel de ancho, sus lados tienen 5 píxeles
de ancho y su parte inferior tiene 10 píxeles de ancho. El cuarto elemento tiene un borde
superior de 1 píxel, un borde derecho de 5 píxeles de ancho, un borde inferior de 10 píxeles
de ancho y un borde izquierdo de 15 píxeles de ancho.

175
HTML, XML, CSS
 2.7. Modelo de caja

El último elemento, debajo de los anteriores, no utiliza las reglas de abreviación; en su

lugar, tiene cada uno de los anchos de borde establecidos por separado. Como puede ver, se
necesita escribir mucho más para conseguir el mismo resultado.

2.7.3. Ajustar el relleno

El más profundo de los niveles del modelo de caja (aparte del contenido de un elemento)
es el relleno, que se aplica dentro de los bordes y/o márgenes. Las principales propiedades
utilizadas para modificar el relleno son padding, padding-left, padding-top, padding-right, y
padding-bottom.

Las cuatro formas de acceder a los ajustes de las propiedades individuales utilizadas para
las propiedades margin y border también se aplican con la propiedad padding, por lo que
todas las siguientes son reglas válidas:
/* Todo el padding */
padding:1px;
/* Arriba/abajo e izquierda/derecha */
padding:1px 2px;
/* Arriba, izquierda/derecha y abajo */
padding:1px 2px 3px;
/* Arriba, derecha, abajo e izquierda */
padding:1px 2px 3px 4px;
La Figura 19-15 muestra la regla de relleno (mostrada en negrita) aplicada a algún texto
dentro de una celda de tabla (como se define por la regla display:table-cell;, que hace que el
elemento <div> encapsulado se muestre como una celda de tabla), al que no se le han dado
dimensiones por lo que simplemente envolverá el texto todo lo que pueda. Como
consecuencia, hay un relleno de 10 píxeles por encima del elemento interior, 20 píxeles a su
derecha, 30 píxeles por debajo y 40 píxeles a su izquierda.

Ejemplo para el relleno:

<!DOCTYPE html>
<html>
<head>
<title>Relleno</title>
<meta charset="utf-8">

176
HTML, XML, CSS
 2.7. Modelo de caja

<meta name="viewport" content="width=device-width, initial-scale=1,

shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
#objeto {
border-style: solid;
border-width: 1px;
background: orange;
color: darkred;
font-family: Arial;
font-size: 12px;
text-align: justify;
display: table-cell;
width: 148px;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id='objeto'> Ser o no ser esa es la cuestión:
Si es más noble para la mente sufrir
las hondas y flechas de la escandalosa fortuna,
o tomar las armas contra un mar de problemas,
y, al oponerse, acabar con ellos.</div>
</body>
</html>

Ilustración 2.8 Aplicación de relleno

177
HTML, XML, CSS
 2.7. Modelo de caja

En el nivel más profundo del modelo de caja, tenemos un elemento que puede ser
estilizado en todas las formas vistas hasta ahora, y que puede (y normalmente lo hará)
contener más subelementos, que a su vez pueden contener sub-sub-elementos, y así
sucesivamente, cada uno con su propio estilo y configuración del modelo de caja.

178
HTML, XML, CSS
 Competencias específicas y genéricas

Capítulo 3 Programación del lado del cliente

Competencias específicas y genéricas

Competencias específicas

Conoce y aplica un lenguaje de programación del lado del cliente, para la

construcción de aplicaciones web dinámicas, considerando Frameworks ya
existentes.

Competencias genéricas

Capacidad de análisis y síntesis.

Comunicación oral y escrita.

Habilidad para buscar, procesar y analizar información procedente de fuentes diversas.

Solución a problemas.

Capacidad de trabajar el equipo.

Capacidad de aplicar los conocimientos a la práctica.

Capacidad de aprender.

Temario detallado de la unidad

3.-Programación del lado del cliente

3.1. Introducción al lenguaje.

3.2. Manejo de frameworks.

3.3. Estructuras de control.

3.4. Manipulación de objetos

179
Programación del lado del cliente
 3.1. Introducción al lenguaje

3.1. Introducción al lenguaje

3.1.1. Introducción a JavaScript

En las unidades anteriores, has aprendido los fundamentos de la web, HTML y CSS.
Ahora, estamos avanzando para a aprender JavaScript, que es un lenguaje de scripting del
lado del cliente. Este lenguaje está incrustado dentro de una página web y se ejecuta en el
ordenador del cliente.

JavaScript fue inventado por Brendan Eich en 1995 y más tarde, en 1997, se convirtió en
el estándar de la Asociación Europea de Fabricantes de Computadoras (ECMA), por lo que
su nombre oficial es ECMA Script, pero se conoce comúnmente como JavaScript. Suele
utilizarse para hacer páginas web interactivas. Puede utilizarse para comprobar o validar el
contenido de los formularios, cambiar las imágenes, abrir nuevas ventanas emergentes y
escribir contenidos dinámicos en la página. También puede utilizarse con CSS para convertir
el HTML estático en un lenguaje de marcado de hipertexto dinámico (DHTML). Esto permite
dividir la página web en diferentes partes que aparecen, desaparecen o se mueven. El
programa JavaScript es un script del lado del cliente, por lo que sólo se ejecuta cuando un
usuario o cliente carga una página web en cualquier navegador.

3.1.2. Sintaxis
Las sentencias JavaScript se colocan dentro de las etiquetas HTML <script>... </script>
en una página web. Las etiquetas <script> pueden colocarse en cualquier lugar de la página
web. Sin embargo, se recomienda que se mantenga dentro de la etiqueta <head> para una
ejecución más rápida. La etiqueta <script> avisa al programa del navegador para que ejecute
todo el texto entre estas etiquetas línea por línea. A continuación, se ofrece una sintaxis
sencilla de su JavaScript:

Un ejemplo básico:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo JavaScript</title>
180
Programación del lado del cliente
 3.1. Introducción al lenguaje

</head>
<body>
<p id="Parrafo1">
</p>
<p id="Parrafo2">
</p>
<p id="Parrafo3">
</p>
<script>
[Link]("Parrafo1").innerHTML = "En un lugar de
la mancha";
[Link]("Parrafo2").innerHTML = "De cuyo lugar";
[Link]("Parrafo3").innerHTML = "no quiero
acordarme";
</script>
</body>
</html>
La salida correspondiente la tenemos en la Ilustración 3.1 Salida del script de

Ilustración 3.1 Salida del script del ejemplo de JavaScript

3.1.3. Variables
Las variables de JavaScript se utilizan para almacenar información que puede ser referida
posteriormente en el script. Una variable se inicializa almacenando un valor en ella. Podemos
inicializar una variable en el momento de declararla o posteriormente cuando necesitemos
esa variable. También podemos asignar un nuevo valor a una variable en cualquier momento,
pero éste será reemplazado por el valor almacenado anteriormente.

181
Programación del lado del cliente
 3.1. Introducción al lenguaje

<!DOCTYPE html>
<html>
<head>
<title>Uso de variables JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<p id="miVariable"> </p>
<script>
var a = 16; // Declaración de variables
var b = 13;
var c = a + b;
[Link]("miVariable").innerHTML =
"La suma en la variable c es: " + c;
</script>
</body>
</html>

Ilustración 3.2 Uso de variables

En JavaScript se usa el símbolo + para la concatenación de cadenas de caracteres, además
de usarlo en operaciones aritméticas.

3.1.3. Operadores
Los operadores de JavaScript son los símbolos especiales utilizados para realizar una
operación matemática o lógica, etc. Como ejemplo, en A + B, el símbolo "+" representa el
operador y se utiliza para sumar números o valores almacenados en las variables. En la tabla
4.1 se enumeran algunos operadores utilizados en JavaScript.

182
Programación del lado del cliente
 3.1. Introducción al lenguaje

Tabla 3.1 Algunos operadores de JavaScript

Operador Descripción

+ Suma en operaciones aritméticas, Concatenación en cadenas de caracteres

- Resta

* Multiplicación

/ División

% Módulo

++ Incremento en uno

+= a=a+b Equivale: a+=b

-= a=a-b Equivale: a-=b

*= a=a*b Equivale: a*=b

/= a=a/b Equivale: a/=b

-- Decremento en 1

= Asignación del valor de la derecha a la variable de la izquierda

== Compara si la expresión de la derecha es igual al de la izquierda

!= Compara si la expresión de la derecha es diferente al de la izquierda

<, <= Compara si la expresión de la izquierda es menor o menor igual al de la derecha

>. >= Compara si la expresión de la izquierda es mayor o mayor igual al de la derecha

&& AND lógico

|| OR lógico

Precedencia de operadores.

JavaScript utiliza la precedencia de operadores, en la que algunos operadores se

consideran más importantes que otros y, por lo tanto, se evalúan primero.

183
Programación del lado del cliente
 3.1. Introducción al lenguaje

Tabla 3.2 Precedencia de operadores de mayor a menor

Operadores Tipo
() [] . Paréntesis, llamada a método de objeto
++ −− Incremento/Decremento
+ − ~ ! Unario, bitwise desplazamiento de bits, negación
* / % Aritméticos
+ − Aritméticos y cadena
<< >> >>> Bitwise Desplazamiento de bits
< > <= >= Comparación
== != === !== Comparación
& ^ | Bitwise de bit
&& Lógico
|| Lógico
? : Operador ternario
= += −= *= /= %= Asignación
<<= >>= >>>= &= Asignación
^= |=

, Separador

Tenemos el programa de ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Operadores de JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<p id="suma"></p>
<p id="resta"></p>
184
Programación del lado del cliente
 3.1. Introducción al lenguaje

<p id="multiplicacion"></p>
<p id="division"> </p>
<script>
var a = 15; // Se asignan las constantes a las variables.
var b = 13;
var c = a + b; // Se suman los dos valores.
[Link]("suma").innerHTML
= "La suma de <b>a</b> y <b>b</b> es: " + c;
var c = a - b; // // Se suman los dos valores.
[Link]("resta").innerHTML
= "La resta de <b>a</b> y <b>b</b> es: " + c;
var c = a * b; // // Se multiplican los dos valores.
[Link]("multiplicacion").innerHTML
= " Multiplicación de <b>a</b> y <b>b</b> es: " + c;
var c = a / b; // // Se divide a entre b.
[Link]("division").innerHTML
= " La División de <b> a</b> y <b>b</b> es: " + c;
</script>
</body>
</html>
La salida es:

Ilustración 3.3 Resultado de operadores de JavaScript

3.1.3. Tipos de datos

Los tipos de datos es la clasificación de los datos que especifica el tipo de variable. Al
escribir el código, un programador debe declarar cada variable con su tipo de datos adecuado.
JavaScript maneja los tipos de datos como cadena, booleano, decimal, entero, etc. Si
utilizamos la palabra clave "var" para asignar una variable, JavaScript determina
automáticamente su tipo de datos basándose en la naturaleza del valor.
185
Programación del lado del cliente
 3.1. Introducción al lenguaje

Las variables en javascript se pueden definir al momento de usarlas.

<!DOCTYPE html>
<html>
<head>
<title>Tipos de datos en JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<script>
var a; // "a" No tiene valor.
var b = 0; // "b" es un Núumero.
var a = "Soy una cadena."; //"a" Ahora es una cadena.
</script>
</body>
</html>
En JavaScript, el tipo de datos de las variables es de naturaleza dinámica, lo que significa
que la misma variable puede recibir diferentes tipos de datos en diferentes momentos. Por
ejemplo, si a la variable se le asigna un valor numérico, su tipo será numérico y si a la misma
variable se le asigna posteriormente un valor de cadena, se comportará como una variable de
cadena.

3.1.4. Funciones
Las funciones son bloques "autocontenidos" de códigos organizados que se utilizan para
realizar una tarea específica.

A veces escribimos un código que se va a utilizar una y otra vez, entonces es mejor poner
este código dentro de una "función" y "llamar" a esa función siempre que sea necesario. Esto
ayuda a escribir el código de forma modular ya que cada función puede tener el conjunto de
declaraciones que hacen una tarea separada y específica. Las funciones también se utilizan
para dividir un programa grande en muchas partes pequeñas de código (o módulos). Las
funciones deben ser definidas antes de utilizarlas o llamarlas. La palabra clave "function" se
utiliza para definir una función cuyo nombre debe ser único y la lista de parámetros es
opcional. Los parámetros son los valores que se envían a la función al llamarla cuando se

186
Programación del lado del cliente
 3.1. Introducción al lenguaje

llama a la función desde un código externo. La declaración dentro de una función se escribe
en un par de llaves como se muestra:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Funciones en JavaScript</title>
<script>
function saludos() {
[Link]("resultado")
.innerHTML = "Hola a todos";
}
</script>
</head>
<body>
<button onclick="saludos()">
Haz click aquí!
</button>
<p id="resultado"> </p>
</body>
</html>
La salida del script se muestra en la Ilustración 3.4

Ilustración 3.4 Resultado de la función

En el código anterior se crea una función que asigna una cadena "Hola a todos" a un id
"resultado". Esta función se llama invocando el evento "onclick" definido dentro de la
etiqueta <body>. Cuando el usuario hace clic en el botón, la función se llama y el valor se
muestra en la pantalla como se muestra en la Ilustración 3.4. Después de hacer clic aparece
el mensaje “Hola a todos”

187
Programación del lado del cliente
 3.1. Introducción al lenguaje

3.1.5. Ámbito de variables

El ámbito de una variable es la región dentro del programa de computadora donde se
puede utilizar esa variable. El ámbito define si esa variable en particular puede ser vista o no
desde diferentes partes del código. Las variables en javascript pueden ser declaradas con un
ámbito local o global.

[Link]. Variables globales

Una variable global es una variable que es visible (accesible) en todo el programa. Todas
las declaraciones de código y funciones de un código pueden acceder a la variable global.
Cuando se inicializa una variable en JavaScript, ésta se convierte automáticamente en una
variable global.

[Link]. Variables locales

A diferencia de la variable global, una variable local es accesible sólo dentro de una
función donde está definida. Esto se llama también ámbito de la función. Si declaramos una
variable que tiene a la vez un ámbito local y un ámbito global con el mismo nombre, la
variable local tendrá prioridad cuando la utilicemos dentro de una función. Este tipo de
comportamiento se llama shadowing. El siguiente código muestra la diferencia entre ambos
tipos de variables:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title> Variables Globales and Locales en JavaScript</title>
</head>
<body>
<p>Aquí se explican las diferencias entre variables globales y lcales.
</p>
<h2>Una variable local cuando se accede globalmente</h2>
<p id="variableLocalGlobal"></p>
<h2>Variable Local cuando se accede localmente</h2>
<p id="variableLocalLocal"></p>
<h2>Variable Global cuando se accede localmente</h2>
<p id="variableGloballocal"></p>
<h2>variable Global cuando se accede globalmente</h2>
188
Programación del lado del cliente
 3.1. Introducción al lenguaje

<p id="variableGlobalGlobal"></p>
<script>
var animal = "León"; // se declara e inicializa una variable cadena.
unaFuncion();
//Aquí no esta definida la variable fruta
[Link]("variableLocalGlobal").innerHTML
= "Se llama una variable definida en unaFuncion(): El tipo de fruta
es " + typeof fruta;

//Sí está definida la variable animal

[Link]("variableGlobalGlobal").innerHTML
= "Se llama la variable global. El tipo de animal es " + animal;

function unaFuncion() {
var fruta = "Manzana";
//Aquí sí está definida la variable fruta, pero es local
[Link]("variableLocalLocal").innerHTML
= "En la llamada dentro de la función unaFuncion(), el tipo de
fruta es " + fruta;
//La variable animal no está definida aquí pero sí globalmente
[Link]("variableGloballocal").innerHTML
= "En la llamada dentro de la función unaFuncion() , el tipo de
animal es " + animal; }
</script>
</body>
</html>
La salida de programa es:

189
Programación del lado del cliente
 3.1. Introducción al lenguaje

Ilustración 3.5 Salida del script ámbito de variables

3.1.6. Cadenas
Una cadena es una secuencia finita de caracteres que puede contener números, caracteres
y espacios, etc. En JavaScript las cadenas se utilizan habitualmente para manipular y
almacenar texto. Una cadena puede almacenar cualquier tipo de texto dentro de comillas
simples o dobles, por ejemplo, var txt = "Pakistán, Rusia, Canadá, México, China";

[Link]. Longitud de cadenas

La longitud de una cadena almacenada en una variable se puede encontrar con la ayuda
de una propiedad incorporada "length".

[Link]. Caracteres especiales

190
Programación del lado del cliente
 3.1. Introducción al lenguaje

Los caracteres especiales como las comillas dobles (" "), las comillas simples (' ), la barra
invertida ( \ ), etc. también pueden formar parte de una cadena. Sin embargo, tenemos que
utilizar un carácter de escape "\" antes de estos caracteres especiales que los convierten en
una cadena.

Los programadores suelen evitar los códigos más largos en sus programas para que sean
más legibles y comprensibles. Podemos romper fácilmente la línea de código utilizando un
operador de barra negra "\".

[Link]. Arreglos

Un arreglo de JavaScript es una lista de elementos de datos homogéneos que se agrupan

normalmente en filas y columnas. Una vez que un programa se hace más grande con más
funcionalidad en él, necesitamos declarar más variables. Si estas variables tienen la misma
funcionalidad, puedes declararlas en forma de arreglo. El arreglo es un objeto que permite
almacenar múltiples valores con un solo nombre de variable en forma de lista. Un arreglo
puede contener muchos valores bajo un mismo nombre, y se puede acceder a los valores
haciendo referencia a un "número de índice".

El índice de una matriz comienza en 0. [0] se utiliza para el primer elemento del arreglo,
[1] es para segundo elemento y así sucesivamente.

En el siguiente programa se resumen las operaciones vistas hasta ahora:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cadenas en JavaScript</title>
<body>
<p>La longitud de la variable "txt" es: </p>
<p id="longitud"></p>
<p>Los caracteres especiales se ven así: </p>
<p id="caracterEspecial"></p>
<p>Elementos todo el arreglo: </p>
<p id="arreglo"></p>
<p>Un elemento del arreglo: </p>
<p id="elemento"></p>

191
Programación del lado del cliente
 3.1. Introducción al lenguaje

<p>El método de JavaScript "toString()" regresa una cadena separando

cada elemento con coma ,. </p>
<p id="convertirArreglo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
[Link]("longitud").innerHTML = [Link];
var x = 'ta\' bueno.';
var y = "Los caracteres especiales llevan \
\\ \"caracter especial\" en el código.";
[Link]("caracterEspecial").innerHTML =
x + "<br>" + y;

// Declaración e inicialización de un arreglo.

var animales = ["Perro", "Gato", "León"];
[Link]("arreglo").innerHTML = animales;
[Link]("elemento").innerHTML = animales[2];

var animales = ["Perro", "Gato", "León", "Aguila"];

[Link]("convertirArreglo").innerHTML =
[Link]();
</script>
</head>
</body>
</html>
La salida de script se ve en la figura

Ilustración 3.6 Manejo de cadenas y arreglos

192
Programación del lado del cliente
 3.1. Introducción al lenguaje

Se pueden usar las operaciones push() y pop() para agregar y eliminar elementos de un
arreglo:
<! DOCTYPE html>
<html>
<head>
<title>Métodos de arreglos JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<p>EL Método "pop()" de JavaScript elimina el último elemento del
arreglo.</p>
<p>EL Método "push()" de JavaScript añade un elemento del arreglo en
la última posición.</p>
<button onclick="funcionPop()">Haz click para eliminar el último
elemento
</button>
<button onclick="funcionPush()">Haz click para añadir otro elemento
</button>
<p id="datos"></p>
<script>
var animales = ["Perro", "Gato", "Cebra", "Tigre"];
[Link]("datos").innerHTML = animales;
// Función para eliminar un elemento.
function funcionPop() {
[Link](); // Llamar a pop.
[Link]("datos").innerHTML = animales;
}
function funcionPush() {
[Link]("Venado"); //Llamar a push
[Link]("datos").innerHTML = animales;
}
</script>
</body>
</html>
Salida del programa:

193
Programación del lado del cliente
 3.1. Introducción al lenguaje

Ilustración 3.7 Métodos pop() y push()

3.1.7. Uso de onerror

Usando el evento onerror, o una combinación de las palabras clave try y catch, puede
capturar errores de JavaScript y tratarlos adecuadamente.

Los eventos son acciones que pueden ser detectadas por JavaScript. Cada elemento de una
página web tiene ciertos eventos que pueden desencadenar funciones de JavaScript. Por
ejemplo, el evento onclick de un elemento de botón se puede configurar para llamar a una
función y hacer que se ejecute cada vez que un usuario haga clic en el botón.
<!DOCTYPE html>
<html>
<head>
<title>Manejo de errores en JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<script>
onerror = errorHandler;
[Link]("Bienvenido al manejo de errores");
//Error deliberado
function errorHandler(message, url, line) {
out = "Lo siento, se encontró un error.\n\n";
out += "Error: " + message + "\n";
out += "URL: " + url + "\n";
out += "Línea: " + line + "\n\n";

194
Programación del lado del cliente
 3.2. Manejo de frameworks

out += "Por favor reportarlo con esta información al Centro

de cómputo.\n\n";
alert(out);
return true;
}
</script>
</body>
</html>

La salida se ve en la Ilustración 3.8:

Ilustración 3.8 Captura de errores

3.2. Manejo de frameworks

3.2.1. Introducción a los frameworks del lado del cliente

‘Cuando JavaScript debutó en 1996, añadió interactividad y emoción ocasional a una web
que, hasta entonces, estaba compuesta por documentos estáticos. La web se convirtió no sólo
en un lugar para leer cosas, sino para hacerlas. La popularidad de JavaScript no dejó de
aumentar. Los desarrolladores que trabajaban con JavaScript escribían herramientas para
resolver los problemas a los que se enfrentaban y las empaquetaban en paquetes reutilizables
llamados bibliotecas, para poder compartir sus soluciones con otros. Este ecosistema
compartido de bibliotecas ayudó a dar forma al crecimiento de la web.

195
Programación del lado del cliente
 3.2. Manejo de frameworks

‘Ahora, JavaScript es una parte esencial de la web, utilizada en el 95% de los sitios web,
y la web es una parte esencial de la vida moderna. Los usuarios escriben trabajos, gestionan
sus presupuestos, transmiten música, ven películas y se comunican con otros a grandes
distancias de forma instantánea, con texto, audio o videochat. La web nos permite hacer cosas
que antes sólo eran posibles en aplicaciones nativas instaladas en nuestros ordenadores. Estos
sitios web modernos, complejos e interactivos, suelen denominarse aplicaciones web.

‘La llegada de los modernos frameworks de JavaScript ha facilitado mucho la creación de

aplicaciones altamente dinámicas e interactivas. Un framework es una biblioteca que ofrece
opiniones sobre cómo se construye el software. Estas opiniones permiten la predictibilidad y
la homogeneidad en una aplicación; la predictibilidad permite que el software escale hasta
un tamaño enorme y siga siendo mantenible; la predictibilidad y la mantenibilidad son
esenciales para la salud y la longevidad del software.

‘Los frameworks de JavaScript impulsan gran parte del impresionante software de la web
moderna, incluidos muchos de los sitios web que probablemente utilices a diario. Por
ejemplo, MDN Web Docs, de donde se extrajo esta información, utiliza el framework
React/ReactDOM para potenciar su front-end. (MDN web Docs Moz:illa, 2021).

3.2.2. Angular
‘Angular es un marco de aplicación web de código abierto dirigido por el equipo de
Angular en Google y por una comunidad de personas y empresas. Es una reescritura completa
del mismo equipo que construyó AngularJS. Angular fue lanzado oficialmente el 14 de
septiembre de 2016.

‘Angular es un framework basado en componentes que utiliza plantillas HTML

declarativas. En el momento de la construcción, de forma transparente para los
desarrolladores, el compilador del framework traduce las plantillas a instrucciones
optimizadas de JavaScript. Angular utiliza TypeScript, un superconjunto de JavaScript.

196
Programación del lado del cliente
 3.3. Estructuras de control

3.2.3. Vue
‘Evan You lanzó por primera vez Vue en 2014, después de trabajar y aprender del
proyecto original AngularJS. Vue es el más joven de los cuatro grandes, pero ha disfrutado
de un reciente repunte de popularidad.

‘Vue, al igual que AngularJS, extiende el HTML con parte de su propio código. Aparte
de eso, se basa principalmente en JavaScript moderno y estándar.

3.2.4. React
‘Facebook lanzó React en 2013. En ese momento, ya había estado utilizando React para
resolver muchos de sus problemas internamente. React en sí mismo no es técnicamente un
framework; es una biblioteca para renderizar componentes de interfaz de usuario. React se
utiliza en combinación con otras bibliotecas para hacer aplicaciones - React y React Native
permiten a los desarrolladores hacer aplicaciones móviles; React y ReactDOM les permiten
hacer aplicaciones web, etc.

Debido a que React y ReactDOM se utilizan a menudo juntos, React se entiende

coloquialmente como un framework de JavaScript. Mientras lees este módulo, trabajaremos
con esa comprensión coloquial.

React extiende JavaScript con una sintaxis similar a la de HTML, conocida como JSX.’
(MDN web Docs Moz:illa, 2021).

3.3. Estructuras de control

En la unidad anterior, hemos aprendido algunos conceptos básicos de JavaScript. Ahora,
es el momento de avanzar y aprender algunos temas avanzados relacionados con JavaScript.
Por lo tanto, esta unidad se centrará en las condiciones de JavaScript, ciclos y eventos. La
principal funcionalidad y uso de JavaScript es validar los datos introducidos por un usuario.
Este ayuda mucho a gestionar los datos de forma eficiente sin enviarlos al servidor. Por lo
tanto, la validación de formularios también se ve en esta unidad.

197
Programación del lado del cliente
 3.3. Estructuras de control

3.3.1. Condiciones simples

La sentencia condicional realiza acciones específicas basadas en una determinada
condición. Si una condición es verdadera se ejecuta un bloque de código y si es falsa, se
ejecuta otro bloque de código.

Existen dos posibilidades: condicional sin else y condicional con else.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">;
<title>Condición simple en JavaScript</title>
</head>
<body>
<h3>Resultado:</h3>
<p id="condicionalSimple"></p>
<p id="sigueElFlujo"></p>
<script>
var limiteAprobatorio = 80;
if (limiteAprobatorio >= 70) {
[Link]("condicionalSimple").innerHTML =
" El estudiante cumple el límite.";
}
[Link]("sigueElFlujo").innerHTML =
" El estudiante hizo la prueba.";
</script>
</body>
</html>

El resultado del programa es:

198
Programación del lado del cliente
 3.3. Estructuras de control

Ilustración 3.9 Resultado del script con condición sin else

La siguiente condición permite ejecutar código específico cuando no se cumple la
condición:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Condición con else en JavaScript</title>
</head>
<body>
<h3>Resultado:</h3>
<p id="condicionalElse"></p>
<p id="sigueElFlujo"></p>
<script>
var limiteAprobatorio = 60;
if (limiteAprobatorio >= 70) {
[Link]("condicionalElse").innerHTML =
" El estudiante cumple el límite.";
}
else
{
[Link]("condicionalElse").innerHTML =
" El estudiante no cumple el límite.";
}
[Link]("sigueElFlujo").innerHTML =
" El estudiante hizo la prueba.";
</script>
</body>
</html>

199
Programación del lado del cliente
 3.3. Estructuras de control

El resultado se ve en

Ilustración 3.10 Condicional con else

3.3.2. Condición múltiple

Una sentencia switch es un mecanismo de control de selección que puede tener un número
de condiciones posibles con su respectivo bloque de código. Es una combinación de varias
sentencias if then else. De este modo, el código se hace más legible, sencillo de entender y
eficiente. El código siguiente describe el uso de la sentencia switch:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>switch en JavaScript</title>
</head>
<body>
<h3>Resultado:</h3>
<p id="resultado"></p>
<script>
var numero = 70;
switch (numero) {
case 70: [Link](
"El estudiante aprueba con la mínima de 70");
break;
case 80: [Link](
"el estudiante tiene buena calificación");
break;
case 90: [Link](
"El estudiante tiene muy buena calificación");
break;

200
Programación del lado del cliente
 3.3. Estructuras de control

case 100: [Link](

"El estudiante tiene excelente calificación.");
break;
default: [Link](
"El estudiante no aprobó.");
}
</script>
</body>
</html>

Ilustración 3.11 Resultado de la sentencia switch

3.3.3. Ciclos
A veces necesitamos ejecutar un comando o un grupo de instrucciones repetidamente en
nuestro programa. Así que para escribirlas una y otra vez, podemos escribirlas una vez en un
bloque y ejecutar el bloque repetidamente. Un bucle es un conjunto de sentencias que se
ejecutan hasta que una condición es verdadera. Es un método de flujo de control en un
programa de computadora. La tabla 5.2 tiene una lista de identificadores utilizados para la
implementación de bucles.

Tabla 3.3 Ciclos de JavaScript

Tipo Descripción

for El grupo de instrucciones se ejecuta un número dado de veces.

while El grupo de instrucciones se ejecutan mientras la condición es

verdadera.

201
Programación del lado del cliente
 3.3. Estructuras de control

do while El grupo de instrucciones se ejecuta mientras la condición

permanezca en verdadero, pero las instrucciones se ejecutan al
menos una vez

Ejemplo de ciclo con for:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Ciclo for de JavaScript</title>
</head>
<body>
<h3>Lista de animales:</h3>
<p id="listaAnimales"></p>
<script>
var ArregloAnimales = ["Caballo", "Gato", "Perro", "Elefante",
"Tigre"];
var texto = ""; // Se inicializa una cadena nula
for(var i = 0; i < [Link]; i++)
{
texto += ArregloAnimales[i] + "<br>";
// Se almacena el nombre de cada elemento del arreglo en texto
} [Link]("listaAnimales").innerHTML = texto
</script>
</body>
</html>

Ejemplo de ciclo while:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf8">
<title>Ciclo while de JavaScript</title>
</head>

<body>
<h3>Lista de animales:</h3>
<p id="listaAnimales">
202
Programación del lado del cliente
 3.3. Estructuras de control

</p>
<script>
var ArregloAnimales = ["Caballo", "Gato", "Perro", "Elefante",
"Tigre"];
var texto = "";
var i = 0;
while (i < [Link]) {
texto += ArregloAnimales[i] + "<br>";
i++;
}
[Link]("listaAnimales").innerHTML = texto;
</script>
</body>
</html>

Ilustración 3.12 Resultado ciclo While

El resultado es similar al del ciclo for.

En las sentencias do-while, el bucle se ejecuta una vez antes de comprobar la condición
del mismo. Incluso si las condiciones no son verdaderas, la primera ejecución se hará en
cualquier caso.
<!DOCTYPE html>
<html>

<head>
<meta charset="utf8">
<title>Ciclo do-while de JavaScript</title>
</head>
203
Programación del lado del cliente
 3.3. Estructuras de control

<body>
<h3>Lista de animales:</h3>
<p id="listaAnimales">
</p>
<script>
var ArregloAnimales = ["Caballo", "Gato", "Perro", "Elefante",
"Tigre"];
var texto = "";
var i = 0;
do {
texto += ArregloAnimales[i] + "<br>";
i++;
}
while (i < [Link])
[Link]("listaAnimales").innerHTML = texto;
</script>
</body>
</html>

El resultado también es similar al ciclo for y al ciclo while.

3.3.4. Eventos
Se genera un evento como resultado de la acción del usuario. El usuario tiene la
posibilidad de introducir datos a través de un teclado, introducir su elección a través de un
ratón o cualquier otra interfaz periférica de la computadora. Un evento es una acción que
tiene lugar como resultado de estas tareas de usuario. Los programadores tienen que ocuparse
de estas entradas del usuario. La mayoría de los eventos incluyen los movimientos del ratón,
los clics y la pulsación de teclas, etc.

[Link]. modelo de eventos

Cada elemento o etiqueta XHTML tiene su propia lista de eventos a los que puede
responder. Un mismo tipo de evento (por ejemplo, pulsar un botón del ratón) puede estar
definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede
tener asociados varios eventos diferentes.

204
Programación del lado del cliente
 3.3. Estructuras de control

El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en
inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se
denomina onclick y el evento asociado a la acción de mover el ratón se denomina
onmousemove.

Tabla 3.4 Algunos eventos definidos en JavaScript

onblur El elemento pierde el Es compatible con todos los elementos HTML EXCEPTO los
foco. El evento elementos HTML : <base>, <bdo>, <br>, <head>, <html>,
opuesto es onfocus <iframe>, <meta>, <param>, <script>, <style> y <title>

onchange Se ha modificado el <input>, <select>, <textarea>

elemento

onclick Presionar e liberar el Todos los elementos

botón izquierdo del
ratón

ondblclick Presionar y liberar Todos los elementos

dos veces el botón
izquierdo del ratón

onfocus El elemento adquiere <button>, <input>, <label>, <select>, <textarea>, <body>

el foco con un clic o
tabulación

onkeydown Se Presiona la tecla Elementos de formulario y <body>

hacia abajo

onkeypress Se presiona y se libera Elementos de formulario y <body>

una tecla

onkeyup Se libera la tecla, una Elementos de formulario y <body>

vez presionada

onload Se genera cuando la <body>

página se ha cargado
completamente

onmousedown Presionar sin soltar un Todos los elementos

botón del ratón

205
Programación del lado del cliente
 3.3. Estructuras de control

onmousemove Se genera cuando se Todos los elementos

mueve el ratón

onmouseout Se genera cuando el Todos los elementos

apuntador del ratón
sale del elemento

onmouseover Se genera cuando el Todos los elementos

apuntador del ratón
entra a un elemento

onmouseup Se genera cuando se Todos los elementos

libera el botón que
estaba siendo
presionado

onreset Se inicializa el <form>

formulario.

onresize Se genera cuando se <body>

modifica el tamaño de
la ventana del
navegador

onselect Seleccionar un texto <input>, <textarea>

onsubmit Enviar el formulario <form>

onunload Se abandona o cierra <body>

la página

Los eventos más utilizados en las aplicaciones web tradicionales son onload para esperar a
que se cargue la página por completo, los eventos onclick, onmouseover, onmouseout para
controlar el ratón y onsubmit para controlar el envío de los formularios.

Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset,

onsubmit) permiten evitar la "acción por defecto" de ese evento. Más adelante se muestra
en detalle este comportamiento, que puede resultar muy útil en algunas técnicas de
programación.

206
Programación del lado del cliente
 3.3. Estructuras de control

[Link]. Manejadores de eventos como atributos XHTML

Es el método más sencillo y también el menos recomendado por ser el menos profesional
por incluir el código JavaScript a ejecutar cuando se genera un evento. El código se incluye
en un atributo dentro del elemento XHTML. Considere el ejemplo siguiente, se necesita
mostrar un mensaje cuando el usuario haga clic con el ratón en un botón:
<input type="button" value="Haga clic aquí" onclick="alert('Ha hecho clic en
el botón');" />

Con esta técnica, se definen atributos XHTML con el mismo nombre que los eventos que
se quieren manejar. El ejemplo, se controla un evento del ratón, cuyo nombre es onclick.
Así, el elemento XHTML para el que se quiere definir este evento, debe incluir un atributo
llamado onclick.
El atributo es una cadena de texto que incluye las instrucciones JavaScript que deben ejecutarse
cuando se genera el evento. En este caso, el código JavaScript es muy sencillo: (alert('Ha hecho
clic en el botón');) muestra una ventana modal con un mensaje.
Otro ejemplo, el usuario hace clic en un elemento <div> que muestra un mensaje y cuando
el usuario pasa el ratón por encima del elemento, se muestra otro mensaje:
<div onclick="alert('Ha hecho clic con el ratón');" onmouseover="alert('Pasó
el ratón por encima del elemento');">
Puede hacer clic en este elemento o pasar el ratón por encima.
</div>

El siguiente ejemplo muestra cómo onload:

<body onload="alert('Se cargó toda la página');">
...
</body>
El mensaje se muestra después de que la página se haya cargado completamente,
incluyendo el código HTML, imágenes hojas de estilo y cualquier otro objeto incluido en la
página.

El evento onload es uno de los más utilizados porque nos asegura que están disponibles
todos los archivos y funciones que permiten acceder y manipular los nodos del árbol DOM
que se construye dinámicamente al cargar la página.

207
Programación del lado del cliente
 3.3. Estructuras de control

[Link]. La variable this

JavaScript define una variable especial llamada this que se crea automáticamente y que
se emplea para hacer más legible el código. En los eventos, se puede utilizar la variable this
para referirse al elemento XHTML que ha provocado el evento.

Código sin variable this:

<div id="contenidos" style="width:150px; height:60px; border:thin solid
silver"
onmouseover="[Link]('contenidos').[Link]='black'
;"
onmouseout="[Link]('contenidos').[Link]='silver'
;">
Sección de contenidos...
</div>

Código con variable this

<div id="contenidos" style="width:150px; height:60px; border:thin solid
silver" onmouseover="[Link]='black';"
onmouseout="[Link]='silver';">
Sección de contenidos...
</div>

[Link]. Manejadores de eventos como funciones internas

Aunque agregar código javascript en los atributos XHTML es más sencillo. Tiene el
problema de complicar la programación en cuanto se añaden más instrucciones, por lo que
solamente es recomendable para los casos más sencillos. Sus principales desventajas son:

1. Se mezcla código HTML con código Javascript, cuando lo ideal es que estén
separados.

2. Si el código del evento es muy extenso, perjudica la legibilidad del mismo.

3. En el evento, se puede hacer referencia al nombre de una función Javascript,

solucionando el punto 2, pero seguiríamos con el mismo problema del punto 1. A
la larga, el mantenimiento se complica porque existe una dependencia del nombre
de la función.
208
Programación del lado del cliente
 3.3. Estructuras de control

[Link]. Manejadores de eventos como funciones externas

Usar los eventos en los atributos XHTML es la técnica más sencilla para empezar a
entender JavaScript. El problema que se complica en exceso en cuanto se añaden más
eventos, por lo que solamente es recomendable para los casos más sencillos.

Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario,

es aconsejable agrupar todo el código JavaScript en una función externa y llamar a esta
función desde el elemento XHTML. Por ejemplo, el código:
<input type="button" value="Haga clic aquí" onclick="alert('Ha hecho clic en
el botón');" />

Se puede transformar en:

function miMensaje() {
alert(''Ha hecho clic en el botón');
}

<input type="button" value=" Haga clic aquí" onclick="muestraMensaje()" />

No se puede usar this como se usa en los manejadores que van en los atributos XHTML.
La manera correcta es pasar this como parámetro de la función manejadora:
<div style="padding: .2em; width: 150px; height: 60px; border: thin solid
silver" onmouseover="resalta(this)" onmouseout="resalta(this)">
Sección de contenidos...
</div>

Y la definición de la función es:

function resalta(esteElemento) {
switch([Link]) {
case 'silver': //Para Firefox
case 'silver silver silver silver': //Para Internet explores
case '#c0c0c0': //Para Opera
[Link] = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
[Link] = 'silver';
break;
209
Programación del lado del cliente
 3.3. Estructuras de control

}
}
Como puede verse, el manejo de borderColor se complica por la forma en la que
diferentes navegadores guardan el valor de la propiedad borderColor. Firefox almacena (en
caso de que los cuatro bordes coincidan en color) el valor simple black, Internet Explorer lo
almacena como black black black black y Opera almacena su representación
hexadecimal #000000.

[Link]. Manejadores de eventos semánticos

Mezclar los atributos XHTML o las funciones externas para añadir manejadores de
eventos tiene un grave inconveniente: "ensucian" el código XHTML de la página.

Al crear páginas web lo mejor es separar el XHTML de la presentación (CSS). también

separar el XHTML del código JavaScript. El usar juntos JavaScript y XHTML hace mucho
más difícil leer el código fuente de la página, hace más difícil su mantenimiento y reduce la
semántica del documento final producido.

Hay un método alternativo para administrar los manejadores de eventos de JavaScript.

Este método permite asignar las funciones externas a través de las propiedades DOM de los
elementos XHTML. Por ejemplo:
<input id="clicable" type="button" value="Haga clic aquí"
onclick="[Link]('Ha hecho clic en el botón');" />

Se puede escribir como:

<input id="clicable" type="button" value=" Haga clic aquí " />

function miMensaje() {
[Link]('Gracias por hacer clic');
}
[Link]("clicable").onclick = miMensaje;
Hay que notar que, cuando se asigna la función al evento, ésta no lleva paréntesis. Si los
llevara, se estaría asignando el valor de retorno de la función y la referencia a la misma.

210
Programación del lado del cliente
 3.3. Estructuras de control

Para poder usar este método, es necesario que el DOM esté completamente construido, lo
que implica que la página debe estar completamente cargada. Para asegurarse de ello, se
puede usar el evento onload:
[Link] = function() {
[Link]("clicable").onclick = miMensaje;
}

Como se ve, se utiliza una función anónima que se asigna al evento onload.

[Link]. El flujo de eventos

Además de los eventos vistos hasta ahora, los naevegadores incluyen un mecanismo
denominado flujo de eventos o "event flow". Éste permite que varios elementos diferentes
puedan responder a un mismo evento. Con ello es posible asignar a un botón el evento
onClick y su vez asignarlo a otra función que se encuentre en un <div> superior o asignarlo
a otra función que ejecute el <body> de la página. Así un clic de un botón puede ejecutarse
en tres elementos distintos de la página. Se ha establecido un orden de ejecución que se
conoce como flujo de eventos. Hay que tener en cuenta que existen muchas diferencias en el
flujo de eventos entre navegadores.

1. Burbujeo de eventos. Los eventos se ejecutan desde el elemento más interno hasta el
más externo o el elemento más específico hasta el más específico. Este modelo lo
soportan los navegadores basados en la familia Mozilla como Firefox.

Ilustración 3.13 Funcionamiento de Event bubbling en mozilla

211
Programación del lado del cliente
 3.3. Estructuras de control

2. Captura de eventos. El flujo de eventos va desde el elemento menos específico hasta

el más específico. Esto es, al contrario de event bubbling. Lo usaba Netscape
Navigator 4.0

3. Eventos DOM El DOM soporta tanto, event bubbling como event capturing, pero el
event capturing se ejecuta primero y la mayoría de navegadores que cumplen el
standard, continúan el flujo hasta el objeto window. El elemento más específico del
flujo de eventos no es el <div> que desencadena la ejecución de los eventos, sino el
nodo de tipo Button que contiene el <div>. Cuando se combinan los dos flujos de
eventos, se tienen como consecuencia que el nodo más específico pueda ejecutar dos
eventos uno detrás de otro.

Ilustración 3.14 Esquema del flujo del modelo DOM event

[Link]. Manejadores de eventos de DOM

En los subtemas anteriores se habló del concepto event handler o manejador de eventos
como la función encargada de administrar los eventos que se producen. Pero ¿Qué sucede si
se desea más de un controlador por evento? La especificación DOM proporciona dos técnicas
similares a las disponibles para Internet Explorer y se llaman addEventListener() y
removeEventListener() para asociar y desasociar manejadores de eventos.

212
Programación del lado del cliente
 3.3. Estructuras de control

La principal diferencia entre estos métodos y los anteriores es que en este caso se requieren
tres parámetros: el nombre del "event listener", una referencia a la función encargada de
procesar el evento y el tipo de flujo de eventos al que se aplica.

El primer argumento no es el nombre completo del evento como se vio anteriormente,

sino que se debe eliminar el prefijo on. En otras palabras, si se utilizaba el nombre onclick,
ahora se debe utilizar click.

Si el tercer parámetro es true, el manejador se emplea en la fase de capture. Si el tercer

parámetro es false, el manejador se asocia a la fase de bubbling. Cuando se desasocia una
función de los flujos de eventos deben de realizarse en el mismo. En el ejemplo siguiente se
asocia el evento a bubbling y se desasocia también en el mismo flujo.

A continuación, se ve cómo se puede escribir el ejemplo dado anteriormente:

function miMensaje() {
[Link]("Has pulsado un botón del ratón");
}
var miDiv = [Link]("div_principal");
[Link]("click", miMensaje, false);

// Después ya no se necesita manejar el evento:

[Link]("click", miMensaje, false);
Para asociar múltiples funciones a un evento único:
function miMensaje() {
[Link]("Has hecho clic con el ratón");
}

function suMensaje() {
[Link]("Has hecho clic el ratón y ejecuta otra función");
}

var miDiv = [Link]("miDiv");

[Link]("click", miMensaje, true);
[Link]("click", suMensaje, true);

213
Programación del lado del cliente
 3.3. Estructuras de control

[Link]. El objeto Event

El objeto event es el estandard definido por los navegadores para proporcionar la

información que necesita el manejador del evento, como la tecla presionada la posición del
ratón, el elemento que lo produjo, entre otra información. Se trata de un objeto que se crea
automáticamente cuando se produce un evento y que se destruye de forma automática cuando
se han ejecutado todas las funciones asignadas al evento.

El estándar DOM establece que el objeto event debe tener un único parámetro que deben
de recibir las funciones para procesar eventos. En caso de que no se vea ningún parámetro en
la función, se puede acceder al objeto event a través del array de los argumentos de la
función, esto sólo en caso que los navegadores sigan el estándar.
[Link] = function() {
var miDivEvento = arguments[0];
}

No obstante, se recomienda pasar el parámetro de forma explícita para mayor claridad.

[Link] = function(evento) {
...
}

En los navegadores que siguen los estándares, en caso de que no se pase el parámetro, lo
crean automáticamente y lo pasan entonces a la función asignada para manejar el evento.

En la tabla vemos las propiedades definidas para el objeto event en los navegadores que
siguen el standard:

Tabla 3.5 Propiedades/Métodos definidas por DOM

Propiedad/método Regresa Descripción

altKey Booleano True si se ha presionado alt False en otro caso

bubbles Booleano True si el evento pertenece a bubbling

button Entero Se presionó algún botón del ratón.

1. Botón izquierdo.

2. Botón derecho.

214
Programación del lado del cliente
 3.3. Estructuras de control

3. Botón izquierdo y derecho simultáneamente.

4. Botón central.

5. Botón izquierdo y central simultáneamente.

6. Botón derecho y central simultáneamente.

7. Se presionan simultáneamente los tres botones.

cancelable Booleano True el evento se puede cancelar

cancelBubble Booleano True si se ha detenido el flujo de eventos bubbling

charCode Entero El código UNICODE del carácter que corresponde a la tecla presionada

clientX Entero Coordenada X de la posición de ratón respecto del área visible de la

ventana

clientY Entero Coordenada Y de la posición de ratón respecto del área visible de la

ventana

ctrlKey Entero Regresa TRUE se está presionada la tecla CTRL, falso en otro caso

currentTarget Element El elemento que es el objetivo del evento

detail Entero El número de veces que se han presionado los botones del ratón

eventPhase Booleano La fase en la que se encuentra el evento:

1. Fase capturing

2. En el elemento destino

3. Fase bubbling

isChar Booleano True si la tecla presionada corresponde a un carácter

keyCode Entero Indica el código numérico de la tecla presionada

metaKey Entero Regresa TRUE si está presionada la tecla meta, FALSE en otro caso

pageX Entero Coordenada X de la posición del ratón respecto de la página

pageY Entero Coordenada Y de la posición del ratón respecto de la página

preventDefault() Función Se usa para cancelar la acción predefinida del evento

relatedTarget Element Objetivo secundario del evento

screenX Entero Coordenada X de la posición del ratón respecto de la pantalla completa

screenY Entero Coordenada Y de la posición del ratón respecto de la pantalla completa

shiftKey Booleano Regresa TRUE si se presionó la tecla shift. FALSE en otro caso

215
Programación del lado del cliente
 3.3. Estructuras de control

stopPropagation() Función Permite detener el flujo de eventos de tipo bubbling

target Element El elemento que origina el evento

timeStamp Número La fecha y hora en que se produjo el evento

type Cadena de El nombre del evento

texto

Todas las propiedades del objeto event son de sólo lectura excepto altKey, button y
keyCode que son de lectura y escritura. La tecla META es una tecla que ya no se usa como tal
actualmente. Se asocia a la tecla alt o a la tecla de Windows y en las computadoras Mac se
asocia a la tecla Command.

3.3.5. Formularios
Los formularios web siempre ha sido una de las tareas fundamentales de JavaScript puesto
que la programación de aplicaciones la mayoría de las veces contienen uno o más. Una de
las principales razones por las que se creó el lenguaje de programación JavaScript fue la
necesidad de validar los datos de los formularios directamente en el navegador del usuario.
De esta forma, se evitaba recargar la página cuando el usuario cometía errores al rellenar los
formularios.

Los formularios y sus elementos, son objetos DOM que tienen propiedades únicas, que
otros objetos no poseen.

[Link]. Propiedades básicas de formularios

Cuando el navegador carga una página web, crea automáticamente un arreglo denominado
forms que contiene la referencia a todos los formularios de la página.

Para tener acceso al arreglo forms se hace a través del objeto document, entonces
[Link] contiene todos los formularios de la página. Para acceder elemento por
elemento se usa la sintaxis de arreglos usando un índice que empieza con el valor cero. Así,
para acceder al primer formulario tenemos:
[Link][0];

216
Programación del lado del cliente
 3.3. Estructuras de control

También el navegador crea un arreglo de todos los elementos que pertenecen al formulario
correspondiente llamado elements. Si necesitamos acceder al primer elemento del
formulario se escribe:
[Link][0].elements[0];
Aunque es una forma rápida y sencilla, no se recomienda esta forma para acceder a los
elementos de un formulario, dado que éstos pueden cambiar a través del tiempo. La forma
más común de acceder a los elementos de un formulario es a través del atributo name o id.
Accediendo de esta manera siempre se tiene el acceso a cualquier formulario o elemento.
Dado el siguiente formulario se muestra cómo acceder a sus elementos:
<form name="formularioUno" >
<input type="text" name="elemento" id="elemento"/>
</form>

<form name="formularioDos" >

...
</form>

var formularioUno = [Link];

var formulariodos = [Link];
Los elementos del formulario también se pueden acceder de la misma manera:
var primerElemento = [Link];
También se pueden usar las funciones del DOM como getElementById
var formularioUno = [Link];
var formulariodos = [Link];
Dependiendo del elemento del formulario habrá algunas propiedades útiles a tener en
cuenta.

Propiedad Tipo de elemento Descripción

type <input> text, Indica el tipo de elemento del que se trata. Para text, button,
textarea checkbox, etc coincide. Para select hay dos posibles valores
button, select-one select-multiple que permite diferenciar
checkbox
selección simple o múltiple
<select>

217
Programación del lado del cliente
 3.3. Estructuras de control

form Hace referencia al formulario al que pertenece el elemento

como en:
[Link]("id_del_elemento").form
name Obtiene el valor del atributo name. Es de solo lectura

value text, Permite leer y modificar el valor del atributo value de

textarea,
XHTML.
button

[Link]. Botones de radio

Cuando se tiene un conjunto de botones de radio se necesita saber cuál de todos ellos ha
sido seleccionado, puesto que son mutuamente excluyentes. Se usa un código parecido al
siguiente:
<input type="radio" value="si" name="pregunta" id="preguntaSi"/> SI
<input type="radio" value="no" name="pregunta" id="preguntaNo"/> NO
<input type="radio" value="nsnc" name="pregunta" id="preguntaNSC"/> NS/NC
var elementos = [Link]("pregunta");

for(var i=0; i<[Link]; i++) {

[Link](" Elemento: " + elementos[i].value + "\n Seleccionado: " +
elementos[i].checked);
}

[Link]. Casillas de verificación

Se parecen a los botones de radio, pero el usuario puede elegir ninguno, uno o más de uno.
Por ejemplo:
<input type="checkbox" value="condiciones" name="condiciones"
id="condiciones"/> He leído y acepto las condiciones
<input type="checkbox" value="privacidad" name="privacidad"
id="privacidad"/> He leído la política de privacidad

Se lee con el siguiente código

var elemento = [Link]("condiciones");

[Link]("Elemento: " + [Link] + "\n Verificado: " +
[Link]);

218
Programación del lado del cliente
 3.3. Estructuras de control

elemento = [Link]("privacidad");
[Link]("Elemento: " + [Link] + "\n Verificado: " +
[Link]);

[Link]. Listas desplegables

Se necesita obtener el valor del atributo value de la opción option elegida por el usuario.
Para obtener su valor se utilizan las siguientes propiedades:

1. options. Es un arreglo que se crea automáticamente por el navegador para cada lista
desplegable y contiene las referencias de todas las opciones de esa lista desplegable así que
se usa:
[Link]("idLista").options[0]
2. selectedIndex. Cuando el usuario selecciona una opción, el navegador actualiza el
valor de esta propiedad. Por lo que se usa el siguiente código para acceder al elemento
seleccionado:
[Link]("opciones").options[[Link]("opcione
s").selectedIndex]
Es común acceder a los valores del siguiente modo:
[Link]("opciones").options[[Link]].valu
u obtener el texto que corresponde al valor seleccionado:
[Link]("opciones").options[[Link]].text
No se debe confundir el valor de la propiedad selectedIndex con el valor
correspondiente a la propiedad value de la opción seleccionada. El primero es un índice del
arreglo options y el segundo el valor que tiene la opción elegida por el usuario.

[Link]. Otras utilerías

1. Establecer el foco en un elemento

<form id="formulario" action="#">
<input type="text" id="primero" />
</form>
[Link]("primero").focus();
O
if([Link] > 0) {
219
Programación del lado del cliente
 3.3. Estructuras de control

if([Link][0].[Link] > 0) {
[Link][0].elements[0].focus();
}
}
El campo no debe de ser de tipo hidden

2. Evitar envío duplicado de un formulario

<form id="formulario" action="#">
...
<input type="button" value="Enviar" onclick="[Link]=true;
[Link]=’Enviando...’; [Link]()" />
</form>
Se deshabilita el evento onclick

3. Limitar el tamaño de un textarea

<form id="formulario" action="#">
...
<input type="button" value="Enviar" onclick="[Link]=true;
[Link]=’Enviando...’; [Link]()" />
</form>

<textarea onkeypress="return true;"></textarea>

<textarea onkeypress="return false;"></textarea>

function limitaCaracteres(maximoCaracteres) {
var elemento = [Link]("texto");
if([Link] >= maximoCaracteres ) {
return false;
}
else {
return true;
}
}

<textarea id="texto"
onkeypress="return limitaCaracteres(100);"></textarea>

Cuando onkeypress es true, se permite seguir escribiendo y cuando es false no permite

más entradas.

220
Programación del lado del cliente
 3.3. Estructuras de control

4. Restringir los caracteres permitidos en un cuadro de texto

<script>
function caracteresPermitidos(elEvento, permitidos) {
// Variables que definen los caracteres permitidos
var numeros = "0123456789";
var caracteres = "
abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
var numeros_caracteres = numeros + caracteres;
var teclas_especiales = [8, 37, 39, 46];
// 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha
derecha

// Seleccionar los caracteres a partir del parámetro de la función

switch(permitidos) {
case 'num':
permitidos = numeros;
break;
case 'car':
permitidos = caracteres;
break;
case 'num_car':
permitidos = numeros_caracteres;
break;
}

// Obtener la tecla pulsada

var evento = elEvento || [Link];
var codigoCaracter = [Link] || [Link];
var caracter = [Link](codigoCaracter);

// Comprobar si la tecla pulsada es alguna de las teclas especiales

// (teclas de borrado y flechas horizontales)
var tecla_especial = false;
for(var i in teclas_especiales) {
if(codigoCaracter == teclas_especiales[i]) {
tecla_especial = true;
break;
}
}

// Comprobar si la tecla pulsada se encuentra en los caracteres

permitidos
// o si es una tecla especial
221
Programación del lado del cliente
 3.3. Estructuras de control

return [Link](caracter) != -1 || tecla_especial;

}
// Sólo números
<input type="text" id="texto" onkeypress="return
caracteresPermitidos(event, 'num')" />

// Sólo letras
<input type="text" id="texto" onkeypress="return caracteresPermitidos
(event, 'car')" />

// Sólo letras o números

<input type="text" id="texto" onkeypress="return caracteresPermitidos
(event, 'num_car')" />
</script>

[Link]. Ventanas popups

Las ventanas emergentes son pequeñas ventanas de alerta que se muestran en el navegador
para mostrar alguna información. JavaScript tiene tres tipos de cuadros emergentes:

Ventana de alerta. Una ventana de alerta es una ventana de diálogo especial que se muestra
cuando ocurre algo que requiere la atención del usuario. Cuando aparece, el usuario tendrá
que hacer clic en "Aceptar" para seguir adelante.

Ventana de confirmación. Una ventana de confirmación es una ventana de diálogo que

pide al usuario que apruebe o desapruebe la operación solicitada. Esta ventana de diálogo se
utiliza cuando se va a realizar alguna operación crítica. Cuando aparece, el usuario tendrá
dos opciones aceptar o cancelar. Si presiona aceptar la ventana regresará TRUE. En otro caso,
regresa FALSE.

Cuando aparece un cuadro de confirmación, el usuario tiene dos opciones: puede hacer
clic en el botón "Aceptar" o "Cancelar" para continuar. Si el usuario hace clic en el botón

Si el usuario hace clic en el botón "Aceptar", el cuadro devolverá verdadero y si se hace

clic en el botón "Cancelar", el cuadro devolverá falso.

222
Programación del lado del cliente
 3.3. Estructuras de control

Ventana de consulta. Una ventana de consulta se utiliza cuando se desea que el usuario
introduzca un valor. Cuando aparece, el usuario tendrá que hacer clic en "Aceptar" o
"Cancelar" para continuar después de introducir un valor. Si el usuario hace clic en "Aceptar"
el cuadro devolverá el valor introducido. Si el usuario hace clic en "Cancelar", la caja
devolverá un valor nulo (Nada).

A continuación, se pone un ejemplo del uso de estas utilerías:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title> Ventanas emergentes de Javascript</title>
</head>
<body>
<h2> Ventanas emergentes de Javascript</h2>
<h5>Ventana de confirmación</h5>
<button onclick="confirmaFunction()">por favor confirma</button>

<h5>Ventana emergente de alerta.</h5>

<button onclick="alertaFunction()">Ten cuidado!</button>

<h5>Ventana emergente de pregunta.</h5>

<button onclick="preguntaFunction()">Necesito un dato</button>
<p id="pregunta"></p>
<script>
function alertaFunction() {
alert("Ventana emergente de alerta.");
}
function confirmaFunction() {
confirm("Ejemplo de ventana emergente de confirmación.");
}
function preguntaFunction() {
var texto;
var person = prompt("Por favor introduzca su nombre:",
"Nombre");
if(person == null || person == "") {
texto = "Presionaste el botón de cancelar.";
} else {
texto = "Perfecto " + person + "¡¡Esto es lo que hace la
función prompt!!.";
}

223
Programación del lado del cliente
 3.3. Estructuras de control

[Link]("pregunta").innerHTML = txt;
}
</script>
</body>
</html>

La Ilustración 3.15 muestra una salida de este script.

Ilustración 3.15 Ventanas emergentes de JavaScript

[Link]. Validación de formularios

JavaScript se usa mucho del lado del cliente para la validación de los datos de entrada,
permitiendo al usuario corregirlos si es que hay algún error antes de enviarlos al servidor.
Esto da una mejor experiencia, ya que no necesita esperar la respuesta del servidor para saber
que ha habido un error.

Lo más común es mandar a traer una función de validación cuando el usuario hace clic en
el botón enviar. En esta función se comprueba que cada valor del formulario sea correcto.

Otra forma de validar es cuando el campo del formulario pierde el foco o ha sido
modificado. En ese momento se puede mandar a traer una función que valide un campo en
específico.

Tabla 3.6 Validaciones comunes

Validación

224
Programación del lado del cliente
 3.3. Estructuras de control

Campo obligatorio

Seleccionar un valor de una lista desplegable

Correo electrónico válido

Fecha válida o en un rango válido

El valor del campo esté en un rango válido

Que el campo se un valor válido (número entero o decimal)

Expresión regular

El código básico de validación podría ser el siguiente:

<form action="[Link]" method="POST" id="datos" name="datos"
onsubmit="return validaFormulario()">
...
</form>

Y la función sería la siguiente:

<script>
function validaFormulario() {
if (condición que debe cumplir el primer campo del formulario) {
// Si no se cumple la condición...
[Link]('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condición que debe cumplir el segundo campo del formulario) {
// Si no se cumple la condición...
[Link]('[ERROR] El campo debe tener un valor de...');
return false;
}
...
else if (condición que debe cumplir el último campo del formulario) {
// Si no se cumple la condición...
[Link]('[ERROR] El campo debe tener un valor de...');
return false;
}

// Si el script ha llegado a este punto, todas las condiciones

// se han cumplido, por lo que se devuelve el valor true

225
Programación del lado del cliente
 3.3. Estructuras de control

return true;
}
</script>

Si evento onsubmit devuelve TRUE, el formulario se envía normalmente, pero si devuelve

FALSE, no se envía.

Se recomienda poner el mensaje al lado o debajo del campo que no cumple la validación
para ayudar al usuario a identificar rápidamente la posición del error.

Tabla 3.7 Algunas validaciones comunes

Validación Código
valor = [Link]("campo").value;
Campo
if( valor == null || [Link] == 0 || /^\s+$/.test(valor)
obligatorio ) {
return false;
}
valor = [Link]("campo").value;
Valores
if( isNaN(valor) ) {
numéricos return false;
}
indice = [Link]("opciones").selectedIndex;
Seleccionar
if( indice == null || indice == 0 ) {
una opción return false;
Con la lista siguiente:
<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>

dato = [Link]("campo").value;
Correo
if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-
electrónico .]\w+)/.test(dato)) ) {
return false;
var anio = [Link]("anio").value;
Validar fecha
var mes = [Link]("mes").value;
var dia = [Link]("dia").value;
226
Programación del lado del cliente
 3.4. Manipulación de objetos

fecha = new Date(anio, mes, dia);

if( !isNaN(fecha) ) {
return false;
}

3.4. Manipulación de objetos

3.4.1 Representación de objetos

JavaScript tiene pocos tipos definidos y son: undefined, null, boolean, number y
string. Los elementos en JavaScript son objetos: las funciones, arreglos, expresiones
regulares y los propios objetos. En JavaScript un objeto es un contenedor de propiedades,
cada propiedad tiene nombre y valor. El nombre de una propiedad es una cadena de
caracteres, que puede ser vacía. Su valor puede ser cualquiera que se pueda asignar en
JavaScript, excepto undefined.

Los objetos en JavaScript, son sencillamente tablas hash: que constan de un grupo de
propiedades y funciones que se acceden a través de una clave. Las propiedades y métodos
(que son propiedades cuyo valor es una referencia a una función) de un objeto es posible
crearlos dinámicamente en tiempo de ejecución.

Para crear un objeto nuevo se usa la clase Object:

var objeto = new Object();
[Link] = "Mi valor";
[Link] = function() { [Link]("Hola a todos!"); }
Otra es usando la notación literal usando llaves:
var objeto = {};
[Link] = "Mi valor";
[Link] = function() { [Link]("Hola a todos!"); }

var objeto = {
"propiedad" : "bar",
"holaFuncion" : function() { [Link]("Hola a todos!"); }
};

227
Programación del lado del cliente
 3.4. Manipulación de objetos

Las comillas dobles alrededor del nombre de la propiedad son opcionales en caso de que
no sea una palabra reservada y sea un identificador legal de JavaScript. Por ejemplo "primer-
nombre", usa guión medio y no sería un identificador válido y son necesarias, pero
primer_nombre sí es un identificador válido y no necesita comillas dobles. También una
propiedad puede contener la definición de otro objeto:
var vuelo = {
aerolinea: "Airlines",
numero: 811,
partida: {
clave: "SID",
fechaHora: "2021-09-22 14:55",
ciudad: "Sidney"
},
llegada: {
clave: "LA",
fechaHora: "2021-09-23 10:42",
ciudad: "Los Angeles"
}
};
Se pueden añadir propiedades en tiempo de ejecución, indicando el nombre y su valor.
var Vuelo = {
aerolinea: "Airlines",
numero: 811,
partida: {
clave: "SID",
fechaHora: "2021-09-22 14:55",
ciudad: "Sidney"
},
llegada: {
clave: "LA",
fechaHora: "2021-09-23 10:42",
ciudad: "Los Angeles"
}
};

var vuelo new Vuelo();

[Link]="777";
[Link]="En tierra";
[Link] = function(){[Link]([Link]);}

228
Programación del lado del cliente
 3.4. Manipulación de objetos

3.4.2. Operaciones sobre objetos

[Link]. Acceso

Para acceder a los valores de un objeto se puede indicar el nombre de la propiedad dentro
de unos corchetes ([ ]), como si accediésemos a un elemento de un arreglo. En caso de que
el nombre de la propiedad sea un nombre legal de JavaScript, y no sea una palabra reservada,
se puede utilizar la notación de punto(.). <Se recomienda usar la notación punto(.), porque
es más corta y se usa comúnmente para acceder a métodos y propiedades en otros lenguajes
orientados a objetos:
vuelo["aerolinea"] // "Airlines"
[Link] // "SID"
En caso de que no exista la propiedad de devuelve el valor undefined. Se tienen dos
operadores para manejar undefined. Se usa || para obtener valores por defecto:
var nodefinida = nombre["apellidoMaterno"] || "(none)";
var estado = [Link] || "Desconocido"
El operador && se usa para cuando queremos evitar que se lance una excepción
TypeError:
[Link] // undefined
[Link] // TypeError: Cannot read property 'model' of undefined
[Link] && [Link] // undefined

[Link]. Modificación

Para actualizar el valor de un campo se utiliza la asignación:

[Link]="NY";
Si no existe entonces se agregará la propiedad al objeto.

[Link]. Eliminación

Se usa el operador delete para eliminar la propiedad de un objeto:

delete [Link];

229
Programación del lado del cliente
 3.4. Manipulación de objetos

[Link]. Paso por referencia

A diferencia de otros lenguajes de programación en JavaScript todos los objetos se acceden

por referencia, no se copia el valor cuando se asignan a otros objetos o cuando se pasan
objetos como parámetros en funciones. Esto significa que cualquier cambio que se haga en
ese objeto se reflejará en el ámbito externo de la llamada.
persona['nombre'] = 'Vania';
persona['apellido'] = 'Alonzo';
[Link] = 'Vany';
var x = persona;
[Link] = 'Vany';

// apodo contiene 'Vany' porque x y persona

// referencian al mismo objeto
var apodo = [Link];

// a, b, y c hacen referencia a
// diferentes objetos vacíos
var a = {}, b = {}, c = {};
// a, b, y c hacen referencia al
// mismo objeto vacío
a = b = c = {};
var objeto { value = 5 };
[Link]([Link]); // [Link] = 5

function cambia(objeto)
{
[Link] = 6;
}
cambia(objeto);
[Link]([Link]); // [Link] = 6

[Link]. Variables globales y locales

En JavaScript se crean variables globales de una forma sencilla, Sólo que se desaconseja
su uso porque las variables globales perjudican directamente la calidad de los programas, por
lo que hay que evitarlas en la medida de lo posible. Una forma adecuada de minimizar la
utilización de variables globales, es tener una única variable global para toda la aplicación,
que incluya el resto de variables.
230
Programación del lado del cliente
 3.4. Manipulación de objetos

Si una variable se declara fuera de cualquier función, automáticamente se transforma en

variable global independientemente de si se define utilizando la palabra reservada var o no.
Sin embargo, las variables definidas dentro de una función pueden ser globales o locales.

Si en el interior de una función, las variables se declaran mediante var se consideran

locales y las variables que no se han declarado mediante var, se transforman
automáticamente en variables globales.

Reduciendo el número de variables globales a uno, casi se elimina la posibilidad de

colisiones con otras aplicaciones, widgtes o librerías, y así, la aplicación puede leerse y
entenderse de manera más sencilla.

231
Programación del lado del cliente
 Competencias específicas y genéricas

Capítulo 4 Programación del lado del servidor

Competencias específicas y genéricas

Competencias específicas

Conoce y aplica un lenguaje de programación del lado del servidor, para la

construcción de aplicaciones web dinámicas, considerando su conectividad a
orígenes de datos

Competencias genéricas

Capacidad de análisis y síntesis.

Comunicación oral y escrita.

Habilidad para buscar, procesar y analizar información procedente de fuentes diversas.

Solución a problemas.

Capacidad de trabajar en equipo.

Capacidad de aplicar los conocimientos a la práctica.

Capacidad de aprender.

Temario detallado de la unidad

4.- Programación del lado del servidor

4.1. Introducción al lenguaje.

4.2. Estructuras de control.

4.3. Tratamiento de formularios.

4.4. Manejo de objetos del servidor.

4.5. Creación de clases

232
Programación del lado del servidor
 4.1. Introducción al lenguaje

4.6. Acceso a datos

4.1. Introducción al lenguaje

4.1.1. Introducción a las tecnologías de scripting del lado del

servidor
Un lenguaje de programación es un lenguaje utilizado como interfaz entre el programador
y la computadora y que instruye a una computadora para que realice una tarea determinada.

Los lenguajes de programación permiten crear aplicaciones personalizadas y añadir

funcionalidad que no forma parte de una aplicación. En Internet, los lenguajes de
programación permiten crear animaciones visuales, responder a acciones del usuario, validar
formularios, interactuar con bases de datos y ofrecer soluciones de comercio electrónico.

4.1.2. Algunos lenguajes de programación para web

[Link]. Java

Java es un programa potente, de código abierto, robusto y seguro basado en la web que
puede ejecutarse como un programa independiente o como un applet incrustado en un sitio
web. Servlets (controlador), JSP (vista), Java (modelo) crea aplicaciones basadas en la web
utilizando MVC (Modelo-Vista-Controlador). Para crear una aplicación web segura Java
tiene muchos marcos como Apache Struts Spring y web_application_frameworks .

[Link]. Perl

Perl fue introducido en 1987 (4 años antes que el propio Linux), cuando su autor, Larry
Wall, lanzó la versión 1.000 del mismo. La razón de su creación fue que Wall estaba
descontento por la funcionalidad que sed, C, awk y el Bourne Shell le ofrecían. Buscó un
lenguaje que combinara todas sus mejores características, y que a la vez tuviera el menor
número de desventajas propias.

233
Programación del lado del servidor
 4.1. Introducción al lenguaje

Desde entonces, perl ha tenido varias versiones, cada una de las cuales ha añadido
funciones adicionales, por ejemplo, referencias duras, módulos, objetos y alcance léxico.

Perl se hizo especialmente popular como lenguaje para escribir scripts del lado del
servidor para servidores web. Pero ese no es el único uso de Perl, ya que es comúnmente
utilizado para tareas de administración de sistemas, gestión de datos de bases de datos, así
como para escribir aplicaciones GUI.

[Link]. PHP

PHP es un acrónimo recursivo de Procesador de Hipertexto PHP. A diferencia de las otras

ofertas de la lista, está diseñado específicamente para la programación del lado del servidor,
lo que significa que su biblioteca está especializada en las tareas que se hacen una y otra vez
en el curso de la programación del sitio web. PHP también tiene la ventaja de poder entrelazar
el código con HTML, lo que le permite mezclar el diseño con la programación. Mientras que
esto puede simplificar la codificación para los sitios pequeños, tiene el potencial de que se
abuse de elllo, dificultando la gestión o el mantenimiento del código en proyectos de mayor
envergadura.

PHP está disponible para la mayoría de los sistemas operativos, incluidos Unix y
Windows, y es un excelente lenguaje de programación del lado del servidor para
programación profesional.

[Link]. CGI

Common Gateway Interface (CGI) es un estándar para que los servidores web tengan una
interfaz con programas ejecutables instalados en un servidor que generan páginas web de
forma dinámica. Estos programas se conocen como scripts CGI o o simplemente CGI; suelen
estar escritos en un lenguaje de scripting, pero pueden escrito en cualquier lenguaje de
programación.

El punto 4.1.2. fue resumido de (Ombeni & Thomas, 2016)

234
Programación del lado del servidor
 4.1. Introducción al lenguaje

4.1.3. Variables y tipos de datos

[Link] Etiquetas php

‘Cuando PHP analiza un archivo, busca las etiquetas de apertura y cierre, que son <?php
y ?>, y que indican a PHP dónde empezar y finalizar la interpretación del código. Este
mecanismo permite embeber a PHP en todo tipo de documentos, ya que todo lo que esté
fuera de las etiquetas de apertura y cierre de PHP será ignorado por el analizador.

Hay tres tipos de etiquetas disponibles en php:

1. Etiqueta normal(<?php ?>)

2. Etiqueta echo corta(<?= ?>)

3. Etiqueta corta(<? ?>). No siempre está disponible. Se recomienda usar la etiqueta

normal.

Evite dejar líneas vacías o espacios en blanco al principio de la etiqueta de apertura. Si lo

hace éstas no serán interpretadas, pero sí se regresarán en el flujo de salida del resultado, lo
que ocasionaría problemas cuando se regrese algún archivo PDF, hoja de Excel o algún
JSON.

Si un archivo contiene solamente código de PHP, es preferible omitir la etiqueta de cierre

de PHP al final del mismo. Así se previene la adición de espacios en blanco o nuevas líneas
accidentales después de la etiqueta de cierre, lo cual causaría efectos no deseados debido a
que PHP comenzará la salida del búfer cuando no había intención por parte del programador
de enviar ninguna salida en ese punto del script.
<?php
echo "Hola mundo";

// ... más código

echo "Última sentencia";

// el script finaliza aquí sin etiqueta de cierre de PHP

235
Programación del lado del servidor
 4.1. Introducción al lenguaje

[Link]. Salir de HTML

‘El texto que esté fuera de un par de etiquetas de apertura y cierre se ignora por el intérprete
de PHP, pero sí lo envía al flujo de salida, lo que permite que los ficheros de PHP tengan
contenido mixto. Esto hace que PHP pueda ser embebido en documentos HTML para, por
ejemplo, crear plantillas.
<p>Esto va a ser ignorado por PHP y mostrado por el navegador.</p>
<?php echo 'Mientras que esto va a ser interpretado.'; ?>
<p>Esto también será ignorado por PHP y mostrado por el navegador.</p>

Este ejemplo funciona como estaba previsto, porque cuando PHP intercepta las etiquetas
de apertura <?php y cierre ?>, e interpreta todo el código que encuentre (a excepción de una
nueva línea inmediatamente después;) hasta que dé con otra etiqueta de apertura a menos que
se encuentre en mitad de una sentencia condicional, en cuyo caso el intérprete determinará
el resultado de la condición antes de tomar una decisión de qué es lo que tiene que saltar.
<?php if ($expresión == true): ?>
<p>Esto se mostrará si la expresión es verdadera.</p>
<?php else: ?>
<p>En caso contrario se mostrará esto.</p>
<?php endif; ?>
En este ejemplo, PHP saltará los bloques donde la condición no se cumpla, incluso si están
fuera de las etiquetas de apertura/cierre de PHP, los saltará según la condición debido a que
el intérprete salta los bloques contenidos dentro de una condición que no se cumpla. La regla
también se aplica para otras estructuras como las repetitivas.

Para imprimir bloques de texto grandes, es más eficiente abandonar el modo intérprete de
PHP que enviar todo el texto a través de echo o print.

[Link]. Tipos de datos

‘PHP es un lenguaje que no está orientado a tipos. Sin embargo, en la siguiente tabla se
resumen los tipos más importantes que se manejan dinámicamente en el lenguaje.

Tabla 4.1 Tipos básicos de php

Tipo Descripción

236
Programación del lado del servidor
 4.1. Introducción al lenguaje

Int Abreviatura de entero. Contiene cualquier número entero, es decir, un

valor numérico entero entero (sin decimales), pero si a un int se le asigna
un número con un decimal, se convertirá automáticamente en un
flotador).

Float Abreviatura de valor de punto flotante. Contiene cualquier entero con un

decimal, con una determinada precisión (generalmente 32 dígitos).

Double Abreviatura de punto flotante de doble precisión. Es lo mismo que float.

String Contiene cualquier arreglo de caracteres. Generalmente tiene una

longitud infinita; sin embargo, por compatibilidad con servidores
antiguos, se limita el tamaño de las cadenas a 32768 caracteres. Las
cadenas están rodeadas de comillas simples o comillas dobles cuando se
usan en PHP.

Boolean Puede ser verdadero o falso, muchas funciones devuelven verdadero o

falso

Los enteros. Se especifican usando notación decimal (base 10), hexadecimal (base 16),
octal (base 8) o binaria (base 2), pueden ir precedidos por un signo (- o +).

Para la notación octal, se antepone al número un 0 (cero). Para la notación hexadecimal,

se antepone al número 0x. Para la notación binaria, se antepone al número 0b.
<?php
$a = 1234; // número decimal
$a = -123; // un número negativo
$a = 0123; // número octal (equivale a 83 decimal)
$a = 0x1A; // número hexadecimal (equivale a 26 decimal)
$a = 0b11111111; // número binario (equivale al 255 decimal)
?>
El tamaño de un integer va a depender de la plataforma, pero el valor más común es un
máximo de aproximadamente 2,147,483,648 (esto es, 232-1 bits con signo). Las plataformas
de 64 bits normalmente tienen un valor máximo de aproximadamente 9E18 (264-1). PHP no
soporta el tipo integer sin signo. El tamaño de un integer se puede determinar mediante un

237
Programación del lado del servidor
 4.1. Introducción al lenguaje

valor constante denominado PHP_INT_SIZE, y el valor máximo con PHP_INT_MAX y el

mínimo con PHP_INT_MIN.

Si PHP calcula o encuentra un número fuera de los límites de un integer, se interpretará

en su lugar como un valor de tipo float. También, el resultado de una operación que sea un
número fuera de los límites de un integer devolverá un valor de tipo float para evitar pérdidas.

Los números de punto flotante (también conocidos como "de coma flotante" en español,
y "floats" en inglés) pueden ser especificados usando cualquiera de las siguientes sintaxis:
<?php
$a = 1.234;
$b = 1.2e3;
$c = 7E-10;
$d = 1_234.567; // a partir de PHP 7.4.0
?>
El tamaño de un número de punto flotante depende de la plataforma, aunque un valor
común consiste en un máximo de aproximadamente 1.8e308 con una precisión cercana a los
14 dígitos decimales (el formato de 64 bit del IEEE).

‘Los números de punto flotante tienen una precisión limitada. Aunque depende del
sistema, PHP típicamente utiliza el formato de doble precisión IEEE 754, el cual dará un
error relativo máximo por aproximación del orden de 1.11e-16. Las operaciones aritméticas
elementales no podrán generar grandes errores y, por supuesto, se han de considerar los
errores por propagación al componer varias operaciones.

Adicionalmente, los números racionales que son representables exactamente como

números de punto flotante en base 10, como 0.1 o 0.7, no tienen una representación exacta
como números de punto flotante en base 2, que es la base empleada internamente, sin
importar el tamaño de la mantisa. Por lo tanto, no se pueden convertir en sus equivalentes
binarios internos sin una pequeña pérdida de precisión. Esto puede conducir a resultados
confusos: Por ejemplo, floor((0.1+0.7)*10) usualmente devolverá 7 en lugar del 8 previsto,
ya que la representación interna será algo así como 7.9999999999999991118....

Por tanto, nunca se ha de confiar en resultados de números flotantes hasta el último dígito,
y no comparar la igualdad de números de punto flotante directamente. Si fuera necesaria una

238
Programación del lado del servidor
 4.1. Introducción al lenguaje

mayor precisión, están disponibles las funciones matemáticas de precisión arbitraria y las
funciones de gmp.

Un string, o cadena, es una serie de caracteres donde cada carácter es lo mismo que un
byte. Esto significa que PHP solo admite un conjunto de 256 caracteres, y de ahí que no
ofrezca soporte nativo para Unicode.

Entrecomillado simple. La manera más sencilla de especificar un string es delimitarlo

con comillas simples (el carácter ').

Para especificar una comilla simple literal, es necesario escapar el carácter con una barra
invertida (\). Para una barra invertida literal, se duplica (\\). Todas las demás instancias de
barras invertidas serán tratadas como una barra invertida literal: esto significa que otras
secuencias de escape que podrían utilizarse, tales como \r o \n, serán mostradas literalmente
tal y como se especifican, en lugar de tener cualquier otro significado especial.

Nota: A diferencia de las sintaxis de entrecomillado doble y heredoc, las variables y las
sentencias de escape para caracteres especiales no se expandirán cuando estén incluidas
dentro de un string entre comillas simples.
<?php
echo 'Esto es una cadena sencilla';

echo 'También se pueden incluir nuevas líneas en

un string de esta forma, ya que es
correcto hacerlo así';

// Resultado: Arnold una vez dijo: "I'll be back"

echo 'Arnold una vez dijo: "I\'ll be back"';

// Resultado: Ha borrado C:\*.*?

echo 'Ha borrado C:\\*.*?';

// Resultado: Ha borrado C:\*.*?

echo 'Ha borrado C:\*.*?';

// Resultado: Esto no se expandirá: \n una nueva línea

echo 'Esto no se expandirá: \n una nueva línea';

// Resultado: Las variables $tampoco se $expandirán

echo 'Las variables $tampoco se $expandirán';
?>

239
Programación del lado del servidor
 4.1. Introducción al lenguaje

Entrecomillado doble. Si un string está delimitado con comillas dobles ("), PHP
interpretará las siguientes secuencias de escape como caracteres especiales:

Secuencia Significado

\n Avance de línea (LF o 0x0A (10) en ASCII)

\r Retorno de carro (CR o 0x0D (13) en ASCII)

\v Tabulador horizontal (HT o 0x09 (9) en ASCII)

\e Escape (ESC o 0x1B (27) en ASCII

\f Avance de página (FF o 0x0C (12) en ASCII)

\\ barra invertida

\$ signo de dólar

\" comillas dobles

‘Cuando un string es especificado mediante comillas dobles o mediante heredoc, las

variables que haya dentro de dicho string se analizarán.

Existen dos tipos de sintaxis: una simple y otra compleja. La sintaxis simple es la más
empleada y práctica. Proporciona una forma de embeber una variable, un valor de un array o
una propiedad de un object dentro de un string con el mínimo esfuerzo.

La sintaxis compleja puede ser reconocida por las llaves que delimitan la expresión.

Sintaxis simple. Si se encuentra un signo de dólar ($), el analizador tomará el mayor

número de símbolos para formar un nombre de variable válido. Delimitar el nombre de la
variable con llaves permite especificar explícitamente el final del nombre.
<?php
$jugo = "manzana";

echo "Él tomó algo de jugo de $jugo.".PHP_EOL;

// Inválido. "s" es un carácter válido para un nombre de variable, pero l
a variable es $jugo.
echo "Él tomó algo de jugo hecho de $jugos.";
// Válido. Explícitamente especifica el final del nombre de la variable e
ncerrándolo entre llaves:
echo "Él tomó algo de jugo hecho de ${jugo}s."
?>
240
Programación del lado del servidor
 4.1. Introducción al lenguaje

Sintaxis compleja (llaves). Esta sintaxis no se llama compleja porque sea compleja, sino
porque permite el empleo de expresiones complejas.

Cualquier variable escalar, elemento de array o propiedad de objeto con una

representación de tipo string puede ser incluido a través de esta sintaxis. Simplemente se
escribe la expresión del mismo modo en que aparecería por fuera del string, y delimitándola
con { y }. Dado que { no puede ser escapado, esta sintaxis será reconocida únicamente cuando
el $ siga inmediatamente al {. Utilice {\$ para obtener un {$ literal. Algunos ejemplos para
que quede más claro:
<?php
// Mostrar todos los errores
error_reporting(E_ALL);

$genial = 'fantástico';

// No funciona, muestra: Esto es { fantástico}

echo "Esto es { $genial}";

// Funciona, muestra: Esto es fantástico

echo "Esto es {$genial}";

// Funciona
echo "Este cuadrado tiene {$cuadrado->width}00 centímetros de lado.";

// Funciona, las claves entre comillas sólo funcionan usando la sintaxis

de llaves
echo "Esto funciona: {$arr['clave']}";

// Funciona
echo "Esto funciona: {$arr[4][3]}";

// Esto no funciona por la misma razón que $foo[bar] es incorrecto fuera

de un string.
// En otras palabras, aún funcionaría, pero solamente porque PHP primero
busca una
// constante llamada foo; se emitirá un error de nivel E_NOTICE
// (constante no definida).
echo "Esto está mal: {$arr[foo][3]}";

// Funciona. Cuando se usan arrays multidimensionales, emplee siempre lla

ves que delimiten
// a los arrays cuando se encuentre dentro de un string
echo "Esto funciona: {$arr['foo'][3]}";

// Funciona.
echo "Esto funciona: " . $arr['foo'][3];

241
Programación del lado del servidor
 4.1. Introducción al lenguaje

echo "Esto también funciona: {$obj->valores[3]->nombre}";

echo "Este es el valor de la variable llamada $nombre: {${$nombre}}";

echo "Este es el valor de la variable llamada por el valor devuelto por g

etNombre(): {${getNombre()}}";

echo "Este es el valor de la variable llamada por el valor devuelto por \

$objeto->getNombre(): {${$objeto->getNombre()}}";

//No funciona, muestra: Esto es el valor devuelto por getNombre(): {getNo

mbre()}
echo "Esto es el valor devuelto por getNombre(): {getNombre()}";
?>
Acceso a string y modificacion por caracteres. Se puede acceder y modificar los
caracteres dentro de un string especificando el índice de base cero del carácter deseado
después del string empleando los corchetes de array, como en $str[42]. Piense en un string
como un array de caracteres, en este caso. Las funciones substr() y substr_replace() pueden
ser empleadas para extraer o reemplazar más de un carácter.
<?php
// Obtener el primer carácter de un string
$str = 'Esto es una prueba.';
$primero = $str[0];

// Obtener el tercer carácter de un string

$tercero = $str[2];

// Obtener el último carácter de un string

$str = 'Esto sigue siendo una prueba.';
$último = $str[strlen($str)-1];

// Modificar el último carácter de un string

$str = 'Mira el mar';
$str[strlen($str)-1] = 'l';

?>
Funciones y operadores útiles. Los string pueden ser concatenados empleando el
operador '.' (punto). Fíjese que el operador '+' (suma) no servirá para concatenar.

Hay una serie de funciones útiles para la manipulación de string. Finalmente, también
existen las funciones para el tipo carácter.

Conversión a string. Un valor puede convertirse a un string empleando el molde (string)

o mediante la función strval(). La conversión automática a string tiene lugar en el ámbito de

242
Programación del lado del servidor
 4.1. Introducción al lenguaje

una expresión donde sea necesario un string. Esto ocurre cuando se utilizan las funciones
echo o print, o cuando se compara una variable con un string.

El valor true del tipo boolean es convertido al string "1". El valor false del tipo boolean es
convertido al string "" (el string vacío). Esto permite la conversión en ambos sentidos entre
los valores de los tipos boolean y string.

Un integer o float es convertido a un string que representa textualmente el número

(incluyendo la parte exponencial para los float. Los números de punto flotante pueden ser
convertidos mediante la notación exponencial (4.1E+6).

la conversión directa de un array, object o resource a un string no proporciona información

útil acerca del valor más allá de su tipo. Use las funciones print_r() y var_dump() para ver
medios más efectivos de inspeccionar el contenido de estos tipos.

La mayoría de los valores de PHP pueden ser convertidos a un string para su

almacenamiento permanente. Este método se denomina serialización, y es realizado mediante
la función serialize().

Conversión de string a números. Cuando un string es evaluado en un contexto numérico,

el valor resultante y el tipo se determina como se explica a continuación.

Si el string no contiene ninguno de los caracteres '.', 'e', o 'E', y el valor numérico está entre
los límites del tipo integer (tal como está definido por PHP_INT_MAX), el string será
evaluado como un integer. En todos los demás casos será evaluado como un float.

El valor es dado por la parte inicial del string. Si el string empieza con un dato numérico
válido, éste será el valor empleado. De lo contrario, el valor será 0 (cero). Un dato numérico
válido es un signo opcional, seguido de uno o más dígitos (opcionalmente puede contener un
punto decimal), seguido de un exponente opcional. El exponente es una 'e' o 'E' seguida de
uno o más dígitos.
<?php
$foo = 1 + "10.5"; // $foo es float (11.5)
$foo = 1 + "-1.3e3"; // $foo es float (-1299)
$foo = 1 + "bob-1.3e3"; // $foo es integer (1)
$foo = 1 + "bob3"; // $foo es integer (1)
$foo = 1 + "10 pequeños cerdos"; // $foo es integer (11)
$foo = 4 + "10.2 pequeños cerditos"; // $foo es float (14.2)
243
Programación del lado del servidor
 4.1. Introducción al lenguaje

$foo = "10.0 cerdos " + 1; // $foo es float (11)

$foo = "10.0 cerdos " + 1.0; // $foo es float (11)
?>

PHP Maneja también cuatro tipos compuestos.

Tabla 4.2 Tipos compuestos de php 7

Tipo Descripción

array Un mapa ordenado que asocia valores con claves. Un valor también puede ser
otro array o un objeto. Es la base para lista (vector), tabla asociativa (tabla hash
- una implementación de un mapa -), diccionario, colección, pila, cola y otras.

object Clase para crear un objeto genérico

callable Las llamadas de retorno, o retrollamadas, se pueden indicar con la declaración

de tipo callable. Significa que una variable tiene una referencia a función

iterable es un seudotipo que acepta cualquier array u objeto que implemente la interfaz
traversable y se puede recorrer con un foreach. Por lo tanto, acepta variables
tipo array o traversable

El tipo de una variable usualmente no lo declara el programador; al contrario, es decidido

en tiempo de ejecución por PHP dependiendo del contexto en el que se emplea dicha variable.

Para comprobar el tipo y el valor de una expresión, utilice la función var_dump(). Para
obtener una representación legible por humanos de un tipo con propósitos de depuración, use
la función gettype(). Para comprobar un cierto tipo, no emplee gettype(), si no las funciones
is_tipo. Algunos ejemplos:
<?php
$un_bool = TRUE; // un valor booleano
$un_str = "foo"; // una cadena de caracteres
$un_str2 = 'foo'; // una cadena de caracteres
$un_int = 12; // un número entero

echo gettype($un_bool); // imprime: boolean

echo gettype($un_str); // imprime: string

// Si este valor es un entero, incrementarlo en cuatro

if (is_int($un_int)) {
$un_int += 4;
}
244
Programación del lado del servidor
 4.1. Introducción al lenguaje

// Si $un_bool es una cadena, imprimirla

// (no imprime nada)
if (is_string($un_bool)) {
echo "Cadena: $un_bool";
}
?>

[Link]. Declaración de variables

‘En PHP no es necesario declarar el tipo de la variable. Por supuesto, el entorno de

ejecución de PHP reconoce durante la ejecución de esta línea que el programador
proporcionó un literal de cadena como valor para la variable.

En PHP las variables se representan con un signo de dólar seguido por el nombre de la
variable. El nombre de la variable es sensible a minúsculas y mayúsculas.

Los nombres de variables siguen las mismas reglas que otras etiquetas en PHP. Un nombre
de variable válido tiene que empezar con una letra o un carácter de subrayado (underscore),
seguido de cualquier número de letras, números y caracteres de subrayado. Como expresión
regular se podría expresar como: '[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*'
<?php
$var = 'Roberto';
$Var = 'Juan';
echo "$var, $Var"; // imprime "Roberto, Juan"

$4site = 'aun no'; // inválido; comienza con un número

$_4site = 'aun no'; // válido; comienza con un carácter de subrayado
$täyte = 'mansikka'; // válido; 'ä' es ASCII (Extendido) 228
?>
Observar que la variable empieza con un símbolo de $.

De forma predeterminada, las variables siempre se asignan por valor. Esto significa que
cuando se asigna una expresión a una variable, el valor completo de la expresión original se
copia en la variable de destino. Esto quiere decir que, por ejemplo, después de asignar el
valor de una variable a otra, los cambios que se efectúen a una de esas variables no afectará
a la otra. Para más información sobre este tipo de asignación, vea Expresiones.

PHP también ofrece otra forma de asignar valores a las variables: asignar por referencia.
Esto significa que la nueva variable simplemente referencia (en otras palabras, "se convierte

245
Programación del lado del servidor
 4.1. Introducción al lenguaje

en un alias de" o "apunta a") la variable original. Los cambios a la nueva variable afectan a
la original, y viceversa.

Para asignar por referencia, simplemente se antepone un signo ampersand (&) al comienzo
de la variable cuyo valor se está asignando (la variable fuente). Por ejemplo, el siguiente
segmento de código produce la salida 'Mi nombre es Nico' dos veces:
<?php
$foo = 'Nico'; // Asigna el valor 'Bob' a $foo
$bar = &$foo; // Referenciar $foo vía $bar.
$bar = "Mi nombre es $bar"; // Modifica $bar...
echo $bar;
echo $foo; // $foo también se modifica.
?>
No es necesario inicializar variables en PHP, sin embargo, es una muy buena práctica. Las
variables no inicializadas tienen un valor predeterminado de acuerdo a su tipo dependiendo
del contexto en el que son usadas - las booleanas se asumen como false, los enteros y
flotantes como cero, las cadenas ([Link]. usadas en echo) se establecen como una cadena vacía
y los arrays se convierten en un array vacío.

Depender del valor predeterminado de una variable sin inicializar es problemático al

incluir un archivo en otro que use el mismo nombre de variable. Un error de nivel E_NOTICE
es emitido cuendo se trabaja con variables sin inicializar, con la excepción del caso en el que
se anexan elementos a un array no inicializado. La construcción del lenguaje isset() puede
ser usada para detectar si una variable ya ha sido inicializada.

[Link]. Ámbito de las variables

‘El ámbito de una variable es el contexto dentro del que la variable está definida. La mayor
parte de las variables PHP sólo tienen un ámbito simple. Este ámbito simple también abarca
los ficheros incluídos y los requeridos. Por ejemplo:
<?php
$a = 1;
include '[Link]';
?>
Aquí, la variable $a estará disponible al interior del script incluido [Link]. Sin embargo, al
interior de las funciones definidas por el usuario se introduce un ámbito local a la función.

246
Programación del lado del servidor
 4.1. Introducción al lenguaje

Cualquier variable usada dentro de una función está, por omisión, limitada al ámbito local de
la función. Por ejemplo:
<?php
$a = 1; /* ámbito global */

function test()
{
echo $a; /* referencia a una variable del ámbito local */
}

test();
?>
Este script no producirá salida, ya que la sentencia echo utiliza una versión local de la
variable $a, a la que no se ha asignado ningún valor en su ámbito. Puede que usted note que
hay una pequeña diferencia con el lenguaje C, en el que las variables globales están
disponibles automáticamente dentro de la función a menos que sean expresamente
sobreescritas por una definición local. Esto puede causar algunos problemas, ya que la gente
puede cambiar variables globales inadvertidamente. En PHP, las variables globales deben ser
declaradas globales dentro de la función si van a ser utilizadas dentro de dicha función.

La palabra clave global. En primer lugar, un ejemplo de uso de global:

<?php
$a = 1;
$b = 2;

function Suma()
{
global $a, $b;

$b = $a + $b;
}

Suma();
echo $b;
?>
El script anterior producirá la salida 3. Al declarar $a y $b globales dentro de la función,
todas las referencias a tales variables se referirán a la versión global. No hay límite al número
de variables globales que se pueden manipular dentro de una función.

Un segundo método para acceder a las variables desde un ámbito global es usando el array
$GLOBALS. El ejemplo anterior se puede reescribir así:

247
Programación del lado del servidor
 4.1. Introducción al lenguaje

<?php
$a = 1;
$b = 2;

function Suma()
{
$GLOBALS['b'] = $GLOBALS['a'] + $GLOBALS['b'];
}

Suma();
echo $b;
?>
Uso de variables static. Otra característica importante del ámbito de las variables es la
variable estática. Una variable estática existe sólo en el ámbito local de la función, pero no
pierde su valor cuando la ejecución del programa abandona este ámbito. Consideremos el
siguiente ejemplo:
<?php
function test()
{
$a = 0;
echo $a;
$a++;
}
?>

Esta función tiene poca utilidad ya que cada vez que es llamada asigna a $a el valor 0 e
imprime un 0. La sentencia $a++, que incrementa la variable, no sirve para nada, ya que en
cuanto la función finaliza, la variable $a desaparece. Para hacer una función útil para contar,
que no pierda la pista del valor actual del conteo, la variable $a debe declararse como estática:
<?php
function test()
{
static $a = 0;
echo $a;
$a++;
}
?>

Ahora, $a se inicializa únicamente en la primera llamada a la función, y cada vez que la

función test() es llamada, imprimirá el valor de $a y lo incrementa.

248
Programación del lado del servidor
 4.1. Introducción al lenguaje

[Link]. Variables variables

‘A veces es conveniente tener nombres de variables variables. Dicho de otro modo, son
nombres de variables que se pueden definir y usar dinámicamente. Una variable normal se
establece con una sentencia como:
<?php
$a = 'hola';
?>

Una variable variable toma el valor de una variable y lo trata como el nombre de una
variable. En el ejemplo anterior, hola, se puede usar como el nombre de una variable
utilizando dos signos de dólar. Es decir:
<?php
$$a = 'mundo';
?>

En este momento se han definido y almacenado dos variables en el árbol de símbolos de

PHP: $a, que contiene "hola", y $hola, que contiene "mundo". Es más, esta sentencia:
<?php
echo "$a ${$a}";
?>

produce el mismo resultado que:

<?php
echo "$a $hola";
?>

Esto quiere decir que ambas producen el resultado: hola mundo.

Para usar variables variables con arrays hay que resolver un problema de ambigüedad. Si
se escribe $$a[1], el intérprete necesita saber si nos referimos a utilizar $a[1] como una
variable, o si se pretendía utilizar $$a como variable y el índice [1] como índice de dicha
variable. La sintaxis para resolver esta ambigüedad es: ${$a[1]} para el primer caso y
${$a}[1] para el segundo.

También se puede acceder a las propiedades de una clase usando el nombre de propiedad
variable. Este será resuelto dentro del ámbito del cual se hizo la llamada. Por ejemplo, en la

249
Programación del lado del servidor
 4.1. Introducción al lenguaje

expresión $foo->$bar, se buscará $bar en el ámibto local y se empleará su valor será como
el nombre de la propiedad de $foo. Esto también es cierto si $bar es un acceso a un array.

También se pueden usar llaves para delimitar de forma clara el nombre de la propiedad.
Son muy útiles al acceder a valores dentro una propiedad que contiene un array, cuando el
nombre de la propiedad está compuesto de múltiples partes, o cuando el nombre de la
propiedad contiene caracteres que de otro modo no son válidos ([Link]. desde json_decode() o
SimpleXML).
<?php
class foo {
var $bar = 'Soy bar.';
var $arr = array('Soy A.', 'Soy B.', 'Soy C.');
var $r = 'Soy r.';
}

$foo = new foo();

$bar = 'bar';
$baz = array('foo', 'bar', 'baz', 'quux');
echo $foo->$bar . "\n";
echo $foo->{$baz[1]} . "\n";

$start = 'b';
$end = 'ar';
echo $foo->{$start . $end} . "\n";

$arr = 'arr';
echo $foo->$arr[1] . "\n";
echo $foo->{$arr[1]} . "\n";

?>

[Link]. Variables desde fuentes externas

‘Formularios HTML (GET y POST). Cuando se envía un formulario a un script de PHP,

la información de dicho formulario pasa a estar automáticamente disponible en el script.
Existen algunas formas de acceder a esta información, por ejemplo:
<form action="[Link]" method="post">
Nombre usuario: <input type="text" name="username" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" name="submit" value="¡Enviarme!" />
</form

250
Programación del lado del servidor
 4.1. Introducción al lenguaje

El script que recibe el formulario:

<?php
echo $_POST['username'];
echo $_REQUEST['username'];
?>
Para variables tipo GET se cambia en el formulario el método de envío (method="get") y
en el script se usa echo $_GET['username']; o echo $_REQUEST['username'];
También se pueden recibir arreglos:
<?php
if ($_POST) {
echo '<pre>';
echo htmlspecialchars(print_r($_POST, true));
echo '</pre>';
}
?>
<form action="" method="post">
Nombre: <input type="text" name="personal[nombre]" /><br />
Email: <input type="text" name="personal[email]" /><br />
Cerveza: <br />
<select multiple name="cerveza[]">
<option value="warthog">Warthog</option>
<option value="guinness">Guinness</option>
<option value="stuttgarter">Stuttgarter Schwabenbräu</option>
</select><br />
<input type="submit" value="¡enviarme!" />
</form>
Cookies HTTP. PHP soporta cookies de HTTP de forma transparente tal y como están
definidas en RFC 6265. Las cookies son un mecanismo para almacenar datos en el navegador
y así rastrear o identificar a usuarios que vuelven. Se pueden crear cookies usando la función
setcookie(). Las cookies son parte de la cabecera HTTP, así que se debe llamar a la función
SetCookie antes de que se envíe cualquier salida al navegador. Es la misma restricción que
para la función header(). Los datos de una cookie están disponibles en el array de datos de la
cookies apropiada, tal como $_COOKIE y $_REQUEST. Si se quieren asignar múltiples
valores a una sola cookie, basta con asignarlo como un array. Por ejemplo:
<?php
setcookie("MiCookie[foo]", 'Prueba 1', time()+3600);
setcookie("MiCookie[bar]", 'Prueba 2', time()+3600);
?>

251
Programación del lado del servidor
 4.1. Introducción al lenguaje

Esto creará dos cookies separadas, aunque MiCookie será un array simple en el script. Si
se quiere definir una sola cookie con valores múltiples, considere el uso de la función
serialize() o explode() primero en el valor.

Nótese que una cookie reemplazará a una cookie anterior que tuviese el mismo nombre
en el navegador a menos que la ruta o el dominio fuesen diferentes.

4.1.4. Expresiones
‘Las expresiones son los bloques de construcción más importantes de PHP. En PHP casi
todo lo que se escribe es una expresión.

Las formas más básicas de expresiones son las constantes y las variables. Cuando se
escribe "$a = 5", se está asignando '5' a $a. '5', obviamente, tiene el valor 5, o en otras
palabras, '5' es una expresión con el valor de 5 (en este caso, '5' es una constante entera).

Después de esta asignación, se espera que el valor de $a sea 5 también, por lo que si se
escribe $b = $a, se espera que esto se comporte tal como si se escribiera $b = 5. En otras
palabras, $a es también una expresión con el valor 5. Si todo funciona bien, esto es
exactamente lo que sucederá.

PHP es un lenguaje orientado a expresiones, en el sentido de que casi todo es una

expresión.

Un tipo de expresiones muy comunes son las expresiones de comparación. Estas

expresiones evalúan si algo es false (falso) o true (verdadero). PHP soporta > (mayor que),
>= (mayor o igual que), == (igual), != (distinto), < (menor que) y <= (menor o igual que). El
lenguaje también soporta un conjunto de operadores de equivalencia estricta: === (igual y
del mismo tipo) y !== (diferente o de distinto tipo). Estas expresiones se usan mayormente
dentro de ejecuciones condicionales, tales como la sentencia if.

Existe una expresión más que le puede parecer rara si no la ha visto en otros lenguajes, el
operador condicional ternario:
<?php
$primero ? $segundo : $tercero
?>

252
Programación del lado del servidor
 4.1. Introducción al lenguaje

Si el valor de la primera subexpresión es true (no es cero), se evalúa la segunda

subexpresión, y ése será el resultado de la expresión condicional. Si no, se evalúa la tercera
subexpresión, y ése será el valor.

4.1.5. Operadores
‘Un operador es algo que toma uno más valores (o expresiones, en la jerga de
programación) y produce otro valor (de modo que la construcción en si misma se convierte
en una expresión).

Los operadores se pueden agrupar de acuerdo con el número de valores que toman. Los
operadores unarios toman sólo un valor, por ejemplo ! (el operador lógico de negación) o ++
(el operador de incremento). Los operadores binarios toman dos valores, como los familiares
operadores aritméticos + (suma) y - (resta), y la mayoría de los operadores de PHP entran en
esta categoría. Finalmente, hay sólo un operador ternario, ? :, el cual toma tres valores;
usualmente a este se le refiere simplemente como "el operador ternario" (aunque podría tal
vez llamarse más correctamente como el operador condicional).

La precedencia de un operador indica qué tan "estrechamente" se unen dos expresiones

juntas. Por ejemplo, en la expresión 1 + 5 * 3, la respuesta es 16 y no 18 porque el operador
de multiplicación ("*") tiene una precedencia mayor que el operador de adición ("+"). Los
paréntesis pueden ser usados para forzar la precedencia, si es necesario. Por ejemplo: (1 + 5)
* 3 se evalúa como 18.

Cuando los operadores tienen igual precedencia su asociatividad decide cómo se agrupan.
Por ejemplo "-" tiene asociatividad a izquierda, así 1 - 2 - 3 se agrupa como (1 - 2) - 3 y se
evalúa a -4. "=", por otra parte, tiene asociatividad a derecha, así $a = $b = $c se agrupa como
$a = ($b = $c).

Los operadores de igual precedencia que no son asociativos no pueden usarse unos junto
a otros, por ejemplo, 1 < 2 > 1 es ilegal en PHP. La expresión 1 <= 1 == 1, por otro lado, es
legal, ya que el operador == tiene menos precedencia que el operador <=.

253
Programación del lado del servidor
 4.1. Introducción al lenguaje

El uso de paréntesis, incluso cuando no es estrictamente necesario, a menudo puede

aumentar la legibilidad del código haciendo grupos explícitamente en lugar de confiar en la
precedencia y asociatividad implícitas del operador.

La siguiente tabla enumera los operadores en orden de precedencia, con los de más alta
precedencia al inicio. Los operadores en la misma línea tienen igual precedencia, en cuyo
caso la asociatividad decide el agrupamiento.

Tabla 4.3 Precedencia de operadores

Asociatividad Operadores Otra información

Izquierda clone new

Izquierda [ array

Izquierda ** aritmética

Izquierda ++ -- ~ (int) (float) (string) Tipos

(array) (object) (bool) @
incremento/decremento

Izquierda instanceof tipos

Derecha ! Lógico

Izquierda */% Aritmética

Izquierda +-. Aritmética y string

Izquierda << >> Bit a bit

No asociativo < <= > >= Comparación

No asociativo == != === !== <> <=> Comparación

Izquierda & Bit a bit y referencias

Izquierda ^ Bit a bit

Izquierda | Bit a bit

Izquierda && Lógico

254
Programación del lado del servidor
 4.2. Estructuras de control

Izquierda || Lógico

Derecha ?? Comparación

Izquierda ? : Ternario

Derecha = += -= *= **= /= .= %= &= |= ^= <<= >>= Asignación

Izquierda and Lógico

Izquierda Xor Lógico

Izquierda or Lógico

La precedencia y asociatividad de los operadores solamente determinan cómo se agrupan

las expresiones, no especifican un orden de evaluación. PHP no especifica (en general) el
orden en que se evalúa una expresión y se debería evitar el código que se asume un orden
específico de evaluación, ya que el comportamiento puede cambiar entre versiones de PHP
o dependiendo de código circundante. Todo el punto 4.1. fue extraido de (The PHP Group,
2021)

4.2. Estructuras de control

‘Todo script PHP está construido según una serie de sentencias. Una sentencia puede ser
una asignación, una llamada de función, un ciclo, una sentencia condicional o incluso una
sentencia que no hace nada (una sentencia vacía). Las sentencias generalmente finalizan con
un punto y coma. Adicionalmente, las sentencias pueden agruparse en un conjunto de
sentencias, encapsulándolas entre corchetes. Un grupo de sentencias es una sentencia por sí
misma también.

4.2.1 Sentencia IF
‘El constructor if es una de las características más importantes de muchos lenguajes,
incluido PHP. Permite la ejecución condicional de fragmentos de código. la expresión es
evaluada a su valor booleano. Si la expresión se evalúa como true, PHP ejecutará la
sentencia y si se evalúa como false la ignorará.
255
Programación del lado del servidor
 4.2. Estructuras de control

<?php
if ($a > $b) {
echo "a es mayor que b";
}
?>

Las sentencias if pueden anidarse dentro de otras sentencias if infinitamente, lo cual

provee completa flexibilidad para la ejecución condicional de diferentes partes del programa.

Con frecuencia se desea ejecutar una sentencia si una determinada condición se cumple y
una sentencia diferente si la condición no se cumple. Esto es para lo que sirve else. El else
extiende una sentencia if para ejecutar una sentencia en caso que la expresión en la sentencia
if se evalúe como false. Por ejemplo, el siguiente código deberá mostrar a es mayor que b
si $a es mayor que $b y a NO es mayor que b en el caso contrario:
<?php
if ($a > $b) {
echo "a es mayor que b";
} else {
echo "a NO es mayor que b";
}
?>
La sentencia else sólo es ejecutada si la expresión if es evaluada como false y si hay
algunas expresiones elseif - sólo se ejecuta si también todas son evaluadas como false
<?php
if ($a > $b) {
echo "a es mayor que b";
} elseif ($a == $b) {
echo "a es igual que b";
} else {
echo "a es menor que b";
}
?>

Puede haber varios elseif dentro de la misma sentencia if. La primera expresión elseif
(si hay alguna) que se evalúe como true sería ejecutada. En PHP también se puede escribir
'else if' (en dos palabras) y el comportamiento sería idéntico al de 'elseif' (en una sola palabra).
El significado sintáctico es ligeramente diferente, pero la conclusión es que ambos resultarían
tener exactamente el mismo comportamiento.

La sentencia elseif es ejecutada solamente si la expresión if precedente y cualquiera de

las expresiones elseif precedentes son evaluadas como false, y la expresión elseif actual
se evalúa como true.
256
Programación del lado del servidor
 4.2. Estructuras de control

PHP ofrece una sintaxis alternativa para algunas de sus estructuras de control, a saber: if,
while, for, foreach, y switch. En cada caso, la forma básica de la sintaxis alternativa es
cambiar la llave de apertura por dos puntos (:) y la llave de cierre por endif;, endwhile;,
endfor;, endforeach;, o endswitch;, respectivamente.
<?php if ($a == 5): ?>
A es igual a 5
<?php endif; ?>
En el ejemplo anterior, el bloque HTML "A es igual a 5" está anidado dentro de una
sentencia if escrita en la sintaxis alternativa. El bloque HTML se mostraría solamente si $a
es igual a 5.

La sintaxis alternativa también se aplica a else y elseif. La siguiente es una estructura

if con elseif y else en el formato alternativo:
<?php
if ($a == 5):
echo "a igual 5";
echo "...";
elseif ($a == 6):
echo "a igual 6";
echo "!!!";
else:
echo "a no es 5 ni 6";
endif;
?>

4.2.2. Sentencia switch

‘La sentencia switch es similar a una serie de sentencias IF en la misma expresión. En
muchas ocasiones, es posible que se quiera comparar la misma variable (o expresión) con
muchos valores diferentes, y ejecutar una parte de código distinta dependiendo de a que valor
es igual. Para esto es exactamente la expresión switch.

Los dos ejemplos siguientes son dos formas diferentes de escribir lo mismo, uno con una
serie de sentencias if y elseif, y el otro usando la sentencia switch:
<?php
if ($i == 0) {

257
Programación del lado del servidor
 4.2. Estructuras de control

echo "i es igual a 0";

} elseif ($i == 1) {
echo "i es igual a 1";
} elseif ($i == 2) {
echo "i es igual a 2";
}

switch ($i) {
case 0:
echo "i es igual a 0";
break;
case 1:
echo "i es igual a 1";
break;
case 2:
echo "i es igual a 2";
break;
default:
echo "No hay coincidencia";
break;

}
?>

Es importante entender cómo la sentencia switch es ejecutada con el fin de evitar errores.
La sentencia switch ejecuta línea por línea (en realidad, sentencia por sentencia). Al
principio, ningún código es ejecutado. Solo cuando se encuentra una sentencia case cuya
expresión se evalúa a un valor que coincida con el valor de la con un valor que coincide con
el valor de la expresión switch, PHP comienza a ejecutar la sentencias. PHP continúa
ejecutando las sentencias hasta el final del bloque switch, o hasta la primera vez que vea una
sentencia break. Si no se escribe una sentencia break al final de la lista de sentencias de un
caso, PHP seguirá ejecutando las sentencias del caso siguiente.

4.2.2. Sentencia while

‘Los bucles while son el tipo más sencillo de bucle en PHP. Se comportan igual que su
contrapartida en C. La forma básica de una sentencia while es:

while (expr)

sentencia
<?php
/* ejemplo 1 */

$i = 1;

258
Programación del lado del servidor
 4.2. Estructuras de control

while ($i <= 10) {

echo $i++; /* el valor presentado sería
$i antes del incremento
(post-incremento) */
}

/* ejemplo 2 */

$i = 1;
while ($i <= 10):
echo $i;
$i++;
endwhile;
?>

4.2.3. Sentencia do while

‘Los bucles do-while son muy similares a los bucles while, excepto que la expresión
verdadera es verificada al final de cada iteración en lugar que al principio. La diferencia
principal con los bucles while es que está garantizado que corra la primera iteración de un
bucle do-while (la expresión verdadera sólo es verificada al final de la iteración), mientras
que no necesariamente va a correr con un bucle while regular (la expresión verdadera es
verificada al principio de cada iteración, si se evalúa como false justo desde el comienzo, la
ejecución del bucle terminaría inmediatamente).

Hay una sola sintaxis para bucles do-while:

<?php
$i = 0;
do {
echo $i;
} while ($i > 0);
?>
El bucle de arriba se ejecutaría exactamente una sola vez, ya que después de la primera
iteración, cuando la expresión verdadera es verificada, se evalúa como false ($i no es mayor
que 0) y termina la ejecución del bucle.

Hay una diferencia importante que debes tener en cuenta al usar el bucle do-while frente
a usar un simple bucle while: Y es cuando se realiza la condición de comprobación.

259
Programación del lado del servidor
 4.2. Estructuras de control

En un bucle do-while, la evaluación de la condición de comprobación está al final del

bucle. Esto significa que el código dentro del bucle iterará una vez antes de que la condición
sea evaluada. Esto es ideal para las tareas que necesitan ejecutarse una vez antes de que se
haga una prueba para continuar, como una prueba que depende de los resultados del bucle.

Por el contrario, un bucle while simple evalúa la condición de prueba al principio del bucle
antes de que se realice cualquier ejecución en el bloque del bucle. Si por alguna razón su
condición de prueba se evalúa como falsa al principio del bucle, no se ejecutará nada del
código dentro de su bucle.

4.2.4. Sentencia for

‘Los bucles for son los más complejos en PHP. Se comportan como sus homólogos en C.
La sintaxis de un bucle for es:
for (expr1; expr2; expr3)
sentencia
La primera expresión (expr1) es evaluada (ejecutada) una vez incondicionalmente al
comienzo del bucle.

En el comienzo de cada iteración, se evalúa expr2. Si se evalúa como true, el bucle

continúa y se ejecutan la(s) sentencia(s) anidada(s). Si se evalúa como false, finaliza la
ejecución del bucle.

Al final de cada iteración, se evalúa (ejecuta) expr3.

Cada una de las expresiones puede estar vacía o contener múltiples expresiones separadas
por comas. En expr2, todas las expresiones separadas por una coma son evaluadas, pero el
resultado se toma de la última parte. Que expr2 esté vacía significa que el bucle debería ser
corrido indefinidamente (PHP implícitamente lo considera como true, como en C). Esto
puede no ser tan inútil como se pudiera pensar, ya que muchas veces se debe terminar el
bucle usando una sentencia condicional break en lugar de utilizar la expresión verdadera del
for.

Considere los siguientes ejemplos. Todos ellos muestran los números del 1 al 10:

260
Programación del lado del servidor
 4.2. Estructuras de control

<?php
/* ejemplo 1 */
for ($i = 1; $i <= 10; $i++) {
echo $i;
}
/* ejemplo 2 */

for ($i = 1; ; $i++) {

if ($i > 10) {
break;
}
echo $i;
}
/* ejemplo 3 */
$i = 1;
for (; ; ) {
if ($i > 10) {
break;
}
echo $i;
$i++;
}
/* ejemplo 4 */
for ($i = 1, $j = 0; $i <= 10; $j += $i, print $i, $i++);
?>
Por supuesto, el primer ejemplo parece ser el mejor (o quizás el cuarto), pero se puede
observar que la posibilidad de usar expresiones vacías en los bucles for resulta útil en
muchas ocasiones.

PHP también admite la sintaxis alternativa de los dos puntos para bucles for.

for (expr1; expr2; expr3):

sentencia
...
endfor;

4.2.5. Constructor foreach

‘El constructor foreach proporciona un modo sencillo de iterar sobre arrays. foreach
funciona sólo sobre arrays y objetos, y emitirá un error al intentar usarlo con una variable de
un tipo diferente de datos o una variable no inicializada. Existen dos sintaxis:
foreach (expresión_array as $valor)
sentencias

foreach (expresión_array as $clave => $valor)

261
Programación del lado del servidor
 4.3. Tratamiento de formularios

sentencias
La primera forma recorre el array dado por expresión_array. En cada iteración, el valor
del elemento actual se asigna a $valor y el puntero interno del array avanza una posición
(así en la próxima iteración se estará observando el siguiente elemento).

La segunda forma además asigna la clave del elemento actual a la variable $clave en cada
iteración.

Para poder modificar directamente los elementos del array dentro de bucle, se ha de
anteponer & a $valor. En este caso el valor será asignado por referencia.

<?php
$array = array(1, 2, 3, 4);
foreach ($array as &$valor) {
$valor = $valor * 2;
}
// $array ahora es array(2, 4, 6, 8)
unset($valor); // rompe la referencia con el último elemento
?>

Todo el punto 4.2 ha sido extraido de (The PHP Group, 2021)

4.3. Tratamiento de formularios

Cuando se envía un formulario a un script de PHP, la información de dicho formulario
pasa a estar automáticamente disponible en el script. Existen algunas formas de acceder a
esta información.

4.3.1. Formularios HTML (GET y POST)

Es relativamente simple tener acceso a las variables de un formulario en PHP. Por
ejemplo:
<form action="[Link]" method="post">
Nombre usuario: <input type="text" name="usuario" /><br />
Email: <input type="text" name="correo" /><br />
<input type="submit" name="submit" value="Enviar" />
</form>

262
Programación del lado del servidor
 4.3. Tratamiento de formularios

Solamente existen dos maneras de acceder a datos desde formularios HTML. Los métodos
disponibles actualmente se enumeran a continuación:

La primera forma es usar el método POST en el formulario. La información llega entonces

en el arreglo $_POST.
<?php
echo $_POST[usuario];
echo $_REQUEST[usuario];
?>
Usar un formulario con GET es similar excepto en el uso de variables predefinidas, que
en este caso serán del tipo GET. GET también se usa con QUERY_STRING (la información
despues del símbolo '?' en una URL). Por ejemplo [Link]
contiene datos GET que son accesibles con $_GET['id'].

PHP también entiende arrays en el contexto de variables de formularios. Se puede, por

ejemplo, agrupar juntas variables relacionadas o usar esta característica para obtener valores
de una entrada "select" múltiple. Por ejemplo, vamos a mandar un formulario a sí mismo y a
presentar los datos cuando se reciban:
<?php
if ($_POST) {
echo '<pre>';
echo htmlspecialchars(print_r($_POST, true));
echo '</pre>';
}
?>
<form action="" method="post">
Nombre: <input type="text" name="personal[nombre]" /><br />
Email: <input type="text" name="personal[email]" /><br />
Cerveza: <br />
<select multiple name="cerveza[]">
<option value="warthog">Warthog</option>
<option value="guinness">Guinness</option>
<option value="stuttgarter">Stuttgarter Schwabenbräu</option>
</select><br />
<input type="submit" value="¡enviarme!" />
</form>

También se usa esta técnica con las cajas de selección.

263
Programación del lado del servidor
 4.3. Tratamiento de formularios

4.3.2. Saneamiento y validación de variables de entrada

Nunca se enfatizará lo suficiente que el manejo de datos del usuario es un campo de minas
de seguridad, y que es esencial aprender a tratar todos esos datos con la máxima precaución
desde el principio. En realidad, no es tan difícil sanear la entrada del usuario de posibles
intentos de hackeo, pero hay que hacerlo.

Lo primero que hay que recordar es que, independientemente de las restricciones que se
hayan puesto en un formulario HTML para limitar los tipos y tamaños de las entradas, es una
cuestión trivial para un hacker utilizar la función de ver el código fuente del navegador para
extraer el formulario y modificarlo para proporcionar entradas maliciosas a su sitio web.

Por lo tanto, nunca debe confiar en ninguna variable que provenga de $_GET o $_POST
o $_REQUEST, hasta que la haya procesado. Si no lo hace, los usuarios pueden intentar
inyectar JavaScript en los datos para interferir con el funcionamiento de su sitio, o incluso
intentar añadir comandos MySQL o de algún otro manejador para comprometer su base de
datos.

Existen básicamente dos técnicas: validación de datos y saneamiento de datos. La

validación verifica que el dato que se solicitó coincida en tipo y posiblemente rango. El dato
se rechaza si no cumple con lo especificado. El saneamiento intenta eliminar todos aquellos
caracteres que no correspondan con lo solicitado y regresar un valor acorde a lo solicitado.

Ambas técnicas intentan prevenir la inyección de código o algún otro problema de

seguridad.

En la siguiente tabla tenemos los filtros de saneamiento de PHP:

Tabla 4.4 Filtros de saneamiento

Id Banderas Descripción

FILTER_SANITIZE_EMAIL Elimina todos los

caracteres menos letras,

264
Programación del lado del servidor
 4.3. Tratamiento de formularios

dígitos y !#$%&'*+-
=?^_`{|}~@.[].

FILTER_SANITIZE_ENCODED FILTER_FLAG_STRIP_ String URL-encode,

LOW, opcionalmente elimina o
FILTER_FLAG_STRIP_
codifica caracteres
HIGH,
especiales.
FILTER_FLAG_ENCODE
_LOW,
FILTER_FLAG_ENCODE
_HIGH

FILTER_SANITIZE_MAGIC_QUOTES Aplica addslashes().

FILTER_SANITIZE_NUMBER_FLOAT FILTER_FLAG_ALLOW_ Elimina todos los

FRACTION, caracteres a excepción de
FILTER_FLAG_ALLOW_
los dígitos, +- y,
THOUSAND,
opcionalmente, .,eE.
FILTER_FLAG_ALLOW_
SCIENTIFIC

FILTER_SANITIZE_NUMBER_INT Elimina todos los

caracteres excepto dígitos
y los signos de suma y
resta.

FILTER_SANITIZE_SPECIAL_CHARS FILTER_FLAG_STRIP_ Escapa caracteres HTML

LOW, '"<>& y caracteres con
FILTER_FLAG_STRIP_
valores ASCII menores
HIGH,
que 32, opcionalmente
FILTER_FLAG_ENCODE
elimina o codifica
_HIGH
caracteres especiales.

FILTER_SANITIZE_FULL_SPECIAL FILTER_FLAG_NO_ENC Equivalente a llamar a

_CHARS ODE_QUOTES
htmlspecialchars() con

265
Programación del lado del servidor
 4.3. Tratamiento de formularios

ENT_QUOTES establecido.
Utiliza el conjunto de
caracteres por omisión y
si hay un carácter no
válido regresa una cadena
vacía

FILTER_SANITIZE_STRING FILTER_FLAG_NO_ENC Elimina etiquetas,

ODE_QUOTES, opcionalmente elimina o
FILTER_FLAG_STRIP_
codifica caracteres
LOW,
especiales.
FILTER_FLAG_STRIP_
HIGH,
FILTER_FLAG_ENCODE
_LOW,
FILTER_FLAG_ENCODE

_HIGH,
FILTER_FLAG_ENCODE
_AMP

FILTER_SANITIZE_STRIPPED Alias del filtro "string".

FILTER_SANITIZE_URL Elimina todos los

caracteres excepto letras,
dígitos y $-
_.+!*'(),{}|\\^~[]`<>
#%";/?:@&=.

FILTER_UNSAFE_RAW FILTER_FLAG_STRIP_ No hace nada,

LOW, opcionalmente eliminar o
FILTER_FLAG_STRIP_
codificar caracteres. Este
HIGH,
filtro es un alias de
FILTER_FLAG_ENCODE
FILTER_DEFAULT.
_LOW,

266
Programación del lado del servidor
 4.3. Tratamiento de formularios

FILTER_FLAG_ENCODE
_HIGH,
FILTER_FLAG_ENCODE
_AMP

Se usa la función de PHP filter_var, filter_input o filter_input_array. En la siguiente tabla se

muestran los tipos de filtros:

Tabla 4.5 Tipos de filtros de validación para la función filter_var

Id Banderas Descripción

FILTER_VALIDATE_BOOLEA FILTER_NULL_ON_FAILURE Devuelve true para "1",

N
"true", "on" y "yes".
Devuelve false en caso
[Link]
FILTER_NULL_ON_FAILUR
E está declarado, se
devolverá false sólo
para "0", "false", "off",
"no", y "", y null para
cualquier valor no
booleano.

FILTER_VALIDATE_EMAIL Valida una dirección de

correo electrónico. En
general, se validan
direcciones de correo
electrónico con la sintaxis
de RFC 822, con la
excepción de no admitir
el plegamiento de
comentarios y espacios en
blanco.

267
Programación del lado del servidor
 4.3. Tratamiento de formularios

FILTER_VALIDATE_FLOAT FILTER_FLAG_ALLOW_THOUSA Valida si el valor es un

ND
float.

FILTER_VALIDATE_INT FILTER_FLAG_ALLOW_OCTAL Valida un valor como

FILTER_FLAG_ALLOW_HEX
integer, opcionalmente
desde el rango
especificado, y lo
convierte a int en case de
éxito.

FILTER_VALIDATE_IP FILTER_FLAG_IPV4, Valida si es valor es una

FILTER_FLAG_IPV6, dirección IP,
FILTER_FLAG_NO_PRIV_RANG opcionalmente se puede
E, indicar que sea sólo IPv4
FILTER_FLAG_NO_RES_RANGE
o IPv6 o que no sea de
rangos privados o
reservados.

FILTER_VALIDATE_MAC Valida una dirección

MAC.

FILTER_VALIDATE_REGEXP alida el valor contra

regexp, una expresión
regular Perl-compatible.

FILTER_VALIDATE_URL FILTER_FLAG_PATH_REQUIRE Permite validar URL de

D, acuerdo al standard
FILTER_FLAG_QUERY_REQUIR
ED

Por lo tanto, en lugar de usar sólo código como el siguiente cuando se lee en la entrada
del usuario:
$variable = $_POST['user_input'];
Se debería de verificar o sanear cada campo que se recibe del formulario:

268
Programación del lado del servidor
 4.3. Tratamiento de formularios

<h2>Formulario:</h2>
<form action="[Link]" method="post">
Nombre:
<input type="text" name="nombre" maxlength="50"><br>
Contraseña:
<input type="password" name="password"><br>
Educacion:
<select name="educacion">
<option value="sinEstudios">Sin estudios</option>
<option value="educacionBasica" selected="selected">Educación
básica</option>
<option value="formacionProfesional">Formación profesional</option>
<option value="universidad">Universidad</option>
</select> <br>
Nacionalidad:
<input type="radio" name="nacionalidad"
value="mexicana">Mexicana</input>
<input type="radio" name="nacionalidad" value="otra">Otra</input><br>
Idiomas:
<input type="checkbox" name="idiomas[]" value="español"
checked="checked">Español</input>
<input type="checkbox" name="idiomas[]" value="inglés">Inglés</input>
<input type="checkbox" name="idiomas[]" value="francés">Francés</input>
<input type="checkbox" name="idiomas[]"
value="alemán">Alemán</input><br>
Email:
<input type="text" name="correo"><br>
Sitio Web:
<input type="text" name="sitioWeb"><br>
// Botón de enviar
<input type="submit" name="submit" value="Enviar">
</form>
</body>
</html>
Para empezar, se puede hacer una función general de validación que deberá aplicarse a todos
los campos.
function filtrar($datos){
$datos = trim($datos); // Elimina espacios antes y después de los datos
$datos = stripslashes($datos); // Elimina backslashes \
$datos = htmlspecialchars($datos); // Traduce caracteres especiales en
entidades HTML
return $datos;
269
Programación del lado del servidor
 4.3. Tratamiento de formularios

}
Acá tenemos el código que filtra todos los campos:
if(isset($_POST["submit"]) && $_SERVER["REQUEST_METHOD"] == "POST"){
$nombre = filtrar($_POST["nombre"]);
$password = filtrar($_POST["password"]);
$educacion = filtrar($_POST["educacion"]);
$nacionalidad = filtrar($_POST["nacionalidad"]);
// Utilizamos implode para pasar el array a string
$idiomas = filtrar(implode(", ", $_POST["idiomas"]));
$email = filtrar($_POST["correo"]);
$sitioweb = filtrar($_POST["sitioweb"]);
Hay que tomar en cuenta cuando los campos son opcionales y cuando son campos requeridos:
if(isset($_POST["submit"]) && $_SERVER["REQUEST_METHOD"] == "POST"){
// El nombre y contraseña son campos obligatorios
if(empty($_POST["nombre"])){
$errores[] = "El nombre es requerido";
}
if(empty($_POST["password"]) || strlen($_POST["password"]) < 5){
$errores[] = "La contraseña es requerida y ha de ser mayor a 5
caracteres";
}
// El correo es obligatorio y ha de tener formato adecuado
if(!filter_var($_POST["correo"], FILTER_VALIDATE_EMAIL) ||
empty($_POST["correo"])){
$errores[] = "No se ha indicado email o el formato no es correcto";
}
// El sitio web es obligatorio y ha de tener formato adecuado
if(!filter_var($_POST["sitioWeb"], FILTER_VALIDATE_URL) ||
empty($_POST["sitioWeb"])){
$errores[] = "No se ha indicado sitio web o el formato no es
correcto";
}
// Si el array $errores está vacío, se aceptan los datos y se asignan a
variables
if(empty($errores)) {
$nombre = filtrar($_POST["nombre"]);
$password = filtrar($_POST["password"]);
$educacion = filtrar($_POST["educacion"]);
$nacionalidad = filtrar($_POST["nacionalidad"]);
// Utilizamos implode para pasar el array a string
$idiomas = filtrar(implode(", ", $_POST["idiomas"]));

270
Programación del lado del servidor
 4.3. Tratamiento de formularios

$email = filtrar($_POST["correo"]);
$sitioweb = filtrar($_POST["sitioWeb"]);
}
}
<ul>
<?php
if(isset($errores)){
foreach ($errores as $error){
echo "<li> $error </li>";
}
}
?>
</ul>
Estos ejemplos son de ([Link] 2021) traducidos al español.

4.3.3. Subida de archivos

Para subir archivos se debe configurar en [Link] la variable file_uploads=On, la variable
upload_tmp_dir que indica en qué directorio temporal se colocarán los archivos, también la
variable upload_max_filesize que establece el tamaño máximo del archivo a subir.

También el directorio temporal y el directorio final deben de tener permisos de

lectura/escritura, esto es, si se usa apache el usuario es www-data.

Ahora vemos un formulario:

<h2>Formulario subida de archivos</h2>
<html>
<body>
<form action="[Link]" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo
$max_file_size; ?>" />
<input type="file" name="foto" />
<input type="submit" name="submit" />
</form>
</body>
</html>
Se incluye un input del tipo hidden que limita el tamaño máximo del archivo que se puede
subir (en bytes).

271
Programación del lado del servidor
 4.3. Tratamiento de formularios

La información sobre un archivo subido la proporciona el array multidimensional

$_FILES. Este array se crea con el key que se indique en el input del formulario, en este caso
"foto":
$_FILES["foto"]["name"]. Guarda el nombre original del archivo del cliente.
$_FILES["foto"]["type"]. Guarda el MIME type del archivo.
$_FILES["foto"]["size"]. Guarda el tamaño del archivo en bytes.
$_FILES["foto"]["tmp_name"]. Guarda el nombre del archivo temporal.
$_FILES["foto"]["error"]. Guarda cualquier código de error que pueda provocar la subida
del archivo.
La función move_uploaded_file() mueve un archivo subido del directorio temporal al
directorio que se indique.
<?php
$directorioSubida = "uploads/";
$max_file_size = "51200";
$extensionesValidas = array("jpg", "png", "gif");
if(isset($_POST["submit"]) && isset($_FILES[foto])){
$errores = array();
$nombreArchivo = $_FILES[foto]['name'];
$filesize = $_FILES[foto]['size'];
$directorioTemp = $_FILES[foto]['tmp_name'];
$tipoArchivo = $_FILES[foto]['type'];
$arrayArchivo = pathinfo($nombreArchivo);
$extension = $arrayArchivo['extension'];
// Comprobamos la extensión del archivo
if(!in_array($extension, $extensionesValidas)){
$errores[] = "La extensión del archivo no es válida o no se ha subido ningún archivo";
}
// Comprobamos el tamaño del archivo
if($filesize > $max_file_size){
$errores[] = "La imagen debe de tener un tamaño inferior a 50 kb";
}
// Comprobamos y renombramos el nombre del archivo
$nombreArchivo = $arrayArchivo['filename'];
$nombreArchivo = preg_replace("/[^A-Z0-9._-]/i", "_", $nombreArchivo);
$nombreArchivo = $nombreArchivo . rand(1, 100);

272
Programación del lado del servidor
 4.3. Tratamiento de formularios

// Desplazamos el archivo si no hay errores

if(empty($errores)){
$nombreCompleto = $directorioSubida.$nombreArchivo.".".$extension;
move_uploaded_file($directorioTemp, $nombreCompleto);
print "El archivo se ha subido correctamente";
}
}
El array $_FILES['imagen']['error']

especifica por qué no se ha podido subir el archivo, lo que permite especificar un mensaje
de vuelta para cada tipo de error. Devuelve un integer con el número de error:

Tabla 4.6 Valores de error para subir archivos

Error Valor Significado

UPLOAD_ERR_OK 0 No hay errores

UPLOAD_ERR_INI_SIZE 1 Supera el tamaño máximo indicado en

[Link]

UPLOAD_ERR_FORM_SIZE 2 Supera el tamaño máximo indicado en

MAX_FILE_SIZE de html

UPLOAD_ERR_PARTIAL 3 Sólo se ha subido el archivo parcialmente

UPLOAD_ERR_NO_FILE 4 No se ha subido ningún archivo

UPLOAD_ERR_NO_TMP_DIR 6 Falta la carpeta temporal

UPLOAD_ERR_CANT_WRITE 7 No se puede escribir en el directorio

especificado

UPLOAD_ERR_EXTENSION 8 Una extensión de PHP ha detenido la subida

Para subir múltiples archivos puede hacerse con JavaScript o usando HTML. Si se hace
con HTML se le añade al formulario html el atributo multiple y al nombre en el atributo name
se añaden corchetes para indicar que es un array.

273
Programación del lado del servidor
 4.4. Manejo de objetos en el servidor

<input type="file" name="imagenes[]" multiple="multiple" />

En el backend tenemos que recorrer el arreglo que viene del formulario:
$directorioSubida = "uploads/";
$max_file_size = "51200";
if(isset($_POST["submit"]) && isset($_FILES['imagenes'])){
$nombres = $_FILES['imagenes']['name'];
$temporales = $_FILES['imagenes']['tmp_name'];
$tipos = $_FILES['imagenes']['type'];
$errores = $_FILES['imagenes']['error'];
// Iteramos sobre los arrays creados
for ($i = 0; $i < count($temporales); $i++){
if(move_uploaded_file($temporales[$i],
$directorioSubida.$nombres[$i])){
echo "Se ha subido {$nombres[$i]} correctamente <br>";
} else {
echo "Ha habido algún error al subir algún archivo";
}
}
}

4.4. Manejo de objetos en el servidor

De la misma manera que la programación estructurada junto con las funciones o
procedimientos y las estructuras de datos representan un enorme incremento de la potencia
de programación sobre los primeros días de la computación, la programación orientada a
objetos (POO) lleva el uso de funciones a un nivel completamente nuevo que permite
encapsular las estructuras de datos y las funciones en una sola entidad.

Una vez que se aprende a condensar trozos de código reutilizables en funciones, no es tan

difícil considerar la agrupación de las funciones y sus datos en objetos.

En PHP estándar, se podrían crear algunas funciones para manejar esto e incrustar algunas
llamadas a la base de datos MySQL para mantener un registro de todos los usuarios.

Se Podría tratar este nuevo objeto como si fuera el usuario real. Por ejemplo, podría pasarle
al objeto al objeto un nombre, una contraseña y una dirección de correo electrónico;

274
Programación del lado del servidor
 4.4. Manejo de objetos en el servidor

preguntarle si ese usuario ya existe y, en caso contrario, hacer que cree un nuevo usuario con
esos atributos. Incluso podría tener un objeto de mensajería instantánea o uno para gestionar
si dos usuarios son amigos.

4.4.1 Terminología
Cuando se crea un programa para utilizar objetos, es necesario diseñar una entidad de
datos y código llamado clase. Cada nuevo objeto basado en esta clase se llama instancia (o
aparición) de esa clase.

Los datos asociados a un objeto se llaman propiedades; las funciones que utiliza se llaman
métodos. Al definir una clase, se proporcionan los nombres de sus propiedades y el código
de sus métodos.

Cuando se crean objetos, lo mejor es utilizar la encapsulación, o sea, escribir una clase de
manera que sólo sus métodos puedan ser utilizados para manipular sus propiedades. En otras
palabras, se le niega al código externo el acceso directo a sus datos. Los métodos que se
proporcionan se conocen como interfaz del objeto.

Este enfoque facilita la depuración: sólo hay que arreglar el código defectuoso dentro de
una clase.

Además, cuando quiera actualizar un programa, si ha utilizado una encapsulación

adecuada y ha mantenido la misma interfaz, puede simplemente desarrollar nuevas clases de
reemplazo, depurarlas completamente, y luego cambiarlas por las antiguas. Si no funcionan,
se puede volver a cambiar las antiguas para arreglar inmediatamente el problema antes de
seguir depurando las nuevas clases.

Una vez que haya creado una clase, puede encontrar que necesita otra clase que es similar

pero no exactamente igual. Lo más rápido y fácil es definir una nueva clase usando la
herencia. Al hacer esto, tu nueva clase tiene todas las propiedades de la que ha de la que ha
heredado. La clase original se llama ahora superclase, y la nueva es la subclase (o clase
derivada).

275
Programación del lado del servidor
 4.5. Creación de clases

Una excelente ventaja de este sistema es que, si se mejora la velocidad o cualquier otro
aspecto de la superclase, sus subclases recibirán el mismo beneficio.

PHP trata los objetos de la misma manera que las referencias o manejadores, lo que
significa que cada variable contiene una referencia a un objeto en lugar de una copia de todo
el objeto.

4.5. Creación de clases

La definición básica de una clase comienza con la palabra reservada class, seguida de un
nombre de clase, y continuando con un par de llaves que encierran las definiciones de las
propiedades y métodos pertenecientes a dicha clase.

El nombre de clase puede ser cualquier etiqueta válida, siempre que no sea una palabra
reservada de PHP. Un nombre válido de clase comienza con una letra o un guión bajo,
seguido de una cantidad arbitraria de letras, números o guiones bajos. Como expresión
regular, se expresaría de la siguiente forma: ^[a-zA-Z_\x80-\xff][a-zA-Z0-9_\x80-
\xff]*$.

Una clase puede tener sus propias constantes, variables (llamadas "propiedades"), y
funciones (llamados "métodos").
<?php
class ClaseSencilla
{
// Declaración de una propiedad
private $var = 'un valor predeterminado';

// Declaración de un método
public function mostrarVar() {
echo $this->var;
}
}
?>
La pseudovariable $this está disponible cuando un método es invocado dentro del contexto
de un objeto. $this es una referencia al objeto invocador.

276
Programación del lado del servidor
 4.5. Creación de clases

4.5.1. Propiedades y métodos

Las propiedades y métodos de una clase viven en «espacios de nombres» diferentes, por
tanto, es posible tener una propiedad y un método con el mismo nombre. Al hacer referencia
tanto a una propiedad como a un método se utiliza la misma notación, y si se accederá a la
propiedad o se llamará al método, solamente depende del contexto, es decir, si el empleo es
el acceso a una variable o la llamada a una función.
<?php
class Foo
{
public $bar = 'property';

public function bar() {

return 'method';
}
}

$obj = new Foo();

echo $obj->bar, PHP_EOL, $obj->bar(), PHP_EOL;

4.5.2. Creación de un objeto

Para crear una instancia de una clase, se debe emplear la palabra reservada new. Un objeto
se creará siempre a menos que el objeto tenga un constructor que arroje una excepción en
caso de error. Las clases deberían ser definidas antes de la instanciación (y en algunos casos
esto es un requerimiento).

Si se emplea un string que contenga el nombre de una clase con new, se creará una nueva
instancia de esa clase. Si la clase estuviera en un espacio de nombres, se debe utilizar su
nombre completo al realizar esto.

Si no hay argumentos para pasar al constructor de la clase, se pueden omitir los paréntesis
después del nombre de la clase.
<?php
$instancia = new MiClase();

// Esto también se puede hacer con una variable:

$nombreClase = 'MiClase';
$instancia = new $nombreClase(); // new MiClase()
?>

277
Programación del lado del servidor
 4.5. Creación de clases

En el contexto de una clase, es posible crear un nuevo objeto con new self y new parent.

Cuando se asigna una instancia ya creada de una clase a una nueva variable, ésta última
accederá a la misma instancia que el objeto que le fue asignado. Esta conducta es la misma
que cuando se pasan instancias a una función. Se puede realizar una copia de un objeto ya
creado a través de la clonación del mismo.
<?php

$instancia = new MiClase();

$asignada = $instancia;
$referencia =& $instancia;

$instancia->var = '$asignada tendrá este valor';

$instancia = null; // $instancia y $referencia son null

var_dump($instancia);
var_dump($referencia);
var_dump($asignada);
?>

4.5.3. Herencia (Extends)

Una clase puede heredar los métodos y propiedades de otra clase empleando la palabra
reservada extends en la declaración de la clase. No es posible la extensión de múltiples clases;
una clase sólo puede heredar de una clase base.

Los métodos y propiedades heredados pueden ser sobrescritos con la redeclaración de

éstos utilizando el mismo nombre que en la clase madre. Sin embargo, si la clase madre
definió un método como final, éste no podrá ser sobrescrito. Es posible acceder a los métodos
sobrescritos o a las propiedades estáticas haciendo referencia a ellos con parent::.
<?php
class ClaseExtendida extends MiClase
{
// Redefinición del método padre
function mostrarVar()
{
echo "Clase extendida\n";
parent::mostrarVar();
}
}

$extendida = new ClaseExtendida();

278
Programación del lado del servidor
 4.5. Creación de clases

$extendida->mostrarVar();
?>

4.5.4. Visibilidad
La visibilidad de una propiedad, un método o una constante se puede definir anteponiendo
a su declaración una de las palabras reservadas public, protected o private. A los miembros
de clase declarados como 'public' se puede acceder desde donde sea; a los miembros
declarados como 'protected', solo desde la misma clase, mediante clases heredadas o desde
la clase padre. A los miembros declarados como 'private' únicamente se puede acceder desde
la clase que los definió.

[Link]. Visibilidad de propiedades

Las propiedades de clases deben ser definidas como 'public', 'private' o 'protected'. Si se
declaran usando var, serán definidas como 'public'.
<?php
/**
* Definición de MiClase
*/
class MiClase
{
public $public = 'Public';
protected $protected = 'Protected';
private $private = 'Private';

function printHello()
{
echo $this->public;
echo $this->protected;
echo $this->private;
}
}

$obj = new MyClass();

echo $obj->public; // Funciona bien
echo $obj->protected; // Error Fatal
echo $obj->private; // Error Fatal
$obj->printHello(); // Muestra Public, Protected y Private

/**

279
Programación del lado del servidor
 4.5. Creación de clases

* Definición de MiClase2
*/
class MiClase2 extends MiClase
{
// Se pueden redeclarar las propiedades pública y protegida, pero no
la privada
public $public = 'Public2';
protected $protected = 'Protected2';

function printHello()
{
echo $this->public;
echo $this->protected;
echo $this->private;
}
}

$obj2 = new MiClase2();

echo $obj2->public; // Funciona bien
echo $obj2->protected; // Error Fatal
echo $obj2->private; // Undefined
$obj2->printHello(); // Muestra Public2, Protected2, Undefined

?>

[Link]. Visibilidad de Métodos

Los métodos de clases pueden ser definidos como public, private, o protected. Aquellos
declarados sin ninguna palabra clave de visibilidad explícita serán definidos como public.
<?php
/**
* Definición de MiClase
*/
class MiClase
{
// Declaración de un constructor public
public function __construct() { }

// Declaración de un método public

public function MiPublic() { }

// Declaración de un método protected

protected function MiProtected() { }

// Declaración de un método private

private function MiPrivate() { }
280
Programación del lado del servidor
 4.5. Creación de clases

// Esto es public
function Foo()
{
$this->MiPublic();
$this->MiProtected();
$this->MiPrivate();
}
}

$MiClase = new MiClase;

$miClase->MiPublic(); // Funciona
$miClase->MiProtected(); // Error Fatal
$miClase->MiPrivate(); // Error Fatal
$miClase->Foo(); // Public, Protected y Private funcionan

/**
* Definición de MiClase2
*/
class MiClase2 extends MiClase
{
// Esto es public
function Foo2()
{
$this->MiPublic();
$this->MiProtected();
$this->MiPrivate(); // Error Fatal
}
}

$miClase2 = new MiClase2;

$miClase2->MiPublic(); // Funciona
$miclase2->Foo2(); // Public y Protected funcionan, pero Private no

class Bar
{
public function test() {
$this->testPrivate();
$this->testPublic();
}

public function testPublic() {

echo "Bar::testPublic\n";
}

private function testPrivate() {

echo "Bar::testPrivate\n";

281
Programación del lado del servidor
 4.5. Creación de clases

}
}

class Foo extends Bar

{
public function testPublic() {
echo "Foo::testPublic\n";
}

private function testPrivate() {

echo "Foo::testPrivate\n";
}
}

$myFoo = new Foo();

$myFoo->test(); // Bar::testPrivate
// Foo::testPublic
?>

[Link]. Visibilidad de las constantes

Las constantes de clase se pueden definir como públicas, privadas o protegidas. Las
constantes declaradas sin una visibilidad explítica serán definidas como públicas.
<?php
/**
* Definir MiClase
*/
class MiClase
{
// Declarar una constante pública
public const MI_PUBLIC = 'public';

// Declarar una constante protegida

protected const MI_PROTECTED = 'protected';

// Declarar una constante privada

private const MI_PRIVATE = 'private';

public function foo()

{
echo self::MI_PUBLIC;
echo self::MI_PROTECTED;
echo self::MI_PRIVATE;
}
}

282
Programación del lado del servidor
 4.6. Acceso a datos

$myclass = new MiClase();

MiClase::MI_PUBLIC; // Funciona
MiClase::MI_PROTECTED; // Error fatal
MiClase::MI_PRIVATE; // Error fatal
$miClase->foo(); // Funcionan Public, Protected y Private

/**
* Definir MiClase2
*/
class MiClase2 extends MiClase
{
// Esta es pública
function foo2()
{
echo self::MI_PUBLIC;
echo self::MI_PROTECTED;
echo self::MI_PRIVATE; // Error fatal
}
}

$miClase2 = new MiClase2;

echo MiClase2::MI_PUBLIC; // Funciona
$miClase2->foo2(); // Funcionan Public y Protected, pero no Private
?>

4.6. Acceso a datos

La extensión Objetos de Datos de PHP (PDO por sus siglás en inglés) define una
interfaz ligera para poder acceder a bases de datos en PHP. Cada controlador de bases de
datos que implemente la interfaz PDO puede exponer características específicas de la base
de datos, como las funciones habituales de la extensión. Se ha de observar que no se puede
realizar ninguna de las funciones de las bases de datos utilizando la extensión PDO por sí
misma; se debe utilizar un controlador de PDO específico de la base de datos para tener
acceso a un servidor de bases de datos.

PDO proporciona una capa de abstracción de acceso a datos, lo que significa que,
independientemente de la base de datos que se esté utilizando, se emplean las mismas
funciones para realizar consultas y obtener datos. PDO no proporciona una abstracción de
283
Programación del lado del servidor
 4.6. Acceso a datos

bases de datos; no reescribe SQL ni emula características ausentes. Se debería usar una capa
de abstracción totalmente desarrollada si fuera necesaria tal capacidad.

4.6.1. Conexiones y su administración

Las conexiones se establecen creando instancias de la clase base PDO. No importa el
controlador que se utilice; siempre se usará el nombre de la clase PDO. El constructor acepta
parámetros para especificar el origen de la base de datos (conocido como DSN) y,
opcionalmente, el nombre de usuario y la contraseña (si la hubiera).
<?php
$mbd = new PDO('mysql:host=localhost;dbname=prueba', $usuario, $contraseñ
a);
?>

Si hubiera errores de conexión, se lanzará un objeto PDOException. Se puede capturar la

excepción si fuera necesario manejar la condición del error, o se podría optar por dejarla en
manos de un manejador de excepciones global de aplicación configurado mediante
set_exception_handler().
<?php
try {
$mbd = new PDO('mysql:host=localhost;dbname=prueba', $usuario, $contr
aseña);
foreach($mbd->query('SELECT * from FOO') as $fila) {
print_r($fila);
}
$mbd = null;
} catch (PDOException $e) {
print "¡Error!: " . $e->getMessage() . "<br/>";
die();
}
?>

Si la aplicación no captura la excepción lanzada por el constructor de PDO, la acción

predeterminada que toma el motor zend es la de finalizar el script y mostrar información de
seguimiento. Esta información probablemente revelará todos los detalles de la conexión a la
base de datos, incluyendo el nombre de usuario y la contraseña. Es su responsabilidad
capturar esta excepción, ya sea explícitamente (con una sentencia catch) o implícitamente
por medio de set_exception_handler().

284
Programación del lado del servidor
 4.6. Acceso a datos

Una vez realizada con éxito una conexión a la base de datos, será devuelta una instancia
de la clase PDO al script. La conexión permanecerá activa durante el tiempo de vida del
objeto PDO. Para cerrar la conexión, es necesario destruir el objeto asegurándose de que
todas las referencias a él existentes sean eliminadas; esto se puede hacer asignando null a la
variable que contiene el objeto. Si no se realiza explícitamente, PHP cerrará automáticamente
la conexión cuando el script finalice.

Nota: Si aún existen otras referencias a esta instancia de PDO (tales como desde una
instancia de PDOStatement, o desde otras variables que hacen referencia a la misma instancia
de PDO), estas también han de eliminarse (por ejemplo, asignando NULL a la variable que
hace referencia al PDOStatement).
<?php
$mbd = new PDO('mysql:host=localhost;dbname=prueba', $usuario, $contraseñ
a);
// Utilizar la conexión aquí
$sth = $mbd->query('SELECT * FROM foo');

// Ya se ha terminado; se cierra
$sth = null;
$mbd = null;
?>

Muchas aplicaciones web se beneficiarán del uso de conexiones persistentes a servidores

de bases de datos. Las conexiones persistentes no son cerradas al final del script, sino que
son almacenadas en caché y reutilizadas cuando otro script solicite una conexión que use las
mismas credenciales. La caché de conexiones persistentes permite evitar la carga adicional
de establecer una nueva conexión cada vez que un script necesite comunicarse con la base de
datos, dando como resultado una aplicación web más rápida.
<?php
$mbd = new PDO('mysql:host=localhost;dbname=prueba', $usuario, $contraseñ
a, array(
PDO::ATTR_PERSISTENT => true
));
?>

Para utilizar conexiones persistentes, se deberá establecer PDO::ATTR_PERSISTENT en las

opciones del array del controlador pasado al constructor de PDO. Si este atributo se establece

285
Programación del lado del servidor
 4.6. Acceso a datos

con PDO::setAttribute() después de la instanciación del objeto, el controlador no utilizará

conexiones persistentes.

Si se usa el controlador PDO y las bibliotecas ODBC admiten el aprovisionamiento de

conexiones ODBC (unixODBC y Windows lo hacen; podrían haber más), se recomienda no
utilizar las conexiones persistentes de PDO, y, en su lugar, dejar el almacenamiento en caché
de conexiones a la capa del aprovisionamiento de conexiones de ODBC. La provisión de
conexiones de ODBC se comparte con otros módulos en el proceso; si se le indica a PDO
que almacene en caché la conexión, entonces dicha conexión nunca será devuelta a la
provisión de conexiones de ODBC, dando como resultado la creación de conexiones
adicionales para servir a los demás módulos.

4.6.2. Transacciones y auto-commits

Una vez realizada una conexión a través de PDO, es necesario comprender cómo PDO
gestiona las transacciones antes de comenzar a realizar consultas. Para aquellos que no han
manejado anteriormente transacciones, estas ofrecen cuatro características principales:
Atomicidad, Consistencia, Aislamiento y Durabilidad (ACID por sus siglas en inglés). En
términos sencillos, se garantiza que cualquier trabajo llevado a cabo en una transacción,
incluso si se hace por etapas, sea aplicado a la base de datos de forma segura, y sin
interferencia de otras conexiones, cuando sea consignado. El trabajo transaccional puede
también ser deshecho automáticamente bajo petición (siempre y cuando no se haya
consignado ya), lo que hace más sencillo el manejo de errores en los scripts.

Una transacción se implementa normalmente para hacer que el lote de cambios se aplique
a la vez. Esto tiene el buen efecto secundario de mejorar drásticamente la eficiencia de las
actualizaciones. En otras palabras, las transacciones pueden hacer los scripts más rápidos y
potencialmente más robustos (aún así es necesario utilizarlas correctamente para obtener tal
beneficio).

Desafortunadamente, no todas las bases de datos admiten transacciones, por lo que PDO
necesita ejecutarse en lo que es conocido como el modo "auto-commit" cuando se abra por
primera vez la conexión. El modo auto-commit significa que toda consulta que se ejecute
286
Programación del lado del servidor
 4.6. Acceso a datos

tiene su propia transacción implícita, si la base de datos la admite, o ninguna transacción si

la base de datos no las admite. Para iniciar una transacción, si fuera necesario, se debe usar
el método PDO::beginTransaction(). Si el controlador subyacente no admite transacciones,
se lanzará una PDOException (independientemente de la configuración del manejo de
errores: esto es siempre una condición de error serio). Una vez dentro de una transacción, se
puede utilizar PDO::commit() o PDO::rollBack() para finalizarla, dependiendo del éxito del
código que se ejecute durante la transacción.

PDO solamente comprueba la funcionalidad de transacciones a nivel del controlador. Si

una cierta condición durante la ejecución implica que las transacciones no estén disponibles,
PDO::beginTransaction() seguirá devolviendo true sin ningún error si el servidor de bases
de datos acepta la solicitud de iniciar una transacción.

Un ejemplo podría ser el intento de utilizar transacciones en tablas MyISAM en una base
de datos MySQL.

Cuando el script finaliza o cuando una conexión está a punto de ser cerrada, si existe una
transacción pendiente, PDO la revertirá automáticamente. Esto es una medida de seguridad
que ayuda a evitar inconsistencia en los casos donde el script finaliza inesperadamente (si no
se consignó la transacción, se asume que algo salió mal, con lo cual se realiza la reversión
para la seguridad de los datos).

La reversión automática solamente ocurre si se inicia una transacción a través de

PDO::beginTransaction(). Si se ejecuta manualmente una consulta que inicie una
transacción, PDO no tiene forma de saber nada sobre la misma y, por tanto, no puede
revertirla si algo saliera mal.

4.6.3. Sentencias preparadas

Muchas de las bases de datos más maduras admiten el concepto de sentencias preparadas.
Estas pueden definirse como un tipo de plantillas compiladas para SQL que las aplicaciones
quieren ejecutar, pudiendo ser personalizadas utilizando parámetros variables. Las sentencias
preparadas ofrecen dos grandes beneficios:

287
Programación del lado del servidor
 4.6. Acceso a datos

La consulta sólo necesita ser analizada (o preparada) una vez, pero puede ser ejecutada
muchas veces con los mismos o diferentes parámetros. Cuando la consulta se prepara, la base
de datos analizará, compilará y optimizará su plan para ejecutarla. Para consultas complejas,
este proceso puede tomar suficiente tiempo como para ralentizar notablemente una aplicación
si fuera necesario repetir la misma consulta muchas veces con los mismos parámetros.
Mediante el empleo de una sentencia preparada, la aplicación evita repetir el ciclo de
análisis/compilación/optimización. Esto significa que las sentencias preparadas utilizan
menos recursos y se ejecutan más rápidamente.

Los parámetros para las sentencias preparadas no necesitan estar entrecomillados; el

controlador automáticamente se encarga de esto. Si una aplicación usa exclusivamente
sentencias preparadas, el desarrollador puede estar seguro de que no hay cabida para
inyecciones de SQL (sin embargo, si otras partes de la consulta se construyen con datos de
entrada sin escapar, aún es posible que ocurran ataques de inyecciones de SQL).

Las sentencias preparadas son tan útiles que son la única característica que PDO emulará
para los controladores que no las soporten. Esto asegura que una aplicación sea capaz de
emplear el mismo paradigma de acceso a datos independientemente de las capacidades de la
base de datos.

Este ejemplo realiza dos consultas INSERT sustituyendo name y value por los marcadores
correspondientes.
<?php
$sentencia=$mbd->prepare("INSERT INTO REGISTRY (name, value)
VALUES (:name, :value)");

$sentencia->bindParam(':name', $nombre);
$sentencia->bindParam(':value', $valor);

// insertar una fila

$nombre = 'uno';
$valor = 1;
$sentencia->execute();

// insertar otra fila con diferentes valores

$nombre = 'dos';
$valor = 2;
$sentencia->execute();
?>

288
Programación del lado del servidor
 4.6. Acceso a datos

Este ejemplo obtiene datos basándose en un valor de clave proporcionado por un

formulario. La entrada del usuario es entrecomillada automáticamente, con lo cual no hay
riesgo de un ataque por inyección de SQL, aunque no está demás hacer una validación o
saneamiento de los datos de entrada.
<?php
$sentencia = $mbd->prepare("SELECT * FROM REGISTRY where name = ?");
if ($sentencia->execute(array($_GET['name']))) {
while ($fila = $sentencia->fetch()) {
print_r($fila);
}
}
?>
Uso correcto de los marcadores de posición
<?php
//Incorrecto
$sentencia = $mbd->
prepare("SELECT * FROM REGISTRY where name LIKE '%?%'");
$sentencia->execute(array($_GET['name']));
//Los marcadores de posición deben emplearse en el lugar del valor
//completo
$sentencia = $mbd->prepare("SELECT * FROM REGISTRY where name LIKE ?");
$sentencia->execute(array("%$_GET[name]%"));
?>

4.6.4. Errores y su manejo

PDO ofrece tres estrategias diferentes de manejar errores para adaptarse a cualquier estilo
de desarrollo de aplicaciones.

PDO::ERRMODE_SILENT

Este es el modo predeterminado. PDO simplemente establecerá él mismo el código de

error para su inspección utilizando los métodos PDO::errorCode() y PDO::errorInfo() tanto
en objetos de sentencias como de bases de datos. Si el error resultó de una llamada a un objeto
de sentencia, se deberá invocar al método PDOStatement::errorCode() o
PDOStatement::errorInfo() sobre dicho objeto. Si el error resultó de una llamada a un objeto
de bases de datos, se deberá invocar, en su lugar, a los métodos del objeto de bases de datos.

PDO::ERRMODE_WARNING

289
Programación del lado del servidor
 4.6. Acceso a datos

Además de establecer el código de error, PDO emitirá un mensaje E_WARNING

tradicional. Esta configuración es útil durante la depuración o realización de pruebas para
visualizar los problemas que han ocurrido sin interrumpir el flujo de la aplicación.

PDO::ERRMODE_EXCEPTION

Además de establecer el código de error, PDO lanzará una PDOException y establecerá

sus propiedades para reflejar el error y la información del mismo. Esta configuración también
es útil durante la depuración, ya que, de hecho, señalará el lugar del error del script,
apuntando a áreas potencialmente problemáticas del código (recuerde: las transacciones son
automáticamente revertidas si la excepción causa la finalización del script).

El modo Exception también es útil porque se puede estructurar el manejo de errores con
más claridad que con el estilo tradicional de advertencias de PHP, y con menos
código/anidación que, con la ejecución en modo silencioso, comprobando así explícitamente
el valor devuelto de cada llamada a la base de datos.

Véase la referencia de Excepciones para más información sobre excepciones en PHP.

PDO utiliza las cadenas de código de error SQLSTATE del estándar SQL-92; cada
controlador de PDO es responsable de la correspondencia de sus códigos nativos con los
códigos SQLSTATE apropiados. El método PDO::errorCode() devuelve un único código
SQLSTATE. Si fuera necesaria más información específica sobre el error, PDO también
ofrece el método PDO::errorInfo(), que devuelve un array que contiene el código
SQLSTATE, el código de error específico del controlador, y la cadena de error específica.
<?php
$dsn = 'mysql:dbname=prueba;host=[Link]';
$usuario = 'usuario';
$contraseña = 'contraseña';

try {
$mbd = new PDO($dsn, $usuario, $contraseña);
$mbd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo 'Falló la conexión: ' . $e->getMessage();
}

?>

290
Programación del lado del servidor
 4.6. Acceso a datos

PDO::__construct() siempre lanzará una PDOException si la conexión falla,

independientemente de que PDO::ATTR_ERRMODE esté esteblecido. Las excepciones no
capturadas son fatales.
<?php
$dsn = 'mysql:dbname=prueba;host=[Link]';
$usuario = 'usuario';
$contraseña = 'contraseña';

/*
El empleo de try/catch en el constructor sigue siendo válido aunque
se establezca ERRMODE a WARNING, ya que PDO::__construct siempre lanzará
una PDOException si la conexión falla.
*/
try {
$mbd = new PDO($dsn, $usuario, $contraseña, array(PDO::ATTR_ERRMODE =
> PDO::ERRMODE_WARNING));
} catch (PDOException $e) {
echo 'Error de conexión: ' . $e->getMessage();
exit;
}

// Esto hará que PDO lance un error de nivel E_WARNING en lugar de una
excepción (cuando la tabla no exista)
$mbd->query("SELECT columna_incorrecta FROM tabla_incorrecta");
?>

El resultado del ejemplo sería:

Warning: PDO::query(): SQLSTATE[42S02]: Base table or view not found:
1146 Table 'prueba.tabla_incorrecta' doesn't exist in
/tmp/prueba_pdo.php on line 18
Referencia: (The PHP Group, 2021)

291
Programación del lado del servidor
Capítulo 5 Cómputo en la nube y servicios

Competencias específicas y genéricas

Competencias específicas

Conoce y aplica los tipos de servicios, para lograr interconectividad entre

aplicaciones, considerando cómputo en la nube.

Competencias genéricas

Capacidad de análisis y síntesis.

Habilidad para buscar, procesar y analizar información procedente de fuentes diversas.

Solución de problemas.

Toma de decisiones.

Capacidad crítica y autocrítica.

Capacidad de trabajo en equipo.

Temario detallado de la unidad

5.- Cómputo en la nube y servicios

5.1. Conceptos generales.

5.2. Tipos de servicios en la nube.

5.3. Patrones de diseño.

5.4. Estándares en servicios

5.5. Plataformas tecnológicas

5.6. Seguridad e interoperabilidad

292
Cómputo en la nube y servicios
5.1. Conceptos generales
‘Una infraestructura de nube es el conjunto de hardware y software que permite las cinco
características esenciales de la computación en nube.

‘La infraestructura de la nube puede considerarse que contiene una capa física y una capa
de abstracción. La capa física consiste en los recursos de hardware necesarios para soportar
los servicios en la nube que se proporcionan, y normalmente incluye servidores,
almacenamiento y componentes de red. La capa de abstracción consiste en el software
desplegado en la capa física, que manifiesta las características esenciales de la nube.
Conceptualmente, la capa de abstracción se sitúa por encima de la capa física.

‘La computación en nube es un modelo que permite el acceso ubicuo, cómodo y a la carta
a un conjunto de recursos informáticos de recursos informáticos configurables (por ejemplo,
redes, servidores, almacenamiento, aplicaciones y servicios) que pueden ser rápidamente
aprovisionados y liberados con un mínimo esfuerzo de gestión o interacción con el proveedor
de servicios.

‘Este modelo de nube se compone de cinco características esenciales, tres modelos de

servicio y cuatro modelos de despliegue.

5.1.1. Características esenciales

Autoservicio a la carta. Un consumidor puede suministrar unilateralmente capacidades
de cómputo, como el tiempo de servidor y el almacenamiento en red, según sus necesidades,
de forma automática y sin interacción humana con cada proveedor de servicios.

Amplio acceso a la red. Las capacidades están disponibles en la red y se accede a ellas a
través de mecanismos estándar que promueven el uso de plataformas heterogéneas de clientes
ligeros o normales (p. ej, teléfonos móviles, tabletas, ordenadores portátiles y estaciones de
trabajo).

293
Cómputo en la nube y servicios
 Puesta en común de recursos. Los recursos informáticos del proveedor se ponen en
común para servir a múltiples consumidores utilizando un modelo multi-arrendatario, con
diferentes recursos físicos y virtuales asignados y reasignados dinámicamente en función de
la demanda de los consumidores. Existe una sensación de independencia en el sentido de que
el cliente generalmente no tiene control o conocimiento sobre la ubicación exacta de los
recursos proporcionados, pero puede especificar la ubicación a un nivel superior de
abstracción (por ejemplo, país, estado o centro de datos). Algunos ejemplos de recursos son
el almacenamiento, procesamiento, memoria y ancho de banda de la red.

Elasticidad rápida. Las capacidades pueden aprovisionarse y liberarse de forma elástica,

en algunos casos automáticamente, para escalar rápidamente hacia fuera y hacia dentro en
función de la demanda. Para el consumidor, las capacidades disponibles para el
aprovisionamiento suelen parecer ilimitadas y se pueden apropiar de ellas en cualquier
cantidad y en cualquier momento.

Servicio medido. Los sistemas en la nube controlan y optimizan automáticamente el uso

de los recursos aprovechando una capacidad de medición en algún nivel de abstracción
apropiado para el tipo de servicio (por ejemplo, almacenamiento, procesamiento, ancho de
banda y cuentas de usuario activas). El uso de los recursos puede ser monitorizado,
controlado y reportado, proporcionando transparencia tanto para el proveedor como para el
consumidor del servicio utilizado. (Mell & Grance, [Link] 2021)

5.1.2. Modelos de servicio

Todavía no se dispone de normas ampliamente aceptadas para ayudar a la integración de
los servicios en la nube en las arquitecturas de gobierno y empresariales, para permitir la
transferencia de datos entre nubes distintas o para permitir rápida adquisición y negociación
de contratos. No obstante, es posible partir del hecho que los servicios de Computación en la
Nube, como IaaS (Infraestructura como Servicio), PaaS (Plataforma como servicio) y SaaS
(Software como Servicio), descansan en los protocolos de comunicaciones TCP/IP y que las
aplicaciones y servicios ofrecidos por los sistemas de Cloud Computing están basados en
Servicios Web, Protocolos y Fomatos de datos Web con estándares bien establecidos.

294
Cómputo en la nube y servicios
 Software como servicio (SaaS). La capacidad que se ofrece al consumidor es la de
utilizar las aplicaciones del proveedor que se ejecutan en una infraestructura en la nube. Las
aplicaciones son accesibles desde varios dispositivos cliente a través de una interfaz de
cliente ligero, como un navegador web (por ejemplo, correo electrónico basado en la web),
o una interfaz de programa. El consumidor no gestiona ni controla la infraestructura
subyacente de la nube, incluyendo la red, los servidores, los sistemas operativos, el
almacenamiento o incluso las capacidades individuales de la aplicación, con la posible
excepción de los ajustes de configuración específicos del usuario.

Plataforma como servicio (PaaS). La capacidad que se ofrece al consumidor es la de

desplegar en la nube infraestructura de la nube aplicaciones creadas por el consumidor o
adquiridas mediante lenguajes de programación, librerías, servicios y herramientas
proporcionadas por el proveedor.

El consumidor no gestiona ni controla la infraestructura subyacente de la nube, incluida

la red, los servidores, los sistemas operativos o el almacenamiento, pero sí controla las
aplicaciones desplegadas y, posiblemente, los ajustes de configuración del alojamiento de
aplicaciones.

Infraestructura como servicio (IaaS). La capacidad que se proporciona al consumidor

es la de aprovisionar procesamiento, almacenamiento, redes y otros recursos informáticos
fundamentales en los que el consumidor es capaz de desplegar y ejecutar software arbitrario,
que puede incluir sistemas operativos y aplicaciones.

El consumidor no gestiona ni controla la infraestructura subyacente de la nube, pero tiene

control sobre los sistemas operativos, el almacenamiento y las aplicaciones desplegadas; y
posiblemente un control limitado de determinados componentes de red (por ejemplo,
cortafuegos de host).

5.1.3. Modelos de despliegue

Nube privada. La infraestructura de la nube se aprovisiona para el uso exclusivo de una
sola organización que comprende múltiples consumidores (por ejemplo, unidades de

295
Cómputo en la nube y servicios
negocio). Puede ser propiedad, estar gestionada y la organización, un tercero o una
combinación de ellos, y puede existir en las instalaciones o fuera de ellas.

Nube comunitaria. La infraestructura de la nube se suministra para el uso exclusivo de

una comunidad específica de consumidores de organizaciones que han compartido el uso de
la nube (por ejemplo, misión, requisitos de seguridad, política y consideraciones de
cumplimiento). Puede ser propiedad, gestionada y operada por una o más organizaciones de
la comunidad, por un tercero o por una combinación de ellas, y puede existir dentro o fuera
de las instalaciones.

Nube pública. La infraestructura de la nube se suministra para su uso abierto por el

público en general. Puede ser propiedad, estar gestionada y operada por una organización
empresarial, académica o gubernamental, o alguna combinación de ellas. Existe en las
instalaciones del proveedor de la nube.

Nube híbrida. La infraestructura de la nube es una composición de dos o más

infraestructuras de nube distintas (privadas, comunitarias o públicas) que siguen siendo
entidades únicas, pero que están unidas con tecnología estandarizada o propietaria que
permite la portabilidad de datos y aplicaciones portabilidad de datos y aplicaciones (por
ejemplo, cloud bursting para equilibrar la carga entre nubes). (Mell & Grance,
[Link] 2011).

5.2. Tipos de servicios en la nube

Tecnologías de implementación. Ayudan a las organizaciones a implementar el Cloud
Computing de diferentes formas, dependiendo de si despliegan nubes privadas (las
organizaciones pueden transformar su propia infraestructura de TI y sus procesos de
suministro de TI utilizando conceptos de computación en la nube, para fines propios), o de
si su intención es convertirse en proveedores de servicios en la nube (suministrar servicios
en la nube a terceros o en nombre de terceros, por ejemplo, algunos organismos
gubernamentales han creado infraestructura compartida que se suministra como servicio en
la nube a diversos organismos gubernamentales).

296
Cómputo en la nube y servicios
 Servicios en la nube de usos múltiples: algunas organizaciones, locales y
multinacionales, ofrecen un conjunto de servicios en la nube, en la mayoría de los
casos, servicios en la nube públicos para todos. Los servicios pueden ser desde la
disponibilidad de infraestructuras, plataformas de desarrollo, o programas y
aplicaciones.
Algunos de los servicios en la nube están diseñados para el consumo y otros para las
necesidades empresariales (y gubernamentales). En la mayoría de los casos, los
servicios de grado empresarial y los servicios de grado de consumidor se rigen por
diferentes principios, cláusulas contractuales, acuerdos de nivel de servicio (SLA por
sus siglas en inglés), modelos de negocio y reglas de seguridad y privacidad.
Nubes integradas verticalmente: son servicios a gran escala (por ejemplo, redes
sociales o motores de búsqueda), que se proporcionan a los usuarios y que se
ejecutan en la infraestructura de la nube desarrollada e integrada del proveedor.
Servicios innovadores en la nube: se ejecutan en la infraestructura de la nube
multiuso. En esta categoría, las compañías de todos los tamaños, proveedores de
software independientes (ISV por sus siglas en inglés), desarrollan servicios en la nube
para que otros los usen, sin embargo, necesitan infraestructura en la nube para
construir y operar sus propios servicios en lugar de crear los suyos. Esta categoría es
probablemente la más dinámica en el mercado, ya que las organizaciones
pequeñas, medianas y grandes pueden usar la infraestructura de la nube lista para
usar para brindar sus propios servicios a sus clientes, ya sea para consumidores o
para empresas.

5.2.1. Conectividad y administración de redes

La conectividad y el Cloud Computing, hoy día no están completamente unidos, porque
pueden ser empresas distintas las que proveen los servicios de conectividad (redes de
telecomunicaciones), el acceso a Internet (ISP), las redes de tránsito y los Data Centers.
Ahora bien, dado que los operadores de red, los proveedores de acceso a Internet y las
empresas que ofrecen conectividad con el resto del mundo son parte del mismo ecosistema,
es importante considerar las interdependencias entre ellos, y sí es el caso, solventar las
297
Cómputo en la nube y servicios
limitantes tanto técnicas como económicas para que el servicio sea entregado al cliente de
manera óptima. La tendencia actual señala que se seguirán implementando aplicaciones
sofisticadas que no podrán funcionar sobre redes rígidas o tradicionales (todas quellas que
no permiten insertar o segregar tráfico de manera sencilla, que no soportan mecanismos para
la diferenciación del tráfico, que no proveen anchos de banda bajo demanda, granulares y de
alta capacidad, y que adicionalmente tengan una compleja y especializada administración),
por lo contrario, estos servicios deberán contar con redes flexibles, escalables y de alta
velocidad. Por ejemplo, para implementar servicios bajo el escenario de uso de la tecnología
5G (IMT 2020), que soportan la entrada del internet de las cosas (IoT), ya sean masivas
(múltiples dispositivos de baja capacidad, no sensibles al retardo y comunicación
esporádica), o críticas (ultra baja latencia y alta disponibilidad y confiabilidad), es esencial
que las redes tengan la flexibilidad para cumplir por lo menos con las características de
desempeño requeridas como se establece en modelos de referencia (ITU-T Y.4000 / Y.2060).

Desde el punto de vista del despliegue de infraestructura, para determinar la viabilidad de

implementar los servicios en la nube en un país o región y por consiguiente su exitosa
adopción, es necesario que la infraestructura de red (el acceso local, la red de transporte
nacional y la conectividad a la red internacional), ofrezca un desempeño que sea el esperado
por los proveedores de servicios en la nube. Para ello los parámetros de latencia, las
velocidades de descarga y carga de información, los niveles de disponibilidad y las opciones
de redundancia y enrutamiento, son indicadores esenciales para evaluar las capacidades y
rendimiento de la red por donde viaja la información. Estos parámetros deberán cumplir con
niveles de tal manera que se puedan soportar los servicios en la nube de manera exitosa,
otorgándole al cliente una red confiable y eficiente, lo que motivaría la disponibilidad y
adopción de las soluciones que son provistas por Cloud Computing. (Instituto Federal de
Telecomunicaciones, 2020)

5.2.2. Virtualización
El primer concepto para entender cómo trabajan los equipos o servidores que conforman
las unidades básicas de los Data Center que habilitan los servicios en la nube es la

298
Cómputo en la nube y servicios
virtualización. Por ejemplo, un solo disco físico en un servidor dentro de un Data Center
puede contener información para varios inquilinos o clientes; el cifrado de datos y las técnicas
de segregación de datos lógicos que utiliza la virtualización proporcionan más seguridad y
protección contra el acceso a datos no deseados e internos, ya que es difícil apuntar a los
datos de un cliente específico. Mientras que un proveedor de servicios de Cloud Computing
proporcionará el mismo servicio a todos los clientes, un proveedor de servicios digitales o de
TI proporcionará contratos y servicios diferentes y específicos para cada cliente. La
virtualización es un proceso que separa las funciones o aplicaciones o software del hardware,
y las nubes dependen de esa separación. La forma más fácil de explicar la diferencia es
escribirla desde la perspectiva estricta de una infraestructura como servicio (IaaS). La base
del Cloud Computing es un sistema operativo estable. Esta es la capa que proporciona a los
usuarios la independencia en los entornos públicos, privados e híbridos.

El sistema operativo en el que implementa comúnmente es Linux que es un sistema

operativo libre tipo Unix; multiplataforma, multiusuario y multitarea. El sistema es la
combinación de varios proyectos, entre los cuales destacan GNU (encabezado por Richard
Stallman y la Free Software Foundation) y el núcleo Linux (encabezado por Linus Torvalds).
([Link]

Suponiendo que el acceso a Intranet o a Internet ya está establecido, la virtualización es

lo que crea las nubes. El software llamado hipervisor se coloca por encima del hardware
físico principal y extrae los recursos o funcionalidades de la máquina. Estos recursos pueden
ser el potencial de procesamiento en bruto, el almacenamiento o las aplicaciones basadas en
la nube que contienen todo el código de tiempo de ejecución y los recursos necesarios para
implementarlas.

El hipervisor, también llamado monitor de máquina virtual (VMM, por sus siglas en
inglés), es el núcleo central de algunas de las tecnologías de virtualización de hardware más
populares y eficaces, entre las cuales se encuentran las de Microsoft: Microsoft Virtual PC,
Windows Virtual PC, Microsoft Windows Server e Hyper-V. El hipervisor es la llave que
habilita la virtualización.([Link]

299
Cómputo en la nube y servicios
 La virtualización no implica Cloud Computing. Los recursos virtuales deben asignarse a
grupos centralizados antes de llamarlos nubes, y esas nubes deben coordinarse con software
de gestión y automatización antes de que se les pueda considerar Cloud Computing. Las
nubes proporcionan las ventajas adicionales del acceso de autoservicio, la asignación o
aumento automatizado de la infraestructura y los grupos de recursos dinámicos; esos son los
beneficios que marcan más claramente la diferencia de los servicios de Cloud Computing
con la virtualización tradicional. Algunas características que permiten diferenciar los
conceptos de virtualización y de Cloud Computing se muestran en la siguiente tabla:

Tabla 5.1 Diferencias entre virtualización y Cloud Computing

Virtualización Cloud Computing

Definición Tecnología Metodología

Próposito Crear múltiples entornos Agrupar y automatizar recursos

simulados desde un solo virtuales para su uso sobre
sistema de hardware físico demanda

Uso Entregar recursos en paquetes Entregar variedad de recursos a

a usuarios específicos para un grupos de usuarios para varios
fin determinado fines

Configuración Basado en imágenes Basado en plantillas

Duración Años (largo plazo) De horas a meses (corto plazo)

Costo Gastos de capital (CAPEX) Nube privada: CAPEX elevados,

elevados, gastos operativos OPEX bajos Nube pública:
(OPEX) bajos CAPEX bajos, OPEX elevados

Escalabilidad Escalabilidad vertical Escalabilidad horizontal

Carga de trabajo Con estado (statefull) Sin estado (stateless)

Tenencia Usuario único Varios usuarios

Esta información se obtuvo del (Instituto Federal de Telecomunicaciones, 2020).

300
Cómputo en la nube y servicios
5.3. Patrones de diseño

5.3.1. Patrones de diseño de software

Los patrones de diseño facilitan la reutilización de diseños y arquitecturas exitosos.
Promoviendo técnicas probadas de diseño hace que sean más accesibles para los
desarrolladores de nuevos sistemas. Los patrones de diseño le ayudan a elegir alternativas de
diseño que hacen un sistema reutilizable y evitar alternativas que comprometan la
reutilización. Los patrones de diseño pueden incluso mejorar la documentación y el
mantenimiento de los sistemas existentes proporcionando una especificación explícita de las
interacciones de clases y objetos y su intención subyacente. Los patrones de diseño ayudan
a un diseñador a realizar un diseño "correcto" más rápidamente. (Gamma, Helm, Johnson, &
Vlissides, 2009)

[Link]. ¿Qué es un patrón de diseño?

Christopher Alexander dice: "Cada patrón describe un problema que ocurre por encima y
por debajo de nuestro entorno, y luego describe el curso de la solución a ese problema, de tal
manera que se puede utilizar esta solución un millón de veces más, sin que se haga siempre
lo mismo". Aunque Alexander hablaba de patrones en edificios y ciudades, lo que dice es
cierto en cuanto a los patrones de diseño orientado a objetos. Nuestras soluciones se expresan
en términos de objetos e interfaces en lugar de muros y puertas, pero el núcleo de ambos
tipos de patrones es la solución de un problema en un contexto.

En general, un patrón tiene cuatro elementos esenciales:

1. El nombre del patrón es un nombre que podemos utilizar para describir un problema
de diseño, sus soluciones y consecuenciasen una o dos palabras. Nombrar un patrón aumenta
inmediatamente nuestro vocabulario de diseño. Nos permite diseñar a un mayor nivel de
abstracción. Tener un vocabulario de patrones nos permite hablar de ellos con nuestros
colegas, en nuestra documentación y hasta con nosotros mismos. Facilita la reflexión sobre
los diseños y la comunicación de los mismos con sus ventajas y desventajas a los demás.

301
Cómputo en la nube y servicios
 2. El problema describe cuándo aplicar el patrón. Explica el problema y su contexto.
Puede describir problemas de diseño específicos, como la representación de los algoritmos
como objetos. Puede que describa clases o estructuras de objetos que son sintomáticas de un
diseño inflexible. En ocasiones, el problema incluirá una lista de condiciones que deben
cumplirse antes de que tenga sentido aplicar el patrón.

3. La solución describe los elementos que componen el diseño, sus relaciones,

responsabilidades y colaboraciones. La solución no describe un diseño o implementación
concreta, porque un patrón es como una plantilla que puede aplicarse en muchas situaciones
diferentes. En su lugar, el patrón proporciona una descripción abstracta de un problema de
diseño y cómo una disposición general de elementos (clases y objetos en nuestro caso) lo
resuelve.

4. Las consecuencias son los resultados y compensaciones de la aplicación del patrón.

Aunque las consecuencias a menudo no se expresan cuando describimos las decisiones de
diseño, son fundamentales para evaluar las alternativas de diseño y para comprender los
costes y beneficios de la aplicación del patrón.

Las consecuencias para el software se refieren a las compensaciones de espacio y tiempo.

También pueden abordar cuestiones de lenguaje e implementación. Dado que la reutilización
es un factor en el diseño orientado a objetos, las consecuencias de un patrón incluyen su
impacto en la flexibilidad, la extensibilidad o la portabilidad de un sistema. Enumerar estas
consecuencias explícitamente le ayudará a comprenderlas y evaluarlas.

El punto de vista afecta a la interpretación de lo que es y no es un patrón. El patrón de una

persona puede ser el bloque de construcción primitivo de otra.

Los patrones de diseño no son como listas enlazadas y tablas hash que pueden codificarse
en clases y reutilizarse como tales. Tampoco se trata de diseños complejos y específicos para
una aplicación o un subsistema. Los patrones de diseño son descripciones de objetos y clases
que se comunican entre sí y que están optimizadas para solucionar un problema de diseño
general en un ámbito concreto.

302
Cómputo en la nube y servicios
 Un patrón de diseño nombra, abstrae e identifica los aspectos clave de un diseño común
que lo hacen útil para crear un diseño orientado a objetos reutilizable. El patrón de diseño
identifica las clases e instancias participantes, sus roles y colaboraciones, y la distribución de
responsabilidades. Cada patrón de diseño se centra en un problema particular de diseño
orientado a objetos. Describe cuándo se aplica, si puede aplicarse en vista de otras
restricciones de diseño, y las consecuencias y compensaciones de su uso.

Aunque los patrones de diseño describen diseños orientados a objetos, se basan en

soluciones prácticas que se han implementado en lenguajes de programación orientados a
objetos. (Gamma, Helm, Johnson, & Vlissides, 2009).

[Link]. Tipos de patrones de diseño

Los patrones de diseño se dividen en las categorías como en la Ilustración 5.1.

A continuación, se describe brevemente cada uno de los patrones de diseño clásico,

aunque hay algunos que han dejado de utilizarse o se usan muy poco como singlenton que
actualmente se desaconseja su uso.

Abstract Factory. Proporciona una interfaz para crear familias de objetos relacionados o
dependientes sin especificar sus clases concretas.
Se usa el patrón Factory cuando se require construir un objeto, así es, construir y no
crear. Cuando construye el objeto, primero lo crea y luego lo inicializa.

Es común tener que realizar múltiples pasos al momento de construer un objeto e incluir
cierta lógica. Básicamente, ese es el punto del patrón Factory. Es una buena idea definir una
interfaz para su fábrica y que su código dependa de ella y no de una fábrica concreta. Con
eso, puede reemplazar fácilmente una fábrica por otra cuando lo necesite.

303
Cómputo en la nube y servicios
 Ilustración 5.1 Tipos de patrones de diseño
<?php

/**
* La interfaz Abstract Factory declara un conjunto de métodos que devuelven
* diferentes productos abstractos. Estos productos se denominan familia y
están
* relacionados por un tema o concepto de alto nivel. Los productos de una
familia suelen ser
* capaces de colaborar entre sí. Una familia de productos puede tener
varias

304
Cómputo en la nube y servicios
 * variantes, pero los productos de una variante son incompatibles con los
productos de
* otra.
*/
interface FabricaAbstracta
{
public function creaProductoA(): ProductoAbstractoA;

public function creaProductoB(): ProductoAbstractoB;

}

/**
* Las fábricas concretas producen una familia de productos que pertenecen a
una única
* variante. La fábrica garantiza que los productos resultantes son
compatibles. Obsérvese
* que las firmas de los métodos de la Fábrica Concreta devuelven un
producto abstracto
* mientras que dentro del método se instancia un producto concreto.
*/

class FabricaConcreta1 implements FabricaAbstracta

{
public function creaProductoA(): ProductoAbstractoA
{
return new ProductoConcretoA1();
}

public function creaProductoB(): ProductoAbstractoB

{
return new ProductoConcretoB1();
}
}

/**
* Cada fábrica concreta tiene su correspondiente variante de producto.
*/
class FabricaConcreta2 implements FabricaAbstracta
{
public function creaProductoA(): ProductoAbstractoA
{
return new ProductoConcretoA2();
}

305
Cómputo en la nube y servicios
 public function creaProductoB(): ProductoAbstractoB
{
return new ProductoConcretoB2();
}
}

/**
* Cada producto distinto de una familia de productos debe tener una
interfaz base. Todas las
* variantes del producto deben implementar esta interfaz.
*/
interface ProductoAbstractoA
{
public function funcionUtilA(): string;
}

/**
* Los Productos concretos son creados por las correspondientes Fábricas
concretas.
*/

class ProductoConcretoA1 implements ProductoAbstractoA

{
public function funcionUtilA(): string
{
return "El resultado del producto A1.";
}
}

class ProductoConcretoA2 implements ProductoAbstractoA

{
public function funcionUtilA(): string
{
return "El resultado del producto A2.";
}
}

/**
* Aquí está la interfaz base de otro producto. Todos los productos pueden
* interactuar entre sí, pero la interacción adecuada sólo es posible entre
* los productos de la misma variante concreta.
*/

306
Cómputo en la nube y servicios
interface ProductoAbstractoB
{
/**
* El producto B es capaz de hacer sus propias cosas...
*/
public function funcionUtilB(): string;
/**
* ...pero también puede colaborar con el ProductoA.
*
* La Fábrica Abstracta se asegura de que todos los productos que crea
* son de la misma variante y por tanto, compatibles.
*/
public function otraFuncionUtilB(ProductoAbstractoA $colaborador):
string;
}

/**
* Los productos concretos son creados por las correspondientes fábricas
* concretas.
*/
class ProductoConcretoB1 implements ProductoAbstractoB
{
public function funcionUtilB(): string
{
return "El resultado del producto B1.";
}

/**
* La variante, Producto B1, sólo puede funcionar correctamente con la
* variante, Producto A1. Sin embargo, acepta cualquier instancia de
*ProductoAbstractoA como como argumento.
*/
public function otraFuncionUtilB(ProductoAbstractoA $colaborador): string
{
$resultado = $colaborador->funcionUtilA();

return "El resultado de B1 en colaboración con el ({$resultado})";

}
}

class ProductoConcretoB2 implements ProductoAbstractoB

{
public function funcionUtilB(): string

307
Cómputo en la nube y servicios
 {
return "El resultado del producto B2.";
}

/**
* La variante, Producto B2, sólo puede funcionar correctamente con la
* variante, Producto A2. Sin embargo, acepta cualquier instancia de
* ProductoAbstractoA como como argumento.
*/

public function otraFuncionUtilB(ProductoAbstractoA $colaborador): string

{
$resultado = $colaborador->funcionUtilA();

return "El resultado de B2 en colaboración con ({$resultado})";

}
}

/**
* El código del cliente trabaja con fábricas y productos sólo a través de
* tipos abstractos:
* FabricaAbstracta y ProductoAbstracto. Esto permite pasar cualquier
* fábrica o subclase de producto al código cliente sin romperlo.
*/
function codigoCliente(FabricaAbstracta $fabrica)
{
$productoA = $fabrica->creaProductoA();
$productoB = $fabrica->creaProductoB();

echo $productoB->funcionUtilB() . "\n";

echo $productoB->otrafuncionUtilB($productoA) . "\n";
}

/**
* El código del cliente puede trabajar con cualquier clase concreta de
fabrica
*/
echo "Cliente: Probando el código del cliente con el primer tipo de
fábrica:\n";
codigoCliente(new FabricaConcreta1());

echo "\n";

308
Cómputo en la nube y servicios
echo "Cliente: Probando el mismo código de cliente con el segundo tipo de
fábrica:\n";
codigoCliente(new FabricaConcreta2());
Referencia: ([Link], 2014)

Active record. Este patrón permite mapear las filas de una tabla o vista de una base de
datos dada a un objeto. Este objeto se encarga de interactuar con la base de datos y, por tanto,
todas las operaciones de CRUD se hacen a través de éste.

Ilustración 5.2 Patrón de Active Record

Las ventajas de este patrón es que evita duplicar código y también centraliza el acceso a
las bases de datos.

Las desventajas es que los objetos se encuentran fuertemente acoplados a la base de datos,
por lo que un cambio en el esquema se traduce en un cambio en su objeto asociado.
(Fernández, 2019)

Adapter. Convierte la interfaz de una clase en otra interfaz esperada por el cliente. El
adaptador permite que funcionen juntas clases que de otro modo no podrían hacerlo debido
a interfaces incompatibles.

Supongamos que en el proyecto obtiene los datos de algún almacenamiento utilizando la

siguiente clase.
class Almacenamiento {
private $fuente;

public function __constructor(InterfazAdapter $fuente) {

$this->fuente = $fuente;
}
public function getOne(int $id) : ?object {
return $this->fuente->find($id);
}
309
Cómputo en la nube y servicios
 public function getAll(array $criterio = []) : Collection {
return $this->fuente->findAll($criterio);
}
}
La clase Almacenamiento no funciona directamente con la fuente de datos, sino que
funciona con el adaptador asociado a la fuente de datos. Además, la clase Almacenamiento
no sabe nada sobre adaptadores en concreto. Solamente se refiere a la interfaz del adaptador.
Por lo tanto, la implementación concreta del adaptador es una caja negra para ella. Por
ejemplo:
interface InterfazAdapter {
public function find(int $id) : ?object;
public function findAll(array $criterio = []) : Collection;
}
Ahora se implementa una interfaz para MySql de las siguientes funciones:
$row = $mysql->fetchRow(...);
$data = $mysql->fetchAll(...);
class AdapterMySql implements InterfazAdapter {
...
public function find(int $id) : ?object {
$data = $this->mysqli->fetchRow(['id' => $id]);
//alguna transformación de datos
}
public function findAll(array $criterio = []) : Collection {
$data = $this->mysqli->fetchAll($criterio);
//alguna transformación de datos
}
...
}
Ahora se inyecta a la clase Almacenamiento como parámetro:
$almacenamiento = new Almacenamiento(new AdapterMySql());
Referencia: (PuroCodigo, 2015)

Bridge. Desacopla una abstracción de su implementación para que ambas puedan variar
independientemente.

Constructor. Separar la construcción de un objeto completo de su representación para

310
Cómputo en la nube y servicios
 que los mismos procesos de construcción pueden crear diferentes representaciones.

Chain of responsability. Evita que el envío de una solicitud se asocie a su recepción

dando a más de un objeto la posibilidad de gestionar la solicitud. En el caso de los objetos
receptores y pasa la solicitud a lo largo de la cadena hasta que un objeto la maneja.

Command. Encapsula una solicitud como un objeto, permitiendo así parametrizar a los
clientes con diferentes solicitudes, poniendo en cola o en bitácora las solicitudes, y
soportando operaciones que no se pueden deshacer.

Composite. Componer objetos en estructuras de árbol para representar jerarquías

parciales. La composición permite a los clientes tratar los objetos individuales y las
composiciones de objetos uniformemente.

El uso del patrón Composite sólo tiene sentido cuando el modelo central de tu aplicación
puede representarse en forma de árbol.
// La interfaz Graficos establece operaciones comunes para
// objetos simples y complejos.
interface Graficos es
method mueve(x, y)
method dibuja()

class Punto implements Graficos es

variables x, y
constructor Punto(x, y) { … }

method mueve(x, y) es
this.x += x, this.y += y

method dibuja() es
// Dibuja un punto en X e Y.

// Las clases de Grafico pueden extender otros

// componentes.
class Circulo extends Punto es
variables radio
constructor Circulo(x, y, radio) { ... }
method dibuja() es
// Dibuja un círculo en X y Y con radio R.

311
Cómputo en la nube y servicios
// La clase GraficoCompuesto tiene componentes complejos que
// pueden tener hijos.
class GraficoCompuesto implements Graficos es
variables hijos: arreglo de Graficos
// Se puede añadir o eliminar otros
// componentes a o desde su
// lista hija.
method agrega(hijo: Graficos) es
// Añade un hijo al arreglo de hijos.
method elimina(hijo: Graficos) es
// Elimina un hijo del arreglo de hijos.
method mueve(x, y) es
foreach (hijo in hijos) do
[Link](x, y)

// El GraficoCompuesto recorre recursivamente todos sus hijos,

// recopilando y resumiendo sus resultados. Debido a que
// los hijos del GraficoCompuesto pasan esas llamadas a sus propios
// hijos y así sucesivamente, como resultado se recorre todo el árbol de
// objetos.
method dibuja() es
// 1. Para cada componente hijo:
// - Dibuja el componente.
// - Actualiza el rectángulo delimitador.
// 2. Dibuja un rectángulo de línea punteada utilizando
// las coordenadas de delimitación.

// El código cliente trabaja con todos los componentes a través

// de su interfaz base. De esta forma el código cliente puede
// soportar componentes de hoja simples así como compuestos
// complejos.
class EditorDeImagenes es
variables todosLosGraficos: GraficoCompuesto

method carga() es
todosLosGraficos = new GraficoCompuesto()
[Link](new Punto(1, 2))
[Link](new Circulo(5, 3, 10))
// ...

// Combina componentes seleccionados para formar un

// componente compuesto complejo.

312
Cómputo en la nube y servicios
 method grupoSeleccionado(elementos: arreglo de Graficos) es
grupo = new GraficoCompuesto()
foreach (elemento in elementos) do
[Link](elemento)
[Link](elemento)
[Link](group)
// Se dibujarán todos los componentes.
[Link]()
Referencia: ([Link], 2014)

Decorator. Adjunta responsabilidades adicionales a un objeto de forma dinámica. Los

decoradores proporcionan una alternativa flexible a la subclasificación para ampliar la
funcionalidad.

Facade. Proporciona una interfaz unificada para una serie de interfaces en un subsistema.
Facade define una interfaz superior que facilita el uso del subsistema.

Factory method. Define una interfaz para crear un objeto, pero deja que las subclases
decidan qué clases hay que instanciar. El Factory method permite que una clase difiera la
instanciación a sus subclases.

El patrón Factory Method define un método que se utiliza en la creación de objetos,

ocultando la llamada directa al constructor (operador new). Las subclases deben sobrescribir
este método para cambiar las clases de los objetos que se crearán.
abstract class Creador
{
abstract public function metodoFabrica(): Producto;

public function algunaOperacion(): string

{
// Llama al método de fábrica para crear un objeto Producto.
$product = $this->metodoFabrica();
// Ahora, utiliza el producto
$result = "Creador: El mismo código del creador trabajará con esta
función " .
$product->operacion();
return $result;
}
}

313
Cómputo en la nube y servicios
class CreadorEspecifico1 extends Creador
{
public function metodoFabrica(): Producto
{
return new ProductoEspecifico1();
}
}

class CreadorEspecifico2 extends Creador

{
public function metodoFabrica(): Producto
{
return new ProductoEspecifico2();
}
}

interface Producto
{
public function operacion(): string;
}

class ProductoEspecifico1 implements Producto

{
public function operacion(): string
{
return "{Resultado del ProductoEspecifico1}";
}
}

class ProductoEspecifico2 implements Producto

{
public function operacion(): string
{
return "{Resultado del ProductoEspecifico2}";
}
}

function codigoCliente(Creador $creador)

{
// ...
echo "Cliente: No conozco la clase del creador, pero sigue
funcionando.\n"
. $creador->algunaOperacion();

314
Cómputo en la nube y servicios
 // ...
}

echo "Aplicación: ejecutado con el CreadorEspecifico1.\n";

codigoCliente(new CreadorEspecifico1());
echo "\n\n";

echo "Aplicación: ejecutado con el CreadorEspecifico2.\n";

codigoCliente(new CreadorEspecifico2());
Referencia: ([Link], 2014)

Flyweight. Utiliza compartir para soportar un gran número de objetos de grano fino de
forma eficiente.

Interpreter. Dado un lenguaje, define una representación de su gramática junto con un

intérprete que utiliza la representación para interpretar sentencias en éste.

Iterator. Proporciona una forma de acceder a los elementos de un objeto agregado de

forma secuencial sin exponer su representación subyacente.

Mediator. Define un objeto que encapsula cómo interactúan varios objetos. Mediator
fomenta el acoplamiento libre al evitar que los objetos se refieran unos a otros explícitamente,
y le permite variar su interacción de forma independiente.

Memento. Sin violar la encapsulación, captura y externaliza el estado interno de un objeto

para que el objeto pueda ser restaurado a este estado más tarde.

Observer. Define una dependencia de uno a muchos entre los objetos para que cuando
uno de ellos cambie de estado, todos sus dependientes son notificados y actualizados
automáticamente.

Prototype. Especifica los tipos de objetos que se crearán utilizando una instancia
prototípica, y crea nuevos objetos copiando este prototipo.

Proxy. Proporciona un sustituto o un lugar para otro objeto para controlar los accesos a
él.

Singleton. Garantiza que una clase sólo tiene una instancia y proporciona un punto global
de acceso a la misma.
315
Cómputo en la nube y servicios
 State. Permite que un objeto altere su comportamiento cuando cambia su estado interno.
El objeto indicará que ha cambiado.

Strategy. Define una familia de algoritmos, encapsula cada uno de ellos y los hace
intercambiables. Strategy permite que el algoritmo varíe independientemente de los clientes
que lo utilizan.

Template method. Define el esqueleto de un algoritmo en una operación, aplazando

algunos pasos a las subclases. El template method permite a las subclases redefinir ciertos
pasos de un algoritmo sin cambiar su estructura.

Visitor. Representa una operación que debe realizarse en los elementos de una estructura
de objeto. Visitor permite definir una nueva operación sin cambiar las clases de los elementos
sobre los que opera. (Gamma, Helm, Johnson, & Vlissides, 2009)

[Link] Diseño para el cambio

La clave para maximizar la reutilización reside en anticiparse a los nuevos requisitos y a

los cambios en los requisitos anteriores, y en diseñar los sistemas para que puedan
evolucionar en consecuencia.

Para diseñar el sistema de manera que sea robusto a estos cambios, se debe considerar si
el sistema puede necesitar cambios a lo largo de su vida útil. Un diseño que no tenga en
cuenta los cambios se arriesga a un rediseño importante en el futuro. Esos cambios podrían
implicar redefinición y reimplementación de clases, modificación del cliente y nuevas
pruebas. El rediseño afecta a muchas partes del sistema de software, y los cambios
imprevistos son siempre costosos.

Los patrones de diseño ayudan a evitar esto asegurando que un sistema pueda cambiar de
forma específica. Cada patrón de diseño permite que algún aspecto de la estructura del
sistema varíe independientemente de otros aspectos, lo que hace que un sistema sea más
resistente a un tipo de cambio concreto.

Hay algunas causas comunes de rediseño, junto con los patrones de diseño que las
abordan:

316
Cómputo en la nube y servicios
 1. Crear un objeto especificando explícitamente una clase. Especificar un nombre de
clase cuando se crea un objeto compromete a una implementación particular en lugar de una
interfaz particular. Este compromiso puede complicar futuros cambios. Para evitarlo, se
pueden crear objetos de forma indirecta.

Patrones de diseño: Abstract Factory, Factory Method, Prototype.

2. Dependencia de operaciones específicas. Cuando se especifica una operación

concreta, se puede utilizar una sola forma de satisfacer una solicitud. Al evitar las solicitudes
de código duro, se facilita el cambio de la forma en que se satisface una solicitud tanto en
tiempo de compilación como en tiempo de ejecución.

Patrones de diseño: Chain of Responsibility, Command.

3. Dependencia de la plataforma de hardware y software. Interfaces de sistemas

operativos externos y las interfaces de programación de aplicaciones (API) son diferentes en
las distintas plataformas de hardware y software. El software que depende de una plataforma
concreta será difícil de portar a otras plataformas. Incluso puede ser difícil mantenerlo
actualizado en su plataforma nativa. Por lo tanto, es importante diseñar su sistema para limitar
sus dependencias de la plataforma.

Patrones de diseño: Abstract Factory, Bridge.

4. Dependencia de representaciones o implementaciones de objetos. Los clientes que

saben cómo se representa, se almacena, se localiza o se implementa un objeto, pueden
necesitar ser cambiados cuando el objeto cambia. Ocultar esta información a los clientes evita
los cambios en cascada.

Patrones de diseño: Abstract Factory, Bridge, Memento, Proxy.

5. Algorithmic dependencies. Los algoritmos se amplían, optimizan y sustituyen durante

el desarrollo y la reutilización. Los objetos que dependen de un algoritmo tendrán que
cambiar cuando el algoritmo cambie. Por lo tanto, los algoritmos que pueden cambiar deben
ser aislados.

Patrones de diseño: Bulder, Iterator, Strategy, Template, Visitor.

317
Cómputo en la nube y servicios
 6. Acoplamiento débil. Las clases fuertemente acopladas son difíciles de reutilizar de
forma aislada, ya que dependen la una de la otra. El acoplamiento fuerte da lugar a sistemas
monolíticos, en los que no se puede cambiar o eliminar una clase sin entender y cambiar
muchas otras clases. El sistema se convierte en una masa densa que es difícil de aprender,
portar y mantener.

Un acoplamiento débil aumenta la probabilidad de que una clase pueda ser reutilizada por
su propio dueño y que un sistema pueda ser aprendido, portado, modificado y ampliado más
fácilmente. Los patrones de diseño utilizan técnicas como el acoplamiento abstracto y la
superposición de capas para promover sistemas débilmente acoplados.

Patrones de diseño: Abstract Factory, Bridge, Chain of Responsibility, Command, Facade,

Mediator, Observer.

7. Ampliación de la funcionalidad mediante subclases. La personalización de un objeto

mediante la subclasificación a menudo no es fácil. Cada nueva clase tiene una sobrecarga de
implementación fija (inicialización, finalización, etc.). La definición de una subclase también
requiere una comprensión profunda de la clase principal. Por ejemplo, la anulación de una
operación puede requerir la anulación de otra. Una operación anulada puede requerir que se
calcule una operación heredada.

Y la subclasificación puede dar lugar a una explosión de clases, ya que podría tener que
introducir muchas subclases nuevas incluso para una extensión sencilla.

La composición de objetos en general y la delegación en particular proporcionan

alternativas flexibles a la hora de heredar y combinar comportamientos. Se pueden añadir
nuevas funcionalidades a una aplicación mediante la composición de objetos existentes de
nuevas maneras, en lugar de definir nuevas subclases de objetos.

Por otro lado, el uso intensivo de la comunicación de objetos puede hacer que los diseños
sean más difíciles de entender. Muchos patrones de diseño producen diseños en los que se
puede introducir una funcionalidad personalizada con sólo definir una subclase y
componiendo sus instancias con las existentes.

318
Cómputo en la nube y servicios
 Patrones de diseño: Bridge, Chain of Responsibility, Composite, Decorator, Observer,
Strategy.

8. Imposibilidad de modificar las clases convenientemente. A veces hay que modificar

una clase que no puede ser modificada convenientemente. Quizás necesites el código fuente
y no se tenga (como puede ser el caso de una biblioteca de clases comercial). O tal vez un
cambio requeriría modificar muchas subclases existentes. Los patrones de diseño ofrecen
formas de modificar las clases en estas circunstancias.

Patrones de diseño: Adapter, Decorator, Visitor.

[Link]. Diferencias con los frameworks

Debido a que los patrones de diseño y los frameworks tienen algunas similitudes y
diferencias. Son diferentes en tres aspectos principales:

1. Los patrones de diseño son más abstractos que los frameworks. Los frameworks
pueden incorporarse en el código, pero sólo los ejemplos de patrones pueden incorporarse al
código. Un punto fuerte de los frameworks es que pueden escribirse en lenguajes de
programación y no sólo estudiarse, sino también, ejecutarse y reutilizarse directamente. En
cambio, los patrones de diseño tienen que implementarse cada vez que se utilizan. Los
patrones de diseño también explican la intención, las compensaciones y las consecuencias de
un diseño.

2. Los patrones de diseño son elementos arquitectónicos más pequeños que los
frameworks. Un framework de trabajo típico contiene varios patrones de diseño, pero lo
contrario nunca es cierto.

3. Los patrones de diseño son menos especializados que los frameworks. Los
frameworks siempre tienen un dominio de aplicación particular. Un framework de editor
gráfico puede utilizarse en una simulación de factores, pero no se confundirá con un
framework de simulación. En cambio, los patrones de diseño pueden utilizarse en casi todo
tipo de aplicaciones. Aunque es posible que existan patrones de diseño más especializados
que los nuestros (por ejemplo, patrones de diseño para sistemas distribuidos o programación

319
Cómputo en la nube y servicios
concurrente), incluso no dictarían una arquitectura de aplicación como lo haría un
framework.

Los frameworks son cada vez más comunes e importantes. Son la forma en que los
sistemas orientados a objetos consiguen la mayor reutilización. Las grandes aplicaciones
orientadas a objetos se componen de capas de frameworks que cooperan entre sí. La mayor
parte del diseño y el código de la aplicación provendrán de o serán influenciados por los
frameworks que se utiliza en la aplicación. (Gamma, Helm, Johnson, & Vlissides, 2009).

5.3.2. Patrones de diseño en la nube

‘Los patrones de diseño en la nube son útiles para crear aplicaciones confiables, escalables
y seguras.

Cada patrón describe el problema al que hace frente, las consideraciones sobre su
aplicación y un ejemplo basado en Microsoft Azure. La mayoría incluye ejemplos de código
o fragmentos de código que muestran cómo implementar el patrón en Azure. Sin embargo,
la mayoría de los patrones es importante para todos los sistemas distribuidos, tanto si están
hospedados en Azure como en otras plataformas en la nube.

[Link]. Patrones de administración de datos

La administración de datos es el elemento clave de las aplicaciones en la nube e influye

en la mayoría de los atributos de calidad. Los datos se hospedan normalmente en distintas
ubicaciones y entre varios servidores por motivos tales como el rendimiento, la escalabilidad
o la disponibilidad, lo cual puede conllevar varios desafíos. Por ejemplo, se debe mantener
la coherencia de los datos y estos deben estar sincronizados entre las diferentes ubicaciones.

Tabla 5.2 Patrones de administración de datos

Patrón Resumen

Cache-Aside Carga datos a petición en una memoria caché desde un almacén de

datos

320
Cómputo en la nube y servicios
 CQRS Segrega las operaciones de lectura de datos de las de actualización
de datos mediante interfaces independientes.

Event Sourcing Usa un almacén de solo anexar para registrar la serie completa de
eventos que describen las acciones realizadas en los datos de un
dominio.

Index Table Crea índices en los campos de los almacenes de datos a los que
suelen hacer referencia las consultas.

Materialized View Genera vistas rellenadas previamente de los datos en uno o más
almacenes de datos cuando los datos no tienen el formato idóneo
para las operaciones de consulta requeridas.

Sharding Divida un almacén de datos en un conjunto de particiones

horizontales o particiones de base de datos.

Static Content Implemente contenido estático en un servicio de almacenamiento

Hosting basado en la nube que pueda entregarlo directamente al cliente.

Valet Key Usa un token o clave que proporciona a los clientes acceso directo
restringido a un recurso o servicio específico.

[Link]. Diseño e implementación

Un buen diseño incluye factores como la coherencia en el diseño e implementación de los

componentes, el mantenimiento para simplificar la administración y el desarrollo, y la
reutilización para permitir que los componentes y subsistemas se puedan utilizar en otras
aplicaciones y escenarios. Las decisiones tomadas durante la fase de diseño e implementación
tienen un gran impacto en la calidad y el costo total de propiedad de las aplicaciones y
servicios hospedados en la nube.

Tabla 5.3 Patrones de diseño e implementación

Patrón Resumen

321
Cómputo en la nube y servicios
 Ambassador Crea servicios auxiliares que envían solicitudes de red en
nombre de una aplicación o servicio de consumidor.

Anti-Corruption Layer Implementa una capa de fachada o de adaptador entre una

aplicación moderna y un sistema heredado.

Backends for FrontEnds Crea servicios independientes de back-end que

determinadas aplicaciones de front-end o interfaces puedan
usar.

CQRS Segrega las operaciones de lectura de datos de las de

actualización de datos mediante interfaces independientes.

Compute Resource Consolida varias tareas u operaciones en una sola unidad

Consolidation de cálculo.

External Configuration Extrae la información de configuración del paquete de

Store implementación de la aplicación y la lleva a una ubicación
centralizada.

Gateway Aggregation Usa una puerta de enlace para agregar varias solicitudes
individuales en una sola solicitud.

Gateway Offloading Descarga una funcionalidad de servicio compartida o

especializada en un proxy de puerta de enlace.

Gateway Routing Enruta las solicitudes a varios servicios mediante un solo

punto de conexión.

Leader Election Coordina las acciones realizadas por una colección de

instancias de tareas de colaboración de una aplicación
distribuida mediante la elección de una instancia como líder
que asume la responsabilidad de administrar las demás
instancias.

322
Cómputo en la nube y servicios
 Pipes and Filters Desglosa una tarea que realiza un procesamiento complejo
en una serie de elementos independientes que se pueden
volver a utilizar.

Sidecar Implementa componentes de una aplicación en un proceso

o contenedor independientes para proporcionar aislamiento
y encapsulación.

Static Content Hosting Implemente contenido estático en un servicio de

almacenamiento basado en la nube que pueda entregarlo
directamente al cliente.

Fig Strangles Migra de forma incremental un sistema heredado

reemplazando gradualmente funciones específicas por los
servicios y aplicaciones nuevas.

[Link]. Mensajería

La naturaleza distribuida de las aplicaciones en la nube requiere una infraestructura de

mensajería que permite conectar los componentes y servicios, idealmente mediante un
acoplamiento flexible, para maximizar la escalabilidad. La mensajería asincrónica se usa
ampliamente y ofrece numerosas ventajas, pero también supone desafíos como la ordenación
de los mensajes, la administración de mensajes dudosos, la idempotencia, etc.

Tabla 5.4 Patrones de mensajería

Patrón Resumen

Solicitud y Desacople el procesamiento de back-end de un host de front-end en el que el

respuesta procesamiento de back-end tiene que ser asincrónico, pero en el que, aún así,
asincrónicas el front-end necesita una respuesta clara.

Comprobación de Divida un mensaje grande en una comprobación de notificaciones y una carga

notificaciones para evitar sobrecargar un bus de mensajes.

323
Cómputo en la nube y servicios
Organización Haga que cada componente del sistema participe en el proceso de toma de
decisiones sobre el flujo de trabajo de una transacción empresarial, en lugar de
depender de un punto central de control.

Competing Permite que varios consumidores simultáneos procesen los mensajes recibidos
Consumers en el mismo canal de mensajería.

Pipes and Filters Desglosa una tarea que realiza un procesamiento complejo en una serie de
elementos independientes que se pueden volver a utilizar.

Priority Queue Clasifica por orden de prioridad las solicitudes enviadas a los servicios para que
aquellas con una prioridad más alta se reciban y procesen más rápidamente que
las que tienen una prioridad más baja.

Publisher- Permita que una aplicación anuncie eventos de forma asincrónica a varios
Subscriber consumidores interesados, sin necesidad de emparejar los remitentes con los
receptores.

Queue-Based Load Usa una cola que actúa como búfer entre una tarea y un servicio que invoca
Leveling para equilibrar cargas pesadas intermitentes.

Scheduler Agent Coordina un conjunto de acciones en un conjunto distribuido de servicios y

Supervisor otros recursos remotos.

Convoy secuencial Procesa un conjunto de mensajes relacionados en un orden definido, sin

bloquear el procesamiento de otros grupos de mensajes.

Referencia: (Microsoft Azure, s.f.)

5.4. Estándares en servicios

5.4.1. Introducción
Las organizaciones de elaboración de normas (SDO) suelen tener un proceso que siguen
para elaborarlas. Por ejemplo, la Organización Internacional de Normalización (ISO) sigue
un proceso de seis pasos18 que incluye: propuesta, preparación, comité, investigación,
324
Cómputo en la nube y servicios
aprobación y publicación. La hoja de ruta de las normas de computación en nube del NIST
incluye una "conceptualización de alto nivel de las formas en que se desarrollan las normas
de TI y los métodos por los que se despliegan los productos, procesos y servicios de TI
basados en normas".

El reto al que se enfrenta la normalización mediante el proceso convencional de desarrollo

de normas basado en la SDO en la computación en nube reside en el tiempo que transcurre
desde la normalización hasta la disponibilidad del producto. El proceso de desarrollo de
normas debe ser tan ágil como el ciclo de vida de desarrollo de productos de servicios en la
nube, para responder a los requisitos del gobierno y empresas en general. Por lo tanto, es
necesario acelerar el modelo de desarrollo de normas, teniendo en cuenta al mismo tiempo
la necesidad de un proceso voluntario basado en el consenso. Este nuevo modelo de
desarrollo de normas reduciría la incertidumbre técnica a la que se enfrentan los gobiernos y
empresas preocupados por la interoperabilidad, la portabilidad y la seguridad a la hora de
adoptar un servicio en la nube durante el período de transición, al tiempo que garantizaría
que las normas de computación en nube se formalicen y estén ampliamente disponibles en el
mercado.

La adopción de normas es un proceso evolutivo. A lo largo del proceso, las normas crecen
tanto en aceptación como en madurez, y pueden tardar años en madurar. La mayoría de las
normas pueden clasificarse generalmente como uno (o más) de los siguientes tipos en algún
momento del ciclo de vida del desarrollo de normas.

 Estándares abiertos. Están abiertos a que cualquiera participe en su desarrollo e

implementación (por ejemplo, libres de derechos).

 Especificaciones propietarias. Se desarrollan de forma privada y normalmente se

conceden licencias para su aplicación. A veces, aunque no siempre, una vez que
reciben suficiente aceptación por parte de la industria, evolucionan hasta convertirse
en normas de facto.

325
Cómputo en la nube y servicios
  Normas de facto. Se consideran normas del sector gracias a su amplia adopción y
aplicación "en la práctica". Han ganado aceptación y, por tanto, se espera que formen
parte de la hoja de ruta de un producto, en lugar de exigírseles.

 Normas de jure. se formalizan a través de un organismo de normalización, lo que

hace que sean ampliamente aprobadas debido a su aceptación formal.

5.4.2. Conceptos básicos de Cloud Computing

La computación en la nube, tal y como la define el Instituto Nacional de Normas y
Tecnología (NIST), es "un modelo que permite un acceso a la red ubicuo, cómodo y a la carta
a un conjunto compartido de recursos de cómputo configurables (por ejemplo, redes,
servidores, almacenamiento, aplicaciones y servicios) que pueden ser utilizados por los
usuarios que pueden ser rápidamente aprovisionados y liberados con un mínimo esfuerzo de
gestión o interacción con el proveedor de servicios".

Una infraestructura de nube es el conjunto de hardware y software que permite las cinco
características esenciales de la computación en nube.

La infraestructura de la nube puede considerarse que contiene una capa física y una capa
de abstracción. La capa física consiste en los recursos de hardware necesarios para soportar
los servicios en la nube que se proporcionan, y normalmente incluye servidores,
almacenamiento y componentes de red. La capa de abstracción consiste en el software
desplegado en la capa física, que manifiesta las características esenciales de la nube.
Conceptualmente, la capa de abstracción se sitúa por encima de la capa física.

Las nubes utilizan uno de los tres tipos principales de modelos de cómputo, y los
proveedores las despliegan de forma pública o privada. El tipo de modelo de servicio y el
modelo de despliegue afectan a la medida en que la nube puede beneficiarse de la
estandarización.

326
Cómputo en la nube y servicios
5.4.3. Estándares de Cloud Computing
Los estándares para la computación en la nube seguirán evolucionando, madurando y
ganando aceptación. No se pretende ofrecer un catálogo completo de normas que apoyen la
computación en nube, ya que la armonización de las normas podría llevar muchos años. En
cambio, se intenta abordar la importancia de que los estándares de la nube promuevan la
apertura y la flexibilidad de elección por parte del gobierno y empresas privadas, al tiempo
que apoyan los requisitos mínimos de interoperabilidad, portabilidad y seguridad. Para ello
es necesario centrarse en el desarrollo continuo de casos de uso de la computación en nube
para anticipar dónde se utilizarán las tecnologías de la nube, de modo que las organizaciones
de normalización, los grupos industriales y las asociaciones puedan coordinar sus esfuerzos
para definir las normas existentes e identificar dónde será necesario desarrollar nuevas
normas.

Entre los principales esfuerzos de estandarización de la Computación en la Nube se

encuentran los realizados por la UIT (Unión Internacional de Telecomunicaciones ó ITU por
sus siglas en inglés). La ITU-T estudia la computación en nube mediante el FG (Grupo Focal
sobre la computación en nube), y se decidió que el grupo de trabajo SG13 dirigirá la actividad
de normalización de Cloud Computing, y el grupo SG17 cubrirá la seguridad en la nube.
Algunas de las recomendaciones que han sido desarrolladas por estos grupos son:
 ITU-T Y.3501: Esta recomendación proporciona un marco de referencia para Cloud
Computing mediante la identificación de requisitos de alto nivel para la computación en
nube. La Recomendación trata los requisitos generales y los casos de uso de: (a) la
computación en nube;

(b) Infraestructura como Servicio (IaaS), la Red como un Servicio (NaaS) y el escritorio
como servicio (DaaS); y también (c) interconexión entre las nubes, la gestión de extremo a
extremo de los recursos y la infraestructura Cloud.

 UIT-T Y.3510: Esta Recomendación identifica los requisitos para las capacidades de
infraestructura en la nube para apoyar los servicios de nube. El alcance de esta
Recomendación incluye: visión general de la infraestructura de la nube, los requisitos para

327
Cómputo en la nube y servicios
los recursos informáticos, los requisitos de recursos de la red, los requisitos de recursos de
almacenamiento, y los requisitos para la abstracción y control de recursos. La abstracción y
control de los recursos físicos son medios esenciales para alcanzar a la carta y las
características elásticas de infraestructura Cloud.

 UIT-T Y.3520: Describe la plataforma de computación en nube necesaria para la gestión

de recursos de los usuarios finales; por tanto, proporciona un marco para la gestión de
extremo a extremo de los recursos de computación en nube. Esta Recomendación incluye (a)
conceptos generales de extremo a extremo la gestión de recursos de Cloud Computing, (b)
una visión para la adopción de la gestión de recursos de computación en nube en un entorno
rico en telecomunicaciones, y (c) la gestión de extremo a extremo de los recursos y servicios
de la nube a través de múltiples plataformas, es decir, la gestión de todo el hardware y el
software utilizado en favor de la prestación de servicios en la nube.

 UIT-T Y.3511: Marco de la computación en nube para la comunicación inter-redes y la

infraestructura. Esta recomendación describe el marco para las interacciones de múltiples
proveedores de servicios Cloud (CSP) que se conoce como inter-Cloud Computing. Sobre la
base de los casos de uso que implican varios CSP y la consideración de los diferentes tipos
de ofertas de servicios, esta recomendación se describe la posible relación entre varios CSP,
las interacciones, y los requisitos funcionales pertinentes.

 UIT-T X.1600: Marco de seguridad para el Cloud Computing. En esta recomendación se

analizan las amenazas y los retos en el entorno de Cloud Computing en cuanto a seguridad;
también describe las capacidades de seguridad que podrían mitigar estas amenazas y desafíos
a la seguridad. Se proporciona una metodología marco para determinar cuál de estas
capacidades de seguridad requerirá de especificación para mejorar la mitigación de las
amenazas de seguridad y hacer frente a los desafíos de seguridad de la computación en nube.
(Padilla Aguilar & Pinzón Castellanos, 2015)

328
Cómputo en la nube y servicios
5.5. Plataformas tecnológicas
El Cloud Computing incluye un conjunto de servicios que se ofrecen a través de Internet
y la empresa o institución puede configurar sus cargas de procesamiento, administrar IoT,
Big, Data, tecnología Serverless, usar máquinas virtuales e implemeción de soluciones WEB
como servicios. Permiten también redundancia, tanto local como distribuida
geográficamente.

Otra ventaja es que permite eliminar los costos indirectos. No se require invertir en un
conjunto de servidores ni en consumos eléctricos, tampoco en mantenimiento ni renovación
después de su vida útil también disminuyen los costos operativos que pueden ser contratados
ocasionalmente para la configuración y aprovisionamiento del servicio a implementar y
eliminar la necesidad de tener administradores de sistemas a tiempo completo.

Los servicios ofrecidos sonInfraestructura como servicio (IaaS), Plataforma como servicio
(PaaS) y software cmo servicio (SaaS).

IaaS nos libera del hardware por completo, PaaS suministra el hardware y el software de
base subyacente a las aplicaciones y nos deja la responsabilidad de las aplicaciones y las
bases de datos.

SaaS suministra el hardware, el software de base y aplicaciones especificas abstrayendo

completamente el mantenimiento del servicio, como por ejemplo el correo electrónico o el
almacenamiento en la nube.

Tanto en IaaS como en PaaS, los proveedores ofrecen soluciones automatizadas para la
configuración y administración de los servicios contratados, lo que reduce los tiempos de
aprovisionamiento para la implementación de aplicativos.

Naturalmente, por definición se ofrecen opciones de escalado tanto horizontal, como

vertical, esto es, se puede agregar dinámicamente más cpu’s, memria, almacenamiento, más
servidores e incluso balanceadores de carga y distribución de bases de datos, entre otros.

329
Cómputo en la nube y servicios
5.5.1 AWS
Amazon Web Services ofrece soluciones de alojamiento web en la nube que proporcionan
a los negocios, las organizaciones sin fines de lucro y los organismos gubernamentales
maneras de entregar sus sitios y aplicaciones web a bajo costo. Independientemente de si está
buscando un sitio web de e-commerce, con medios enriquecidos o de marketing, AWS ofrece
una amplia gama de opciones de hospedaje para sitios web.

Amazon Elastic Compute Cloud (Amazon EC2). es un servicio web que proporciona
capacidad de cómputo configurable en la nube. Está diseñado para facilitar a los
desarrolladores recursos de cómputo escalables y basados en web.

Permite capacidad de cómputo de tamaño variable en la nube. EC2 puede aplicarse para
alojar sitios web que usan varios centros de datos y en sitios que tienen que escalarse con
balanceador de carga, autoscaling o bases de datos externas.

Amazon EC2 reduce el tiempo necesario para obtener y arrancar nuevas instancias de
servidor en minutos, lo que permite escalar rápidamente la capacidad, ya sea aumentándola
o reduciéndola, según cambien sus necesidades.

Amazon EC2 cambia el modelo económico de la computación, al permitir pagar sólo por
la capacidad que utiliza realmente.

Amazon Lightsail. Permite servidores privados virtuales simplificados quel se pueden

usar para alojar sitios web simples que se construyen con aplicaciones comunes, como
WordPress, Joomia, Drupal y Magento.

AWS Lambda. Permite ejecutar código como respuesta a eventos y administrar de

manera automática los recursos de cómputo.

Elastic Load Balancing. Distribuye automáticamente el tráfico de aplicaciones entrante

entre varios destinos, tales como las instancias de Amazon EC2, los contenedores, las
direcciones IP, las funciones Lambda y los dispositivos virtuales.

330
Cómputo en la nube y servicios
 Amazon S3 Permite administrar infraestructura de almacenamiento de objetos segura,
duradera y escalable. S3 se puede usar para alojar sitios web estáticos que entregan HTML,
JavaScript, imágenes y videos para sitios que no contienen scripts del lado del servidor.

Consola de AWS Amplify Permite crear, implementar y alojar modernas aplicaciones

web con tecnología de la nube. Amplify es mejor para sitios web con marcos de aplicaciones
de una sola página o generadores de sitios estáticos.

5.5.2. Azure
Azure es una plataforma de nube abierta y flexible que permite compilar, implementar y
administrar aplicaciones rápidamente en una red global de centros de datos administrados
por Microsoft. Puede compilar aplicaciones en cualquier lenguaje, herramienta o marco,
permitiendo además integrar sus aplicaciones de nube públicas con el entorno de TI existente.

En el entorno local, en varias nubes y en el perímetro, permite Integrar y administrar

entornos con herramientas y servicios diseñados para la nube híbrida.

Admite todos los lenguajes y plataformas, y ofrece la posibilidad de crear soluciones de

la configurables y de implementarlas donde sea necesario.

5.5.3. Google
Google App Engine permite crear y alojar aplicaciones web en los mismos sistemas
escalables con los que funcionan las aplicaciones de Google. Google App Engine ofrece
procesos de desarrollo y de implementación rápidos, y una administración sencilla, sin
necesidad de preocuparse por el hardware, las revisiones o las copias de seguridad y una
ampliación sin esfuerzos. Las aplicaciones Google App Engine son fáciles de crear, fáciles
de mantener y fáciles de escalar a medida que el tráfico y las necesidades de almacenamiento
de datos crecen. Con App Engine no es necesario mantener ningún servidor. Basta con cargar
su aplicación y esta ya se encontrará lista para servir a los usuarios.

Ofrece máquinas virtuales que se ejecutan en el centro de datos de google, entornos

administrados para ejecutar aplicaciones en contenedores basado en la máquina de

331
Cómputo en la nube y servicios
kubernetes de google, permite monitorear y almacenar los registros de rendmiento de las
aplicaciones, almacenamiento de objetos seguro, duradero y escalable, almacén de datos para
agilizar las operaciones empresariales y extraer información valiosa. Ofrece entornos
totalmente administrados para ejecutar aplicaciones en contenedores basado en Cloud run.
Ofrece bilbiotecas y herramientas en línea de comandos para Google Cloud, CDN Cloud es
una red de distribución para publicar contenido web y de video que permite almacenamiento
dedicado fuera del servidor de la aplicación. Anthos plataforma para crear y modernizar
aplicaciones. Cloud SQL es un servicio de bases de datos relacionales para MySQL,
PostgresSQL y SQL Server, Dataflow permite hacer análisis de streaming para el
procesamiento de streaming y por lotes.

Ofrece elementos de IA muy interesantes como integración de IA en aplicaciones con

modelos entrenados previamente o personalizados, AutoML, entrenamiento y desarrollo de
modelos de aprendizaje automático personalizados, Visión. Modelos personalizados y
entrenados previamente para detectar emociones, texto y mucho más, video AI clasificación
y reconocimiento de videos mediante aprendizaje autompatico, Lenguaje Natural Cloud,
análisis de opinión y clasificación de texto no estrucutrado, Cloud translation, detección de
idiomas, traducción y compatibilidad con glosarios.

Ofrece otras tecnologías como administración de APIs que van desde el análisis, la
monetización, plataforma el portal para desarrolladores entre otras.

En computación ofrece la app Engine, para aplicaciones sin servidor que incluye la propia
aplicación y el backend, bare metal, infraestructura para ejecutar cargas de trabajo
especializadas en Google Cloud, GPUs de Cloud para aprendizaje automático, computación
científica y visualización en 3D, máquinas virtuales tolerantes a fallos máquinas virtuales
blindadas.

Tiene más de cien productos, incluyendo IoT, multimedia, videojuegos, redes, seguridad
e identidad, computación serverless y más.

332
Cómputo en la nube y servicios
5.5.4. Red Hat openshift
OpenShift es la oferta de plataforma como servicio para Computación en la nube de Red
Hat. En esta plataforma los desarrolladores de aplicaciones pueden construir, desplegar,
probar y correr sus aplicaciones. Prporciona espacio en disco, recursos de CPU, memoria,
conectividad de red y un servidor Apache o JBoss. Dependiendo del tipo de aplicación que
se está construyendo, también proporciona acceso a una plantilla de sistema de archivos para
esos tipos (por ejemplo, PHP, Python y Ruby/Rails). También proporciona herramientas de
desarrollo integradas para apoyar el ciclo de vida de las aplicaciones, incluyendo la
integración de Eclipse, JBoss Developer Studio, Jenkins, Maven y GIT. OpenShift utiliza un
ecosistema de código abierto para proporcionar servicios clave de la plataforma de
aplicaciones móviles (Appcelerator), servicios NoSQL (MongoDB), servicios de SQL
(PostgreSQL, MySQL), y más. JBoss proporciona una plataforma de middleware
empresarial para aplicaciones Java, proporcionando apoyo para Java EE6 y servicios
integrados tales como transacciones y mensajes, que son fundamentales para las aplicaciones
empresariales.

5.5.5. IBM SmartCloud

SmartCloud ofrece una gestión de cloud con el valor agregado que permite la elección y
la automatización más allá del aprovisionamiento de máquinas virtuales. IBM SmartCloud
Enterprise+ es un entorno Cloud seguro, totalmente administrado y listo para producción,
diseñado para garantizar una alta performance y disponibilidad. SmartCloud Enterprise+
ofrece un control completo de «governance», administración y gestión, permitiendo definir
acuerdos de nivel de servicio (SLA) para alinear las necesidades de negocio y los requisitos
de uso. Ofrece además múltiples opciones de seguridad y aislamiento, integrados en la
infraestructura virtual y de red, manteniendo el cloud separado de otros entornos cloud.

5.5.7 VM Cloud Suite

La virtualización de VMware ha ayudado a los clientes a reducir drásticamente los gastos
de capital gracias a la consolidación de servidores. Ha mejorado los gastos de explotación

333
Cómputo en la nube y servicios
mediante la automatización y ha minimizado la pérdida de ingresos porque reduce el tiempo
de inactividad, planificado y no planificado. Sin embargo, las empresas actuales también
necesitan reducir el tiempo de comercialización de sus productos y servicios. Las unidades
de negocio exigen acceso rápido a los recursos de TI y a las aplicaciones. Se presenta a
continuación (figura 2.3), la solución para la nube propuesta por VMware, y también un
cuadro que define las responsabilidades de cada uno de los productos para la gestión e
infraestructura de la nube.

5.5.8. OpenStack
OpenStack es un conjunto de proyectos de software de código abierto que las empresas /
proveedores de servicios pueden usar para configurar y ejecutar su nube de computación e
infraestructura de almacenamiento. Rackspace y la NASA son los contribuyentes iniciales
clave para la pila. Rackspace contribuyó con su plataforma «Archivos en la Nube» (código)
para alimentar la parte de almacenamiento de objetos de OpenStack, mientras que la NASA
aportó su plataforma «Nebulosa» (código) para alimentar la parte Compute. El Consorcio
OpenStack ha logrado tener más de 100 miembros, incluyendo Canonical, Dell, Citrix, etc
en menos de un año. OpenStack hace que sus servicios se encuentren disponibles por medio
de una API compatible con Amazon EC2/S3. Por lo tanto, las herramientas cliente escritas
para AWS se pueden utilizar con OpenStack.

5.5.9. DigitalOcean
Ofrece máquinas virtuales llamadas droplets, kubernetes, plataforma para apps, bases de
datos libres de mantenimiento como mongoDB, MySql, postgresSQL, Redis y de
configuración, almacenamiento basado en objetos, almacenamiento de volúmenes en bloque,
Tiene herramientas de desarrollo como API, CLI, monitoreo, trabajo en equipo, despliegue
de aplicaciones. Ofrece nube privada virtual, balanceadores de carga, ips flotantes, servicio
de DNS entre otros.

334
Cómputo en la nube y servicios
5.5.10. Oracle Cloud OCl
Tanto si se ncesita modernizar las aplicaciones de forma amplia, buscar oportunidades
específicas en el sector u optimizar una única tecnología como VMware, OCI reúne más de
80 servicios en la nube con SaaS líder en gestión interna y específico del sector en una única
plataforma de infraestructura. Se puede empezar a usar las arquitecturas de referencia y las
soluciones totalmente automatizadas disponibles para el despliegue directo en tu entorno
OCI.

OCl utiliza entornos híbridos y multinube permite migrar aplicacines locales a la nube,
permite desplegar VMware en la nube híbrida de modo que las cargas de trabajo basadas en
ésta no se rediseñen. Oracle Cloud VMware Solution proporciona un entorno virtulizado
nativo en la nube adminsitrado por el cliente, con infraestructura elástica.

El Centro de datos con bases de datos autónomas permite eliminar prácticamente toda la
complejidad asociada a la administración y protección de bases de datos locales. Autonomous
database administra el hardware y automatiza el aprovisionamiento, la configuración, el
ajuste, el escalado, la protección, las copias de seguridad y la reparación de las bases de datos,
reduciendo hasta en un 80% los costos de administración de bases de datos.

Con los recursos informáticos y almacenamiento en la nube en ubicaciones remotas se

ofrecen servicios de computaqción en la nube y almacenamiento en el borde de las redes y
en lugares desconectados, lo que permite un procesamiento más rápido cerca de la fuente de
datos y una visión más rápida de los mismos.

Oracle Cloud permite ejecutar aplicaciones de producción, análisis, data Lakers, y

prácticamente cualquier carga de trabajo en Azure y OCl como si fuera una única nube,
permitiendo obtener lo mejor de ambos mundos con una interconexión con latencia de
milisegundos en ocho regiones de todo el mundo con identidad federada y soporte
colaborativo.

Junto con lo anterior, Oracle Cloud proporciona más de 80 servicios en la nube.

En la tabla se resumen otras plataformas en la nube

335
Cómputo en la nube y servicios
Tabla 5.5 Otros servicios de nube

Nombre Descripción
Ofrece una variedad de servicios en la nube como firewalls, servidores,
Kamatera
almacenamiento, almacenamiento en bloque, balanceador de carga, etc. La
plataforma es muy fácil de usar y ofrece más de 40 de las aplicaciones y
servicios de implementación más populares, con solo hacer clic en un botón.
Algunos de ellos se enumeran a continuación.

 WordPress
 Docker
 pfSense
 NFS
 MongoDB
 HAProxy
 Importa más
 Rancher
 Elasticsearch
 OpenVPN

Aunque la empresa tiene más de 20 años de experiencia en la nube,

Kamatera En el nuevo jugador en auge en los mercados globales, con 14
centros de datos en cuatro continentes, el repentino aumento de popularidad
de Kamatera se debe principalmente a sus valores agregados únicos: VM de
precio justo (a partir de $ 4 al mes), escalabilidad y flexibilidad asombrosas
con la configuración del servidor y opciones de pago, excelentes
rendimientos y lo más importante: servicios en la nube personalizados y
hechos a medida con soporte 24/7.

Simplifica la administración al tiempo que ofrece alojamiento en la nube a

Vultr
costos muy económicos. Los planes comienzan en tan solo $ 2.5 por mes.

Vultr proporciona la mayoría de las funciones que puede esperar, como

escalado automático, cambio de tamaño, elección de sistema operativo,
almacenamiento SSD de alta velocidad y otras. Vale la pena mencionar
algunos de los siguientes.

 Elección de 16 regiones diferentes.

 Ejecuta un servidor en la nube redundante en segundo plano para
garantizar un excelente tiempo de actividad.
 Abundantes opciones para la informática según las necesidades
personalizadas.

336
Cómputo en la nube y servicios
  Proporciona almacenamiento en bloque SSD dedicado para ampliar el
almacenamiento en cualquier momento.
 Proporciona API para crear o administrar su propia plataforma de
alojamiento personalizada sobre Vultr
 Programe una copia de seguridad automática, tome una instantánea
de toda la máquina virtual.
 Protección cortafuegos y DDoS.
 Balanceador de carga para escalabilidad y alta disponibilidad.

Con un panel de control fácil de usar, puede poner en funcionamiento su VM

en unos 60 segundos.
Alibaba Ofrece una gran cantidad de productos, puede pensar en alojar casi todo dentro
Cloud de China ofreciendo también 12 centros de datos internacionales y tiene
compatibilidad con ICP, que puede ser una gran oferta cuando no desea entrar
en trámites y procesos de licencia de ICP complicados.
Es una plataforma centrada en el desarrollador que facilita la vida a los
UpCloud
DevOps.

Es una plataforma única que admite la creación de infraestructura mediante

código. Es compatible con la mayoría de los marcos de infraestructura como
código (IaC) como Terraform, Ansible, Packer y LibCloud. Además, también
proporciona bibliotecas cliente API en varios lenguajes populares, lo que lo
hace destacar.

UpCloud se destaca por las siguientes características.

 Almacenamiento MaxIOPS que garantiza un mejor rendimiento

 Cree imágenes de SO personalizadas para cumplir con los estándares
de seguridad de la organización
 Potente API para automatizar todo
 Redes privadas entre sus centros de datos

Puede tener sus servidores físicos en sus centros de datos. Perfecto para
construir una plataforma de nube híbrida.
es perfecto para alojar aplicaciones web, desde un blog personal hasta
Linode
comercio electrónico.

Linode se encarga de todo, desde la migración a la nube hasta la

configuración de DNS, el equilibrio de carga, el escalado automático y la
provisión de precios predecibles. Sería una buena alternativa a DigitalOcean.

337
Cómputo en la nube y servicios
 Linode es conocido por sus características esenciales, como a continuación.

 Excelente soporte 24 × 7.
 Nano computaciones para aplicaciones web pequeñas o para un servidor
de prueba.
 Almacenamientos de objetos compatibles con S3 que lo hacen ideal para
operaciones de análisis de big data y aprendizaje automático.
 11 centros de datos globales que brindan una excelente flexibilidad de
implementación y capacidad para cumplir con las normas a nivel de país.
 Aplicaciones de un clic para WordPress, Drupal, Gitlab.

Como puede verse, hay muchísimos proveedores de servicios en la nube, lo importante es

ver cuál se adapta a las necesidades particulares de cada quien, en cuanto a costo y
versatilidad.

5.6. Seguridad e interoperabilidad

5.6.1 Seguridad en la nube

La autenticación de usuarios corresponde a un usuario o programa que necesita ser
identificado en el entorno de la nube. Es importante diferenciar entre dos tipos de usuarios
de los entornos de la nube: los usuarios finales y los usuarios de los recursos de la nube.

Los usuarios finales son los usuarios de las aplicaciones desplegadas en los recursos de
la nube. Dado que estos usuarios se registran e identifican con la aplicación y no con los
recursos de la infraestructura, no suelen ser conscientes de que la aplicación se está
ejecutando en los recursos de la nube.

Los usuarios de recursos en la nube suelen ser administradores de los recursos en la

nube. Estos usuarios también pueden establecer permisos para los recursos basados en roles,
listas de acceso, direcciones IP, dominios, etc.

Este segundo tipo de usuario es de mayor interés desde la perspectiva de la

interoperabilidad.

338
Cómputo en la nube y servicios
[Link]. Aprovisionamiento de cuentas de usuario

El aprovisionamiento de cuentas de usuario es el acto de crear, actualizar o deshabilitar

registros de cuenta de usuario en el almacén de perfiles de usuario local de una aplicación.
La mayoría de las aplicaciones SaaS y en la nube almacenan el rol y los permisos de los
usuarios en el propio almacén local de perfiles de usuario del usuario y la presencia de tal
registro de usuario en el almacén local del usuario es necesaria para que funcionen el inicio
de sesión único y el acceso.

Las opciones disponibles incluyen:

Automático: esta opción admite el aprovisionamiento automático basado en API o el

desaprovisionamiento de cuentas de usuario para aplicaciones en específico. Este modo
muestra una interfaz que permite a los administradores conectarse a la API de administración
de usuarios de la aplicación y crear asignaciones de cuentas y flujos de trabajo que definen
cómo deben fluir los datos de la cuenta de usuario y la aplicación y administrar el servicio de
aprovisionamiento.

Con el aprovisionamiento automático de usuarios, se puede guardar automáticamente en

todas las aplicaciones compatibles los cambios que se hagan en las identidades de los
usuarios en la consola de administración. Los usuarios se sincronizan cada cierto tiempo.

Manual: En este caso, los registros de cuenta de usuario almacenados en la aplicación

deben administrarse mediante un proceso externo, según las funcionalidades de
aprovisionamiento y administración de usuarios proporcionadas por la aplicación (que puede
incluir el aprovisionamiento Just-In-Time de SAML). (Microsoft, 2021)

[Link]. Autentificación de usuarios en la nube

El proceso de autentificación es precedido por la identificación del usuario que consiste

en presentar al sistema las credenciales de usuario. La autenficación es el proceso de validar
estas credenciales de tal manera que se demuestre que realmente es quien dice ser. A estas
credenciales se les conoce como factores de autentificación.

339
Cómputo en la nube y servicios
 ‘Los mecanismos de autenticación para verificar la identidad digital de los usuarios se
diferencian unos de otros según posean un mayor o menor número de factores de
autenticación, interpretados cada uno de ellos como capas de seguridad que protegen la
confidencialidad de los datos de autenticación. Son tres los factores mediante los cuales un
usuario puede verificar su identidad:

 Por medio de algo que el usuario sabe: autenticación basada en información que solo
él conoce. Por ejemplo, una contraseña o PIN.

 Por medio de algo que el usuario tiene: autenticación basada en la posesión de algo,
ya sea físico o no. Por ejemplo, un token o un código recibido por SMS.

 Por medio de algo inherente al usuario: autenticación basada en una característica

biométrica. Por ejemplo, su huella dactilar o el reconocimiento facial.

A estos factores se pueden sumar otros dos, de menor uso:

 Por medio de donde el usuario se encuentra: autenticación basada en su ubicación en

el momento de realizar la acción.

 Por medio de lo que el usuario hace: autenticación basada en algún comportamiento

específico sobre un dispositivo, como la forma en la que mueve el mouse o pulsa una
tecla/pantalla.

La combinación de diferentes factores añade más capas de seguridad al procedimiento

de autenticación, dotando de robustez a la verificación y dificultando la intrusión y
suplantación de identidad por parte de terceros. Hablamos de autenticación fuerte cuando
se combinan al menos dos factores para garantizar que el usuario que se autentica es
realmente quien dice ser. Y toda autenticación fuerte es, además, una autenticación
multifactor (MFA), donde el usuario verifica su identidad tantas veces como factores se
combinen. Así, si uno de los factores falla o se ve atacado por un ciberdelincuente, existen
más barreras de seguridad antes de que este pueda acceder a la información. La combinación
de factores de autenticación para añadir capas de seguridad en la verificación de la
identidad de los usuarios dependerá de las necesidades de cada empresa. En función del

340
Cómputo en la nube y servicios
número y tipo de factores que se combinen da lugar a distintos mecanismos de
autenticación, siendo los más comunes:

Los tokens de contraseña única (OTP): Dispositivos físicos que poseen una pequeña
pantalla donde se muestra un número aleatorio generado por sí mismo. El usuario verifica su
identidad a través de este código junto a un número PIN o contraseña que solo él conoce.

Las tarjetas inteligentes/tokens USB: Requieren la posesión de la propia tarjeta o token

(algo que el usuario tiene), una contraseña para desbloquear los certificados alojados en el
dispositivo (algo que sabe) y la autenticación por medio de parámetros biométricos (algo
inherente a él).

Por medio de correo electrónico: El usuario se autentica haciendo clic en un enlace que
contiene un email recibido en su bandeja de entrada, a la que solo puede acceder él a través
de una contraseña que conoce.

Por medio de SMS: Se envía al móvil del usuario un mensaje de texto con un código que
introducirá para autenticarse en la plataforma o web en la que desea realizar el trámite,
habiendo accedido previamente mediante un usuario y contraseña que solo él conoce.

Por medio de datos biométricos: Este tipo de autenticación hace referencia a algo
inherente al usuario, como su huella dactilar, su iris o su rostro, entre otros. Normalmente se
emplean para verificar la identidad del usuario en trámites de alto riesgo o valor.

Certificado digital: Considerado el mecanismo de autenticación más seguro y preciso

para garantizar y verificar la identidad del usuario. Su carácter de autenticación se asegura al
estar expedido por una Autoridad de Certificación (CA), como la FNMT. Cada vez son más
los trámites que solo pueden realizarse mediante vía telemática a través de estos, por lo que
su uso en el entorno empresarial no deja de aumentar.

Cabe destacar que para asegurar una autenticación fuerte las empresas emplean, como
mínimo, mecanismos de autenticación de dos factores (2FA). En sectores como el bancario
su aplicación es de obligado cumplimiento. Por ejemplo, para que los clientes de entidades
bancarias puedan realizar pagos de forma segura y vía telemática es necesario que estas
permitan las transacciones a través de un 2FA.’ (keyfactor, s.f.)
341
Cómputo en la nube y servicios
[Link]. Administración de las políticas de autorización de acceso a datos en
la nube

Las políticas de autorización de acceso indican la forma en la que se asignan los recursos
a un usuario.

‘La autorización ya no es una característica potestativa, sino que es un imperativo. Los

permisos y el acceso para las identidades de los usuarios deben estar bien definidas y
verificadas, y los usuarios con exceso de privilegios también deben estar identificados y sus
privilegios, catalogados.

Al planificar una infraestructura en cloud, se debe tener en cuenta todo esto junto con lo
que nos ofrece nuestro proveedor en la nube. Aplicar un modelo al principio con privilegios
mínimos y definir permisos para cada entidad debería ser la tónica general.

Esto permitirá concentrarse en actualizar el acceso y las definiciones de permisos cada

vez que se introduzca una nueva posición o aplicación en la nube para nuestra empresa. Sólo
después de haber establecido esta estrategia, podremos adaptarnos a este mundo en constante
cambio a la vez que reducimos el riesgo de errores de configuración que puedan ponernos en
más de un aprieto.

El primero de los pasos, que viene a ser un resumen de lo que he señalado arriba, es saber
qué usuarios pueden acceder a qué y por qué pueden. En un entorno en la nube, es aún
más importante definir privilegios sólidos. Cada entidad, máquina o espacio de
almacenamiento debe tener su propio propósito específico, y la comunicación entre los
servicios debe ser de acuerdo a las necesidades y el uso. Una vez que hayamos establecido
estos límites para cada recurso, será mucho más sencillo monitorear la actividad extraña y
acceder a los cambios. Podremos concentrarnos en actividades consecuentes, en lugar de
apagar incendios.

Delegar permisos de acceso a roles, con cada acceso de autorización sólo a los recursos
que necesitamos. Indentifica usuarios con demasiados permisos tal y como se hace en un
entorno local. Cuando se reducen el número de entidades con acceso a información
confidencial, es más fácil monitorearlos e identificar comportamientos inusuales o nuevos en

342
Cómputo en la nube y servicios
nuestra red en la nube. Recordemos que nunca se sabe dónde empezará una violación, ya sea
por credenciales robadas de un admin o una vulnerabilidad de día cero en una aplicación
web.

La nube brinda un espacio de almacenamiento prácticamente ilimitado en todo el mundo.

Úsalo, pero, al igual que no pondrías un servidor proxy en la misma máquina que donde está
nuestra base de datos o de código local, no colocaremos todos nuestros datos en un mismo
almacenamiento o conjunto de permisos en la nube. Como consejo final, decir que justo
cuando nuestra empresa crece y nuestros productos mejoran, los proveedores de cloud
actualizan su infraestructura y amplían sus herramientas de seguridad. Debemos asegurarnos
de seguir los cambios en las pautas de seguridad de nuestro proveedor cloud y actualizarnos
al conjunto más sólido de herramientas de seguridad que ofrezcan. (Ache, 2019)

[Link]. Sincronización de credenciales de usuario entre las empresas

y la nube

Por este medio, una empresa puede mantener toda su estructura organizacional de usuarios
y permisos y reflejarla en sus aplicaciones en la nube con mínimos cambios.

[Link]. Políticas generales de autorización en la nube

‘Hay algunas políticas que se deben de tener presente cuando se trabaja en entornos de nube

1. Aplicación del uso de la autenticación de varios factores (MFA). Restrinja el acceso

a los recursos exclusivamente a los usuarios autenticados a través de una contraseña de un
solo uso limitada por tiempo. Debe solicitarlo a nivel de usuario y aplicarlo a nivel de
recursos. Puede aplicar MFA para un recurso en la política de acceso que permite el acceso
al recurso.

2. No utilizar la cuenta de administrador de arrendamiento para las operaciones

diarias. Se deben crear administradores de nivel de servicio en el arrendamiento para limitar
aún más el acceso administrativo. Los administradores de nivel de servicio solo deben
gestionar recursos de un dominio o servicio específico.

343
Cómputo en la nube y servicios
 3. Crear políticas de seguridad para evitar el bloqueo de cuentas de administrador.
En caso de que el administrador del arrendamiento abandone su organización.

4. Restricción de las capacidades de administrador de un grupo de administradores

de arrendamiento. Los permisos de administrador deben seguir la regla de privilegio
mínimo, por lo que la pertenencia a un grupo de administradores o el anexo a una política de
administración se debe limitar a una base según sea necesario.

5. Evitar la eliminación accidental o maliciosa de (y cambios en) políticas de acceso.

Cuando se creen o asignen permisos se deben de configurar de tal forma que no puedan ser
actualizados o eliminados por otros administradores.

6. Supervisión y gestión de las actividades y el estado de todos los usuarios.

Supervisar y gestionar las actividades y el estado de todos los usuarios.

 Cuando un empleado abandone la organización, desactive el acceso al arrendamiento

suprimiendo el usuario inmediatamente.

 Aplique la rotación de la contraseña de usuario y las claves de API cada 90 días o

menos.

 Asegúrese de que las credenciales de Identity and Access Management (IAM) no están
codificadas en ninguna de la documentación de operaciones o software.

 Cree un usuario de IAM para todos los usuarios de la organización que necesiten
acceder a recursos del arrendamiento. No comparta un usuario de IAM entre varios
usuarios humanos.

 Revise los usuarios de los grupos de IAM periódicamente y elimine los usuarios que
ya no necesitan acceder.

 Cambie las claves de API de IAM al menos cada 90 días para reducir el riesgo de
comprometerse.’ (Oracle, s.f.)

344
Cómputo en la nube y servicios
[Link]. Esfuerzos de estandarización

‘Amazon Web Services Identity Access Management (AWS IAM): Amazon utiliza este
mecanismo para la autenticación y gestión de usuarios, y se está convirtiendo en un estándar
de facto [Amazon 2012d]. Soporta la creación y la gestión de permisos para múltiples
usuarios dentro de una cuenta de AWS. Cada usuario tiene credenciales de seguridad únicas
con las que puede acceder a los servicios asociados a una cuenta. Eucalyptus también utiliza
AWS IAM para la autenticación y gestión de usuarios.

OAuth: OAuth es un protocolo abierto de la Internet Engineering Task Force (IETF)

[OAuth 2010]. Proporciona un método para que los clientes accedan a los recursos del
servidor en nombre del propietario del recurso.

También proporciona un proceso para que los usuarios finales autoricen el acceso de
terceros a sus recursos de servidor sin compartir sus credenciales. La versión actual es la 1.0,
y el trabajo del IETF continúa para la versión 2.0.

Al igual que WS-Security, la versión 2.0 de OAuth admitirá la información de usuario en

los mensajes del Protocolo Simple de Acceso a Objetos (SOAP). Las plataformas en la nube

que soportan OAuth incluyen [Link], Google App Engine y Microsoft Azure.

- OpenID: OpenID es un estándar abierto que permite autenticar a los usuarios de forma
descentralizada [OpenID 2012]. Los usuarios crean cuentas con un proveedor de identidades
OpenID y luego utilizan cuentas (o identidades) para autenticarse con cualquier recurso web
que acepte la autentificación de OpenID.

Las plataformas en la nube que soportan OpenID incluyen Google App Engine y Microsoft
Azure. OpenStack tiene un proyecto en curso para soportar OpenID.

- WS-Security: WS-Security es una especificación estándar de seguridad de OASIS [OASIS

2006]. La versión actual es la 1.1. WS-Security describe cómo asegurar los mensajes SOAP
utilizando firma del lenguaje de marcado extensible (XML) y el cifrado XML, y adjuntar
tokens de seguridad a los mensajes SOAP. Las plataformas en la nube que admiten WS-
Security para la autenticidad de los mensajes son Amazon EC2 y Microsoft EC2.’ (Lewis,
2012)
345
Cómputo en la nube y servicios
5.6.2. Interoperabilidad en la nube

[Link]. Migración de carga de trabajo

‘La migración de cargas de trabajo corresponde a la migración de una carga de trabajo de

un proveedor de servicios en la nube a otro proveedor de servicios en la nube. La migración
de una carga de trabajo requiere

La migración de una carga de trabajo requiere (1) la extracción de la carga de trabajo de

un entorno de nube y (2) la subida de la carga de trabajo a otro entorno de nube. Algunos de
los estándares que soportan esto son:

Imagen de máquina de Amazon (AMI): Una AMI es un tipo especial de máquina virtual
que puede ser desplegada dentro de Amazon EC2 y también se está convirtiendo en un
estándar de facto [Amazon 2012b]. Eucalyptus y OpenStack también soportan AMI.

Open Virtualization Framework (OVF): OVF es un estándar de empaquetamiento de

máquinas virtuales desarrollado y apoyado por el DMTF [DMTF 2012]. Las plataformas en
la nube que soportan OVF incluyen Amazon EC2, Eucalyptus y OpenStack.

Disco duro virtual (VHD): VHD es un formato de archivo de máquina virtual soportado
por Microsoft [Microsoft 2006]. Las plataformas en la nube que soportan VHD incluyen
Amazon EC2 y Microsoft Azure.

[Link]. Migración y administración de datos

‘La migración y gestión de datos corresponde a la migración de datos de un proveedor de

la nube a otro. Al igual que la migración de la carga de trabajo, requiere (1) la extracción de
los datos de un entorno de nube y (2) la carga de los datos a otro entorno de nube. Además,
en un contexto de interoperabilidad, una vez que los datos se han trasladado al nuevo
proveedor, cualquier programa que haya realizado operaciones de creación, recuperación,
actualización o eliminación (CRUD) de esos datos en el proveedor de la nube original debería
seguir funcionando en el nuevo proveedor de la nube.

346
Cómputo en la nube y servicios
 Hay dos tipos de almacenamiento en la nube. El almacenamiento de datos tipificados
funciona de forma similar a una base de datos compatible con SQL y permite realizar
operaciones CRUD en tablas definidas por el usuario. El almacenamiento de objetos permite
realizar operaciones CRUD de objetos genéricos que van desde elementos de datos (similares
a una fila de una tabla), archivos y a imágenes de máquinas virtuales.

Algunos de los estándares que soportan la migración de datos, especialmente para el

almacenamiento de objetos, son:

Interfaz de gestión de datos en la nube (CDMI): CDMI es un estándar respaldado por

la Storage Networking Industry Association (SNIA) [SNIA 2011]. CDMI define una API
para el CRUD de datos desde un entorno de almacenamiento en la nube. También define una
API para el descubrimiento de las capacidades de almacenamiento en la nube y la gestión de
los contenedores de datos.

SOAP: Aunque SOAP no es un estándar específico de datos, varios proveedores de

almacenamiento en la nube soportan interfaces de gestión de datos y almacenamiento que
utilizan SOAP como protocolo. SOAP es una especificación del W3C que define un marco
para construir mensajes basados en XML en un entorno descentralizado y en red [W3C
2007]. La versión actual es la 1.2, y HTTP es el mecanismo de transporte primario.

Amazon S3 ofrece una interfaz basada en SOAP que otros entornos de almacenamiento
en la nube, como como Eucalyptus y OpenStack, pueden utilizar.

Transferencia de Estado Representacional (REST): REST tampoco es un estándar

específico para los datos, pero varios proveedores de almacenamiento en la nube admiten
interfaces RESTful. REST se considera una arquitectura y no un protocolo [IBM 2008]. En
una implementación de REST, cada entidad que puede ser identificada, nombrada, dirigida
o manejada se considera un recurso. Cada recurso es direccionable a través de su identificador
universal de recursos y proporciona la misma interfaz, tal y como se define en HTTP: GET,
POST, PUT, DELETE. Amazon S3 proporciona una interfaz RESTful que Eucalyptus y
OpenStack también son compatibles. Otros proveedores con interfaces RESTful para la
gestión de datos son [Link] de [Link], Microsoft Windows Azure (Windows

347
Cómputo en la nube y servicios
Azure Storage), OpenStack (Object Storage) y Rackspace (Cloud Files). La API definida por
CDMI es una interfaz RESTful.

[Link]. Administración de cargas de trabajo

‘La administración de cargas de trabajo corresponde a la administraión de una carga de

trabajo desplegada en el entorno de la nube, como iniciar, detener, cambiar o consultar el
estado de una instancia virtual.

En un contexto de interoperabilidad una organización puede utilizar idealmente cualquier

programa de administración de carga de trabajo con cualquier proveedor. Aunque la mayoría
de los entornos de administración o herramientas de línea de comandos, también
proporcionan APIs basadas en REST o SOAP.

Entre los proveedores que ofrecen API basadas en SOAP o RESTful para la
administración de cargas de trabajo se encuentran Amazon EC2, Eucalyptus, GoGrid Cloud
Servers, Google App Engine, Microsoft Windows Azure y OpenStack (Image Service).
(Lewis, 2012).

348
Cómputo en la nube y servicios
Bibliografía
Ache, R. (18 de Noviembre de 2019). [Link] Recuperado el 07 de
Diciembre de 2021, de [Link]
[Link]
empresa/

Alonso Amo, F., Martínez Normand, L., & Segovia Pérez, F. (2005). Introducción a la ingeniería de
software: modelos de desarrollo de programas. Zaragoza: Delta publicaciones
Universitarias.

arkaitzgarro. (15 de Noviemnre de 2021). [Link] Obtenido de

[Link] [Link]
[Link]

Bernnat, R., & Zink, W. (2012). [Link] Berlin: Federal Ministry of

Economics and Technology . Obtenido de [Link]
[Link]/sites/default/files/trustedcloud-studie-standardisation-environment-for-cloud-
[Link]

Bitbucket. (21 de Septiembre de 2021). [Link] Obtenido de [Link]

[Link]

Castro, R. (7 de Enero de 2021). [Link] Obtenido de

[Link] [Link]
instalar-wsl-windows-subsystem-for-linux-windows-10/

codersfree. (20 de Septiembre de 2021). [Link] Obtenido de

[Link] [Link]
espa%C3%B1ol/instalacion

debian. (28 de Agosto de 2021). [Link]. Obtenido de [Link]:

[Link]

[Link]. (20 de Septiembre de 2021). [Link] Obtenido de

[Link] [Link]

Fernández, G. (09 de Enero de 2019). [Link] Recuperado el 02 de

Diciembre de 2021, de [Link]
[Link]

Fulton, J. (7 de Noviembre de 2017). [Link] Obtenido de [Link]

[Link]
349
Bibliografía
Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (2009). Design Patterns Elements of Reusable
Object-Oriented Software (37th printing ed.). Westford, Massachussetts, United States of
America: Addison-Wesley. Recuperado el 30 de Noviembre de 2021

github. (28 de Mayo de 2018). [Link] Obtenido de

[Link] [Link]

Gugelmin Cunha , R. (20 de Septiembre de 2021). [Link] Obtenido de

[Link] [Link]
root-mysql-5-7

howtoforge. (20 de Septiembre de 2021). [Link] Obtenido de

[Link] [Link]
on-debian-11/

[Link] (26 de Noviembre de 2021). Obtenido de [Link]

[Link]

[Link] (15 de Noviembre de 2921). Obtenido de [Link]

[Link]

IngenioVirtual. (s.f.). [Link] Recuperado el 16 de Septiembre de 2021,

de [Link] [Link]
sobre-tecnologias-de-desarrollo-web/

Instituto Federal de Telecomunicaciones. (01 de Julio de 2020). [Link] Obtenido

de [Link] [Link]
[Link]

keyfactor. (s.f.). [Link] Recuperado el 07 de Diciembre de 2021, de

[Link] [Link]

Król, K. (2020). Evolution Of Online Mapping: From Web 1.0 To WEB 6.0. Recuperado el 30 de 10
de 2021, de [Link] [Link]

Lea, T. (26 de Enero de 2021). [Link] Obtenido de [Link]

[Link]

Leiner, B., Cerf, V., Clark, D., Kahn, R., Kleinrock, L., Lynch, D., . . . Wolff, S. (1997).
[Link] Obtenido de [Link]
[Link]
Internet_1997.pdf

350
Bibliografía
Lewis, G. (Octubre de 2012). [Link] Recuperado el 07 de Diciembre de
2021, de [Link]
[Link]

Mateu, C. (2004). Desarrollo de aplicaciones web. Cataluña: Eureka Media,SL.

MDN web Docs Moz:illa. (18 de Noviembre de 2021). [Link] Obtenido de

[Link] [Link]
US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction

Mell, P., & Grance, T. (Septiembre de 2011). [Link] Recuperado el 06 de

Diciembre de 2021, de [Link]
[Link]

Mell, P., & Grance, T. (29 de 11 de 2021). [Link] Obtenido de

[Link]
[Link]

Microsoft. (2009). Microsoft Application Architecture Guide.

microsoft. (09 de Septiembre de 2020). [Link] Obtenido de

[Link] [Link]
manual

Microsoft. (22 de Octubre de 2021). [Link] Recuperado el 07 de

Diciembre de 2021, de [Link]
[Link]
automatic-user-provisioning-portal#provisioning-modes

Microsoft Azure. (s.f.). [Link] Recuperado el 03 de Diciembre de 2021, de

[Link] [Link]
es/azure/architecture/patterns/#challenges-in-cloud-development

Nagy, Z. (Noviembre de 2015). Integrated Design Pattern for Intelligent Web Applications.
Obtenido de [Link]
[Link]
telligent_Web_Applications

Nixon, R. (2014). Learning PHP, MySQL, JavaScript, CSS & HTML5. Sebastopol, CA: O’Reilly.

Oktaba, H., Alquicira Esquivel, C., Su Ramos, A., Martínez Martínez, A., Quintanilla Osorio, G.,
Ruvalcaba López, M., . . . Flores Lemus, M. Á. (2005). Modelo de Procesos para la Industria
de Software MoProSoft. Ciudad de México: Secretaría de Economía.

351
Bibliografía
Ombeni, M., & Thomas, E. (2016). Web Programming II (Server Side Scripting). Dar Es Salaam,
Tanzania: Commonwealth of Learning, Canada.

Oracle. (s.f.). [Link] Recuperado el 07 de Diciembre de 2021, de

[Link] [Link]
practices/[Link]#GUID-B28313D1-F48A-402D-BE90-
9F0D0593A4EF

Oracle. (s.f.). [Link] Recuperado el 07 de Diciembre de 2021, de

[Link] [Link]

Padilla Aguilar, J. J., & Pinzón Castellanos, J. (2015). Estándares para Cloid Computing: Estado del
arte y análisis de protocolos para varias nubes. Repositorio Institucional UPB, 33-36.

Plitnichenko, L. (2019). [Link] Obtenido de [Link]

[Link]

PuroCodigo. (2015). [Link] Recuperado el 02 de Diciembre de 2021, de

[Link] [Link]
diseno-mas-comunes-en-aplicaciones-php

[Link]. (2014). [Link] Recuperado el 02 de

Diciembre de 2021, de [Link]
[Link]

Rivera, D. (26 de Noviembre de 2020). [Link] Obtenido de

[Link] [Link]

Taylor, D. (20 de Mayo de 2010). [Link] Obtenido de [Link]

[Link]

technotoken. (07 de Septiembre de 2021). [Link] Obtenido de

[Link] [Link]
[Link]

The PHP Group. (19 de Noviembre de 2021). [Link] Obtenido de

[Link] [Link]

Uddin Ahmed, m., Sadeed Ahmad, H., & Haider, S. (2017). Web Programming - I (Client Side
Scripting. Islamabad, Pakistan: Commonwealth of Learning.

Washburn, m. (8 de Agosto de 2017). [Link] Obtenido de

[Link] [Link]
web-app-architecture

352
Bibliografía
 353
Bibliografía