Aprendiendo PHP, MySQL,

JavaScript, CSS, HTML 5

Prefacio_____________________________________________
La combinación de PHP y MySQL es el enfoque más conveniente para el diseño
web dinámico basado en bases de datos, resistiéndose a los desafíos de los marcos
integrados, como Ruby on Rails, que son más difíciles de aprender. Debido a sus raíces
de código abierto (a diferencia del competidor Microsoft .NET Framework), es de
implementación gratuita y, por lo tanto, es una opción extremadamente popular para el
desarrollo web.

Cualquier desarrollador potencial en una plataforma Unix / Linux o incluso una

plataforma de Windows / Apache tendrá que dominar estas tecnologías. Y, combinado
con las tecnologías asociadas de JavaScript, CSS y HTML5, podrá crear sitios web del
calibre de estándares de la industria como Facebook, Twitter y Gmail.

Audiencia

Este libro es para personas que desean aprender cómo crear sitios web efectivos
y dinámicos. Esto puede incluir webmasters o diseñadores gráficos que ya están creando
sitios web estáticos pero desean llevar sus habilidades al siguiente nivel, así como a
estudiantes de secundaria y universitarios, recién graduados y personas autodidactas.

De hecho, cualquier persona dispuesta a aprender los fundamentos de la

tecnología Web 2.0 conocida como Ajax obtendrá una sólida base en todas estas
tecnologías centrales: PHP, MySQL, JavaScript, CSS y HTML5.

Suposiciones que hace este libro

Este libro asume que tienes un conocimiento básico de HTML y al menos puede
armar un sitio web simple y estático, pero no asume que tienes ningún conocimiento
previo de PHP, MySQL, JavaScript, CSS o HTML5, aunque si lo haces, su progreso a
través del libro será aún más rápido.

Organización de este libro

Los capítulos de este libro están escritos en un orden específico, primero

presentando todas las tecnologías principales que cubre y luego guiándote a través de su
instalación en un servidor de desarrollo web para que estés listo para trabajar con los
ejemplos.

En la primera sección, obtendrá una conexión a tierra en el lenguaje de

programación PHP, que cubre los conceptos básicos de sintaxis, matrices, funciones y
programación orientada a objetos.
 Luego, con PHP en su haber, pasará a una introducción al sistema de base de
datos MySQL, donde aprenderá todo, desde cómo se estructuran las bases de datos
MySQL hasta cómo generar consultas complejas.

Después de eso, aprenderá cómo puede combinar PHP y MySQL para comenzar
a crear sus propias páginas web dinámicas mediante la integración de formularios y
otras características HTML. A continuación, obtendrá los aspectos prácticos básicos del
desarrollo de PHP y MySQL al aprender una variedad de funciones útiles y cómo
administrar cookies y sesiones, así como también cómo mantener un alto nivel de
seguridad.

En los siguientes capítulos, obtendrá una sólida base en JavaScript, desde

funciones simples y manejo de eventos hasta acceder al Modelo de Objeto de
Documento y validación en el navegador y manejo de errores.

Con una comprensión de estas tres tecnologías centrales, aprenderá a hacer

llamadas Ajax entre bastidores y a convertir sus sitios web en entornos altamente
dinámicos.

A continuación, pasará dos capítulos aprendiendo todo sobre el uso de CSS para
diseñar y diseñar sus páginas web, antes de pasar a la sección final sobre las nuevas
características integradas en HTML5, que incluyen geolocalización, audio, video y
lienzo. Después de esto, juntarás todo lo que has aprendido en un conjunto completo de
programas que juntos constituyen un sitio web de redes sociales completamente
funcional.

En el camino, también encontrará muchos consejos y consejos sobre buenas

prácticas de programación y consejos que podrían ayudarlo 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.

Libros de apoyo

Una vez que haya aprendido a desarrollar usando PHP, MySQL, JavaScript,
CSS y HTML5, estará listo para llevar sus habilidades al siguiente nivel utilizando los
siguientes libros de referencia de O'Reilly. Para obtener más información sobre
cualquiera de estos títulos, simplemente busque en el sitio web de O'Reilly o en
cualquier sitio web de un buen vendedor de libros en línea:

 Dynamic HTML: The Definitive Reference by Danny Goodman

 PHP in a Nutshell by Paul Hudson
 MySQL in a Nutshell by Russell J.T. Dyer
 JavaScript: The Definitive Guide by David Flanagan
 CSS: The Definitive Guide by Eric A. Meyer
 HTML5: The Missing Manual by Matthew MacDonald
Las convenciones usadas en este libro
Las siguientes convenciones tipográficas se usan en este libro:

Texto sin formato

Indica títulos de menú, opciones y botones

Italica

Indica nuevos términos, URL, direcciones de correo electrónico, nombres de

archivos, extensiones de archivos, nombres de rutas, directorios y utilidades de Unix.

Constant width

Indica opciones de línea de comandos, variables y otros elementos de código, etiquetas

HTML, macros y el contenido de los archivos.

Negritas en Ancho Constante

Muestra la salida del programa o las secciones destacadas del código que se
están discutiendo en el texto.

Ancho constante en cursiva

Muestra texto que debe reemplazarse por valores proporcionados por el usuario.

NOTA

Este elemento significa una tips, sugerencia o nota general.

Advertencia

Este elemento significa advertencia o precaución

