RSS
 

Archive for the ‘html’ Category

HTML5: mejoras importantes en el lenguaje de la web

29 May

HTML son las siglas de HyperText Markup Language, el lenguaje de etiquetas de hipertexto que se utiliza para crear y poder visualizar los contenidos de las páginas web. Este no es un lenguaje estancado y definitivo, sino que a medida que va evolucionando internet se van exigiendo ciertas mejoras y la W3C regula todo su desarrollo.

youtube-version-html5.jpg

Ahora Youtube nos sorprende con una versión de su página web creada con HTML5, a la que lógicamente sólo puede accederse para ver el contenido correctamente desde un navegador que soporte el nuevo lenguaje de marcas. Entre ellos, las versiones Beta de Firefox 3.5, Opera o Safari 3 servirán sin problemas.

En cuanto a las diferencias con la versión anterior, en la tabla de referencia de HTML5 propuesta por el W3C puede obtenerse un listado de todos los elementos disponibles, sus descripciones aclaratorias y si están o no definidos en HTML4 y HTML5. El desarrollador web aNieto2k publicó hace tiempo un artículo muy interesante en el que compara las novedades de la quinta versión del lenguaje con respecto a las anteriores. Habrá nuevos elementos para definir nuevas estructuras, como por ejemplo:

  • <article />: nueva etiqueta para definir bloques de contenidos que correspondan a artículos.
  • <section />: definición de una sección del sitio.
  • <dialog />: tag para definir diálogos y conversaciones entre varias personas.
  • <video /> y <audio />: para la inclusión de elementos de video y audio. Un ejemplo puede verse en la versión de Youtube en HTML5 que comentábamos anteriormente.
  • <footer />: parte de la web donde podrá ir información sobre el autor, licencias de uso, condiciones… todo ese tipo de detalles que generalmente suelen colocarse en el pie de la web.
  • <canvas />: espacio para gráficos generados en el momento de la visualización de la web.
  • <time />: información sobre tiempos o fechas.
  • <command />: para mostrar comandos que el usuario puede ejecutar.
  • <progress />: implementación de una barra de progreso durante la realización de un proceso o tarea.
  • …

Estos elementos y etiquetas también contienen ciertos atributos que también han sido mejorados, algunos de ellos eliminados y se han incorporado atributos nuevos en la definición de HTML5.

Como se puede observar, las nuevas etiquetas están definidas pensando también en la semántica de las páginas web, una evolución de la forma en que se realizan los sitios web que intenta dotar de significado útil para las personas todos los componentes y contenidos de una página.

Un ejemplo claro de a qué nos estamos refiriendo con el concepto de “web semántica” es plantearle a Google o a Yahoo la búsqueda “4+5” o “Hoteles en Zaragoza”. En ambos casos, el motor del buscador ha evolucionado hasta comprender que esas preguntas tienen un significado muy claro y piden una respuesta igualmente humana, y no simplemente una lista de páginas con coincidencias de los términos. En el primer caso, ambos responden directamente el cálculo de la suma de ambos números, entendiendo que se quiere realizar una operación matemática y no una búsqueda de palabas clave. En la segunda pregunta, responden con una lista de hoteles en la ciudad citada, con su localización exacta, páginas web, teléfono, precios, valoraciones y comentarios de otros usuarios.

Estas respuestas no obedecen realmente a los objetivos de la web semántica, ya que no utilizan realmente las tecnologías previtas para este nuevo paradigma sino que actualmente son solamente un guiño hacia una solución humana que una persona está buscando. Como comenta Alex Iskold en su artículos sobre mitos y realidades de la web semántica, el objetivo principal es que los usuarios podamos cambiar la forma en la que planteamos nuestras preguntas a una nueva forma totalmente humana, como por ejemplo: “¿Quién fue el presidente de los Estados Unidos entre los años 1993 y 2003?”. Y que la respuesta sea: “Bill Clinton hasta el 2001 y después George Bush”.

