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

Las inscripciones a estos cursos ya están abierta para todos, y no requieren ningún requisito especial de titulación o conocimientos previos, salvo estar familiarizado con Internet y la navegación y uso de aplicaciones en la Web.

Las nuevas ediciones y sus fechas de celebración son:

• Community Manager, 4ª edición: 26 de Octubre de 2015 al 29 de Enero de 2016
• Diseño y Programación Web, 14ª edición: 3 de Noviembre 2015 al 29 de Enero de 2016
• SEO, Posicionamiento Web en Buscadores, 3ª edición: 11 de Noviembre 2015 al 29 de Enero de 2016

Te aconsejamos cualquiera de estos cursos si:

• No conoces, pero estás interesado en alguna de estas áreas y quieres empezar a formarte en ella.
• Ya sabes algo, pero de forma dispersa con algunas lagunas y quieres completar tu conocimiento con una visión más sistemática y sólida
• Dominas alguno de estos temas, pero apenas sabes de los otros que están muy interrelacionadas.

El conocimiento de estas tres áreas, Gestión de Medios Sociales, Posicionamiento Web y Creación de Sitios Web / Blogs, es fundamental para poder desarrollar una estrategia de comunicación y captación de usuarios y clientes en la Web. Aunque nuestro objetivo sea especializarnos en una de ellas, obtener competencias básicas en estas tres líneas, nos dará una visión más global, y una preparación más profesional para desempeñar esa labor.

Os presentamos brevemente cada curso, información que podéis ampliar en los enlaces que os hemos incluido antes:

Curso de SEO, Posicionamiento de Páginas Web en Buscadores (3ª edición)

Que nuestras páginas Web tenga visibilidad, apareciendo de forma destacada en las búsquedas en Google es fundamental para conseguir visitas e interacción en nuestro Sitio Web o Blog. No es un objetivo fácil de conseguir,  pero sí podemos influir en que sea posible gracias al SEO.

El SEO es un conjunto de técnicas y buenas prácticas que optimizan nuestra Web para ser mejor clasificada por los buscadores. Abarcan muchos factores, desde cómo diseñamos su estructura y páginas, su contenido y la forma en que publicamos, cómo integrar a nuestras redes sociales o conseguir enlaces de calidad. 

En este curso revisamos todos esos factores SEO, cómo implementarlos y qué herramientas y servicios nos pueden ayudar en esta labor.

Matrículas, Diplomas y convalidación de créditos.

Matrícula abierta para cualquier persona con interés por estas temáticas.

Al completar con éxito uno de los curso, se recibirá un Diploma acreditativo firmado por las Entidades Organizadoras.

Además, para los alumnos de todos los Grados ofertados por la Universidad de Granada se reconocen créditos ECTS  así como créditos de libre configuración en numerosas facultades de la misma.

Imágenes: carteles diseñados por FGUGREM

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.

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 julio de 2014, de los distintos lenguajes a lo largo de los últimos años.

Evolución índice Tiobe hasta Julio de 2014

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 mas 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.

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)

El 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.
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 2014 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.

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!

Si estás interesado en conocer Java, POO y/o programación en Android, con esta formación compuesta por videotutoriales, documentación en pdf y ejemplos descargables, foros, tests y sobre todo, numerosos ejercicios, podrás aprender practicando con la ayuda personalizada de Jose Antonio, al que podrás consultar todas tus dudas.

Para ver mejor el video, en la parte inferior del visor (espera unos segundos si no te aparece) puedes cambiar si lo deseas la calidad a ‘HD’ (alta definición, 720p) en el icono de configuración (rueda dentada) o pasarlo a pantalla completa (icono cuadrado abierto). Para que te aparezcan estas opciones debes iniciar el video y situar el ratón dentro del visor.

Esperamos que os guste!

Ah!, y si quieres descargarte el código fuente de los ejemplos que se muestran en el video (formato zip), te pedimos solo un favor, que nos ayudes a difundirlo este video en Twitter. Pulsando el siguiente enlace, se publicará el texto: “Viendo el videotutorial del curso Java para Android de @dlformacion en ”). Gracias!

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.

