DESARROLLOWEB Lectura1

Módulo 1
Introducción a la
programación web
utilizando PHP
1. Introducción a la
programación web
utilizando PHP
1.1 Introducción a la programación
web
En esta primera lectura haremos una introducción general a las cuestiones
relacionadas al desarrollo para entornos web. Para comenzar, repasaremos
conceptos como la arquitectura cliente – servidor y la estructura del
HTML5 junto a sus otros dos pilares: CSS y JavaScript.
Analizaremos, además, los conceptos generales de programación

orientados a objetos y estudiaremos aspectos relacionados a la
programación en capas.
Cabe aclarar que los conceptos y las herramientas que serán desarrollados
en esta primera instancia se presentarán de manera sintética, por lo cual
deberán ser estudiados complementariamente con los tomos de
bibliografía básica establecidos para el cursado de esta materia.
Con el estudio de esta primera lectura aprenderás cómo instalar en tu

computadora portátil (PC) -y mediante simples pasos- un servidor web para
poder realizar las pruebas de programación utilizando HTML, JavaScript,
PHP y MySQL.
1
1.1.1 “Cliente – servidor”
En este apartado presentaremos la arquitectura cliente – servidor, ya que
el desarrollo web se basa, principalmente, en este modelo de aplicación.
Este tipo de arquitectura consiste en un modelo de aplicación distribuida

en el cual las tareas son repartidas entre los proveedores de recursos o
servicios, denominados servidores, y quienes las demandan, denominados
clientes. ¿Cómo funciona? Cuando navegas en internet realizas
constantemente peticiones a otras computadoras remotas o servidores
que dan respuesta. En estos casos, el cliente solicita vía mensaje un servicio
específico a un servidor (es decir, realiza una petición, comúnmente HTTP).
Como respuesta, el servidor envía uno o varios mensajes y, de esta
manera, provee el servicio, como se puede observar en la siguiente imagen:
Imagen 1: Esquema de la arquitectura Cliente - Servidor
Fuente: elaboración propia.
Esta separación entre cliente y servidor implica una separación del tipo
lógica, ya que el servidor no se ejecuta indefectiblemente sobre una única
computadora, ni es un sólo aplicativo. Entre los tipos de servidores que
puedes encontrar podemos nombrar los servidores web (los que
ahondaremos en este curso), de bases de datos, de archivos, correo
electrónico, entre otros. Entonces, por ejemplo, un servidor web “sirve”
páginas web, mientras que un servidor de archivos “sirve” archivos de
computadora. Si una computadora es cliente, servidor o ambas a la vez, se
determina por la naturaleza de la aplicación que se ejecuta. Como veremos
más adelante, en una PC de escritorio instalaremos un servidor web para
poder procesar y visualizar páginas web.
2
Desde el punto de vista funcional, se puede definir a la arquitectura cliente
- servidor como una arquitectura distribuida que permite a los diferentes
usuarios acceder a la información de manera transparente (Renaud, 1993).
Características generales
Algunas de las características de esta arquitectura son:
 Las tareas del cliente y del servidor poseen distintos requerimientos

respecto a los recursos de cómputo tales como velocidad y uso del
procesador, memoria y capacidad de almacenamiento en disco.
 Se entablan relaciones que vinculan procesos diferentes, los cuales
pueden ser ejecutados en la misma máquina o en distintas
máquinas distribuidas a lo largo de la red.
 Se establece una notable diferenciación de funciones basada en el
concepto de servicio y que se determina entre clientes y servidores.
La relación establecida puede darse entre uno o varios; en este
último caso, un servidor presta servicio a numerosos clientes,
controlando el acceso que estos tienen a los recursos compartidos.
 No hay otra vinculación posible entre clientes y servidores que no
consista en la que se da a través del intercambio de mensajes entre
ambos. Estos mensajes representan el mecanismo para la petición y
entrega de solicitudes de servicio.
 El concepto de escalabilidad -tanto horizontal como vertical- es
aplicable a cualquier arquitectura cliente - servidor. La escalabilidad
horizontal nos habilita a adicionar más estaciones de trabajo activas
sin que esto implique influir de manera notable en el rendimiento;
en tanto, la escalabilidad vertical permite mejorar las características
del servidor o agregar múltiples servidores.
 La plataforma de hardware y el sistema operativo del cliente y del
servidor o servidores no son los mismos en todas las ocasiones; sino
que pueden coexistir con sistemas operativos como Windows,
Linux, Solaris y comunicarse de forma transparente para el cliente.
En este sentido, el hecho de que pueda vincular clientes y
servidores independientemente de sus plataformas, representa una
de sus grandes ventajas, las cuales detallaremos de manera precisa
a continuación.
3
Principales ventajas
Entre las principales ventajas de esta arquitectura podemos nombrar

(Renaud, 1993):
 La posibilidad de utilizar plataformas de hardware cada vez más

diversas y cuyo costo es menor. Esta es, probablemente, uno de los
mayores beneficios que presenta, ya que permite utilizar máquinas
realmente baratas en comparación con las que se necesitan en una
solución centralizada, basada en sistemas grandes como puede ser
una arquitectura del tipo mainframe. Por otro lado, también
permite utilizar componentes de distintos fabricantes, tanto de
hardware como de software (sin depender exclusivamente de
ninguno), lo cual reduce los costos de manera significativa y
flexibiliza la implantación y actualización de soluciones, al igual que
la escalabilidad de la solución.
 Facilita la integración entre distintas plataformas, por ejemplo, sin
necesidad de que todos los clientes dispongan del mismo sistema
operativo.
 El mantenimiento es más veloz y también lo es el desarrollo de
aplicaciones, ya que se pueden utilizar las herramientas existentes;
por ejemplo, los servidores de SQL o herramientas de niveles
inferiores (sockets o el RPC).
 La estructura modular y no dependiente de fabricantes permite la
integración de las nuevas tecnologías y el crecimiento de la
infraestructura, contribuyendo, de esta manera, a la escalabilidad
de las soluciones brindadas.
 Contribuye, además, a una computación distribuida, brindando la
posibilidad de integrar la información relevante de diferentes
puntos locales a escala global.
Desventajas:
Entre las principales desventajas de la arquitectura cliente – servidor

encontramos:
 El mantenimiento de los sistemas es, en cierto sentido, más

complicado, ya que representa la interacción de diferentes partes
de hardware y de software, distribuidas por distintos fabricantes, lo
4
cual puede llegar a dificultar el diagnóstico de problemas y la
capacitación del personal a cargo.
 Es relevante que los clientes y los servidores empleen el mismo
mecanismo (sockets o RPC). Esto significa que se debe contar con
mecanismos generales presentes en distintas plataformas.
Probablemente, el mayor desafío sea la sincronización entre
sistemas a nivel de configuración inicial.
 La seguridad entre las comunicaciones cliente – servidor es un
punto a considerar, ya que si bien no se puede considerar como una
desventaja en sí misma, sí representa un ítem a resolver y
garantizar que, quizás, en arquitecturas centralizadas se maneja de
manera más sencilla.
 El nivel de performance es otro aspecto que se debe tener en
cuenta en el esquema cliente - servidor. La congestión en la red o la
dificultad en el tráfico de datos, por citar algunos ejemplos, pueden
representarnos grandes problemas en este tipo de arquitectura.
 Por último, lograr la consistencia en los datos entre diferentes
servidores de base de datos también es una tarea que exige un
esfuerzo extra a la hora de la configuración inicial y el
mantenimiento periódico.
1.2 Introducción a HTML/5, CSS

Imagen 2: HML5
Fuente: Google Imágenes, s.f. Recuperado dehttp://goo.gl/M0hRYI
HTML y CSS son la base del funcionamiento de casi todos los sitios web que
visitamos a diario. Cuando visitas un sitio mediante un navegador web, el
engranaje que se activa por detrás para permitir que el sitio web se
muestre es más complejo. La computadora se basa en lo que se indica en
HTML y CSS para saber lo que tiene que mostrar y cómo mostrarlo
(disposición de los elementos que componen la página en la pantalla, por
ejemplo).
5
Imagen 3: Ejemplo de código HTML de un sitio web
Fuente: elaboración propia.
HTML y CSS son dos lenguajes básicos que necesitamos conocer para poder
desarrollar sitios web. Es el navegador web el que realizará la traducción (la
interpretación) entre los lenguajes de programación y lo que finalmente se
ve en la pantalla de la computadora de un cliente.
En este sentido, cabe aclarar que para crear un sitio web tienes que dar
instrucciones a la computadora (al navegador que está interpretando el
código). Es decir, no basta con escribir el texto que se ha incluido en el sitio
(como lo harías con un procesador de textos, por ejemplo), sino que,
además, debes indicar dónde colocar este texto, cómo se comportará en la
pantalla, dónde insertar imágenes, crear hipervínculos o enlaces entre
diferentes páginas y varias consideraciones más en las que ahondaremos
en apartados posteriores, cuando analicemos lo que se conoce como los
atributos de los componentes.
Estudiaremos, entonces, dos lenguajes que son diferentes pero

