Ponegap

PhoneGap es un paquete de librerías que permite empaquetar aplicaciones HTML5 de manera que puedan ser usadas como apps para móviles o Web Apps. Te explicamos los detalles más relevantes sobre esta versátil solución que nos permitirá dar el salto fácilmente al desarrollo de aplicaciones multidispositivo, aunque no podemos olvidar que también tiene sus limitaciones.

PhoneGap es una solución de Adobe que nos permite llevar el desarrollo para la web al mundo de los dispositivos. Se basa en una “envoltura” que nos permite ejecutar aplicaciones desarrolladas con HTML, CSS y Javascript como si fueran aplicaciones nativas para los teléfonos móviles o tablets.

Las aplicaciones que podemos desarrollar con PhoneGap se pueden publicar en las conocidas tiendas de aplicaciones (Google Play, Windows Store o App Store de Apple) y, al igual que las aplicaciones nativas, también son capaces de acceder a los periféricos de los dispositivos como la cámara, acelerómetro, etc.

Lo mejor de PhoneGap es que permite escribir una única vez el código de la aplicación, con tecnologías HTML5, y publicarlo en cualquier plataforma móvil dentro de las más conocidas. Así que, o bien desarrollas tu aplicación en nativo para cada uno de los sistemas operativos, con el consiguiente trabajo que ello conlleva, o la programas una única vez usando alguna plataforma como PhoneGap.

PhoneGap y Apache Cordova

PhoneGap no es más que un producto derivado de Apache Cordova, lo que conocemos técnicamente como una distribución. Sin embargo, hay que aclarar que el proyecto originalmente nació con el nombre de PhoneGap, y luego se cedió a la fundación Apache como software libre.

La comunidad del proyecto, Apache, decidió en 2012 cambiarle el nombre, entre otros motivos para diferenciarlo de la marca PhoneGap, que continúa en poder de Adobe.

Si te preocupa cuál deberías usar, cabe decir que, a día de hoy no hay grandes diferencias. Apache Cordova es susceptible de actualizarse más frecuentemente o más rápido, ya que se trata del producto principal. Por su parte, PhoneGap incluye algunas librerías adicionales que sirven para integrar el sistema con diversos productos de Adobe, pero salvo eso no encontrarás mucho más que los distinga.

Quién debería usar PhoneGap

PhoneGap es un excelente camino para resolver necesidades de creación de aplicaciones de una manera única y compatible con todos los dispositivos. Las ventajas saltan a la vista en este sentido, pero como todo en la vida también tiene su lado malo, ya que en rendimiento y posibilidades nunca va a poder llegar a la altura del desarrollo nativo. Por tanto, escoger o no PhoneGap para el desarrollo de un nuevo producto es una decisión que hay que tomar con cuidado.

Usa PhoneGap si:

• Tienes intención de usar tus amplios conocimientos de Javascript, HTML5.
• Tu aplicación no requiere exprimir el rendimiento del dispositivo. Son ideales programas de gestión o donde el contenido es parecido al que encontrarías en una web.
• Tienes prisa en lanzar el desarrollo y necesitas un alcance global en todos los dispositivos.
• No requieres usar intensivamente mucha variedad de sensores y periféricos.

No uses PhoneGap si:

• No tienes conocimientos de HTML5 y/o no te importa aprender varios lenguajes para realizar el desarrollo nativo en cada sistema operativo.
• Tu aplicación va a requerir mucha cantidad de procesamiento y quieres exprimir el rendimiento del teléfono o tablet. Los juegos son buenos ejemplos de aplicaciones que sería mejor desarrollar en nativo.
• Solo quieres desarrollar para un único sistema operativo.
• Quieres alcanzar todos los sistemas operativos, pero no tienes prisa para conseguirlo.
• Quieres hacer uso de muchos sensores o periféricos específicos de cada dispositivo.

Cómo funciona PhoneGap

PhoneGap contiene una serie de librerías que te facilitan todas las utilidades que puedes llegar a necesitar sobre un teléfono. En vez de aprender las librerías propias de cada sistema con sus lenguajes, haces uso de aquellas que te proporciona el framework, usando un único lenguaje de programación, Javascript

Por ejemplo, en vez de comunicar directamente con la cámara, comunicas con las librerías de PhoneGap y éstas son las que, por medio de una especie de puente o interfaz, te permiten interactuar con la cámara, hablando en el idioma que el sistema operativo del dispositivo requiere.

Escribiendo tu proyecto para PhoneGap, en HTML5, podrás luego compilar en los siguientes sistemas operativos:

• Android
• Blackberry 5/6/7
• iOS
• WebOS
• Windows Phone

Pero ojo, que las cosas no son tan fáciles. Aunque programes únicamente en Javascript, necesitas instalar todo el conjunto de librerías del sistema donde quieras publicar tu proyecto. Por ejemplo, si estás programando para iOS, necesitas tener tu entorno de desarrollo en un Mac, comúnmente el IDE Xcode, el SDK para desarrollo iOS, una serie de plugins adicionales y la licencia de desarrollador de Apple.

