DOM Core Level 1

El Document Object Model (DOM) Core Level 1 define un conjunto de objetos e interfaces necesarias para el acceso y manipulación de los objetos del documento el cual es representado como una jerarquía de objetos Nodo (Node objects) de distintos tipos. Algunos de estos Nodos pueden contener otros nodos de uno o más tipos formando una jerarquía completa para el documento. Los tipos de nodos y la definición de que hijos pueden contener cada uno de ellos se describe a continuación:

Nodo	Tipos de nodos que puede contener
Document	Element (máximo uno), ProcessingInstruction, Comment, DocumentType
DocumentFragment	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
DocumentType	Ninguno
EntityReference	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Element	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
Attr	Text, EntityReference
ProcessingInstruction	Ninguno
Comment	Ninguno
Text	Ninguno
CDATASection	Ninguno
Entity	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Notation	Ninguno

La mayoría de las API's definidas en la especificación son interfaces en lugar de clases, esto significa que en una implementación real solo es encesario exponer los métodos con los nombres definidos y la operación especificada. Lo anterior es totalmente transparente para el programador, así que vamos a empezar a describir generalmente cada una de las interfaces, anotando sus atributos y métodos.

Interfaz Document

La interfaz document representa el documento HTML o XML completo. El document es la raíz del documento dese la cual se puede acceder a todos los demás datos del mismo.

Atributos	doctype, implementation, documentElement
Métodos	createElement(tagName), createDocumentFragment(), createTextNode(data), createComment(data), createCDATASection(data), createProcessingInstruction(target, data), createAttribute(name), createEntityReference(name), getElementsByTagName(tagname)

Interfaz DocumentFragment

El DocumentFragment representa un objeto mínimo de un documento. Es generalmente utilizado para la manipulación de partes del árbol del documento, el cual no debe estar necesariamente bien formado. Un DocumentFragment puede ser insertado en el documento o en otros nodos para seguir siendo manipulado en el árbol DOM. Esta interfaz actúa de intermediaria cuando se crean por ejemplo dos nodos (de la interfaz Node) y se juntan en un nodo padre (DocumentFragment) para luego ser insertado en el documento.

Interfaz Node

La interfaz Node representa el tipo de datos principal del modelo de objetos del documento (DOM). Aunque todos los nodos implementan los métodos para agregar otros nodos dentro de sí, hay que resaltar que no todos los nodos pueden tener hijos, por ejemplo el Text o Comment. Si se intenta agregar un nodo hijo en uno nodo que no pueda tenerlo se lanzará una excepción de la interfaz DOMException.

Constantes	Nombre	Tipo de nodo
	ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE NOTATION_NODE	Element Attr Text CDATASection EntityReference Entity ProcessingInstruction Comment Document DocumentType DocumentFragment Notation
Atributos	nodeName, nodeValue, nodeType, parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling, attributes, owenerDocument
Métodos	insertBefore(newChild, refChild), replaceChild(newChild, oldChild), removeChild(oldChild), appendChild(newChild), hasChildNodes(), cloneNode(deep)

Dependiendo del tipo de nodo, los valores para los atributos nodeName, nodeValue y attributes están dados por la siguiente tabla:

Tipo de nodo	nodeName	nodeValue	attributes
Element	tagName	null	NameNodeMap
Attr	nombre del atributo	valor del atributo	null
Text	#text	contenido del nodo	null
CDATASection	#cdata-section	contenido del CDATA Section	null
EntityReference	nombre de la entidad referenciada	null	null
Entity	nombre de la entidad	null	null
ProcessingInstruction	target	contenido sin destino	null
Comment	#comment	contenido del comentario	null
Document	#document	null	null
DocumentType	nombre del tipo de documento	null	null
DocumentFragment	#document-fragment	null	null
Notation	nombre de la notación	null	null

Interfaz NodeList

La interfaz NodeList proporciona una colección ordenada de nodos.

Atributos	length
Métodos	item(index)

Interfaz NamedNodeMap

Esta interfaz es utilizada para representar colecciones de nodos que han sido obtenidos mediante su nombre.

Atributos	length
Métodos	getNamedItem(name), setNamedItem(arg), removeNamedItem(name), item(index)

Interfaz CharacterData

Esta interfaz es una extensión de la interfaz Node que agrega un conjunto de atributos y métodos necesarios para acceder a los datos de caracteres del documento.

Atributos	data, length
Métodos	substringData(offset, count), appendData(arg), insertData(offset, arg), deleteData(offset, count), replaceData(offset, count, arg)

Interfaz Attr

