Quinta edición original publicada en inglés por O’Reilly Media, Inc. con el título: Learning PHP,MySQL & JavaScript, 5th Edition © 2018 Robin Nixon
Título de la edición en español: Aprender PHP, MySQL y JavaScript
Quinta edición en español, año 2019
© 2019 MARCOMBO, S.A.
www.marcombo.com
Diseñador de portada: Karen Montgomery
Ilustrador: Rebecca Demarest
Traducción: Francisco Martínez Carreno
Correctora: Meritxell Peleato García
Directora de producción: M.a Rosa Castillo Hidalgo
«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».
ISBN: 978-84-267-2869-2
Producción del ebook: booqlab.com
Para Julie
Prefacio
1. Introducción al contenido dinámico de la web
HTTP y HTML: los conceptos básicos de Berners-Lee
Procedimiento de solicitud/respuesta
Ventajas de PHP, MySQL, JavaScript, CSS y HTML5
MariaDB: el clon de MySQL
Utilización de PHP
Utilización de MySQL
Utilización de JavaScript
Utilización de CSS
Y luego está HTML5
El servidor web Apache
Uso de dispositivos móviles
Sobre el software libre
Todo junto
Preguntas
2. Configuración de un servidor de desarrollo
¿Qué son WAMP, MAMP o LAMP?
Instalación de AMPPS en Windows
Prueba de la instalación
Acceso a la carpeta principal (Windows)
WAMP alternativos
Instalación de AMPPS en macOS
Acceso a la carpeta principal (macOS)
Instalación de LAMP en Linux
Trabajar de forma remota
Inicio de sesión
Utilización de FTP
Utilización del editor de programas
Utilización del EDI
Preguntas
3. Introducción a PHP
Inclusión de PHP en HTML
Ejemplos de este libro
Estructura de PHP
Utilización de comentarios
Sintaxis básica
Variables
Operadores
Asignación de valores a variables
Comandos de varias líneas
Tipificación de variables
Constantes
Constantes predefinidas
Diferencia entre los comandos echo y print
Funciones
Ámbito de aplicación de variables
Preguntas
4. Expresiones y control de flujo en PHP
Expresiones
¿TRUE o FALSE?
Literales y variables
Operadores
Prioridades de los operadores
Asociatividad
Operadores relacionales
Condicionales
La declaración if
La declaración else
La declaración elseif
La declaración switch
El operador ?
Bucles
Bucles while
Bucles do...while
Bucles for
Salida del bucle
Declaración continue
Conversión implícita y explícita
Enlaces dinámicos en PHP
Enlaces dinámicos en acción
Preguntas
5. Funciones y objetos en PHP
Funciones en PHP
Definición de función
Devolución de un valor
Devolución de una matriz
Paso de argumentos por referencia
Devolución en variables globales
Recapitulación sobre el ámbito de aplicación de las variables
Inclusión y requisición de archivos
La declaración include
Utilización de include_once
Utilización de require y require_once
Compatibilidad de las versiones PHP
Objetos en PHP
Terminología
Declaración de clases
Creación de objetos
Acceso a objetos
Clonación de objetos
Constructores
Destructores
Métodos de escritura
Declaración de propiedades
Declaración de constantes
Ámbito de las propiedades y de los métodos
Métodos estáticos
Propiedades estáticas
Herencia
Preguntas
6. Matrices en PHP
Introducción
Matrices indexadas numéricamente
Matrices asociativas
Asignación mediante la palabra clave array
Bucle foreach...as
Matrices de varias dimensiones
Uso de funciones en matrices
is_array
count
sort
shuffle
explode
extract
compact
reset
end
Preguntas
7. PHP práctico
Uso de printf
Ajustes de la precisión
Relleno de cadenas
Uso de sprintf
Funciones de fecha y hora
Constantes de fecha
Uso de la verificación de fecha
Manejo de archivos
Verificación de la existencia de un archivo
Creación de archivos
Lectura de archivos
Copia de archivos
Movimiento de archivos
Eliminación de archivos
Actualización de archivos
Bloqueo de archivos debido a accesos múltiples
Lectura de archivos completos
Carga de archivos
Llamadas al sistema
¿XHTML o HTML5?
Preguntas
8. Introducción a MySQL
Fundamentos de MySQL
Resumen de términos de bases de datos
Acceso a MySQL mediante la línea de comandos
Inicio de la interfaz de la línea de comandos
Uso de la interfaz de la línea de comandos
Comandos MySQL
Tipos de datos
Índices
Creación de un índice
Consulta de bases de datos MySQL
Unión de tablas
Uso de operadores lógicos
Funciones MySQL
Acceso a MySQL mediante phpMyAdmin
Preguntas
9. Dominio de MySQL
Diseño de bases de datos
Claves principales: las claves de las bases de datos relacionales
Normalización
Primera forma normal
Segunda forma normal
Tercera forma normal
Cuándo no utilizar la normalización
Relaciones
Uno a uno
Uno a muchos
Muchos a muchos
Bases de datos y anonimato
Transacciones
Motores de almacenamiento de transacciones
Uso de BEGIN
Uso de COMMIT
Uso de ROLLBACK
Uso de EXPLAIN
Copias de seguridad y restauración
Uso de mysqldump
Creación de archivos de copias de seguridad
Restauración del archivo de la copia de seguridad
Descarga de datos en formato CSV
Planificación de copias de seguridad
Preguntas
10. Acceso a MySQL mediante PHP
Consultas de la base de datos MySQL con PHP
El proceso
Creación del archivo de inicio de sesión
Conexión a la base de datos MySQL
Un ejemplo práctico
La matriz $_POST
Eliminación de un registro
Visualización del formulario
Consulta de la base de datos
Ejecución del programa
MySQL práctico
Creación de una tabla
Descripción de una tabla
Eliminación de una tabla
Adición de datos
Recuperación de datos
Actualización de datos
Borrado de datos
Uso de AUTO_INCREMENT
Realización de consultas adicionales
Prevención de intentos de piratería
Pasos que puedes seguir
Uso de marcadores de posición
Prevención de la inyección de HTML
Uso procedimental de mysqli
Preguntas
11. Gestión de formularios
Creación de formularios
Extracción de los datos enviados
Valores por defecto
Tipos de entradas
Desinfección de entradas
Programa de ejemplo
Mejoras en HTML5
Atributo autocomplete
Atributo autofocus
Atributo placeholder
Atributo required
Atributos de sustitución
Atributos width y height
Atributos min y max
Atributo step
Atributo form
Atributo list
Tipo de entrada color
Tipos de entradas number y range
Selectores de fecha y hora
Preguntas
12. Cookies, sesiones y autenticación
Uso de cookies en PHP
Configuración de cookies
Acceso a cookies
Eliminación de cookies
Autenticación HTTP
Almacenamiento de nombres de usuario y contraseñas
Programa de ejemplo
Uso de sesiones
Inicio de sesión
Finalización de sesión
Configuración del tiempo de espera
Seguridad de sesión
Preguntas
13. Exploración de JavaScript
Texto JavaScript y HTML
Uso de scripts en el encabezamiento de documentos
Navegadores antiguos y no estándar
Inclusión de archivos JavaScript
Depuración de errores en JavaScript
Uso de comentarios
Signos de punto y coma
Variables
Variables de cadena de caracteres
Variables numéricas
Matrices
Operadores
Operadores aritméticos
Operadores de asignación
Operadores de comparación
Operadores lógicos
Asignación creciente, decreciente y abreviada
Concatenación de cadenas
Caracteres de escape
Escritura de variables
Funciones
Variables globales
Variables locales
Modelo de objetos del documento
Otro uso del símbolo $
Uso del DOM
Sobre document.write
Uso de console.log
Uso de alert
Escritura en elementos
Uso de document.write
Preguntas
14. Expresiones y control de flujo en JavaScript
Expresiones
Literales y variables
Operadores
Prioridad de operadores
Asociatividad
Operadores relacionales
Declaración with
Uso de onerror
Uso de try...catch
Condicionales
Declaración if
Declaración else
Declaración switch
Operador ?
Bucles
Bucles while
Bucles do...while
Bucles for
Salida del bucle
Declaración continue
Conversión explícita
Preguntas
15. Funciones, objetos y matrices de JavaScript
Funciones JavaScript
Definición de función
Devolución de un valor
Devolución de una matriz
Objetos JavaScript
Declaración de clase
Creación de objetos
Acceso a objetos
La palabra clave prototype
Matrices JavaScript
Matrices numéricas
Matrices asociativas
Matrices de varias dimensiones
Métodos de uso de matrices
Preguntas
16. Validación de JavaScript y PHP y tratamiento de errores
Validación de la entrada de usuario con JavaScript
Documento validate.html (Parte 1)
Documento validate.html (Parte 2)
Expresiones regulares
Concordancia mediante metacaracteres
Concordancia de caracteres difusos
Agrupación mediante paréntesis
Clase de caracteres
Indicación del intervalo
Negación
Otros ejemplos más complicados
Resumen de metacaracteres
Modificadores generales
Uso de expresiones regulares en JavaScript
Uso de expresiones regulares en PHP
Nueva visualización del formulario después de la validación PHP
Preguntas
17. Uso de comunicaciones asíncronas
¿Qué es la comunicación asíncrona?
Uso de XMLHttpRequest
Tu primer programa asíncrono
Uso de GET en lugar de POST
Envío de solicitudes XML
Uso de frameworks para la comunicación asíncrona
Preguntas
18. Introducción a CSS
Importación de hojas de estilo
Importación de CSS desde HTML
Ajuste de estilo integrados
Uso de ID
Uso de clases
Uso del punto y coma
Reglas CSS
Asignaciones múltiples
Uso de comentarios
Tipos de estilos
Estilos por defecto
Estilos de usuario
Hoja de estilo externas
Estilos internos
Estilos en línea
Selectores CSS
Selector de tipo
Selector de descendiente
Selector de hijo
Selector de ID
Selector de clase
Selector de atributo
Selector universal
Selección por grupo
Cascada CSS
Creadores de hojas de estilo
Métodos de hojas de estilo
Selectores de hojas de estilo
Diferencia entre los elementos div y span
Medidas
Fuentes y tipografía
font-family
font-style
font-size
font-weight
Tratamiento de estilos de texto
Decoración
Espaciado
Alineación
Transformación
Sangrado
Colores CSS
Cadenas reducidas para determinar el color
Degradados
Elementos de posicionamiento
Posicionamiento absoluto
Posicionamiento relativo
Posicionamiento fijo
Pseudoclases
Reglas abreviadas
El modelo de caja y el diseño
Fijación de márgenes
Aplicación de bordes
Ajuste de relleno
Contenidos del objeto
Preguntas
19. CSS avanzado con CSS3
Selectores de atributos
Partes coincidentes de las cadenas
Propiedad box-sizing
Fondos CSS3
Propiedad background-clip
Propiedad background-origin
Propiedad background-size
Uso de auto Value
Múltiples fondos
Bordes CSS3
Propiedad border-color
Propiedad border-radius
Sombras de caja
Desbordamiento de elementos
Diseño en varias columnas
Colores y opacidad
Colores HSL
Colores HSLA
Colores RGB
Colores RGBA
Propiedad opacity
Efectos de texto
Propiedad text-shadow
Propiedad text-overflow
Propiedad word-wrap
Fuentes web
Fuentes de la web de Google
Transformaciones
Transformaciones 3D
Transiciones
Propiedades de las transiciones
Duración de las transiciones
Retardo en las transiciones
Tiempo de transición
Sintaxis abreviada
Preguntas
20. Acceso a CSS desde JavaScript
Revisión de la función getElementById
La función O
La función S
La función C
Inclusión de funciones
Acceso a las propiedades de CSS desde JavaScript
Algunas propiedades de uso frecuente
Otras propiedades
JavaScript en línea
Palabra clave this
Anexión de eventos a objetos en un script
Anexión a otros eventos
Adición de nuevos elementos
Eliminación de elementos
Alternativas para añadir y eliminar elementos
Uso de interrupciones
Uso de setTimeout
Cancelación del tiempo de espera
Uso de setInterval
Uso de interrupciones en animaciones
Preguntas
21. Introducción a jQuery
¿Por qué jQuery?
Inclusión de jQuery
Elección de la versión adecuada
Descarga
Uso de una red de entrega de contenido
Personalización de jQuery
Sintaxis de jQuery
Un sencillo ejemplo
Cómo evitar conflictos entre bibliotecas
Selectores
Método css
Selector de elemento
Selector de ID
Selector de clase
Combinación de selectores
Tratamiento de eventos
En espera de que el documento esté preparado
Funciones y propiedades de eventos
Eventos de enfoque y desenfoque
Palabra clave this
Eventos click y dblclick
Evento keypress
Programación amable
Evento mousemove
Otros eventos del ratón
Métodos alternativos del ratón
Evento submit
Efectos especiales
Ocultación y presentación
Método toggle
Desvanecimiento de entrada y salida
Elementos deslizantes hacia arriba y hacia abajo
Animaciones
Detención de animaciones
Tratamiento del DOM
Diferencia entre los métodos text y html
Métodos val y attr
Adición y eliminación de elementos
Aplicación dinámica de clases
Modificación de dimensiones
Métodos width y height
Métodos innerWidth e innerHeight
Métodos outerWidth y outerHeight
Atravesar el DOM
Elementos padre
Elementos hijo
Elementos hermanos
Selección de elementos anteriores y posteriores
Atravesar selecciones jQuery
Método is
Uso de jQuery sin selectores
Método $.each
Método $.map
Uso de la comunicación asíncrona
Uso del método POST
Uso del método GET
Complementos
Interfaz de usuario de jQuery
Otros complementos
Preguntas
22. Introducción a jQuery Mobile
Inclusión de jQuery Mobile
Primeros pasos
Páginas enlazadas
Enlace síncrono
Enlace en un documento de varias páginas
Transiciones de página
Botones de diseño
Gestión de listas
Filtrado de listas
Divisores de listas
¿Y ahora qué?
Preguntas
23. Introducción a HTML5
El lienzo
Geolocalización
Audio y vídeo
Formularios
Trabajadores de la web
Microdatos
Preguntas
24. El lienzo HTML5
Creación y acceso al lienzo
Función toDataURL
Especificación del tipo de imagen
Método fillRect
Método clearRect
Método strokeRect
Combinación de estos comandos
Método createLinearGradient
Método addColorStop detallado
Método createRadialGradient
Uso de patrones para el relleno
Escritura de texto en el lienzo
Método strokeText
Propiedad textBaseLine
Propiedad font
Propiedad textAlign
Método fillText
Método measureText
Dibujo de líneas
Propiedad lineWidth
Propiedades lineCap y lineJoin
Propiedad miterLimit
Uso de rutas
Métodos moveTo y lineTo
Método stroke
Método rect
Áreas de relleno
Método clip
Método isPointInPath
Trabajo con curvas
Método arc
Método arcTo
Método quadraticCurveTo
Método bezierCurveTo
Tratamiento de imágenes
Método drawImage
Redimensionado de imágenes
Selección del área de la imagen
Copias del lienzo
Adición de sombras
Edición a nivel de píxel
Método getImageData
Método putImageData
Método createImageData
Efectos gráficos avanzados
Propiedad globalCompositeOperation
Propiedad globalAlpha
Transformaciones
Método scale
Método save y restore
Método rotate
Método translate
Método transform
Método setTransform
Preguntas
25. Audio y vídeo en HTML5
Sobre los códecs
Elemento <audio>
Compatibilidad con navegadores que no son HTML5
Elemento <video>
Códecs de vídeo
Compatibilidad con navegadores más antiguos
Preguntas
26. Otras características de HTML5
La geolocalización y el servicio GPS
Otros métodos de localización
Geolocalización y HTML5
Almacenamiento local
Uso del almacenamiento local
Objeto localStorage
Trabajadores de la web
Arrastrar y soltar
Mensajería entre documentos
Otras etiquetas HTML5
Preguntas
27. Todo junto
Diseño de una aplicación de red social
Sobre el sitio web
functions.php
Funciones
header.php
setup.php
index.php
signup.php
Comprobación de la disponibilidad de nombres de usuario
Inicio de sesión
checkuser.php
login.php
profile.php
Adición del texto "About Me"
Adición de la imagen del perfil
Procesamiento de la imagen
Visualización del perfil actual
members.php
Visualización del perfil de usuario
Incorporación y eliminación de amigos
Listado de todos los miembros
friends.php
messages.php
logout.php
styles.css
javascript.js
A. Soluciones a las preguntas de los capítulos
B. Recursos en línea
C. Palabras vacías en FULLTEXT de MySQL
D. Funciones MySQL
E. Selectores, objetos y métodos en jQuery
La combinación de PHP y MySQL es el enfoque más conveniente para el diseño de páginas web dinámicas utilizando bases de datos, y además está a la altura de los desafíos de los frameworks integrados (como Ruby on Rails) que son más difíciles de aprender. Debido a sus orígenes de software libre (a diferencia de la competencia Microsoft.NET Framework), se puede implementar libremente y por lo tanto es una opción muy popular para el desarrollo web.
Cualquier desarrollador potencial que utilice la plataforma Unix/Linux o incluso Windows/Apache necesitará dominar estas tecnologías. Y, combinadas con las tecnologías asociadas de JavaScript, jQuery, CSS y HTML5, podrá crear sitios web con el nivel de los estándares de la industria como Facebook, Twitter y Gmail.
Este libro está orientado a personas que desean aprender a crear sitios web efectivos y dinámicos. Es decir, para administradores de sitios web o diseñadores gráficos que ya crean sitios web estáticos, pero que desean llevar sus habilidades al siguiente nivel, así como para estudiantes de enseñanza secundaria, universitarios, recién graduados y personas autodidactas.
De hecho, cualquiera que esté preparado para aprender los fundamentos del diseño web interactivo asimilará un conocimiento profundo de las tecnologías básicas de PHP, MySQL, JavaScript, CSS y HTML5, y también aprenderá los fundamentos de las bibliotecas de jQuery y jQuery Mobile.
El libro se dirige a personas que tienen unos conocimientos básicos de HTML y que pueden al menos crear un sitio web estático sencillo, pero no tienen por qué tener conocimientos previos de PHP, MySQL, JavaScript, CSS o HTML5, aunque si los tienen, progresarán mucho más rápidamente a medida que avancen en el contenido del libro.
Los capítulos del libro siguen un orden específico, primero hacen una introducción de las tecnologías básicas de las que tratan y luego te guían en la instalación de las mismas en un servidor de desarrollo web para poder trabajar con los ejemplos.
En la primera sección, se explican las ideas fundamentales del lenguaje de programación PHP y se presentan los conceptos básicos de sintaxis, matrices, funciones y programación orientada a objetos.
Luego, una vez que conozcas PHP, continuarás con una introducción al sistema de bases de datos MySQL, con la que lo aprenderás todo, desde cómo están estructuradas las bases de datos MySQL hasta cómo generar consultas complejas.
Después, aprenderás a combinar PHP y MySQL para empezar a crear tus propias páginas web dinámicas integrando formularios y otras características HTML. A continuación, se presentarán los aspectos prácticos de PHP y el desarrollo de MySQL mediante el aprendizaje de una serie de funciones útiles, cómo administrar cookies y sesiones, y cómo mantener un alto nivel de seguridad.
En los capítulos que siguen a lo anterior, adquirirás una sólida formación en JavaScript, desde sencillas funciones de simulación y gestión de eventos hasta el acceso al Modelo de Objetos del Documento, la validación en el navegador y la gestión de errores. También obtendrás una introducción completa sobre el uso de la popular biblioteca jQuery para JavaScript.
Con una comprensión de estas tres tecnologías esenciales, aprenderás a realizar llamadas a AJAX en segundo plano y a convertir tus sitios web en entornos dinámicos.
En los dos siguientes capítulos aprenderás todo sobre el uso de CSS para diseñar y maquetar tus páginas web, antes de descubrir cómo las bibliotecas jQuery pueden hacer tu trabajo de desarrollo mucho más fácil. Luego pasarás a la sección final sobre las características interactivas incorporadas a HTML5, incluidos la geolocalización, el audio, el vídeo y el lienzo. Después de esto, podrás reunir todo lo que has aprendido en un completo conjunto de programas con los que se crea un sitio web de red social completamente funcional.
En el recorrido, encontrarás muchos consejos sobre buenas prácticas de programación y trucos que pueden ayudarte a encontrar y resolver errores de programación difíciles de detectar. También hay muchos enlaces a sitios web que contienen más detalles sobre los temas tratados.
Una vez que hayas aprendido a desarrollar páginas web con PHP, MySQL, JavaScript, CSS y HTML5, estarás listo para alcanzar las habilidades del siguiente nivel mediante los libros de referencia de O'Reilly que figuran a continuación:
• Dynamic HTML: The Definitive Reference de Danny Goodman
• PHP in a Nutshell de Paul Hudson
• MySQL in a Nutshell de Russell Dyer
• JavaScript: The Definitive Guide de David Flanagan
• CSS: The Definitive Guide de Eric A. Meyer and Estelle Weyl
• HTML5: The Missing Manual de Matthew MacDonald
En el libro se utilizan las siguientes convenciones tipográficas:
Texto sin formato
Indica los títulos de los menús, las opciones y los botones.
Itálica
Indica nuevos términos, URL, direcciones de correo electrónico, nombres de archivos, extensiones de archivos, nombres de rutas, directorios y utilidades Unix. También se utiliza para nombres de bases de datos, tablas y columnas.
Anchura constante
Indica comandos y opciones de línea de comandos, variables y otros elementos de código, etiquetas HTML y contenido de los archivos.
Negrita de anchura constante
Muestra el resultado de programas y se utiliza para resaltar las secciones de código que se tratan en el texto.
Itálica de ancho constante
Muestra el texto que se debe sustituir por los valores suministrados por el usuario.
|
Este elemento se refiere a un consejo, sugerencia o nota general. |
|
Este elemento indica una advertencia o precaución. |
En www.marcombo.info hay material suplementario (ejemplos de código, ejercicios, etc.) disponible para su descarga. Para acceder a él, sigue los pasos de la primera página del libro.
Existe también una página web para este libro, en la que aparecen listados de erratas, ejemplos, y cualquier información adicional. Puedes acceder a esta página en http://bit.ly/lpmjch_5e.
El propósito de este manual es ayudarte a hacer tu trabajo. En general, si se ofrecen códigos como ejemplos en el libro, puedes usarlos en tus programas y documentación. No es necesario que te pongas en contacto con nosotros para pedir permiso, a menos que reproduzcas una parte importante del código. Por ejemplo, escribir un programa que utiliza varios fragmentos de código no requiere pedir permiso. Vender o distribuir un CD-ROM con ejemplos de libros requiere pedir permiso. Responder a una pregunta citando este libro y el código de ejemplo no requiere pedir permiso. La incorporación de una importante cantidad de código de ejemplos de este libro a la documentación de tu producto requiere pedir permiso.
La World Wide Web es una red en constante evolución que ha ido mucho más lejos de lo que fue su concepción a principios de la década de 1990, cuando se creó con el propósito de resolver un problema específico. Los experimentos más avanzados del CERN (Laboratorio Europeo de Física de Partículas, ahora más conocido como el operador del Gran Colisionador de Hadrones) generaban ingentes cantidades de datos, hasta tal punto que resultaba difícil hacerlos llegar a los científicos de todo el mundo que participaban en las investigaciones.
En aquel momento, Internet ya estaba en funcionamiento, y a la red estaban conectados varios cientos de miles de ordenadores, por lo que Tim Berners-Lee (miembro del CERN) ideó un método para navegar entre ellos mediante una estructura de hiperenlaces, la cual llegó a conocerse como Protocolo de Transferencia de Hipertexto, o HTTP. También creó un lenguaje de marcado llamado Hypertext Markup Language, o HTML. Para integrarlos, desarrolló el primer navegador y el primer servidor web.
Hoy en día estamos acostumbrados a disponer de estas herramientas, pero en aquellas fechas el concepto era revolucionario. Hasta aquel momento, la conectividad más avanzada que tenían a su alcance los usuarios que disponían de un módem en casa era la de realizar una llamada y conectarse a un tablón de anuncios, alojado en un ordenador, a través del que el usuario podía comunicarse e intercambiar datos solo con otros usuarios de ese servicio. Por consiguiente, era necesario que el usuario fuera miembro de muchos sistemas de tablones de anuncios para poder comunicarse electrónicamente de manera efectiva con sus colegas y amigos.
Pero la contribución de Berners-Lee cambió todo aquello de golpe y, a mediados de la década de 1990, había tres grandes navegadores gráficos que competían por la captación de 5 millones de usuarios. Pronto se hizo evidente, sin embargo, que algo faltaba. Es cierto que las páginas de texto con hipervínculos que nos llevan a otras páginas fue un concepto brillante, pero los resultados no reflejaban el potencial de los ordenadores y de Internet para satisfacer de forma inmediata las necesidades particulares de cada usuario con contenidos que cambian dinámicamente. Utilizar la web era una experiencia árida y poco atractiva, incluso aunque hubiéramos tenido ¡texto en movimiento y GIF animados! Los carritos de la compra, los motores de búsqueda y las redes sociales han alterado sin duda la forma en la que utilizamos la web. En este capítulo, echaremos un breve vistazo a los diversos componentes que forman la web y al software que ayuda a hacer de su uso una experiencia rica y dinámica.
|
Es necesario empezar a utilizar algunos acrónimos de forma más o menos inmediata. He tratado de explicarlos claramente antes de hacer uso de ellos, pero no hay que preocuparse demasiado por lo que representan o lo que significan sus nombres, porque los detalles los trataremos a medida que vayamos avanzando en el contenido del libro. |
HTTP es un estándar de comunicación que gobierna las peticiones y respuestas que se envían entre el navegador, que se ejecuta en el ordenador del usuario final, y el servidor web.
El servidor tiene como función aceptar una petición del cliente e intentar responderle en un archivo de manera efectiva, por lo general mediante la entrega de la página web que ha solicitado. Este es el motivo por el que se utiliza el término servidor. El equivalente por naturaleza del servidor es el cliente, término que se aplica tanto al navegador web como al ordenador en el que se ejecuta.
Entre el cliente y el servidor puede haber otros equipos, como enrutadores, proxies, pasarelas, etc. Cumplen diferentes funciones para garantizar que las solicitudes y las respuestas se transfieran correctamente entre el cliente y el servidor. Habitualmente se utiliza Internet como medio para enviar esta información. Algunos de estos dispositivos intermedios también pueden ayudar a acelerar la respuesta de Internet, almacenan páginas o información de forma local en lo que se denomina una caché y, a continuación, sirven este contenido a los clientes directamente desde la caché, en lugar de tener que transferirlo desde el servidor de origen.
Un servidor web normalmente puede manejar múltiples conexiones de forma simultánea, y cuando no está comunicándose con un cliente, se dedica a escuchar para detectar una conexión entrante. Cuando llega una conexión, el servidor envía una respuesta para confirmar su recepción.
En su nivel más básico, el proceso de solicitud/respuesta consiste en una pregunta que formula el navegador web al servidor web para que este le envíe una página web, y el servidor le envía la página. El navegador se encarga de mostrar la página (ver Figura 1-1).
Figura 1-1. Secuencia básica de solicitud/respuesta entre cliente/servidor
Los pasos en la secuencia de solicitud y respuesta son los siguientes:
1. Introduces http://server.com en la barra de direcciones del navegador.
2. El navegador busca la dirección del protocolo Internet (IP) de server.com.
3. El navegador emite la solicitud de la página de inicio de server.com.
4. La solicitud viaja por Internet y llega al servidor web de server.com.
5. El servidor web, una vez recibida la petición, busca la página web en su disco.
6. El servidor web recupera la página de su disco y la envía al navegador.
7. El navegador muestra la página web.
Para una página web normal, este proceso también se lleva a cabo para cada objeto dentro de la página, ya sea un gráfico, un vídeo integrado o un archivo flash, o incluso una plantilla CSS.
En el paso 2, observamos que el navegador busca la dirección IP de server.com. Cada máquina conectada a Internet tiene una dirección IP (incluido nuestro ordenador) pero generalmente accedemos a los servidores web utilizando un nombre, como por ejemplo google.com. Como probablemente ya sabes, el navegador consulta un servicio adicional de Internet llamado Servicio de Nombres de Dominio (DNS) para encontrar la dirección IP asociada al servidor y, posteriormente, la utiliza para comunicarse con el ordenador.
Para páginas web dinámicas, el procedimiento es un poco más complicado, porque puede ser una mezcla de PHP y MySQL. Por ejemplo, supongamos que hacemos clic sobre la imagen de un impermeable. A continuación, PHP creará una petición usando el lenguaje de base de datos estándar, SQL (muchos de cuyos comandos aprenderás en este libro) y la enviará al servidor MySQL. El servidor MySQL devolverá la información del impermeable que hemos seleccionado, el código PHP lo encerrará todo en HTML, y el servidor lo enviará al navegador (ver la Figura 1-2).
Figura 1-2. Secuencia dinámica de solicitud/respuesta entre cliente/servidor
Los pasos son los siguientes:
1. Tecleas http://server.com en la barra de direcciones del navegador.
2. El navegador busca la dirección IP de server.com.
3. El navegador envía una solicitud de la página de inicio del servidor web, a esa dirección.
4. La solicitud viaja por Internet y llega al servidor web server.com.
5. El servidor web, una vez recibida la petición, recupera la página de inicio de su disco duro.
6. Con la página de inicio ahora en memoria, el servidor web se da cuenta de que es un archivo que incorpora PHP y pasa la página al intérprete de PHP.
7. El intérprete de PHP ejecuta el código PHP.
8. Algunos de los códigos PHP contienen sentencias SQL, que el intérprete PHP ahora pasa al motor de base de datos MySQL.
9. La base de datos MySQL devuelve los resultados de las sentencias al intérprete PHP.
10. El intérprete PHP devuelve los resultados del código PHP ejecutado, junto con el archivo de la base de datos MySQL, al servidor web.
11. El servidor web devuelve la página al programa cliente que la ha solicitado, y este la muestra al usuario.
Aunque es útil conocer este proceso para saber cómo funcionan los tres elementos juntos, en la práctica no es necesario que nos preocupemos por ellos, porque todos se ejecutan automáticamente.
Las páginas HTML, devueltas al navegador en cada uno de los ejemplos, pueden contener código en JavaScript, que interpretará localmente el cliente, el cual podría iniciar otra petición, de la misma manera que lo podrían hacer los objetos integrados o las imágenes.
Al principio de este capítulo, introduje el mundo de la Web 1.0, pero no había transcurrido mucho tiempo cuando se dieron prisa en crear la Web 1.1, que incorporaba el desarrollo de mejoras en el navegador como Java, JavaScript, JScript (una variante con pocos cambios de JavaScript de Microsoft) y ActiveX. Por lo que respecta al servidor, se estaban realizando progresos en la interfaz de pasarela común (CGI) con lenguajes de scripting (secuencia de comandos) como Perl (una alternativa al lenguaje PHP) y scripts, insertando el contenido de un archivo (o la salida de la ejecución de un programa local) en otro, de forma dinámica.
Una vez calmados los ánimos, tres tecnologías principales se diferenciaban de las demás. Aunque Perl seguía siendo un lenguaje de programación con un gran número de seguidores, la simplicidad de PHP y los enlaces integrados al programa de base de datos MySQL habían ganado la partida: contaban con más del doble del número de usuarios. Y JavaScript, que se había convertido en una parte esencial de la ecuación para manipular dinámicamente Cascading Style Sheets (CSS) y HTML, ahora asumía la tarea aún más difícil de manejar el lado de cliente de la comunicación asíncrona (el intercambio de datos entre el cliente y el servidor después de que se haya cargado una página web). Mediante el uso de la comunicación asíncrona, las páginas web realizan el tratamiento de datos y envían solicitudes a los servidores web en segundo plano, sin que el usuario de la web sea consciente de que esto esté sucediendo.
Sin duda la naturaleza simbiótica de PHP y MySQL ayudó a impulsar a ambos, pero ¿qué fue lo que más atrajo a los desarrolladores de estos dos lenguajes de programación? La respuesta más sencilla es la facilidad con la que se pueden utilizar para crear rápidamente elementos dinámicos en sitios web. MySQL es un sistema de base de datos rápido y potente, pero al mismo tiempo fácil de usar, que ofrece casi todo lo que un sitio web necesita para encontrar y servir datos a los navegadores. Cuando PHP se alía con MySQL para almacenar y recuperar estos datos, tenemos los componentes fundamentales necesarios para poder desarrollar sitios de redes sociales, lo que marca el comienzo de la Web 2.0.
Y cuando también se incorporan al conjunto JavaScript y CSS, disponemos de la receta para crear sitios web altamente dinámicos e interactivos, especialmente porque ahora hay una amplia gama de sofisticados entornos de funciones JavaScript a los que se puede recurrir para acelerar de forma real el desarrollo web, como la conocida biblioteca jQuery, que ahora es probablemente el recurso más habitual que utilizan los programadores para acceder a las funciones de comunicación asíncrona.
Después de que Oracle comprara Sun Microsystems (los propietarios de MySQL), surgió en la comunidad de desarrolladores la preocupación de que MySQL no siguiera siendo totalmente de software libre, así que, para asegurar esto, MariaDB se escindió de MySQL para mantenerse como software libre bajo licencia GNU GPL. El desarrollo de MariaDB está liderado por algunos de los desarrolladores que crearon MySQL y su compatibilidad es extremadamente alta con MySQL. Por lo tanto, podemos encontrar instalado MariaDB en algunos servidores en lugar de MySQL, pero en lo que respecta a los ejemplos de este libro, no hay que preocuparse, todos ellos funcionan igualmente bien tanto con MySQL como con MariaDB, sistema que se basa en el mismo código base que MySQL Server 5.5. A todos los efectos se pueden intercambiar y no se aprecia ninguna diferencia.
De todos modos, muchos de los temores iniciales parecen haberse disipado, ya que MySQL sigue siendo de software libre, y Oracle solamente cobra por el soporte y las ediciones que proporcionan características adicionales como la georreplicación y el escalado automático. Sin embargo, a diferencia de MariaDB, la comunidad ya no gestiona MySQL, así que si tenemos en cuenta que MariaDB siempre estará ahí por si alguna vez se necesita, proporcionará mucha tranquilidad a los desarrolladores y, probablemente, garantice que el mismo MySQL siga siendo de software libre.
Con PHP, integrar la actividad dinámica en páginas web es una cuestión sencilla. Cuando le asignamos a las páginas la extensión .php, tienen acceso instantáneo a este lenguaje de scripting. Desde el punto de vista del desarrollador, todo lo que hay que hacer es escribir código como el siguiente:
<?php
echo " Today is " . date("l") . ". ";
?>
Here's the latest news.
La apertura <?php le dice al servidor web que permita al programa PHP interpretar el código que sigue a continuación hasta la etiqueta ?>. Fuera de este constructor, todo se envía al cliente directamente como HTML. Entonces, el texto Here's the latest news. se envía al navegador, y dentro de las etiquetas PHP, la función integrada date (fecha), muestra el día en curso de la semana de acuerdo con la hora del sistema del servidor.
La salida final de las dos partes será:
Today is Wednesday. Here's the latest news.
PHP es un lenguaje flexible, y algunos prefieren colocar el constructor PHP directamente al lado del código PHP, así:
Today is <?php echo date("l"); ?>. Here's the latest news.
Hay incluso más posibilidades de formatear y dar salida a la información, que explicaré en los capítulos correspondientes a PHP. Lo importante es que con PHP, los desarrolladores web tienen un lenguaje de programación que, aunque no es tan rápido como la compilación del código en C o un lenguaje similar, es increíblemente rápido y también se integra perfectamente con el marcado HTML.
|
Si tienes la intención de introducir los ejemplos PHP de este libro en un programa editor para estudiarlos conmigo, debes acordarte de agregar <? php delante y ?> después de ellos, para tener la seguridad de que el intérprete PHP los procesa. Para hacerlo más fácil, tal vez desees preparar un archivo llamado example.php con esas etiquetas en su lugar correspondiente. |
Al utilizar PHP, tenemos un control ilimitado sobre nuestro servidor web. Ya sea que necesitemos modificar HTML sobre la marcha, procesar una tarjeta de crédito, añadir detalles de usuario a una base de datos o buscar información de un sitio web de terceros. Podemos hacerlo todo en los mismos archivos PHP en los que reside el propio HTML.
Por supuesto, no tiene mucho sentido cambiar a una salida HTML dinámica a menos que también tengamos un medio para rastrear la información que los usuarios proporcionan a nuestro sitio web a medida que lo utilizan. En los primeros tiempos de la web, muchos sitios utilizaban archivos de texto "plano" para almacenar datos como nombres de usuarios y contraseñas. Pero este enfoque podía causar problemas si el archivo no estaba adecuadamente bloqueado contra la corrupción de múltiples accesos simultáneos. Además, un archivo plano puede crecer hasta cierto punto antes de que sea difícil de manejar, por no mencionar la dificultad de intentar fusionar archivos y realizar búsquedas complejas en un periodo de tiempo razonable.
Ahí es donde las bases de datos relacionales con consultas estructuradas se convierten en esenciales. Y MySQL, al poderse utilizar e instalar libremente en un gran número de servidores web de Internet, viene magníficamente para la ocasión. Es un sistema de gestión de bases de datos robusto y excepcionalmente rápido que utiliza comandos en inglés.
El nivel más alto de la estructura MySQL es una base de datos, dentro de la cual pueden existir una o más tablas que contienen los datos. Por ejemplo, supongamos que estamos trabajando en una tabla llamada users (usuarios), dentro de la cual hemos creado columnas para surname (apellido) firstname (nombre) y email (correo electrónico), y ahora deseamos añadir otro usuario. Un comando que podemos usar para hacerlo es el siguiente:
INSERT INTO users VALUES('Smith', 'John', 'jsmith@mysite.com');
Anteriormente habremos utilizado otros comandos para crear la base de datos y la tabla, y para configurar todos los campos correctamente, pero el comando SQL INSERT en este caso muestra lo sencillo que puede ser añadir nuevos datos a una base de datos. SQL es un lenguaje diseñado a principios de los años 70 que recuerda a uno de los lenguajes de programación más antiguos, COBOL. Sin embargo, se adapta muy bien a las consultas de bases de datos, por lo que sigue utilizándose después de todo este tiempo.
Es igualmente fácil buscar datos. Supongamos que tenemos la dirección de correo electrónico de un usuario y necesitamos buscar el nombre de esa persona. Para ello, podemos generar una consulta MySQL como la siguiente:
SELECT surname,firstname FROM users WHERE
email='jsmith@mysite.com';
MySQL devolverá Smith, John y cualesquiera otros pares de nombres y apellidos que puedan estar asociados con esa dirección de correo electrónico en la base de datos.
Como es de esperar, podemos hacer mucho más con MySQL de lo que hacen los comandos básicos INSERT y SELECT. Por ejemplo, se pueden combinar conjuntos de datos relacionados para reunir información relacionada, pedir resultados mediante órdenes muy variadas, hacer coincidencias parciales cuando solo conocemos una parte de la cadena que estamos buscando, devolver solo el enésimo resultado, etc.
Con PHP, podemos hacer todas estas llamadas directamente a MySQL sin que tener que acceder a la interfaz de línea de comandos MySQL. Esto significa que podemos guardar los resultados en matrices para procesar y realizar búsquedas múltiples, cada una dependiente de los resultados devueltos de las anteriores, para profundizar en el elemento de datos que necesitamos.
Para conseguir un mayor rendimiento, como veremos más adelante, hay funciones adicionales incorporadas a MySQL a las que podemos invocar para ejecutar eficientemente operaciones habituales dentro de MySQL, en lugar de crearlas a partir de múltiples llamadas de PHP a MySQL.
La más antigua de las tres tecnologías básicas expuestas en este libro, JavaScript, se creó para permitir el acceso de la programación a todos los elementos de un documento HTML. En otras palabras, proporcionaba un medio para la interacción dinámica del usuario, como la comprobación de la validez de la dirección de correo electrónico en formularios de entrada y la visualización de indicaciones como "¿Querías realmente decir eso?" (sin embargo, no se puede confiar en esta tecnología para temas de seguridad, que siempre se deben llevar a cabo en el servidor web).
Combinado con CSS (ver la siguiente sección), JavaScript es el responsable que hay detrás de las páginas web dinámicas que cambian ante nuestros propios ojos, a diferencia del caso en el que el servidor devuelve una página nueva.
Sin embargo, JavaScript también puede resultar difícil de usar, debido a algunas diferencias importantes entre las formas en las que los diferentes diseñadores de navegadores han elegido implementarlo. Esto sucedió principalmente cuando algunos fabricantes trataron de incluir funcionalidades adicionales a sus navegadores a expensas de la compatibilidad con sus rivales.
Afortunadamente, los desarrolladores han entrado en razón y se han dado cuenta de la necesidad de una compatibilidad total entre sí, por lo que hoy en día es menos exigente tener que optimizar nuestro código para diferentes navegadores. Sin embargo, aún quedan millones de usuarios que utilizan navegadores heredados, y este seguirá siendo probablemente el caso durante muchos años. Afortunadamente, hay soluciones para los problemas de incompatibilidad; más tarde, en este libro, veremos las bibliotecas y técnicas que nos permiten poder ignorar con total seguridad estas diferencias.
Por ahora, veamos cómo usar JavaScript básico, aceptado por todos los navegadores:
<script type="text/javascript">
document.write("Today is " + Date() );
</script>
Este fragmento de código le dice al navegador web que interprete todo dentro de las etiquetas <script> como JavaScript, y el navegador lo hace escribiendo el texto Today is en el documento, junto con la fecha, mediante la función JavaScript Date. El resultado será algo así:
Today is Sun Jan 01 2017 01:23:45
|
A menos que necesitemos especificar una versión concreta de JavaScript, se puede normalmente omitir type="text/javascript" y solo usar <script> para iniciar la interpretación de JavaScript. |
Como se mencionó anteriormente, JavaScript se desarrolló originalmente para ofrecer un control dinámico sobre los diversos elementos dentro de un documento HTML, y ese sigue siendo su principal cometido. Pero cada vez más, JavaScript se utiliza para la comunicación asíncrona, el proceso de acceso al servidor web en segundo plano.
La comunicación asíncrona es lo que permite que las páginas web empiecen a parecerse a los programas independientes, porque no hay que volverlas a cargar en su totalidad para mostrar un nuevo contenido. En lugar de eso, una llamada asíncrona puede incorporar y actualizar un solo elemento en una página web, como cambiar tu fotografía en un sitio de redes sociales o reemplazar un botón en el que se hace clic para responder a una pregunta. Este tema se trata con detalle en el Capítulo 17.
Después, en el Capítulo 21, echamos un vistazo al entorno de trabajo de jQuery, que podemos usar para evitar tener que reinventar la rueda cuando necesitamos un código rápido de navegador cruzado para manipular nuestras páginas web. Por supuesto, también hay otros entornos de trabajo disponibles, pero jQuery es, con diferencia, el más popular. Debido a su mantenimiento continuo, es extremadamente fiable y es una herramienta importante en el kit de utilidades de muchos desarrolladores web experimentados.
CSS es el compañero indispensable de HTML, con el que se asegura que el texto HTML y las imágenes se presentan de forma coherente y adecuada en la pantalla del usuario. Con la aparición del estándar CSS3 en los últimos años, CSS ofrece ahora un nivel de interactividad dinámica anteriormente soportada solo por JavaScript. Por ejemplo, no solo se puede cambiar el estilo de cualquier elemento HTML para modificar sus dimensiones, colores, bordes, espaciado, etc., sino que ahora también podemos añadir transiciones animadas y transformaciones a las páginas web, con solo unas pocas líneas de CSS.
El uso de CSS puede ser tan simple como insertar algunas reglas entre las etiquetas <style> y </style> en el encabezamiento de una página web, así:
<style>
p {
text-align:justify;
font-family:Helvetica;
}
</style>
Estas reglas cambian la alineación predeterminada del texto de la etiqueta <p> para que los párrafos contenidos en ella estén totalmente justificados y utilicen la fuente helvética.
Como veremos en el Capítulo 18, existen muy variadas formas de diseñar reglas CSS; las podemos incluir directamente dentro de etiquetas o guardar un conjunto de reglas en un archivo externo, que se carga por separado. Esta flexibilidad no solo nos permite estilizar nuestro HTML con precisión, sino que también podemos, por ejemplo, proporcionar la funcionalidad integrada de movimiento de los objetos cuando el ratón pasa sobre ellos. También aprenderás a acceder a todas las funciones de un elemento desde JavaScript y HTML.
A pesar de la utilidad de todas estas incorporaciones a los estándares web, no fueron suficientes para desarrolladores cada vez más ambiciosos. Por ejemplo, todavía no existía una forma sencilla de manipular gráficos en un navegador web sin recurrir a complementos como Flash. Y lo mismo ocurría con la inserción de audio y vídeo en las páginas web. Además, varias inconsistencias molestas se habían colado en HTML durante su evolución.
Por lo tanto, para aclarar todo esto y llevar Internet más allá de la Web 2.0 y a su próxima iteración, se creó un nuevo estándar para HTML con el fin de subsanar todas estas deficiencias: HTML5. Su desarrollo comenzó ya en 2004, cuando la Fundación Mozilla y Opera Software (desarrolladores de dos populares webs) redactaron el primer borrador, pero no fue hasta principios de 2013, año en el que se envió el borrador definitivo al World Wide Web Consortium (W3C), el organismo internacional que gobierna los estándares de calidad de la web.
El desarrollo de HTML5 ha necesitado varios años, pero ahora estamos en una fase muy sólida y estable de la versión 5.1 (desde 2016). Es un ciclo interminable de desarrollo. Sin embargo, es seguro que con el tiempo aumentará su funcionalidad. Algunas de las mejores características de HTML5 para el manejo y visualización de los media incluyen el <audio>, el <video> y los elementos <canvas> y (lienzo), que añaden sonido, vídeo y gráficos avanzados. Todo lo que necesitas saber sobre estos y todos los demás aspectos de HTML5 se trata con todo detalle a partir del Capítulo 23.
|
Una de las pequeñas cosas que me gusta de la especificación HTML5 es que la sintaxis XHTML ya no es necesaria para los elementos de auto cierre. Antes, se podía visualizar un salto de línea con el elemento <br>. Luego, para asegurar la compatibilidad futura con XHTML (el sustituto que se había planeado para HTML, lo que nunca ocurrió), se cambió a <br />, en el que se agregó un carácter de cierre / (ya que se esperaba que todos los elementos incluyeran una etiqueta de cierre con este carácter). Pero ahora las cosas han cambiado por completo, y se puede usar cualquier versión de este tipo de elementos. Por lo tanto, en aras de la brevedad y de tener que pulsar menos teclas, en este libro he vuelto al estilo anterior de <br>, <hr>, etc. |
Además de PHP, MySQL, JavaScript, CSS y HTML5, hay un sexto héroe en la web dinámica: el servidor web. En el caso de este libro, este es el servidor web Apache. Hemos discutido un poco sobre lo que hace un servidor web durante el intercambio HTTP entre servidor/cliente, pero hace muchas más cosas entre bastidores.