Usando ejemplos de código

El material complementario (ejemplos de código, ejercicios, etc.) está disponible

en http://lpmj.net.

Este libro está aquí para ayudarlo a hacer su trabajo. En general, si se ofrece un
código de ejemplo con este libro, puede usarlo en sus programas y documentación. No
necesita contactarnos para obtener permiso a menos que esté reproduciendo una porción
significativa del código. Por ejemplo, escribir un programa que usa varios fragmentos
de código de este libro no requiere permiso. Vender o distribuir un CD-ROM con
ejemplos de libros de O'Reilly requiere permiso. Responder una pregunta citando este
libro y citando código de ejemplo no requiere permiso. Incorporar una cantidad
significativa de código de ejemplo de este libro en la documentación de su producto no
requiere permiso.

Agradecemos, pero no requerimos, la atribución. Una atribución generalmente

incluye el título, autor, editor e ISBN. Por ejemplo: "Aprendiendo PHP, MySQL,
JavaScript, CSS y HTML5, tercera edición, por Robin Nixon. Copyright 2014 Robin
Nixon, 978-1-4919-4946-7. "

Si cree que su uso de ejemplos de código queda fuera del uso legítimo o el
permiso otorgado aquí, no dude en ponerse en contacto con nosotros en
permissions@oreilly.com.

Nos gustaría escuchar de usted

Todos los ejemplos de este libro se han probado en varias plataformas, pero
ocasionalmente puede encontrar problemas, por ejemplo, si tiene una instalación no
estándar o una versión diferente de PHP. La información en este libro también se ha
verificado en cada paso del proceso de producción. Sin embargo, pueden ocurrir errores
y descuidos y agradeceremos recibir los detalles de los que encuentre, así como
cualquier sugerencia que desee realizar en futuras ediciones. Puede contactar al autor y
a los editores en:

O’Reilly Media, Inc.

1005 Gravenstein Highway North
Sebastopol, CA 95472
(800) 998-9938 (in the United States or Canada)
(707) 829-0515 (international or local)
(707) 829-0104 (fax)

Tenemos una página web para este libro, donde enumeramos erratas, ejemplos y
cualquier información adicional. Puede acceder a esta página en http://bit.ly/lpmjch_3e.
También hay un sitio web complementario a este libro en http://lpmj.net, donde puede
descargar todos los ejemplos de este libro en un solo archivo zip.

Para comentar o hacer preguntas técnicas sobre este libro, envíe un correo electrónico a
bookquestions@oreilly.com.

Para obtener más información sobre nuestros libros, cursos, conferencias y noticias,
visite nuestro sitio web en http://www.oreilly.com.
Encuéntranos en Facebook: http://facebook.com/oreilly
Síganos en Twitter: http://twitter.com/oreillymedia
Míranos en YouTube: http://www.youtube.com/oreillymedia

Safari® Books Online

Safari Books Online (www.safaribooksonline.com) es una biblioteca digital a

pedido que ofrece contenido experto en forma de libro y video de los principales autores
del mundo en tecnología y negocios.

Los profesionales de la tecnología, los desarrolladores de software, los

diseñadores web y los profesionales creativos y de negocios usan Safari Books Online
como su recurso principal para la capacitación en investigación, resolución de
problemas, aprendizaje y certificación.

Safari Books Online ofrece una gama de mezclas de productos y programas de

fijación de precios para organizaciones, agencias gubernamentales e individuos. Los
suscriptores tienen acceso a miles de libros, videos de capacitación y manuscritos
previos a la publicación en una base de datos de búsqueda completa de editores como
O'Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft
Press, Sams, Que, Peachpit Press, Focal Press, Cisco Prensa, John Wiley & Sons,
Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress,
Manning, New Riders, McGraw-Hill, Jones & Bartlett, Tecnología del curso y docenas
más. Para obtener más información acerca de Safari Books Online, visítenos en línea.

Expresiones de gratitud

Me gustaría agradecer una vez más a mi editor, Andy Oram, ya todos los que
trabajaron duro en este libro, incluyendo a Albert Wiersch por su exhaustiva revisión
técnica, Kristen Brown por la supervisión de la producción, Rachel Monaghan por su
corrección, Jasmine Kwityn por su corrección, Robert Romano por sus ilustraciones
originales, Rebecca Demarest por sus nuevas ilustraciones, David Futato por diseño de
interiores, Lucie Haskins por crear el índice, Karen Montgomery por el diseño original
de la cubierta frontal del ala de azúcar, Randy Comer por la última portada del libro y
todos los demás son demasiado numerosos para nombrar quién envió la errata y ofreció
sugerencias para esta nueva edición.
CAPITULO 1: Introducción al Contenido Web Dinamico

La World Wide Web es una red en constante evolución que ya viajó mucho más
allá de su concepción a principios de la década de 1990, cuando se creó para resolver un
problema específico. Los experimentos de vanguardia en el CERN (el Laboratorio
Europeo de Física de Partículas-ahora mejor conocido como el operador del Gran
Colisionador de Hadrones) producían cantidades increíbles de datos, tanto que los datos
resultaban difíciles de distribuir para los participantes. científicos que se extendieron por
todo el mundo.

En este momento, Internet ya estaba en funcionamiento, con varios cientos de