Esta interfaz representa un atributo para un objeto Element. Generalmente los valores posibles son definidos en la definición del tipo de documento.

Atributos

name, specified, value

Interfaz Element

La interfaz Element representa la mayoría de cada uno de los objetos nodo que encontramos en el documento. Element hereda de la interfaz Node, por lo que podremos utilizar sus métodos también.

Atributos	tagName
Métodos	getAttribute(name), setAttribute(name, value), removeAttribute(name), getAttributeNode(name), setAttributeNode(newAttr), removeAttributeNode(oldAttr), getElementsByTagName(name), normalize()

Interfaz Text

La interfaz Text representa como su nombre lo indica contenido textual (también llamado character data en XML) de un Element o Attr.

Métodos

splitText(offset)

Interfaz Comment

Esta interfaz representa contenido comentado en el código XML o HTML, denotado entre las etiquetas <!-- y -->. 

Aquellos que ya han utilizado el lenguaje de programación JavaScript y ya están familiarizados con el paradigma de programación orientado a objetos verán las anteriores interfaces muy familiares y de seguro habrán utilizado más del 40% de sus métodos y atributos. Para aquellos que aún se sienten desorientados no debe haber preocupación, la programación orientada a objetos es bastante compleja y se aprende en la mayoría de los casos con la práctica, es por esto que en una próxima entrega utilizaremos el lenguaje JavaScript para manipular el DOM de nuestros documentos y ver cómo es de fácil utilizar las anteriores interfaces para desarrollar aplicaciones básicas.

Aunque hemos visto la mayoría de interfaces, aún quedan las interfaces extendidas que en algunos casos nos pueden servir de mucho. A modo de investigación queda por la cuenta del lector leer las referencias para adentrarse más en este maravilloso tema. Hasta la próxima!.

Referencias

- Document Object Model (Core) Level 1. (1998, October 1). In World Wide Web Consortium (W3C). Retrieved 14:26, June 6, 2014, from http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html

Introducción al DOM Level 1

El DOM (Document Object model), o modelo de objetos del documento es una API utilizada en el desarrollo de aplicaciones web (HTML y XML) para la manipulación dinámica de objetos. Comúnmente es utilizado por los lenguajes Java y ECMAScript (del cual se basan JavaScript y JScript) de acuerdo a la especificación OMG IDL. Para entender cómo trabaja el DOM a nivel de documentos observemos el siguiente fragmento de código HTML:

<table>
   <tbody>
      <tr>
         <td>Id</td>
         <td>Producto</td>
      <tr/>
      <tr>
         <td>0045</td>
         <td>Laptop</td>
      </tr>
   </tbody>
</table>

Cómo se puede observar, se ha definido una tabla muy sencilla en la que se ha colocado un identificador y nombre de producto. Pero más allá de ver que solamente tenemos un producto, esta tabla de dos filas y dos columnas puede ser representada en el modelo de objetos (DOM) de la siguiente forma:

Representación DOM

En el DOM, los documentos tienen una estructura lógica a modo de árbol, cada elemento puede contener otros elementos dentro de sí y anidarse cuantas veces sea necesario. En la anterior representación DOM el elemento table contiene un elemento tbody, que a su vez contiene dos elementos tr cada uno con dos elementos td y el texto dentro ellos. Para generar correctamente nuestro árbol DOM es necesario que los elementos estén correctamente anidados sin superposición tal y como se mencionó el la Introducción al lenguaje HTML.

El Document Object Model, es una representación clásica de modelado orientado a objetos, pues cada elemento de la página es en sí un objeto que contiene sus atributos y comportamiento. Como modelo de objetos, el DOM se caracteriza por:

- Las interfaces y objetos utilizados para representar y manipular el documento
- La semántica utilizada en estas interfaces y objetos (incluye comportamiento y atributos)
- Las relaciones y colaboraciones entre estas interfaces y objetos

El DOM está conformado por dos partes importantes en su especificación, la primera se denomina DOM Core y la segunda DOM HTML. El DOM Core Level 1 describe la funcionalidad necesaria para manipular la estructura del documento, elementos y atributos, en resumen, los objetos. El DOM HTML Level 1 exitiende lo anterior y describe los objetos y métodos específicos de los documentos HTML.

Referencias

- What is the Document Object Model ?. (1998, October 1). In World Wide Web Consortium (W3C). Retrieved 17:56, June 5, 2014, from http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/introduction.html
- Document Object Model (Core) Level 1. (1998, October 1). In World Wide Web Consortium (W3C). Retrieved 22:48, June 5, 2014, from http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html
- Document Object Model (HTML) Level 1. (1998, October 1). In World Wide Web Consortium (W3C). Retrieved 22:48, June 5, 2014, from http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html

