martes, 30 de julio de 2013

El tag

Uno de los espacios más polémicos de la web

Hablar de vídeo en internet es hablar de ciclos, de batallas campales entre los CEOs más influyentes en el mundo de tecnología, de la compleja estandarización de un codec o de un player. Hay un avance importante con el tag <video> pero esto apenas empieza y mucha de la historia seguramente se va a repetir nuevamente.
Regresemos en el tiempo al año 2004. No existía Youtube. Por lo mismo, si querías alojar y compartir en un navegador cualquier vídeo te enfrentabas a dramas de plataforma, de ancho de banda y de problemas de usabilidad para el usuario final.
Si encontrabas algún enlace que te llevara a ver videos en la web seguramente te sonarían los logos de Real Player, de Windows Media Player o incluso de Quicktime. Del lado del servidor los sysadmins tenían que pelear con Real Media Server, Windows Media Server que era parte del IIS y otro montón de opciones, pero era complicado unificar. Adobe por su parte había logrado importantes avances para que desde archivos .swf pudieras incorporar videos, pero no había un solo canal.
En el año 2005, 3 jóvenes dejaron de trabajar en Paypal y emprendieron el sueño de crear una plataforma
universal para compartir video. Ese año nace Youtube y el mundo fue un lugar más feliz.
Paralelamente, Adobe demostró que su esfuerzo para crear un sistema para reproducir vídeo iba a ser valorado y aprovecharía el dominio que su plugin de flash tenía en todos los navegadores del planeta.
Los sysadmins educaron a sus usuarios a crearse una cuenta en youtube y que dejaran de molestar con complejos servidores para alojar y reproducir vídeos. Todos hemos vivido más felices, Lady Gaga es cada
día más famosa y nyancat está educando a tus hijos.
En abril del 2010 una carta de Steve Jobs a sus súbditos (entiendase a todos los clientes de apple) sobre sus pensamientos de Flash arranca uno de esos nuevos ciclos donde una plataforma disruptiva que cada día ganaba mercado le daba la espalda al famoso plugin de Adobe en sus dispositivos móviles. Apple le prometía larga vida al HTML5 porque todo se podía resolver en temas de vídeo con un tag aprobado por el estándar. Hoy volvemos a tener una batalla de grandes empresas por el codec luego de que
están todos de acuerdo que el navegador lleva una opción amigable para incluir un elemento de video,
porque este elemento es tan importante como las imágenes.
Y podemos usar perfectamente el ejemplo de las imágenes para entender lo que pasa con el video.
Todos los navegadores permiten que en un documento HTML incluyas un tag <img> al cual debes decirle
la ruta a una imagen. Y la imagen puede ser un .jpg, un .gif, un .bmp o un .png (entre otros formatos).
Dependerá de la capacidad de tu navegador para reconocer todos los contenidos de esta imágen, interpretarla y mostrarla. Con el video pasa lo mismo.

lunes, 29 de julio de 2013

Reflecciones, gradientes y sombras

Si no has superado la web 2.0, puedes poner reflecciones a cualquier elemento HTML. Pero lo interesante es crear gradientes para fondos y sombras para cajas o texto, todo en una sola linea de código y con el mismo nivel de complejidad que logras con una sombra en Photoshop o Fireworks.

domingo, 28 de julio de 2013

Bordes redondeados

Sí. Con una instrucción2 puedes hacer que cualquier caja tenga bordes redondeados3 como quieras. Olvidate de crear múltiples divs, cortar pngs y otros temas arcaicos.

sábado, 27 de julio de 2013

Animaciones de transición y transformación

Las animaciones que antes lograbas con jQuery o Javascript ahora pueden ser logrados sólo con CSS1. Con una ventaja adicional, al hacerlo con CSS, las animaciones vendrán aceleradas por hardware. Mucho más veloces, sobre todo en dispositivos móviles.

viernes, 26 de julio de 2013

Opacidad, transparencia, canales alpha, contraste, saturación y brillo

Autodescriptivo. Vuelve lo que quieras transparente u opaco con una instrucción. Imágenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con sólo CSS.

jueves, 25 de julio de 2013

Columnas de texto