Ahora llega cuando la tecnología de los navegadores también avanza y poco a poco las nuevas versiones de los navegadores van soportando todos el nuevo lenguaje. Aunque, como siempre, unos antes que otros (léase Internet Explorer).

fuente: genbeta.com

Enlace | W3C – Guía breve de la web semántica
Enlace | HTML5

SocialTwist Tell-a-Friend
 
No Comments

Posted in Diseño, Estándares web, Navegadores, html, w3c

 

Chrome: navegador google

04 Sep

 

Bueno parece que Google no detiene su marcha, ahora salen algunas imágenes de Chrome el que sera su futuro navegador web.

La beta sera lanzada mañana pero estas imágenes ya nos dejan saber algo a los más curiosos. Se ve claramente que tendrá soporte de pestañas, una alta integración con todos los servicios de Google y lo que a mi me parece que es una pagina de inicio con thumbnails similar a Opera.

Me pregunto: Google no confía en que Firefox supere finalmente a IE algún día? O sera que no quiere depender de nadie externo a su “Imperio”?

Como mucho es una opción más que nunca viene mal y como en todo la competencia hace bien.

Link Oficial

Actualización: Descargar Google Chrome

Via | Unblogged

Acabo de instalar Chrome y la verdad es super ligero, y tiene las tipicas funciones que podemos esperar de google. La pagina de inicio lista nuestraos marcadores y en la parte central muestra las miniaturas de los sitios más visitados.


Portada de Google Chrome

Y en este video los Ingenieros de Google nos explican el porque de Chrome.

SocialTwist Tell-a-Friend
 
No Comments

Posted in Curiosidades, Navegadores, html, informacion

 

La historia del Error 404

14 Aug

Internet no siempre fue la red que conocemos y disfrutamos hoy. En sus comienzos, era poco más que un puñado de ordenadores conectados entre sí, un proyecto ambicioso desarrollado por un grupo de jóvenes científicos del CERN (Suiza), intentando mantenerse al tanto del trabajo de sus pares en todo el mundo.

Ellos fueron los creadores de la “World Wide Web“, conocida mundialmente como WWW o “la web“. Es decir, los muchachos idearon todo un sistema de comunicaciones de datos que no solo les solucionó el problema, sino que, una vez abierto al público en general y treinta años más tarde, goza de una inmejorable salud.

Este puñado de jóvenes mentes brillantes eran renuentes revelar su progreso (y fracasos) al mundo, por lo que comenzaron a desarrollar su protocolo en un ambiente cerrado: la red interna de la CERN. Mucha agua debía pasar debajo del puente antes de que se convirtiese en una red con acceso a cada hogar, distribuyendo documentos multimedia. Usando la disposición física de la red y de los edificios de la CERN como metáfora para el “mundo real” situaron diversas funciones del protocolo en diversas oficinas dentro de la CERN.

En una oficina, situada en el cuarto piso, estaba ubicada la base de datos central del World Wide Web: cualquier pedido de ficheros era encaminado a esa oficina, en donde dos o tres personas (¡sí, personas!) lo localizaban manualmente utilizando métodos que hoy parecen medievales y los transferirían, mediante la red, a la persona que había realizado la petición. Esta habitación era conocida como “Room 404” (Sitio 404).

Inevitablemente, la base de datos comenzó a crecer, y también la cantidad de gente con acceso a los documentos que en ella se almacenaba. Y también comenzaron a aparecer algunos problemas: había gente poco familiarizada con el sistema que efectuaba peticiones de documentos que no existían, o con nombres de archivo escritos incorrectamente. El personal a cargo de la “Room 404″ enviaba, en esos casos, una nota explicando que el documento no podría ser hallado. Rápidamente, estas peticiones erróneas fueron contestadas con un mensaje estándar: “Sitio 404: archivo no encontrado“.