¿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, pero aunque funcionen en la web, no son lenguajes nativos de este medio.

¿Y 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 de ver el código en las diferentes pestañas de la barra de jsFiddle, quieres acceder a él, editarlo o compartir este widget con alguien, pincha en el botón que aparece más a la derecha de esa barra.

Además de los ejercicios que se realizan en el curso, los alumnos desarrollan una App Android como Proyecto final, así que os queríamos presentar en este post algunas de las que ya han creado.

Los alumnos eligen la temática y diseñan su aplicación, contando si la necesitan, con la ayuda del tutor (Juan Luis Montero es el tutor principal del equipo de Iliberi, con los que colaboramos en esta formación). Él les resuelve dudas, propone soluciones a aquellas funcionalidades que ‘se resisten’ y aconseja sobre posibles mejoras para que la App sea lo más intuitiva y funcional posible.

Hemos seleccionado tres ejemplos de apps que os queríamos mostrar brevemente:

• Miguel López Sarabia (Madrid):
  Ha diseñado una App que permitirá al usuario saber el número de plazas de parking disponibles en tiempo real en los distintos centros de trabajo de su Empresa y recibir alertas según ocupación. Con este widget, el usuario puede seleccionar el parking del edificio del que desea obtener información, los sonidos de alerta, los skins para su apariencia y una firma personalizada. El número de plazas libres se presenta en distintos colores según el nivel de ocupación (las capturas son del prototipo, con datos y algunos botones de test)

Pincha en las imágenes para ampliarlas

• Javier Infante Izquierdo (Irún-Gipuzkoa):
  Ha creado una App para ayudarnos a gestionar nuestra cotidiana lista de la compra y que nos permite crear y borrar listas, ver historial de compras o consultar un mapa con la ubicación de supermercados según nuestra posición captada por el GPS del smartphone.
• Miguel Angel Quintas Aranda (Granada):
  Ha creado una App para la gestión de una guardería y facilitar a los padres el seguimiento de sus hijos: clases en la que están, calendario de actividades, comunicar incidencias o incluos poder verlos en el móvil mediante una webcam.

Lógicamente, este es un primer paso en la creación de Apps para Android que facilita a los alumnos seguir avanzando y adquirir más conocimientos y experencia en este entorno. Están surgiendo oportunidades muy interesantes en el mundo de los dispositivos móviles, y ellos han dado ya ese primer paso.
¿Te animas tú?

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.

Para ello, con el proyecto abierto, nos situamos en la clase wombat en el diagrama de la derecha. Hacemos que aparezca el menú contextual (botón derecho del ratón) y elegimos ‘Abrir el editor‘. Lo que vemos es el código escrito en lenguaje Java que define esta clase.

Si tienes muy poca experiencia en programación quizás te resulte casi incomprensible, pero analizando por partes verás que no es tan difícil de entender.

En una primera revisión, como podemos ver en la imagen de abajo, se distinguen varias secciones enmarcadas con recuadros de distintos colores que explicaremos a continuación:

* Importación de clases: es la sección inicial, en fondo blanco. Mediante la cláusula ‘import‘, podemos incluir las clases que necesitemos en nuestro programa  para que todo funcione correctamente. Las clases suelen encontrarse agrupadas de forma lógica en librerías o packages(paquetes). Un paquete es por tanto un conjunto de clases ya construidas que podemos utilizar en nuestra aplicación, lo que nos ahorra programar todas las funcionalidades desde cero:

import greenfoot.*;  // (World, Actor, GreenfootImage, and Greenfoot)
import java.util.List;
import java.util.ArrayList;

En el apartado ‘la API de Java’, en este mismo artículo, te explicamos más en detalle estos conceptos.

* Declaración de la clase: es el bloque donde definimos la clase Wombat en sí y que está delimitada visualmente por un cuadro verde. Comienza con unos comentarios (qué hace la clase, su autor, versión…), cuyo inicio y final se marcan con los caracteres ‘/* ‘ y ‘*/’ (es muy recomendable incluir comentarios a lo largo del programa para hacer más entendible nuestro código) y continúa con:

public class Wombat extends Actor
{ ...............
...............

la expresión public class Wombat extends Actor’ la podríamos traducir literalmente por ‘la clase Wombat extiende la clase Actor , y encierra uno de los elementos fundamentales de la POO, la herencia. Explicaremos más detenidamente el concepto de herencia en un siguiente apartado en este artículo, pero básicamente estamos diciendo que creamos la clase Wombat (más específica) a partir de la clase Actor (más genérica) ‘heredando’ o teniendo disponibles sus atributos y métodos.

El término  public es un modificador de acceso y define a esta clase como pública, siendo accesible por tanto por cualquier otra clase. Por defecto, si no incluímos ningún modificador (default), solo sería accesible por clases que están incluídas en su paquete.
Hay otros dos modificadores de acceso, que al igual que los anteriores, también son aplicables a los métodos y a los atributos: protected (similar a default aunque permite heredar a una subclase que no está en el paquete ) y private (si queremos que los  métodos o atributos sean solo accesibles dentro de la clase). Si quieres saber más, puedes consultar este artículo sobre modificadores Java.

El código que define la clase se encierra entre llaves  ‘{‘ y ‘}’ ‘. Vemos que a su vez tiene bloques diferenciados, Vamos a analizarlos:

* Declaración de atributos: es el recuadro inicial en fondo blanco:

private static final int EAST = 0;
private static final int WEST = 1;
private static final int NORTH = 2;
private static final int SOUTH = 3;

private int direction;
private int leavesEaten;

El grupo de los cuatro primeros: EAST, WEST, NORTH y SOUTH, son las direcciones a las que puede orientarse el Wombat. Son de tipo entero (int) y se han definido de forma que actúan como constantes para cualquier objeto Wombat al tener los modificadores final y static. El primero no permite que se modifiquen sus valores (0,1,2 y 3),y el segundo las define como variables de clase, es decir, no es necesario crear un objeto para utilizarlas. Recordemos en el anterior post el efecto que producía pasar uno de estos números como parámetro al método setDirection(int direction). ¡Hacían que el Wombat se girará a derecha, izquierda, arriba o abajo !. El otro modificador (private) indica que solo son accesibles dentro de la clase.

El grupo de los dos siguientes atributos, direction y leavesEaten, son variables de instancia y almacenarán la información en formato entero (int) de la dirección y las hojas que han comido cada uno de los objetos Wombat que creemos (instanciemos) a partir de esta clase. Se les denomina también campos y toman valores particulares a nivel de objetos.

* Constructor: es el proceso que crea un objeto a partir de una clase y que se ejecuta automáticamente cada vez que instanciamos un objeto (al seleccionar new WombatWordl, new Wombat() ó new Leaf()).
Su código aparece en el recuadro amarillo justo debajo de la definición de atributos:

<strong>public Wombat()</strong>
{
setDirection(EAST);
leavesEaten = 0;
}

Tiene la misma estructura que un método aunque con algunas particularidades: debe tener siempre el mismo nombre que la clase y no tener ningún return type.

No es necesario declarar siempre un constructor, ya que toda clase tiene uno que inicializa los campos del objeto con valores por defecto. Si queremos personalizar ese proceso de creación, entonces podemos escribir uno o varios constructores, a los que a su vez podemos pasar o no parámetros. Por ejemplo, en este caso, el constructor inicializa los campos direction con el valor ‘EAST’ y leavesEaten con el valor ‘0’.

* Métodos: todo el código restante de esta clase, son las definiciones de sus métodos. Cada uno aparece en un recuadro amarillo, con una estructura muy parecida:

• Comentario indicando que realiza ese método
• Declaración del método: ‘public void act()‘, ‘public boolean foundLeaf()‘, ‘public void eatLeaf()‘,…
• encerrados entre llaves {}, las instrucciones que han de ejecutarse

Aunque no podemos entrar en detalle de todo el código, vamos a revisar por ejemplo el primer método que aparece: act()

<strong>public void act()</strong>
{
if(foundLeaf()) {
eatLeaf();
}
else if(canMove()) {
move();
}
else {
turnLeft();
}
}

Sabemos por un post anterior, que la palabra reservada void nos indica que el método no devolverá ningún valor. Interpretando o traducciendo del inglés el código encerrado entre las llaves, vemos que hay una estructura condicional:

if(condición 1) {
instruccion 1…..
}
else if (condición 2) {
instrucción 2
}
else {
instrucción 3
}

If, es el ‘si’ condicional en inglés y el ‘else’ nos permite evaluar una alternativa.  Podríamos leer todo este código literalmente como:
“si se cumple la condición 1, ejecuta  la instrucción 1, si en cambio se cumple la condición 2, ejecuta la instrucción 2 y en cualquier otro caso (no se cumple ninguna de las dos anteriores), ejecuta la instrucción 3”

¿Qué condiciones e instrucciones hay? Pues vemos que son precisamente llamadas a otros métodos de este mismo objeto. Si seguimos traduciendo literalmente sería algo así como:

“si se cumple la condición ‘he encontrado una hoja’, ejecuta ‘comer hoja’, si en cambio se cumple la condición ‘puedo moverme’, ejecuta la instrucción ‘mover’ y en cualquier otro caso, ejecuta la instrucción ‘gira a la izquierda’ ”

Si queremos cambiar el comportamiento de los Wombat que creemos, solo tenemos que modificar los métodos adecuados. Lo iremos viendo en próximos posts, pero puedes practicar un poco con cambios sencillos. Por ejemplo, si modificas este método act() en su primer condicional de forma que añadas llamadas a los otros dos métodos de la forma:

if(foundLeaf()) {
eatLeaf();
turnLeft;
move(3);
}

¿qué ocurrirá cuando el Wombat encuentre una hoja? Es fácil de adivinar ¿verdad?. Prueba las variantes que quieras y no olvides compilar siempre después de realizar los cambios. Puede ser buena idea que al hacer el primer cambio guardes el proyecto con otro nombre (save as…) y continuar ya con éste, de forma que mantegas el proyecto y código original de referencia.

En primer lugar vemos que al abrir un escenario, por ejemplo el ‘Wombat’, y tras dar al botón de compilar en la parte inferior derecha no aparecen la siguiente pantalla, que será nuestra interfaz visual donde editaremos y ejecutaremos nuestros programas:

Se divide en tres partes principales:

• El Mundo, que es el cuadrado con retícula de color arena que nos aparece en la izquierda. Es donde pondremos los objetos y donde se desarrollará el juego o simulación que programemos. Variará su apariencia en función del escenario que carguemos, ya que cada uno tiene un Mundo por defecto (en este caso es ‘WombatWorld“) y éste a su vez tiene una imagen de fondo que podemos cambiar fácilmente como veremos más adelante.
• El Diagrama de Clases, en la parte derecha. Ahí nos aparecen tanto las clases de Mundo que tenemos disponibles y las clases de Actores (‘Wombat‘ y ‘Leaf’) a partir de las cuales crearemos los objetos que incluiremos en el mundo elegido.
• Los botones que aparecen en la parte inferior y que nos permiten ejecutar una serie de acciones que veremos a continuación.

Si posicionamos el puntero del ratón en la clase Wombat y pulsamos el botón derecho para que apareca el menú contextual, obtendremos lo que aparece en la imagen de la derecha.

Si elegimos la opición ‘new Wombat()‘ estaremos creando un objeto a partir de esa clase, apareciéndonos una imagen de este animal que podremos arrastrar y posicionar en el mundo que tenemos a la izquierda (imagen de abajo).

Podemos crear tantos objetos como queramos a partir de la clase Wombat, y podemos hacer lo mismo con la clase Leaf (hoja), posicionando todos esos objetos en el cuadrado de la izquierda.

A la acción de crear objetos se le denomina instanciar (un objeto es una instancia de una clase). A partir de ahí, ya podemos interactuar con ellos.

Pasamos a la acción

Si pulsamos el botón accionar, veremos que el (o los) wombat que hayamos creado se moverán una celda hacia la derecha mientras que las hojas permanecen quietas. Si pulsamos el botón ejecutar (run si lo tienes en versión inglesa), los wombats seguirán moviéndose celda a celda hacia la derecha con dos particularidades: si encuentran una hoja, ésta desaparece (se la come!) y si llegan a los límites del mundo (los lados del cuadrado), girán 90 grados y continuan en esa nueva dirección.

¿Por qué hacen cosas los wombats y no las hojas (leaf)? Lógicamente porque está así programado. Si nos posicionamos en un wombat situado en la cuadrícula  y accedemos al menú contextual (botón derecho ratón) nos aparecerá una lista de métodos, tal como vemos en la imagen de la derecha. Descubriremos más adelante, cuando inspeccionemos el código Java, que los métodos son un conjunto de instrucciones que hacen una determinada tarea, al estilo de las funciones que utilizamos en la programación estructurada.
Podemos adivinar más o menos de que se trata por sus nombres en ingles: act (actuar), eatLeaf (comer hoja), … Si pulsamos en cualquiera de ellos, ese objeto wombat  ejecutará la operación correspondiente. Por ejemplo, con move(), se moverá un cuadro a la derecha, con turnLeft(), se girará a la izquierda.

La palabra que aparece delante del nombre de los métodos (void, boolean, int) indica el tipo que tienen los valores que retornan al ejecutarlos (return type). Prueba a pulsar todos los métodos de la lista. ¿Qué observas?  Verás que hay dos tipos de métodos:

• los que tienen un return type ‘void’ (‘vacio’ en inglés) ejecutan una acción y no devuelven ningún resultado
• los que contestan con algún tipo de información. Con estos, estamos haciendo una pregunta al objeto:
  • canMove(): ¿puedes moverte?
  • foundLeave(): ¿has encontrado una hoja?
  • getLeavesEaten(): ¿cuántas hojas has comido?