miles de computadoras conectadas, por lo que Tim Berners-Lee (un miembro del
CERN) ideó un método para navegar entre ellos utilizando un marco hipervínculo, que
se conoció como transferencia de hipertexto. Protocolo o HTTP. También creó un
lenguaje de marcado llamado HTML o Hypertext Markup Language. Para unirlos,
escribió el primer navegador web y servidor web, herramientas que ahora damos por
sentado.

Pero en aquel entonces, el concepto era revolucionario. La conectividad más

experimentada hasta el momento por los usuarios de módem en el hogar era marcar y
conectarse a un tablero de anuncios que estaba alojado en una sola computadora, donde
se podía comunicar e intercambiar datos solo con otros usuarios de ese servicio. En
consecuencia, era necesario ser miembro de muchos sistemas de tableros de anuncios
para poder comunicarse electrónicamente de manera efectiva con sus colegas y amigos.
Pero Berners-Lee cambió todo eso de una sola vez, y para mediados de la década de
1990, había tres principales navegadores web gráficos compitiendo por la atención de
cinco millones de usuarios. Pronto se hizo obvio, sin embargo, que algo faltaba. Sí, las
páginas de texto y gráficos con hipervínculos para llevarlo a otras páginas eran un
concepto brillante, pero los resultados no reflejaban el potencial instantáneo de las
computadoras y de Internet para satisfacer las necesidades particulares de cada usuario
con contenido dinámicamente cambiante. Usar la Web fue una experiencia muy seca y
simple, ¡incluso si ahora tuviéramos texto de desplazamiento y GIF animados!
Los carritos de compras, los motores de búsqueda y las redes sociales han alterado
claramente la forma en que usamos la Web. En este capítulo, veremos brevemente los
diversos componentes que componen la Web y el software que ayuda a que sea una
experiencia rica y dinámica.

NOTA
Es necesario comenzar a usar algunos acrónimos más o menos de inmediato.
Intenté explicarlos claramente antes de proceder. Pero no se preocupe demasiado por lo
que significan o por lo que significan estos nombres, porque los detalles se aclararán a
medida que sigan leyendo.
 HTTP y HTML: Fundamentos de Berners-Lee

HTTP es un estándar de comunicación que rige las solicitudes y respuestas que

tienen lugar entre el navegador que se ejecuta en la computadora del usuario final y el
servidor web. El trabajo del servidor consiste en aceptar una solicitud del cliente e
intentar responderla de manera significativa, generalmente publicando una página web
solicitada; por eso se usa el término servidor. La contraparte natural de un servidor es un
cliente, por lo que ese término se aplica tanto al navegador web como a la computadora
en la que se ejecuta.

Entre el cliente y el servidor puede haber varios otros dispositivos, como

enrutadores, proxies, puertas de enlace, etc. Sirven diferentes roles para garantizar que
las solicitudes y las respuestas se transfieren correctamente entre el cliente y el servidor.
Por lo general, usan Internet para enviar esta información.

Un servidor web generalmente puede manejar múltiples conexiones simultáneas

y, cuando no se comunica con un cliente, pasa su tiempo escuchando una conexión
entrante. Cuando uno llega, el servidor envía una respuesta para confirmar su recibo.

Los Procedimientos Request/Response

En su nivel más básico, el proceso de solicitud / respuesta consiste en un

navegador web que le pide al servidor web que le envíe una página web y al servidor
que devuelve la página. El navegador se encarga de mostrar la página (ver Figura 1-1).

Navegador La Servidor WEB en Unidad de Disco

Web Internet www.xxx.com En www.xx.com

Usuario Entra en
http://server.com

Busca la IP DE
http://server.com

Recuperar Pagina
Principal de
http://server.com
Respuesta de la
Pagina Indice
Se Muestra como
se recupera del
hd
Se Regresa La
Se Recibe y se Pagina Indice
Muestra la Pagina
Fig 1.1 Secuencia Basica de la Pagina Cliente Servidor procedimientos request/response.
 Cada paso en la secuencia de solicitud y respuesta es el siguiente:

1. Usted ingresa a http://server.com en la barra de direcciones de su navegador.

2. Su navegador busca la dirección IP de server.com.
3. Su navegador emite una solicitud para la página de inicio en server.com.
4. La solicitud cruza Internet y llega al servidor web server.com.
5. El servidor web, una vez recibida la solicitud, busca la página web en su disco
duro.
6. La página web es recuperada por el servidor y devuelta al navegador.
7. Su navegador muestra la página web.

Para una página web promedio, este proceso tiene lugar una vez para cada objeto
dentro de la página: un gráfico, un video incrustado o un archivo Flash, e incluso una
plantilla CSS.

En el paso 2, observe que el navegador buscó la dirección IP de server.com. Cada

máquina conectada a Internet tiene una dirección IP, su computadora incluida. Pero
generalmente accedemos a los servidores web por su nombre, como google.com. Como
probablemente sepa, el navegador consulta un servicio de Internet adicional llamado
Servicio de nombres de dominio (DNS) para encontrar su dirección IP asociada y luego
la usa para comunicarse con la computadora.

Para las páginas web dinámicas, el procedimiento es un poco más complicado,

porque puede incluir tanto PHP como MySQL en la mezcla (consulte la Figura 1-2).

Navegador Internet Servidor Web PROCESADOR Unidad de Servidor

Web PHP Disco Mysql

Usuario Entra en
http://server.com

Busca la IP DE
http://server.com