Data-role

HTML5

Los atributos data se crearon para almacenar información adicional sobre nuestros elementos HTML. Nos permite evitar utilizar múltiples clases y darle mucha más semántica a nuestro código.
Su sintaxis es muy sencilla, un ejemplo sería:

<div data-role="banner">
  Contenido
</div>

Si marcamos un elemento con un atributo data-, es porque queremos darle un tratamiento especial. En la mayoría de los casos, usaremos este valor en nuestro fichero de estilos o de scripts.

Usando nuestro elemento en nuestros estilos
Mediante nuestro CSS podemos manipular los estilos de nuestro elemento data-, por ejemplo:

  [data-role="banner"] {
    text-align: center;
  }

En este simple ejemplo estamos centrando el contenido del div con la propiedad data-role igual a banner
También podemos asignar el valor del data-role antes del contenido del div:

  div::before {
    content: attr(data-role);
  }

Javascript
Para acceder al valor del atributo mediante Javascript es muy sencillo. Se utiliza la propiedad dataset:

<script>
    var div = document.querySelector('div');
    data = div.dataset;
    data.propiedad = 'valor'
    console.log(data.propiedad);
</script>

jQuery
jQuery tiene un método llamado data(), que parsea los atributos data de HTML5:

<script>
    var div = $('div');
    div.data("propiedad", 'valor');
    console.log(div.data("propiedad"));
</script> 

Conclusiones
Es muy importante no escribir datos sensibles en nuestros atributos data, ya que son accesibles vía código fuente. Tampoco debemos abusar de un uso de estos atributos ya que la performance de nuestra página se puede ver afectada.
Versiones antiguas de Internet Explorer tienen algunos problemas con estas prácticas. Pero lo mejor es recomendar a la gente que actualice la versión de su navegador que invertir tiempo en funcionalidad para Internet explorer 7 o anteriores.

PHP

PHP, acrónimo recursivo en inglés de PHP Hypertext Preprocessor (procesador de hipertexto), es un lenguaje de programaciónde propósito general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en un documento HTML en lugar, de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera el HTML resultante.

PHP ha evolucionado por lo que ahora incluye también una interfaz de línea de comandos que puede ser usada en aplicaciones gráficas independientes. Puede ser usado en la mayoría de los servidores web al igual que en muchos sistemas operativos y plataformas sin ningún costo.

Fue creado originalmente por Rasmus Lerdorf en el año 1995. Actualmente el lenguaje sigue siendo desarrollado con nuevas funciones por el grupo PHP.​ Este lenguaje forma parte del software libre publicado bajo la licencia PHPv3_01, es una licencia Open Source validada por Open Source Initiative. La licencia de PHP es del estilo de licencias BSD, esta licencia no tiene restricciones de copyleft" asociadas con GPL.

Etimología

PHP es un acrónimo recursivo que significa PHP Hypertext Preprocessor (inicialmente PHP Tools, o, Personal Home Page Tools).³​ Fue creado originalmente por Rasmus Lerdorf; sin embargo, la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar de facto para PHP, al no haber una especificación formal. Publicado con la PHP License, la Free Software Foundation considera esta licencia como software libre.

Visión general

PHP puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno. El lenguaje PHP se encuentra instalado en más de 20 millones de sitios web y en un millón de servidores. El número de sitios basados en PHP se ha visto reducido progresivamente en los últimos años, con la aparición de nuevas tecnologías como Node.JS, Golang, ASP.NET, etc. El sitio web de Wikipedia está desarrollado en PHP.⁵​ Es también el módulo Apache más popular entre las computadoras que utilizan Apache como servidor web.

El gran parecido que posee PHP con los lenguajes más comunes de programación estructurada, como C y Perl, permiten a la mayoría de los programadores crear aplicaciones complejas con una curva de aprendizaje muy corta. También les permite involucrarse con aplicaciones de contenido dinámico sin tener que aprender todo un nuevo grupo de funciones.

Aunque todo en su diseño está orientado a facilitar la creación de sitios webs, es posible crear aplicaciones con una interfaz gráfica para el usuario, utilizando alguna extensión como puede ser PHP-Qt, PHP-GTK,​ WxPHP, WinBinder, Roadsend PHP, Phalanger, Phc o HiP Hop VM. También puede ser usado desde la línea de comandos, de la misma manera como Perl o Python pueden hacerlo; a esta versión de PHP se la llama PHP-CLI (Command Line Interface).

Cuando el cliente hace una petición al servidor para que le envíe una página web, el servidor ejecuta el intérprete de PHP. Éste procesa el script solicitado que generará el contenido de manera dinámica (por ejemplo obteniendo información de una base de datos). El resultado es enviado por el intérprete al servidor, quien a su vez se lo envía al cliente.

