Un sitio Web nos facilita la comunicación online en una amplia variedad de formas con nuestros usuarios , colaboradores o clientes, a la vez que transmite de nosotros o de nuestra organización una imagen actualizada y profesional.

Conocer el proceso de creación y publicación de páginas webs es una competencia básica si estamos involucrados en la publicación de información, el marketing de contenidos, el comercio electrónico o la prestación de servicios online en general.

El próximo 13 de marzo iniciamos la 17ª edición del curso online Diseño y Programación de Páginas Web. Con el podrás dominar los lenguajes básicos de la Web, HTML y CSS, y tener una primer contacto con la programación con JavaScript. También conocerás con qué herramientas puedes trabajar, cuáles son las buenas prácticas para crear sitios webs, o cómo puedes publicarlos en Internet.  

Ya puedes matricularte en este curso que organizamos con el Cevug y la Fundación UGR-Empresa y. Si además eres estudiante de la Universidad de Granada, puedes obtener créditos de libre configuración y ECTS (consulta la página de inscripción del Cevug donde se va actualizando esta información).

Junto a los videos, mantenemos los contenidos teóricos en formato escrito, páginas web y pdfs, para facilitar un acceso ágil (hojear un tema o consultar un punto concreto rápidamente) y flexible (poder leerlo tanto en PC o móvil, como offline en papel).

También depende qué queremos enseñar. Para mostrar un programa o la realización de una tarea, el video es más claro y fácil de seguir. Para explicar conceptos más abstractos, enriquecidos con enlaces y notas, el texto es un medio más natural.

Creemos que la combinación de ambos formatos es la opción ideal para el aprendizaje.  Por eso, estamos añadiendo videotutoriales en nuestro curso de Programación Web con JavaScript y jQuery, que no contaba aún con este tipo de recursos.

Los videos están elaborados por el profesor Víctor M. Rivas, autor y tutor del curso, que está utilizando además este formato screencast para ilustrar algunas respuestas a consultas de los alumnos en los foros.

Como muestra, es dejamos aquí un amplio extracto de uno de los videos, donde Víctor explica los eventos en JavaScript y las diferentes formas de implementar su gestión a través de una serie de ejemplos.

Se asume que la programación es “blanco o negro” (o voy a ser programador profesional o no merece la pena saber nada sobre ésto), pero la realidad es que es una escala continua de grises (¡o mejor de colores!), como ocurre en otras muchas disciplinas.

Por supuesto, hay software, que por sus características o complejidad, exige desarrolladores con sólidos conocimientos y experiencia, pero lo bueno de la programación es que se pueden plantear un gran rango de objetivos a diferentes niveles.

Aprender a programar puede ser muy útil y divertido y desde que empezamos, hay gran variedad de proyectos a nuestro alcance que nos pueden motivar. Se ha escrito mucho sobre qué nos puede aportar la programación: creatividad, autonomía, capacidad de análisis y resolución de problemas, colaborar y compartir con otros, dejar de ser meros consumidores y entender mejor la tecnología,… pero ¿qué tal si lo descubres tú mismo?

Nuevo curso “Aprender a programar (con JavaScript)”…

En Digital Learning siempre hemos creído en esa filosofía y ofrecemos cursos de introducción, además de especialización, en diversos lenguajes
de programación. Desde hace tiempo queríamos complementar esta formación, con una que se dirigiera a los usuarios que quieren empezar totalmente desde cero en el campo de la programación.

Aunque para ayudar a dar estos primeros pasos hay muchos recursos en la Web, quisimos elaborar una formación que cubriera las características que teníamos en mente y que describimos en su página de información: “Aprende a programar (con JavaScript)“.

…y nueva línea de formación “Aprende a….”

Este proyecto lo quisimos plantear en un nuevo formato. Los recursos no se encuentran en nuestra plataforma de teleformación Moodle, sino publicados en nuestra web. Esto nos facilita dejar el acceso libre a una parte de los contenidos sin necesidad de registrarse, para que cualquier visitante pueda comprobar si se ajusta a sus necesidades.