Recuperar Pagina
Principal de
http://server.com Respuesta de la
Pagina Indice
Se Muestra como
se recupera del hd

Contenido
php

Procesos PHP

Ejecuta SQL
Se Recibe Los
Datos

Se Retorna la
Pagina
Se Muestra la Pagina

Figure 1-2: Una Dinamica secuencia Cliente Servidor Solicitud / Respuesta

Estos son los pasos para una secuencia dinámica de solicitud / respuesta de cliente /
servidor:

1. Usted ingresa a http://server.com en la barra de direcciones de su navegador.

2. Su navegador busca la dirección IP de server.com.
3. Su navegador emite una solicitud a esa dirección para la página de inicio del
servidor web.
4. La solicitud cruza Internet y llega al servidor web server.com.
5. El servidor web, una vez recibida la solicitud, recupera la página de inicio desde
su disco duro.
6. Con la página de inicio ahora en la memoria, el servidor web se da cuenta de que
se trata de un archivo que incorpora PHP scripting y pasa la página al intérprete
de PHP.
7. El intérprete PHP ejecuta el código PHP.
8. Parte del PHP contiene sentencias de MySQL, que el intérprete de PHP pasa
ahora al motor de la base de datos MySQL.
9. La base de datos MySQL devuelve los resultados de las declaraciones al
intérprete de PHP.
10. El intérprete PHP devuelve los resultados del código PHP ejecutado, junto con
los resultados de la base de datos MySQL, al servidor web.
11. El servidor web devuelve la página al cliente solicitante, que la muestra.

Aunque es útil conocer este proceso para que sepa cómo funcionan juntos los tres
elementos, en la práctica no es necesario que se preocupe por estos detalles, porque
todos ocurren automáticamente.

Las páginas HTML devueltas al navegador en cada ejemplo pueden contener

JavaScript, que el cliente interpretará localmente y que podría iniciar otra solicitud, del
mismo modo que lo harían los objetos incrustados, como las imágenes.

LOS BENEFICIOS DE PHP, MySQL, JavaScript, CSS, and

HTML5
Al comienzo de este capítulo, presenté el mundo de la Web 1.0, pero no pasó
mucho tiempo antes de que se apresurara la creación de la Web 1.1, con el desarrollo de
mejoras del navegador como Java, JavaScript, JScript (la pequeña variante de
JavaScript de Microsoft). ) y ActiveX. En el lado del servidor, se progresó en la Interfaz
de puerta de enlace común (CGI) utilizando lenguajes de scripting como Perl (una
alternativa al lenguaje PHP) y scripting del lado del servidor: insertando el contenido de
un archivo (o la salida de un sistema llamar) a otro de forma dinámica.

Una vez que el polvo se había asentado, tres tecnologías principales se

destacaban por encima de las demás. Aunque Perl todavía era un lenguaje de scripting
popular con muchos seguidores, la simplicidad de PHP y los enlaces integrados al
programa de base de datos MySQL le habían ganado más del doble de usuarios. Y
JavaScript, que se había convertido en una parte esencial de la ecuación para manipular
dinámicamente CSS (Cascading Style Sheets) y HTML, ahora asumió la tarea aún más
compleja de manejar el lado del cliente del proceso Ajax. En Ajax, las páginas web
realizan el manejo de datos y envían solicitudes a los servidores web en segundo plano,
sin que el usuario de la web sepa que esto está sucediendo.

Sin duda, la naturaleza simbiótica de PHP y MySQL ayudó a impulsarlos a

ambos, pero ¿qué fue lo que atrajo a los desarrolladores para ellos en primer lugar? La
respuesta simple tiene que ser la facilidad con la que puede usarlos para crear
rápidamente elementos dinámicos en los sitios web. MySQL es un sistema de base de
datos rápido y potente, pero fácil de usar, que ofrece casi todo lo que un sitio web
necesitaría para encontrar y proporcionar datos a los navegadores. Cuando PHP se alía
con MySQL para almacenar y recuperar estos datos, usted tiene las partes
fundamentales requeridas para el desarrollo de los sitios de redes sociales y los
comienzos de la Web 2.0.

Y cuando incorpora JavaScript y CSS a la mezcla también, tiene una receta para
crear sitios web altamente dinámicos e interactivos.

Usando PHP

Con PHP, es una simple cuestión incorporar actividades dinámicas en páginas

web. Cuando le da a las páginas la extensión .php, tienen acceso instantáneo al lenguaje
de scripting. Desde el punto de vista de un desarrollador, todo lo que tiene que hacer es
escribir un 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 que el programa PHP
interprete todo el siguiente código hasta la etiqueta?>. Fuera de este constructo, todo se
envía al cliente como HTML directo. Entonces el texto Aquí están las últimas noticias.
simplemente se envía al navegador; dentro de las etiquetas PHP, la función de fecha
incorporada muestra el día actual de la semana según la hora del sistema del servidor.

El resultado final de las dos partes se ve así:

Today is Wednesday. Here's the latest news.

PHP es un lenguaje flexible, y algunas personas prefieren colocar el constructo

PHP directamente al lado del código PHP, así:

Today is <?php echo date("l"); ?>. Here's the latest news.

También hay otras formas de formatear y generar información, que explicaré