Tiempo más tarde, cuando los procesos de respuesta fueron automatizados y los trabajadores del cuarto piso fueron reemplazados por ordenadores, los usuarios de la red pudieron acceder directamente a los documentos almacenados en la base de datos. Sin embargo, el mensaje de error estándar para indicar que un documento determinado no podía ser hallado siguió siendo el mismo: “404: file not found“.

Este número de error ha sobrevivido hasta nuestros días, y forma parte de la lista oficial de errores del HTTP (Hyper Text Transfer Protocol, o Protocolo para la Transferencia de Hipertexto)

Es posible encontrar en internet diferentes pantallas de “Error 404”, ya que los servidores de páginas web permiten la personalización de este mensaje, de forma que el administrador de cada sitio pueda adaptarlo a la estética general del resto de sus páginas. Acompañando a este artículo puedes ver algunas de las que más nos llamaron la atención.

Esta historia tiene todo lo necesario para ser verdadera. Pero hay algunos que aseguran que se trata de otra leyenda urbana. Quienes defienden esta postura se basan en que, según está definido en el protocolo estándar HTTP, el número de ésta respuesta (404) está definido de la siguiente forma: el primer número indica el tipo de respuesta, en este caso el 4 significa “error del cliente”. Los siguientes dos número indican el subtipo de error, en este caso el 04 (“Not found”).

Este argumento es válido, y está documentado en w3.org, la organización encargada de velar por el estándar “www”. Pero no se puede negar que es mucho más atractiva y romántica la historia que acabamos de leer.

SocialTwist Tell-a-Friend
 
No Comments

Posted in Curiosidades, Estándares web, html, usuarios web

 

Esquinas redondeadas, CSSRound

04 Aug

CSSRound es una aplicación que nos permite generar estilos, HTML e imágenes para crear cajas con esquinas redondeadas de forma muy sencilla.

cssround.png

Tan solo tendremos que indicar el radio de la esquina, el color de fondo de la capa, el color de la caja redondeada, el color de la letra, el ancho de la caja y el contenido, y nos devolverá todo lo necesario para mostrar el diseño en nuestra página.

CSSRound

Via: Sentido Web

SocialTwist Tell-a-Friend
 
No Comments

Posted in CSS, Diseño, Recursos gratis, grafico, html

 

MooRainbow – Crear nuestro propio selector de colores

09 May

rainbow.jpg

MooRainbow un poderoso Javascript utilizando también mootools que nos permitirá montar en nuestra Web, un bonito selector de colores, donde podremos visualizar y elegir aquellos colores que serán útiles para nuestros proyectos. Inclusive permite una personalización realmente muy fácil, y brinda agradables variantes a la hora de ser utilizado.

  • MooRainbow es completamente personalizable a través de un fichero CSS.
  • MooRainbow mantiene limpio su DOM y genera XHTML y CSS válido
  • MooRainbow proporciona, como contrapartida, un objeto que contiene RGB, HSB y HEX del color seleccionado.
  • MooRainbow es realmente rápido gracias a mootools.
  • MooRainbow funciona bien en Firefox / Safari / Opera / IE

Ver demo – Descarga Demo – Mas info moorainbow

Instalacion:
Descargamos los archivos a utilizar y realizamos la llamada correspondiente a ellos desde nuestro encabezado.

PLAIN TEXT

JavaScript:

  1. <script type=“text/javascript” src=“js/mootools-release.js”></script>

  2. <script type=“text/javascript” src=“js/mooRainbow.js”></script>

Incluyendo también el llamado a la hoja de estilo

PLAIN TEXT

HTML:

  1. <link type=“text/css” rel=“stylesheet” href=“mooRainbow.css”>

Ahora debemos crear un nuevo objeto MooRainbow. Lo haremos dentro de nuestra etiqueta < head >

PLAIN TEXT