¿Sabes cómo se hacía antes que varios párrafos de texto se dividiera en columnas con HTML? No se podía. Ahora sólo requieres un atributo CSS para lograrlo. Y puedes controlar la cantidad de columnas, el espacio entre ellas, líneas de separación, etc.

miércoles, 24 de julio de 2013

Selectores CSS

¿Te ha tocado hacer un diseño donde una lista o tabla tiene algunos elementos en blanco y los otros en gris? Como una cebra. Antes, la única forma era hacerlo a mano o con un script del lado del server. Ahora, con CSS3, sólo tienes que especificar un color para “odd” y otro para “even” y listo. Igualmente, puedes crear estilos para el primer elemento y otro para el último. O estilos para etiquetas iguales con ciertos atributos diferentes en HTML. Y esto es muy compatible desde IE8.

martes, 23 de julio de 2013

Nuevas capacidades de CSS3

Antes de cualquier cosa, sabías que CSS3 también tiene logo de Super Heroe? Diseñar en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No sólo por la falta de compatibilidad con IE, sino porque cosas como bordes redondeados en tamaños dinámicos requiere múltiples divs, estilos y cuatro PNGs diferentes en el mejor de los casos. Ya no más, CSS3 es hermoso y trae para ti opciones que hacen el diseño estúpidamente fácil.

@font-face, @fucking-font-face
Es la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon, SiFR u otras cosas
de hippies. ¿Saben qué otra cosa? Esto funciona perfecto desde Internet Explorer 6 para arriba ¿Y saben
qué más? NADIE LO USA.

Importante, antes que enteder @font-face tienes que aprender a usar una maravilla que nos trajo
Google y que le hizo la vida más fácil a todos los amantes de la tipografía que estaban cansados de usar
Arial y Helvetica. Visita Google WebFonts y aprovéchalo en tus proyectos.

lunes, 22 de julio de 2013

Nuevas capacidades de Javascript - II

Web Sockets Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible usar implementaciones multiuser en Javascript como PubSubHubBub1. 

Arrastrar y soltar Vete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5. Puedes traer trozos de datos o archivos enteros. 

Geolocalización Mi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona en cualquier PC, no sólo en teléfonos Más adelante un capítulo dedicado a la geolocalización en la guía.

domingo, 21 de julio de 2013

Nuevas capacidades de Javascript - I

Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha recibido muchas habilidades nuevas. Esta es una lista de las más importantes. 

Web Storage Una cookie es la forma más casposa de guardar información en el lado del cliente. También es la única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor. Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que subir los KB que pesan todas las cookies que le hemos dado. 

Las cookies apestan. Web Storage soluciona este problema. 

Son variables que puedes guardar en el disco del usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB y no sólo texto. Cualquier tipo de datos cabe en un Storage. 

Web SQL Este me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer 9 declaró que no implementará Web SQL1 y la realidad es que Web Storage es más que suficiente para la mayoría de usos. Así que nada, esto por ahora no sirve. 

Web Workers ¿Ustedes sabían que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso. Web Workers permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas complejas más veloces gracias al multithreading.

sábado, 20 de julio de 2013

¿Pero puedo usar esto en serio ahora mismo? - II

¿Parece que IE tiene mucho mercado, a pesar de estar cediendo, verdad? Bueno, miremos más de cerca a IE a ver quién usa realmente IE6:
Sólo el 14% usa IE6. Y si el total de usuarios de IE es del 49%, eso significa que los usuarios de IE6, en total, son solamente el 6.8% de las visitas. En síntesis:
  FUCK IE6!! No tienen por qué sufrir. Soportar IE6 es más caro que las visitas que aporta. Manden al carajo IE6 y vivan el feliz mundo de HTML5.

viernes, 19 de julio de 2013

¿Pero puedo usar esto en serio ahora mismo? - I