en los capítulos sobre PHP. El punto es que con PHP, los desarrolladores web tienen un
lenguaje de scripting que, aunque no es tan rápido como compilar su código en C o en
un lenguaje similar, es increíblemente rápido y también se integra sin problemas con el
marcado HTML.
 NOTA
Si tiene la intención de ingresar los ejemplos de PHP en este libro para trabajar
conmigo, debe recordar agregar <? Php al frente y?> Después de ellos para asegurarse de que
el intérprete de PHP los procese. Para facilitar esto, es posible que desee preparar un archivo
llamado example.php con esas etiquetas en su lugar.

Al usar PHP, tienes control ilimitado sobre tu servidor web. Ya sea que necesites
modificar HTML sobre la marcha, procesar una tarjeta de crédito, agregar detalles de
usuario a una base de datos o buscar información de un sitio web de un tercero, puedes
hacerlo todo desde los mismos archivos PHP en los que reside el HTML.

Usando MySQL
Por supuesto, no tiene mucho sentido cambiar la salida HTML de forma
dinámica a menos que también tenga un medio para rastrear los cambios que hacen los
usuarios mientras usan su sitio web. En los primeros días de la Web, muchos sitios
usaban archivos de texto "planos" para almacenar datos como nombres de usuario y
contraseñas. Pero este enfoque podría causar problemas si el archivo no se bloqueó
correctamente contra la corrupción de múltiples accesos simultáneos. Además, un
archivo plano puede ser muy grande antes de que se vuelva difícil de manejar, sin
mencionar la dificultad de tratar de combinar archivos y realizar búsquedas complejas
en cualquier tipo de tiempo razonable.

Ahí es donde las bases de datos relacionales con consultas estructuradas se

vuelven esenciales. Y MySQL, que es de uso gratuito e instalado en un gran número de
servidores web de Internet, se eleva magníficamente para la ocasión. Es un sistema de
administración de bases de datos robusto y excepcionalmente rápido que utiliza
comandos similares al inglés.

El nivel más alto de la estructura MySQL es una base de datos, dentro de la cual
puede tener una o más tablas que contienen sus datos. Por ejemplo, supongamos que
está trabajando en una tabla llamada usuarios, dentro de la cual ha creado columnas para
apellido, primer nombre y correo electrónico, y ahora desea agregar otro usuario. Un
comando que puede usar para hacer esto es:

INSERT INTO users VALUES('Smith', 'John', 'jsmith@mysite.com');

Por supuesto, como se mencionó anteriormente, habrá emitido otros comandos para
crear la base de datos y la tabla y para configurar todos los campos correctos, pero el
comando INSERT aquí muestra cuán simple puede ser agregar datos nuevos a una base
de datos. El comando INSERT es un ejemplo de SQL (Structured Query Language), un
lenguaje diseñado a principios de la década de 1970 y que recuerda a uno de los
lenguajes de programación más antiguos, COBOL. Sin embargo, es muy adecuado para
las consultas de bases de datos, razón por la cual todavía está en uso después de todo
este tiempo.
Es igualmente fácil buscar datos. Supongamos que tiene una dirección de correo
electrónico para un usuario y necesita buscar el nombre de esa persona. Para hacer esto,
podría emitir una consulta MySQL como:

SELECT surname,firstname FROM users WHERE mail='jsmith@mysite.com';

MySQL luego devolverá Smith, John y cualquier otro par de nombres que puedan
estar asociados con esa dirección de correo electrónico en la base de datos.

Como era de esperar, hay mucho más que puedes hacer con MySQL que los simples
comandos INSERT y SELECT. Por ejemplo, puede unir varias tablas de acuerdo con
varios criterios, solicitar resultados en una variedad de órdenes, hacer coincidencias
parciales cuando conoce solo una parte de la cadena que está buscando, solo devuelve el
enésimo resultado y mucho más.

Usando PHP, puede hacer todas estas llamadas directamente a MySQL sin tener que
ejecutar el programa MySQL usted mismo o usar su interfaz de línea de comandos. Esto
significa que puede guardar los resultados en matrices para su procesamiento y realizar
búsquedas múltiples, cada una de las cuales depende de los resultados devueltos de las
anteriores, para explorar hasta el elemento de datos que necesita.

Para obtener aún más potencia, como verá más adelante, hay funciones adicionales
incorporadas en MySQL que puede invocar para operaciones comunes y velocidad
extra.

Usando JavaScript
La más antigua de las tres tecnologías principales de este libro, JavaScript, se creó para
permitir el acceso de scripts a todos los elementos de un documento HTML. En otras
palabras, proporciona un medio para la interacción dinámica del usuario, como verificar
la validez de la dirección de correo electrónico en formularios de entrada, mostrar
mensajes como "¿De verdad quiso decir eso?", Y así sucesivamente (tenga en cuenta
que no se puede confiar en él). seguridad, que siempre debe realizarse en el servidor
web).

Combinado con CSS (consulte la siguiente sección), JavaScript es el poder detrás de las
páginas web dinámicas que cambian frente a sus ojos en lugar de cuando el servidor
devuelve una página nueva.

Sin embargo, JavaScript también puede ser difícil de usar, debido a algunas diferencias
importantes en la forma en que diferentes diseñadores de navegadores han elegido
implementarlo. Esto se produjo principalmente cuando algunos fabricantes intentaron
poner funcionalidad adicional en sus navegadores a expensas de la compatibilidad con
sus rivales.