JavaScript:

  1. <script type=“text/javascript”>

  2. window.addEvent(‘domready’, function() {

  3. var r = new MooRainbow(‘myRainbow’, {

  4. ‘startColor’: [58, 142, 246],

  5. ‘onChange’: function(color) {

  6. $(‘myInput’).value = color.hex;

  7. }

  8. });

  9. });

  10.  

  11. </script>

Para finalizar, ya podremos insertar nuestra estructura en body. O mejor dicho nuestro selector de colores MooRainbow, donde deseamos mostrarlo en nuestra web. La forma de hacerlo:

PLAIN TEXT

HTML:

  1. <label>

  2. <img id=“myRainbow” src=“images/rainbow.png” alt=“[r]“ width=“16″ height=“16″ />

  3. <input id=“myInput” name=“myInput” type=“text” size=“13″ />

  4. </label>

Este selector que acabamos de insertar aquí, es algo así como su versión estándar. En mi demo, seria el ejemplo numero UNO. Una pequeña imagen, que al hacer clic sobre ella abrirá nuestro selector de colores, y un casillero que almacenara los valores Hexadecimal de cada color que hemos seleccionado.
Pero MooRainbow posee otras variantes, u otra forma de utilizar nuestro selector. Me remitiré solo ha comentar los demos que he creado. Lo que seria el ejemplo DOS de mi demo. Básicamente, una imagen que nuevamente abrirá nuestro selector de colores (pro cierto, esta vez mucho mas pequeño), pero evitando almacenar en un casillero los valores hexadeciamles generados al seleccionar cada color. Lo que significa, que si deseamos un color o el valor de un tono, lo obtendremos directamente copiándolo desde el mismo selector, ya que posteriormente no quedara almacenados en ningún casillero. De todas sigue siendo muy útil, al acostumbrarnos, y es otra buena opción, dependiendo el fin que deseamos darle a cada uno de estos selectores en cuestión.
Instalacion ejemplo DOS:
Si bien al comienzo hemos realizado la llamada a un fichero css, esta vez necesitaremos insertar unas líneas más de css para este demo. El código lo encontraran aquí.
Una vez agregado las líneas de código css nuevas, nuevamente necesitaremos crear un objeto desde nuestro encabezado. Dentro de nuestra etiqueta < Head >

PLAIN TEXT

JavaScript:

  1. <script type=“text/javascript”>

  2. window.addEvent(‘domready’, function() {

  3. var demo3 = new MooRainbow(‘demo3′, {

  4. id: ‘myDemo3′,

  5. imgPath: ‘images/’

  6. });

  7. });

  8. </script>

y por ultimo, la imagen que abrirá nuestro selector de colores en nuestro contenido

PLAIN TEXT

HTML:

  1. <label>

  2. <img id=“demo3″ src=“images/rainbow.png” rainbow.png” alt=”[r]” width=”16” height=”16” class=”rain” id=”demo3” />

  3. Click en el arco iris para abrir la paleta de colores miniatura

  4. </label>

De todas formas, podrán ver y probar desde el demo a descargar

Via Xyberneticos

SocialTwist Tell-a-Friend
 
No Comments

Posted in CSS, Herramientas, JavaScript, html, informacion, web 2.0

 

Plugins imprescindibles de Firefox para webmasters II

20 Apr

Dejo publicada una segunda lista de extenciones o plugins para Firefox orientadas a Diseñadores web.
Todas ellas quedan linkeadas a su web para descargarlas directamente.

  • View Dependencies agrega una pestaña (tab) a la ventana Información de página en la cual lista todos los archivos que fueron cargados en la página actual.
  • Firefox Accessibility Extension hace muy fácil navegar a ciertas personas mejorando la accesibilidad.
  • Web Developer agrega un menú y una barra de herramientas con varias herramientas para el desarrollador Web
  • Server Switcher es una herramienta de ayuda a los desarrollares web que permite muy fácilmente cambiar entre servidores durante el desarrollo.
SocialTwist Tell-a-Friend
 
No Comments

