martes, 7 de octubre de 2014
miércoles, 20 de agosto de 2014
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, jQuery UI, Sproutcore, 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.
Nuevas etiquetas de HTML5
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 DOCTYPE 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>.
<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.
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.
ESTRUCTURA BÁSICA DE UNA PAGINA EN HTLM5
Publicadas por
Unknown
a la/s
6:48 p.m.
No hay comentarios.:
Enviar esto por correo electrónicoBlogThis!Compartir en XCompartir en FacebookCompartir en Pinterest
Etiquetas:
DISEÑO WEB
martes, 15 de julio de 2014
¿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.
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.
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.
lunes, 7 de julio de 2014
ESTRUCTURA Y DEFINICION DE DOCUMENTO HTML
Al utilizar un lenguaje estructurado, como es HTML 5, se ha de tener una estructura
básica para la creación de la página web, al igual que otros lenguajes estructurados se ha de
cumplir con un etiquetado inicial que determina como está compuesta la página.
Estructura básica de una página en HTML5
Si se observa el código fuente de una página Web básica, se pueden distinguir tres partes bien diferenciadas, un ejemplo de una página básica en HTML 5 sería el siguiente:
Como se puede observar en primer lugar se encuentra la definición del tipo de
documento, el cual se especifica con la etiqueta <!DOCTYPE , seguidamente se encuentra
la etiqueta <html> que especifica el principio y fin del documento HTML, entre las
etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al
encabezado y cuerpo del documento cuyas etiquetas correspondientes
son <head> y <body>. Básicamente se puede decir que un documento web realizado con el lenguaje de marcas o etiquetas HTML5, tiene dos secciones principales, el encabezado y el cuerpo del
documento.
básica para la creación de la página web, al igual que otros lenguajes estructurados se ha de
cumplir con un etiquetado inicial que determina como está compuesta la página.
Estructura básica de una página en HTML5
Si se observa el código fuente de una página Web básica, se pueden distinguir tres partes bien diferenciadas, un ejemplo de una página básica en HTML 5 sería el siguiente:
Como se puede observar en primer lugar se encuentra la definición del tipo de
documento, el cual se especifica con la etiqueta <!DOCTYPE , seguidamente se encuentra
la etiqueta <html> que especifica el principio y fin del documento HTML, entre las
etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al
encabezado y cuerpo del documento cuyas etiquetas correspondientes
son <head> y <body>. Básicamente se puede decir que un documento web realizado con el lenguaje de marcas o etiquetas HTML5, tiene dos secciones principales, el encabezado y el cuerpo del
documento.
Publicadas por
Unknown
a la/s
10:24 a.m.
No hay comentarios.:
Enviar esto por correo electrónicoBlogThis!Compartir en XCompartir en FacebookCompartir en Pinterest
Etiquetas:
DISEÑO WEB
lunes, 30 de junio de 2014
LENGUAJE DE ETIQUETAS
Uno de los primeros problemas que se plantearon en informática era como
traspasar o enviar información entre equipos. Para solventar esta situación se decidió
codificar la información para su envió, ya que la mayoría de información que se manejaba
era texto.
La codificación se aplica a un conjunto de caracteres de forma que cada carácter del
conjunto tenga una asociación numérica.
A estos conjuntos de caracteres se les denomina tablas, una de las tablas o
conjuntos más conocidos y utilizados es el código ASCII, que relaciona cada carácter del
conjunto con una combinación numérica en código binario, este código contempla
caracteres alfabéticos, numéricos, de puntuación, etc.
Una vez solucionado el paso de información se planteó la posibilidad de enviar
junto a la información el formato correspondiente a la misma, como atributos del texto,
color, tamaño, alineación, etc.
Una de las soluciones propuestas fue la de crear una serie de marcas que insertadas
en la información a enviar establecieran dicho formato. A estas marcas se les llama Etiquetas y al conjunto de las mismas que determinan el formato se le conoce como
un lenguaje de marcado o lenguaje de marcas.
El siguiente ejemplo pretende mostrar una demostración de un lenguaje de
marcado o lenguaje de marcas. Suponga que se desea enviar la siguiente información,
destacando algunas de sus palabras:
Su codificación utilizando etiquetas podría ser la siguiente:
Como se puede observar al incluir las etiquetas se puede establecer con bastante
claridad que es lo que se desea resaltar.
Tanto HTML como XHTML son lenguajes de marcado o marcas como su nombre
indica: HTML significa Hypertext Markup Language (Lenguaje de marcas e hipertexto),
mientras que XHTML significa Extended HyperText Markup Language (Lenguaje de marcas
e hipertexto extendido) y como es obvio la nueva versión del lenguaje HTML 5, también es
un lenguaje que utiliza etiquetas.
Lógicamente cada uno de los lenguajes de marcado tienen sus propias etiquetas,
aparte de estos dos lenguajes citados anteriormente, existen muchos otros lenguajes como
XML, MathML, DocBook, etc.
Normalmente los lenguajes de etiquetas suelen tener etiquetas de inicio y cierre
para los diferentes formatos que se quieren aplicar. De esta forma se indica cuando tiene
que empezar y finalizar el formato.
En el caso de HTML y XHTML el formato de sus etiquetas para expresar el principio
y final de un formato es el siguiente:
Etiqueta de apertura o inicio del formato:
La etiqueta anterior está compuesta por el símbolo “<” seguidamente y sin
espacios en blanco el nombre de la etiqueta y a continuación el símbolo “>“.
Etiqueta de cierre o final del formato:
La etiqueta de cierre está compuesta por el símbolo “<” seguidamente y sin
espacios en blanco, el símbolo “/“, el nombre de la etiqueta y por último el símbolo “>“.A continuación tiene una serie de ejemplos que se podrían aplicar en un
documento html para especificar párrafos:
traspasar o enviar información entre equipos. Para solventar esta situación se decidió
codificar la información para su envió, ya que la mayoría de información que se manejaba
era texto.
La codificación se aplica a un conjunto de caracteres de forma que cada carácter del
conjunto tenga una asociación numérica.
A estos conjuntos de caracteres se les denomina tablas, una de las tablas o
conjuntos más conocidos y utilizados es el código ASCII, que relaciona cada carácter del
conjunto con una combinación numérica en código binario, este código contempla
caracteres alfabéticos, numéricos, de puntuación, etc.
Una vez solucionado el paso de información se planteó la posibilidad de enviar
junto a la información el formato correspondiente a la misma, como atributos del texto,
color, tamaño, alineación, etc.
Una de las soluciones propuestas fue la de crear una serie de marcas que insertadas
en la información a enviar establecieran dicho formato. A estas marcas se les llama Etiquetas y al conjunto de las mismas que determinan el formato se le conoce como
un lenguaje de marcado o lenguaje de marcas.
El siguiente ejemplo pretende mostrar una demostración de un lenguaje de
marcado o lenguaje de marcas. Suponga que se desea enviar la siguiente información,
destacando algunas de sus palabras:
Su codificación utilizando etiquetas podría ser la siguiente:
Como se puede observar al incluir las etiquetas se puede establecer con bastante
claridad que es lo que se desea resaltar.
Tanto HTML como XHTML son lenguajes de marcado o marcas como su nombre
indica: HTML significa Hypertext Markup Language (Lenguaje de marcas e hipertexto),
mientras que XHTML significa Extended HyperText Markup Language (Lenguaje de marcas
e hipertexto extendido) y como es obvio la nueva versión del lenguaje HTML 5, también es
un lenguaje que utiliza etiquetas.
Lógicamente cada uno de los lenguajes de marcado tienen sus propias etiquetas,
aparte de estos dos lenguajes citados anteriormente, existen muchos otros lenguajes como
XML, MathML, DocBook, etc.
Normalmente los lenguajes de etiquetas suelen tener etiquetas de inicio y cierre
para los diferentes formatos que se quieren aplicar. De esta forma se indica cuando tiene
que empezar y finalizar el formato.
En el caso de HTML y XHTML el formato de sus etiquetas para expresar el principio
y final de un formato es el siguiente:
Etiqueta de apertura o inicio del formato:
La etiqueta anterior está compuesta por el símbolo “<” seguidamente y sin
espacios en blanco el nombre de la etiqueta y a continuación el símbolo “>“.
Etiqueta de cierre o final del formato:
La etiqueta de cierre está compuesta por el símbolo “<” seguidamente y sin
espacios en blanco, el símbolo “/“, el nombre de la etiqueta y por último el símbolo “>“.A continuación tiene una serie de ejemplos que se podrían aplicar en un
documento html para especificar párrafos:
Publicadas por
Unknown
a la/s
10:27 a.m.
No hay comentarios.:
Enviar esto por correo electrónicoBlogThis!Compartir en XCompartir en FacebookCompartir en Pinterest
Etiquetas:
DISEÑO WEB
miércoles, 25 de junio de 2014
INTRODUCCION AL LENGUAJE HTML5
Por el año 1989, un físico nuclear Tim Berners-Lee del CERN (Centro europeo para la investigación nuclear) da la noticia de que está trabajando en un sistema que permite acceder a archivos en línea sobre el protocolo de comunicaciones TCP/IP. En este año existían dos métodos para enlazar documentos electrónicos entre sí.Por una parte los enlaces o hipervínculos y por otra parte un lenguaje denominado SGML (Standard Generalize Markup Language (Lenguaje de marcación generalizado):Consiste en un sistema para la organización y etiquetado de documentos.La ISO normalizo el lenguaje en el año 1986. Sirve para especificar las reglas deetiquetado y no impone ningún conjunto de etiquetas especial.) , teniendo en cuenta estosmétodos Tim Berners-Lee a principios de 1990 define el lenguaje HTML (HypertextMarkup Language “Lenguaje de marcas hipertextuales”) como un subconjunto de SGML ycrea algo más el World Wide Web (También conocido como la Web, es un sistema dedocumentos de hipertexto y/o hipermedias enlazados entre si y accesibles desdeInternet.). En 1991 crea el primer navegador de HTML que funcionaría en modo texto ypara el sistema UNIX.El sucesor de HTML es HTML+, comenzando su desarrollo en 1993. Y siendo sudiseñador David Ragget, que formalizo un conjunto de extensiones de HTML previas a laespecificación formal de HTML y como una recopilación, replanteamiento, unificación ymejora de los diferentes dialectos de HTML usados por la primera implementación delmismo. Este sucesor aporta características nuevas al lenguaje tales como la utilización deimágenes, tablas, formularios y listas anidadas.El primer borrador oficial fue el HTML 3.0 y ya fue propuesto por el recién formadoW3C (World Wide Web Consortium. Es un consorcio internacional que produce estándarespara la WWW. Está dirigido por Tim Berners-Lee.) En 1995. Y en él se introducen nuevascaracterísticas como la facilidad de la creación de tablas, la fluidez del texto alrededor de lasfiguras mostradas y la posibilidad de mostrar elementos matemáticos complejos. Aunquecompatible con HTML 2.0, era demasiado complejo para ser implementado por latecnología del momento y cuando expiro el borrador en septiembre de 1995 se abandonó,ya que no recibió el apoyo de los programadores de navegadores web.La siguiente especificación. El HTML 3.1 nunca llego a ser propuesto oficialmente, ysu lugar fue ocupada por la siguiente especificación HTML 3.2, que desecho varias de lasnuevas características utilizadas en la especificación 3.0 para adoptar muchos de losdesarrollos realizados por los navegadores web NetScape y Mosaic.La opción de trabajar con fórmulas matemáticas fue desechada y paso a integrar unestándar distinto denominado MathML.La especificación HTML 4.0 fue presentada en junio de 1998 y también adoptómuchos de los elementos específicos desarrollados inicialmente para un “navegador web”concreto, pero al mismo tiempo comenzó a limpiar el lenguaje HTML señalando varios desus elementos como “desaprobados”.Hasta hace relativamente poco tiempo se utilizaba y utiliza la versión 4.01, la cual hasido reemplazada por la nueva versión denominada HTML 5.HTML 5 desarrollada a partir del año 2007 por el grupo The Web StandardsProject (Proyecto de estándares Web), el nuevo estándar era muy ambicioso ya quepretendía crear un nuevo lenguaje HTML capaz de ejecutar aplicaciones completas, dehecho existían muchas entidades importantes que eran escépticas ante el desarrollo dellenguaje y su salida a la luz.Pero ocurrió un hecho importante y es que los navegadores empezaron a incorporar lautilización de las etiquetas de HTML 5, esto unido a que el consorcio W3C decidióabandonar la especificación de XHTML 2.0 e indicó que se centraría en el desarrollo deHTML 5, dieron el empujón definitivo al nuevo estándar. Actualmente casi todos losnavegadores soportan la mayoría de etiquetas HTML 5, y se ha de tener en cuenta que va aser el nuevo estándar para la creación de sitios web..
Publicadas por
Unknown
a la/s
2:00 p.m.
No hay comentarios.:
Enviar esto por correo electrónicoBlogThis!Compartir en XCompartir en FacebookCompartir en Pinterest
Etiquetas:
DISEÑO WEB
Suscribirse a:
Entradas (Atom)