Afortunadamente, los desarrolladores han vuelto en sí a la realidad y se han dado cuenta

de la necesidad de una compatibilidad total entre ellos, para que no tengan que escribir
código de excepción múltiple. Pero quedan millones de navegadores heredados que se
utilizarán durante muchos años. Afortunadamente, existen soluciones para los
problemas de incompatibilidad, y más adelante en este libro veremos bibliotecas y
técnicas que le permiten ignorar estas diferencias de manera segura.

Por ahora, echemos un vistazo rápido a cómo puede 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 que interprete todo en las etiquetas de
script como JavaScript, lo que el navegador hace al escribir el texto Hoy es para el
documento actual, junto con la fecha, usando la función de JavaScript Fecha. El
resultado se verá algo como esto:

Today is Sun Jan 01 2017 01:23:45

NOTA
A menos que necesite especificar una versión exacta de JavaScript, normalmente puede
omitir type = "text / javascript" y simplemente use <script> para comenzar la interpretación de
JavaScript.

Como se mencionó anteriormente, JavaScript fue desarrollado originalmente

para ofrecer control dinámico sobre los diversos elementos dentro de un documento
HTML, y ese sigue siendo su uso principal. Pero cada vez más, JavaScript se está
utilizando para Ajax. Este es un término para el proceso de acceso al servidor web en
segundo plano. (Originalmente significaba "JavaScript y XML asíncronos", pero esa
frase ya está un poco desactualizada).

Ajax es el proceso principal detrás de lo que ahora se conoce como Web 2.0
(un término popularizado por Tim O'Reilly, fundador y CEO de la compañía editorial
de este libro), en el que las páginas web han comenzado a parecerse a los programas
independientes, porque no lo hacen. tienen que ser recargados en su totalidad. En
cambio, una llamada rápida de Ajax puede incorporar y actualizar un solo elemento en
una página web, como cambiar su fotografía en un sitio de red social o reemplazar un
botón con el que hace clic con la respuesta a una pregunta. Este tema está
completamente cubierto en el Capítulo 18.

Usando CSS

Con la aparición del estándar CSS3 en los últimos años, CSS ahora ofrece un
nivel de interactividad dinámica previamente soportado solo por JavaScript. Por
ejemplo, no solo puede darle estilo a cualquier elemento HTML para cambiar sus
dimensiones, colores, bordes, espaciado, etc., sino que ahora también puede agregar
transiciones animadas y transformaciones a sus páginas web, usando solo unas pocas
líneas de CSS.
Usar CSS puede ser tan simple como insertar algunas reglas entre las etiquetas <style>
y </ style> en el encabezado de una página web, como esta:

<style>
p {
text-align:justify;
font-family:Helvetica;
}
</style>

Estas reglas cambiarán la alineación de texto predeterminada de la etiqueta

<p> para que los párrafos que contiene estén completamente justificados y usen la
fuente Helvetica.

Como aprenderá en el Capítulo 19, hay muchas maneras diferentes de diseñar

reglas de CSS, y también puede incluirlas directamente dentro de las etiquetas o guardar
un conjunto de reglas en un archivo externo para cargarlas por separado. Esta
flexibilidad no solo le permite diseñar su HTML de forma precisa, sino que también
puede, por ejemplo, proporcionar una función integrada de desplazamiento para animar
objetos a medida que el mouse pasa sobre ellos. También aprenderá cómo acceder a
todas las propiedades CSS de un elemento desde JavaScript y HTML.

Y luego está HTML5

A pesar de lo útiles que resultaron todas estas adiciones a los estándares web,
no fueron suficientes para desarrolladores más ambiciosos. Por ejemplo, todavía no
existía una forma simple de manipular gráficos en un navegador web sin recurrir a
complementos como Flash. Y lo mismo ocurrió con la inserción de audio y video en
páginas web. Además, varias inconsistencias molestas se habían infiltrado 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 en su
próxima iteración, se creó un nuevo estándar para HTML para abordar todas estas
deficiencias. Se llamó HTML5 y comenzó a desarrollarse ya en 2004, cuando el primer
borrador fue elaborado por Mozilla Foundation y Opera Software (desarrolladores de
dos populares navegadores web). Pero no fue hasta el comienzo de 2013 que el borrador
final fue presentado al Consorcio de la World Wide Web (W3C), el organismo de
gobierno internacional para estándares web.

Con nueve años para que se desarrolle, podría pensar que ese sería el final de
la especificación, pero así no es como funcionan las cosas en Internet. Aunque los sitios
web van y vienen a gran velocidad, el software subyacente se desarrolla lenta y
cuidadosamente, por lo que la recomendación estable para HTML5 no se espera hasta
después de que se publique esta edición del libro, a fines de 2014. ¿Y adivinen qué? El
trabajo pasará a las versiones 5.1 y posteriores, comenzando en 2015. Es un ciclo de
desarrollo sin fin.
 Sin embargo, aunque HTML5.1 está pensado para ofrecer algunas mejoras
prácticas (principalmente en el lienzo), HTML5 básico es el nuevo estándar que los
desarrolladores web ahora necesitan para trabajar, y se mantendrá en su lugar por
muchos años más. Por lo tanto, aprender todo lo que puedas sobre él ahora te hará ser
muy útil.

En realidad, hay muchas cosas nuevas en HTML (y bastantes cosas que se han
cambiado o eliminado), pero en resumen, esto es lo que obtienes