El mejor sitio que puede responderte eso es CanIUSe.com1. Donde encontrarás una lista de todas las capacidades de HTML5, CSS3 y el nuevo Javascript, junto a una tabla de compatibilidad. Sin embargo, no te asustes demasiado si ves muchos cuadros rojos. Recuerda los scripts que mencioné arriba como IE-CSS3 o HTML5 Enabling Script. Gracias a ellos, muchos de esos rojos se convierten en verdes.
Aun así, muchos dirán que IE6 sigue siendo la razón por la que no usan HTML5. Bueno, quiero mostrarles las estadísticas de una semana de un sitio que no es sobre tecnología, sino una web de audiencia genérica, gente normal que usa la web. El público más general posible:

jueves, 18 de julio de 2013

Soporte HTML5 en navegadores viejos - II

Gracias a los grandes hackers del mundo:

ÐÐ HTML5 Enabling Script1: Permite usar las etiquetas semanticas dentro de IE6, 7 y 8 como si fueran
divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible
agregarles diseño a ellas o cualquier elemento dentro de ellas.
Para utilizarlo debes incluir esta línea en el HEAD de tu documento.

<!--[if lt IE 9]>
<script src=”http://HTML5shim.googlecode.com/svn/trunk/HTML5.js”>

</script>

<![endif]-->

ÐÐ IE-CSS32: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8. Es magia negra, les digo!

ÐÐ Modernizr1: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para
multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o
alternativa.

miércoles, 17 de julio de 2013

Soporte HTML5 en navegadores viejos - I

La segundo revolución de la web y el soporte de HTML5 en navegadores viejos 

HTML5 trae al mundo del desarrollo web habilidades que, siendo el 2010, era casi vergonzoso no tener.
Cosas como <video> y <canvas> eran más que necesarias. Sin embargo, no es el primer gran cambio
de internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el
objeto XmlHttpRequest1, más conocido como AJAX2.

Lo que pocos saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999. Sí, el navegador responsable de detener la innovación en los estándares web también es el creador de la innovación más importante sin la cual, cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían sido inviables.

Internet Explorer, claro, es también la razón de la poca adopción de HTML5. Sin embargo, hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE.

martes, 16 de julio de 2013

Tabla ARP (caché ARP)

Cada ordenador almacena una tabla de direcciones IP y direcciones físicas. Cada vez que formula una pregunta ARP y le responden, inserta una nueva entrada a su tabla. La primera vez que A quiera enviar un mensaje a B tendrá que difundir previamente una pregunta ARP, tal como hemos visto. Sin embargo, las siguientes veces que A envíe mensajes a B ya no será necesario realizar nuevas preguntas, ya que A habrá almacenado en su tabla la dirección física de B. Sin embargo, para evitar incongruencias en la red debido a posibles cambios de direcciones IP o adaptadores de red, se asigna un tiempo de vida de cierto número de segundos a cada entrada de la tabla. Cuando se agote el tiempo de vida de una entrada, ésta será eliminada de la tabla.
Las tablas ARP reducen el tráfico de la red al evitar preguntas ARP innecesarias. Pensemos ahora en distintas maneras para mejorar el rendimiento de la red. Después de una pregunta ARP, el destino conoce las direcciones IP y física del origen. Por lo tanto, podría insertar la correspondiente entrada en su tabla. Pero no sólo eso, sino que todas las estaciones de la red escuchan la pregunta ARP: podrían insertar también las correspondientes entradas en sus tablas. Como es muy probable que otras máquinas se comuniquen en un futuro con la primera, habremos reducido así el tráfico de la red aumentando su rendimiento.
Esto que hemos explicado es para comunicar dos máquinas conectadas a la misma red física. ¿Y si la otra máquina no estuviese conectada a nuestra red? Entonces tendríamos un encaminador que nos comunicase ambas redes. La máquina origen, si no la tiene en su tabla, preguntaría por ARP la dirección física del encaminador y le transferiría a éste el mensaje. Estos pasos se van repitiendo para cada red física hasta llegar a la máquina destino.



Las etiquetas nuevas importantes de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son:

<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo hablamos un poco del drama que este tag está generando.

<audio>
Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

<input *>
Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números, entre otras.

<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML. Más adelante hablamos de la mágia en HTML5 y mencionamos ejemplos concretos con canvas y SVG.

lunes, 15 de julio de 2013

Formato de Paquete de Petición / Respuesta de ARP