complementarios, ya que poseen funciones diferentes:
6
HTML (Hyper Text Markup Language): apareció por primera
vez en el año 1991, con el lanzamiento de la Web. Su función
es la gestión y organización del contenido (…) En HTML
puedes escribir lo que deseas mostrar en la página: texto,
enlaces, imágenes, [entre otros].
CSS (Cascading Style Sheets, también conocidas como “hojas

de estilo”): el papel de CSS es gestionar la apariencia de la
página web (diseño, posicionamiento, bordes, tipografías,
colores, tamaño de texto, [entre otros]). Este lenguaje ha
complementado el código HTML desde 1996. (Menéndez y
Barzanallana, s.f., p. 4, Recuperado de
http://goo.gl/JN09TG).
También puedes haber oído hablar de XHTML. Éste consiste en una

variante de HTML que es más estricta y quizás un poco más compleja de
manipular.
Tal como se mencionó anteriormente, HTML surgió en los inicios de la

década del 90, mientras que a principios del año 2000 la organización W3C
(World Wide Web Consortium, quienes regulan el estándar) lanzó el
XHTML, indicando que éste sería “el futuro”. No obstante, este último no
obtuvo el éxito que se esperaba. En tanto, en el año 2009 XHTML salió de
la W3C y decidió regresar a HTML para hacerlo evolucionar. Existe una gran
confusión en torno a estos lenguajes ya que son muy similares. No es uno
mejor que el otro, sino que implican dos maneras de proceder.
Durante el transcurso de esta materia trabajaremos con la última versión

de HTML (HTML5). Al respecto se puede decir que es posible crear un sitio
web únicamente en HTML, pero que para aplicar reglas de diseño más
amplias y lograr una estética razonable necesitaremos del lenguaje CSS.
Esta es la razón por la que CSS siempre lo completa y complementa.
Mientras HTML define el contenido, CSS permite organizarlo y definir la

presentación visual: el color, la imagen que usaremos de fondo, los
márgenes a establecer, el tamaño de la tipografía, efectos, etcétera. CSS
necesita una página HTML para poder funcionar. Es por eso que primero es
necesario incorporar los conceptos básicos de HTML antes de lograr el
acabado estético en CSS.
Con el tiempo HTML y CSS han ido evolucionando y perfeccionándose, a la

vez que surgían nuevas versiones. Por ejemplo, la primera versión de HTML
7
(HTML 1.0) no contaba con la posibilidad de mostrar imágenes. Detallamos,
a continuación, su evolución a lo largo de las distintas versiones:
 HTML 1: es la primera versión creada por Tim Berners-Lee en 1991.

 HTML 2: la segunda versión de HTML vio la luz en 1994 y culminó
en el año 1996. Fue la versión que plantó las bases sobre las que
surgieron las siguientes versiones. Sus reglas y su funcionamiento
están dados por el W3C, mientras que la primera versión fue creada
por una única persona, Berners-Lee, quien luego fundó la W3C.
 HTML 3: se incorporó en el año 1996 y añadió numerosas
posibilidades al lenguaje tales como tablas, scripts, posicionamiento
de texto alrededor de imágenes, entre otras.
 HTML 4: Esta es la versión más común de HTML (HTML 4.01).
Apareció por primera vez en 1998 y propuso el uso de marcos o
frames -los cuales dividen una página web en varias partes-, tablas
más complejas, mejoras en las formas, entre otros. Además, se
incorpora aquí una de las cualidades más importantes: la
introducción por primera vez de las hojas de estilo CSS.
 HTML 5: se trata de la versión más reciente, la cual no está aún muy
extendida, cuestión que nos sorprende si tenemos en cuenta las
numerosas mejoras que incorpora, tales como la posibilidad de
incluir videos más fácilmente, mejorar el contenido, a la vez que
propone nuevas características para los formularios, entre otros.
Por su parte, CSS evolucionó a través de las siguientes versiones:
CSS 1: se trata de la primera versión. En ella se establecen

las bases de este lenguaje, las cuales permiten las mejoras
descriptas anteriormente en lo que respecta a la
presentación de páginas web.
CSS 2: apareció en 1999 y fue completado por CSS 2.1. Esta

nueva versión de CSS añade numerosas opciones. Ahora se
pueden utilizar técnicas de posicionamiento muy precisas
que permiten ver los elementos en el lugar deseado en la
página.
CSS 3: esta es la última versión, que agrega características

muy esperadas, tales como bordes redondeados,
degradados, sombras, [entre otros].
(Menéndez y Barzanallana, s.f., p. 6, http://goo.gl/JN09TG).
8
HTML 5 (HyperText Markup Language, versión 5) es la quinta
revisión importante del lenguaje básico de la World Wide
Web, HTML.
HTML 5 especifica dos variantes de sintaxis para HTML: un
«clásico» HTML (text/html), la variante conocida como
HTML5 y una variante XHTML conocida como sintaxis
XHTML5 que deberá ser servida como XML (XHTML)
(application/xhtml+xml).
Esta es la primera vez que HTML y XHTML se han
desarrollado en paralelo.
(Diaz Sanz, 2011, p. 19, http://goo.gl/MivfJ9).
La versión definitiva de la 5º revisión del estándar se publicó en el mes de

octubre de 2014.
Tal como se ha mencionado anteriormente, existe un inconveniente: se

trata del hecho de que las nuevas etiquetas HTML5 no son reconocidas o
interpretadas en muchas de las versiones más antiguas de los navegadores
web (Chrome, Firefox, Safari, Opera, entre otros); por lo que se
recomienda a los usuarios actualizarlos a las versiones más recientes para
poder aprovechar todo lo que provee HTML5.
A comparación de otras versiones de HTML, las modificaciones

introducidas HTML5 marcan la diferencia al añadir semántica y
accesibilidad de manera implícita, explicitando cada detalle y eliminando
cualquier ambigüedad. Tiene en consideración el dinamismo que plantean
numerosos sitios webs tales como Twitter, Facebook, Instagram, entre
otros, cuya interfaz y funcionalidad son más parecidos a aplicaciones web
que a documentos estáticos, como lo eran en el pasado.
Entonces, dicho esto, ¿qué necesitamos para crear

una página web?
En internet existen programas de edición web funcionales a tal tarea, tanto

gratuitos como pagos. Pero, en definitiva, con un simple editor de textos
(como el bloc de notas o notepad) puedes comenzar a crear una web.
Aunque la realidad es que, al existir aplicativos más potentes, ya nadie
9
utiliza un bloc de notas (o similares en otros sistemas operativos diferentes
a Windows) para dicha tarea.
Es por ello que existen dos grandes categorías:
 Los simples editores de texto, que pueden utilizarse para programar

en otros lenguajes más allá de HTML y CSS.
 Los editores del tipo WYSIWYG (es el acrónimo de “What You See Is
What You Get” – en español: “lo que ves es lo que obtienes”), que
se basan en elementos visuales que disponemos acomodando en la
pantalla sin escribir una sola línea de código, y el programa nos
genera el código HTML/CSS necesario. Podemos nombrar algunos
de los editores más conocidos como Adobe Dreamweaver, Amaya,
NVU, Kompozer, Bluefish, WYSIWYG Web Builder, iWeb, entre
otros.
Los navegadores
Tal como mencionamos anteriormente, los navegadores que utilizamos no
siempre muestran las páginas web de la misma manera. Esto depende de
las versiones que vayan incorporando los intérpretes del código HTML y
CSS para ir adecuándose a los estándares. Además, muchas computadoras
o dispositivos móviles tienen diferentes versiones de un determinado
navegador, coexistiendo versiones desactualizadas con las más recientes,
lo que, en cierta forma, dificulta poder visualizar de manera uniforme un
sitio web en múltiples dispositivos. Si los usuarios no actualizan el software,
esta situación se convierte en un problema para los creadores de sitios
web. Generalmente, entre Firefox y Chrome existe una gran aceptación e
interpretación del código, mientras que Internet Explorer suele tardar más
en implementarlo.
Si de comparaciones se trata, existen numerosos sitios que nos permiten

comparar las características que pueden interpretar los navegadores y
cómo se visualizan las páginas en cada uno de ellos. Uno de los sitios más
conocidos es caniuse.com, en donde podemos, por un lado, probar cómo
se comportan los atributos de CSS más frecuentes –que veremos más
adelante– y, por el otro, ver una tabla comparativa según las versiones del
software que soporta.
10
Imagen 4: Captura de pantalla de caniuse.com
Fuente: CanIuse, s.f. Recuperado dehttp://caniuse.com/#comparison
Es importante destacar que la mayoría de los problemas o

incompatibilidades que surgen con aplicaciones web o sitios en general
aparecen con versiones antiguas de Internet Explorer (versiones IE6, 7 y 8).
A la vez, debemos aclarar que más allá de lo estético -que efectivamente es
importante-se debe corroborar que la funcionalidad no se pierda. Por
ejemplo, el hecho de que los botones funcionen en cualquier versión: si
uno hace un clic en guardar, efectivamente se debe estar enviando la
información, más allá de si el botón se visualiza con los colores o la forma
en la que lo diseñamos.
Desglosando HTML5
Los documentos HTML están rigurosamente organizados. Cada parte del
documento está distinguida, declarada y determinada por etiquetas
específicas, que van representadas entre los signos < y >. Así luce una
estructura básica:
<!DOCTYPEhtml>
<htmllang="es">
<head>
<meta charset="utf-8" />
<title>Holamundo! Este es el titulo</title>
</head>
<body>
Contenido...
</body>
</html>
11
Primero, comenzamos con el DOCTYPE, el cual es muy sencillo de escribir y
ha sido recortado. Continuamos con la etiqueta HTML, que tiene el atributo
lang, el cual especifica el idioma del sitio. Esta línea de DOCTYPE se ubica
en la línea inicial del archivo, sin espacios o líneas anteriores. De esta
manera, el modo estándar del navegador es activado y las incorporaciones
de HTML5 son interpretadas siempre que sea posible o, en caso contrario,
ignoradas. La etiqueta <html> se cierra al final de todo el documento. Una
etiqueta se cierra cuando especificamos con una barra, como vemos en el
título abre <title> y cierra </title>, que incluye una barra en el mismo
identificador de la etiqueta. O también lo encontramos en <html>, y
cuando cierra: </html>.
HTML utiliza un lenguaje de etiquetas para la construcción de páginas web.

Dichas etiquetas son palabras clave y atributos, precedidos y continuados
por los signos mayor y menor (por ejemplo, <html lang="es">). En este
caso, html es la palabra clave y lang es el atributo con el valor es.
Generalmente, las etiquetas HTML se presentan por pares, es decir, se
utiliza una etiqueta de apertura y otra de cierre, mientras que el contenido
se declara entre ellas. En el ejemplo, <html lang="es"> indica el comienzo
del código HTML y </html> indica el final. Las etiquetas de apertura y de
cierre se diferencian por una barra invertida antes de la palabra clave para
cerrar el bloque (por ejemplo, </html>). El resto de nuestro código será
insertado entre estas dos etiquetas: <html> ...</html> que engloban toda
la estructura de la página y demás etiquetas.
Tal como vemos en el ejemplo, luego de <html> tenemos el siguiente

código, clásico Hola Mundo:
<head>
<meta charset="utf-8" />
<title>Holamundo! Este es el titulo</title>
</head>
HTML, en todas sus versiones, comienza con la primera sección que es la

cabecera, y continúa con la segunda que es el cuerpo, identificadas por las
etiquetas <head> y <body>, respectivamente. El tag <head> se ubica
primero, con una etiqueta de apertura y una de cierre. Dentro de la
etiqueta <head> se define el título de nuestra página web, declarando el
set de caracteres correspondiente. También se puede incorporar
información general acerca del documento (que algunos buscadores
12
utilizan para indexar la página), archivos externos con estilos CSS, códigos
de Javascript, entre otras cosas. Excepto por el título y algunos íconos, el
resto de la información que se coloca en la cabecera es invisible para el
usuario.
Dentro de la cabecera del documento, puede utilizar otras, como es la

etiqueta que define el juego de caracteres a utilizar para mostrar el
documento. Ésta es una etiqueta <meta> que especifica cómo el texto será
presentado en la pantalla. Existen varios tipos de etiqueta <meta> que se
incluyen para especificar información general sobre la página, no se
visualizan en la ventana del navegador ni al usuario, aunque sí es
importante, por ejemplo, para los motores de búsqueda. Como ejemplo de
etiquetas <meta> podemos mencionar:
<meta charset="iso-8859-1">
<metaname=”description” content=”Ejemplo de Etiqueta con
descripción”>
<meta name=”keywords” content=”HTML5, CSS3, Desarrollo web”>
En el código anterior, el atributo name dentro de la etiqueta <meta>

especifica su tipo y content declara su valor, se lo visualiza si examinamos
el código fuente de la página.
Otra de las etiquetas principales es <title> que sirve para especificar el

título de la página (o lo que se muestra en la barra de títulos o de la
pestaña del navegador) y que va dentro de las etiquetas <head>:
<head>
...
<title>Página web de ejemplo</title>
</head>
Otro elemento que va dentro de la cabecera del documento es la etiqueta

<link>.Se utiliza para incorporar estilos, códigos Javascript, imágenes o
íconos desde archivos externos. Siendo uno de los más utilizados
por<link>,la incorporación de archivos con estilos CSS, que se encuentra
en otro archivo:
<link rel=”stylesheet” href=”estilos_generales.css”>
En la versión 5 de HTML ya no se necesita especificar qué tipo de estilos

estamos insertando, por lo que el atributo type fue eliminado. Solo se
utilizan dos atributos para incorporar nuestro archivo de estilos: rel y href.
El atributo rel cuyo significado es “relación” entre el documento y el
13
archivo que estamos incorporando por medio de href. En este caso, el
atributo rel tiene el valor stylesheet que le “informa” al navegador que el
archivo estilos_generales.css es un archivo CSS con estilos requeridos para
la presentación de la página en pantalla. El archivo de estilos (CSS) contiene
un grupo de reglas de formato que ayudará a cambiar la apariencia de la
página web (por ejemplo, el tamaño y color del texto), tal como lo veremos
más adelante. Profundizar el tema con la bibliografía de la materia.
Como lo planteamos anteriormente, el cuerpo representa la parte visible

de todo el documento y es especificado entre etiquetas <body></body>.
Estas etiquetas siguen vigentes en todas las versiones de HTML.
La estructura del cuerpo, o sea, el código entre las etiquetas <body>,

generará la parte que visualizamos en el navegador. Si coloca código luego
de </BODY>, el navegador no lo tendrá en cuenta. HTML ofrece diferentes
formas de construir y organizar la información dentro del cuerpo de un
documento, uno de los primeros elementos provistos para este
propósito fue <table>. Las tablas permiten a los diseñadores acomodar
datos, texto, imágenes y herramientas dentro de filas y columnas de
celdas, incluso sin que hayan sido concebidas para este propósito. A través
de los años, el elemento <div> comenzó a dominar la escena, ya que con el
surgimiento de webs más interactivas y la integración de HTML, CSS y
Javascript, el uso de <div> se volvió una práctica común. Ambas
etiquetas nos permiten acomodar los elementos de la página para que su
estética sea mejor y no comience a escribir y acomodar desde el vértice
superior izquierdo. No obstante, no proveen demasiada información
acerca de las partes del cuerpo que está representando. Desde imágenes
a menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir
entre las etiquetas de apertura y cierre de un elemento <div>. Para
resumir, la palabra clave div solo especifica una división en el cuerpo, como
la celda de una tabla, pero no nos indica nada sobre qué clase de división
es, cuál es su propósito o qué contiene. Para los usuarios, estas claves o
indicios no son importantes, sólo son estéticas; pero, para los navegadores,
la correcta interpretación de qué hay dentro del documento que se
está procesando puede ser crucial en muchos casos (Gauchat, 2013).
Considerando todo lo expuesto, HTML5 incorpora nuevos elementos

que ayudan a identificar cada sección del documento y organizar el
cuerpo del mismo. En HTML5 las secciones más importantes son
diferenciadas y la estructura principal ya no depende más de los elementos
<div> o <table>. Cómo usamos estos nuevos elementos depende de
14
nosotros, pero las palabras clave otorgadas a cada uno de ellos nos ayudan
a entender sus funciones. Normalmente una página o aplicación web
está dividida entre varias áreas visuales para mejorar la experiencia del
usuario y facilitar la interactividad. Puede ampliar mayor información
sobre esta temática en la bibliografía básica.
CSS
La nueva especificación de HTML (HTML5) no describe sólo los nuevos
elementos HTML o el lenguaje mismo. La web no sólo demanda
organización estructural o definición de secciones, sino también diseño y
funcionalidad. En este nuevo paradigma, HTML se presenta junto con
CSS y Javascript (que también veremos en esta lectura) como un único
instrumento integrado.
Por otro lado, cabe aclarar que CSS nada tiene que ver con HTML5. CSS no
es parte de la especificación sino que este lenguaje es, de hecho, un
complemento desarrollado para superar las limitaciones y reducir la
complejidad de HTML. Al comienzo, atributos dentro de las etiquetas
HTML proveían estilos esenciales para cada elemento, pero, a medida
que el lenguaje evolucionó, la escritura de códigos se volvió más compleja
y HTML por sí mismo ya no pudo satisfacer las demandas de los
diseñadores. En consecuencia, CSS fue adoptado como la forma de separar
la estructura de la presentación y, desde entonces, ha crecido y ganado
importancia, pero siempre desarrollado en paralelo.
La especificación de HTML5 fue desarrollada considerando CSS a cargo del

diseño. Debido a esta consideración, la integración entre HTML y CSS es
ahora fundamental para el desarrollo web y esta es la razón por la que
cada vez que se mencione HTML5 también estamos haciendo referencia a
CSS3. En este momento, las nuevas características incorporadas en CSS3
están siendo implementadas e incluidas junto al resto de la especificación
en navegadores compatibles con HTML5.
El modo de funcionamiento de las hojas de estilo consiste en definir,

mediante una sintaxis especial, la forma de presentación que le
aplicaremos a:
 Una página web completa; de modo que se puede definir la forma

de todo el sitio de una sola vez (como es el encabezado, imagen de
fondo, tipografía y tamaño, entre otros).
15
 Un documento HTML o página; se puede definir la forma, en una
pequeña porción de código en la cabecera, a toda la página.
 Una porción del documento, aplicando estilos visibles en una
sección de la página.
 Una etiqueta en concreto, llegando incluso a poder definir varios
estilos diferentes para una sola etiqueta. Esto resulta muy
importante ya que ofrece potencia en nuestra programación.
Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en
azul, con márgenes, sin ellos, entre otros... o, lo que es muy común:
definir cómo se comportan los enlaces o hipervínculos (si están
subrayados o no, si son azules u otro color, entre otros).
La potencia de la tecnología está, entonces, a la vista. Pero las implicancias

también van más allá, ya que además esta sintaxis CSS permite aplicar el
formato al documento de modo mucho más exacto. Si antes el HTML se
nos quedaba corto para maquetar las páginas y debíamos utilizar trucos
para conseguir nuestros efectos, ahora contamos con más herramientas
que nos permiten definir esta forma:
 Podemos definir la distancia entre líneas del documento.

 Se puede aplicar sangrado a las primeras líneas del párrafo.
 Podemos colocar elementos en la página con mayor precisión y
no dar lugar a errores.
 Definir la visibilidad de los elementos, márgenes, subrayados,
textos tachados, entre otros.
 Los tamaños pueden ser definidos con una variedad de
unidades:
o Pixels (px) y porcentaje (%), como antes;
o Pulgadas (in);
o Puntos (pt);
o Centímetros (cm);
Con respecto a la estructura, básicamente cada navegador ordena los

elementos por defecto de acuerdo con su tipo: block (bloque) o inline
(en línea). Esta clasificación está asociada con la forma en la que los
elementos son mostrados en pantalla.
 Elementos block: son posicionados uno sobre otro hacia abajo en la

página.
16
 Elementos inline: son posicionados lado a lado, uno al lado del otro
en la misma línea, sin ningún salto de línea a menos que ya no haya
más espacio horizontal para ubicarlos.
Casi todos los elementos estructurales en nuestros documentos serán

tratados por los navegadores como elementos block por defecto. Esto
significa que cada elemento HTML que representa una parte de la
organización visual (por ejemplo, <section>, <nav>, <header>, <footer>,
<div>) será posicionado debajo del anterior.
Ahora bien, ¿cómo es esto de los CSS y cómo se complementan con HTML?
¿Dónde van estas reglas en forma de sintaxis? Una de las técnicas más
simples para incorporar estilos CSS a un documento HTML es la de asignar
los estilos dentro de las etiquetas por medio del atributo style. El siguiente
ejemplo contiene el elemento<p> (párrafo en HTML), modificado por el
atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por
defecto del texto dentro del elemento <p> a un nuevo tamaño de 20
pixeles.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el título de la página</title>
</head>
<body>
<p style=”font-size: 20px”>Texto de ejemplo en tamaño 20
pixeles.</p>
</body>
</html>
Usar la técnica del ejemplo anterior es una buena manera de probar estilos
y obtener una vista rápida de sus efectos, pero no es recomendado para
aplicar estilos a todo el documento. La razón es simple: cuando usamos
esta técnica, debemos escribir y repetir cada estilo en cada uno de los
elementos que queremos modificar, incrementando el tamaño del
documento y, además, complicando el mantenimiento del código al repetir
varias veces la misma sintaxis. Imaginemos que en una página, en la que
habíamos utilizado esta técnica para cambiar el tamaño, tuviésemos que
determinarlo en 26px. a todos los párrafos. Tendríamos que modificar
entonces cada etiqueta <p> y reemplazar 20 por 26px.
Una mejor alternativa consiste en insertar los estilos en la cabecera del

documento y luego usar referencias para afectar los elementos HTML
correspondientes, lo que se conoce como estilos embebidos.
17
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento de prueba</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
<p>Mitexto</p>
</body>
</html>
La etiqueta <style> mostrada anteriormente permite agrupar estilos CSS

dentro de un documento. En versiones previas de HTML era necesario
especificar qué tipo de estilos serían insertados; en cambio, en HTML5 los
estilos por defecto son CSS, por lo tanto, no necesitamos agregar ningún
atributo en la etiqueta de apertura <style>. En este caso, el código aplica
para todos los elementos <p>, por lo que,por ejemplo, si necesitáramos
modificar el tamaño cambiamos únicamente este renglón y,
automáticamente, todos los elementos <p> presentes en el cuerpo del
documento se cambiarán a los atributos que nosotros modifiquemos
dentro de esta porción de código.
Por último, la práctica más generalizada es escribir el CSS en un archivo

externo y referenciarlo a nuestro documento mediante el uso de <link>, tal
como mencionamos anteriormente. Los archivos CSS son archivos de texto
comunes. Al igual que los archivos HTML, podemos crearlos utilizando
cualquier editor de texto como el Bloc de Notas (Notepad) de Windows,
por ejemplo.
Existen varios métodos para seleccionar cuáles elementos HTML serán

afectados por las reglas CSS que escribamos:
1) referencia por la palabra clave del elemento (etiqueta).

2) referencia por el atributo id.
3) referencia por el atributo class.
Al declarar las reglas CSS utilizando la palabra clave del elemento,