Markup

Incluye elementos nuevos como <nav> y <footer>, y elementos obsoletos

como <font> y <center>.

Nuevas APIs

Por ejemplo, el elemento <canvas> para escribir y dibujar en un lienzo de

gráficos, elementos <audio> y <video>, aplicaciones web sin conexión,
microdatos y almacenamiento local.

Aplicaciones

Incluye dos nuevas tecnologías de renderizado: MathML (lenguaje de

marcado matemático) para mostrar fórmulas matemáticas) y SVG (Scalable Vector
Graphics) para crear elementos gráficos fuera del nuevo elemento <canvas>. Sin
embargo, MathML y SVG son algo especializados, y están tan repletos de funciones
que necesitarían un libro propio, por lo que no los cubro aquí.

Todas estas cosas (y más) están cubiertas en detalle a partir del Capítulo 22.

NOTA
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 cierre automático. En el pasado, podía mostrar
un salto de línea con el elemento <br>. Luego, para asegurar la compatibilidad futura con
XHTML (el reemplazo planeado para HTML que nunca sucedió), esto se cambió a <br />, en el
que se agregó un cierre / carácter (porque se esperaba que todos los elementos incluyeran una
etiqueta de cierre con este personaje ) Pero ahora las cosas han dado un giro completo y
puedes usar cualquiera de las versiones de estos tipos de elementos. Por lo tanto, por razones
de brevedad y menos pulsaciones de teclas, en este libro he vuelto al estilo anterior de <br>,
<hr>, etc.
El Servidor WEB Apache

Además de PHP, MySQL, JavaScript, CSS y HTML5, en realidad hay un

sexto héroe en la Web dinámica: el servidor web. En el caso de este libro, eso significa
el servidor web Apache. Hemos discutido un poco sobre lo que hace un servidor web
durante el intercambio de servidor / cliente HTTP, pero en realidad hace mucho más
detrás de escena.

Por ejemplo, Apache no solo sirve para archivos HTML, maneja una amplia
gama de archivos desde imágenes y archivos Flash hasta archivos de audio MP3, RSS
(Really Simple Syndication), etc. Para hacer esto, cada elemento que un cliente web
encuentra en una página HTML también se solicita desde el servidor, que luego lo sirve.
Pero estos objetos no tienen que ser archivos estáticos como imágenes GIF. Todos
pueden ser generados por programas tales como scripts PHP. Así es: PHP puede incluso
crear imágenes y otros archivos para usted, ya sea sobre la marcha o de antemano para
publicarlos más tarde.

Para hacer esto, normalmente tiene módulos ya sea precompilados en Apache

o PHP o llamados en tiempo de ejecución. Uno de estos módulos es la biblioteca GD
(Draw de Gráficos), que PHP usa para crear y manejar gráficos.

Apache también es compatible con una gran variedad de módulos propios.

Además del módulo PHP, los más importantes para sus propósitos como programador
web son los módulos que manejan la seguridad. Otros ejemplos son el módulo Rewrite,
que permite que el servidor web maneje un rango variable de tipos de URL y los
reescriba según sus propios requisitos internos, y el módulo Proxy, que puede usar para
facilitar las páginas solicitadas con frecuencia desde un caché para facilitar la carga en
el servidor.

Más adelante en el libro, verá cómo utilizar realmente algunos de estos

módulos para mejorar las características proporcionadas por las tres tecnologías
principales.

Acerca del código abierto

Si la calidad de código abierto de estas tecnologías es la razón por la que son

tan populares a menudo se ha debatido, pero PHP, MySQL y Apache son las tres
herramientas más comúnmente utilizadas en sus categorías.

Sin embargo, lo que se puede decir definitivamente es que su código abierto

significa que han sido desarrollados en la comunidad por equipos de programadores que
escriben las características que ellos mismos quieren y necesitan, con el código original
disponible para que todos lo vean y cambien. Se pueden encontrar errores y las
violaciones de seguridad se pueden prevenir antes de que sucedan.

Hay otro beneficio: todos estos programas son de uso gratuito. No tiene que
preocuparse por tener que comprar licencias adicionales si tiene que ampliar su sitio
web y agregar más servidores. Y no necesita verificar el presupuesto antes de decidir si
desea actualizar a las últimas versiones de estos productos.
Reuniéndolo todo

La belleza real de PHP, MySQL, JavaScript, CSS y HTML5 es la manera

maravillosa en que todos trabajan juntos para producir contenido web dinámico: PHP
maneja todo el trabajo principal en el servidor web, MySQL maneja todos los datos, y la
combinación de CSS y JavaScript se ocupa de la presentación de la página web.
JavaScript también puede hablar con su código PHP en el servidor web siempre que
necesite actualizar algo (ya sea en el servidor o en la página web). Y con las nuevas
funciones potentes en HTML5, como el lienzo, el audio y el video, y la geolocalización,
puede hacer que sus páginas web sean muy dinámicas, interactivas y multimedia.

Sin usar el código del programa, resumamos el contenido de este capítulo

observando el proceso de combinar algunas de estas tecnologías en una característica
diaria de Ajax que utilizan muchos sitios web: verificar si ya existe un nombre de
usuario deseado en el sitio cuando un usuario se registra una nueva cuenta. Un buen
ejemplo de esto se puede ver con Gmail (ver Figura 1-3).

