En el curso (online y presencial) de Creación de Aplicaciones API de JavaScript y ArcGIS Server que se imparte en TYC GIS, se enseña cómo desarrollar potentes e innovadores visores cartográficos. Uno de los puntos a tener en cuenta de esta API de ESRI es que ha desbancado a otras con un lenguaje de programación tipo Flex o Silverlight y es la que se encuentra en la actualidad en una constante evolución. Por eso, para personas que se estén planteando empezar y aprender de este tipo de tecnologías para dar un salto en el desarrollo con la programación, la recomendación es JavaScript.

Además integra otro tipo de tecnologías como HTML5 and CSS3 que permiten que el diseño de nuestra aplicación “web mapping” sea mucho más innovadora y nos ofrecen muchas más herramientas y posibilidades para mejorar la visualización de nuestros datos.

lenguajes_1

Pero estamos empezando en esto, si ya la palabra JavaScript nos asusta, ¿qué significa HTML y CCS? ¿qué funciones tiene cada uno dentro de la API? ¿cómo los utilizo?. Bien, pues antes que nada , vamos a distinguir sus características:

A principio de los años noventa, el lenguaje HTML era el único idioma disponible en la web. Ha cambiado mucho desde entonces. A continuación vamos a distinguir los tres tipos de lenguaje que describimos en este post:

1. El lenguaje HTML (HyperText Markup Language) nos aporta la estructura básica de los sitios, mejorada y modificada por otras tecnologías como CSS y JavaScript que vemos a continuación. Es el lenguaje famoso por sus etiquetas conocido por todos los que se han inmerso en el desarrollo de páginas web.

lenguajes_2

2. Por otro lado, CSS u Hojas de Estilo en Cascada (Cascading Style Sheets) se utiliza para controlar la presentación, el formato, y el diseño de nuestra aplicación. Gracias a ella podemos dar forma al estilo que queremos que se muestre.

lenguajes_3

3. JavaScript se utiliza para controlar el comportamiento de los diferentes elementos, esto es, aporta funcionalidad, dinámica, a nuestros elementos.

lenguajes_4

Muy bien, ya tenemos claro los diferentes conceptos, pero cómo integro yo los tres tipos de lenguajes en mi nuevo visor. El HTML ya vemos que es el lenguaje de etiquetas, ¿pero cómo podemos integrar los estilos CSS en nuestra aplicación?

Pues existen tres formas, pero antes que nada tenemos que tener en cuenta que una regla CSS tiene dos partes fundamentales: un selector (en este ejemplo un elemento HTML “p” representa un párrafo, existen otros tipos de selectores como “id”, “clases”, etc.) y una o más declaraciones (en este caso “color” y “text-align” son las propiedades y “red” y “center” sus valores respectivos). Cada declaración acaba con un punto y coma:

lenguajes_5

Sabiendo esto vamos a averiguar cómo integrar nuestra hoja de estilo CSS:

1. Hoja de estilos externa:

Una hoja de estilos externa es simplemente un conjunto de reglas CSS que están guardadas en un fichero de texto con extensión .css

Este fichero es entonces enlazado donde queramos aplicar los estilos definidos en él mediante el uso de la etiqueta HTML <link>. Por ejemplo:

lenguajes_6

Ojo a la referencia de la nueva versión de la nueva versión de la API Javascript de ESRI 4.x cuyo archivo .css ya no es esri.css sino main.css

lenguajes_7

2. Hoja de estilos interna:

Todas las reglas CSS están definidas en la etiqueta <head> y están encerradas en una etiqueta <style> como se puede ver en el código de ejemplo que se muestra a continuación:

lenguajes_8

3. Dentro de los elementos HTML:

El último método para definir reglas CSS es dentro de los elementos HTML. Este método no está recomendado porque mezcla los estilos con la presentación y es muy difícil de mantener.

lenguajes_9

Un consejo, si queremos ver el estilo de alguna página web, o visor, podemos comprobarlo con la extensión Firebug que nos ofrece el navegador Firefox (en entradas anteriores escribimos sobre él, podéis activarlo siguiendo las indicaciones que se muestran ahí). Cuando la tengamos activa, sólo tenemos que ir a la ventana “CSS” y podemos desplegar los estilos que allí se usan. Por ejemplo:

lenguajes_10

En próximas entradas mostraremos algunos ejemplos básicos para integrar estilos y comprender mejor el lenguaje CSS. Por supuesto, en el curso que te recomendamos en esta entrada, aprenderás mucho más.

Formación de calidad impartida por profesionales

JavaScript 3.x y ArcGIS Aplicaciones API