afectamos cada elemento de la misma clase en el documento. Por ejemplo,
la siguiente regla cambiará los estilos de todos los elementos <p>:
p { font-size: 20px }
Otra manera de hacerlo es mediante el atributo id, el cual es como un

nombre que identifica al elemento, esto significa que el valor de este
atributo no puede ser duplicado. Este nombre debe ser único en todo el
18
documento. Para referenciar un elemento en particular usando el
atributo id desde nuestro archivo CSS la regla debe ser declarada con el
símbolo # al frente del valor que usamos para identificar el elemento:
#parrafo_1{ font-size: 20px }
Por último, tenemos la forma de referenciar mediante el atributo class.

Este atributo es más flexible y puede ser asignado a cada elemento HTML
en el documento que comparte un diseño similar:
.texto1 { font-size: 20px }
Para trabajar con el atributo class, debemos declarar la regla CSS con un
punto antes del nombre. La ventaja de este método es que insertar el
atributo class con el valor texto1 será suficiente para asignar estos estilos a
cualquier elemento que queramos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento de
prueba</title>
<link rel="stylesheet" href="estilos_generales.css">
</head>
<body>
<p class=”texto1”>Mi párrafo de prueba</p>
<p class=”texto1”>Mi párrafo de prueba 2</p>
<p>Mi texto</p>
</body>
</html>
Existen otras maneras de referenciar los estilos. Los mismos pueden ser
consultados en los tomos de bibliografía señalados como básicos y
obligatorios para el estudio de los contenidos de la materia.
CSS fue siempre sobre estilo, pero actualmente eso ya no

