Incrustación de fuentes con CSS3

CSS3 tiene la capacidad de embeber las fuentes dentro de la página web. Esto abre a un gran abanico de tipografías y evita las restricciones de las propias fuentes que vienen definidas en el estándar de CSS.

Se debe tener en cuenta que para que la fuente sea compatible con todos los navegadores se debe añadir la fuente en diferentes formatos:
.TTF o .OTF – la mayoría de los navegadores admiten estos tipos.
.EOT – Microsoft creó hace unos años este formato. El problema es que solo se visualizan con internet explorer. Lo bueno, es que es compatible desde IE4.
.SVG – Para otros navegadores como opera o safari (incluida su visualización en el iphone o el ipad)
.WOFF (Web Open Font Format) – Soportado hasta ahora por Firefox y Opera por el resto en futuras versiones.

@font-face {
     font-family: "MiFuente";
     src: url('Chunkfive.eot');
     src: local('ChunkFive'),local('ChunkFive'),
          url('Chunkfive.woff') format('woff'),
          url('Chunkfive.otf') format('opentype'),
          url('Chunkfive.svg#ChunkFive') format('svg');
}

Para conseguir fuentes hay una gran variedad de recursos por la red donde encontrarlas p.e. Google Font Directory. Además, hay aplicaciones online que permiten convertir p.e. una fuente en formato TTF a cualquier otro formato en Font2Web.

Nuevos selectores en CSS3

En CSS3 se han añadido nuevos selectores, que se unen a los ya existentes en CSS2. A continuación pueden verse algunos de ellos:

Selectores de atributos
A partir del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
a[href^=»http:»] { … }
Fin del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
a[href$=».com»] { … }
Cualquier sub-cadena del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
img[src*=»fotos»] { … }

Combinar hermanos
Este selector permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 se escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento h3 independientemente de qué elementos se encontraban en el medio.