Document Object Model (DOM)

El DOM (document object model) es una plataforma y lenguaje neutral de interfaz (API) que permite el acceso dinámico y actualización de contenido, estructura y estilo en objetos HTML, XHTML y XML. Mediante el  DOM se hace posible la modificación de objetos ya existentes en el documento, la creación de nuevos objetos, y la eliminación de los mismos. Es muy utilizado en las RIA (Rich Internet Applications) y hoy en día es un componente fundamental en el desarrollo de aplicaciones web.

Las descripción del lenguaje, así como sus listas de correo e información en general se pueden encontrar en la página oficial del W3C (World Wide Web Consortium) en el siguiente enlace:

W3C DOM

Las especificaciones del lenguaje están en los Technical Reports de la misma página.

Document Object Model (DOM) Specifications

Actualmente existen tres documentos oficiales de especificación y uno en desarrollo. Los tres primeros documentos se denominan Niveles DOM y son respectivamente DOM Level 1, DOM Level 2 y DOM Level 3. La especificación en desarrollo se denomina DOM4 y es una vista rápida de lo que es el DOM Living Standard de la WHATWG. Aquí ocurre algo similar a lo que ocurre con HTML5 y HTML5 Living Standard, con dos especificaciones para la misma tecnología. (¿Por qué dos especificaciones ? Míralo Aquí).

Referencias

- Document Object Model. (2014, May 30). In Wikipedia, The Free Encyclopedia. Retrieved 21:22, June 5, 2014, from http://en.wikipedia.org/w/index.php?title=Document_Object_Model&oldid=610811714
- W3C Document Object Model. (2009, June 1). In World Wide Web Consortium (W3C). Retrieved 16:24, June 5, 2014, from http://www.w3.org/DOM/

Introducción al lenguaje HTML

Cómo ya se mencionó en el post HTML y el estándar HTML5, las nuevas funcionalidades que nos trae HTML5 son realmente innovadoras. A través de muchos años de trabajo, HTML pasó de ser un lenguaje de marcas a ser parte de un conjunto de tecnologías web encaminadas al desarrollo de aplicaciones RIA's (Rich internet applications) y el desarrollo de animaciones 2D/3D avanzadas. Sin más preámbulo, veamos una breve introducción a este maravilloso lenguaje.

Un documento HTML básico luce de la siguiente forma

<!DOCTYPE html>
<html>
   <head>
      <title>Mi primer documento HTML</title>
   </head>
   <body>
      <h1>Mi primer documento HTML</h1>
      <p>Documento de ejemplo</p>
      <!-- Esto es un comentario -->
   </body>
</html>

Como se puede observar, HTML es un lenguaje compuesto por etiquetas, cada elemento como head, body, p, y h1 está compuesto por una etiqueta de apertura y una de cierre. Las etiquetas de apertura no son más que los símbolos < y > que cubren a un identificador, es decir, el nombre del elemento; las etiquetas de cierre además de esto deben llevan el símbolo / que indica que el elemento termina con esa etiqueta. La primera etiqueta de nuestro documento es un poco más especial que las demás y conforma el DOCTYPE DEFINITION.

<!DOCTYPE html>

Esta etiqueta le dice al navegador web cómo debe ser renderizado nuestro documento, en este caso será simplemente HTML5. Existen otros doctypes definitions para los documentos de versiones anteriores, pero eso es algo que no se verá en esta pequeña introducción. Después de la etiqueta DOCTYPE debe seguir el elemento raíz de nuestro documento, es decir, el propio elemento html. Dentro de este elemento deben ir otros dos elementos importantes y estos son el head y el body. Haciendo una descripción muy general de ellos, dentro del head irán datos del documento que no siempre se mostrarán en interfaz, es decir, metadatos, y dentro del body irá todo lo que el usuario verá en el navegador.

La cabecera del documento (head)

Como ya se mencionó dentro del elemento head se colocarán los metadatos de nuestro documento. Por ahora, el elemento que más nos interesa es el elemento title que define el título del documento el cual será visualizado en la pestaña del navegador. Por lo general, la mayoría de las etiquetas que se encuentran en el head son etiquetas <meta> con distintos parámetros. Este elemento lo veremos un poco más adelante por su complejidad.

El cuerpo del documento (body)