sucede. En un intento por reducir el uso de código
Javascript y para estandarizar funciones populares, CSS3
no solo cubre diseño y estilos web sino también forma
y movimiento. La especificación de CSS3 es presentada
en módulos que permiten a la tecnología proveer una
especificación estándar por cada aspecto involucrado en
la presentación visual del documento. Desde esquinas
redondeadas y sombras hasta transformaciones y
19
reposicionamiento de los elementos ya presentados en
pantalla, cada posible efecto aplicado previamente
utilizando Javascript fue cubierto. Este nivel de cambio
convierte a CSS3 en una tecnología prácticamente inédita
comparada con versiones anteriores. Cuando la
especificación de HTML5 fue escrita considerando CSS a
cargo del diseño, la mitad de la batalla contra el resto de las
especificaciones propuestas había sido ganada. (Gauchat,
2013, p. 64).
1.3 Introducción a Javascript

JavaScript es un lenguaje de programación que se utiliza para crear páginas
web dinámicas. Cuando hablamos de páginas web de tipo “dinámico”, nos
referimos a aquellas en las cuales encontramos diversos efectos y/o
acciones que devuelven respuestas según lo ejecutado por el usuario (por
ejemplo, ventanas emergentes, botones de búsqueda, etc.).
Es importante aquí mencionar que JavaScript, aunque de nombre similar al

lenguaje de programación Java1, no se relaciona con éste.
Incorporando JavaScript a nuestra página HTML

Tenemos diferentes alternativas para incorporar en nuestros HTML y
XHTML algo de código JavaScript: con sólo “encerrarlo” entre etiquetas
<script> los podemos agregar en cualquier parte de los documentos,
aunque Eguíluz Pérez (2008) nos recomienda definir este código en la
cabecera (el <head>) del documento. Veamos ahora un ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Aquí tenemos un ejemplo de cómo el código JavaScript
se inserta en un documento </title>
<script type="text/javascript">
1Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems, como

podemos ver en http://www.sun.com/suntrademarks/
20
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Aquí se incluye un párrafo.</p>
</body>
</html>
Expone Eguíluz Pérez (2008):
Para que la página XHTML resultante sea válida, es necesario