Mediante extensiones es también posible la generación de archivos PDF, Flash, así como imágenes en diferentes formatos.

Permite la conexión a diferentes tipos de servidores de bases de datos tanto SQL como NoSQL tales como MySQL, PostgreSQL, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird, SQLite o MongoDB.

PHP también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos, tales como Unix (y de ese tipo, como Linux o Mac OS X) y Microsoft Windows, y puede interactuar con los servidores de web más populares ya que existe en versión CGI, módulo para Apache, e ISAPI.

PHP es una alternativa a las tecnologías de Microsoft ASP y ASP.NET (que utiliza C# y Visual Basic .NET como lenguajes), a ColdFusion de la empresa Adobe, a JSP/Java, CGI/Perl y a Node.js/Javascript. Aunque su creación y desarrollo se da en el ámbito de los sistemas libres, bajo la licencia GNU, existe además un entorno de desarrollo integrado comercial llamado Zend Studio. CodeGear (la división de lenguajes de programación de Borland) ha sacado al mercado un entorno de desarrollo integrado para PHP, denominado 'Delphi for PHP. También existen al menos un par de módulos para Eclipse, uno de los entornos más populares.​

Historia

Fue originalmente diseñado en Perl, con base en la escritura de un grupo de CGI binarios escritos en el lenguaje C por el programador danés-canadiense Rasmus Lerdorf en el año 1994 para mostrar su currículum vítae y guardar ciertos datos, como la cantidad de tráfico que su página web recibía. El 8 de junio de 1995 fue publicado "Personal Home Page Tools" después de que Lerdorf lo combinara con su propio Form Interpreter para crear PHP/FI.

Dos programadores israelíes del Technion, Zeev Suraski y Andi Gutmans, reescribieron el analizador sintáctico (parser, en inglés) en 1997 y crearon la base del PHP3, y cambiaron el nombre del lenguaje por PHP: Hypertext Preprocessor.​ Inmediatamente comenzaron experimentaciones públicas de PHP3, y se publicó oficialmente en junio de 1998. Para 1999, Suraski y Gutmans reescribieron el código de PHP, y produjeron lo que hoy se conoce como motor Zend. También fundaron Zend Technologies en Ramat Gan, Israel.

En mayo del 2000, PHP 4 se lanzó bajo el poder del motor Zend 1.0. El 13 de julio del 2007 se anunció la suspensión del soporte y desarrollo de la versión 4 de PHP,​ y, a pesar de lo anunciado, se ha liberado una nueva versión con mejoras de seguridad, la 4.4.8, publicada el 13 de enero del 2008, y posteriormente la versión 4.4.9, publicada el 7 de agosto del 2008.​ Según esta noticia,​ se le dio soporte a fallos críticos hasta el 9 de agosto del 2008.

El 13 de julio del 2004, se lanzó PHP 5, utilizando el motor Zend Engine 2.0 (o Zend Engine 2).​ Incluye todas las ventajas que provee el nuevo Zend Engine 2, como:

• Mejor soporte para la programación orientada a objetos, que en versiones anteriores era extremadamente rudimentario.
• Mejoras de rendimiento
• Mejor soporte para MySQL con extensión completamente reescrita
• Mejor soporte a XML (XPath, DOM, etc.)
• Soporte nativo para SQLite
• Soporte integrado para SOAP
• Iteradores de datos
• Manejo de excepciones
• Mejoras con la implementación con Oracle

Historial de lanzamiento

	Significado
Rojo	Versión antigua, sin soporte
Amarillo	Con soporte para errores de seguridad
Verde	Con soporte para errores generales y de seguridad
Azul	Lanzamiento futuro
Rosa	Lanzamiento Cancelado

Paginas Web Dinamicas

Las páginas web dinámicas están desbancando a las tradicionales páginas web estáticas. ¿Aún no sabes cuál es la diferencia entre ambos tipos de páginas web? En este artículo te voy a contar las diferencias entre páginas web dinámicas y estáticas, cuáles son las ventajas de las webs dinámicas y cómo puedes tener una web dinámica fácilmente para tu proyecto.

Páginas web dinámicas Vs. Páginas web estáticas

Hasta hace no tanto tiempo, todas las páginas web eran estáticas. Eran páginas en las que se mostraba información de manera permanente. Construidas principalmente con HTML. Su aspecto puede ser muy parecido al de una web dinámica, pero no te dejes engañar. No tienes acceso fácil a actualizar el contenido de la web, necesitas ayuda de la persona que la costruyó para hacer la más mínima alteración del texto, etc. Estas páginas son sumamente simples, no tienen posibilidad de añadirles un blog o otro tipo de aplicaciones para añadirles funcionalidades. No son páginas web que puedan ser mantenidas fácilmente por una persona que no tenga conocimientos de programación.

Hoy en día la mayoría de las nuevas páginas web que se crean son dinámicas. Se construyen usando además otros lenguages de programación como PHP que permiten programar en ellas aplicaciones para todo tipo de funciones: blogs, foros, tiendas, etc. La característica principal es que el contenido es fácilmente y frecuentemente modificado.

Ventajas de las páginas web dinámicas

• Las posibilidades son infinitas. Puedes hacer cualquier cosa que imagines partiendo de una web dinámica. Desde una simple web informativa con los datos de tu empresa o un complejo portal con todo tipo de funciones, un blog, una tienda online, una central de reservas…
• Se posicionan mejor en los buscadores. Como Google a la hora de posicionar una web valora la actualización constante de contenidos, una página web estática siempre tendrá problemas para posicionarse. En cambio una web dinámica es una web viva, la actualización de contenidos puede ser muy frecuente y eso ayuda a posicionarse en los resultados de búsqueda.
• Es mucho más fácil añadir contenidos y modificar cualquier elemento de la web. Lo ideal es tener una web dinámica equipada con un buen gestor de contenidos que te permita añadir páginas, modificar textos o imágenes de una manera eficaz y al alcance de cualquiera. En una página web estática cada pequeño cambio implica modificar todas las páginas de la web y tiene que hacerse mediante ftp y programando, lo cual provoca que el proceso no sea nada ágil y que dependas de profesionales.
• Permiten una mayor interacción con los usuarios, lo cual favorece enormemente la eficacia de la página para atraer clientes.
• Pueden ser mantenidas por personas que no tengan conocimientos de programación.
• Permiten un diseño responsive que se adapta a todo tipo de tamaños de pantalla y dispositivos de navegación: ordenadores, portátiles, tablets, teléfonos móviles, etc.

Por todas estas cosas, las páginas web estáticas son cada vez más una cosa del pasado y han dejado paso a una nueva generación de páginas web interactivas y modernas que han mejorado muchísimo la experiencia de los usuarios en internet.

La mejor opción para crear páginas webs dinámicas: WordPress

Existen numerosos gestores de contenidos que permiten crear webs dinámicas hoy en día en el mercado. Aunque las diferencias en calidad entre unos y otros son muy notables y afectan a la efectividad de la página web. Los gestores de contenidos más utilizados para crear páginas web son: WordPress, Joomla y Drupal. Aunque WordPress cada vez va ganando más terreno y ha sido votado una vez más en 2016 como el mejor CMS del mercado. Aquí tienes algunas de las ventajas de WordPress:

• Es software libre. Esto significa que es un gestor de contenidos totalmente gratuito, solo necesitas un dominio y un alojamiento web, el resto es gratis. El software es desarrollado y mantenido por miles de personas voluntarias que colaboran de manera altruista para mantener vivo el proyecto.
• El 30% de las webs en internet ya están creadas con WordPress. Su gran popularidad no es casualidad, por algo es el software que eligen cada vez más personas para crear sus páginas web.
• Está en constante evolución. Al ser tan popular es una herramienta muy viva, se actualiza constantemente para introducir mejoras y nuevas funciones. El proyecto está creciendo
• Permite hacer cualquier tipo de página web: Blogs, tiendas online, webs de empresa, etc. Cualquier cosa que necesites, se puede hacer con WordPress.
• Es más seguro que ningún otro gestor de contenidos. Al actualizarse tan amenudo, se introducen constantes mejoras de seguridad. Cuando los hackers descubren  una vulnerabilidad, WordPress la subsana.
• Es más fácil de posicionar que ningún otro gestor de contenidos. WordPress está diseñado para el posicionamiento web, hay plugins específicos que te ayudan a trabajar el SEO de tu página. A Google le gusta WordPress porque permite actualización constante, es responsive y tiene un código muy limpio.
• Existen más de 6400 aplicaciones para todo tipo de funciones. Desde añadir un formulario de suscripción, hasta un sistema de venta de entradas o un calendario de eventos… Hay plugins para cualquier cosa que se te ocurra en WordPress.
• Es más fácil de administrar. Añadir páginas, modificar textos e imágenes, gestionar un blog o una tienda online, etc. todas estas acciones son fáciles de gestionar con una web dinámica construida con WordPress. Su interfaz es sencilla e intuitiva.
• Permite un diseño más atractivo. Miles de diseñadores trabajan desarrollando hermosas plantillas o themes para crear webs originales y funcionales con WordPress. Las posibilidades dentro del diseño son enormes.
• La instalación es muy sencilla. Si haces una instalación de WordPress manual se tardan 5 minutos. Además la mayoría de los hostings de calidad tienen instalación en un solo click.
• No hace falta saber nada de programación. Así es, no es necesario tener ningún conocimiento en programación para poder usar WordPress, eso hace que luego pueda ser más fácilmente mantenible por el usuario final sin depender de profesionales para hacer cualquier pequeño cambio.
• Al ser tan popular, la comunidad que rodea al proyecto está muy viva y en constante crecimiento. Las numerosas meetups y WordCamps que se hacen en todo el mundo, ayudan a que miles de cerebros pongan sus conocimientos al servicio de mejorar constantemente esta poderosa herramienta. 

Formulario en HTML

¿Qué son formularios HTML?

Los formularios HTML son uno de los puntos principales de interacción entre un usuario y un sitio web o aplicación. Ellos permiten a los usuarios enviar información a un sitio web. La mayor parte de las veces se envía información a un servidor web, pero la pagina web también puede interceptarla para usarla por su lado.

Un formulario HTML está hecho de uno o más widgets. Estos widgets puede ser campos de texto (de una linea o multilínea), cajas de selección, botones, checkboxes, o botones de radio. La mayoría del tiempo, estos widgets están junto a un label que describe su propósito.

¿Que necesitas para trabajar con formularios?

No necesitas nada mas que lo que se requiere para trabajar con HTML: un editor de texto y un web browser. Por supuesto, si estás acostumbrado a ello, puedes aprovechar un IDE completo como Visual Studio, Eclipse, Aptana, etc., pero eso depende de ti.

La diferencia principal entre un formulario HTML y HTML regular es que la mayoría del tiempo, la información recolectada por un formulario se envía a un servidor web. En ese caso, necesitas configurar un servidor web y procesar la información. Como configurar este tipo de servidor está mas allá de este artículo, pero si quieres saber más, visita el artículo dedicado a este tópico: Enviando y recuperando información de un formulario.

Diseñando tu formulario

Antes de comenzar a escribir código, es siempre mejor dar un paso atrás y tomarse el tiempo de pensar tu formulario. Diseñar un boceto en baja te ayudará a definir el correcto conjunto de informació que quieres preguntarle a tu usuario. Desde un punto de vista de experiencia del usuario, es importante recordar que mientras más grande tu formulario sea, mayor será el riesgo de perder usuarios. Mantenlo simple y mantén el foco: pregunta solamente lo que necesitas. Diseñar formularios es un paso importante cuando estes construyendo tu sitio o aplicación. Está más allá del alcance que este artículo cubre, pero si quieres introducirte en el tema deberías leer los siguientes artículos:

• Smashing Magazine tiene muy buenos artículos sobre formularios y UX, pero tal vez el más importante sea su Guía Extensiva A Formularios Web y Usabilidad.
• UXMatters es también un recurso muy reflexivo con buenos consejos desdemejoras prácticas básicas a temas complejos como formularios con  múltiples hojas.

En este artículo vamos a construir un formulario de contacto muy sencillo.  

Nuestro formulario va a contener tres campos de texto y un botón. Básicamente, preguntamos al usuario por su nombre, su correo electrónico y el mensaje que ellos quieran enviar. Cliqueando el botón enviará la información al servidor web.

Tablas en HTML

CONCEPTO

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr(representando a las filas contenedoras de las celdas) y td (representando a las celdas). 

CELDAS DE ENCABEZADO

Ahora que ya hemos tratado la estructura básica de una tabla, es hora de comenzar a crear tablas más útiles.

Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas en la tabla. Dicho esto, es diícil imaginar una tabla donde una celda de encabezado no tenga utilidad. Casi cualquier tabla puede beneficiarse de un grupo de celdas de encabezado bien ubicado.

En el siguiente ejemplo, construiremos una tabla para mostrar información acerca del clima en los próximos días. Aquí, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas comunes.

EL ATRIBUTO SCOPE

El atributo scope provee un mecanismo para indicar explícitamente a qué celdas afecta una celda de encabezado. Este atributo solo puede ser declarado en una celda de encabezado y tomar los valores "col", "row", "colgroup" y "rowgroup". Los valores "col" y "row" indican que la celda de encabezado provee información para el resto de las celdas en la columna o fila (respectivamente) en que está presente. Los otros dos valores tendrán sentido más adelante en este tutorial.

En el siguiente ejemplo, la tabla presentada anteriormente ha sido mejorada con más celdas de encabezado, con el fin de aumentar la legibilidad. Aquí, la celda en la esquina superior izquierda de la tabla, proveería información ambigua si el atributo scope no estuviera presente. En otras palabras, afectaría a las celdas en su columna, así como a las celdas en su fila. La presencia del atributo scope ha dejado en claro que las celdas afectadas por este encabezado son aquellas en la misma fila.

Historia del CSS

 Breve historia de CSS.

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos.

El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos con la misma apariencia en diferentes navegadores.

El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).