HTML cuenta el elemento body que define el cuerpo del documento. Dentro de este elemento se deben agregar todos los demás elementos para el renderizado del texto tales como párrafos, títulos, citas, entre otros. En nuestro ejemplo, se ha colocado un elemento de párrafo (p), un elemento de título principal (h1), y un comentario que no visualiza el usuario pero sí los desarrolladores.

Los elementos HTML pueden contener otros elementos dentro de sí pero deben estar correctamente anidados. Un elemento debe estar completamente contenido en otro sin superposición.

<p>Este es un ejemplo correcto de <span>anidaminto</span> </p>
<p>Este es un ejemplo incorrecto de <span>anidaminto</p> </span>

Los elementos también pueden contener atributos que definen el comportamiento de los mismos. Cada atributo puede poseer un valor encerrado entre comillas simples o dobles. Si el valor de cada atributo contiene espacios en blanco las comillas son estrictamente necesarias, de lo contrario se pueden omitir.

<p>Hola <span style='color: red'>mundo</span> </p>
<p>Hola <span style>mundo</span> </p>

En el ejemplo anterior se define el atributo style para el texto "mundo". Más que ver que el texto sale de color rojo, lo verdaderamente importante aquí es ver la definición del atributo y la forma en que se usa. Nótese que para el primer atributo style se hacen necesarias las comillas pues contiene espacios en blanco. El segundo atributo style simplemente se declara y no se le coloca algún valor. Más adelante veremos como se simplifica el proceso de desarrollo con aquellos atributos a los que podemos omitirle su valor.

DOM (Document Object Model)

Los navegadores web renderizan los docuemtnos HTML convirtiéndolos en un arbol DOM (Document Object Model). Un árbol DOM es una representación en memoria de un documento. Un árbol DOM puede contener varios tipos de nodos, entre los que se encuentran el nodo DocumentType, el nodo Element, los nodos Text, los Comment, entre otros. El documento HTML de nuestro ejemplo está representado por el siguiente árbol DOM.

Árbol DOM

Cómo se puede observar, no solamente se representan los elementos HTML sino también los espacios en blanco, saltos de línea y comentarios. Entender cómo funciona el DOM es necesario para manipular los objetos de la página con lenguajes como CSS y JavaScript.


Referencias

- HTML Living Standard (2014, May 23). In WHATWG Community, Retrieved 20:41, May 23, 2014 from http://www.whatwg.org/specs/web-apps/current-work/print.pdf

Introducción al lenguaje JavaScript

Unofficial logo

JavaScript es un lenguaje de programación dinámico del lado del cliente comúnmente utilizado en entornos web para el desarrollo de RIA's, aplicaciones ricas en internet que se asemejan a las aplicaciones de escritorio. Con JavaScript podemos crear desde simples diálogos en el navegador hasta complejos juegos online con interacciones en tiempo real y manipulación dinámica de objetos. Hoy en día, JavaScript es un lenguaje esencial en el desarrollo de casi cualquier aplicación web, y junto con el nuevo estándar HTML5 se hace posible la realización de tareas que hasta hace poco solo habían sido posibles con lenguajes embebidos como Java y Flash.

JavaScript es un lenguaje interpretado y basado en prototipos. Para ejecutar código JavaScript no es necesario compilar el código tal y como sucede en otros lenguajes como C o C++, simplemente se necesita de un navegador web que soporte el estándar ECMAScript. Los navegadores actuales cuentan nativamente con una consola javascript para la ejecución del código en forma interactiva (Véase Chrome, Mozilla). Además de ser un lenguaje orienteado a objetos, JavaScript está basado en prototipos, lo que quiere decir que no es necesario la instanciación de clases para crear nuevos objetos sino simplemente clonarlos de otros ya existentes. Los lenguajes prototipados hacen referencia a la reutilización del código mediante la creación de prototipos a través los cuales se pasan las características a otros objetos, Douglas Crockford explica muy bien este concepto en su artículo Prototypal Inheritance in JavaScript.

Aunque no es estrictamente necesario saber HTML para adentrarse en la programación en JavaScript, es muy recomendable realizar al menos el curso básico de HTML para poder manipular el DOM de nuestras páginas, es decir, los elementos. A continuación, presentaremos un ejemplo muy básico de código JavaScript ejecutado como evento cuando se da clic en un botón. Para ejecutar este ejemplo se debe crear un archivo de extensión .html con el siguiente código:

<!DOCTYPE html>
<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Mi primer Script</title>
   </head>

   <body>
      <button onclick="alert('Hola mundo')">Aceptar</button>
  </body>
</html>

Al dar clic sobre el botón Aceptar deberá mostrarse un mensaje de alerta con el texto Hola mundo.


Referencias