añadir el atributo type a la etiqueta <script>. Los valores que
se incluyen en el atributo type están estandarizados y, para
el caso de JavaScript, el valor correcto es text/javascript.
Este método se emplea cuando se define un bloque
pequeño de código o cuando se quieren incluir instrucciones
específicas en un determinado documento HTML que
completen las instrucciones y funciones que se incluyen por
defecto en todos los documentos del sitio web.(2008,
recuperado de http://goo.gl/a49ef6).
El principal inconveniente es que si se quiere hacer una modificación en el

bloque de código, es necesario modificar todas las páginas que incluyen
ese mismo bloque de código JavaScript (al igual que cuando se explicó
acerca de insertar “en línea” el CSS en el apartado anterior).
Otra manera de lograrlo es separar el código JavaScript en un archivo

externo que el XHTML convoque mediante un <script>, tal como vemos en
el ejemplo siguiente:
Archivo código_externo.js
alert("Un mensaje de prueba");
Documento XHTML

transitional.dtd">
<head>
<title>Ejemplo de código JavaScript en el propio
documento</title>
21
<script type="text/javascript"
src="/js/código_externo.js"></script>
</head>
<body>
<p>Un párrafo<p>
</body>
</html>
Explica Eguíluz Pérez (2008):
Además del atributo type, este método requiere definir el

atributo src, que es el que indica la URL correspondiente al
archivo JavaScript que se quiere enlazar. Cada etiqueta
<script> solamente puede enlazar un único archivo, pero en
una misma página se pueden incluir tantas etiquetas
<script> como sean necesarias. Los archivos de tipo
JavaScript son documentos normales de texto con la
extensión .jsy se pueden crear con cualquier editor de texto
como Notepad, Wordpad, EmEditor, UltraEdit, Vi, etc. La
principal ventaja de enlazar un archivo JavaScript externo es
que se simplifica el código XHTML de la página, que se puede
reutilizar el mismo código JavaScript en todas las páginas del
sitio web y que cualquier modificación realizada en el
archivo JavaScript se ve reflejada inmediatamente en todas
las páginas XHTML que lo enlazan. (2008, recuperado de
http://goo.gl/a49ef6).
Es por ello que éste es el método a utilizar recomendado en esta lectura.
Por último, contamos con un método menos utilizado: consiste en incluir

bloques de código de JavaScript dentro del código XHTML de la página:
transitional.dtd">
<head>
<title>Aquí tenemos un ejemplo de código JavaScript en el
mismo documento </title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo.</p>
</body>
</html>
22
No obstante, Eguíluz Pérez (2008) considera que incluir bloques de código
de JavaScript dentro del código XHTML “ensucia” el código y dificulta su
mantenimiento, por lo cual se recomienda usarlo sólo cuando definimos
eventos puntuales en el documento.
Etiqueta <noscript>
Ante la diversidad de navegadores web, un desarrollador debe atender a
sus diferencias a la hora de permitir parcial o total bloqueo del uso de
JavaScript, e incluso a que puedan no darle soporte adecuadamente. Para
considerar este abanico de posibilidades, el desarrollador puede utilizar la
etiqueta <noscript> para mostrar al usuario un mensaje de alerta indicando
que su navegador no está permitiendo la ejecución de JavaScript y que
debe activarlo manualmente para poder apreciar la funcionalidad completa
de la página. Veamos un ejemplo de uso de esta etiqueta:
<head> ... </head>

<body>
<noscript>
<p>Párrafo</p>
<p>Esta página requiere JavaScript activado.</p>
</noscript>
</body>
Como podemos apreciar en el ejemplo, esta etiqueta se usa dentro del

body de la página.
Sintaxis básica
La sintaxis de un lenguaje de programación se define como

el conjunto de reglas que deben seguirse al escribir el código
fuente de los programas para considerarse como correctos
para ese lenguaje de programación.
(Eguíluz Pérez, 2008, recuperado de http://goo.gl/QfDMtX).
23
Así como vemos JavaScript, también estudiaremos más adelante las
nociones básicas de PHP (que es bastante similar en su sintaxis).
Eguíluz Pérez (2008) nos explica la sintaxis de JavaScript:
- No se tienen en cuenta los espacios en blanco y las

nuevas líneas como sucede con XHTML: el intérprete
de JavaScript ignora cualquier espacio en blanco
sobrante, por lo que el código se puede ordenar de
forma adecuada para entenderlo mejor (tabulando
las líneas, añadiendo espacios, creando nuevas
líneas, entre otros).
- Se distinguen las mayúsculas y minúsculas al igual
que sucede con la sintaxis de las etiquetas y
elementos XHTML. Sin embargo, si en una página
XHTML se utilizan indistintamente mayúsculas y
minúsculas, la página se visualiza correctamente,
siendo el único problema la no validación de la
página. En cambio, si en JavaScript se intercambian
mayúsculas y minúsculas el script no funciona.
- No se define el tipo de las variables: al crear una
variable, no es necesario indicar el tipo de dato que
almacenará. De esta forma, una misma variable
puede almacenar diferentes tipos de datos durante
la ejecución del script.
- Se pueden incluir comentarios: los comentarios se
utilizan para añadir información en el código fuente
del programa. Aunque el contenido de los
comentarios no se visualiza por pantalla, si que se
envía al navegador del usuario junto con el resto del
script, por lo que es necesario extremar las
precauciones sobre la información incluida en los
comentarios. JavaScript define dos tipos de
comentarios: los de una sola línea y los que ocupan
varias líneas.
- Los comentarios de una sola línea se definen
añadiendo dos barras oblicuas (//) al principio de la
línea.
…
- Los comentarios de varias líneas, se definen
encerrando el texto del comentario entre los
símbolos /* y */.”
(2008, recuperado de http://goo.gl/QfDMtX).
24
Posibilidades y limitaciones de JavaScript
Luego de dispares momentos de popularidad, desde la aparición de las
aplicaciones AJAX2que están programadas con JavaScript, este lenguaje
está más vigente que nunca dentro del mundo de la programación web.
No obstante, y como todo lenguaje, JavaScript tiene algunas limitaciones

que deben ser tenidas en cuenta a la hora de decidir cómo trabajar un sitio
web. Por ejemplo, JavaScript no se comunica con recursos que no sean
parte del mismo dominio de éste; tampoco puede intervenir en elementos
no generados por él mismo, como abrir o cerrar una ventana impulsada
por otro lenguaje que no sea JavaScript; no puede leer ni modificar la
configuración del navegador web; y es frecuente observar que ante la
demora de ejecución de un script (como puede ser un bucle infinito o que
nunca alcance la condición de “corte”), el navegador da al usuario la
posibilidad de detener su ejecución para frenar el exceso consumo de
recursos (Eguíluz Pérez, 2008).
A pesar de todo, existen alternativas para poder saltarse algunas de las

limitaciones anteriores. La alternativa más utilizada y conocida consiste en
firmar digitalmente el script y solicitar al usuario el permiso para realizar
esas acciones.
Un script de ejemplo
A continuación, se muestra un primer script sencillo pero completo:
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<head>
<title>Aquí hay un primer script</title>
<script type="text/javascript">
alert("Mensaje de alerta!");
</script>
2
Significa “Acrónimo de Asynchronous JavaScript And XML” (JavaScriptasíncrono y XML).
Consiste en una técnica de desarrollo web utilizada para crear aplicaciones interactivas
o RIA (Rich Internet Applications).
25
</head>
<body>
<p>Párrafo</p>
</body>
</html>
En él podemos ver que el código JavaScript se insertó en la cabecera

(aunque realmente puede ser incluido en cualquier sector del documento),
dentro de las etiquetas <script>.
También el ejemplo muestra el uso de la instrucción alert() para incluir un

mensaje en una ventana.
Puedes probar y generar un archivo prueba.html con el código anterior y

guardarlo desde el bloc de notas, para luego abrirlo desde tu navegador
preferido.
Imagen 5: Ejemplo de ejecución del script
Fuente: Elaboración propia
jQuery
jQuery es una librería gratuita y de código abierto que simplifica la creación
de páginas web altamente interactivas. Se encuentra en un archivo
pequeño al cual podemos acceder enwww.jquery.com y luego incluirse en
nuestros documentos usando la etiqueta <script> (Gauchat, 2012).
Como indica Castillo Soler (2014), funciona en todos los exploradores de

internet modernos y abstrae características específicas de cada uno de
estos, permitiendo enfocarnos en el diseño y resultado final, en lugar de
tratar de desarrollar funciones complejas en exploradores individuales.
Específicamente, jQuery facilita:
26
 La búsqueda y manipulación de contenido en una página HTML;
 trabajar con el modelo de eventos de los exploradores modernos;
 añadir efectos y transiciones sofisticadas que vemos en páginas
modernas, como animaciones disparadas por eventos.
jQuery tiene la ventaja de proveer soporte para viejos

navegadores y vuelve simple tareas cotidianas. Puede ser
utilizado junto con HTML5 o como una forma simple de
reemplazar funciones de HTML5 en navegadores que no
están preparados para esta tecnología. (Gauchat, 2013, p.
95).
1.4 Frameworks, instalación

Un framework (marco de trabajo en español) es una estructura conceptual
y tecnológica de soporte definido, normalmente con artefactos o módulos
de software concretos que puede servir de base para la organización y
desarrollo de software. Generalmente, consiste en un conjunto de
archivos, programas, bibliotecas y un lenguaje interpretado, entre otras
herramientas, para ayudar a desarrollar y unir los diferentes componentes
de un proyecto. Es un esquema (un esqueleto, un patrón) para el desarrollo
y/o la implementación de una aplicación. Básicamente, nos brinda un
conjunto de herramientas para comenzar a desarrollar nuestra aplicación o
sitio web, sin perder tiempo en construir por nuestra cuenta bibliotecas
para acceso a datos, formatos de presentación, elementos de la interfaz de
usuario, entre otros.
Los frameworks no necesariamente están asociados a un lenguaje

concreto, aunque así se lo vea en numerosas ocasiones. Por ejemplo, Ruby
onRails, Ruby es el lenguaje de programación y Rails es el framework.
Entonces, ¿qué ventajas tiene utilizar un “framework” para el desarrollo?
- El desarrollador no necesita plantearse una

estructura global de la aplicación, sino que el
framework le proporciona un esqueleto que hay que
rellenar no se pierde tiempo reinventando la rueda
con código que ya existe.
- Facilita la colaboración. Cualquiera que haya tenido
que “pelearse” con el código fuente de otro
27
programador (¡o incluso con el propio, pasado algún
tiempo!) sabrá lo difícil que es entenderlo y
modificarlo; por tanto, todo lo que sea definir y
estandarizar va a ahorrar tiempo y trabajo a los
desarrollos colaborativos.
- Es más fácil encontrar herramientas (utilidades,
librerías) adaptadas al framework concreto para
facilitar el desarrollo.”
(Jordisan, 2006, recuperado el 20 de junio de 2015

de http://goo.gl/tEMXQt).
Ahora bien, numerosos clientes o programadores no quieren o aluden no

necesitar un framework para desarrollo. Está claro que se puede
programar toda una aplicación sin utilizar ningún framework conocido,
pero si vamos hacia el desarrollo de una aplicación compleja es altamente
conveniente trabajar con uno (de construcción propia o ajena).
En numerosas ocasiones, esto lleva a que los programadores desarrollen

sus propios frameworks. Y la pregunta entonces sería: en vez de definir un
estándar, ¿por qué no utilizar uno ya definido y aprovechar el trabajo ya
realizado de desarrolladores? La curva de aprendizaje o el tiempo que nos
insume aprender a utilizar un framework no es comparable con el tiempo
de desarrollar un framework desde el inicio. Además, los frameworks
populares que existen en la red tienen un soporte de una gran comunidad
de personas que constantemente contribuyen y ayudan a resolver
problemas, lo que difícilmente sea posible si lo desarrollamos nosotros
mismos.
En lo que nos compete a esta materia, veremos que podríamos utilizar, por
un lado, frameworks para HTML5/CSS3 y, por el otro, para PHP y todo lo
que representa la conectividad con la base de datos. Ahora, la gran duda
que se plantea es qué framework elegir o cuál de ellos es el mejor. La
respuesta es que no existe una solución mágica aplicable a todos los
proyectos, sino que la elección del framework vendrá determinada por el
tipo de aplicación a desarrollar, el lenguaje de desarrollo, la tecnología y
posibles requerimientos técnicos extras que se nos presenten. En muchas
ocasiones, entre marcos de trabajo similares puede que elijamos uno u
otro dependiendo también de lo fácil que es aprender a utilizarlo o
implementarlo. A modo de recomendación general, sólo en el caso de que
ninguno de los frameworks se adapte a las necesidades de desarrollo que
28
tenemos, conviene invertir tiempo en desarrollar y definir un marco de
trabajo.
Tanto para PHP como para HTML5/CSS3, hay muchos frameworks

disponibles y recomendados en la web. Se puede descargar e implementar
de manera gratuita. Entre los más conocidos dentro de los frameworks
HTML/CSS3 podemos nombrar:
Imagen6: Página web de Twitter Bootstrap
Fuente: Twitter bootstrap, s.f. Recuperado de http://getbootstrap.com/
Imagen 7: Página web de Foundation
Fuente: Foundation, s.f. Recuperado de http://foundation.zurb.com/
29
Imagen 8: Página web de Kube
Fuente: Imperavi, s.f. Recuperado dehttp://imperavi.com/kube/
Imagen 9: Página web de 99Lime
Fuente: 99Lime, s.f. Recuperado de http://www.99lime.com
Si bien la elección del framework es personal y depende del proyecto,

hemos elegido uno en particular y es el que veremos en el apartado
siguiente: TwitterBootstrap.
TwitterBootstrap
TwitterBootstrap es un framework de tipo libre y de gran popularidad para
diseño de sitios y aplicaciones web. Contiene una serie de herramientas
como plantillas de diseño con tipografía, formularios, menús de navegación
y otras más, todas basadas en HTML y CSS, así como extensiones de
JavaScript opcionales adicionales para realizar las acciones más comunes
en unsitio web de manera sencilla.
30
Imagen 10: Ejemplo de una página web maquetada con TwitterBootstrap
Fuente: Twitter Bootstrap,s.f. Recuperado de http://goo.gl/08rt6G
Bootstrap, creado por Mark Otto y Jacbod Thornton, se encuentra hoy en

la versión 3.0. Es un framework de estructura modular, que soporta
diseños responsivos (es decir, que la página se adapta dinámicamente al
dispositivo desde el cual se reproduce) y trabaja desde el concepto de
hojas de estilo LESS desde las cuales el desarrollador puede modificar los
estilos y configuraciones que necesite.
Es de simple edición para que el desarrollador pueda personalizar la

documentación, los componentes y todos los valores que desee.
Veamos sus características principales:
 Sistema de cuadrilla de 940px adaptable a diferentes

dispositivos.
 Componentes reutilizables (botoneras, dropdowns, etiquetas,
etc.).
 Integración con librerías de JavaScript.
31
Primeros pasos
Para comenzar a trabajar con Bootstrap tenemos diferentes alternativas:
1) Como primera opción podemos descargar el código CSS

y JavaScript compilado3, que es la forma más sencilla de
empezar a utilizar Bootstrap. La desventaja que supone
consiste en que esta versión no incluye ni los archivos
originales, ni la documentación. Para descargar esta
versión, accede a getbootstrap.com y pulsa el botón
“Download Bootstrap”.
2) Descargar el código fuente4, contiene todos los archivos
Less, y JavaScript originales de Bootstrap. La desventaja
es que requiere un compilador de archivos Less y cierto
trabajo de configuración.
3) Descargar el código fuente en formato Sass5: se trata de
una variante de la versión anterior y que se ha creado
para facilitar la integración de Bootstrap en las
aplicaciones Ruby OnRails, Compass o cualquier otro
proyecto basado en Sass. (Bootstrap, s.f. Recuperado de
http://getbootstrap.com/getting-started/).
Utilizando la CDN de Bootstrap

Para que puedas dar uso a los archivos CCS y JavaScript de Bootstrap,
deberás modificar dos enlaces en tus páginas (cambia el valor 3.0.0 por la
versión específica de Bootstrap) (Bootstrap, s.f. Recuperado de
http://getbootstrap.com/getting-started/).
3 Descarga disponible en el siguiente link: http://getbootstrap.com/ presionando en

“Download Bootstrap”.
4
Descarga la versión más reciente en el sitio github.com/twbs/bootstrap/releases.
5Descarga la versión más reciente en el sitio github.com/twbs/bootstrap-sass/releases.
32

<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap
.min.css">

<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap
-theme.min.css">

<script
src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.m
in.js"></script>
Contenidos de la versión compilada de Bootstrap

Después de descomprimir el archivo, que previamente hemos descargado,
con la versión compilada de Bootstrap, podrás observar la siguiente
estructura de archivos y directorios:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Estos archivos consisten en la forma más sencilla de utilizar Bootstrap en

cualquier proyecto web. Para cada archivo se ofrecen dos variantes: los
archivos compilados (cuyo nombre es bootstrap.*) y los archivos
compilados + comprimidos (cuyo nombre es bootstrap.min.*). También se
incluyen las fuentes de los íconos del proyecto Glyphicons y el tema
opcional de Bootstrap.
33
Contenidos de la versión original de Bootstrap
Si trabajas con la versión original de Bootstrap,verás que ésta incluye las
versiones originales de esos mismos archivos y toda la documentación.
Entonces, una vez que descomprimas el archivo descargado con la versión
original de Bootstrap, verás lo siguiente:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Los directorios less/, js/ y fonts/ contienen el código fuente

utilizado para generar los archivos CSS, JavaScript y las
fuentes. El directorio dist/ contiene los mismos archivos que
se han mostrado en la sección anterior para la versión
compilada de Bootstrap. El direcotrio docs/ incluye el código
fuente de la documentación de Bootstrap y un directorio
llamado examples/ con varios ejemplos de uso. El resto de
los archivos están relacionados con otros temas
secundarios, como, por ejemplo, las licencias del código.
(Bootstrap, s.f. Recuperado de http://goo.gl/gbhbHL).
Creando la primera plantilla con Bootstrap

El siguiente código HTML muestra una plantilla muy sencilla creada con
Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Plantillaejemplo de Bootstrap</title>


<link href="css/bootstrap.min.css" rel="stylesheet"
media="screen">
34


</head>
<body>
<h1>¡Hola mundo!</h1>

<scriptsrc="http://code.jquery.com/jquery.js"></script>

<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>
Ejemplo recuperado de https://goo.gl/04xDp5el 20 de junio de 2015.
Si se parte de la primera plantilla básica mostrada en el apartado anterior,

se pueden crear otros numerosos diseños de página.6
Para estar atentos a las novedades de la comunidad que utiliza y desarrolla

este framework, puedes utilizar alguno de los canales disponibles:
 Blog oficial: http://blog.getbootstrap.com/

 Chatear con otros miembros de la comunidad a través del canal
##twitter-bootstrap en el servidor irc.freenode.net.
 En twitter: https://twitter.com/twbootstrap
 O ver más ejemplos de sitios basados en este framework,
accediendo a http://expo.getbootstrap.com/
En resumen, todo lo que necesitas para utilizar TwitterBootstrap es

descargar el archivo .zip con las librerías desde http://getbootstrap.com y
referenciar en tu página web las referencias CSS y Javascript de este
framework.
6
Para consultar los ejemplos básicos, puedes acceder a http://getbootstrap.com/getting-
started/#examples
35
1.4.1 Capas
La programación por capas es una arquitectura que se compone desde la
división entre la lógica de negocios y la lógica de diseño.
Imagen 11: Ejemplo de separación por capas.
Fuente: Cristian Ayala, 2009,recuperado de http://goo.gl/iiqXFM
Este tipo de desarrollo permite trabajar en varios niveles, facilitando el

mantenimiento e intervenciones puntuales en sólo un nivel (sin tener que
trabajar con todo el código) y la distribución de carga de trabajo en
diferentes personas. A esto le llamamos arquitecturas multinivel o
programación por capas, generando arquitecturas escalables según la
necesidad del proyecto.
El más utilizado actualmente es el diseño en tres niveles (o en tres capas),

como se puede observar en el gráfico anterior, en donde tenemos la capa
de presentación, la de lógica de negocios y la de datos.
Ahora bien, en las interfaces web podemos mencionar un modelo por

capas, en donde encontramos la capa estructural, de presentación y de
comportamiento. Con el concepto de diseño por capas nos encontramos
con la capa estructural, que es la base sobre la que se aplica el resto de
capas; a continuación, sigue la capa de presentación, que hace uso de hojas
de estilo en cascada (CSS) y que proporciona las instrucciones sobre el
aspecto del documento en la pantalla, sobre el sonido o sobre el modo en
el que será formateado si va a ser impreso. Además de estas dos capas,
existe una tercera capa: la capa de comportamiento, donde generalmente
a través de Javascript y la programación se añaden interactividad y efectos
dinámicos a un sitio.
36
La capa estructural
En un principio, los desarrolladores de navegadores se centraron en la

creación de etiquetas (etiquetas para Netscape o etiquetas para Internet
Explorer), muchas veces incompatibles entre navegadores. Gracias a HTML,
el marcado estructuraldel documento es la base sobre la que se aplicarán
las capas de presentación y comportamiento. Estos son los lenguajes
estándares actuales para el marcado estructural.
La capa de presentación
Ya que todas las instrucciones de presentación se han eliminado del

estándar de marcado, esta información pasa a ser un trabajo exclusivo de
las hojas de estilo en cascada. Los estándares de hojas de estilos se están
desarrollando en fases, de este modo:
 CSS Nivel 1: recomendado desde 1996, es soportado por todos los

navegadores. Controla el texto y los márgenes.
 CSS Nivel 2.1: recomendado desde 1998, introdujo el

posicionamiento absoluto de elementos de una página.
 CSS Nivel 3: ordenado por módulos para favorecer expansiones7.
La capa de comportamiento
El scripting y programación de esta capa añaden interactividad y efectos

dinámicos a un sitio.
Modelos de objeto
DOM (Document Object Model, Modelo de Objetos del

Documento) permite a scripts y aplicaciones acceder y
actualizar el contenido, la estructura y el estilo de un
documento nombrando formalmente cada una de sus
partes, sus atributos y el modo en el que el objeto puede ser
manipulado. En un inicio, cada uno de los navegadores
principales tenía su propio DOM, dificultando la creación de
efectos interactivos para todos los navegadores.
7Puedes encontrar los vínculos a estas tres especificaciones CSS en el siguiente link web:
www.w3.org/Style/CSS.
37
- Modelo de Objetos del Documento (Núcleo) Nivel 1:
Esta versión incluye documentos HTML y XML así
como la manipulación y navegación de documentos.
Esta especificación puede encontrarse en
www.w3.org/TR/REC-DOM-Level-1/
- Modelo de Objetos del Documento Nivel 2: incluye

un modelo de objetos de hoja de estilos permitiendo
manipular información de estilo. En
www.w3.org/DOM/DOMTR pueden encontrarse
vínculos al núcleo y otros módulos de la
especificación de Modelo de Objetos del Documento
Nivel 2.”
(Recuperado el 26 de junio de 2015, de

http://goo.gl/FbR5ul)
En sentido más práctico, un ejemplo de arquitectura web en tres capas

sería:
1) Navegador del cliente: capa de presentación.

2) Servidor web: capa de aplicación (o lógica de negocio).
3) Base de datos: capa de datos
Existen múltiples modelos que pueden estar basados, a su vez, en otros

modelos, establecidos en multicapas o derivados de otros. Por ejemplo, si
aplicamos una división completa de las partes que integran el proceso de
realización de cualquier proyecto orientado a Internet, podemos definir
cinco capas: 1) Modelado de Datos, 2) Lógica de Programación, 3)
Estructura de Contenido, 4) Diseño de la Interfaz y 5) Maquetación e
Implementación, y cada una de esas capas puede ser trabajada por un
equipo de desarrollo diferente.
El modelo – vista – controlador

