En la entrada de hoy hablaremos sobre jQuery, un framework o librería cuyo uso se está expandiendo debido a su sencillez y la comunidad quye hay detrás sustentándolo. Esta primera entrada es una introducción a Jquery y los conceptos básicos de la programación web y se irá desarrollando en otros futuros artículos. Pero como sabemos que somos unos enamorados del conocimiento, os dejo de dar la murga y empezamos a hablar sobre este framework.
1. jQuery: Orígenes
Como hemos indicado en la introducción del artículo, jQuery es un framework o biblioteca creada inicialmente por John Resig y cuyo equipo ha ido creciendo a lo largo del tiempo. Tenéis aquí la API deJquery para encontrar más información (en inglés).Gracias a jQuery se ha hecho sencillo la manera de trabajar con Javascript por lo que permite leer y modificar el DOM, manejar eventos, hacer animaciones y un largo etcétera entre el que cabe destacar la interacción con AJAX. Es software libre y de código abierto bajo las licencias MIT y pública general de GNU v2. Además nos solventa los dos grandes problemas que nos encontramos con Javascript: reduce la complejidad y es compatible con todos los navegadores. Esto último quiere decir que lo que programes con JQuery funcionará tanto en un IE como en otros como FireFox, Opera, etc.
Os animo a probarlo porque personalmente estoy muy contento con su uso.
2. ¿Qué necesito para usar jQuery?
Lo primero de todo tener conocimientos de HTML , CSS y Javascript, no es necesario conocerlos en profundidad pero sí tener una idea clara de lo más básico. Por eso vamos a hablar de ellos un poco:2.1 HTML
HTML son las siglas en inglés de HiperText Makup Language o lenguaje de marcado de hipertexto si lo preferís castellanizar. Permite "programar" páginas web dándole una estructura mediante etiquetas de las cuales destacamos las siguientes:<!DOCTYPE html><html> <head> <title></title> <link [parámetros] /> <script [parámetros] /> </head> <body>[resto de componenetes como cabeceras, div, header, footer, etc]</body></html>Vamos a desgranar esto un poquito (por cierto, que todas ellas son obligatorias si queremos que la página web se muestre correctamente):
- Etiqueta DOCTYPE: Indica al navegador web la manera de mostrar la página.
- Etiqueta html: Indica al navegador que lo que va a leer será una página web.
- Etiqueta head: Es el encabezado de la página y permite informar al navegador del título de la página, metadatos que usan los motores de búsqueda para indezar la página, ficheros enternos que contiene código Javascript o directamente dicho código escrito y ficheros externos que contienen códigoCSS o directamente dicho código escrito .
Para referenciar los ficheros externos se usa la etiqueta link y para escribir el código directamente en la página la etiqueta script (para javascript) y style (para CSS).
- Etiqueta body: Indica al navegador web que lo que hay a continuación se mostrará por pantalla en el propio navegador. Dentro de esta etiqueta hay muchas otras para indicar tablas, párrafos y los demás componentes HTML de una página web.
2.2 CSS
CSS son las siglas en inglés de Cascading Style Sheets que en lengua cervantina se tradujo como hojas de estilo en cascada. CSS es un lenguaje de formato para construir diseños complejos y darle estilo a las páginas web. Permite crear estilos para toda una sección, porejemplo todo el body; un tipo de elemento en particular, por ejemplo los párrafos; o un elemento en particular. Todo ello es posible gracias a los selectores que veremos en una futura entrada.A continuación veremos un ejemplo de regla de estilo y explicaremos las partes que la componen:
p{ color:red;/*El color de las letras será rojo*/ font-size:2em;/*El tamaño de la letra será 2em*/}Analicemos esta regla de estilo:
- Selector: El selector es el que indica al navegador web a que elemento se le aplica el estilo, en este caso a p, que hace referencia al párrafo.
- Bloque de declaraciones: Es donde se declaran los formatos a aplicar al selector y se indican mediante llaves ({ }).
- Declaración: La declaración es la intrucción de formato a aplicar y está formada por el par propiedad : valor. En el ejemplo serían: color : red y font-size : 2em.
- Propiedad: Hace referencia a donde se va a aplicar el estilo.
- Valor: Indica que "tipo de estilo se va a aplicar".
¡Gracias por leerme!.
No hay comentarios:
Publicar un comentario