feed twitter facebook LinkedIn facebook

JavaScript » Acceder al hash de la URL con Javascript

enero 29, 2014 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Si miras una URL el fina de esta puede contener una palabra separada por un símbolo de almohadilla (#). Esto es lo que se conoce como elemento hash de la URL y nos sirve para posicionarnos dentro de una parte determinada de la página. Esto lo conseguimos de forma sencilla mediante HTML.

La URL miweb.html#elemento se va a posicionar en la página allí dónde utilicemos el siguiente código:

  1. <a name="elemento"></a>

Si quieres más información al respecto puedes leer el artículo Enlace a una parte concreta de la página el cual te resolverá todas tus dudas.

Pero, ¿cómo podemos acceder al hash de la URL con Javascript? Es decir, qué hacer si queremos controlar cuando el usuario llegue con una URL que contenga una etiqueta o elemento de hash.

La solución es bastante sencilla y es que en Javascript tenemos el objeto location, el cual hace referencia a la URL que maneja el navegador, este objeto nos va a facilitar acceder al hash de la URL con Javascript.

  1. locatio

En concreto tenemos una propiedad del objeto location llamada .hash (el nombre que ni pintado) que nos devuelve el hash de la URL.

  1. //Volvar el hash a la consola
  2. console.log(location.hash;)

Como podemos ver, el uso de la propiedad location.hash nos facilita el acceso al hash de la URL con Javascript. Eso sí, solo tenemos que tener cuidado con una cosa, y es que no nos devuelve el elemento correspondiente con el hash, si no que nos devuelve el elemento precedido de la almohadilla.

Así de la URL

http://lineadecodigo.com/#acerca-de

El objeto location.hash nos devolverá:

#acerca-de

Ahora ya solo queda decidir qué hacer con el hash. Por ejemplo mostrar un contenido u otro, mostrar una pestaña u otra,... ¿qué más casos se te ocurren para utilizar la propiedad hash en Javascript?

Conversación » Conversaciones sobre Programación. Build 2014.01

enero 28, 2014 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

Hemos empezado el 2014 un poco trastabillados, pero ya estamos aquí con un nuevo resumen de los grupos de conversaciones sobre programación. Nuestro primero resumen del año, nuestra Build 2014.01.

Estamos muy contentos viendo la cantidad de gente que está en los grupos. Algunos de ellos ya por cifras cercanas a los 15.000 usuarios. Y aunque el SPAM nos haga un poco la puñeta vemos que siguen siendo muy útiles para la gente. Algo que nos alegra mucho.

Estamos recibiendo avalancha de enlaces, así que aquí pondremos un pequeño (o grande, dependiendo de la calidad) de los enlaces que realmente aporten una gran calidad a los grupos de conversación.

Recordar que hay una serie de normas de comportamiento para los grupos de conversaciones sobre programación que se deben de acatar. Por favor, no dejéis de leerlas.

Por cierto, ¿Sabes cuantos grupos de Conversación en Español tenemos?

Las cosas interesantes que hemos visto en los grupos de conversaciones sobre programación son:

Si quieres que tu enlace esté aquí, solo tienes que crear contenido de calidad, compartirlo en los grupos de conversación o indicarlo en los comentarios.

Y para despedirnos, entrar en vuestros pensamientos... no digáis que alguna vez no habéis soñado así...

software-engineers

Más en el próximo resumen. Mientras, seguir utilizando los grupos de conversación.

Linea de Codigo » Feliz 2014

enero 2, 2014 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Un nuevo año y nuevos retos por delante. Desde Línea de Código desear lo mejor para todos los que nos acompañáis día tras día. Que todos vuestros proyectos se cumplan... Disfrutemos juntos de este nuevo año.

¡¡ Feliz 2014 !!

Puedes ver el vídeo en http://www.youtube.com/watch?v=S_cmT5A7h44

HTML » Vídeo para crear tu primera página web

diciembre 22, 2013 por Víctor Cuervo 1 Comentario Imprimir Imprimir

En este vídeo tutorial vamos a ver cómo puedes crear tu primera página web con el lenguaje HTML. Para ello revisamos cuales son los primeros pasos y explicamos los elementos básicos del lenguaje HTML que nos permitan crear tu primera página web.

Espero que os guste y os sea útil el vídeo tutorial...

Puedes ver el vídeo de cómo crear tu primera página web en http://www.youtube.com/watch?v=gCK_sDaoxiA

HTML » Listas de definiciones en HTML

diciembre 21, 2013 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Quizás una de las listas más desconocidas son las listas de definiciones en HTML, ya que lo normal es maquetar mediante listas ordenadas o listas desordenadas.

Las listas de definiciones en HTML nos permiten crear listas con pares de término/definición. Algo así como un glosario o diccionario.

La estructura básica de las listas de definiciones en HTML se construye mediante el elemento DL.

  1. <dt>Termino 1</dt>
  2. <dd>Definición 1</dd>
  3. <dt>Término 2</dt>
  4. <dd>Definición 2</dd>
  5. ...
  6. <dt>Término N</dt>
  7. <dd>Definición N</dd>
  8. </dl>

Dentro de la estructura del elemento DL encontramos dos elementos, el primero es DT el cual alberga el término que vamos a explicar y DD dónde indicamos la definición de dicho término.

Así que encontramos siempre estos dos pares de elementos DT y DD. Para ver el funcionamiento de las listas de definiciones en HTML vamos a ver como crear un pequeño diccionario de palabras con su definición asociada.

De esta manera el código que generamos para nuestra lista de definiciones será el siguiente:

  1. <dt>Pizpireta</dt>
  2. <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  3. <dt>Pulular</dt>
  4. <dd>Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.</dd>
  5. <dt>Concupiscencia</dt>
  6. <dd>En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.</dd>
  7. </dl>

Este código para el manejo de listas de definiciones en HTML generará lo siguiente en pantalla:

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.

Mediante código CSS podemos modificar la visualización de las listas de definiciones en HTML si no nos convence la presentación por defecto del navegador.

HTML » Hola Mundo en HTML

diciembre 19, 2013 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Revisando todos los artículos de Línea de Código hemos caído que no teníamos uno sobre Hola Mundo en HTML. Y eso no podíamos dejarlo pasar. En este artículo sobre Hola Mundo en HTML vamos a ver como crear nuestra primera página web HTML.

Antes de empezar necesitamos tener un editor de textos par crear la página. Para ello nos vale cualquiera, ya sea el Notepad++, Sublime Text u otros más avanzados como Dreamweaver.

Lo primero que tenemos que hacer es crear un fichero con la extensión .html. Lo vamos a llamar como holamundo.html. El contenido de dicho documento será texto.

Definición de tipo documento

La primera línea del documento Hola Mundo en HTML va a ser la declaración de documento HTML. Esta declaración lo que indica es que el contenido del fichero es de tipo HTML.

  1. <!doctype html>

Estructura principal

Lo siguiente será la estructura principal del documento, la cual se representa con el elemento HTML.

  1. <html>...</html>

El documento tiene dos partes bien diferenciadas: cabecera y cuerpo.

Cabecera del documento HTML

Por un lado la cabecera del documento HTML la cual representamos con el elemento HEAD. Esta parte no tiene información visible de la página, simplemente contiene información relativa al documento.

  1. <!doctype html>
  2. <head></head>
  3. </html>

Por ejemplo nos vamos a encontrar la declaración de la codificación del documento. En este caso vamos a indicar que el documento es de tipo utf-8. Esto lo hacemos mediante el elemento meta, al cual le asignamos el atributo charset="uft-8".

  1. <!doctype html>
  2. <meta charset="uft-8"/>
  3. </head>
  4. </html>

Otro elemento que encontramos en la cabecera es el título de la página. El título se visualiza, normalmente, en la barra del navegador web. El elemento que define el título es TITLE.

  1. <!doctype html>
  2. <meta charset="uft-8"/>
  3. <title>Hola Mundo en HTML</title>
  4. </head>
  5. </html>

Cuerpo del documento HTML

El cuerpo del documento es la parte que se va a visualizar en el navegador web. Para limitar el cuerpo del documento HTML vamos a utilizar el elemento BODY.

  1. <!doctype html>
  2. <meta charset="uft-8"/>
  3. <title>Hola Mundo en HTML</title>
  4. </head>
  5. </body>
  6. </html>

En nuestro primer documento Hola Mundo en HTML vamos a insertar el elemento H1 para poner un titular y un texto que indique Hola Mundo en HTML es nuestro primer documento en HTML.

  1. <!doctype html>
  2. <meta charset="uft-8"/>
  3. <title>Hola Mundo en HTML</title>
  4. </head>
  5. <h1>Hola Mundo</h1>
  6. Mi primera página en HTML.
  7. </body>
  8. </html>

De esta forma ya tenemos completo nuestro primer ejemplo con el Hola Mundo en HTML.

HTML » Listas desordenadas en HTML

diciembre 17, 2013 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Las listas desordenadas en HTML son aquellas que muestran sus elementos precedidos de un decorador, conocido como viñeta. Las listas desordenadas en HTML se construyen mediante el elemento UL.

La estructura de un elemento UL es la siguiente:

  1. <ul> ... </ul>

Cada uno de los elementos que están dentro de las listas desordenadas en HTML se construyen mediante el elemento LI. Así la estructura que tendremos se parecerá a lo siguiente:

  1. <li>Elemento 1</li>
  2. <li>Elemento 2</li>
  3. ...
  4. <li>Elemento N</li>
  5. </ul>

En este caso vamos a crear una lista de frutas mediante las listas desordenadas en HTML. El código que tendremos que generar es:

  1. <li>Naranja</li>
  2. <li>Manzana</li>
  3. <li>Pera</li>
  4. <li>Sandía</li>
  5. <li>Platano</li>
  6. </ul>

Vemos que cada elemento de la lista desordenada empieza y termina con el elemento elemento LI.

El resultado de este código hará que se visualice lo siguiente:

  • Naranja
  • Manzana
  • Pera
  • Sandía
  • Platano

Si quisiésemos cambiar el tipo de viñeta que se muestra en las listas desordenadas en HTML deberemos de acudir al lenguaje CSS, mediante el cual podremos poner círculos, cuadrados,... incluso imágenes como hitos de las listas desordenadas.

HTML » Listas ordenadas en HTML

diciembre 15, 2013 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

En este ejemplo vamos a ver como podemos crear listas ordenadas en HTML. Las listas ordenadas en HTML nos sirven para mostrar una lista de elementos con un orden. Para ello en HTML se visualiza como una lista, anteponiendo a cada uno de los elementos el orden que tiene en la lista.

El elemento que nos permite crear listas ordenadas en HTML es OL.

  1. <ol>...</ol>

Y cada uno de los elementos de las listas ordenadas en HTML se establecen mediante el elemento LI.

  1. <li>Elemento 1</li>
  2. <li>Elemento 2</li>
  3. ...
  4. <li>Elemento N</li>
  5. </ol>

Si lo que queremos es mostrar una lista ordenada con las provincias españolas atendiendo al número de habitantes tendremos que utilizar el siguiente código HTML:

  1. <li>Madrid</li>
  2. <li>Barcelona</li>
  3. <li>Valencia</li>
  4. <li>Alicante</li>
  5. <li>Sevilla</li>
  6. </ol>

Cada uno de los elementos va dentro del elemento elemento LI y todos los elementos los hemos anidados en la lista ordenada, es decir, dentro del elemento OL.

El resultado de la lista ordenada en HTML que tendremos por pantalla será el siguiente:

  1. Madrid
  2. Barcelona
  3. Valencia
  4. Alicante
  5. Sevilla

Vemos que delante de cada uno de los elementos de la lista ordenada aparece el número de su orden.

Espero que os haya servido el ejemplo para poder montar vuestras listas ordenadas en HTML.

HTML » Vídeo sobre como crear enlaces en HTML

diciembre 15, 2013 por Víctor Cuervo 1 Comentario Imprimir Imprimir

En este nuevo vídeotutorial de Línea de Código vamos a ver un vídeo sobre como crear enlaces en HTML. En el vídeo explicamos como se puede crear enlaces en HTML a otra página, a un servidor web o al contenido concreto dentro de una página.

Además veremos qué tenemos que hacer parar crear enlaces en HTML que permitan abrir una nueva ventana o pestaña con el contenido.

Sin más os dejo con el vídeo para crear enlaces en HTML. Espero que os guste...

Puedes ver el vídeo en http://www.youtube.com/watch?v=TumSNGO4nJQ

MongoDB » Consultas menor que en MongoDB

diciembre 9, 2013 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Si era sencillo realizar consultas mayor que en MongoDB, igual de sencillo es realizar consultas menor que en MongoDB. Solo tenemos que saber qué operador utilizar, ya que la dinámica será la misma.

El conjunto de datos del que partimos para las consultas menor que en MongoDB es nuestra colección de ciudades:

{
	"_id" : ObjectId("525ab02733b01a66a9dcbc5b"),
	"ciudad" : "Madrid",
	"habitantes" : 3233527
}
{
	"_id" : ObjectId("525ab02733b01a66a9dcbc5c"),
	"ciudad" : "Barcelona",
	"habitantes" : 1620943
}
{
	"_id" : ObjectId("525ab02733b01a66a9dcbc5d"),
	"ciudad" : "Valencia",
	"habitantes" : 797028
}
{
	"_id" : ObjectId("525ab02733b01a66a9dcbc5e"),
	"ciudad" : "Sevilla",
	"habitantes" : 702355
}
{
	"_id" : ObjectId("525ab02733b01a66a9dcbc5f"),
	"ciudad" : "Zaragoza",
	"habitantes" : 679624
}

Como bien sabemos, para poder realizar una consulta en MongoDB debemos de utilizar el método find(). Y será dentro de los parámetros del metro dónde ejecutemos el filtro para conseguir nuestro objetivo de obtener consultas menor que con MongoDB.

  1. db.ciudades.find();

Los operadores menor que en MongoDB son $lt y $lte. La estructura JSON será la siguiente:

{$lt:1000000}

Esta estructura la tenemos que aplicar a un campo, por ejemplo al campo habitantes:

{habitantes:{$lt:1000000}}

Ahora montamos la consulta con el método find(). El resultado será un cursor de documentos, así que asignamos la salida a un cursor:

  1. cursor = db.ciudades.find({habitantes:{$lt:1000000}});

Solo nos quedará recorrer el cursor para ver los resultados:

  1. while (cursor.hasNext()) {
  2. printjson(cursor.next());
  3. }