- JavaScript. (2014, June 3). In Wikipedia, The Free Encyclopedia. Retrieved 15:24, June 4, 2014, from http://en.wikipedia.org/w/index.php?title=JavaScript&oldid=611352631

Introducción al lenguaje PHP

Mascota PHP - from Wikipedia

PHP (Hypertext Preprocessor) es un lenguaje de scripting de alto nivel de tipo imperativo, orientado a objetos (desde PHP 5), y de propósito general desarrollado en el lenguaje de programación C/C++. PHP es utlizado generalmente para el desarrollo de sitios web dinámicos, diseño de programas en CLI (command line interface) y aplicaciones de escritorio. El lenguaje fue creado por Rasmus lerdorf en 1994, quién inicialmente lo llamó PHP (Personal Home Page), pues lo creó para manejar de manera dinámica su página personal.

Qué puede hacer PHP ?

Existen tres áreas en las que PHP puede ser usado como lenguaje de programación:

1. Scripting de servidor: Es una de las opciones más populares y por la cual se escribe este artículo. PHP es uno de los mejores lenguajes para programar páginas dinámicas y modulares en la web.

2. Línea de comandos: PHP puede ser utilizado desde la consola para realizar tareas de sistema como manipulación de archivos, gestión de procesos, entre otros.

3. Aplicaciones de escritorio: Aunque PHP no es el lenguaje más utilizado para realizar programas de escritorio, posee una extensión GTK para desarrollar aplicaciones para plataforma.

PHP y HTML

Los archivos PHP generalmente tienen la extensión .php, o .phtml. El código PHP puede ser embebido en páginas HTML  mediante las etiquetas de apertura y cierre o métodos de escape de código.

Antes de realizar el siguiente ejemplo tenga en cuenta que para poder ejecutar scripts PHP es necesario tener un servidor web instalado como Apache o IIS. En el siguiente link podrá encontrar toda la información sobre la instalación de PHP en distintas plataformas. Lenguaje PHP (instalación).

Teniendo un servidor web instalado como Apache o IIS, debe crear un archivo en el directorio especificado para archivos web y guardarlo con el nombre script.php. Por lo general los scripts de servidor son accedidos mediante la dirección http://localhost o http://127.0.0.1 a menos que se haya especificado un hostname y dirección local diferentes. Lo siguiente que debe hacer es crear el siguiente contenido en el archivo script.php y acceder a él mediante un navegador web digitando la dirección http://localhost/script.php.

script.php

<!DOCTYPE html>
<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Título</title>
   </head>
   
   <body>
      <?php echo "<p>Hola mundo</p>"; ?>
  </body>
</html>

Como se puede observar, el código que se encuentra dentro de las etiquetas <?php (apertura) y ?> (cierre) será interpretado por el motor de PHP para devolver su respectiva salida. En este caso, mostrará una página en blanco con el texto "Hola mundo".

PHP en consola

Los scripts PHP pueden ser ejecutados desde la línea de comandos mediante el comando php.

Antes de realizar el siguiente ejemplo tenga en cuenta que debe tener instalado el intérprete de PHP en su computadora y debe estar disponible mediante la línea de comandos. En el siguiente enlace podrá encontrar información acerca de la instalación de PHP en distintas plataformas. Instalación PHP.

Cree un archivo llamado script.php y escriba en él el siguiente contenido.

script.php

<?php
   echo "Hola mundo"
?>

Posteriormente, se debe ingresar mediante la línea de comandos al directorio en donde ha sido creado el archivo y ejecutarlo con el siguiente comando.

php script.php

Se obtendrá un resultado en consola similar al siguiente.

Ejecución de script PHP en windows 10

Finalmente, y como se dijo anteriormente, se pueden desarrollar aplicaciones de escritorio mediante el lenguaje PHP y la librería de objetos GTK. Queda a tarea del lector, si es de su interés, revisar el siguiente enlace para obtener más información al respecto (PHP-GTK official).

Referencias

- PHP: Preface. (2014, 1 de junio). PHP: Hipertext preprocessor. Fecha de consulta: 19:08, Junio 1, 2014 desde https://php.net/manual/en/preface.php.

- PHP: What can PHP do ?. (2014, 1 de junio). PHP: Hipertext preprocessor. Fecha de consulta: 19:08, Junio 1, 2014 desde https://php.net/manual/en/intro-whatcando.php.
- PHP. (2017, September 1). In Wikipedia, The Free Encyclopedia. Retrieved
04:47, September 2, 2017, from https://en.wikipedia.org/w/index.php?title=PHP&oldid=798438606