Hardware address space Especifica el tipo de hardware; ejemplos son Ethernet o Packet Radio Net.
Protocol address space Especifica el tipo de protocolo, el mismo que en el campo de tipo EtherType en la cabecera de IEEE 802.
Hardware address length Especifica la longitud(en bytes) de la dirección hardware del paquete. Para IEEE 802.3 e IEEE 802.5 será de 6.
Protocol address length Especifica la longitud(en bytes) de las direcciones del protocolo en el paquete. Para IP será de 4.
Operation code Especifica si se trata de una petición(1) o una solicitud(2) ARP.
Source/target hardware address Contiene las direcciones física hardware. En IEEE 802.3 son direcciones de 48 bits.
Source/target protocol address Contiene las direcciones del protocolo. En TCP/IP son direcciones IP de 32 bits.

Para el paquete de solicitud, la dirección hardware de destino es el único campo indefinido del paquete
Cuando realiza una solicitud, el transmisor también proporciona la dirección IP del objetivo (ARP) o la dirección de hardware del objetivo (RARP), utilizando los campos TARGET HA y TARGET IP. Antes de que la máquina objetivo responda, completa las direcciones faltantes, voltea los pares de objetivo y transmisor, y cambia la operación a respuesta. Por lo tanto, una respuesta transporta las direcciones tanto de hardware como de TP del solicitante original, lo mismo que las direcciones de hardware e IP de la máquina para la que se realizó asignación.
Dentro de una misma red física, las máquinas se comunican enviándose tramas físicas. Estas tramas van dirigidas a una máquina con una determinada dirección física. Observemos que las tramas Ethernet contienen un campo con la dirección física de la máquina destino (48 bits).
El problema que se nos plantea es cómo podemos conocer la dirección física de la máquina destino. Lo único que nosotros sabemos (recordemos el ejemplo introductorio a la capa de red) del destino es su dirección IP. Necesitamos por tanto obtener la dirección física de un ordenador a partir de su dirección IP. Esto es justamente la misión del protocolo ARP (Address Resolution Protocol, protocolo de resolución de direcciones).


Queremos enviar un mensaje desde la máquina A con dirección 194.18.133.5 a la máquina B con dirección 194.18.133.1. Sin embargo la trama física, que es lo que realmente se envía por el cable, necesita conocer la dirección física del destino.
El protocolo ARP funciona de la siguiente manera: A envía un mensaje a todas las máquinas de su red preguntando "¿Cuál es la dirección física de la máquina con dirección IP 194.18.133.1?". La máquina con dirección 194.18.133.1 advierte que la pregunta está dirigida a ella y responde a A con su dirección física (A3.BB.05.33.12.99). Entonces, A envía el mensaje a R.
Observemos que las preguntas ARP son de multidifusión (se envían a todas las máquinas). Estas preguntas llevan además la dirección IP y dirección física de la máquina que pregunta. La respuesta se envía directamente a la máquina que formuló la pregunta.


Ejemplo de blog hecho con HTML5

<header>
<hgroup>
<h1>El blog de mlw.io</h1>
<h2>Este es el blog de Mejorando la web</h2>
</hgroup>
</header>
<nav>
Aquí va la botonera de navegación
</nav>
<section>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter,
facebook, posts viejos, etc.
</aside>
<footer>
Pie de pagina, amenazas de copyright, etc.
</footer>

domingo, 14 de julio de 2013

ARP Sustituto (proxy ARP)