Los pseudo-elementos
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3 (aunque cambia su sintaxis se utiliza :: en vez de : delante del nombre de cada pseudo-elemento:
::first-line, selecciona la primera línea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado (este es nuevo en CSS3).

Los pseudo-clases
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas, entre las cuales se encuentran:
elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
:not(), que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector.

Elementos y atributos nuevos para formularios con HTML 5

En HTML 5 se han añadido nuevos elementos para emplear en los formularios. Éstos presentan nuevas funcionalidades, A continuación, se muestra un listado con los distintos types que se pueden usar en formularios con HTML 5:

text – Para introducir texto, simplemente.
search – Específico para input en un buscador.
url – Específico para direcciones de página web. Requiere http:// o http: simplemente.
tel – Se supone que para números de teléfono aunque no he conseguido que haga nada.
email – El nombre lo dice.
password – Escribe el contenido en asteriscos.
date – Para introducir un fecha (mes, día y año).
time – Para introducir una hora en formato 24 horas (horas, minutos y segundos).
datetime – Para introducir fecha y hora.
datetime-local – Igual que el anterior pero sin posibilidad de indicar zona horaria, ya que se entiende que es la local.
month – Para indicar el mes de un año.
week – Para indicar una semana de un año.
number – Específico para numeros.
range – Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min=»10″ y un max=»12″ (los números son de ejemplo.)
checkbox – Para seleccionar y deseleccionar.
radio button – Para seleccionar, uno obligatorio.
color – Para seleccionar colores.

Nuevos atributos de HTML 5:
– Los elementos de fecha y hora permiten atributos max y min. Para indicar fecha/hora máxima y mínima.
– Required que nos permite indicarle al formulario que ese campo es obligatorio.
– Placeholder permite introducir un texto de ejemplo en el cuadro de texto. De esta forma se da a entender como tiene que ser el formato de lo que se introduce.
– List nos permite asociar una lista a un cuadro de texto. El valor de este atributo list, debe coincidir con el identificador de una lista definida con una etiqueta datalist (esta etiqueta también es nueva en HTML 5. El resultado es un efecto muy parecido a un select pero con las ventajas de un text.
– Autofocus hace que un determinado elemento tome el foco.

Cómo se ve, se pueden validar formularios sin ningún esfuerzo y sin necesidad de javascript. Ya que se encarga de realizar la validación el propio formulario. Incluso se pueden añadir funcionalidades con css en función de si se ha rellenado correctamente o no. Tal que así:

Este codigo modifica los colores de todos los input, que se encuentran dentro de un form cuyo id es «idForm», cuando son válidos o inválidos.

Tabla periódica con los elementos de HTML 5

Han creado un nuevo recurso para HTML 5 llamado Periodic Table of the Elements, muestra una tabla interactiva con los 104 elementos que figuran en el borrador de HTML5 además de 2 elementos (track y device) propuestos para formar parte y que han sido marcados con un asterisco mientras se decide su aceptación.

Cuando seleccionamos cada uno de los elementos de la tabla aparece una breve descripción en inglés además de uno o más enlaces hasta la página del World Wide Web Consortium (W3C) y otros portales sobre desarrollo web como w3schools o HTML5 Doctor.

Click para acceder a la tabla

Utilizar tags de HTML 5 en navegadores que no los soportan.

Para que funcionen las tags de html 5 en navegadores que no lo soportan (p.e. internet explorer 8 y anteriores). Basta con añadir el siguiente fragmento de javascript:

< script type="text/javascript">
   document.createElement("nav");
   document.createElement("header");
   document.createElement("footer");
   document.createElement("section");
   document.createElement("article");
   document.createElement("aside");
   document.createElement("hgroup");
< /script>

Además, se debe añadir la siguiente regla en la hoja de estilos.

nav, header, footer, section, article, aside, hgroup{
    display: block;
}

Manejador de eventos con DOM (addEventListener y removeEventListener)

El método addEventListener nos permite incluir un manejador de evento. La sintaxis de addEventListener es la siguiente:

elemento_que_se_escucha.addEventListener('evento', 
                              función_a_lanzar, booleano);

elemento_que_se_escucha – es cualquier elemento presente en un documento al que se quiere asociar el evento.
evento – es el suceso ocurrido sobre el elemento (click, load,…).
función_a_lanzar – es cualquier función definida que queramos que se ejecute cuando ocurra el evento.
booleano – es un valor que define el orden del flujo de eventos. (*NOTA 1)

Si se quiere escuchar un evento sólo una vez y luego elimnaro se debe utilizar el método removeEventListener:

elemento_que_se_escuchaba.removeEventListener('evento', 
                                función_a_anular, booleano);

NOTA 1: Explicación del parámetro booleano del método addEventListener con un ejemplo.
Supongamos que tenemos esto:

< body >
   

      CLICK
   
< /body >

Cuando hacemos clic en el botón no sólo lo estamos haciendo sobre él, sino sobre los elementos que lo contienen en el árbol del DOM, es decir, hemos hecho clic además sobre el elemento body y sobre el elemento div1. Sí sólo hay una función asignada a una escucha para el botón no hay mayor problema, pero si además hay una para el body y otra para el div, ¿cuál es el orden en que se deben lanzar las tres funciones?

Para contestar a esa pregunta existe un modelo de comportamiento, el flujo de eventos (inglés). Según éste, cuando se hace clic sobre un elemento, el evento se propaga en dos fases, una que es la captura —el evento comienza en el nivel superior del documento y recorre los elementos de padres a hijos— y la otra la burbuja —el orden inverso, ascendiendo de hijos a padres—. En un diagrama sería algo así:

Así, el orden por defecto de lanzamiento de las supuestas funciones sería body-div-button.

Una vez visto esto, podemos comprender el tercer parámetro de addEventListener, que lo que hace es permitirnos escoger el orden de propagación:
true: El flujo de eventos es como el representado, y la fase de captura ocurre al lanzarse el evento. El orden de propagación para el ejemplo sería, por tanto, el indicado, body-div-button
false: Permite saltar la fase de captura, y la propagación seguiría sólo la burbuja. Así, el orden sería button-div-body.

NOTA 2: En internet explorer no funciona en las versiones anteriores a la 7 (incluida).

Fuente

Resumen DOM (Document Object Model)

Un documento HTML presenta una estructura de árbol constituido por nodos. Estos nodos pueden pertenecer a uno de los siguientes tipos:
Elemento – Estos nodos representan los elementos del documento (br, input, select, p,…).
Atributo – Los nodos atributos representan las propiedades de los elementos.
Texto – Fragmento de texto del documento HTML.

Para obtener los elementos se pueden usar los siguientes métodos: getElementById, getElementsByTagName y getElementsByClassName. (El primero devuelve el elemento que tiene el id solicitado mientras que los dos últimos devuelven un array de elementos seleccionándolos por el tipo de tag html y de class respectivamente)
Y para trabajar con sus atributos: getAttribute y setAttribute

Por otro lado, se pueden utilizar los siguientes métodos para recorrer esa estructura de árbol:
parentNode – Obtiene el nodo padre del nodo actual.
childNodes – Obtiene los nodos hijos del nodo actual (devuelve un array). Entre sus nodos hijos tiene en cuenta los nodos de texto.
firstChild – Obtiene el primer hijo del nodo actual.
lastChild – Obtiene el último hijo del nodo actual.
previousSibling – Obtiene el hijo del nodo padre anterior al nodo actual.
nextSibling – Obtiene el hijo del nodo padre siguiente al nodo actual.

También se pueden utilizar las siguientes propiedades:
nodeName – El nombre del nodo, que se define dependiendo del tipo de nodo. (Se corresponde con la etiqueta HTML en el caso de un nodo elemento o #text si se trata de un nodo texto).
nodeValue – El valor del nodo, que se define dependiendo del tipo de nodo.
nodeType – Un número que representa el tipo de nodo del que se trata. Un número del 1 al 12 (1 para nodos elemento, 2 para nodos atributos, 3 para nodos texto).

Métodos para crear, eliminar y reemplazar nodos:
createElement – Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado (Pertenece a Document) (var elemento = document.createElement(tag))
createTextNode – Crea un nodo texto. (Pertenece a Document)
cloneNode – Crea un nodo idéntico a otro existente. (var clonedNode = nodo_padre.clone(nodo_hijo))
appendChild – Añade un nodo como hijo de otro. Sirve para incorporar el nuevo nodo al árbol del documento. (nodo_padre.appendChild(nodo_hijo))
insertBefore – Inserta un nodo antes de otro en el árbol del documento. (nodo_padre.insertBefore(nuevo_nodo, viejo_nodo))
removeChild – Elimina un nodo hijo. (nodo_padre.removeChild(nodo_hijo))
replaceChild – Reemplaza un nodo hijo. (nodo_padre.replaceChild(nodo_hijo))

NOTA: Por último, tenemos el método innerHTML que se puede utilizar como alternativa a DOM. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo.

Calcular los días que tiene un mes en javascript

Ejemplo donde se puede ver como se calculan los días que tiene un mes en un año determinado. Utilizando para ello javascript:

function daysInMonth(humanMonth, year) {
  return new Date(year || new Date().getFullYear(), humanMonth, 0).getDate();
}

De esta manera ejecutando: daysInMonth(2, 2009); se obtendría 28.
Y ejecutando: daysInMonth(2, 2008); sería 29.

Fuente

Objeto history en javascript

Este objeto guarda la información sobre los URLs que el usuario ha visitado dentro de una ventana determinada, es decir guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia delante o hacia atrás en dicha lista.

Propiedades

CURRENT: Cadena que contiene la URL completa de la entrada actual en el historial.

NEXT: Cadena que contiene la URL completa de la siguiente entrada en el historial.

LENGTH: Entero que contiene el número de entradas del historial (i.e., cuántas direcciones han sido visitadas).

PREVIOUS: Cadena que contiene la URL completa de la anterior entrada en el historial.

Métodos

BACK(): Vuelve a cargar la URL del documento anterior dentro del historial.

FORWARD() Vuelve a cargar la URL del documento siguiente dentro del historial.

GO(«posición» | «URL destino»): Vuelve a cargar la URL del documento especificado por posición dentro del historial, la posición puede ser un entero, en cuyo caso indica la posición relativa del documento dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte de una URL que esté en el historial.

Recuperar contraseña WEP con WifiWay 3.4 – utilizando airoscript

Una forma de conseguir recuperar tu contraseña WEP de tu red wifi es usar la herramienta airoscript de wifiway. Para ello basta con realizar estos 15 pasos:

1 – Ir a Menu / WifiWay / Suite aircrack-ng / airmon-ng (start mode monitor)

2 – Seleccionar WLAN0 ( Te saldrá la frase «monitor mode enabled on mon0». Eso significa va todo bien. Se pueden cerrar ya todas la ventanas que estén abiertas.)

3 – Ir a Menu / WifiWay / Suite aircrack-ng / airoscript wifiway nuevo

4 – Seleccionar la opción mon0

5 – Seleccionar la opción escanear

6 – Seleccionar la opción WEP

7 – Seleccionar la opción todos los canales. Y dejar un rato.
Hay que tener en cuenta que dependiendo de los Beacons y la potencia, será más fácil/dificil recuperar la contraseña.
( más Beacons -> antes se saca la contraseña; menos negativo -> más potencia)

………………………………..

8 – Seleccionar la opción seleccionar objetivo

9 – Seleccionar la opción que nos marca la red de la que hemos perdido la contraseña

10 – Seleccionar la opción no cliente

11 – Seleccionar la opción ataques

12 – Seleccionar la opción falsa auth->automática. Dejarlo trabajar, suelen hacer falta 200.000/500.000 frames.

………………………………..

13 – Seleccionar la opción crackear

14 – Seleccionar la opción aircrack

15 – Seleccionar la opción aircrack-ng PTW

Si esto no sirviese siempre se podría ir probando otras opciones o incluso otras herramientas, ya que dentro del wifiway vienen otras muchas herramientas.