“Modelo Vista Controlador (MVC) es un estilo de arquitectura de software
que separa los datos de una aplicación, la interfaz de usuario, y la lógica de
control en tres componentes distintos” (Universidad de Alicante,
recuperado el 16 de junio de 2015 de http://goo.gl/NpR3Jp).
38
Imagen 12: Esquema básico del MVC
Fuente: LibrosWeb.es, s.f. Recuperado dehttp://goo.gl/QYyF8b
MVC fue introducido por Trygve Reenskaug en Smalltalk-76 durante su

visita a Xerox Parc en los años 70 y, seguidamente, en los años
80JimAlthoff y otros implementaron una versión de MVC para la biblioteca
de clases de Smalltalk-80.
Si describimos el patrón de manera genérica, los componentes de MVC se

podrían definir como sigue:
- El Modelo que contiene una representación de los

datos que maneja el sistema, su lógica de negocio, y
sus mecanismos de persistencia.
- La Vista, o interfaz de usuario, que compone la

información que se envía al cliente y los mecanismos
interacción con éste.
- El Controlador, que actúa como intermediario entre

el Modelo y la Vista, gestionando el flujo de
información entre ellos y las transformaciones para
adaptar los datos a las necesidades de cada uno.
(Universidad de Alicante, recuperado el 16 de junio

de 2015 de http://goo.gl/NpR3Jp).
El origen del MVC fue el de trabajar con aplicaciones de escritorio, aunque

hoy ya ha evolucionado hacia el mundo de las plataformas web. Muchos de
39
los frameworks actuales trabajan con este patrón, interpretando las
funciones MVC.
Imagen 13: Esquema básico de funcionamiento del modelo MVC.
Fuente: Elaboración propia.
MVC es una forma de organizar el código de un sitio o una aplicación para

ayudar a mantener el orden y estructura de un proyecto. Algunas
justificaciones prácticas de porqué utilizar MVC serían, por ejemplo: si tu
cliente quiere cambiar los colores de la presentación o el color de un botón
determinado, con MVC tendrás que cambiar únicamente los archivos o
recursos que estén implicados en la vista. Si cambian algo en la base de
datos o agregas cierta información en la estructura de una tabla, podrás
realizar los cambios de sintaxis en los archivos correspondientes al modelo
sin temer que se hagan modificaciones involuntarias en el controlador. En
MVC aplicado correctamente, la estructura del código se encuentra bien
segmentada y ordenada. Existen diversos frameworks de desarrollo para
PHP basados en este patrón de arquitectura como, por ejemplo: Laravel,
CodeIgniter, CakePHP, Symfony, Zend, Phalcon, Yii, Aura, Kohana, Slim,
FuelPHP.
A modo de recomendación final, revisemos algunas de las ventajas de

utilizar MVC:
1) Trabajar en proyectos escalables ya que se puede dividir el diseño

de la funcionalidad del negocio.
2) Facilidad en la gestión de librerías JavaScript.
40
3) Permite el trabajo de varios equipos en paralelo bajo métodos
comunes de programación.
4) Un Framework MVC te ayuda a controlar los recursos del servidor,
evitando bugs (errores) que puedan repercutir en el rendimiento;
por ejemplo, los casos en los que olvidamos cerrar conexiones a la
base de datos, sobrecargando el servidor.
Además de usar MVC, es conveniente utilizar una programación limpia,

respetando los estándares W3C y, tal como hemos dicho anteriormente,
esta no supone una solución mágica, sino que se trata de modelos y
herramientas que nos pueden facilitar las tareas del desarrollo.
1.4.2 Programación OO
La programación orientada a objetos (OOP por sus siglas en inglés) usa los
objetos en sus interacciones para diseñar aplicaciones y programas
informáticos. A continuación, detallaremos los conceptos básicos y
brindaremos ejemplos prácticos orientados a PHP (muchos otros lenguajes
utilizan POO).
Clase
Una clase es un modelo que se utiliza para crear objetos que comparten un
mismo comportamiento, estado e identidad. Podemos utilizar un ejemplo
cotidiano para ejemplificar, como puede ser definir a Persona como una
clase (la abstracción de Juan, Carolina, Ana y Marcos, por ejemplo) cuyo
comportamiento puede ser caminar, correr, estudiar, leer, entre otros, o es
factible que se encuentre en estado despierto, dormido, etc. y sus
características (propiedades) pueden ser el color de ojos,color de pelo, su
estado civil, etc. Ya veremos esto de los estados y propiedades más
adelante.
class Persona {
# Propiedades
# Métodos
}
41
Objeto
Es una entidad provista de métodos o mensajes a los cuales responde;
atributos con valores concretos y propiedades.
$persona = new Persona(); //Instancia de Persona()
Método
Es el algoritmo asociado a un objeto que indica la capacidad de lo que éste
puede hacer.
function caminar() {
// conjunto de instrucciones...
}
Eventos y mensajes
Un evento es un suceso en el sistema, mientras que un mensaje es la
comunicación del suceso dirigida al objeto.
Propiedades y atributos
Las propiedades y atributos son variables que contienen datos asociados a
un objeto. Siguiendo con el ejemplo de la persona, podemos nombrar:
$nombre = 'Juan';
$apellido = 'Perez';
$fecha_nacimiento = '26/10/1970';
Como dijimos al comienzo de este apartado, la POO debe guardar ciertas

características que la identifican y diferencian de otros paradigmas de
programación. Dichas características las describimos a continuación:
 Abstracción: aislación de un elemento de su contexto,

define las características esenciales de un objeto.
 Encapsulamiento: reúne al mismo nivel de abstracción, a
todos los elementos que puedan considerarse
pertenecientes a una misma entidad.
 Modularidad: Característica que permite dividir una
aplicación en varias partes más pequeñas (denominadas
módulos), independientes unas de otras.
 Ocultación (aislamiento): los objetos están aislados del
exterior, protegiendo a sus propiedades para no ser
modificadas por aquellos que no tengan derecho a
acceder a las mismas.
42
 Polimorfismo: es la capacidad que da a diferentes
objetos la posibilidad de contar con métodos,
propiedades y atributos de igual nombre, sin que los de
un objeto interfieran con los de otro.
 Herencia: es la relación existente entre dos o más clases,
donde una es la principal (madre) y otras son
secundarias y dependen (heredan) de ellas (clases
“hijas”) y donde, a la vez, los objetos heredan las
características de los objetos de los cuales heredan.
 Recolección de basura: es la técnica que consiste en
destruir aquellos objetos cuando ya no son necesarios,
liberándolos de la memoria. (Bahit, 2011, p. 12).
Repasados los conceptos generales, continuaremos analizando cómo