Los términos ARP sustituto (proxy, ARP) promiscuo y ARP hack, se refieren a la segunda técnica utilizada para transformar un solo prefijo IP de red en dos direcciones físicas. La técnica, que sólo se aplica en redes que utilizan ARP para convertir direcciones de red en direcciones físicas, se puede explicar mejor mediante un ejemplo. En la figura se ilustra la situación.
En la figura, dos redes comparten una sola dirección IP. Imagine que la etiquetada como Red Principal era la red original y segunda, etiquetada como Red Oculta, se agregó después. R, que es el ruteador que conecta las dos redes, sabe qué anfitriones residen en cada red física y utiliza ARP para mantener la ilusión de que solamente existe una red. Para dar esa apariencia, R mantiene totalmente oculta la localización de los anfitriones, permitiendo que las demás máquinas en la red se comuniquen como si estuvieran conectadas de manera directa. En nuestro ejemplo, cuando el anfitrión H1 necesita comunicarse con el anfitrión H4, primero llama a ARP para convertir la dirección IP de H4 en una dirección física. Una vez que tiene la dirección física, H1 puede enviarle directamente el datagrama.
Debido a que el ruteador R corre software proxy ARP, R captura la solicitud transmitida por difusión de Hi1 decide que la máquina en cuestión reside en la otra red física y responde la solicitud ARP enviando su propia dirección física. H1 recibe la respuesta ARP, instala la asociación en su tabla ARP y la utiliza para enviar a R los datagramas destinados a H4. Cuando R recibe un datagrama, busca en una tabla especial de ruteo para determinar cómo rutear el datagrama. R debe encaminar los datagramas destinados a H4 a través de la red oculta. a fin de permitir que los anfitriones en la red oculta alcancen anfitriones en la red principal, R también realiza el servicio de ARP sustituto (proxy ARP) en dicha red.
Los ruteadores que utilizan la técnica de ARP sustituto, tornan ventaja de una característica importante del protocolo ARP, a saber, la confianza. ARP está basado en la idea de que todas las máquinas cooperan y de que cualquier respuesta es legitima. La mayor parte de los anfitriones instalan asociaciones obtenidas por medio de ARP sin verificar su validez y sin mantener una consistencia. Por lo tanto, puede suceder que la tabla ARP asocie muchas direcciones IP en la misma dirección física, sin embargo, esto no viola las especificaciones del protocolo.
Algunas implantaciones de ARP no son tan poco exigentes como otras. En particular, las implementaciones ARP diseñadas para alertar a los administradores de posibles violaciones de seguridad les informarán siempre que dos direcciones IP distintas se transformen en la misma dirección física de hardware. El propósito de alertar al administrador es avisarle sobre el spoofing, situación en la que una máquina indica ser otra para poder interceptar paquetes. Las implantaciones de ARP en anfitriones que alertan a los administradores del posible spoofing no se pueden utilizar en redes que tienen ruteadores sustitutos ARP, ya que el software generarla mensajes con gran frecuencia.
La principal ventaja de ARP sustituto es que se puede agregar a un solo ruteador en una red sin alterar las tablas de ruteo en otros anfitriones o ruteadores en esa red. Por lo tanto, el software ARP sustituto (proxy ARP) oculta completamente los detalles de las conexiones físicas.
La principal desventaja de ARP sustituto es que no trabaja para las redes a menos que utilicen ARP para la definición de direcciones. Además, no se generaliza para topologías de red más complejas (por ejemplo, muchos ruteadores que interconectan dos redes físicas), ni incorpora una forma razonable para el ruteo. De hecho, la mayor parte de las implantaciones de ARP confía en los administradores para el mantenimiento manual de máquinas y direcciones, haciendo que se ocupe tiempo y se tenga propensión a los errores.


Figura: La técnica de APP sustituto (ARP hack) permite que una dirección de red se comparta entre dos redes físicas. El ruteador R contesta solicitudes ARP en cada red para los anfitriones en otra, proporcionando su dirección de hardware y ruteando datagramas de manera correcta en cuanto llegan. En esencia, R miente sobre las transformaciones de dirección IP a dirección física.

Nuevas etiquetas de HTML5 - II

<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el
área de indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.
Atención <div> no está muerto:
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.

sábado, 13 de julio de 2013

Cómo resuelve ARP las direcciones de control de acceso a medios para el tráfico remoto

ARP también se utiliza para reenviar datagramas IP a enrutadores locales de destinos que no se encuentran en la red local. En estos casos, ARP resuelve la dirección de control de acceso a medios de la interfaz de un enrutador en la red local.
En la siguiente ilustración se muestra cómo resuelve ARP las direcciones IP en direcciones de hardware de dos hosts que se encuentran en redes físicas diferentes conectadas por un enrutador común.