Gmail usa Ajax para verificar la disponibilidad de los nombres de usuario

Los pasos involucrados en este proceso de Ajax serían similares a los siguientes:

1. El servidor genera el código HTML para crear el formulario web, que solicita
los detalles necesarios, como nombre de usuario, nombre, apellido y dirección
de correo electrónico.
2. Al mismo tiempo, el servidor adjunta algo de JavaScript al HTML para
monitorear el cuadro de entrada de nombre de usuario y verificar dos cosas: (a)
si se ha tecleado algún texto, y (b) si la entrada ha sido deseleccionada porque el
usuario ha hecho clic en otro cuadro de entrada.
3. Una vez que el texto ha sido ingresado y el campo deseleccionado, en el fondo el
código JavaScript pasa el nombre de usuario que se ingresó a un script PHP en
el servidor web y espera una respuesta.
 4. El servidor web busca el nombre de usuario y responde al JavaScript con
respecto a si ese nombre ya se ha tomado.
5. El JavaScript luego coloca una indicación al lado del cuadro de entrada de
nombre de usuario para mostrar si el nombre está disponible para el usuario, tal
vez una marca de verificación verde o un gráfico de cruz roja, junto con algo de
texto.
6. Si el nombre de usuario no está disponible y el usuario todavía envía el
formulario, el JavaScript interrumpe el envío y vuelve a enfatizar (quizás con un
gráfico más grande y / o un cuadro de alerta) que el usuario necesita elegir otro
nombre de usuario.

7. Opcionalmente, una versión mejorada de este proceso podría incluso buscar el

nombre de usuario solicitado por el usuario y sugerir una alternativa que esté
actualmente disponible.

Todo esto se lleva a cabo silenciosamente en segundo plano y proporciona una

experiencia de usuario cómoda y sin problemas. Sin Ajax, el formulario completo
tendría que enviarse al servidor, que luego enviaría HTML, destacando cualquier error.
Sería una solución factible, pero nada tan ordenada o agradable como el procesamiento
de campo en el momento.

Sin embargo, Ajax puede usarse para mucho más que la simple verificación y
procesamiento de entrada; exploraremos muchas cosas adicionales que puedes hacer
con él en los capítulos de Ajax más adelante en este libro.

En este capítulo, ha leído una buena introducción a las tecnologías básicas de

PHP, MySQL, JavaScript, CSS y HTML5 (además de Apache), y ha aprendido cómo
funcionan juntas. En el Capítulo 2, veremos cómo puede instalar su propio servidor de
desarrollo web para practicar todo lo que va a aprender.

Preguntas
1. ¿Qué cuatro componentes (como mínimo) son necesarios para crear una página
web totalmente dinámica?
2. ¿Qué significa HTML?
3. ¿Por qué el nombre MySQL contiene las letras SQL?
4. PHP y JavaScript son ambos lenguajes de programación que generan resultados
dinámicos para páginas web. ¿Cuál es su principal diferencia, y por qué los
usaría a ambos?
5. ¿Qué significa CSS?
6. Enumera tres elementos principales nuevos introducidos en HTML5.
7. Si encuentra un error (que es raro) en una de las herramientas de código abierto,
¿cómo cree que podría solucionarlo?

Vea el Capítulo 1 Respuestas en el Apéndice A para las respuestas a estas preguntas.

Capítulo 2. Configurar un servidor de desarrollo
Si desea desarrollar aplicaciones de Internet pero no tiene su propio servidor
de desarrollo, deberá cargar cada modificación que realice a un servidor en otro lugar en
la Web antes de poder probarlo.

Incluso en una conexión de banda ancha rápida, esto aún puede representar
una desaceleración significativa en el tiempo de desarrollo. Sin embargo, en una
computadora local, las pruebas pueden ser tan sencillas como guardar una actualización
(por lo general solo es cuestión de hacer clic una vez en un ícono) y luego presionar el
botón Actualizar en su navegador.

Otra ventaja de un servidor de desarrollo es que no tiene que preocuparse por

errores vergonzosos o problemas de seguridad mientras está escribiendo y probando,
mientras que debe ser consciente de lo que la gente puede ver o ver con su aplicación
cuando está en un servidor público. sitio web. Lo mejor es planchar todo mientras aún
está en un sistema de oficina doméstica o pequeña oficina, presumiblemente protegido
por firewalls y otras medidas de seguridad.

Una vez que tenga su propio servidor de desarrollo, se preguntará cómo se las
arregló sin uno, y es fácil configurar uno. Simplemente siga los pasos en las siguientes
secciones, usando las instrucciones apropiadas para una PC, una Mac o un sistema
Linux.

En este capítulo, cubrimos solo el lado del servidor de la experiencia web,

como se describe en el Capítulo 1. Pero para probar los resultados de su trabajo,
especialmente cuando comenzamos a usar JavaScript, CSS y HTML5 más adelante en
este libro, también debe tener una instancia de cada navegador web principal que se
ejecute en algún sistema conveniente para usted. Siempre que sea posible, la lista de
navegadores debe incluir al menos Internet Explorer, Mozilla Firefox, Opera, Safari y
Google Chrome.

Si planea asegurarse de que sus sitios también se vean bien en dispositivos

móviles, también debe intentar organizar el acceso a una amplia gama de teléfonos y
tabletas Apple iOS y Google Android.