También varía un poco la forma de inscripción y de realizarlos. Puedes automatricularte, dándote de alta en ese mismo instante, eligiendo entre dos tipos de suscripciones (“Autoformación” y “Premium“), a un precio muy económico, durante el tiempo que quieras.

Tenemos ya previsto lanzar en pocas semanas  ¡Ya disponible! un nuevo curso en este mismo línea: “Aprende a crear Sitios Web con WordPress” y posteriormente otro sobre los lenguajes  HTML y CSS.

Esperamos que os guste este formato y por supuesto hacernos llegar vuestras sugerencias sobre otros temas que queráis que tratemos.

Siempre hemos querido abrir el curso al mayor número de alumnos, incluyendo a usuarios que saben desenvolverse en Internet, pero no tienen ninguna experiencia en programación.

Para estos alumnos suele ser sencillo trabajar con HTML y CSS, pero a veces encuentran dificultades para dar los primeros pasos con Javascript. ¿Por qué?

Las particularidades de publicar en un medio como la Web, hacen que la creación de páginas con HTML y CSS difiera en ciertos aspectos -por ejemplo, la separación de contenido y presentación- de la elaboración de documentos con un procesador de textos. A pesar de ello, tienen otras muchas similitudes para un usuario habituado a estos programas.

En cambio, Javascript es un lenguaje de programación y podemos necesitar una ayuda extra si no estamos familiarizados con los conceptos básicos de la programación. Por ello, hemos preparando una introducción a la Programación con Javascript. Además de complemento para este curso, estará también pronto disponible para usuarios de nuestra Web.

En su elaboración hemos tratado de evitar un error habitual en este tipo de contenidos: dar cosas por sabidas. Es fácil caer en el uso de términos técnicos que no se han presentado o explicar conceptos basándose en otros que aún desconoce el alumno. Esperamos haberlo conseguido, aunque estaremos atentos a los comentarios para adaptar lo mejor posible esta intro a este perfil de alumnos.

Editor online de código

Un elemento que hemos incluido en esta introducción es el uso de un editor online de código (HTML y Javascript). Nos permite presentar ejemplos que pueden comprobar y modificar de forma interactiva sin salir de la página donde se presentan los contenidos. Buscamos la sencillez e inmediatez en estos primeros pasos, y con este editor online visualizan allí mismo el resultado y les facilita el “prueba y error” tan necesario para entender estos nuevos conceptos y ganar confianza.

Presentamos aquí un ejemplo de este editor. Para utilizarlo:

• En el primer cuadro, podemos escribir etiquetas HTML e incluir código Javascript entre las etiquetas <script>…..</script>.
• En el segundo cuadro, tras dar al botón ‘Ver resultado‘ que se encuentra debajo, aparecerá el resultado que presenta el navegador.

Si quieres probarlo y no sabes nada de Javascript, debajo del editor te incluimos un ejemplo muy simple para que puedas copiarlo:

Puedes copiar el código de abajo. Pégalo en el primer cuadro y pincha en ‘Ver resultado’.
Prueba a modificarlo, por ejemplo, para que el nombre salga al final de la frase o para que solicite e imprima la edad en vez del nombre.

<h2>Primera prueba con el editor online</h2>
<p style="color:#777">Vamos a ejecutar un sencillo script que nos pedirá nuestro nombre y nos mostrará un mensaje de bienvenida a continuación:</p> 

<script>
var nombre = prompt("¿Cómo te llamas?","usuario anónimo")
document.write("¡Hola " + nombre + ", este es el resultado de tu primer script!")
</script>

Imagen: icono ‘copy’ que nos facilita el copia-pega del código

No pretendemos en este artículo determinar cuál es el índice más ‘fiable’, si no confeccionar una lista formada por 10 rankings que hemos seleccionado por su popularidad o por tener características que hemos considerado interesantes. En conjunto, nos pueden dar una visión más objetiva y completa que analizando solo uno de ellos.

Nota: hemos actualizado algunos enlaces y datos de este artículo (enero 2017), pero hemos mantenido los mismos rankings y redacción del original. Publicaremos un nuevo artículo si podemos revisarlo más a fondo.

Por regla general, estos rankings o índices se realizan a partir de información disponible en la Web y se basan en algunos de estos parámetros:

• Análisis de consultas que se realizan en los motores de búsqueda más utilizados
• Actividad en comunidades de programadores (proyectos, discusiones…)
• Demanda de conocimientos/experiencia de programación en el mercado de trabajo
• Volumen de libros vendidos (datos de editoriales especializadas)
• Encuestas realizadas en Internet entre programadores

Comenzamos la lista, indicando que no está ordenada por calidad o popularidad de estos índices, si no más bien, por los métodos de cálculo que emplean:
Nota: en aquellos lenguajes de los que ofrecemos cursos, hemos incluído un link a su página de información

1. Tiobe

Quizás el más conocido. Lo elabora la empresa Tiobe, especializada en evaluación de calidad de programas software.

Según indican en su propia página establece la popularidad de los lenguajes en función del número de resultados que se producen en los 25 buscadores más utilizados (según Alexa) con la consulta: +”<language> programming” (por ejemplo +”Javascript programming”) . Todo ello con una serie de premisas que puedes leer en su web

Este índice se publica cada mes, y en la imagen puedes ver la evolución del índice hasta 2016, de los distintos lenguajes a lo largo de los últimos años.

Evolución índice Tiobe hasta diciembre 2016

Como comentábamos, hay detractores o personas que al menos ponen objeciones serias al método de cálculo. Encontrarás ejemplos en la web que describen alteraciones de los resultados (aunque sean temporales) por acciones concertadas de comunidades de programadores, robots  o artículos donde se argumenta contra el posicionamiento de determinados lenguajes (ver un par de ejemplos en las referencias al final de este post), lo que nos lleva al siguiente índice que trata de corregir eso.

2. PYPL PopularitY of Programming Language index

El PYPL o Indice de Popularidad de los Lenguajes de Programación, se elabora analizando el número de búsquedas en Google de tutoriales sobre un determinado lenguaje. Obtiene los datos de Google Trends, por lo que argumentan que es mucho más transparente en su cálculo ya que cualquiera podría elaborarlo para su país o lengua, por ejemplo. También es cierto, que el análisis, al ser exclusivo en un solo buscador, aunque sea el líder, puede ser más limitado.

Diagrama de PyPL con licencia Creative Commons Attribution 3.0 Unported License

Con este método de analizar consultas sobre tutoriales, se trata de establecer un término de búsqueda consistente e igual para todos los lenguajes, con probabilidades parecidas de utilización en todos ellos, y que suelen dar pocos falsos positivos (es decir, resultados que no tienen que ver con lo que queríamos buscar).

También reseñar que no son consultas totales, sino que se calculan proporciones. Es decir, del total de búsquedas sobre tutoriales de esos lenguajes, calculan el porcentaje que representa cada uno. Por eso, aunque haya menos consultas sobre tutoriales Java a lo largo del tiempo, si en el resto también caen, el % puede mantenerse estable.

De esta manera se evitan fallos cómo:

• Analizar la búsqueda por el nombre solo del lenguaje, ya que algunos pueden tener varios significados y dar muchos falsos positivos, como por ejemplo ‘Python’ ó  ‘Java’.
• La objeción sobre el uso del cualificador ‘programming’, porque consideran que es más probable utilizarlo en lenguajes como ‘C’, que en otros como PHP ó Javascript, por tener nombres que los identifican de manera inequívoca
• Por último, indicar que al analizar las búsquedas por ‘tutorial’ se está teniendo en cuenta también las búsquedas en español  al ser igual el término en nuestro idioma y en inglés (hasta donde sabemos ha sido una casualidad).

3. The Transparent Languaje Popularity Index

El Índice Transparente de Popularidad de Lenguajes es una herramienta open-source que puedes descargar en sourceforge y que establece su clasificación de manera automática.

Actualización: este es un índice que ya no se actualiza tal como explican en su página. En cualquier caso es interesante conocer su filosofía y datos publicados.

Realiza sus consultas (la misma que en Tiobe: +”<language> programming”) en  buscadores y sitios destacados (Google, Bing, Yahoo, Youtube, Amazon, Wikipedia) y los publica directamente en tablas, sin ningún filtro.