En este ejemplo, el host A tiene asignada la dirección IP 10.0.0.99 y el host B la dirección IP 192.168.0.99. La interfaz del enrutador 1 se encuentra en la misma red física que el host A y utiliza la dirección IP 10.0.0.1. La interfaz del enrutador 2 se encuentra en la misma red física que el host B y utiliza la dirección IP 192.168.0.1.
Cuando el host A intenta comunicarse con el host B, los siguientes pasos permiten resolver la dirección asignada por el software a la interfaz del enrutador 1 (10.0.0.1) en la dirección de control de acceso a medios asignada por el hardware:
1. Según el contenido de la tabla de enrutamiento del host A, IP determina que la dirección IP de reenvío que se va a utilizar para llegar al host B es 10.0.0.1, la dirección IP de la puerta de enlace predeterminada. Después, el host A busca en su propia caché de ARP local una dirección de hardware coincidente para 10.0.0.1.
2. Si el host A no encuentra ninguna asignación en la caché, difunde una trama de solicitud ARP a todos los hosts de la red local con la pregunta "¿Cuál es la dirección de hardware para 10.0.0.1?" Las direcciones de hardware y software del origen, el host A, se incluyen en la solicitud ARP.
Cada host de la red local recibe la solicitud ARP y comprueba si coincide con su propia dirección IP. Si el host no encuentra una coincidencia, descarta la solicitud ARP.
3. El enrutador determina que la dirección IP especificada en la solicitud ARP coincide con su propia dirección IP y agrega una asignación de direcciones de hardware y software para el host A a su caché de ARP local.
4. Después, el enrutador envía directamente un mensaje de respuesta de ARP que contiene su dirección de hardware al host A.
5. Cuando el host A recibe el mensaje de respuesta de ARP del enrutador, actualiza su caché de ARP con una asignación de direcciones de hardware y software para 10.0.0.1.
Una vez determinada la dirección de control de acceso a medios de la interfaz del enrutador 1, el host A puede enviar a la interfaz del enrutador 1 tráfico IP que se dirigirá a la dirección de control de acceso a medios de esa interfaz. Posteriormente, el enrutador reenvía el tráfico al host B mediante el mismo proceso ARP que se describe en el punto 3 ya antes mencionado.

Nuevas etiquetas de HTML5 - I

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá
funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es colocar este DOCTYPE4 antes de la etiqueta <html>:

<!DOCTYPE html>

Es un DOCTYPE mucho más simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar. 
Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semántico superior a un simple div o span.

<header>

Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico.

<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.

viernes, 12 de julio de 2013

Cómo resuelve ARP las direcciones de control de acceso a medios para el tráfico local

La siguiente ilustración muestra cómo resuelve ARP las direcciones IP en direcciones de hardware de hosts que se encuentran en la misma red local.


En este ejemplo, dos hosts TCP/IP, los hosts A y B, se encuentran en la misma red física. El host A tiene asignada la dirección IP 10.0.0.99 y el host B la dirección IP 10.0.0.100.
Cuando el host A intenta comunicarse con el host B, los siguientes pasos permiten resolver la dirección asignada por el software al host B (10.0.0.100) en la dirección de control de acceso a medios asignada por el hardware al host B:
1. Según el contenido de la tabla de enrutamiento del host A, IP determina que la dirección IP de reenvío que se va a utilizar para llegar al host B es 10.0.0.100. Después, el host A busca en su propia caché de ARP local una dirección de hardware coincidente para el host B.
2. Si el host A no encuentra ninguna asignación en la caché, difunde una trama de solicitud ARP a todos los hosts de la red local con la pregunta "¿Cuál es la dirección de hardware para 10.0.00,100?" Las direcciones de hardware y software del origen, el host A, se incluyen en la solicitud ARP.
Cada host de la red local recibe la solicitud ARP y comprueba si coincide con su propia dirección IP. Si el host no encuentra una coincidencia, descarta la solicitud ARP.
3. El host B determina que la dirección IP especificada en la solicitud ARP coincide con su propia dirección IP y agrega una asignación de direcciones de hardware y software para el host A a su caché de ARP local.
4. El host B envía directamente un mensaje de respuesta de ARP que contiene su dirección de hardware al host A.
5. Cuando el host A recibe el mensaje de respuesta de ARP del host B, actualiza su caché de ARP con una asignación de direcciones de hardware y software para el host B.
Una vez determinada la dirección de control de acceso a medios del host B, el host A puede enviar al host B tráfico IP que se dirigirá a la dirección de control de acceso a medios del host B.