Posted in Accesibilidad, CSS, Diseño, Gnu, Herramientas, Navegadores, Recursos gratis, extensiones, html, informacion

 

Consejos para estructuras CSS

31 Mar

Buenos consejos para realizar tus estilos CSS bien estructurados.

  • Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
  • Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
  • Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
  • Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
  • Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
  • Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Fuente: sentidoweb.com desde http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html
Imagen : http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html

SocialTwist Tell-a-Friend
 
No Comments

Posted in CSS, Creatividad, Diseño, Estándares web, Usabilidad, html

 

9 principios para un buen diseño web

26 Dec

Artículo publicado en psdtut llamado 9 Essential Principles for Good Web Design:El diseño Web puede llegar a ser engañosamente difícil. Ya que debes crear un diseño que a la vez sea usable y agradable, que muestre información y que a la vez haga marca y que técnicamente y visualmente sea coherente. Los principios son:

  1. Precedencia (guiando al ojo),  esto se refiere a la facilidad con que el usuarios encuentra algo en la pantalla sin mucho esfuerzo, para lograrlo es necesario tomar en cuenta la posición, el color y el contraste de los elementos, un ejemplo de un sitio con buena precedencia es: Capture the Valley que usa barras de color para guiar el ojo a través de las secciones desde arriba hasta abajo.
  2. Espaciado,  el espaciado hace que las cosas se vean más claras, debes tomar en cuenta el espacio entre líneas, el padding y los espacios en blanco, un ejemplo de un buen uso de espacios es Marius que tiene un sitio muy limpio, simple y usa bien los espacios
  3. Navegación, para la navegación debes tomar en cuenta estos dos tipos de navegación: la que te dice a donde puedes ir y la que te indica donde estás que se refiere a la del tipo: Inicio ? Sección ? Subsección, cómo ejemplo a todo esto tenemos a Noodlebox tiene un buen trabajo en cuanto a los botones de navegación que indican cuando están activo y cuando no.
  4. Diseñar para construir,  debes tener en cuenta antes de diseñar algo que todo puede cambiar, por ejemplo si alguien cambia la resolución de pantalla, cómo simplificar las cosas,  etc.
  5. Tipografía, el texto es uno de los elementos más importantes del diseño así que no lo debemos olvidar y debemos considerar cosas cómo el tipo de fuente, el tamaño de la fuente, el espaciado, lo largo de la línea, el color y los párrafos, en iLoveTypography! utilizan muy bien las tipografías.
  6. Usabilidad, para diseñar s sitio usable debemos apegarnos a los estándares web, pensar en el usuario y que pueda hacer lo que queremos que haga y ponernos en su lugar, un ejemplo de usabilidad es Happycog que tiene un sitio muy usable ya que es simple y fácil de usar.
  7. Alineación, mantener las cosas alineadas es muy importante para el diseño de un sitio web, un ejemplo claro de alineación es Electric Pulp.
  8. Claridad, para lograr un diseño claro debes detallar my bien cada borde, asegurarte que a cada texto se le aplica bien el anti-alias, asegurarte que el contraste de los colores el alto, y enfatizar sólo un poco los bordes, no exagerar. El sitio de ExpressionEngine tiene un diseño muy claro, cada elemento está perfectamente posicionado y claro.
  9. Consistencia, se refiere a que todo debe coincidir tamaños de los títulos, estilos colores, elementos, etc., el sitio de Veerle hace un gran trabajo de mantener incluso los detalles más minúsculos constantes.

Puedes encontrar más información en el libro How to Be a Rockstar Freelancer escrito por el mismo autor de estos 9 principios.

fuente: http://www.carlosleopoldo.com/2007/12/17/9-principios-para-un-buen-diseno-web/

SocialTwist Tell-a-Friend
 
4 Comments

Posted in Accesibilidad, Creatividad, Diseño, Estándares web, Interfases, Tipografia, Usabilidad, html, usuarios web

 
« Older Entries