  y devuelven distintos tipos de respuesta en un cuadro de diálogo:

  • boolean: valor ‘true/false‘ (es decir, ‘verdadero/falso’)
  • int: (número entero)

En la imagen de abajo vemos el ejemplo del resultado del método canMove(). Nos contesta ‘true‘, es decir, es verdad que el wombat puede seguir moviéndose porque no ha llegado a uno de los lados del cuadrado. Si movemos el objeto hasta el final e invocamos otra vez el método, veremos que nos contestará con un ‘false‘. Ese resultado lo puede utilizar el programa para decidir que el objeto gire y cambie de dirección su trayectoria. Lo veremos cuando analicemos el código Java.

También habrás observado que uno de los métodos, setDirection (que podemos traducir por ‘establecer dirección’), contiene una expresión entre los paréntesis. Nos indica que para ejecutarlo el método está esperando que le pasemos un parámetro, en este caso ‘direction‘ que debe ser de tipo ‘int’. Prueba con los valores 0,1,2 y 3 y verás como el wombat cambia su orientación. Estamos modificando el valor de un atributo o propiedad de este objeto (lo explicamos en el cuadro de abajo). Si introduces otro tipo de valor que no sea un nº entero (por ejemplo un nº decimal como 2,3 o una letra) te devolverá un mensaje de error.

Otra detalle que habrás visto en la lista de métodos, es la primera entrada  ‘heredado de Actor‘. Si pulsas ahí, verás una lista adicional de métodos que están definidos en la clase Actor y que automáticamente también tiene la clase Wombat como puedes comprobar  ejecutándolos. Tiene que ver con el mecanismo de la herencia (una clase más genérica es `padre’ de una más específica, la ‘hija’ y ésta recibe sus características), fundamental en la POO y que explicaremos más adelante.

En próximos posts, accederemos al código Java de este programa para comprender  mejor como se implementan los conceptos que estamos presentando y generaremos un juego con objetos y reglas nuevas a partir de uno ya desarrollado. Mientras, si tienes curiosidad, abre el menú contextual de la clase Wombat y elige la opción ‘Abrir el editor‘. ¿Puedes entender cómo está construida y localizar los métodos de los que hemos hablado? Inténtalo, es un buen ejercicio…