aplicar los conceptos de la POO en el entorno del lenguaje PHP 5+.
Según el Manual Oficial de PHP, una Clase es: “una colección de variables y
funciones que trabajan con estas variables. Las variables se definen
utilizando var y las funciones utilizando function” (PHP, s.f., recuperado de
http://goo.gl/ROzEtc).Para definir una clase, el manual nos dice:
La definición básica de clases comienza con la palabra clave

class, seguido por un nombre de clase, continuado por un
par de llaves que encierran las definiciones de las
propiedades y métodos pertenecientes a la clase. El nombre
de clase puede ser cualquier etiqueta válida 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 la
cantidad de letras, números o guiones bajos que sea. (PHP,
s.f., recuperado de http://goo.gl/oRm8am).
Por ejemplo:
<?php
Class SimpleClass
{
// Declaración de la propiedad
public $var = 'a default value';
// Declaración del método

Public function displayVar() {
echo $this->var;
43
}
}
?>
Como indica Bahit (2011), las clases abstractas no necesitan ser

instanciadas peroserán heredadas en algún momento. Se definen
anteponiendo la palabra clave abstractclass:
Abstractclass NombreDeMiClaseAbstracta {
#...
}
Este tipo de clases será la que contenga métodos abstractos

y, generalmente, su finalidad es la de declarar clases
genéricas que necesitan ser declaradas, pero a las cuales no
se puede otorgar una definición precisa (ya que de eso se
encargarán las clases que la hereden). (Bahit, 2011, p.14).
Herencia de clases
Sigue Bahit (2011, p.15):
Los objetos pueden heredar propiedades y métodos de otros
objetos. Para ello, PHP permite la extensión (herencia) de
clases, cuya característica representa la relación existente
entre diferentes objetos. Para definir una clase como
extensión de una clase madre se utiliza la palabra clave
extends.
Class NombreDeMiClaseMadre {
#...
}
Class NombreDeMiClaseHija extends NombreDeMiClaseMadre
{
/* esta clase hereda todos los métodos y
propiedades de
la clase madre NombreDeMiClaseMadre
*/
}
PHP 5 incorpora clases finales que no pueden ser heredadas por otra:
finalclassNombreDeMiClaseFinal {
#esta clase no podrá ser heredada
}
44
Para poder decidir qué clase declarar usemos la tabla siguiente:
Tabla 1: Uso de las clases según necesidades.
Necesito… Instanciable Abstracta Heredada Final

Crear una clase que pueda ser
X
instanciada y/o heredada
Crear una clase cuyo objeto
guarda relación con los métodos X
y propiedades de otra clase
Crear una clase que solo sirva de
modelo para otra clase, sin que X
pueda ser instanciada
Crear una clase que pueda
instanciarse pero que no pueda
X
ser heredada por ninguna otra
clase
Fuente: Bahit, 2011. Recuperado de http://goo.gl/MeSIfr
Una vez que las clases han sido declaradas, será necesario crear los objetos
y utilizarlos, aunque hemos visto que algunas clases-como las clases
abstractas- son solo modelos para otras y, por lo tanto, no necesitan
instanciar al objeto.
Para instanciar una clase, debemos usar la palabra clave new. El objeto será
creado, asignando esta instancia a una variable (la cual, adoptará la forma
de objeto). Bahit (2011) nos recuerda que siempre debemos declarar la
clase antes de instanciarla:
# declaro la clase
class Persona {
#...
}
# creo el objeto instanciando la clase

$persona = new Persona();
“Las propiedades representan ciertas características del objeto en sí

mismo. Se definen anteponiendo la palabra clave var al nombre de la
variable (propiedad)” (Bahit, 2011, p.16).
45
class Persona {
var $nombre;
var $apellido;
var $edad;
}
Propiedades públicas, privadas, estáticas y protegidas
“Las propiedades públicas se definen anteponiendo la palabra clave public

al nombre de la variable. Éstas pueden ser accedidas desde cualquier parte
de la aplicación, sin restricción” (Bahit, 2011, p.16).
class Persona {
public $nombre;
public $genero;
}
Las propiedades privadas se definen anteponiendo la palabra clave private

al nombre de la variable.
class Persona {
public $nombre;
public $DNI;
private $edad;
}
Las propiedades protegidas (lo mismo que las privadas detalladas

anteriormente) sólo son accesibles desde la propia clase que la definió, así
como por las clases que la heredan. Las definimos anteponiendo la palabra
clave protected al nombre de la variable:
class Persona {
public $nombre;
public $DNI;
private $edad;
protected $genero;
}
Las propiedades estáticas de una clase, pueden ser accedidas sin necesidad
de instanciar un objeto; y sus valores son estáticos (es decir, no pueden
variar ni ser modificados). Las definimos anteponiendo la palabra clave
static:
46
classPersonaAPositivoextends Persona {
publicstatic $ciudad = 'CBA';
}
Hay diferentes formas de acceder a las propiedades de un objeto, según

desde donde se las invoque, de su condición y visibilidad. Principalmente,
se hace desde dentro de la clase o desde el exterior.
Por ejemplo, para acceder a una propiedad pública y estática no

necesitamos instanciar el objeto (podemos acceder desde cualquier ámbito
fuera de la clase) (Bahit, 2011):
Clase::$variable_estática
# accedo a la variable estática
printPersonaAPositivo::$ciudad;
Si, en cambio, queremos acceder a una propiedad no estática, usamos:

$objeto->variable
# creo el objeto instanciando la clase

$persona_a_positivo = new PersonaAPositivo();
# accedo a la variable NO estática
print $persona_a_positivo->apellido;
Otro tipo de propiedad de una clase son las constantes, aquellas que
mantienen su valor de forma permanente y sin cambios y, a diferencia de
las propiedades estáticas, las constantes solo pueden tener una visibilidad
pública. Puede declararse una constante de clase como cualquier
constante normal en PHP 5.
El acceso a constantes es exactamente igual que al de otras propiedades. Si

seguimos la lectura de Bahit (2011), una buena regla de estilo de
programación es utilizar el NOMBRE_DE_CONSTANTE en letra
MAYÚSCULA, ya que nos ayuda a diferenciar rápidamente constantes de
variables, haciendo más legible el código fuente.
const MI_CADENA = 'Este es el valor estático de la

constante';
47
Métodos en PHP
Los métodos de una clase son un algoritmo, al igual que una función. Para
declarar un método antepongamos function al nombre del método,
seguido por un paréntesis y llaves para encerrar al algoritmo:
# declaro la clase
class Persona {
#propiedades
#métodos
functiondonar_sangre() {
#...
// instrucciones
}
}
Al igual que cualquier otra función en PHP, los métodos reciben los
parámetros requeridos dentro de los paréntesis:
# declaro la clase
class Persona {
#propiedades
#métodos
functiondonar_sangre($destinatario) {
#...
}
}
Los métodos, al igual que las propiedades, pueden ser públicos,

privados, protegidos o estáticos. La forma de declarar su visibilidad
tanto como las características de ésta es exactamente la misma que
para las propiedades.
static function a() { }

protected function b() { }
private function c() { }
// etc...
(Bahit, 2011, p.19).
El Manual Oficial de PHP describe así a los métodos abstractos:
Los métodos definidos como abstractos simplemente

declaran la estructura del método, pero no pueden definir la
48
implementación. Cuando se hereda de una clase abstracta,
todos los métodos definidos como abstract en la definición
de la clase parent deben ser redefinidos en la clase child;
adicionalmente, estos métodos deben ser definidos con la
misma visibilidad (o con una menos restrictiva). Por ejemplo,
si el método abstracto está definido como protected, la
implementación de la función puede ser redefinida como
protected o public, pero nunca como prívate. (PHP, s.f.,
http://goo.gl/L3FwFl).
Bahit (2011) nos ayuda a entenderlo mejor explicando que los métodos
abstractos son declarados en una clase abstracta, pero no contienen una
indicación (un código) que indique qué y cómo hará algo (es decir, sin
indicar el algoritmo que han de implementar).
Métodos “mágicos” en PHP
PHP 5 nos ofrece muchos “métodos mágicos”, que otorgan una

funcionalidad predefinida por PHP y pueden aportar valor a nuestras clases
y ahorrarnos grandes cantidades de código (Bahit, 2011).
Entre estos métodos mágicos, podemos encontrar los siguientes:
__construct()
El método __construct() es aquel que será invocado de manera

automática al instanciar un objeto. Su función es la de ejecutar
cualquier inicialización que el objeto necesite antes de ser utilizado.
# declaro la clase
class Producto {
#defino algunas propiedades
public $nombre;
public $precio;
protected $estado;
#defino el método set_estado_producto()

protectedfunctionset_estado_producto($estad
o) {
$this->estado = $estado;
}
# constructor de la clase
49
function __construct() {
$this->set_estado_producto('en uso');
}
}
En el ejemplo anterior, el constructor de la clase se encarga

de definir el estado del producto como en uso, antes de que
el objeto (producto) comience a utilizarse. Si se agregaran
otros métodos, éstos podrán hacer referencia al estado del
producto para determinar si ejecutar o no determinada
función. Por ejemplo, no podría mostrarse a la venta un
producto en uso por el sistema, ya que a éste se le podría
estar modificando el precio. (Bahit, 2011, p.19).
Otro método es el __destruct(), que se encarga de liberar de la memoria al

objeto cuando ya no es referenciado. Se puede aprovechar este método
para realizar otras tareas que se estimen necesarias al momento de
destruir un objeto.
# declaro la clase
class Producto {
#defino algunas propiedades
public $nombre;
public $precio;
protected $estado;
#defino el método set_estado_producto()

protectedfunctionset_estado_producto($esta
do) {
$this->estado = $estado;
}
# constructor de la clase
function __construct() {
$this->set_estado_producto('en
uso');
}
# destructor de la clase
function __destruct() {
$this-
>set_estado_producto('liberado');
print 'El objeto ha sido
destruido';
}
}
Ejemplo tomado de Bahit, 2011, p.21.
50
Entro otros métodos encontramos: __call, __callStatic,
__get, __set, __isset, __unset, __sleep, __wakeup, __toString,
__invoke, __set_state y __clone.8
Servidores web
Un servidor web es un software instalado en el equipo para entregar

páginas web que le sean solicitadas por un navegador, asegurando que se
muestren y representen todos los elementos necesarios para su correcto
funcionamiento y visualización.
Existen diferentes tipos de servidores web, y, entre ellos, Apache es un

software de código abierto, libre de uso y configurable (hoy uno de los más
utilizados), ya sea en plataformas Linux o Windows (Carrodeguas, 2015).
Imagen 14: Esquema funcionamiento servidor web
Fuente: Google Imágenes, s.f. Recuperado dehttp://goo.gl/k9qZDM
Además, al instalar Apache tendremos un servidor local completo que nos

permitirá:
- Probar y ver las páginas web como verdaderamente

van a mostrarse desde internet antes de subirlas a
un host o servidor en la red. Esto es útil e
indispensable si tienes un sitio o si vas a crearlo, por
modesto que este sea.
8 Puede verse una descripción y ejemplo de su uso en el sitio web oficial de PHP:
http://www.php.net/manual/es/language.oop5.magic.php
51
- Poder ver y probar localmente páginas web hechas
en lenguaje PHP.
- Servir nuestras páginas o sitios web directamente a

internet, a los que puede acceder y conectarse
cualquier persona desde el exterior. En este caso el
funcionamiento del servidor estará lógicamente
limitado al tiempo que tengamos funcionando la PC y
a las posibilidades de nuestra conexión. Puede
constituir una experiencia muy alentadora para
cualquier aficionado, además, esta posibilidad da la
ventaja de que no es necesario depender de ninguna
compañía ni servidor remoto para subir a la red el
contenido que queremos mostrar. Es como montar
una pequeña estación de radio y comenzar a
transmitir pero, en este caso, el alcance es global.
- Puede actuar como intermediario entre nuestra PC e

Internet, lo cual nos brinda numerosas ventajas en el
ámbito de la seguridad.
- Es posible activar un módulo que permita guardar en

cache todas las páginas cargadas, lo que mejorará el
rendimiento de nuestra navegación.
(Carrodeguas, 2015, recuperado de
http://norfipc.com/internet/instalar-servidor-
apache.html)
¿Cómo podemos instalar Apache?
Carrodeguas (2015) explica 3 formas:
 Podemos instalar manualmente el programa y sus diferentes

módulos.
 Descargando el paquete XAMPP (incluye Apache, la base de datos
MySQL, PHP y Perl).
 Mediante otras distribuciones como LAMP o MAMP.
En este primer módulo explicaremos cómo instalar:
…XAMPP, acrónimo de Cualquier Plataforma (X), Apache (A),

MySQL (M), PHP (P) y Perl (P). Es una distribución de Apache
52
sencilla y ligera que facilita enormemente a los
desarrolladores crear un servidor web local para realizar
pruebas. Todo lo que necesita para configurar un servidor
web – la aplicación servidor (Apache), la base de datos
(MySQL), y un lenguaje de script (PHP) – está incluido en un
único archivo extraíble. XAMPP es también multi-
plataforma, lo que significa que funciona bien tanto en
Linux, como Mac o Windows. Dado que la mayoría de
servidores web actuales usan los mismos componentes que
XAMPP, la transición desde el servidor de prueba local al
servidor de producción también es extremadamente fácil. El
desarrollo web utilizando XAMPP es especialmente amigable
para los principiantes. (MIKOLUK, 2013, recuperado de
https://goo.gl/j8MBGh).
Imagen 15: Web principal del proyecto XAMPP
Fuente: Apache Friends, s.f. Recuperado de http://goo.gl/NpBZW5
¿Qué incluye XAMPP?
Explica MIKOLUK (2013):
XAMPP tiene cuatro componentes principales. Éstos

son:
1) Apache: tal como mencionamos anteriormente, Apache

consiste en la aplicación de servidor web que procesa y
53
entrega el contenido web a un ordenador. Además,
Apache es el servidor web más popular en internet,
haciendo funcionar casi el 54% de todas las páginas web.
2) MySQL: Cada aplicación web -ya sea simple o compleja-
requiere una base de datos para almacenar los datos
que recoge. MySQL, que es de código abierto, es el
sistema gestor de base de datos más popular. Alimenta
desde websites de aficionados hasta plataformas
profesionales como WordPress.
3) PHP: PHP son las siglas de Preprocesador de Hipertexto.
Es un lenguaje de script del lado del servidor que hace
funcionar algunas de las páginas web más famosas del
mundo, incluyendo WordPress y Facebook, tal como
veremos más adelante en este curso. Es de código
abierto, relativamente fácil de aprender y funciona
perfectamente con MySQL, lo que lo ha hecho una
opción muy popular para los desarrolladores web.
4) Perl: Perl es un lenguaje de programación dinámico y de
alto nivel que se usa ampliamente en la programación de
redes, la administración de sistemas, entre otros usos.
Aunque menos popular para el desarrollo web, Perl
tiene numerosas aplicaciones específicas. (2013,
recuperado dehttps://goo.gl/j8MBGh).
Diferentes versiones de XAMPP pueden incluir componentes

adicionales como phpMyAdmin, OpenSSL, etc., para crear
servidores web completos.
54
Referencias
99Lime (s.f.). Hi, I’m Joshua. I focus on making web designer’s life
easier.Recuperado dehttp://www.99lime.com/
Achour, M.; Betz, F.; Dovgal, A. y otros (2014). Manual de PHP [Versión
electrónica].Recuperado de https://php.net/manual/es/index.php
Apache Friends (s.f.).XAMMP Apache + MySQL + PHP + Perl.Recuperado de

https://www.apachefriends.org/es/index.html
Bahit, E. (2011). POO y MVC en PHP [Versión electrónica]. Recuperado de

http://eugeniabahit.blogspot.com.ar/2011/07/poo-y-mvc-en-php.html
Bitnami (2013). BitNami for XAMPP. Recuperado de

https://wiki.bitnami.com/Infrastructure_Stacks/BitNami_for_XAMPP
Bitnami (s.f.). Bitnami Support. Recuperado de https://bitnami.com/support
Blogspot (s.f.). Diseño web por capas [post de la web]. Recuperado de:
http://webbylevels-es.blogspot.com.ar/
Bootstrap (s.f.). Bootstrap. Recuperado de http://getbootstrap.com/
Bootstrap (s.f.). File Structure. Recuperado de

http://getbootstrap.com/2.3.2/getting-started.html#file-structure
Bootstrap (s.f.). Getting started. Recuperado de http://getbootstrap.com/getting-

started/#examples
CanIuse (s.f.). Compare browsers. Recuperado de

http://caniuse.com/#comparison
Carrodeguas, N. (2015). Como instalar y configurar el servidor web Apache en

Windows. Recuperado el 06 de julio de 2015 de
http://norfipc.com/internet/instalar-servidor-apache.html
Castillo Soler, M. (2014). Desarrollo de una aplicación de entrenamiento

Mindfulness para plataformas móviles con PhoneGap. Recuperado el 06 de julio
de 2015 de http://goo.gl/zt4uV5
Cristian Ayala (13 de diciembre de 2009). Cómo hacer una aplicación en capas. En
CristianAyalaDeveloperVB.net[blog]. Recuperado de
http://cristianayalavbnet.blogspot.com.ar/2009/12/como-hacer-una-aplicacion-
en-capas.html
Diaz Sanz, J. (2011). Ingeniería técnica en informática de gestión. Recuperado de

http://academica-
e.unavarra.es/bitstream/handle/2454/4712/577697.pdf?sequence=1
Durán, F., Gutiérrez, F. y Pimentel, E. (2011). Programación orientada a objetos

con Java. Madrid: Paraninfo.
55
Eguíluz Pérez, J. (2008). Introducción a JavaScript. Recuperado el 06 de julio de
2015 de http://librosweb.es/libro/javascript/
Gauchat, J. D. (2013).El gran libro de HTML5 CSS3 y Javascript. Barcelona:
Marcombo.
GeNeura Team (s.f.). XAMPP para Windows. Recuperado de

http://geneura.ugr.es/~gustavo/xampp/windows.png
Google Imágenes (s.f.). HTML5. Recuperado de http://goo.gl/M0hRYI
Imperavi (s.f.). Kube. Recuperado de http://imperavi.com/kube/
Jordison (s.f.). ¿Qué es un framework?. Recuperado el 20 de junio de 2015 de

http://goo.gl/tEMXQt
LibrosWeb.es (s.f.). Esquema básico del MVC. Recuperado de

http://librosweb.es/img/symfony_1_2/f0201.png
Menéndez, R. y Barzanallana, A. (s.f.). Desarrollo de aplicaciones web.

Recuperado de http://www.um.es/docencia/barzana/DAWEB/Lenguaje-de-
programacion-HTML-1.pdf
Mikoluk, K. (18 de Septiembre de 2013). XAMPP Tutorial: How to Use XAMPP to

Run Your Own Web Server. En Udemy [Blog].Recuperado de
https://www.udemy.com/blog/xampp-tutorial/
MSDN Microsoft (s.f.). Model-View-Controller. Recuperado de

http://msdn.microsoft.com/en-us/library/ff649643.aspx
Pavón Puertas, J. (2011). Creación de un Portal con PHP y MySQL. México:

Alfaomega Grupo Editor.
PHP (s.f.).Abstracción de clases. Recuperado de

http://php.net/manual/es/language.oop5.abstract.php
PHP (s.f.).Class. Recuperado de http://php.net/manual/es/keyword.class.php
PHP (s.f.). Lo básico. Recuperado de

http://php.net/manual/es/language.oop5.basic.php
Renaud, P. E.(1993). Introduction to Client/Server Systems: A Practical Guide for

Systems Professionals. New York, United States:John Wiley & Sons.
Zurb Fundation (s.f.). Fundation. Recuperado de http://foundation.zurb.com/
56

DESARROLLOWEB Lectura1

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

DESARROLLOWEB Lectura1

Загружено:

Авторское право:

Доступные форматы

Módulo 1

Analizaremos, además, los conceptos generales de programación

Con el estudio de esta primera lectura aprenderás cómo instalar en tu

Este tipo de arquitectura consiste en un modelo de aplicación distribuida

Imagen 1: Esquema de la arquitectura Cliente - Servidor

Fuente: elaboración propia.

Algunas de las características de esta arquitectura son:

 Las tareas del cliente y del servidor poseen distintos requerimientos

Entre las principales ventajas de esta arquitectura podemos nombrar

 La posibilidad de utilizar plataformas de hardware cada vez más

Entre las principales desventajas de la arquitectura cliente – servidor

 El mantenimiento de los sistemas es, en cierto sentido, más

1.2 Introducción a HTML/5, CSS

Fuente: Google Imágenes, s.f. Recuperado dehttp://goo.gl/M0hRYI

Fuente: elaboración propia.

Estudiaremos, entonces, dos lenguajes que son diferentes pero

CSS (Cascading Style Sheets, también conocidas como “hojas

También puedes haber oído hablar de XHTML. Éste consiste en una

Tal como se mencionó anteriormente, HTML surgió en los inicios de la

Durante el transcurso de esta materia trabajaremos con la última versión

Mientras HTML define el contenido, CSS permite organizarlo y definir la

Con el tiempo HTML y CSS han ido evolucionando y perfeccionándose, a la

 HTML 1: es la primera versión creada por Tim Berners-Lee en 1991.

Por su parte, CSS evolucionó a través de las siguientes versiones:

CSS 1: se trata de la primera versión. En ella se establecen

CSS 2: apareció en 1999 y fue completado por CSS 2.1. Esta

CSS 3: esta es la última versión, que agrega características

(Menéndez y Barzanallana, s.f., p. 6, http://goo.gl/JN09TG).

La versión definitiva de la 5º revisión del estándar se publicó en el mes de

Tal como se ha mencionado anteriormente, existe un inconveniente: se

A comparación de otras versiones de HTML, las modificaciones

Entonces, dicho esto, ¿qué necesitamos para crear

En internet existen programas de edición web funcionales a tal tarea, tanto

Es por ello que existen dos grandes categorías:

 Los simples editores de texto, que pueden utilizarse para programar

Si de comparaciones se trata, existen numerosos sitios que nos permiten

Fuente: CanIuse, s.f. Recuperado dehttp://caniuse.com/#comparison

Es importante destacar que la mayoría de los problemas o

HTML utiliza un lenguaje de etiquetas para la construcción de páginas web.

Tal como vemos en el ejemplo, luego de <html> tenemos el siguiente

HTML, en todas sus versiones, comienza con la primera sección que es la

Dentro de la cabecera del documento, puede utilizar otras, como es la

En el código anterior, el atributo name dentro de la etiqueta <meta>

Otra de las etiquetas principales es <title> que sirve para especificar el

Otro elemento que va dentro de la cabecera del documento es la etiqueta

En la versión 5 de HTML ya no se necesita especificar qué tipo de estilos

Como lo planteamos anteriormente, el cuerpo representa la parte visible

La estructura del cuerpo, o sea, el código entre las etiquetas <body>,

Considerando todo lo expuesto, HTML5 incorpora nuevos elementos

La especificación de HTML5 fue desarrollada considerando CSS a cargo del

El modo de funcionamiento de las hojas de estilo consiste en definir,

 Una página web completa; de modo que se puede definir la forma

La potencia de la tecnología está, entonces, a la vista. Pero las implicancias

 Podemos definir la distancia entre líneas del documento.

Con respecto a la estructura, básicamente cada navegador ordena los

 Elementos block: son posicionados uno sobre otro hacia abajo en la

Casi todos los elementos estructurales en nuestros documentos serán

Una mejor alternativa consiste en insertar los estilos en la cabecera del

La etiqueta <style> mostrada anteriormente permite agrupar estilos CSS

Por último, la práctica más generalizada es escribir el CSS en un archivo

Existen varios métodos para seleccionar cuáles elementos HTML serán

1) referencia por la palabra clave del elemento (etiqueta).

Al declarar las reglas CSS utilizando la palabra clave del elemento,