La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).

En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1".

A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS.

El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como "CSS nivel 2". La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1, una revisión de CSS 2 que aún se está elaborando (la última actualización es del 8 de septiembre de 2009). Al mismo tiempo, la siguiente recomendación de CSS, conocida como "CSS nivel 3", continúa en desarrollo desde 1998 y hasta el momento sólo se han publicado borradores.

La adopción de CSS por parte de los navegadores ha requerido un largo periodo de tiempo. El mismo año que se publicó CSS 1, Microsoft lanzaba su navegador Internet Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se publicó en el año 2000. Por el momento, ningún navegador tiene soporte completo de CSS 2.1.

Introduccion al lenguaje de marcas

Los lenguajes de marcas

Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al texto de un documento para especificar una propiedad del mismo.  Ejemplo: <negrita>Diseño de páginas web</negrita> <título>Diseño de páginas web</título> Tipos de marcado: físico y semántico. Por ejemplo, para enfatizar caracteres se puede utilizar el estilo físico I o el estilo semántico EM. Estilo físico Estilo semántico Sintaxis <I>texto en itálica</I> <EM>texto enfatizado</EM> Resultado texto en itálica texto enfatizado

HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las marcas son semánticas. HTML es un lenguaje extensible , al que se le pueden añadir nuevas características, marcas y funciones.  Los documentos HTML están formados por una serie de bloques de texto con una entidad lógica (titulares, párrafos, listas, ...). La interpretación de estas entidades se deja al navegador, lo cual da una gran flexibilidad a la presentación del documento, que puede ser mostrado, por ejemplo, en terminales gráficos o de texto.  El HTML, es el lenguaje que permite diseñar los hipertextos. Hoy en día, la mayoría de los procesadores de textos disponen de opciones para guardar los documentos en este formato, por lo que no presenta dificultad. Si queremos incluir efectos complicados, con imágenes en tres dimensiones, sonidos, imágenes en movimiento, consultar bases de datos, etc. entonces debemos utilizar un verdadero lenguaje de programación, como Java , ideal para Internet pues tiene la ventaja de que funciona independientemente de la plataforma (mac, pc, unix, etc.) donde se ejecuta.  Características del lenguaje HTML Elementos Cada elemento de un documento HTML consta de una marca de comienzo, un bloque de texto y una marca de fin. <MARCA>bloque de texto</MARCA>. Por ejemplo, <H1>Titular de nivel 1</H1> Estos elementos se denominan contenedores , porque contienen un bloque de texto entre las dos marcas. También existen elementos vacíos , que no afectan a bloques de texto y, por tanto, no contienen marca de fin. Por ejemplo, línea 1 <BR> línea 2 Atributos Muchos elementos tienen atributos que definen propiedades del elemento: <MARCA ATRIBUTO="VALOR"> bloque de texto </MARCA>. Por ejemplo, <H1 ALIGN="CENTER">Titular de nivel 1 centrado</H1> Es recomendable encerrar los valores de los atributos entre comillas dobles. En algunos casos es además obligatorio (por ejemplo, si contienen espacios en blanco). Distinción entre mayúsculas y minúsculas HTML no distingue entre mayúsculas y minúsculas. Cuando es importante hacerlo, cosa que puede ocurrir con los valores de algunos atributos (por ejemplo, nombres de ficheros), es preciso encerrar el valor entre comillas dobles. Por ejemplo, <IMG ALT="" SRC="BolaRoja.gif"> Comentarios Los comentarios se escriben en HTML de la siguiente forma: <!-- Esto es un comentario -- >. Los caracteres de inicio del comentario, <!-- deben ir juntos, pero se permiten espacios entre los -- y el > del final. Los comentarios pueden expandirse varias líneas, aunque no es conveniente porque algunos visualizadores pueden no interpretarlos. Interpretación de espacios, tabulaciones y retornos de carro Los espacios, tabulaciones, líneas en blanco y retornos de carro del documento HTML se ignoran, tomándose como un único espacio en blanco. Esto permite añadir espacios para aumentar la claridad del documento. Cuando se quiere forzar un espacio en blanco, se hace de la siguiente forma: &nbsp; Estructuración HTML es un lenguaje estructurado. Existen unas reglas estructurales sobre dónde pueden y no pueden ir los elementos. Por ejemplo, Ciertos elementos no pueden contener otros elementos. Por ejemplo, no es correcto colocar un titular dentro de otro. Además, tampoco tiene sentido hacerlo. <H1><H2>Texto</H2></H1> Los elementos no se pueden solapar. No es correcto escribir <EM><H1>Texto</EM></H1>  Estructura de un documento HTML <HTML> <HEAD> ... Encabezamiento del documento </HEAD> <BODY> ... Cuerpo del documento </BODY> </HTML> Elementos más importantes del encabezamiento : TITLE y META. <TITLE>Título de la página</TITLE> <META NAME="description" CONTENT="Página dedicada al diseño eficiente de páginas web para internet mediante el lenguaje HTML y otras herramientas auxiliares"> <META NAME="keywords" CONTENT="web diseño HTML hipermedia"> <META HTTP-EQUIV="refresh" CONTENT="5; URL=http://dominio/pagina2.html"> <META HTTP-EQUIV="expires" CONTENT="Fri, 05 Jan 2001 13:00:00 GMT"> El cuerpo del documento viene a continuación del encabezamiento, y contiene todo el texto y material del documento que se va a mostrar. <BODY BGCOLOR="color" BACKGROUND="fichero imagen" TEXT="color" LINK="color" VLINK="color" ALINK="color"> ... </BODY> El formato de los colores se puede especificar de dos maneras distintas: Mediante el nombre del color. Por ejemplo, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow (y otros 124 colores extendidos). Mediante la intensidad , en hexadecimal, de los componentes RGB (rojo, verde, azul) del color: #RRGGBB (siendo 00 la intensidad nula y FF el máximo brillo). Titulares o Encabezados Se pueden utilizar distintos niveles de titulares para las distintas secciones de un documento. Para ello se usa el elemento Hn, siendo n un número del 1 al 6 que indica el nivel del titular. <Hn>titular n</Hn>. El titular de nivel 3 coincide en tamaño con el texto normal. Los 6 niveles de titulares tienen el siguiente aspecto: titular 1 titular 2 titular 3 titular 4 titular 5 titular 6 Realzado de caracteres Existen distintos estilos para realzar caracteres. La mayoría de ellos son semánticos. Énfasis Sintaxis <EM>texto enfatizado</EM> Resultado texto enfatizado Mucho énfasis Sintaxis <STRONG>texto muy enfatizado</STRONG> Resultado texto muy enfatizado Código de ordenador Sintaxis <CODE>texto de ordenador</CODE> Resultado texto de ordenador Entrada de teclado Sintaxis <KBD>texto introducido por teclado</KBD> Resultado texto introducido por teclado Preformateado Sintaxis <PRE>texto preformateado</PRE> Resultado texto preformateado Estilos físicos: Negrita Sintaxis <B>texto en negrita</B> Resultado texto en negrita Itálica Sintaxis <I>texto en itálica</I> Resultado texto en itálica Subrayado Sintaxis <U>texto subrayado</U> Resultado texto subrayado Fuente de máquina de escribir Sintaxis <TT>texto en fuente de máquina de escribir</TT> Resultado texto en fuente de máquina de escribir Caracteres especiales Se escriben con el carácter ampersand (&) seguido del nombre asociado al carácter y un punto y coma (;). Ejemplos: á = &aacute; é = &eacute; í = &iacute; ó = &ocaute; ú = &uacute; ñ = &ntilde; < = &lt; Á = &Aacute; É = &Eacute; Í = &Iacute; Ó = &Oacute; Ú = &Uacute; Ñ = &Ntilde; > = &gt; Centrado de texto Para centrar texto se utiliza el elemento CENTER: Sintaxis <CENTER>texto centrado</CENTER> Resultado texto centrado Párrafos La marca P indica un comienzo de párrafo. <P>Texto del párrafo alineado a la izquierda</P> <P ALIGN="RIGHT">Texto del párrafo alineado a la derecha</P> Espaciado vertical y horizontal Espaciado vertical: salto de línea: <BR> ; salto de párrafo (intro) <P> Espaciado horizontal: <P>Primer párrafo, sin indentación</P> <BLOCKQUOTE>Segundo párrafo, con indentación</BLOCKQUOTE> <P>Tercer párrafo, sin indentación</P> Primer párrafo, sin indentación Segundo párrafo, con indentación Tercer párrafo, sin indentación Lista de definiciones o glosario Sirve para definir listas de tipo glosario, en las cuales aparecen una serie de elementos con sus correspondientes definiciones. Sintaxis Resultado <DL>    <DT>Primer elemento a definir       <DD>definición del primer elemento    <DT>Segundo elemento a definir       <DD>definición del segundo elemento    <DT>Tercer elemento a definir        <DD>definición del tercer elemento    <DT>Cuarto elemento a definir        <DD>definición del cuarto elemento    <DT>Quinto elemento a definir         <DD>definición del quinto elemento </DL> Primer elemento a definir definición del primer elemento Segundo elemento a definir definición del segundo elemento Tercer elemento a definir definición del tercer elemento Cuarto elemento a definir definición del cuarto elemento Quinto elemento a definir definición del quinto elemento Lista regular numerada  Permite enumerar una serie de elementos. Cada elemento de la lista comienza con la marca LI ( list item ) y termina con /LI, aunque ésta no es necesaria. La lista regular puede ser numerada o sin numerar. Sintaxis Resultado <OL>    <LI>Primero    <LI>Segundo    <LI>Tercero    <LI>Cuarto    <LI>Quinto </OL> Primero Segundo Tercero Cuarto Quinto Lista regular sin numerar Sintaxis Resultado <UL>    <LI>Primero    <LI>Segundo    <LI>Tercero    <LI>Cuarto    <LI>Quinto </UL> Primero Segundo Tercero Cuarto Quinto Las listas se pueden anidar unas dentro de otra, aunque sean de tipos distintos, como se muestra en el siguiente ejemplo Sintaxis Resultado <OL>    <LI>Primero       <UL>          <LI>Primero a          <LI>Primero b       </UL>    <LI>Segundo       <UL>          <LI>Segundo a          <LI>Segundo b          <LI>Segundo c       </UL>    <LI>Tercero    <LI>Cuarto    <LI>Quinto </OL> Primero Primero a Primero b Segundo Segundo a Segundo b Segundo c Tercero Cuarto Quinto Una lista sólo puede contener elementos LI, que a su vez pueden contener otros elementos HTML. Es importante no poner espacios entre <LI> y el texto, porque este espacio sí es significativo y modifica la indentación del item añadiendo un espaciado extra. En general, nunca se debe poner espacio entre una marca de comienzo y el texto que le sigue. Líneas horizontales Una línea horizontal se dibuja mediante el elemento vacío HR: <HR SIZE="altura en puntos" WIDTH="anchura en puntos"> Ejemplos: <HR> <HR SIZE="20"> <HR WIDTH="300"> <HR SIZE="20" WIDTH="300"> Imágenes Las imágenes se colocan con el elemento IMG: <IMG SRC="fichero imagen" WIDTH="anchura" HEIGHT="altura" ALIGN="alineación"> Enlaces de hipertexto Permiten conectar un documento con otros documentos u objetos. Los enlaces se colocan mediante el elemento ancla, A: <A HREF="url del documento">texto del enlace</A> La parte activa del ancla puede ser también una imagen: <A HREF="url del documento"><IMG SRC="fichero imagen" BORDER="0"></A> URL ( Uniform Resource Locator ) El URL de un documento es el nombre que identifica unívocamente al documento en la red. El URL se compone de varias partes (no todas las partes tienen por qué estar presentes): Protocolo mediante el cual se accede al documento. Nombre de dominio. Nombre de la carpeta de la máquina donde se encuentra el documento. Este nombre indica la ruta desde la carpeta raíz de la web hasta la carpeta donde se encuentra el documento. Nombre del fichero. Ejemplo: http://www.deciencias.net/alumnado/2002-2003.htm Ejemplos Enlace con url absoluto. <A HREF="http://www.softonic.com">Portal del software SOFTONIC</A> Enlace con url relativo. <A HREF="index.html">Crear web docente</A> Enlace a un punto del interior de una página. <A HREF="http://www.deciencias.net/applets/quimica/index.htm#org"> Química del carbono </A> Enlace asociado a una imagen  <a href="../../index.htm" (o a href:"http://www.deciencias.net")> <img src="../../images/deciencias.net" alt="Portal www.deciencias.net" width="75" height="50" border="0" ></a> Enlace a un punto del interior de una página Se puede establecer un enlace a un punto del interior de un documento. Para ello se escribe el URL del documento seguido del símbolo # y una etiqueta, que es una combinación de caracteres: <A HREF="url del documento#etiqueta">texto o imagen del enlace</A> En un lugar del documento debe existir un anclaje de la forma: <A NAME="etiqueta">texto</A> Este es el punto al que se saltará cuando se active el enlace. El texto es opcional y puede no aparecer si lo único que interesa es marcar el punto de destino del salto. Por ejemplo, el siguiente enlace lleva al comienzo de la sección denominada "Aplicación de comportamientos" de la página "comporta.htm": Aplicación de un comportamiento <a href="comporta.htm#aplica">Aplicación de un comportamiento</a> En el comienzo de la sección a la que se quiere saltar se deberá colocar lo siguiente: <A NAME="aplica"></A> El URL puede omitirse si el enlace se refiere al propio documento. Por ejemplo a la Lista regular numerada de este mismo documento: Lista numerada <a href="#numerada">Lista numerada</a> Enlaces a otros documentos Un enlace no sólo puede llevar a otro documento HTML; también puede llevar a una imagen, un sonido, un video, etc. En general, puede llevar a cualquier tipo de documento. Por ejemplo: ( http://www.deciencias.net/disenoweb/disenyo/analizarweb.doc ) Dirección El elemento ADDRESS se suele utilizar para proporcionar información sobre el autor de la página y permitir contactar con él para hacerle comentarios acerca de ella. Sintaxis <ADDRESS>dirección</ADDRESS> Resultado dirección En la dirección se suele incluir la dirección de correo del mismo, a veces con un enlace que permite enviarle un mensaje con sólo hacer click sobre él. La forma es la siguiente: <A HREF="MAILTO:dirección de correo">texto del enlace</A> Por ejemplo: puedes comentarme cualquier cosa que se te ocurra a propósito de esta página. <a href="mailto:mvaquero@wanadooadsl.net" target="_blank">comentarme</a>