Se puede pinchar en cada celda para verificar el query realizado y los resultados obtenidos

Extracto de los 10 primeros lenguajes ‘clasificados’ en el Transparent Index Language Popularity Index (Julio de 2013)

4. Redmonk

El ranking de Redmonk  se basa en la actividad que se detecta en dos comunidades muy populares entre los programadores:

• número de proyectos en el repositorio de GitHub
• número de preguntas en la web de StackOverflow

Como reconocen los propios creadores de este ranking, aunque ambos sitios presentan una correlación alta, puede haber lenguajes que estén minusvalorados en estas comunidades. Por ejemplo hay lenguajes que no suelen emplearse en proyectos Open Source o personales, algo característico de GitHub, o sean más proclives a utilizar otros repositorios como SourceForge.
Igual puede ocurrir en cuanto a búsqueda de ayuda donde StackOverflow no sea el sitio de referencia para determinados lenguajes.

En cualquier caso, es interesante como método de cálculo distinto al de las consultas realizadas en los buscadores.

Ranking Redmonk en enero 2014 para popularidad e lenguajes de programación

5. Trendyskills

Trendyskills se basa en las ofertas de empleo que se registran para los diferentes lenguajes de programación. Es más una herramienta interactiva que un índice, donde podemos realizar nuestras propias consultas, y ver las tendencias en el mercado laboral de diversos paises (USA, UK, Alemania, España, Suecia y Grecia) lo que es una aproximación diferente y complementaria a los rankings que hemos visto anteriormente.

Gráfico de Trendy Skills con lenguajes de programación más populares por ofertas de trabajo. Podemos modificarlo dinámicamente realizando otras consultas

6. Job trends (Indeed.com)

En esta misma línea de analizar de forma dinámica los conocimientos que se solicitan en las ofertas de empleo, hay otros, como la utilidad ‘Job Trend‘ (tendencias de empleo) del buscador especializado en ofertas de trabajo Indeed.com

Entre otras diferencias, nos da por ejemplo datos de lenguajes o sistemas que no son exactamente lenguajes de programación pero en los que podemos estar interesados (por ejemplo HTML y CSS ó AJAX). En la imagen hemos capturado una búsqueda por Android, que no es un lenguaje en sí, y que en otros índices o rankings puede estar incluído en los resultados de Java.