Introducción y las nuevas etiquetas de HTML5

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript. 
La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery,1 jQuery UI2, Sproutcore3, entre otros. Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

jueves, 11 de julio de 2013

Direcciones de hardware

El hardware creado para uso en redes LAN debe contener una dirección única que el fabricante programa en el dispositivo. En el hardware para redes LAN Ethernet y Token Ring, esta dirección se conoce como la dirección de control de acceso a medios.
Cada dirección de control de acceso a medios identifica el dispositivo en su propia red física con un número de 6 bytes programado en la memoria de sólo lectura (ROM, Read-Only Memory) de cada dispositivo de hardware físico, por ejemplo, un adaptador de red. Las direcciones de control de acceso a medios suelen mostrarse en formato hexadecimal (por ejemplo, 00-AA-00-3F-89-4A).
La autorización y el registro de las direcciones de control de acceso a medios están a cargo del Institute of Electrical and Electronics Engineers (IEEE). Actualmente, IEEE registra y asigna números únicos para los tres primeros bytes de la dirección de control de acceso a medios a fabricantes individuales. Posteriormente, cada fabricante puede asignar los tres últimos bytes de la dirección de control de acceso a medios a los adaptadores de red individuales.

Guía HTML5

¿Por qué es importante HTML5?
Hace años hablábamos de la Web 2.0. No se inventó nada nuevo y cuando Tim O’reilly acuñó el término identificó un cambio en el mercado, otro tipo de internet que se adapta al cambio de los tiempos y a muchos nuevos perfiles que habitan en el mundo digital. Por suerte no fue sólo un cambio de dígitos y el marketing no fue suficiente para que se llenaran la boca de Web 3.0 o Web semántica. Allí no se identificaba nada y la fórmula no funcionó del todo. Por eso quiero hablarles de HTML5. La magia de esta unión de tecnologías agrupada en un solo término no es inventar nada nuevo, sino unir esfuerzos que por primera vez tienen a toda la industria empujando hacia una dirección y que identifican un cambio que ya sucedió en como debemos hacer la web hoy mismo. 
“HTML5 es el presente de la web y si no estás asimilando lo que está pasando ya eres parte de la vieja generación de desarrolladores. Eso tendría que tenerte preocupado.” 
Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks, netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos que están reiventando mercados y generando tráfico e ingresos. Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google, Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en el navegador más cercano a tu pantalla. 
Es una de sus más importantes estrategias de posicionamiento y es una de sus más fuertes apuestas de reclutamiento. Dije además que HTML5 tiene logo de superheroe y que venden camisetas para apoyar al movimiento? Si crees que HTML sigue representando las siglas del Hypertext Markup Language no has entendido nada. HTML5 es una época maravillosa de la web que tienes el privilegio de estar disfrutando. No es tecnología, ni es tendencia. Es una época dorada. Disfrutala y embriagate de sus tags.

miércoles, 10 de julio de 2013

Protocolo de resolución de direcciones (ARP)

El Protocolo de resolución de direcciones (ARP, Address Resolution Protocol) es un estándar TCP/IP necesario que está definido en RFC 826, "Address Resolution Protocol (ARP)" (Protocolo de resolución de direcciones (ARP)). ARP resuelve direcciones IP que utiliza el software basado en TCP/IP para las direcciones de control de acceso a medios empleadas por el hardware de LAN. ARP proporciona los siguientes servicios de protocolo a hosts que se encuentran en la misma red física:
• Las direcciones de control de acceso a medios se obtienen mediante una solicitud de difusión de red en forma de la pregunta "¿Cuál es la dirección de control de acceso a medios de un dispositivo configurado con la dirección IP adjunta?"
• Cuando se responde a una solicitud ARP, el remitente de la respuesta ARP y el solicitante de ARP original registran sus direcciones IP y de control de acceso a medios respectivas como una entrada en una tabla local, llamada la caché de ARP, para su uso posterior como referencia.