Tendencia en ofertas de empleo donde se solicitan skills relacionados con Android (http://www.indeed.com/jobtrends/Android.html)

7. Langpop (programming Languaje popularity)

La web Langpop nos ha llamado la atención, ya que se establecen rankings por diversos parámetros. Luego combina todos ellos y mediante una interfaz interactiva, podemos darles distintos pesos a cada criterio según nos interese, para que recalcule las posiciones. Está actualizado con datos hasta 2013.

Actualización: parece que la web langpop.com dejó de funcionar, aunque se puede consultar aquí.

Los parámetros que maneja son:

• Consultas en Google (del tipo “language programming”)
• Número de ficheros con una determinada extensión (prima excesivamente los lenguajes de la Web)
• Ofertas de empleo (publicadas en Craiglist)
• Número de proyectos de desarrollo (GitHub y Ohloh/OpenHub)
• Discusiones sobre lenguajes (Lamda the Ultimate, programing.reddit.com, Slashdot)

Langpop.com: ranking dinámico de lenguajes de programación. Puedes configuralo dando diferentes pesos a cada factor que tiene en cuenta.

8. IEEE Spectrum’s Ranking

En la línea del anterior, pero más potente, otro ranking con una gran interfaz gráfica interactiva que nos permite obtener distintas clasificaciones en función de los distintos parámetros que utiliza para el cálculo de las clasificaciones:

• General (lo que denomina IEEE Spectrum)
• Tendencia (Trending)
• Ofertas empleo (Jobs)
• Personalizado (Custom: nos permite hacernos un ranking a medida eligiendo el peso de cada parámetro)
• Web / Móvil / Empresa / Embebido (podemos filtrar por cualuqiera de estos entornos)

Interfaz gráfica del ranking IEEE Spectrum. Podemos elegir diversas categorías, hacer comparaciones o elaborar uno personalizado

La verdad es que es una de las herramientas que más nos ha gustado de todas las que presentamos, por el diseño que tiene y la filosofía con la que está construida, que nos da muchas posibilidades de personalización como mostramos en la siguiente imagen:

Podemos personalizar los rankings ponderando nosotros mismos los paramétros de cálculo

9. Ranking venta de libros (O’Reilly)

Traemos este ejemplo de índice de popularidad basado en volumen de venta de libros. Hemos escogido a O’Reilly, por ser una conocida editorial especializada en TIC y que publica cada cierto tiempo algún análisis sobre la venta de sus libros:

Análisis venta de libros sobre lenguajes de programación (O’Reilly)

10. Twitter programming languaje survey

Por último, terminamos esta lista con otro método de clasificación, en este caso una encuesta realizada en Twitter a lo largo de 2013 denominada #Code2013.

Nota: puedes ver la última actualización al año 2015 aquí: #Code2015

El volumen de datos no es comparable a las consultas automáticas, pero como muestra puede ser interesante. Para hacernos una idea, Javascript, el lenguaje más mencionado, obtuvo 2.769 menciones.

Además, esta encuesta introduce el sesgo que puede haber en la utilización de Twitter, ya que este uso puede no ser uniforme entre los distintos perfiles de programadores.

En cualquier caso es interesante porque son contestaciones reales a a la pregunta del lenguaje que se utiliza y las ‘respuestas’ pueden comprobarse pinchando en cada hashtag, viendo los usuarios y tuits donde se ha mencionado.

Diagrama popularidad lenguajes según encuesta en Twitter (#Code2013). Datos de enero 2014

Conclusión

Esta lista te puede dar una buena idea del panorama de rankings y herramientas para conocer la popularidad de los lenguajes de programación, aunque lógicamente hay más. Como verás, hay discrepancias, pero también puntos en común entre muchas de ellas, a pesar de emplear métodos diferentes.

En resumen, puede ser una información orientativa muy interesante, útil, e incluso ‘divertida’ de analizar, pero de la que tampoco debemos esperar una precisión y fiabilidad absolutas.

Ahora es tu turno: ¿Conoces algún ranking que no hayamos presentado aquí? ¿Alguna herramienta que consideren otros idiomas además del  inglés? ¿Ves útil alguno en especial? ¿Utilizarías alguno de estos rankings para decidir que lenguaje aprender o te basas en otros criterios? Esperamos tus comentarios!

HTML es el lenguaje de marcas que nos permite estructurar el contenido de una página web mediante etiquetas de texto. CSS es el lenguaje de estilos que facilita configurar la presentación de dichas páginas. Son fáciles de aprender y te van a ser de gran utilidad no solo para crear páginas desde cero, sino para poder editar con mucho mayor control un post en tu Blog, una página creada con WordPress o el CMS que utilices, un diseño de un emailing o una página en Facebook por ejemplo.

En esta formación, online y muy práctica, verás ampliamente cómo utilizar estos dos lenguajes según las mejores prácticas y darás tus primeros pasos con Javascript, el lenguaje de programación estándar de los navegadores. Conocerás los fundamentos básicos para crear y utilizar scripts (guiones) que son pequeños programas que proporcionarán interactividad a tus páginas web. Hay miles de estos scripts disponibles libremente en la Web, así que esta introducción te abrirá muchas posibilidades para hacer páginas más avanzadas aprovechando este potencial.

Además, conocerás cómo publicar tu sitio web en Internet subiendo tus páginas a un servicio de Alojamiento Web.

Este curso lo organizamos con la Fundación general UGR-Empresa y el Centro de Enseñanzas Virtuales de la UGR (CEVUG) y lo impartimos en su Campus online del 3 de Marzo al 30 de Mayo de 2014.
La inscripción está abierta para todos, y si eres estudiante de la Universidad de Granada  se reconocen créditos ECTS y de libre configuración en esta Universidad.

El plazo de inscripción acaba el 26 de Febrero, así que date prisa para reservar tu plaza!

En el anterior post, citamos a los dos lenguajes básicos de la web por los que comenzar: HTML y CSS. Deberíamos estar bastante familiarizados con ellos, tanto si queremos ser ‘todoterrenos’ como especialistas en algún área concreta del desarrollo web. A estos dos lenguajes añadiríamos conocimientos sobre los fundamentos de Accesibilidad, Usabilidad y SEO (en este último caso, técnicas de optimización ‘in-page’), es decir,  adquirir buenas prácticas en diseño web desde el principio, teniendo caro la importancia de los estándares, evitando el ‘código basura’  en nuestras páginas y que éstas sean amigables para los visitantes, sean personas (con algún tipo de discapacidad o no) o robots de buscadores. Creemos que es un fallo en la formación de diseñadores o programadores web empezar con herramientas como Dreamweaver o tecnologías como Flash, sin conocer esos mínimos fundamentos que comentamos.  Puede que obtengamos buenos resultados visuales, pero sin esa base, posiblemente no sabremos emplearlas o aplicarlas adecuadamente.

Y con este bagaje técnico ¿cómo seguimos avanzando en nuestro aprendizaje? Para algunos, los conocimientos transversales se acaban en las áreas que hemos comentado y a partir de ahora entraríamos en un campo de especialización: programación ‘front-end’ (en el cliente-navegador) o en el servidor, profundizar en diseño de arquitectura web, accesibilidad, interfaces, diseño gráfico en el entorno web,… Sin embargo nosotros incorporaríamos un lenguaje más a nuestros conocimientos básicos: JavaScript. No significa que sea cual sea nuestro papel en el proceso de creación de webs tengamos que ser expertos programadores en este lenguaje, pero si ser capaces de entender cómo funciona y estar familiarizados con él lo más posible.

Si no has programado nunca, y necesitas empezar desde cero, paso a paso, con un lenguaje muy sencillo, te aconsejamos nuestro curso “Aprende a Programar (con JavaScript)“. Verás que es más fácil (¡y divertido!) de lo que creías.

¿Por qué JavaScript? En un post dimos 10 razones para aprenderlo Es el lenguaje de programación de los navegadores, el estándar abierto (en realidad es el ECMAScript, pero todos lo conocemos por JavaScript) que puede funcionar en todos ellos sin necesidad de plugins adicionales. Es cierto que hay otras tecnologías como Flash (propietaria y cerrada, con lo que ello conlleva) y los Applets de Java que permiten dotar de interactividad y dinamismo al cliente web, pero ni son lenguajes nativos de este medio ni sobre todo estaban pensados para realizar una web con ellos. JavaScript se ha impuesto a la hora de dotar de interactividad a la web y en el apartado de animaciones gráficas, banners y diseños gráficos similares, aunque Flash era una buena herramienta, su falta de soporte en cada vez más plataformas (smartphones, varios navegadores importantes…) hace que se vaya sustituyendo por una nueva alternativa como HTML5 combinado con JavaScript.

Y más en detalle, ¿qué aporta JavaScript?. Pues muchas cosas, pero destacamos su capacidad para manipular e interactuar con el DOM de la página. El DOM (Document Object Model, estándar de la W3C) representa la página HTML y sus diferentes partes, como un conjunto de objetos relacionados en una estructura ramificada en forma de árbol, con nodos interconectados jerárquicamente. Es decir, si un ‘párrafo’ (un nodo o una hoja en ese símil del árbol ) está contenido en un ‘div’ (otro nodo), áquel será una rama de éste como puede verse en la imagen. Eso sí, la imagen suele representarse invertida, con el objeto del documento que contiene a todos los demás arriba.

Imagen: representación del árbol del DOM (este tendría como raíz el objeto ‘document’, no incluido aquí). Para simplificarlo solo se ha ‘desarrollado’ la rama de cuadros azules.

Mientras HTML pertenece a la familia de los lenguaje de marcado, el DOM es de la familia de la Programación Orientada a Objetos (POO). HTML trata con elementos que pueden tener atributos con unos determinados valores (por ejemplo,  un elemento ‘párrafo’ que tiene  el atributo de identificación ‘id’ con un valor ‘inicio’: <p id=”inicio”>), y en el DOM esos elementos y atributos se convierten en objetos y los valores de esos atributos son propiedades (si no conoces o no estás familiarizado con la terminología de la POO, puedes consultar este post). Todo ello puede ser manipulado por un lenguaje de programación a través de las API que expone el DOM, es decir, métodos que pueden ser llamados por ese lenguaje para crear, eliminar o alterar dichos objetos.

Aunque lo anterior puede sonar farragoso para alguien sin experiencia en programación, el concepto es sencillo. El navegador cuando ‘lee’ la página HTML, además de presentarla en la pantalla construye un DOM, un mapa que proporciona a JavaScript (o a otros lenguajes como PHP, Java…) una interfaz para llamar a funciones que manipulen dinámicamente sus objetos y las propiedades de estos.  Además, también le da una intefaz para trabajar con eventos, es decir, le permite a JavaScript capturar cambios que se producen en el navegador o provocados por el usuario y dar una respuesta realizando cualquier tipo de acción de las que hemos comentado antes. Es decir, en HTML el párrafo es una etiqueta descriptiva, un elemento estático, pero con JavaScript podemos acceder a ellos y cambiar su contenido, aplicarle estilos de presentación, eliminarlos o crear unos nuevos modificando incluso la estructura de la página.

Para visualizarlo, mostramos un ejemplo en el cuadro de abajo. En él, hemos creado con HTML un par de párrafos, identificando el primero con el atributo id=”inicio” y un botón, con el identificativo “cambiar”.  Con JavaScript, en la 1ª línea de código, seleccionamos al boton por su identificativo (getElementById=”cambiar”) y lo asociamos a un objeto ‘boton’. En la 2ª línea, asociamos  la propiedad ‘onclick’ (ser pinchado) del objeto ‘boton’ a una función, en este caso anónima.  ¿Y qué hace esa función? Pues es la 3ª línea vemos que selecciona el primer párrafo de forma similar a como hicimos con el botón,  y en las 4ª  y 5ª líneas le aplica a ese párrafo escogido un estilo de tamaño de fuente mayor y le cambia el texto que contiene, respectivamente. Si pinchas en la pestaña ‘html’ verás los dos elementos ‘párrafos’ y el botón que hemos comentado y si pinchas en ‘result’ se ejecutará el código mostrando la página. Pincha en el botón y verás el resultado. Aunque es un ejemplo muy simple, nos puede dar una idea de la potencia que nos proporciona la combinación de JavaScript con el DOM.

¿Qué otras cosas podemos hacer con JavaScript? Pues citamos algunas:

• Acceder a los objetos propios del navegador, no solo del documento, y manipular  ventanas (si obtiene permiso) u obtener información detallada del propio navegador del usuario o de la resolución de su pantalla por poner unos ejemplos.
• A partir del input del usuario, procesar esos datos y devolver un resultado. Por ejemplo comprobar que el formato de una dirección email o un NIF que se ha introducido en un formulario es correcto o realizar cualquier tipo de cálculo a partir de unos números que haya introducido el usuario. En definitiva, procesar cadenas de texto, números, arrays, etc… como haríamos con cualquier lenguaje de programación de propósito general, eso sí, limitado al entormo del navegador y sin  acceder a los ficheros y discos del usuario.
• Transmitir y recibir información de un servidor en background, utilizando el objeto XMLHttpRequest, sin necesidad de refrescar toda la página, implementando Ajax en nuestras páginas. Un ejemplo conocido: presentar sugerencias al usuario mientras escribe en un casillero de búsqueda. Cada letra adicional que escribe, hace variar dichas sugerencias.
• Sacar partido de las posibilidades que nos ofrece HTML5 para crear ‘Aplicaciones Web’ y acceder a todas las nuevas API que nos trae este nuevo estándar. Este punto lo ampliaremos en el próximo artículo donde hablaremos precismente de él.

Como ‘extra’ os animaríamos a conocer alguna de la librerías que facilitan mucho la programación con JS y la compatibilidad del código entre navegadores. Podréis realizar cosas avanzadas en cuanto tengáis un poco de dominio. Hay varias muy buenas, pero recomendaríamos jQuery por su popularidad.

Para ver sus posibilidades, mostramos un ejemplo con jQuery también muy simple: una lista de párrafos que se modifican al pulsar el botón ‘cambiar’:

Si quieres ver algo más ‘animado’, puedes ver esta carrera de coches que realizamos como ejemplo en nuestro curso.

En el próximo post hablaremos sobre HTML5 y verás porque es tan importante JavaScript en este nuevo estándar.

Credits: imagen superior ‘Website under construction’ by © Spectral-Design-Fotolia.com / imagen ‘DOM’, elaboración propia

El ejemplo se presenta en el editor de código en linea jsFiddle, un ‘playground’ que te permite testear de forma online e inmediata tu código HTML, CSS y Javascript. Además admite todas las librerias más populares de este lenguaje, como jQuery, Prototype, Mootools, YUI, Doho y muchás más.

Para ver la carrera, pincha al botón ‘Comenzar’ debajo del todo y a correr!! (de acuerdo, lo sabemos, no es formula 1, pero si aprendes a trabajar con Javascript y jQuery seguro que puedes hacer tu propia versión 2…)

Ah! y si además quieres ver el código, pincha en “Edit in JSFiddle” y accederás a él, pudiendo editarlo o compartir este widget con quien quieras.

• Curso de Diseño y Programación de Páginas Web (CDPPW), 10ª edición. (100 horas. Fechas: 26 de Octubre al 20 de Diciembre de 2012)
• Curso Alojamiento de Sitios Web-Publicación en Internet (CASW) , 3ª edición. (50 horas. Fechas: 15 de Noviembre de 2012 al 14 de Diciembre de 2012)

Ambos los organizamos conjuntamente con el Centro de Enseñanzas Virtuales (CEVUG), en cuyo Campus Virtual se imparte esta formación y la Fundación Universidad-Empresa, que gestiona las matriculaciones y la expedición de diplomas.

Estos curso convalidan créditos de libre configuración para diversas Facultades de la Universidad de Granada, si bien, están abiertos para cualquier persona interesada, sea cual sea su situación laboral (estudiante, profesional, desempleado…) o lugar de residencia.

La 10ª edición del curso de Diseño y Programación Web se ha actualizado con referencias a los próximos estándares HTML5/CSS3 y será tutorizado por Francisco Illeras (Administrador de Sistemas en ETSIIT-UGR) y Víctor Santos (Profesor de la EPSJ-UJA).
El Tutor de la 3ª edición del curso de Alojamiento Web, al igual que de las anteriores, será Javier Navas (Web Master de Digital Learning).
El Director Académico de ambos cursos es Juan José Merelo, catedrático de la ETSIIT y Director de la Oficina de Software Libre de la UGR.

Se han reorganizando los temas, mejorando algunos aspectos de presentación y contenido, con inclusión de más ejemplos y la realización de un Proyecto final, y sobre todo, hemos añadido un tema completo dedicado a la libreria jQuery, un auténtico entorno de trabajo (framework) basado en Javascript que ha revolucionado la manera de programar en este lenguaje,

jQuery, es software libre de código abierto, y líder indiscutible en utlización dentro de todas las librerias que han surgido en los últimos años, como Dojo, MooTools o ExtJS, por citar algunas.

Este tipo de librerias,nos ofrecen dos ventajas muy importantes:

• nos permite despreocuparnos de incompatibilidades entre navegadores y sus distimta versiones. jQuery se encarga por nosotros de que el código se ejecute sin problemas independientemente del navegador que visualice nuestra página.
• nos permite desarrollar funcionalidades avanzadas y efectos espectaculares con mucha menos dificultad y esfuerzo. El lema de jQuery “haz más con menos” es una auténtica realidad para el programador, que puede desarrollar aplicaciones web con interfaces y una experiencia para el usuario similares a las  tradicionales aplicaciones de escritorio.

Por supuesto, creemos  que para sacar el máximo partido del potencial que ofrece jQuery (o cualquiera de estas librerías) es imprescindible una adecuada base de conocimientos y experiencia en la programación con Javascript. El alumno, al completar este curso, va a adquirir sin duda esos fundamentos para poder seguir  formándose y afrontar proyectos y desarrollos de mayor complejidad.