Archivos en la Categoría: Usabilidad Web

Material importante para la usabilidad de la web 2.0, herramientas y futuro para la web

Materia USABIIDAD/ Prof Carlos Murillo

Herramientas 2.0 – Web 2.0

Herramientas 2.0 son aquellas surgidas de la web 2.0 o “Web Social” que nos permiten dejar de ser un receptor de comunicación y pasar a tener la oportunidad de crear y compartir información y opiniones con los demás usuarios de internet. Las tecnologías Web 2.0 pueden cambiar profundamente nuestra manera de trabajar e interactuar con compañeros y clientes en cualquier tipo de organización, incluidas las empresas.”

Herramientas 2.0 / Web 2.0

Web 2.0 y la empresa

WEB 2.0- Materia II Examen Usabilidad

WEB 2.0 – Materia para 2do examen- USABILIDAD

II Examen Usabilidad- Presentaciones 1er semana

Usabilidad

Usabilidad

fotografías

Usabilidad

II Examen Usabilidad- Presentaciones 2da semana

Basecamp2


Usabilidad

UsabilidadUsabilidad

UsabilidadTWITTER2

UsabilidadUsabilidadUsabilidad

Delicious- Usabilidad

Del.icio.us

YouTube- Usabilidad

¿Cómo subir un video de YouTube a mi blog?

Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress…) o Página web.

Para subir videos debemos acceder a YouTubeTM Broadcast Yourself.


Una vez en YouTube, pulsaremos “Sign Up” o “Log In”.

Lo primero que debemos hacer es darnos de alta.


Para subir un video a YouTubeTM Broadcast Yourself, debemos pulsar la pestaña “Upload”.


En la siguiente pantalla debemos cumplimentar los siguientes datos, y pulsar el botón “Continue”. Como podéis ver en el primer paso indicaremos: el título que queramos darle a nuestro video, una descripción, las tags que queramos utilizar y una categoría.


En el paso dos, pulsaremos el botón “Browse”, y localizaremos en nuestro ordenador el archivo de video que queremos incorporar a nuestro blog. A continuación pulsaremos el botón “Upload Video”.


Mientras nuestro video se está cargando, veremos la siguiente pantalla:


Una vez realizada la carga vemos la siguiente pantalla con toda la información. Lo que a nosotros nos interesa es el código html que se encuentra a final de la pantalla, en el apartado “Embed HTML”.


Debemos copiar dicho código y lo pegamos en nuestro blog.


Dependiendo de las características del archivo, tendremos una anchura y altura determinada para cada video. Si subimos nuestro video en la coctelera, tenemos un ancho máximo de 444, más o menos. Como podemos ver, YouTube, nos ha dado un ancho por alto de 600 x 350: “width=600”, “height”=350. Para que no se deforme la información en vuestro blog, os recomiendo que la cambies a 440×257, es decir, “width=440”, “height”=257.

Para centrar la imagen, llevarla a derecha o izquierda podemos utilizar el código html: class=”imgizqda”, class=”imgcen” ó class=”imgdcha”.

Una vez que hayamos terminado de editar nuestro post, podemos pulsar el botón “Guardar borrador”, para ver cómo nos ha quedado.

Para WordPress el formato del url es:

entre estos signos [ ] lo siguiente youtube=http://www.youtube.com/watch?v=I8Ot8BJ3tIg


Migración del sitio web o aplicación a la nueva API de YouTube

Guía de migración

La iteración más reciente del API de YouTube se basa en el protocolo de datos de Google. La finalidad de este documento es ayudar a los desarrolladores a migrar su sitio web o aplicación a la nueva API de YouTube.

Contenido

    1. Aspectos generales
    2. ¿Quién necesita realizar la actualización?
    3. ¿Cuál es la línea de tiempo de la actualización?
  1. ¿Cuál es la diferencia entre la antigua API y la nueva API?
  2. A continuación…

Introducción

Aspectos generales

YouTube se ha convertido en el destino más popular de Internet de vídeos online. Gracias al lanzamiento del API REST/XML-RPC original en 2005, miles de desarrolladores contribuyeron a la difusión de vídeos de YouTube, subidos por usuarios de todas partes del mundo, a muchos más equipos. Ahora que el sitio ha madurado, nuestra intención es proporcionar un API completa y compleja a los desarrolladores. Hemos decidido redactar de nuevo el API y estandarizar el protocolo de datos de Google existente. Este movimiento se ha dado por diversos motivos, entre los que se incluyen una mejor escalabilidad y más recursos para los desarrolladores. Este documento te ayudará a obtener información general sobre las novedades y lo que es necesario para migrar tu sitio web o aplicación. La guía de referencia y las guías para desarrolladores de lenguaje específico también son unos recursos excelentes.

¿Quién necesita realizar la actualización?

Todos aquellos que utilicen el API heredada deberán realizar la actualización al API basada en datos de Google. Las nuevas funciones dejarán de estar integradas en el API heredada, y sólo se prestará atención a aquellos errores fundamentales.

¿Cuál es la línea de tiempo de la actualización?

El API heredada continuará en funcionamiento hasta el 30 de agosto de 2008. Después de esa fecha, su existencia no queda garantizada. Te animamos a que hagas el cambio antes de esa fecha y no después, ya que los problemas derivados del API heredada serán de prioridad baja.

¿Cuál es la diferencia entre la antigua API y la nueva API?

En las tablas que aparecen a continuación se muestran las diferencias que existen en las operaciones habituales, de una forma general. Consulta la guía de referencia para obtener más información.

Feeds de vídeos

Operación

API heredada

API de datos de YouTube

Notas/comentarios

Buscar en el índice de YouTube

videos.list_by_tag&tag=”SEARCH TERMS”

/feeds/api/videos?vq=”SEARCH TERMS”

El API heredada devuelve una búsqueda por relevancia

La nueva API admite filtros como, por ejemplo, ordenar por relevancia, hora de subida, puntuación y volumen de reproducciones.

Buscar en una categoría concreta

videos.list_by_category_and_tag&tag=”SEARCH TERMS”&category_id=CATEGORY_ID

/feeds/api/videos/-/CATEGORY_NAME

El API heredada no permite listados de vídeos de categorías sin restricciones.

Los nuevos feeds de categorías admiten esto, además de varias limitaciones de categorías.

Obtención de los metadatos de un vídeo

videos.get_details&video_id=VIDEO_ID

/feeds/api/videos/VIDEO_ID

 

Obtención de las respuestas en vídeo de un vídeo

N/A

/feeds/api/videos/VIDEO_ID/responses

 

Obtención de los comentarios de un vídeo

videos.get_details&video_id=VIDEO_ID

/feeds/api/VIDEO_ID/comments

El API heredada devuelve sólo 10 comentarios con get_details.

La nueva API devuelve todos los comentarios y conserva la relación principal/secundario.

El API de datos de YouTube actualmente no requiere una ID de desarrollador, que sí es necesaria para todas las llamadas del API heredada. A continuación se muestran las funciones adicionales del formato de los parámetros y los filtros.

La paginación está disponible tanto en la nueva API como en el API heredada. Los nuevos parámetros de paginación se detallan a continuación.

  • start-index: indica qué entrada debe comenzar a mostrar los resultados; no se corresponde con el parámetro page del API heredada, que indica qué página de resultados se debe mostrar.
  • max-results: indica el número máximo de entradas que se mostrarán; esto se corresponde al parámetro per_page del API heredada.

Por ejemplo, si vas a procesar 1.000 resultados, 50 cada vez, el start-index de inicio será igual a 1, y el max-results será igual a 50. La siguiente iteración, el start-index será igual a start-index + max-results, 51. En el API heredada, el parámetro page empezará en 1, y per_page será igual a 50. A continuación, el parámetro page aumentará en 2, y así sucesivamente, para el resto de iteraciones.

El API de datos de YouTube añade compatibilidad con los siguientes parámetros de consulta:

Una búsqueda de vídeos relacionados con la palabra “monkey”, con paginación, tendría el siguiente aspecto en el API heredada y el API de datos de YouTube, respectivamente.

http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=DEV_ID&tag=monkey&page=1&per_page=50

http://gdata.youtube.com/feeds/api/videos?vq=monkey&start-index=1&max-results=50

Una solicitud de función común sería ordenar un feed de vídeos por los vídeos más recientes. Para hacer esto con el API de datos de YouTube, añade orderby=published como parámetro.

http://gdata.youtube.com/feeds/api/videos?vq=monkey&orderby=published&start-index=1&max-results=50

Feeds de usuario

Operación

API heredada

API de datos de YouTube

Notas/comentarios

Obtención del perfil de un usuario

users.get_profile&user=USERNAME

/feeds/api/users/USERNAME

 

Obtención de los vídeos de un usuario

videos.list_by_user&user=USERNAME

/feeds/api/users/USERNAME/uploads

 

Obtención de los favoritos de un usuario

users.list_favorite_videos&user=USERNAME

/feeds/api/users/USERNAME/favorites

El API heredada devuelve un máximo de 10 favoritos del usuario.

La nueva API devuelve todos los vídeos favoritos de un usuario con paginación.

Obtención de las listas de reproducción de un usuario

N/A

/feeds/api/users/USERNAME/playlists

El API heredada devuelve sólo 10 comentarios con get_details.

La nueva API devuelve todos los comentarios y conserva la relación principal/secundario.

Obtención de las suscripciones de un usuario

N/A

/feeds/api/users/USERNAME/subscriptions

 

Para mostrar una lista con los vídeos de un usuario concreto a través del API heredada y la nueva API habría que escribir lo siguiente:

http://www.youtube.com/api2_rest?method=youtube.videos.list_by_user&dev_id=DEV_ID&user=USERNAME

http://gdata.youtube.com/feeds/api/users/USERNAME/uploads

Muchos de los filtros que se aplican a los nuevos feeds de vídeos se pueden aplicar a los feeds de usuarios. Por ejemplo, puedes realizar una búsqueda de texto en los vídeos subidos de un usuario.

http://gdata.youtube.com/feeds/api/users/USERNAME/uploads?vq=”dogs on bicycles”

Consulta la guía de referencia para obtener más información sobre qué parámetros de consulta se aplican a cada uno de los feeds.

Feeds de listas de reproducción

Operación

API heredada

API de datos de YouTube

Notas/comentarios

Obtención de los vídeos de una lista de reproducción

videos.list_by_playlist&id=PLAYLIST_ID

/feeds/api/playlists/PLAYLIST_ID

 

Obtención de las listas de reproducción de un usuario

N/A

/feeds/api/users/USERNAME/playlists

 

Para mostrar una lista con los vídeos de una lista de reproducción concreta a través del API heredada habría que escribir lo siguiente:

http://youtube.com/dev_api_ref?m=youtube.videos.list_by_playlist&dev_id=DEV_ID&id=PLAYLIST_ID

Con el API de datos de YouTube, la llamada sería algo así:

http://gdata.youtube.com/feeds/api/playlists/PLAYLIST_ID

Consulta la guía de referencia para obtener más información sobre qué parámetros de consulta se aplican a cada uno de los feeds.

Aspectos generales

Este documento está orientado a programadores que estén desarrollando aplicaciones cliente que interactúen con YouTube. En este documento se complementa la información incluida en el protocolo de la guía del desarrollador, así como en las guías específicas de cada lenguaje para los desarrolladores de Java y PHP.

En este documento se indican los distintos tipos de feeds que puedes recuperar con el API de datos de YouTube. También se incluyen diagramas en los que se explican cómo desplazarse entre los distintos feeds. Por ejemplo, los diagramas muestran que el feed de las listas de reproducción de un usuario contiene direcciones URL asociadas a datos y listas de reproducción individuales, como el perfil de un usuario. Los diagramas también indican cómo desplazarse de un feed a otro. Por último, en este documento se definen los parámetros utilizados en las solicitudes del API de datos de YouTube, así como las etiquetas XML devueltas en una respuesta del API. Para los desarrolladores de Java y PHP, las etiquetas XML se corresponden directamente con una propiedad de un objeto VideoEntry, ProfileEntry u otro tipo de objeto.

Valores de proyección

El API de datos de YouTube ofrece distintas vistas (o proyecciones) de los datos disponibles en el API. En la Guía del desarrollador y en los ejemplos de este documentos se utiliza la proyección api, que admite todas las etiquetas definidas en la sección de definiciones de elementos XML de este documento.

La mayoría de los desarrolladores que hagan uso de este documento utilizarán la proyección api. Sin embargo, si se van a desarrollar aplicaciones para móviles, se puede sustituir “api” por “mobile” en cualquiera de las solicitudes de ejemplo descritas en la documentación del API. De forma similar, si se prefiere utilizar la proyección base, más adecuada para los lectores de feeds, se puede sustituir “api” por “base” en cualquiera de las solicitudes de ejemplo descritas en la documentación del API.

En la tabla siguiente se describen los valores de las proyecciones disponibles:

Nombre de la proyección

Descripción

api

Esta proyección muestra feeds compatibles con todos los elementos XML definidos en este documento, incluidas todas las etiquetas relevantes en los esquemas de YouTube y Media RSS. Todas las propiedades contienen texto sin formato, no texto HTML.

base

Esta proyección muestra feeds Atom básicos sin ningún elemento de extensión. Sus propiedades <atom:summary> y <atom:content> contienen código HTML codificado según la entidad.

mobile

Esta proyección admite la mayoría de los elementos XML definidos en esta documentación y se debe utilizar cuando los desarrolladores deseen crear aplicaciones para móviles.

Tipos de feeds

Puedes recuperar los siguientes tipos de feeds del API de datos de YouTube:

Feeds de vídeos* – hay varios tipos de feeds de vídeos
Feed de listas de reproducción del usuario
Feed de suscripciones del usuario
Feed de comentarios sobre vídeos
Entrada de perfil de usuario
Feed de contactos del usuario

El API permite recuperar cualquiera de estos feeds sin necesidad de autenticación. Sin embargo, en algunos casos las solicitudes autenticadas permiten recuperar información adicional. Por ejemplo, si envías una solicitud autenticada para obtener la lista de los vídeos que ha subido un usuario, el feed contendrá tanto vídeos privados como vídeos rechazados o pendientes. Los vídeos privados, pendientes y rechazados no aparecerán en las respuestas a una solicitud de API sin autenticar ni a una solicitud de vídeos subidos por cualquier usuario que no sea el usuario autenticado actualmente.

Para añadir o actualizar vídeos, listas de reproducción, suscripciones, puntuaciones, comentarios o cualquier otra cosa, deberás autenticar todas las solicitudes, incluidas las solicitudes GET, con una clave de desarrollador mediante el método AuthSub o ClientLogin.

Feeds de vídeos

Los feeds de vídeos devuelven un grupo de entradas de vídeos. Cada entrada de vídeo contiene a su vez información sobre un vídeo específico del conjunto de resultados del feed de vídeos. El API de datos de YouTube permite recuperar los siguientes tipos de feeds de vídeos:

Feed de vídeos
Feed de vídeos relacionados
Feed de respuestas en vídeo
Feeds estándar
Feed de vídeos favoritos del usuario
Feed de lista de reproducción

Videos feed

El API devuelve un feed de vídeos en respuesta a una solicitud de búsqueda de vídeos. Un feed de vídeos puede contener un máximo de 999 entradas. Para recuperar los resultados de la búsqueda, envía una solicitud de API a la siguiente URL:

http://gdata.youtube.com/feeds/projection/videos

Los resultados de las búsquedas pueden utilizar cualquiera de los parámetros de consulta definidos en la sección de referencia de parámetros de consulta de este documento, a excepción del parámetro time. Por ejemplo, la siguiente URL solicitaría todos los vídeos relacionados con la consulta “skateboarding dog,” empezando por el resultado de búsqueda 21º y devolviendo 10 resultados:

http://gdata.youtube.com/feeds/api/videos?

vq=skateboarding+dog

&start-index=21

&max-results=10

Related videos feed

El feed de vídeos relacionados contiene una lista de vídeos relacionados con otro vídeo. YouTube selecciona de forma algorítmica el conjunto de vídeos relacionados.

Cada entrada de vídeo de una respuesta del API contiene una serie de etiquetas <link>. La etiqueta <link> que tiene http://gdata.youtube.com/schemas/2007/#video.related como valor del atributo rel identifica la URL que se utilizará para recuperar otros vídeos relacionados con esa entrada de vídeo. (El atributo href de la etiqueta <link> identifica la URL.)

<link rel=”http://gdata.youtube.com/schemas/2007#video.related

type=”application/atom+xml”

href=”http://gdata.youtube.com/feeds/api/videos/ZTUVgYoeN_b/related”/&gt;

Un feed de vídeos relacionados puede contener un máximo de 100 vídeos.

Video responses feed

Un feed de respuestas en vídeo contiene vídeos creados explícitamente como respuestas a otros vídeos. Del mismo modo que se pueden crear vídeos como respuesta en vídeo a vídeos específicos, puede haber vídeos que no tengan ninguna respuesta en vídeo.

Cada entrada de vídeo de una respuesta del API contiene una serie de etiquetas <link>. La etiqueta <link> que tiene http://gdata.youtube.com/schemas/2007/#video.responses como valor del atributo rel identifica la URL que se utilizará para recuperar respuestas en vídeo correspondientes a esa entrada de vídeo. (El atributo href de la etiqueta <link> identifica la URL que se muestra en el siguiente ejemplo.)

<link rel=”http://gdata.youtube.com/schemas/2007#video.responses&#8221;

type=”application/atom+xml”

href=”http://gdata.youtube.com/feeds/api/videos/ZTUVgYoeN_b/responses”/&gt;

Standard feeds

Los feeds estándar contienen listas de vídeos que reflejan el comportamiento del usuario de YouTube, como feeds de los vídeos más vistos o más valorados, o que han sido seleccionados por el personal de YouTube, como feeds de vídeos móviles y últimos vídeos destacados. Muchos de estos feeds aparecen en la ficha Vídeos del sitio web de YouTube.

Para recuperar un feed estándar, envía una solicitud GET HTTP a la URL asociada a ese feed. En la tabla siguiente se identifica la URL asociada a cada feed estándar:

Nombre

ID del feed

Ejemplo

Más valorados

top_rated

http://gdata.youtube.com/feeds/api/standardfeeds/top_rated

Superfavoritos

top_favorites

http://gdata.youtube.com/feeds/api/standardfeeds/top_favorites

Más vistos

most_viewed

http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed

Más recientes

most_recent

http://gdata.youtube.com/feeds/api/standardfeeds/most_recent

Más comentados

most_discussed

http://gdata.youtube.com/feeds/api/standardfeeds/most_discussed

Más enlazados

most_linked

http://gdata.youtube.com/feeds/api/standardfeeds/most_linked

Con más respuestas

most_responded

http://gdata.youtube.com/feeds/api/standardfeeds/most_responded

Últimos destacados

recently_featured

http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured

Vídeos para teléfonos móviles

watch_on_mobile

http://gdata.youtube.com/feeds/api/standardfeeds/watch_on_mobile

Recuperación de feeds estándar específicos de una región

El API permite recuperar feeds estándar específicos de una región mediante la inserción de una ID de región en la URL del feed estándar. La siguiente URL muestra el formato de las direcciones URL que se deben utilizar para recuperar feeds estándar específicos de una región:

http://gdata.youtube.com/feeds/api/standardfeeds/regionID/feedID

Por ejemplo, para recuperar una lista de los vídeos más valorados en Japón, se debería enviar una solicitud GET HTTP a la siguiente URL:

http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_rated

Nota: no se encuentran disponibles versiones del feed estándar watch_on_mobile específicas de una región.

En la siguiente tabla se identifican los países para los que el API de datos de YouTube admite feeds localizados y la ID de región (regionID) asociada a cada país:

País

ID de región

Australia

AU

Brasil

BR

Canadá

CA

Francia

FR

Alemania

DE

Gran Bretaña

GB

Holanda

NL

Hong Kong

HK

Irlanda

IE

Italia

IT

Japón

JP

México

MX

Nueva Zelanda

NZ

Polonia

PL

Rusia

RU

Corea del Sur

KR

España

ES

Taiwán

TW

Estados Unidos

US

Uso del parámetro de tiempo con feeds estándar

Todos los feeds estándar admiten el parámetro de consulta time, que permite restringir el contenido del feed a los resultados relevantes del día, la semana o el mes anterior. Por ejemplo, para recuperar los vídeos más valorados del día anterior, debes enviar una solicitud GET HTTP a la siguiente URL:

http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?time=today

User’s favorites feed

El feed de vídeos favoritos recupera una lista de los vídeos que un determinado usuario ha marcado explícitamente como favoritos. En el sitio web de YouTube, un usuario puede ver y editar su lista de vídeos favoritos en la página de su cuenta y los vídeos favoritos de un usuario pueden verlos también otros usuarios de YouTube.

  • Para solicitar un feed de los vídeos favoritos del usuario conectado actualmente, envía una solicitud GET HTTP a la URL que aparece a continuación. Nota: Para realizar esta solicitud, deberás incluir un token de autenticación en el encabezado de la solicitud HTTP Authorization. El token de autenticación permite que YouTube identifique al usuario.

    http://gdata.youtube.com/feeds/api/users/default/favorites

  • Para solicitar un feed de los vídeos favoritos de otro usuario, envía una solicitud GET HTTP a la URL que aparece a continuación. Ten en cuenta que esta solicitud no requiere autenticación.

    http://gdata.youtube.com/feeds/api/users/username/favorites

    Debes sustituir el texto username de la URL anterior por el nombre de usuario de YouTube del usuario en cuestión.

El feed de vídeos favoritos devuelve un máximo de 50 entradas. Te recomendamos que apliques una paginación al feed mediante los parámetros de consulta start-index y max-results para optimizar la latencia y el tamaño de la respuesta. El valor recomendado para max-results es 10, valor que genera una respuesta con unos 60 KB de datos.

Playlist feed

Un feed de lista de reproducción contiene información sobre un máximo de 200 vídeos que se pueden ver uno tras otro. Un usuario puede ver y editar su lista de listas de reproducción en la página de su cuenta. Las listas de reproducción de un usuario pueden verlas también otros usuarios de YouTube. Además, los usuarios pueden modificar listas de reproducción específicas añadiendo vídeos a esas listas de reproducción o eliminando vídeos de ellas.

Una lista de reproducción puede ser pública o privada. El API permite recuperar listas de reproducción públicas con o sin autenticación. Sin embargo, sólo podrás recuperar una lista de reproducción privada de un usuario que esté debidamente autenticado y autorizado para ver esa lista de reproducción.

Antes de recuperar un feed de lista de reproducción, es probable que recuperes primero un feed de las listas de reproducción de un usuario, que contendrá una lista de las listas de reproducción creadas por ese usuario. Cada una de las entradas del feed de listas de reproducción del usuario definirá una sola lista de reproducción. (Por otra parte, un feed de lista de reproducción describe los vídeos incluidos en una sola lista de reproducción.) Cada una de las entradas del feed de listas de reproducción del usuario contendrá una etiqueta <gd:feedLink> que identificará la URL que permite recuperar el feed de esa lista de reproducción.

<gd:feedLink rel=’http://gdata.youtube.com/schemas/2007#playlist&#8217;

href=’http://gdata.youtube.com/feeds/api/playlists/PLAYLIST_ID‘/>

Nota: en lugar del término PLAYLIST_ID, la URL real contendrá una ID que representará la identificación exclusiva de la lista de reproducción.

Feed de listas de reproducción del usuario

El feed de listas de reproducción de un usuario contiene una lista de las listas de reproducción creadas por ese usuario. Si solicitas el feed de listas de reproducción del usuario autenticado actualmente, ese feed contendrá listas de reproducción tanto públicas como privadas. Sin embargo, si envías una solicitud sin autenticar o solicitas listas de reproducción creadas por un usuario que no sea el usuario actualmente autenticado, el feed sólo contendrá listas de reproducción públicas.

En un feed de listas de reproducción, cada entrada (entry) contiene información sobre una lista de reproducción, entre la que se incluye el título, la descripción y el autor de la lista de reproducción. La etiqueta <gd:feedLink> de la entrada identifica la URL que permite recuperar el feed de lista de reproducción, que incluye información sobre los vídeos de esa lista de reproducción.

  • Para solicitar un feed de las listas de reproducción del usuario conectado actualmente, envía una solicitud GET HTTP a la URL que aparece a continuación. Nota: Para realizar esta solicitud, deberás incluir un token de autenticación en el encabezado de la solicitud HTTP Authorization. El token de autenticación permite que YouTube identifique al usuario.

    http://gdata.youtube.com/feeds/api/users/default/playlists

  • Para solicitar un feed de las listas de reproducción de otro usuario, envía una solicitud GET HTTP a la URL que aparece a continuación. Ten en cuenta que esta solicitud no requiere autenticación.

    http://gdata.youtube.com/feeds/api/users/username/playlists

    Debes sustituir el texto username de la URL anterior por el nombre de usuario de YouTube del usuario en cuestión.

Feed de suscripciones del usuario

El feed de suscripciones de un usuario contiene una lista de los canales, los vídeos favoritos y las consultas a las que está suscrito ese usuario.

  • Para solicitar un feed de las suscripciones del usuario conectado actualmente, envía una solicitud GET HTTP a la URL que aparece a continuación. Nota: Para realizar esta solicitud, deberás incluir un token de autenticación en el encabezado de la solicitud HTTP Authorization. El token de autenticación permite que YouTube identifique al usuario.

    http://gdata.youtube.com/feeds/api/users/default/subscriptions

  • Para solicitar un feed de las suscripciones de otro usuario, envía una solicitud GET HTTP a la URL que aparece a continuación. Ten en cuenta que esta solicitud no requiere autenticación.

    http://gdata.youtube.com/feeds/api/users/username/subscriptions

    Debes sustituir el texto username de la URL anterior por el nombre de usuario de YouTube del usuario en cuestión.

En un feed de suscripciones, cada entrada (entry) contiene información sobre una suscripción. Cada entrada contiene las siguientes etiquetas de clave:

  • La etiqueta <gd:feedLink> de la entrada identifica la URL que permite recuperar los vídeos de la suscripción.
  • El valor del atributo scheme de una de las etiquetas <category> de la entrada será http://gdata.youtube.com/schemas/2007/subscriptiontypes.cat. El atributo term de esa etiqueta indica si la entrada describe una suscripción a un canal (term=”channel”), a la lista de vídeos favoritos de otro usuario (term=”favorites”) o a los vídeos que coincidan con determinadas palabras clave (term=”query”).
  • Si se trata de una suscripción al canal o a la lista de vídeos favoritos de otro usuario, la etiqueta <yt:username> identificará al usuario al que pertenezca el canal o la lista de vídeos favoritos.

    Si se trata de una suscripción a consultas por palabra clave, el elemento <yt:queryString> contendrá el término de consulta objeto de la suscripción.

Feed de comentarios sobre vídeos

Cada entrada de vídeo contiene una etiqueta <gd:comments>, que incluye la URL a la que se enviarán las solicitudes del API que se deberán recuperar o añadir a la lista de comentarios del vídeo. El ejemplo de XML que aparece a continuación permite comprobar cómo aparecerá esta URL en un feed de vídeos:

<feed>

<entry>


<media:group>


</media:group>

<gd:comments>

<gd:feedLink href=’http://gdata.youtube.com/feeds/api/videos/VIDEO_ID/comments‘/>

</gd:comments>

</entry>

</feed>

Cada entrada del feed de comentarios contiene información sobre un comentario. Cada comentario tiene un autor, un título y un contenido.

Entrada de perfil de usuario

Un perfil de usuario contiene la información que ese usuario ha incluido en su página de perfil de YouTube.

Nota: Aunque muchas respuestas del API contienen información sobre el feed de respuestas y una lista de entradas, la solicitud de recuperación de un perfil sólo contiene una entrada. De ahí que la etiqueta raíz de la respuesta del API correspondiente a esta solicitud sea <entry>.

Feed de contactos del usuario

El feed de contactos de un usuario incluye todos los contactos del usuario especificado.

  • Para solicitar la lista de contactos del usuario conectado actualmente, envía una solicitud GET HTTP a la URL que aparece a continuación. Nota: Para realizar esta solicitud, deberás incluir un token de autenticación en el encabezado de la solicitud HTTP Authorization. El token de autenticación permite que YouTube identifique al usuario.

    http://gdata.youtube.com/feeds/api/users/default/contacts

  • Para solicitar la lista de contactos de otro usuario, envía una solicitud GET HTTP a la URL que aparece a continuación. Ten en cuenta que esta solicitud no requiere autenticación.

    http://gdata.youtube.com/feeds/api/users/username/contacts

    Debes sustituir el texto username de la URL anterior por el nombre de usuario de YouTube del usuario en cuestión.

Los contactos se pueden clasificar como amigos (Friends) o familiares (Family).

Desplazamiento por los feeds

Cada entrada y feed utiliza etiquetas <link rel=”relationshipID”> y elementos <gd:feedLink rel=”relationshipID”> que contienen enlaces a entradas o feeds relacionados. Por lo general, una etiqueta <link> identifica una relación entre feeds relacionados, pero no anidados. Por otra parte, una etiqueta <gd:feedLink> identifica a un feed que podría estar anidado con la respuesta original de no ser porque ese anidamiento provocaría un aumento excesivo del tamaño del feed.

Estas etiquetas identifican URL que te permitirán implementar funciones de API sin codificar URL en tu aplicación. Por ejemplo, el siguiente elemento <link>, que podría aparecer en una entrada de vídeo, proporciona un enlace a un feed que contiene respuestas en vídeo para esa entrada.

<link rel=”http://gdata.youtube.com/schemas/2007#video.responses&#8221;

type=”application/atom+xml”

href=”http://gdata.youtube.com/feeds/api/videos/UwOA8H5Vaak/responses”/&gt;

Del mismo modo, el siguiente elemento <gd:feedLink> podría aparecer en una entrada de perfil de usuario. Esta etiqueta identifica la URL que permitiría recuperar un feed de los contactos de ese usuario.

<gd:feedLink

rel=”http://gdata.youtube.com/schemas/2007#user.contacts&#8221;

href=”http://gdata.youtube.com/feeds/api/users/liz/contacts”/&gt;

En los casos de uso incluidos en la Guía del desarrollador se explica la forma de desplazarse entre los distintos feeds. Además, el siguiente diagrama muestra las interconexiones existentes entre los feeds del API de datos de YouTube. Las flechas continuas designan elementos <link> y las flechas discontinuas designan elementos <gd:feedLink>. Las flechas azules designan enlaces <link rel=”related”>. Una entrada de suscripción puede contener una etiqueta <gd:feedLink> que apunte a un determinado tipo de feed según el tipo de suscripción que describa esa entrada.

El último término de cada círculo representa el tipo de entradas de Google Data de un feed determinado. Por ejemplo, un feed de suscripciones contendrá entradas del tipo “suscription” y un feed de vídeos contendrá entradas del tipo “video”.


Códigos de respuesta HTTP para solicitudes del API de datos de YouTube

En esta sección se explican los códigos de respuesta HTTP que devuelve YouTube para distintos tipos de solicitudes del API.

Recuperación de feeds

  • Un código de respuesta 200 indica que YouTube ha procesado correctamente una solicitud GET HTTP de recuperación de un feed.
  • Un código de respuesta 400 identifica una solicitud errónea. Por ejemplo, recibirás un código de respuesta 400 si envías una solicitud a una URL incorrecta o incluyes en la solicitud un parámetro no admitido o inexistente. En el contenido de la respuesta del API se explicará el motivo por el que el API ha devuelto un código de respuesta 400.

Subida de un vídeo

  • Subida basada en navegador
    • 200: El API devuelve un código de respuesta 200 si subes correctamente los metadatos de un vídeo. En la sección Subida de metadatos de vídeos de la guía del desarrollador se explica este proceso de forma más detallada.
    • 301: Si el usuario sube un archivo de vídeo directamente a YouTube a través del formulario de tu sitio, YouTube enviará un mensaje de redirección 301 al navegador del usuario, que hará que el navegador solicite y cargue la URL que hayas especificado mediante el parámetro nexturl en el formulario de subida. (Consigue más información sobre el formulario de subida.) YouTube añadirá a esa URL las variables indicadas a continuación, que tendrás que extraer para ofrecer un servicio adecuado al usuario.
      • id: Este parámetro de solicitud identifica la ID de vídeo de un vídeo que se acaba de crear.
      • status: Este parámetro de solicitud indica si el usuario ha subido correctamente el vídeo. El valor será 200 si el vídeo se ha subido correctamente, y 4xx o 5xx (por ej., 400, 403, 503, etc.) en caso contrario.
      • code: Este parámetro de solicitud ofrece información adicional referente a los motivos por los que no se ha subido un vídeo correctamente. Entre los posibles valores de este parámetro se encuentran “INVALID_TOKEN”, “MISSING_TOKEN”, “DUPLICATE”, “TOKEN_EXPIRED” y “FILE_MISSING”.
  • Subida directa
    • 201: El API devuelve un código de respuesta 201 si el vídeo se sube correctamente.
    • 400 (Solicitud errónea): Un código de respuesta 400 indica que la solicitud no tenía un formato correcto o contenía datos no válidos. Por ejemplo, el API devolverá un código de respuesta 400 si tu solicitud contiene XML de formato incorrecto o si intentas enviar palabras clave que incluyan caracteres no válidos.

Adición de información con POST HTTP

El API devuelve los códigos de respuesta indicados a continuación para las solicitudes de adición de recursos, tales como puntuaciones, comentarios, respuestas en vídeo, reclamaciones, vídeos favoritos, listas de reproducción, entradas de listas de reproducción, suscripciones y contactos.

  • 201 (Creado): Un código de respuesta 201 indica que se ha procesado correctamente una solicitud POST HTTP de adición de una puntuación, un comentario, una reclamación, una respuesta en vídeo, una suscripción, una lista de reproducción o un contacto.
  • 400 (Solicitud errónea): Un código de respuesta 400 indica que la solicitud no tenía un formato correcto o contenía datos no válidos. Por ejemplo, el API devolverá un código de respuesta 400 si tu solicitud contiene XML de formato incorrecto o si intentas enviar una puntuación de “16” para un vídeo, cuando la puntuación debe estar comprendida entre 1 y 5. En el contenido de la respuesta del API se explicará el motivo por el que el API ha devuelto un código de respuesta 400.

Actualización de información con PUT HTTP

El API devuelve los códigos de respuesta indicados a continuación para las solicitudes de actualización de recursos, tales como vídeos, listas de reproducción, entradas de listas de reproducción y contactos.

  • 200 (Correcto): Un código de respuesta 200 indica que YouTube ha procesado correctamente una solicitud PUT HTTP de actualización de un recurso.
  • 400 (Solicitud errónea): Un código de respuesta 400 indica que la solicitud no tenía un formato correcto o contenía datos no válidos. En el contenido de la respuesta del API se explicará el motivo por el que el API ha devuelto un código de respuesta 400.

Eliminación de recursos con DELETE HTTP

El API devuelve los códigos de respuesta indicados a continuación para las solicitudes de eliminación de recursos, tales como vídeos, respuestas en vídeo, vídeos favoritos, listas de reproducción, entradas de listas de reproducción, suscripciones y contactos.

  • 200 (Correcto): Un código de respuesta 200 indica que YouTube ha procesado correctamente una solicitud DELETE HTTP de eliminación de un recurso.
  • 401 (Sin autorización): Un código de respuesta 401 indica que una solicitud no contenía un encabezado Authorization, que el formato del encabezado Authorization no era válido o que el token de autenticación proporcionado en el encabezado no era válido.
  • 403 (Prohibido): Un código de respuesta 403 indica que se ha enviado una solicitud que no estaba correctamente autenticada para la operación solicitada.
  • 404 (No encontrado): Un código de respuesta 404 indica que se ha intentado modificar un recurso inexistente. Por ejemplo, recibirás un código de respuesta 404 si intentas eliminar una suscripción, pero has especificado una URL incorrecta para esa suscripción.

Códigos de respuesta adicionales para solicitudes incorrectas

El API puede devolver también los siguientes códigos de respuesta:

  • 401 (Sin autorización): Un código de respuesta 401 indica que una solicitud no contenía un encabezado Authorization, que el formato del encabezado Authorization no era válido o que el token de autenticación proporcionado en el encabezado no era válido.
  • 403 (Prohibido): Un código de respuesta 403 indica que se ha enviado una solicitud que no estaba correctamente autenticada para la operación solicitada.
  • 500 (Error interno): Un código de respuesta 500 indica que YouTube ha experimentado un error al procesar una solicitud. Puedes probar a enviar de nuevo la solicitud más adelante.
  • 501 (Sin implementar): Un código de respuesta 501 indica que se ha intentado ejecutar una operación no admitida como, por ejemplo, recuperar una lista de puntuaciones o actualizar una reclamación.
  • 503 (Servicio no disponible): Un código de respuesta 503 indica que no se ha podido acceder al API de datos de YouTube. Puedes probar a enviar de nuevo la solicitud más adelante.

Búsqueda de vídeos

Para buscar vídeos, envía una solicitud GET HTTP a la siguiente URL, añadiendo los parámetros de consulta apropiados a tu solicitud:

http://gdata.youtube.com/feeds/api/videos

Por ejemplo, una solicitud enviada a la siguiente URL buscará el segundo conjunto de los 10 vídeos subidos recientemente que coincidan con el término de consulta “football”, pero no con “soccer”:

http://gdata.youtube.com/feeds/api/videos?

vq=football+-soccer

&orderby=published

&start-index=11

&max-results=10

Definiciones de parámetros de consulta

Standard Google Data API parameters

El API de datos de YouTube admite los siguientes parámetros de consulta de Google Data estándar.

Nombre

Definición

alt

El parámetro alt especifica el formato del feed que se va a devolver. Los valores válidos de este parámetro son atom, rss y json. El valor predeterminado es atom (en este documento sólo se explica el formato de las respuestas Atom).

author

El parámetro author restringe la búsqueda a los vídeos subidos por un determinado usuario de YouTube. En la sección sobre vídeos subidos por un usuario específico se explica este parámetro de forma más detallada.

max-results

El parámetro max-results especifica el número máximo de resultados que se deben incluir en el conjunto de resultados. Este parámetro funciona junto con el parámetro start-index para determinar los resultados que se deben devolver. Por ejemplo, para solicitar el segundo conjunto de 10 resultados (es decir, los resultados 11 a 20), deberás establecer el parámetro max-results en 10 y el parámetro start-index en 11. El valor predeterminado de este parámetro para todas las API de datos de Google es 25 y el valor máximo es 50. Sin embargo, para mostrar listas de vídeos, te recomendamos que establezcas el parámetro max-results en 10.

start-index

El parámetro start-index permite especificar el índice del primer resultado coincidente que se deberá incluir en el conjunto de resultados. Este parámetro utiliza un índice de base 1, lo que significa que el primer resultado es 1, el segundo es 2 y así sucesivamente. Este parámetro trabaja en combinación con el parámetro max-results para determinar qué resultados se devolverán. Por ejemplo, para solicitar el segundo conjunto de 10 resultados (es decir, los resultados 11 a 20), deberás establecer el parámetro start-index en 11 y el parámetro max-results en 10.

Consulta la referencia del protocolo de las API de datos de Google para obtener más información sobre funciones estándar del API de datos de Google o sobre estos parámetros específicos.

Custom parameters for the YouTube Data API

Además de los parámetros de consulta de Google Data, el API de datos de YouTube define los siguientes parámetros de consulta específicos del API. Estos parámetros sólo están disponibles en feeds de listas de reproducción y vídeos.

Nombre

Definición

vq

El parámetro vq especifica un término de consulta para una búsqueda. YouTube buscará todos los metadatos de los vídeos que coincidan con el término. Los metadatos de los vídeos incluyen títulos, palabras clave, descripciones, nombres de usuario de los autores y categorías.

Ten en cuenta que a todos los espacios, las comillas y otros signos de puntuación del valor del parámetro se les debe aplicar un formato de escape URL.

Para buscar una frase exacta, escriba la frase entre comillas dobles. Por ejemplo, para buscar vídeos que coincidan con la frase “spy plane”, establece el parámetro vq en %22spy+plane%22.

Tu solicitud puede utilizar los operadores booleanos NOT (-) y OR (|) para excluir vídeos o buscar vídeos asociados a uno de los distintos términos de búsqueda. Por ejemplo, para buscar vídeos que coincidan con “boating” o “sailing”, establece el parámetro vq en boating%7Csailing. (Ten en cuenta que se debe aplicar un formato de escape URL al carácter de barra vertical.) De forma similar, para buscar vídeos que coincidan con “boating” o “sailing” pero no con “fishing”, establece el parámetro vq en “boating&7Csailing+-fishing”.

orderby

El parámetro orderby permite especificar el valor que se utilizará para ordenar vídeos en el conjunto de resultados de la búsqueda. Los valores válidos de este parámetro son relevance, published, viewCount y rating. Además, puedes solicitar los resultados más relevantes para un idioma en particular estableciendo el valor de parámetro en relevance_lang_languageCode, donde languageCode es un código de idioma de dos letras ISO 639-1. (Utiliza los valores zh-Hans para chino simplificado y zh-Hant para chino tradicional.) Además, ten en cuenta que los resultados en otros idiomas se obtendrán si presentan un alto nivel de relevancia con el término de consulta de la búsqueda.

El valor predeterminado de este parámetro es relevance para un feed de resultados de búsqueda. Para un feed de lista de reproducción, el orden predeterminado se basa en la posición de cada vídeo en la lista de reproducción. En el caso de un feed de listas de reproducción o suscripciones de un usuario, el orden predeterminado es arbitrario.

format

El parámetro format permite especificar en qué formato deben estar disponibles los vídeos. Tu solicitud podrá especificar cualquiera de los formatos siguientes:

Valor

Formato de vídeo

1

URL de transmisión RTSP para la reproducción de vídeos de dispositivos móviles. Vídeo H.263 (hasta 176×144) y audio AMR.

5

URL HTTP en el reproductor Flash (SWF) insertable de este vídeo. Este formato no está disponible para los vídeos que no se pueden insertar. Los desarrolladores añaden con frecuencia &format=5 a sus consultas para restringir los resultados a los vídeos que se pueden insertar en sus sitios.

6

URL de transmisión RTSP para la reproducción de vídeos de dispositivos móviles. Vídeo MPEG-4 SP (hasta 176×144) y audio AAC.

lr

El parámetro lr permite restringir la búsqueda de vídeos que tengan el título, la descripción o las palabras clave en un idioma específico. Los valores válidos del parámetro lr son códigos de idioma de dos letras ISO 639-1. También puedes utilizar los valores zh-Hans para chino simplificado y zh-Hant para chino tradicional. Este parámetro también se puede utilizar para solicitar cualquier feed de vídeos que no sea un feed estándar.

racy

El parámetro racy permite incluir contenido restringido y contenido estándar en el conjunto de resultados de una búsqueda. Los valores válidos de este parámetro son include y exclude. De forma predeterminada, se excluye el contenido restringido. Las entradas de feeds de los vídeos que incluyen contenido restringido presentan un elemento <yt:racy> adicional.

restriction

El parámetro restriction identifica la dirección IP que se debe utilizar para filtrar vídeos que sólo se pueden reproducir en países específicos. De forma predeterminada, el API excluye los vídeos que no se pueden reproducir en el país desde el que se envían las solicitudes del API. Esta restricción se basa en la dirección IP de la aplicación del cliente.

Para solicitar vídeos reproducibles desde un equipo específico, incluye el parámetro “restriction” en tu solicitud y establece como valor del parámetro la dirección IP del equipo en el que se reproducirán los vídeos, por ejemplo restriction=255.255.255.255.

Para solicitar vídeos reproducibles desde un país específico, incluye el parámetro “restriction” en tu solicitud y establece como valor del parámetro el código de país de dos letras ISO 3166 del país en el que se reproducirán los vídeos, por ejemplo restriction=DE.

time

El parámetro time, que sólo está disponible para los feeds estándar top_rated, top_favorites, most_viewed, most_discussed, most_linked y most_responded, restringe la búsqueda para vídeos subidos dentro del período de tiempo especificado. Los valores válidos de este parámetro son today (1 día), this_week (7 días), this_month (1 mes) y all_time. El valor predeterminado de este parámetro es all_time.

Búsquedas por categoría en feeds de vídeos

Los vídeos de YouTube se pueden clasificar de dos formas:

Utiliza la siguiente URL para recuperar vídeos de una categoría específica o etiquetados con una etiqueta de desarrollador o palabra clave específica:

http://gdata.youtube.com/feeds/api/videos/-/category_or_tag

El guión (-) de la URL es una notación del API de datos de Google estándar que indica que el resto de la URL se compone de una serie de una o varias etiquetas. Las siguientes directrices proporcionan más detalles sobre la solicitud de vídeos asociados a etiquetas o categorías específicas:

Definiciones de elementos XML

El API de datos de YouTube utiliza etiquetas de diversos esquemas XML. En la siguiente tabla aparecen los distintos esquemas que el API utiliza, el prefijo de espacio de nombre asociado a cada esquema y la URL de espacio de nombre de cada esquema.

Esquema

Prefijo de espacio de nombre

URL de esquema

Formato de sindicación Atom

[Ninguno] – es el espacio de nombre predeterminado

http://www.w3.org/2005/Atom

Esquema de OpenSearch

openSearch

http://a9.com/-/spec/opensearchrss/1.0/

Media RSS

media

http://search.yahoo.com/mrss/

Esquema XML de YouTube

yt

http://gdata.youtube.com/schemas/2007

Esquema de datos de Google

gd

http://schemas.google.com/g/2005

GeoRSS

georss

http://www.georss.org/georss

Lenguaje de marcado geográfico

gml

http://www.opengis.net/gml

Atom Publishing Protocol

app

http://www.w3.org/2007/app

En las tablas que aparecen a continuación se definen las etiquetas XML de cada uno de estos esquemas que aparecen en las solicitudes y respuestas del API. Cada tabla contiene la definición de una única etiqueta, y las etiquetas aparecen en orden alfabético según el esquema.

Junto a algunas etiquetas secundarias de las definiciones que se muestran a continuación pueden aparecer determinados símbolos. Estos símbolos y sus significados son los siguientes:

? = etiqueta secundaria opcional
* = cero o más instancias de la etiqueta secundaria
+ = una o varias instancias de la etiqueta secundaria

Referencia de elementos de Atom
 
Referencia de elementos de OpenSearch
 
Referencia de elementos de YouTube
 
Referencia de elementos de Media RSS
 
Referencia de elementos de Google Data
 
Referencia de elementos de GeoRSS
 
Referencia de elementos de GML
 
Referencia de elementos de Atom Publishing Protocol
 
Referencia de elementos de respuesta del API de subidas basadas en navegador
 
Referencia de elementos de respuesta a errores
 

Referencia de elementos de Atom

author

La etiqueta <author> contiene información sobre el usuario de YouTube a quien pertenece una parte de contenido de vídeo, una suscripción, una lista de vídeos favoritos, un contacto u otra entidad.

Ejemplo

<author>

Secundaria de

feed, entry

Secundarias

name, uri

category

La etiqueta <category> especifica la categoría a la que pertenece la entrada.

  • Cuando la etiqueta <category> aparece como una subetiqueta de <feed> o <entry>, la etiqueta puede identificar el tipo de elemento descrito en cada entrada de feed. El valor del atributo scheme es http://schemas.google.com/g/2005#kind y el valor del atributo term indica si las entradas de feeds describen vídeos, enlaces de listas de reproducción, suscripciones, contactos u otro tipo de entidad.
  • Cuando la etiqueta <category> aparece como una subetiqueta de <entry> y la entrada describe un vídeo, la etiqueta también puede especificar una palabra clave concreta o una categoría asociada a dicho vídeo. En este caso, el atributo scheme indica si el valor de atributo term hace referencia a una palabra clave o a una categoría.

La etiqueta <category> es obligatoria en las solicitudes para añadir una suscripción o para añadir o actualizar un contacto:

  • En una solicitud de adición de una suscripción, la etiqueta <category> indica si el usuario se va a suscribir a un canal, a la lista de favoritos de otro usuario o a una etiqueta de palabra clave:
    • Si el usuario se va a suscribir a un canal, el valor del atributo term de la etiqueta <category> debe ser channel.
    • Si el usuario se va a suscribir a la lista de favoritos de otro usuario, el valor del atributo term de la etiqueta <category> debe ser favorites.
    • Si el usuario se va a suscribir a una etiqueta de palabra clave, el valor del atributo term de la etiqueta <category> debe ser query.
  • En una solicitud de adición o actualización de un contacto, la etiqueta indica si el contacto es un amigo o un familiar.
    • Si el contacto es un familiar, el valor del atributo term de la etiqueta <category> debe ser Family.
    • Si el contacto es un amigo, el valor del atributo term de la etiqueta <category> debe ser Friends.

Atributos

Nombre

Formato

Descripción

scheme

Complejo

El atributo scheme especifica un identificador uniforme de recursos (URI) que identifica el esquema de categorización asociado a la etiqueta.

term

Complejo

El atributo term identifica el tipo de entidad contenida en una entrada de feed, o en una categoría o palabra clave asociada a un vídeo.

  • En una solicitud de adición de una suscripción, el valor del atributo term puede ser channel, favorites o query.
  • En una solicitud de adición de un contacto, el valor del atributo term puede ser Family o Friends.

label

Complejo

El atributo label especifica el nombre de secuencias de escape de la entidad de la categoría de YouTube a la que pertenece el vídeo. Este atributo sólo se incluye en las etiquetas <category> que hacen referencia a una categoría (y no a un tipo de entidad ni palabra clave).

Ejemplo

<category scheme=’http://gdata.youtube.com/schemas/2007/subscriptiontypes.cat&#8217; term=’channel’/>

Secundaria de

feed, entry

content

La etiqueta <content> contiene el texto de un comentario o una descripción de un vídeo o una lista de reproducción. Si la etiqueta <content> aparece en una entrada de vídeo o de lista de reproducción, puede contener la misma descripción que aparece en la etiqueta <media:description>.

La etiqueta <content> es obligatoria en una solicitud de adición de un comentario.

Ejemplo

<content type=”text”>Video comments are cool.</content>

Secundaria de

entry

entry

La etiqueta <entry> incluye información sobre un vídeo, una lista de reproducción, una suscripción, un contacto u otra entidad. La etiqueta <entry> es la etiqueta raíz de todas las solicitudes del API de datos de YouTube para añadir (POST) o actualizar (PUT) datos.

Ejemplo

<entry>

Secundaria de

feed

Secundarias

En una entrada de lista de reproducción o vídeo:
id, published, updated, category*, title?, content?, link*, author?, media:group?, yt:description? (esta etiqueta sólo aparece en una entrada de lista de reproducción), yt:position? (esta etiqueta sólo aparece en una entrada de lista de reproducción), yt:statistics?, gd:comments?, gd:rating?, location?, yt:recorded?, georss:where?, app:control?

En un feed de comentarios:
id, published, updated, category*, title?, content?, link*, author?

En un feed de listas de reproducción:
id, published, updated, category*, title?, content?, link*, author?, yt:description?, gd:feedLink

En un feed de suscripciones:
id, published, updated, category*, title?, content?, link*, author?, yt:username?, yt:queryString?, gd:feedLink

En una entrada de perfil:
id, published, updated, category*, title?, content?, link*, author?, yt:age?, yt:books?, yt:company?, firstName?, yt:gender?, yt:hobbies?, lastName?, yt:location?, yt:movies?, yt:music?, yt:occupation?, yt:school?, yt:username?, yt:statistics?, media:thumbnail?, gd:feedLink*

Adición de vídeos favoritos:
id

Adición y actualización de listas de reproducción:
title, yt:description, yt:private

Adición y actualización de entradas de listas de reproducción:
title, yt:description, yt:position

Adición de suscripciones:
category, yt:username, yt:queryString

Adición y actualización de contactos:
category, yt:username

Adición de comentarios:
content

Adición de respuestas en vídeo:
id

Adición de puntuaciones:
gd:rating

Adición de reclamaciones:
yt:description

feed

La etiqueta <feed> es la etiqueta raíz de varios tipos de feeds del API de datos de YouTube, incluidos los feeds de vídeos, feeds de suscripciones, feeds de listas de reproducción, feeds de vídeos favoritos y feeds de contactos. Un feed contiene una serie de elementos <entry>. Cada elemento contiene información sobre un vídeo, una lista de reproducción, una suscripción u otra entidad individual.

Ejemplo

<feed xmlns=’http://www.w3.org/2005/Atom&#8217; xmlns:openSearch=’http://a9.com/-/spec/opensearchrss/1.0/&#8217; xmlns:media=’http://search.yahoo.com/mrss/&#8217; xmlns:yt=’http://gdata.youtube.com/schemas/2007&#8242; xmlns:gd=’http://schemas.google.com/g/2005′&gt;

Secundarias

id, updated, category*, title, logo?, link*, author?, generator, openSearch:itemsPerPage?, openSearch:startIndex?, openSearch:totalResults?, entry+

generator

La etiqueta <generator> identifica el software utilizado para crear el feed. Esta información se debe utilizar con fines de depuración.

Atributos

Nombre

Formato

Descripción

version

Complejo

El atributo version especifica la versión del software utilizada para generar el feed.

uri

Complejo

El atributo uri especifica un identificador uniforme de recursos (URI) relacionado con el software de generación del feed.

Ejemplo

<generator version=’beta’ uri=’http://gdata.youtube.com/’>YouTube data API</generator>

Secundaria de

feed

id

La etiqueta <id> especifica un identificador uniforme de recursos (URI) que identifica de forma permanente y exclusiva una entrada de vídeo o feed.

Ejemplo

<id>http://gdata.youtube.com/feeds/api/users/andyland74/subscriptions/5c56f45db338111c</id>

Secundaria de

feed, entry

link

La etiqueta <link> contiene una referencia IRI relevante para una entrada de feed o un feed.

Atributos

Nombre

Formato

Descripción

rel

Complejo

El atributo rel indica la forma en que el identificador uniforme de recursos (URI) especificado en el atributo href está relacionado con el conjunto de resultados actual:

  • Si el valor del atributo rel es self, el enlace identificará la URL que se deberá utilizar para recuperar información sobre el feed o sobre una entrada concreta del feed.
  • Si el valor del atributo rel es edit, el enlace identificará la URL que se deberá utilizar para modificar una entrada de feed.
  • Si el valor del atributo rel es alternate, el enlace identificará una URL que mostrará una presentación distinta del feed como, por ejemplo, un enlace a la representación HTML de dicha entrada de feed.
  • Si el valor del atributo rel es prev, el enlace apuntará a la página anterior del conjunto de resultados del feed.
  • Si el valor del atributo rel es next, el enlace apuntará a la página siguiente del conjunto de resultados del feed.
  • Si el valor del atributo rel es related, el enlace identificará otro feed relacionado con el feed actual. Por ejemplo, si el feed contiene una lista de entradas de contacto, el enlace relacionado de un contacto deberá apuntar al feed del perfil de dicho contacto.
  • El atributo rel también puede contener un enlace a un esquema que identifique el tipo de entidad relacionada con el enlace correspondiente. Por ejemplo, una entrada de vídeo contiene etiquetas <link> que apuntan a respuestas, puntuaciones, reclamaciones y vídeos relacionados con dicho vídeo. Algunas de esas etiquetas <link> se pueden utilizar para recuperar feeds adicionales como, por ejemplo, vídeos relacionados y respuestas en vídeo, mientras que otras se pueden utilizar para publicar datos como, por ejemplo, una puntuación o una reclamación.

type

Complejo

El atributo type especifica el tipo de medio del recurso de la URL asociada. Los enlaces de una respuesta del API de datos de YouTube suelen hacer referencia a una página HTML u otra respuesta del API (feed de Atom). Por ello, los valores más comunes del atributo type son text/html y application/atom+xml.

href

Complejo

El atributo href especifica un identificador uniforme de recursos (URI) que identifica el recurso identificado en la etiqueta <link>.

Ejemplo

<link rel=’http://gdata.youtube.com/schemas/2007#video.related&#8217; type=’application/atom+xml’ href=’http://gdata.youtube.com/feeds/api/videos/AlPqL7IUT6M/related’/&gt;

Secundaria de

feed, entry

logo

La etiqueta <logo> especifica una imagen que proporciona información visual al feed. El logotipo de un feed del API de datos de YouTube es el logotipo de YouTube.

Ejemplo

<logo>http://www.youtube.com/img/pic_youtubelogo_123x63.gif</logo&gt;

Secundaria de

feed

name

La etiqueta <name> contiene el nombre de usuario de YouTube del autor.

Ejemplo

<name>andyland74</name>

Secundaria de

author

published

La etiqueta <published> especifica la hora de creación de una entrada de feed.

Ejemplo

<published>2007-10-15T15:39:34.000-07:00</published>

Secundaria de

entry

title

La etiqueta <title> proporciona un título legible para un feed o una entrada de un feed. Esta etiqueta también es obligatoria para añadir listas de reproducción y es opcional para añadir o actualizar entradas de listas de reproducción.

  • En una solicitud de adición o actualización de una lista de reproducción, la etiqueta <title> especifica el título de la lista de reproducción.
  • En una solicitud de adición o actualización de una entrada de lista de reproducción, la etiqueta <title> especifica el título personalizado que el usuario desea mostrar en la lista de reproducción en lugar del título real del vídeo. Si el usuario no proporciona un título personalizado, YouTube mostrará el título real del vídeo en la lista de reproducción.

Ejemplo

<title type=’text’>andyland74’s Subscriptions</title>

Secundaria de

feed, entry

updated

La etiqueta <updated> especifica la hora de la última actualización de un feed o una entrada de feed.

Ejemplo

<updated>2007-10-15T15:39:34.000-07:00</updated>

Secundaria de

feed, entry

uri

La etiqueta <uri> contiene una URL relacionada con elauthor.

Ejemplo

<uri>http://gdata.youtube.com/feeds/api/users/andyland74</uri&gt;

Secundaria de

author

Referencia de elementos de OpenSearch

openSearch:itemsPerPage

La etiqueta <openSearch:itemsPerPage> indica cuántas entradas aparecen en una respuesta del API.

Ejemplo

<openSearch:itemsPerPage>25</openSearch:itemsPerPage>

Secundaria de

feed

openSearch:startIndex

La etiqueta <openSearch:startIndex> identifica el índice de base 1 del primer elemento devuelto en el feed.

Ejemplo

<openSearch:startIndex>1</openSearch:startIndex>

Secundaria de

feed

openSearch:totalResults

La etiqueta <openSearch:totalResults> identifica el número de elementos del conjunto de resultados del feed. Ten en cuenta que este valor es una aproximación y que es posible que no represente el valor exacto. No debes utilizar este valor para crear enlaces de paginación. Utiliza las etiquetas <link rel=”next”> y <link rel=”prev”> para determinar si deseas mostrar enlaces de paginación o no:

<link rel=”next” type=”application/atom+xml” href=”http://gdata.youtube.com/feeds/videos?start-index=26&max-results=25″/&gt;

Si el feed contiene una etiqueta <link> cuyo valor de atributo rel es next, aparecerá otra página de resultados. Si no, la página actual será la última del conjunto de resultados. Del mismo modo, si el feed contiene una etiqueta <link> cuyo valor de atributo rel es prev, aparecerá una página anterior de resultados. Si no, la página actual será la primera del conjunto de resultados.

Ejemplo

<openSearch:totalResults>36</openSearch:totalResults>

Secundaria de

feed

Referencia de elementos de YouTube

yt:age

La etiqueta <yt:age> especifica la edad del usuario, que se calcula en función de la fecha de nacimiento proporcionada en el perfil de YouTube del usuario. La etiqueta <yt:age> aparece en el feed de perfil de usuario.

Ejemplo

<yt:age>33</yt:age>

Secundaria de

entry

yt:books

La etiqueta <yt:books> identifica los libros favoritos del usuario introducidos en su perfil público de YouTube.

Ejemplo

<yt:books>Catch-22</yt:books>

Secundaria de

entry

yt:company

La etiqueta <yt:company> identifica la empresa en la que trabaja el usuario introducida por éste en su perfil público de YouTube.

Ejemplo

<yt:company>Google</yt:company>

Secundaria de

entry

yt:description

La etiqueta <yt:description> contiene la descripción introducida por un usuario para una lista de reproducción, una descripción personalizada introducida por un usuario para un vídeo de una lista de reproducción o el texto de una reclamación.

Ejemplo

<yt:description>My new playlist description</yt:description>

Secundaria de

entry

yt:duration

La etiqueta <yt:duration> especifica la duración del vídeo en segundos.

Atributos

Nombre

Formato

Descripción

seconds

Complejo

El atributo seconds indica la duración de un vídeo en segundos.

Ejemplo

<yt:duration seconds=’344’/>

Secundaria de

media:group

yt:firstName

La etiqueta <yt:firstName> especifica el nombre del usuario.

Ejemplo

<yt:firstName>John</yt:firstName>

Secundaria de

entry

yt:gender

La etiqueta <yt:gender> especifica el sexo del usuario introducido en su perfil público de YouTube.

Ejemplo

<yt:gender>m</yt:gender>

Secundaria de

entry

yt:hobbies

La etiqueta <yt:hobbies> identifica las aficiones del usuario introducidas en su perfil público de YouTube.

Ejemplo

<yt:hobbies>Testing YouTube APIs</yt:hobbies>

Secundaria de

entry

yt:hometown

La etiqueta <yt:hometown> identifica la ciudad natal del usuario introducida en su perfil público de YouTube.

Ejemplo

<yt:hometown>Albany, GA</yt:hometown>

Secundaria de

entry

yt:lastName

La etiqueta <yt:lastName> especifica el apellido del usuario.

Ejemplo

<yt:lastName>Smith</yt:lastName>

Secundaria de

entry

yt:location

En una entrada de vídeo, la etiqueta <yt:location> contiene texto descriptivo sobre el lugar del que se ha extraído el vídeo. En una entrada de perfil de usuario, la etiqueta <yt:location> identifica la ubicación geográfica del usuario introducida en su perfil público de YouTube.

Ejemplo

<yt:location>US</yt:location>

Secundaria de

entry

yt:movies

La etiqueta <yt:movies> identifica las películas favoritas del usuario introducidas en su perfil público de YouTube.

Ejemplo

<yt:movies>Aqua Teen Hungerforce</yt:movies>

Secundaria de

entry

yt:music

La etiqueta <yt:music> identifica la música favorita del usuario introducida en su perfil público de YouTube.

Ejemplo

<yt:music>Elliott Smith, the Kooks</yt:music>

Secundaria de

entry

yt:noembed

La etiqueta <yt:noembed> especifica que un vídeo no se puede insertar en otros sitios web. Esta etiqueta se puede incluir en una solicitud de subida o actualización de los metadatos de un vídeo. De forma predeterminada, los vídeos se pueden insertar en otros sitios a menos que sean vídeos privados. Si una solicitud no incluye las etiquetas <yt:noembed> o <yt:private>, el vídeo se podrá insertar en otros sitios web.

Ejemplo

<yt:noembed/>

Secundaria de

entry

yt:occupation

La etiqueta <yt:occupation> identifica el empleo del usuario introducido en su perfil público de YouTube.

Ejemplo

<yt:occupation>Technical writer</yt:occupation>

Secundaria de

entry

yt:position

La etiqueta <yt:position> especifica el orden en el que aparecerá un vídeo en una lista de reproducción.

Ejemplo

<yt:position>4</yt:position>

Secundaria de

entry

yt:private

La etiqueta <yt:private> indica que un vídeo es privado, es decir, que ese vídeo no lo pueden ver todos los usuarios del sitio web de YouTube. Los vídeos privados sólo los pueden ver las personas específicamente elegidas por el propietario de cada vídeo. Esta etiqueta se puede incluir en una solicitud de subida o actualización de los metadatos de un vídeo. La etiqueta no debe especificar ningún valor. La presencia de esa etiqueta indica que el vídeo es privado. La ausencia de la etiqueta indica que todos los usuarios de YouTube podrán ver el vídeo. De forma predeterminada, todos los usuarios de YouTube pueden ver los vídeos. La ausencia de la etiqueta indica que todos los usuarios de YouTube podrán ver el vídeo. (De forma predeterminada, todos los usuarios de YouTube pueden ver los vídeos. Por tanto, para indicar que un vídeo es privado, se debe incluir la etiqueta <yt:private> en todas las solicitudes de subida o actualización del vídeo.)

Ejemplo

<yt:private/>

Secundaria de

media:group

yt:queryString

La etiqueta <yt:queryString> especifica las palabras clave (cadena de consulta) asociadas a una suscripción.

Ejemplo

<yt:queryString>Dog skateboarding</yt:queryString>

Secundaria de

entry

yt:racy

La etiqueta <yt:racy> indica si un vídeo incluye contenido restringido. Si solicitas un feed de vídeos, el feed sólo incluirá contenido restringido si la solicitud del API incluye el parámetro racy.

Ejemplo

<yt:racy/>

Secundaria de

entry

yt:recorded

La etiqueta <yt:recorded> especifica la fecha de grabación de un vídeo.

Ejemplo

<yt:recorded>2003-08-03</yt:recorded>

Secundaria de

entry

yt:relationship

La etiqueta <yt:relationship> indica si el usuario mantiene una relación, según la información que aparece en su perfil público de YouTube.

Ejemplo

<yt:relationship>taken</yt:relationship>

Secundaria de

entry

yt:school

La etiqueta <yt:school> identifica el centro de estudios al que asistió el usuario, según la información que aparece en su perfil público de YouTube.

Ejemplo

<yt:school>University of North Carolina</yt:school>

Secundaria de

entry

yt:state

La etiqueta <yt:state> contiene información que describe el estado de un vídeo. El valor de esta etiqueta y del atributo reasonCode permite conocer los motivos a los que se deben los problemas de subida de los vídeos que no se han podido subir o que se han rechazado tras el proceso de subida.

Atributos

Nombre

Formato

Descripción

name

Complejo

El atributo name identifica el estado de un vídeo no publicado. Los valores válidos de esta etiqueta son processing, rejected y failed.

reasonCode

Complejo

El atributo reasonCode proporciona información sobre los motivos por los que un vídeo no se ha podido subir o se ha rechazado tras el proceso de subida. La etiqueta <yt:state> no incluirá un atributo reasonCode si el valor del atributo name es processing. En la lista que aparece a continuación se identifican posibles valores del atributo reasonCode para los casos en los que un vídeo no se ha podido subir o se ha rechazado.

  • rejected
    • copyright: el vídeo infringe derechos de autor.
    • inappropriate: el vídeo incluye contenido inadecuado.
    • duplicate: el vídeo es una copia de otro vídeo subido a YouTube.
    • termsOfUse: el vídeo infringe las condiciones de uso.
    • suspended: la cuenta asociada al vídeo se ha suspendido.
    • tooLong: el vídeo supera la duración máxima permitida (10 minutos).
    • blocked: el propietario de contenido ha bloqueado el vídeo.
  • failed
    • cantProcess: YouTube no puede convertir el archivo de vídeo.
    • invalidFormat: el formato del archivo de vídeo subido no es válido.
    • unsupportedCodec: no se admite el códec que utiliza el vídeo.
    • empty: el archivo subido está vacío.
    • tooSmall: el archivo subido es demasiado pequeño.

helpUrl

Complejo

El parámetro helpUrl contiene un enlace a una página del Centro de asistencia de YouTube mediante la cual los desarrolladores y los propietarios de los vídeos pueden determinar los motivos por los que un vídeo se ha rechazado o no se ha podido subir.

Ejemplo

<yt:state name=”rejected” reasonCode=”tooLong” helpUrl=”http://www.youtube.com/t/community_guidelines”>Video is too long</yt:state>

Secundaria de

app:control

yt:statistics

La etiqueta <yt:statistics> proporciona datos estadísticos referentes a un vídeo o a un usuario. La etiqueta <yt:statistics> no se incluye en una entrada de vídeo si el valor del atributo viewCount es 0.

Atributos

Nombre

Formato

Descripción

viewCount

Complejo

Si el atributo viewCount hace referencia a una entrada de vídeo, indicará el número de veces que se ha visto ese vídeo. Si el atributo viewCount hace referencia a un perfil de usuario, indicará el número de veces que se ha visto ese perfil de usuario.

videoWatchCount

Complejo

El atributo videoWatchCount indica el número de vídeos que ha visto un usuario en YouTube. El atributo videoWatchCount sólo se incluye si aparece la etiqueta <yt:statistics> en una entrada de perfil de usuario.

subscriberCount

Complejo

El atributo subscriberCount indica el número de usuarios de YouTube que se han suscrito al canal de YouTube de un determinado usuario. El atributo subscriberCount sólo se incluye si aparece la etiqueta <yt:statistics> en una entrada de perfil de usuario.

lastWebAccess

Complejo

El atributo lastWebAccess indica la hora más reciente a la que un determinado usuario ha utilizado YouTube.

favoriteCount

Complejo

El atributo favoriteCount indica el número de usuarios de YouTube que han añadido un vídeo a su lista de vídeos favoritos. El atributo favoriteCount sólo se incluye si aparece la etiqueta <yt:statistics> en una entrada de vídeo.

Ejemplo

<yt:statistics viewCount=’9′ videoWatchCount=’24’ subscriberCount=’1′ lastWebAccess=’2008-02-29T13:09:48.000-08:00’/>

Secundaria de

entry

yt:status

La etiqueta <yt:status> identifica el estado de un contacto. Esta etiqueta sólo aparece si se van a recuperar los contactos del usuario actualmente autenticado. En la siguiente lista se identifican los valores válidos de esta etiqueta:

  • El valor de la etiqueta será accepted si el usuario autenticado y el contacto se han marcado mutuamente como amigos.
  • El valor de la etiqueta será requested si el contacto ha solicitado que se le añada a la lista de contactos del usuario autenticado, pero la solicitud no se ha aceptado (o rechazado) aún.
  • El valor de la etiqueta será pending si el usuario autenticado ha solicitado que se le añada a la lista de contactos del contacto, pero la solicitud no se ha aceptado (o rechazado) aún.

Ejemplo

<yt:status>accepted</yt:status>

Secundaria de

entry

yt:username

La etiqueta <yt:username> especifica un nombre de usuario de YouTube. En un feed de suscripciones o en una solicitud de adición de una suscripción, la etiqueta <yt:username> identifica al propietario de la lista de favoritos o del canal de YouTube correspondiente a la suscripción. En una entrada de perfil, la etiqueta <yt:username> identifica al usuario asociado al perfil. En una entrada de contacto de usuario, la etiqueta <yt:username> identifica al contacto del usuario conectado.

Ejemplo

<yt:username>andyland74</yt:username>

Secundaria de

entry

Referencia de elementos de Media RSS

media:category

La etiqueta <media:category> es una etiqueta de desarrollador o género que describe un recurso de vídeo. En la sección Lista de categorías de los vídeos subidos se identifican distintas categorías de vídeo de YouTube. Puedes asociar una categoría a un vídeo o asignar cada vídeo a una categoría de la lista.

También puedes asociar cada vídeo a una o varias palabras clave o categorías privadas mediante el esquema de categoría http://gdata.youtube.com/schemas/2007/developertags.cat. Consulta la sección Asignación de etiquetas de desarrollador del documento de protocolo para obtener más información sobre las etiquetas de desarrollador.

Atributos

Nombre

Formato

Descripción

label

Complejo

El atributo label especifica el nombre de secuencias de escape de la entidad de la categoría de YouTube a la que pertenece el vídeo.

scheme

Complejo

El atributo scheme especifica un identificador uniforme de recursos (URI) que identifica el esquema de categorización asociado a la etiqueta.

Ejemplo

<media:category label=’Sports’ scheme=’http://gdata.youtube.com/schemas/2007/categories.cat’>Sports</media:category&gt;

Secundaria de

media:group

media:content

La etiqueta <media:content> especifica una URL y otro tipo de información referente a un vídeo.

Atributos

Nombre

Formato

Descripción

url

Complejo

El atributo url especifica la URL del objeto de medio.

type

Complejo

El atributo type especifica el tipo MIME del objeto de medio.

isDefault

Complejo

El atributo isDefault indica si la etiqueta <media:content> correspondiente identifica el recurso de medios predeterminado del grupo de medios. En una respuesta del API de datos de YouTube, el recurso de medios predeterminado es la URL del reproductor insertable (SWF) del vídeo.

expression

Complejo

El atributo expression indica si el objeto de vídeo representa una muestra del vídeo, la versión completa del mismo o una secuencia de vídeo en directo. Los correspondientes (y únicos) valores válidos de este atributo son sample, full y nonstop.

duration

Complejo

La etiqueta duration especifica la duración del vídeo en segundos.

yt:format

Complejo

El atributo yt:format especifica el formato de vídeo del objeto de vídeo descrito por el elemento <media:content>. En la lista que aparece a continuación se identifican los valores válidos de este atributo.

  • 1: URL de transmisión RTSP para reproducción de vídeos de dispositivos móviles. Vídeo H.263 (hasta 176×144) y audio AMR.
  • 5: URL HTTP en el reproductor insertable (SWF) de este vídeo. Este formato no está disponible para los vídeos que no se pueden insertar. Los desarrolladores añaden con frecuencia &format=5 a sus consultas para restringir los resultados a los vídeos que se pueden insertar en sus sitios.
  • 6: URL de transmisión RTSP para reproducción de vídeos de dispositivos móviles. Vídeo MPEG-4 SP (hasta 176×144) y audio AAC.

Ejemplo

<media:content url=’http://www.youtube.com/v/8aYQ_wjmriQ&#8217; type=’application/x-shockwave-flash’ medium=’video’ isDefault=’true’ expression=’full’ duration=’166′ yt:format=’5’/>

Secundaria de

media:group

media:description

La etiqueta <media:description> contiene el resumen o la descripción de un vídeo. Este campo es obligatorio en las solicitudes de subida o actualización de los metadatos de un vídeo. La descripción debe ser una frase, no una lista de palabras clave, y puede aparecer en los resultados de búsqueda. La descripción puede tener una longitud máxima de 5.000 caracteres y puede contener todos los caracteres UTF-8 válidos, excepto < y >.

Atributos

Nombre

Formato

Descripción

type

Complejo

El atributo type especifica el tipo de texto especificado en el valor de la etiqueta. Los feeds de contenido de YouTube requieren el uso de texto sin formato (type=plain).

Ejemplo

<media:description type=”plain”>Granny takes crocheting to the extreme during a rodeo and while surfing.</media:description>

Secundaria de

media:group

media:group

La etiqueta <media:group> incluye metadatos sobre un recurso de vídeo.

Ejemplo

<media:group>

Secundaria de

entry

Secundarias

media:title, media:description, media:keywords, media:category, media:content, media:player, media:thumbnail, yt:duration?, yt:private?, yt:noembed?

media:keywords

La etiqueta <media:keywords> incluye una lista de palabras o frases asociadas a un vídeo separadas por comas. Debes especificar al menos una palabra clave para cada uno de los vídeos de tu feed. Este campo puede tener una longitud máxima de 120 caracteres y puede contener todos los caracteres UTF-8 válidos, excepto < y <. La longitud máxima de cada palabra clave es de 25 caracteres.

Atributos

Nombre

Formato

Descripción

scheme

Texto

El atributo scheme especifica un identificador uniforme de recursos (URI) que identifica el esquema de categorización asociado a la etiqueta.

  • En una solicitud de adición de una suscripción, el valor del atributo scheme debe ser http://gdata.youtube.com/schemas/2007/subscriptiontypes.cat.
  • En una solicitud de adición de un contacto, el valor del atributo scheme debe ser http://gdata.youtube.com/schemas/2007/contact.cat.

Ejemplo

<media:keywords>rodeo, surfing, crochet</media:keywords>

Secundaria de

media:group

media:player

La etiqueta <media:player> especifica una URL en la que se encuentra disponible el vídeo completo, que se puede ver a través de un reproductor de medios que se ejecuta en un navegador web. En una respuesta del API de datos de YouTube, la etiqueta <media:player> especifica la URL de la página del sitio web de YouTube en la que se reproduce el vídeo.

Atributos

Nombre

Formato

Descripción

url

Complejo

El atributo url identifica una URL que utiliza un reproductor de vídeo para mostrar el vídeo en una ventana del navegador.

Ejemplo

<media:player url=’http://www.youtube.com/watch?v=8aYQ_wjmriQ’/>

Secundaria de

media:group

media:thumbnail

La etiqueta <media:thumbnail> especifica la ubicación de una imagen que se puede utilizar para representar un vídeo en una lista de resultados de búsqueda. Un feed de vídeos puede hacer referencia a varias imágenes en miniatura y a varios tamaños de esas imágenes. Puedes seleccionar el tamaño de miniatura que sea más adecuado para tu interfaz de usuario.

Atributos

Nombre

Formato

Descripción

url

Complejo

El atributo url especifica la URL de la imagen en miniatura.

height

Complejo

El atributo height especifica la altura de la imagen en miniatura.

width

Complejo

El atributo width especifica el ancho de la imagen en miniatura.

time

Complejo

El atributo time especifica el momento del vídeo en el que aparece el fotograma mostrado en la imagen en miniatura. El valor del atributo se expresa mediante el protocolo Normal Play Time (NTP) de DSM-CC utilizado en RTSP.

Ejemplo

<media:thumbnail url=’http://img.youtube.com/vi/8aYQ_wjmriQ/2.jpg&#8217; height=’97’ width=’130′ time=’00:01:23’/>

Secundaria de

entry, media:group

media:title

La etiqueta <media:title> identifica el título del vídeo. Este campo puede tener una longitud máxima de 60 caracteres y puede contener todos los caracteres UTF-8 válidos, excepto < y >.

Atributos

Nombre

Formato

Descripción

type

Complejo

El atributo type especifica el tipo de texto especificado en el valor de la etiqueta. Los feeds de contenido de YouTube requieren el uso de texto sin formato (type=plain).

Ejemplo

<media:title type=”plain”>Extreme crocheting in high surf, rodeo</media:title>

Secundaria de

media:group

Referencia de elementos de Google Data

gd:comments

La etiqueta <gd:comments> incluye un enlace al feed de comentarios de un vídeo.

Ejemplo

<gd:comments>

Secundaria de

entry

Secundarias

gd:feedLink

gd:feedLink

La etiqueta <gd:feedLink> identifica un feed anidado de forma lógica. Por ejemplo, un feed de comentarios estará anidado de forma lógica debajo de una entrada de vídeo. Del mismo modo, el feed de una lista de reproducción estará anidado de forma lógica dentro de una entrada de lista de reproducción del feed de listas de reproducción de un usuario.

Atributos

Nombre

Formato

Descripción

rel

Complejo

El atributo rel indica la forma en que el identificador uniforme de recursos (URI) especificado en el atributo href está relacionado con el conjunto de resultados actual:

  • Si el valor del atributo rel es self, el enlace identificará la URL que se deberá utilizar para recuperar información sobre el feed o sobre una entrada concreta del feed.
  • Si el valor del atributo rel es edit, el enlace identificará la URL que se deberá utilizar para modificar una entrada de feed.
  • Si el valor del atributo rel es alternate, el enlace identificará una URL que mostrará una presentación distinta del feed como, por ejemplo, un enlace a la representación HTML de dicha entrada de feed.
  • Si el valor del atributo rel es prev, el enlace apuntará a la página anterior del conjunto de resultados del feed.
  • Si el valor del atributo rel es next, el enlace apuntará a la página siguiente del conjunto de resultados del feed.
  • Si el valor del atributo rel es related, el enlace identificará otro feed relacionado con el feed actual. Por ejemplo, si el feed contiene una lista de entradas de contacto, el enlace relacionado de un contacto deberá apuntar al feed del perfil de dicho contacto.
  • El atributo rel también puede contener un enlace a un esquema que identifique el tipo de entidad relacionada con el enlace correspondiente. Por ejemplo, una entrada de vídeo contiene etiquetas <link> que apuntan a respuestas, puntuaciones, reclamaciones y vídeos relacionados con dicho vídeo. Algunas de esas etiquetas <link> se pueden utilizar para recuperar feeds adicionales como, por ejemplo, vídeos relacionados y respuestas en vídeo, mientras que otras se pueden utilizar para publicar datos como, por ejemplo, una puntuación o una reclamación.

href

Complejo

El atributo href especifica un identificador uniforme de recursos (URI) que identifica el recurso identificado en la etiqueta <link>.

gd:countHint

Complejo

El atributo gd:countHint especifica el número de entradas del feed relacionado. Por ejemplo, si la etiqueta <gd:feedLink> especifica un enlace al feed de comentarios de un vídeo, el atributo gd:countHint indicará el número de comentarios que tiene ese vídeo.

Ejemplo

<gd:feedLink href=’http://gdata.youtube.com/feeds/api/videos/8aYQ_wjmxiQ/comments’ countHint=’0’/>

Secundaria de

entry, gd:comments

gd:rating

La etiqueta <gd:rating> especifica la puntuación que se le asigna a un vídeo (en una solicitud de adición de puntuación) o la puntuación media actual del vídeo basada en las puntuaciones globales de los usuarios de YouTube.

Atributos

Nombre

Formato

Descripción

min

Complejo

El atributo min especifica la puntuación mínima que se puede asignar a un vídeo. Este valor debe ser 1.

max

Complejo

El atributo max especifica la puntuación máxima que se puede asignar a un vídeo. Este valor debe ser 5.

numRaters

Complejo

El atributo numRaters indica el número de personas que han puntuado el vídeo. Este atributo no se utiliza en las solicitudes de adición de puntuaciones.

average

Complejo

El atributo average indica la puntuación media del vídeo. Este atributo no se utiliza en las solicitudes de adición de puntuaciones.

Ejemplo

<gd:rating min=’1′ max=’5′ numRaters=’7773′ average=’4.75’/>

Secundaria de

entry

Referencia de elementos de GeoRSS

georss:where

La etiqueta <georss:where> incluye información sobre una ubicación geográfica. Ten en cuenta que, si un vídeo tiene asociada una ubicación geográfica, deberás incluir esa información en las posteriores solicitudes de actualización de la información de ese vídeo. De lo contrario, la información de ubicación geográfica se eliminará.

Ejemplo

<georss:where>

Secundaria de

entry

Secundarias

gml:Point

Referencia de elementos de GML

gml:Point

La etiqueta <gml:Point> contiene información sobre una ubicación geográfica específica. La proyección de puntos predeterminada es WGS84. Puedes especificar la ubicación geográfica de la que se ha extraído un vídeo en las solicitudes de subida o actualización de los metadatos de ese vídeo. Ten en cuenta que, si un vídeo tiene asociada una ubicación geográfica, deberás incluir esa información en las posteriores solicitudes de actualización de la información de ese vídeo. De lo contrario, la información de ubicación geográfica se eliminará.

Ejemplo

<gml:Point>

Secundaria de

georss:where

Secundarias

gml:pos

gml:pos

La etiqueta <gml:pos> especifica las coordenadas de un punto geográfico. La proyección de puntos predeterminada es WGS84. Ten en cuenta que, si un vídeo tiene asociada una ubicación geográfica, deberás incluir esa información en las posteriores solicitudes de actualización de la información de ese vídeo. De lo contrario, la información de ubicación geográfica se eliminará.

Ejemplo

<gml:pos>47.367 8.55</gml:pos>

Secundaria de

gml:Point

Referencia de elementos de Atom Publishing Protocol

app:control

La etiqueta <app:control> indica que un vídeo no se ha publicado. Esta etiqueta sólo aparece en el feed de subidas del usuario autenticado actualmente.

Ejemplo

<app:control>

Secundaria de

entry

Secundarias

app:draft, yt:state

app:draft

La etiqueta <app:draft> indica si un vídeo se encuentra en estado “borrador” o “no publicado”. Esta etiqueta sólo se incluye para videos no publicados, por lo que su valor siempre es yes.

Ejemplo

<app:draft>yes</app:draft>

Secundaria de

app:control

Referencia de elementos de respuesta del API de subidas basadas en navegador

response

La etiqueta <response> incluye la respuesta del API que devuelve YouTube a una solicitud de subida de los metadatos de un nuevo vídeo mediante la subida basada en navegador.

Ejemplo

<response>

Secundarias

url, token

token

La etiqueta <token> aparece en la respuesta del API que devuelve YouTube a una solicitud de subida de los metadatos de un nuevo vídeo mediante la subida basada en navegador. El token debe estar incluido en la página que permite que el usuario suba el nuevo vídeo directamente a YouTube.

Ejemplo

<token>AEwbFAQEvf3xox…</token>

Secundaria de

response

url

La etiqueta <url> aparece en la respuesta del API que devuelve YouTube a una solicitud de subida de los metadatos de un nuevo vídeo mediante la subida basada en navegador. El formulario incluido en tu página web que puede utilizar el usuario para subir el archivo de vídeo a YouTube se enviará a esta URL.

Ejemplo

<url>http://uploads.gdata.youtube.com/action/FormUpload/AEF3087AUD</url&gt;

Secundaria de

response

Referencia de elementos de respuesta a errores

code

La etiqueta <code> indica el motivo por el que no se ha podido atender la solicitud del API. En la lista que aparece a continuación se identifican los posibles valores de la etiqueta <code> en función del valor de la etiqueta <domain> correspondiente.

  • yt:validation:
    • required: este código indica que falta un campo obligatorio o tiene un valor vacío.
    • deprecated: este código indica que el valor de un elemento se ha desaprobado y ya no es válido. Por ejemplo, el nombre de una categoría de vídeo que se haya retirado no se podrá asociar a vídeos recién añadidos o actualizados.
    • invalid_format: este código indica que el valor de un elemento XML no coincide con el formato esperado. Por ejemplo, puedes recibir este error si especificas unas coordenadas no válidas en la etiqueta <gml:pos>.
    • invalid_character: este código indica que el valor de un campo XML contiene una carácter no válido. Por ejemplo, los títulos de vídeos no pueden contener el carácter menor que (<).
    • too_long: este código indica que el valor del elemento XML supera la longitud máxima permitida. Por ejemplo, los títulos de vídeos deben tener 60 caracteres como máximo.
  • yt:quota:
    • too_many_recent_calls: este código indica que los servidores del API han recibido demasiadas llamadas desde el mismo origen en un breve espacio de tiempo. Este error no especifica ninguna ubicación.
    • too_many_entries: este código indica que el usuario está intentando superar un límite de almacenamiento en su cuenta y debe eliminar entradas existentes antes de introducir nuevas.
  • yt:authentication:
    • InvalidToken: este código indica que el token de autenticación especificado en el encabezado Authorization no es válido.
    • TokenExpired: este código indica que el token de autenticación especificado en el encabezado Authorization ha caducado.

Ejemplo

<code>required</code>

Secundaria de

error

domain

La etiqueta <domain> identifica el error por el que no se ha podido atender una solicitud del API. En la siguiente lista se identifican los posibles valores de la etiqueta <domain>:

  • Un error yt:validation informa de un problema relativo a un valor de elemento XML existente en una solicitud de inserción o actualización de una entrada. Las funciones del API que introducen o actualizan vídeos u otros datos pueden informar de errores yt:validation. Los errores de validación se suelen notificar a través del código de respuesta HTTP 400.
  • Un error yt:quota identifica un problema relativo a un uso irregular del API.
  • Un error yt:authentication identifica un problema relativo a una solicitud de ejecución de una función del API que requiere una autenticación de usuario que no se ha realizado correctamente. Los errores de autenticación se pueden identificar con los códigos de respuesta HTTP 401 o 403.

Ejemplo

<domain>yt:validation</domain>

Secundaria de

error

error

La etiqueta <error> contiene información sobre el error por el que no se ha podido atender una solicitud del API.

Ejemplo

<error>

Secundaria de

errors

Secundarias

domain, code, location

errors

La etiqueta <errors> incluye una respuesta del API que explica los errores por los que no se ha podido atender la solicitud del API correspondiente.

Ejemplo

<errors>

Secundarias

error+

location

La etiqueta <location> proporciona información sobre el elemento de la solicitud que ha producido el error.

  • Si el valor de la etiqueta <domain> es yt:validation, la etiqueta <location> definirá la ubicación del error como una ruta Xpath que indica la etiqueta XML que ha causado el error en la solicitud. La ubicación Xpath se especifica en relación con la etiqueta <entry> de la solicitud.
  • Si el valor de la etiqueta <domain> es yt:quota y el valor de la etiqueta <code> es too_many_recent_calls, la respuesta del API no incluirá una etiqueta <location>.
  • Si el valor de la etiqueta <domain> es yt:quota y el valor de la etiqueta <code> es too_many_entries, la etiqueta <location> identificará el feed que ha causado el error.
  • Si el valor de la etiqueta <domain> es yt:authentication, la etiqueta <location> (en caso de que aparezca) identificará la causa del error de autenticación.

Atributos

Nombre

Formato

Descripción

type

Complejo

El atributo type proporciona contexto para el valor de la etiqueta <location>. El atributo type puede tener cualquiera de los valores indicados a continuación.

  • xpath: la solicitud XML contiene un error en la ruta especificada referente a la etiqueta <entry> de la solicitud.
  • parameter: la solicitud del API contiene un error en el parámetro especificado en la etiqueta <location>.
  • header: la solicitud del API contiene un error en el encabezado de solicitud HTTP especificado.
  • other: la solicitud del API contiene otro tipo de error. Este valor permite identificar errores de cupo en los que el valor de la etiqueta code es too_many_entries.

Ejemplo

<location type=’xpath’>media:group/media:title/text()</location>

Secundaria de

error

Apéndices

Lista de categorías de los vídeos subidos

En el documento de categorías de YouTube, que se puede descargar de la página http://gdata.youtube.com/schemas/2007/categories.cat, se identifican las categorías que se pueden utilizar para clasificar los vídeos. El documento de categorías es un archivo XML en el que se identifican las categorías y se indica si se pueden asignar nuevos vídeos a cada categoría y si es posible localizar cada una de las categorías en YouTube.

En el fragmento que aparece a continuación se muestran las entradas de las categorías “Entertainment” y “Nonprofit & Activism” tal como aparecían en el documento de categorías de YouTube el 2 de enero de 2008. Ten en cuenta que podía haber vídeos asignados a ambas categorías pero, en ese momento, sólo se podía localizar en YouTube la categoría “Entertainment”. Tal como se muestra en el ejemplo, la presencia de la etiqueta <yt:browsable> indica que se puede localizar en YouTube la categoría correspondiente y la etiqueta <yt:assignable> indica que se pueden asignar nuevos vídeos a esa categoría. (No se pueden asignar nuevos vídeos a categorías que no estén marcadas como asignables con la etiqueta <yt:assignable>.)

<atom:category term=’Entertainment’ label=’Entertainment’>

<yt:browsable/>

<yt:assignable/>

</atom:category>

<atom:category term=’Nonprofit’ label=’Nonprofit & Activism’>

<yt:assignable/>

</atom:category>

En la solicitud de subida enviada por el API, el valor de la etiqueta <media:category> debe coincidir con el valor del atributo term de la etiqueta <atom:category> de la categoría correspondiente. En el siguiente ejemplo se indica cómo se debe utilizar la etiqueta <media:category> para asignar un nuevo vídeo a la categoría Nonprofit & Activism, que aparece en el fragmento de esquema anterior.

<media:category

scheme=”http://gdata.youtube.com/schemas/2007/categories.cat”>Nonprofit</media:category&gt;

Escape URL

Si vas a realizar una solicitud de búsqueda HTTP, debes seguir una serie de convenciones para que Google pueda traducir correctamente tu solicitud HTTP y generar una respuesta adecuada.

El esquema de URL HTTP especifica que una solicitud de URL HTTP sólo puede contener los caracteres que se indican a continuación.

  • Caracteres alfanuméricos: [a-z][A-Z][0-9]
  • Caracteres especiales: $ – _ . | + ! * ‘ ( )
  • Caracteres reservados: ; / ? : @ = &

Google utiliza caracteres reservados para descodificar URL y algunos caracteres especiales para solicitar funciones de búsqueda. En consecuencia, deberás aplicar un formato de escape URL a todos los caracteres no alfanuméricos incluidos en los valores de los parámetros de búsqueda.

Para aplicar un formato de escape URL a una cadena, debes convertir cada secuencia de caracteres de espacio en blanco en un signo más (“+”) y sustituir todos los demás caracteres no alfanuméricos por el código hexadecimal que represente el valor de ese carácter. En la tabla que aparece a continuación se muestran los códigos hexadecimales de los caracteres reservados y especiales anteriormente mostrados. Se deberá aplicar un formato de escape URL a cada uno de estos caracteres en los valores de los parámetros de solicitud.

Carácter

Código
hexadecimal

$

%24

%2D

_

%5F

.

%2E

+

%2B

!

%21

*

%2A

%22

%27

(

%28

)

%29

;

%3B

/

%2F

?

%3F

:

%3A

@

%40

=

%3D

&

%26

|

%7C

Examples

Cadena original

Cadena con formato de escape URL

punch&judy

punch%26judy

O’Reilly

O%27Reilly

Para obtener información adicional sobre el escape URL, consulta los documentos RFC 2396 y W3C.

Cómo Centrar imágenes en CSS

Cómo Centrar imágenes en CSS

Se debe aplicar el estilo text-align: center; sin embargo, esto no funciona si se lo aplicamos a una imagen,  por que el valor del atributo text-align de css afecta al contenido de la etiqueta, no a la etiqueta en sí a la que se lo apliquemos, por lo tanto, si se especifica esta propiedad para un parrafo:

p {
text-align: center;
}

lo que se centrará será el contenido de la etiqueta, no la etiqueta:

<p>Este es el contenido al que afectará la propiedad</p>

Por lo tanto, como la etiqueta img es una etiqueta vacía, es decir, no podemos poner:

<img>ruta_de_la_imagen_</img>

en cuyo caso sí que funcionaría el text-align, para centrar una imagen con CSS deberemos tomar otros caminos. Basicamente hay 2:

El más correcto sería hacer que la etiqueta img sea tratada como elemento de bloque y darle a la propiedad margin un valor de auto, de modo que el navegador asignará margenes proporcionales en referencia a la caja padre que contenga a la imagen:

img {
display: block;
margin: auto;
}

Sin embargo, esto no funciona en un navegador (a ver si lo adivinan…), en IE5.x, que a día de hoy sigue siendo muy usado, por lo que, aunque menos correcta, y siguiendo la argumentación del funcionamiento del atributo text-align, si se le asigna el valor center a una etiqueta que sea contenedora de la imagen, esta se centrará, ya que, como decíamos, este valor afecta al contenido, no a la etiqueta a la que se le asigne, así que, ya sea con etiquetas div o p (siempre elementos de bloque), creando una clase se conseguiría este efecto:

.centrar-imagen {
text-align: center;
}

Y luego lo aplicamos así:

<div><img src=”ruta”></div>

Pestañas con técnica Sliding Doors

Pestañas con técnica Sliding Doors

En este artículo aprenderemos una técnica para maquetar con CSS un sistema de pestañas o solapas (lo que se llama tabs en inglés), de una manera bastante sencilla, funcional y polivalente. Veremos paso a paso cómo crear las pestañas, desde el código HTML que utilizaremos, hasta las diferentes clases y estilos que definiremos para aplicar el aspecto final a las pestañas.Las interfaces de pestañas las hemos visto en infinidad de sitios y de programas, por lo que resultan muy sencillas de usar por parte de los usuarios, ya que están acostumbrados a trabajar con ellas. También aportan un atractivo estético bastante notable a los diseños de los sitios web, por lo que las convierte en un componente útil, atractivo y adecuado en la mayoría de casos.

Como sabemos, CSS nos permite hacer diseño de interfaces de usuario de una manera elegante y sencilla y en este artículo de DesarrolloWeb.com vamos a poner en práctica estas ventajas de CSS, ya que diseñaremos las pestañas manteniendo un código HTML sencillo y definiremos el aspecto únicamente con Hojas de Estilo en Cascada.

Para empezar, podemos ver lo que sería una interfaz de Pestañas en la siguiente imagen:

sliding-doors-1

Ahora que ya sabemos el resultado que pretendemos obtener, pasemos a ver paso a paso los componentes de este diseño.

HTML: las pestañas como elementos de listas, LI

Veamos el código HTML que hemos utilizado para definir los contenidos de las pestañas:

<div id=”pestanas”>
<ul>
<li><a href=”#”>DesarrolloWeb.com</a></li>
<li class=”activa”><a href=”#”>CriarWeb.com</a></li>
<li><a href=”#”>Comunidad</a></li>
<li><a href=”#”>Otro enlace más largo</a></li>
</ul>
</div>

Como se puede ver, hemos definido los distintos enlaces que aparecerán en las pestañas con una simple lista HTML, etiquetas UL y LI.

Todo el sistema de pestañas está metido en una capa con identificador (atributo id) “pestanas”, a la que daremos estilos luego con CSS. Además podemos fijarnos que uno de los elementos de la lista LI, tiene la clase (atributo class) “activa”, que nos servirá para hacer una pestaña con otro color, para simbolizar que es la pestaña activa.

Podemos comprobar que el código HTML es realmente simple. Lo bonito será aplicar estilos con CSS para convertir esta lista en unas pestañas.

Técnica Sliding Doors, Puertas Deslizantes

Técnica Sliding Doors, que en español significa Puertas Deslizantes.  Con esta técnica se conseguirá que el texto que hay dentro pueda crecer manteniendo el aspecto de las pestañas.Las pestañas tienen a los dos lados bordes redondeados, que haremos con imágenes que se colocarán como fondo con CSS, en cada uno de los laterales de las pestañas. En el medio estará el texto.

Los dos laterales serán las puertas deslizantes y a medida que crezca el texto los fondos serán desplazados a los lados.

sliding-doors-2

Las dos puertas son las imágenes que se colocan como fondos, anclados a la izquierda y la derecha. El texto, cuando crece, empuja los dos fondos de imagen a los lados, ya que están anclados. Comprendida esta idea,  seguidamente se ejempla cómo en realidad serán los fondos de las puertas deslizantes.

sliding-doors-3

Se van a utilizar dos fondos. El fondo de la derecha, asignado a los elementos de la lista, tendrá tanto el borde redondeado de la derecha como el fondo del centro de la pestaña. A la izquierda se tendrá el fondo del enlace, que será más estrecho (comprendiendo sólo lo que es el borde de la izquierda de la pestaña.El fondo de la lista, a la derecha, tiene que poder crecer tanto como el texto lo requiera. A más texto en la pestaña también el espacio del medio será mayor. Se debe crear una imagen lo suficientemente grande para que quepa un texto de cualquier longitud, o de lo contrario habría un hueco vacío entre los fondos de la izquierda y la derecha de la pestaña.

Dado que los enlaces están contenidos en los elementos de la lista, sus fondos (los que aparecen a la izquierda) se situarán por encima del fondo de la lista, con lo que se tapará el fondo de la lista, que no tiene el borde redondo.

Las dos imágenes que se van a utilizar para maquetar la pestaña serán como estas:

sliding-doors-4

Y para el caso de las pestañas activas se utilizan estas otras imágenes:

sliding-doors-5

CSS para hacer las pestañas

Estilos CSS para las pestañas, comenzando por la capa con id “pestanas”.#pestanas {

float:left;
width:100%;
line-height:normal;
font-size: 16px;
font-weight: bold;
}

Seguidamente hay varios estilos que alteran el aspecto del texto y la colocación de la página, pero nada demasiado importante.

Estilos generales de la lista (para la etiqueta UL).

#pestanas ul {
margin:0;
padding:0;
list-style:none;
}

Se deben de eliminar los márgenes y padding y además de indicar que no se quieren bullets para los elementos.

Aqui empieza a tener interés: los elementos de lista.   Tenemos que utilizar una imagen de fondo que se tenía que anclar a la derecha.

#pestanas li {
float:left;
margin:0 0 0 3px;
padding:0;
background:url(“p-der.gif”) no-repeat right top;
}

Los elementos tienen float:left para que se sitúen uno detrás del otro. El margin se pone en este caso es para que las distintas pestañas aparezcan separadas un poco. Y el fondo, como vemos en el atributo CSS background, está colocado para que se sitúe a la derecha del elemento de la lista, con no-repeat porque no queremos que haga un mosaico.

Seguidamente el estilo de los enlaces, que tenía una imagen como fondo anclada a la izquierda.

#pestanas a {
padding:3px 10px 3px 10px;
display:block;
background:url(“p-izq.gif”) no-repeat left top;
color: #fff;
text-decoration: none;
}

El padding es para que el enlace tenga espacio vacío alrededor, lo que hace que la pestaña gane algo de tamaño y quede más suelta. Todos los enlaces tienen display: block para que se traten como un bloque y la parte que se puede hacer clic sea todo el espacio (el enlace más el padding) y no sólo el texto. El fondo, como se puede apreciar, tampoco debe repetirse y se debe anclar a la izquierda.

Hay que crear la clase “activa”, con unas imágenes de fondo distintas, en otro color, que simbolizarán la pestaña activa.

#pestanas .activa a{
background-image:url(“p-izq-activo.gif”);
}
#pestanas .activa{
background-image:url(“p-der-activo.gif”);
}

No se cambia ningún otro atributo del elemento de la lista ni del enlace, solamente el archivo que tiene que utilizarse como imagen de fondo.

Seguidamente se tiene el ejemplo creado por completo.

<html>
<head>
<title>Pestañas maquetadas con listas y CSS</title>
<style type=”text/css”>
#pestanas {
float:left;
width:100%;
line-height:normal;
font-size: 16px;
font-weight: bold;
}
#pestanas ul {
margin:0;
padding:0;
list-style:none;
}
#pestanas li {
float:left;
margin:0 0 0 3px;
padding:0;
background:url(“p-der.gif”) no-repeat right top;
}
#pestanas a {
display:block;
background:url(“p-izq.gif”) no-repeat left top;
padding:3px 10px 3px 10px;
color: #fff;
text-decoration: none;
}
#pestanas .activa a{
background-image:url(“p-izq-activo.gif”);
}
#pestanas .activa{
background-image:url(“p-der-activo.gif”);
}
</style>
</head>
<body>
<div id=”pestanas”>
<ul>
<li><a href=”#”>DesarrolloWeb.com</a></li>
<li class=”activa”><a href=”#”>CriarWeb.com</a></li>
<li><a href=”#”>Comunidad</a></li>
<li><a href=”#”>Otro enlace más largo</a></li>
</ul>
</div>
</body>
</html>

Seguidamente se va a explicar cómo definir estilos a la lista y a los enlaces para que tuvieran el aspecto de pestañas o tabs. Entonces creamos dos tipos de pestañas, una para cuando la pestaña está activa o seleccionada y otra para cuando no está activa.

Fondo para la capa donde están las pestañas

Se debe crear un fondo de imagen para la capa donde están las pestañas. El fondo podrá ser como nosotros queramos, pero la imagen deberá tener en la parte de abajo una línea que sirva para cerrar las pestañas en la base de éstas. Por ejemplo, podríamos utilizar un fondo como el de la siguiente imagen:

En el ejemplo esta capa el id=”pestanas”, así que para especificar el fondo de este elemento se debe que alterar el CSS :

#pestanas {
float:left;
width:100%;
line-height:normal;
font-size: 16px;
font-weight: bold;
/*pongo un fondo para toda capa donde están las pestañas*/
background: transparent url(fondo-pestanas.gif) repeat-x bottom;
}

Mostrar, o no, la línea que cierra las pestañas

Se debe definir un padding en la base (bottom) de los enlaces para dejar ver, o no, la línea que cierra las pestañas. La pestaña activa no debe dejar verse el fondo con la línea que cierra las pestañas, para que parezca que está abierta.

Se debe definir dos padding-bottom distintos, para los enlaces de las pestañas en general y para el enlace de la pestaña activa en particular. El padding-bottom de la pestaña activa deberá ser tantos píxeles mayor como sea la altura de la línea que cierra las pestañas (que hemos definido en el fondo, en nuestro caso 1 píxel). Así conseguiremos que el enlace de la pestaña activa llegue hasta abajo del todo de la capa donde están las pestañas (id=”pestanas”), sobreponiéndose a la línea del fondo y sin permitir que se vea. Las pestañas desactivadas tendrán menos padding-bottom, con lo que no llegarán al fondo de la capa donde están las pestañas y dejarán entrever la línea del fondo que las cierra.

#pestanas a {
display:block;
background:url(“p-izq.gif”) no-repeat left top;
padding:3px 10px 3px 10px;
color: #fff;
text-decoration: none;
/*definimos un padding para los enlaces de las pestañas*/
padding-bottom: 2px;
}
#pestanas .activa a{
background-image:url(“p-izq-activo.gif”);
/*colocamos un padding 1 pixel mayor que el padding de los enlaces no activos*/
padding-bottom:3px;
}

Y estas son las únicas modificaciones que habría que hacer para que la interfaz de pestañas tenga una línea para delimitar las tabs no activas.

Contenedor para la pestaña activa

Para que se vea bien el efecto de pestaña activa, se coloca debajo de las pestañas una nueva capa que serviría como contenedor del contenido de la pestaña seleccionada. Este contenedor no haría falta para el ejemplo de pestañas, pero será mejor colocarlo para mostrar con más claridad el efecto explicado en este artículo.

El contenedor es una simple capa DIV con un texto, a la que se le debe de asignar algunos estilos CSS:

<div id=”contenedorpestanas”>
Aquí se mostraría el contenido de la pestaña activa…
</div>
#contenedorpestanas{
background-color: #ccb355;
padding: 10px;
clear: both;
}

Entre los estilos colocados hay dos que serían importantes. Primero el fondo del contenedor, que lo he colocado con el mismo color de la pestaña activa, para que se continúe el color desde ésta hacia el contenedor y parezca que formen parte de un mismo bloque. Luego necesitaba también un estilo clear:both, puesto que los elementos de la lista estaban con un “float” y esta nueva capa id=”contenedorpestanas” queremos que aparezca justo debajo.

Bordes Redondeados con CSS

Bordes Redondeados con CSS

La implementación de bordes redondeados en HTML normalmente se hacer utilizando imágenes de fondo o con otras técnicas que por lo general son engorrosas, esta vez les presentamos una técnica muy sencilla con la que podemos crear elementos con esquinas redondeadas de manera sencilla.

Como lo hacemos

Para crear bordes redondeados con CSS en Firefox, podemos utilizar la propiedad -moz-border-radius y si utilizamos Safari se puede utilizar la propiedad -webkit-border-radius, pero para Internet Explorer no hay posibilidad de hacerlo nativamente.

Entonces para ello haremos uso de un hack que fue publicado en Curved corner (border-radius) cross browser, este hack se ha preparado en un archivo border-radius.htc. Entonces luego de descargar el archivo, para aplicar los bordes redondeados creamos un estilo de la forma:

  1. .curved {
  2. -moz-border-radius: 10px;
  3. -webkit-border-radius: 10px;
  4. behavior:url(border-radius.htc);
  5. }

Luego podemos aplicar este estilo a cualquier div que nosotros deseamos, como se muestra a continuación:

  1. <div id=”alert” class=”curved”>Curved Corner</div>

Con esto logramos obtener las esquinas redondeadas que se verán correctamente en todos los navegadores y con unas pocas líneas.

Observaciones
He probado este hack y por defecto le pone un borde al div que elegimos, para eliminar este efecto es necesario agregar un borde con el mismo color de fondo del elemento. Además de ello por defecto hace que el div al que se aplica los bordes redondeados se muestre centrado, para evitar ello agregamos un par de líneas a nuestro CSS (float y clear).

  1. #alert {
  2. width: 250px;
  3. background-color: #A0C7F1;
  4. border: #A0C7F1 solid 1px;
  5. clear: both;
  6. float: left;
  7. }

El código anterior crea un elemento de de 250 pixels de ancho con color de fondo y borde iguales. Este ejemplo lo podemos ver funcionando en Esquinas Redondeadas.


Por Adriana Gonzalez

Diferencias entre Internet Explorer 7 y 6

Diferencias entre Internet Explorer 7 y 6

Internet Explorer 7 aporta bastantes novedades con respecto a Internet Explorer 6. Muchas están relacionadas con la interfaz de usuario (pestañas, anti-phising, RSS, barra de búsqueda, etc), pero también ha mejorado el soporte de las recomendaciones del W3C. En esta página se comentan algunas de esas diferencias.

Nota: Faltan por poner bastantes diferencias y añadir capturas en algunos de ellos.


Instalar IE6 e IE7 en el mismo ordenador

Con el tiempo, IE6 dejará de utilizarse, pero mientras tanto todavía hay un porcentaje significativo de usuarios de IE6, por lo que a la hora de diseñar un sitio web es importante tener en cuenta a esos usuarios.

El problema es que Internet Explorer 7 se instala sobre Internet Explorer 6, por lo que en principio no se pueden tener las dos versiones instaladas simultáneamente en el mismo ordenador, lo que complica la prueba de un sitio web en ambos navegadores.

Una forma sencilla (aunque con limitaciones) de poder utilizar ambos navegadores en el mismo ordenador es instalar una versión standalone de IE6, como la que se puede descargar de la web Evolt.org, concretamente de la página http://browsers.evolt.org/?ie/32bit/standalone.

Esa versión IE6 standalone no funciona exactamente igual que el IE6 original, seguramente porque el navegador utiliza funciones de Windows que se modifican al instalar IE7. Por ejemplo, aunque IE6 no es capaz de mostrar correctamente imágenes en formato PNG con transparencia parcial, al instalar IE7, que sí lo hace, la versión IE6 standalone ya muestra las imágenes correctamente.

Comentado en http://www.456bereastreet.com/archive/200605/testing_in_both_ie_6_and_ie_7/ y http://www.positioniseverything.net/articles/multiIE.html

http://tredosoft.com/Multiple_IE

La solución que propone Microsoft es utilizar máquinas virtuales. La plataforma de virtualización de Microsoft se llama VirtualPC y actualmente (septiembre de 2007) la última versión publicada es Virtual PC 2007 de febrero de 2007. Microsoft también proporciona imágenes con Windows XP SP2 e IE 6 o IE 7. Actualmente (septiembre de 2007) la última versión publicada es de agosto de 2007.

Volver al índice


Utilización del navegador

Tamaño del texto

En IE6 la combinación Ctrl+rueda del ratón cambiaba el tamaño del texto entre los 5 valores posibles que se encuentran en el menú Ver > Tamaño de texto (Muy grande, Grande, Mediano, Pequeño, Muy pequeño).

En IE7 la combinación Ctrl+rueda del ratón permite ampliar o reducir una página, pero esta ampliación/reducción se aplica a todos los elementos de la página (texto, imágenes, etc) y no únicamente al texto.

La combinación Ctrl+rueda del ratón funciona en IE7 al revés que en IE6, es decir, que en IE6 cuando la rueda se desplazaba hacia atrás (hacia el usuario) el tipo de letra aumentaba, mientras que en IE7 todo se ve más pequeño.

Volver al índice


Selectores

El selector de hijos E > F funciona en IE7, pero no funcionaba en IE6. Para ver la diferencia, se puede abrir la página sobre selectores CSS en ambos navegadores.

El selector de hijos E + F funciona en IE7, pero no funcionaba en IE6. Para ver la diferencia, se puede abrir la página sobre selectores CSS en ambos navegadores.

Volver al índice


Pseudo-clases y pseudo-elementos

La pseudo-clase :first-child funciona en IE7, pero no funcionaba en IE6. Para ver la diferencia, se puede abrir la página sobre pseudo-clases en ambos navegadores.


La pseudo-clase :hover funciona en IE7, pero únicamente funcionaba en IE 6 cuando se aplicaba a enlaces.

Correcto en Internet Explorer 7 Incorrecto en IE6 p { color: black; background-color: white; }
a:hover { color: white; background-color: black; }

Este párrafo está escrito en negro sobre blanco, pero cuando pasas el ratón por encima de este enlace, el enlace se escribe blanco sobre negro.

Correcto en Internet Explorer 7 Incorrecto en IE6 p { color: black; background-color: white; }
p:hover { color: white; background-color: black; }
Este párrafo está escrito en negro sobre blanco, pero cuando pasas el ratón por encima del párrafo, se escribe blanco sobre negro.

Volver al índice


PNG con transparecia alfa

IE6 no mostraba correctamente las imágenes en formato PNG con transparencia alfa. IE7 sí que lo hace.

Volver al índice


Bordes no válidos

Si al definir un borde no se escribe la unidad correspondiente al grosor del borde, IE7 no dibuja el borde, pero IE sí que lo hacía.

Correcto en Internet Explorer 7 Incorrecto en IE6 p { border: black 5 solid; }
/* El grosor no está escrito correctamente, falta la unidad */
Este párrafo tiene un borde escrito incorrectamente, por lo que no debería verse.

Volver al índice


Etiquetas <abbr> y <acronym>

IE7 añade un subrayado discontinuo a las etiquetas <abbr> y <acronym>, pero IE6 no lo hacía.

Volver al índice


Etiquetas en html y body

Color de fondo en html y body

IE7 e IE6 interpretan de manera distinta el color de fondo en las etiquetas html y body. Para ver las diferencias, se puede abrir la siguiente página de ejemplo de color de fondo en ambos navegadores y comparar el resultado.

IE7 muestra tanto el color de fondo de html como el de body. El color de fondo de body abarca únicamente la porción de la ventana con contenido (texto o imágenes), mientras que el resto se muestra con el color de fondo de html.

IE6 mostraba toda la ventana con el color de fondo de body.

Estas capturas corresponden a la página Border en html y body
Internet Explorer 6 Internet Explorer 7
IE 6 - Background-color en html y body IE 7 - Background-color en html y body

Volver al índice


Bordes en html y body

IE7 e IE6 interpretan de manera distinta los bordes en las etiquetas html y body. Para ver las diferencias, se puede abrir la siguiente página de ejemplo de bordes en ambos navegadores y comparar el resultado.

IE7 muestra tanto el borde de html como el de body. Además si el contenido no cabe en la ventana y es necesario utilizar la barra de desplazamiento, los bordes inferiores no se ven hasta que uno se desplaza al final de la página.

IE6 mostraba ambos bordes de la misma manera, así que si se definían ambos sólo se mostraba uno de ellos, concretamente el borde de body. Además, era un borde que se mostraba siempre pegado a la ventana, independientemente del contenido, hasta el punto que la barra de desplazamiento vertical aparecía dentro del borde. Por si fuera poco, interpretaba el margin como el padding y mostraba un margen interior igual a la suma del margen exterior y del interior.

Estas capturas corresponden a la página Border en html y body
Internet Explorer 6 Internet Explorer 7
IE 6 - Border en html y body IE 7 - Border en html y body

Volver al índice


Padding en imágenes

Internet Explorer 7 sí que muestra el padding en las imágenes, pero Internet Explorer 6 no lo hacía.

Volver al índice


Enlaces

Enlaces a body

Cuando el destino de un enlace es el elemento body, Internet Explorer 6 no saltaba al principio de la página. Internet Explorer 7 sí que salta al principio de la página. Para ver las diferencias, se puede abrir la página de ejemplo de enlaces a body y html en ambos navegadores y comparar el resultado.

Volver al índice


Fondos

La propiedad background-attachment : fixed

Ni Firefox ni Internet Explorer 7 muestran la imagen de fondo en el segundo ejemplo siguiente, en el que la propiedad background-attachment tiene el valor fixed. Internet Explorer 6 mostraba los dos ejemplos como Interent Explorer muestra el primero.

Correcto en Firefox Correcto en Internet Explorer 7
Correcto en IE6
div { background-image: url(“verde.jpg”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;}
Este cuadro tiene una imagen como fondo. Si el texto no cabe en el cuadro, el navegador muestra unas barras de desplazamiento (en este caso, verticales). Si no ves las barras de desplazamiento, aumenta el tamaño de la fuente o reduce el tamaño de la ventana hasta que aparezcan las barras de desplamiento.A continuación, desplaza el texto arriba y abajo y verás cómo la imagen se desplaza junto con el texto.

Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido.

Incorrecto en Firefox Incorrecto en Internet Explorer 7Incorrecto en IE6 div { background-image: url(“verde.jpg”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;}
Este cuadro tiene una imagen como fondo. Si el texto no cabe en el cuadro, el navegador muestra unas barras de desplazamiento (en este caso, verticales). Si no ves las barras de desplazamiento, aumenta el tamaño de la fuente o reduce el tamaño de la ventana hasta que aparezcan las barras de desplamiento.A continuación, desplaza el texto arriba y abajo y verás cómo la imagen se desplaza junto con el texto.

Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido.

Volver al índice


Alineación de una tabla

Las propiedades margin-left: auto y margin-right: auto para centrar una tabla y su leyenda funcionan en IE7, pero no funcionaban en IE6.

Para centrar una tabla en IE6 había que insertar la tabla en una división y centrar el contenido de la división. De esta manera IE6 centraba la tabla, pero no el contenido de la tabla. Aunque esta solución funciona también en IE7, no funciona en Firefox, que no centra la tabla pero sí el contenido de la tabla. Para que se vea de la misma manera en los tres navegadores, hay que añadir las propiedades necesarias para centrar la tabla y para alinear el texto a la izquierda, como muestra el siguiente ejemplo:

Correcto en Firefox Correcto en Internet Explorer 7 Incorrecto en IE6 table { margin-left: auto; margin-right: auto; }
caption { margin-left: auto; margin-right: auto; }
Esto es la leyenda
Casilla 1, con más texto Casilla 2
Casilla 3 Casilla 4, con más texto
Incorrecto en Firefox Correcto en Internet Explorer 7 Correcto en IE6 div { text-align: center; }
table { }
Esto es la leyenda
Casilla 1, con más texto Casilla 2
Casilla 3 Casilla 4, con más texto
Correcto en Firefox Correcto en Internet Explorer 7 Correcto en IE6 div { text-align: center; }
table { margin-left: auto; margin-right: auto; text-align: left; }
caption { margin-left: auto; margin-right: auto; }
Esto es la leyenda
Casilla 1, con más texto Casilla 2
Casilla 3 Casilla 4, con más texto

Nota: Internet Explorer 6 sí que entendía las propiedades margin-left y margin-right con el valor auto si la página no contenía la primera línea habitual (pero no obligatoria) en los documentos XHTML:

1  <?xml version="1.0" encoding="iso-8859-1"?>

Volver al índice


Formularios

Tecla de acceso Alt+d

Internet Explorer 7 reserva la combinación Alt+d para acceder a la barra de dirección, mientras que Internet Explorer 6 permitía utilizarla como tecla de acceso para acceder a un elemento de un formulario.

Correcto en Firefox Incorrecto en Internet Explorer 7 Correcto en IE6 <input type=”text” value=”Acceso con d” accesskey=”d” />

Volver al índice


Etiqueta label

La etiqueta label sin atributo for funciona en IE7 pero no funcionaba en Internet Explorer 6.

Correcto en Firefox Correcto en Internet Explorer 7 Incorrecto en IE6 <label><input type=”checkbox” />Casilla 1</label> Casilla 1
Correcto en Firefox Correcto en Internet Explorer 7 Incorrecto en IE6 <label>Nombre: <input type=”text” /></label> Nombre:

Volver al índice


Tamaño

Ver Apartado Posicionamiento absoluto: position: absolute

Volver al índice


Posicionamiento

Posicionamiento fijo: position: fixed

El posicionamiento fijo funciona en IE7 pero no funcionaba en IE6. Para ver las diferencias, se puede abrir la página de ejemplo de posicionamiento fijo en ambos navegadores y comparar el resultado.

Estas capturas corresponden a la página ejemplo de posicionamiento fijo
Internet Explorer 6 Internet Explorer 7
IE 6 - Position: fixed IE 7 - Position: fixed

Volver al índice


Posicionamiento absoluto: position: absolute

El posicionamiento absoluto funciona en IE7, pero no funcionaba correctamente en IE6.

El problema es que IE6 descontaba el border y el padding del tamaño del elemento, cuando la recomendación dice que el border y el padding se añaden al tamaño del elemento.

La recomendación CSS2 del W3C establece que el margen interior (padding), el borde (border) y el margen exterior (margin) se añaden al tamaño definido para el elemento (por ejemplo, con las propiedades width y height).

Internet Explorer 6 incluía el borde (border) y el margen interior (padding) dentro del elemento, en vez de añadirlo.

La página de ejemplo de tamaño de elemento muestra varias divisiones con el mismo tamaño, pero con diferentes bordes y márgenes. El fondo cuadriculado permite comparar el tamaño total de cada división. Hay que tener en cuenta que las divisiones con margen parecen desplazadas de su posición.

Por Adriana Gonzalez

Shorthand

shorthand

shorthand1Por Adriana Gonzalez

Listado Hacks y utilización en diferentes navegadores

hacks

hacks

http://centricle.com/ref/css/filters/

Por Adriana Gonzalez

25 Reglas para hacer CSS accesibles

25 reglas para hacer CSS accesibles

25 reglas

Este documento describe unas técnicas para la creación de hojas de estilo en cascada (CSS) accesibles.
[…]
Aunque las técnicas descritas en este documento ayudarán a crear CSS conforme a las “Pautas de Accesibilidad al Contenido en la Web 1.0”, estas técnicas no garantizan la conformidad y no son la única manera de crear contenidos conformes.

[Cita literal de dicho documento]Este artículo recoge un resumen de las técnicas descritas. Se puede consultar el original para profundizar en cada punto.
  1. Use un número mínimo de hojas de estilo en su sitio.
  2. Use hojas de estilo vinculadas en vez de estilos incrustados (directamente en las etiquetas) y evite hojas de estilo incrustadas (directamente en la página).
  3. Si tiene más de una, use el mismo nombre de clase (“class”) para el mismo concepto en todas las hojas de estilo.
  4. Use la unidad “em” para fijar el tamaño de letra.
  5. Utilice unidades de medida relativas y porcentajes. Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas, por ejemplo con imágenes de mapa de bits.
  6. Proporcione un equivalente textual para cualquier imagen o texto importantes generados por la hoja de estilo (por ejemplo, mediante las propiedades “background-image”, “list-style”, o “content”).
    • selectores de atributos.
    • la función attr() y la propiedad “content”
    • los seudo-elementos :before (antes) y :after (después)
  7. CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes:

  8. Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1 ([DOM1]).CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:
    • Los seudo-elementos :before y :after y la propiedad “content”. Cuando éstos se emplean conjuntamente, permiten la inserción de marcadores antes o después del contenido del elemento.
    • Las propiedades “cue”, “cue-before”, y “cue-after”. Estas propiedades permiten a los usuarios reproducir un sonido antes o después del contenido de un elemento.
  9. Especifique siempre un tipo de letra genérico por defecto.
  10. Use las siguientes propiedades CSS2 para controlar la información de la fuente: “font”, “font-family”, “font-size”, “font-size-adjust”, “font-stretch”, “font-style”, “font-variant”, y “font-weight”, en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT, BASEFONT, “face”, y “size”.
  11. Si tiene que usar los elementos HTML para controlar la información sobre el tipo de letra, utilice BIG y SMALL, que no están desaconsejados.
  12. Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto:
    • Mayúsculas/minúsculas: “text-transform” (para mayúsculas, minúsculas y primera letra mayúscula).
    • Efectos de sombra: “text-shadow”
    • Subrayado: “text-decoration”.
  13. No use los elementos BLINK o MARQUEE. Estos elementos no aparecen en ninguna especificación W3C para HTML (es decir, son elementos no estándares)Si se emplea contenido parpadeante (por ejemplo, un titular que aparece y desaparece a intervalos regulares), proporcione un mecanismo para detener el parpadeo. Con CSS, “text-decoration: blink” producirá el efecto de parpadeo y además permitirá al usuario detener el efecto desactivando las hojas de estilo o redefiniendo la regla en una hoja de estilo de usuario.
  14. Utilice hojas de estilo para dar estilo al texto, mejor que representar el texto con imágenes. Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios y permitirá a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente.Si es necesario utilizar un mapa de bits para crear un efecto de texto (letra especial, transformación, sombras, etc.) el mapa de bits debe ser accesible.
  15. Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posición del texto:
    • Sangría: “text-indent”. No utilice BLOCKQUOTE o cualquier otro elemento estructural para hacer sangrías en el texto.
    • Espaciado de letras o palabras: “letter-spacing”, “word-spacing”. Por ejemplo, en lugar de escribir “H O L A” (que los usuarios generalmente reconocen como la palabra “hola”, pero que un lector de pantalla leería como letras independientes) los autores pueden crear el mismo efecto visual aplicando a “HOLA” la propiedad “word-spacing”. Los textos sin espacios serán transformados en discurso más fácilmente.
    • Espacio en blanco: “white-space”. Esta propiedad controla la interpretación del espacio en blanco del contenido de un elemento.
    • Dirección del texto: “direction”, “unicode-bidi”.
    • Los pseudoelementos: first-letter y :first-line permiten a los autores hacer referencia a la primera letra o línea de un párrafo del texto.
  16. Use números en vez de nombres, para especificar colores.Use estas propiedades CSS para especificar colores:
    • “color”, para el color de primer plano del texto.
    • “background-color”, para el color de fondo.
    • “border-color”, “outline-color” para colores de bordes.
    • Para colores de vínculos, haga referencia a las pseudo-clases :link, :visited, y :active.
  17. Asegúrese de que los colores de primer plano y de fondo tienen buen contraste. Si especifica el color de primer plano, siempre debe especificar también el color de fondo (y viceversa).
  18. Asegúrese de que la información no se transmite sólo a través del color.
  19. Emplee UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales.(1)
  20. Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. (Ver ejemplo en el documento original)
  21. Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y colocación absoluta) y no mediante tablas:
    • Las propiedades “text-indent”, “text-align”, “word-spacing” y “font-stretch”, permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice ‘text-align:center’ en lugar del elemento desaconsejado CENTER.
    • Con las propiedades ‘margin’, ‘margin-top’, ‘margin-right’, ‘margin-bottom’ y ‘margin-left’, los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios de no separación (&nbsp;).
    • Con las propiedades “float”, “position”, “top”, “right”, “bottom” y “left”, el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.
    • La propiedad “empty-cells” permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel. Una celda de datos que debe estar vacía no debería ser llenada con un espacio en blanco o un espacio “non-breaking” sólo para lograr un efecto visual.
  22. Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes. Si los diseñadores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo, con IMG) para diseñar con imágenes en las páginas, deberían especificar alt=”” para ellas.
  23. Utilice las hojas de estilo para crear líneas y bordes. Las líneas y bordes pueden transmitir la noción de “separación” a los usuarios que pueden ver, pero este sentido no puede ser deducido fuera de un contexto visual.Utilice las propiedades CSS para especificar los estilos de los bordes:
    • “border”, “border-width”, “border-style”, “border-color”.
    • Para las tablas, “border-spacing” y “border-collapse”.
    • Para contornos dinámicos, “outline”, “outline-color”, “outline-style” y “outline-width”.
  24. Asegúrese de que la presentación del contenido es comprensible cuando no se aplican hojas de estilo. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden “lógico”) y entonces aplicar hojas de estilo para lograr efectos visuales.
  25. Estudie la necesidad de utilizar propiedades auditivas de CSS2, las cuales proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida al tipo de letra que proporciona información visual.Las siguientes propiedades forman parte de hojas de estilo en cascada de CSS2.
    • “volume” controla el volumen del texto hablado.
    • “speak” determina si el contenido se pronunciará y, en caso afirmativo, si se debe deletrear o leer como palabras.
    • “pause”, “pause-before”, y “pause-after” controla las pausas antes y después de anunciar el contenido. Permite a los usuarios separar los contenidos para mejorar la comprensión.
    • “cue”, “cue-before”, y “cue-after” especifican un sonido que se reproducirá antes y después del contenido, lo que puede ser valioso para la orientación (parecido a una imágen visual).
    • “play-during” controla los sonidos de fondo durante la presentación del elemento (parecido a un imagen de fondo).
    • “azimuth” and “elevation” proporcionan una dimensión al sonido, lo que permite a los usuarios distinguir las voces, por ejemplo.
    • “speech-rate”, “voice-family”, “pitch”, “pitch-range”, “stress”, y “richness” controlan las cualidades de los contenidos hablados. Cambiando estas propiedades para diferentes elementos, los usuarios pueden ajustar con detalle la presentación sonora-auditiva de los contenidos.
    • “speak-punctuation” y “speak-numeral” controlan la forma de decir los números y la puntuación, lo que afecta la calidad de la experiencia para la navegación por voz.
    • la propiedad “speak-header” describe cómo se debe decir la información sobre los encabezados antes de una celda de tabla.
  26. Cree distintas hojas de estilo para adaptar la presentación del documento a diferentes dispositivos de salida (Braille, sintetizadores de voz o dispositivos TTY, pantalla, móvil, etc.) mediante los “tipos de medios” de CSS2 (empleados con las reglas @media) Las reglas “@media” también pueden reducir los tiempos de descarga porque permiten a las aplicaciones de usuario ignorar reglas inapropiadas.

Notas
(1) La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. Los ítems están numerados como “1”, “1.1”, “1.1.1”, etc.

Ejemplo.

<style type="text/css">
ul, ol { counter-reset: item }
li { display: block }
li:before {
content: counters(item, ".");
counter-increment: item;
}
</style>

Por Adriana Gonzalez

Tecnicas CSS para las Pautas de Accesibilidad al contenido en la Web 1.0

Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1.0

Por Adriana Gonzalez Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1.0

Por Adriana Gonzalez

Hacks para CSS y Cómo detectar el navegador

Hacks para CSS y Cómo detectar el navegador

Más y más diseñadores Web han dejado el uso de las tablas, para controlar el diseño de su sitio web con CSS. Pues, con las muchas ventajas que esto ofrece como el menor tiempo de transferencia directa, la mejor accesibilidad y un manejo más fácil del sitio ¿Por qué no?

Sin embargo, el CSS también tiene sus dificultades.

El problema con el CSS

El problema principal con el uso de CSS ha sido históricamente la carencia de soporte del navegador. Esto es muy importante, la accesibilidad se ha convertido en todo un tema de boga. Hacer los diseños para Internet Explorer 6.0 y para Firefox es lo más importante, pero no podemos descuidar la forma en que nos ven desde otros navegadores más antiguos, pues hay muchos que no soportan todos los estilos.

Como detectar el tipo de navegador con un CSS Hack

La manera de hacerlo es creando una regla para determinar el tipo de navegador y otra regla para determinar los otros, eliminando la primera

Teniendo en cuenta que si tienes dos reglas CSS con selectores idénticos, siempre la segunda regla tendrá prioridad.

Por ejemplo, si deseas poner un espacio de 25 píxeles entre el header y el contenido, en Internet Explorer se vería bien. Pero en otros navegadores como firefox, Opera y Safari, el espacio se vería enorme. Para conseguir el mismo espacio deberíamos colocar 10 píxeles. Entonces, para obtener un buen diseño para todos los navegadores, deberíamos colocar:

#header {margin-bottom:25px}
#header {margin-bottom:10px}

El primer comando debe ser requerido por IE y el segundo por el resto de navegadores. ¿Cómo funciona esto? Bien, porque todos los navegadores entienden ambas reglas de CSS y por tanto siempre usarán la segunda.

Ahora bien, insertando un hack CSS podemos realizar nuestra detección del navegador y ocultar la segunda regla sólo para IE. Es decir, Internet Explorer no sabrá que la segunda regla existe y por lo tanto no la utilizará. ¿Cómo hacemos esto?

Detección del navegador para Internet Explorer

Para enviar diversas reglas CSS a IE, podemos utilizar un comando de selector hijo que IE no entienda. El comando selector hijo implica dos elementos, uno de los cuales es el hijo del otro. Así pues, html>body refiere al hijo, body dentro del padre, HTML.

Por ejemplo, usando el elemento margen, nuestro css sería:

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

IE no puede entender la segunda regla del CSS (el comando html>body) por lo que sólo utilizará la primera regla. El resto de los navegadores utilizarán la segunda.

Detección del browser para el Internet Explorer 5

Puede parecernos extraño al principio enviar distintas reglas CSS a diversas versiones de un navegador, pero en el caso de IE 5 es necesario. Al especificar el ancho (widht) de un elemento con CSS, el padding y los bordes (border) no se incluyen en este valor. IE 5, sin embargo, los incorpora.

La regla siguiente CSS produce un ancho de 10em para todos los navegadores, excepto IE5, que sólo le da un ancho de 5em (pues incorpora 1em de borde así como 4em de padding, por ambos lados):

#header {padding: 2em; border: 0.5em; width: 10em}

¿La solución al problema? El box model hack, inventado por Tantek Çelik que se ha hecho famoso en el mundo del CSS como resultado de este hack. Para realizar la detección del navegador y enviar una regla diversa a IE5 usted debe utilizar:

#header {padding: 2em; border: 0.5em; width: 15em; voice-family: “\”}\””; voice-family:inherit; width: 10em}

Como logró esto! Sería conjeturar, lo importante es que funciona perfectamente para Internet Explorer 5.0. De esta manera, IE5 usará el primer valor (width: 15em), 5em por los dos paddings y dos bordes (uno para el izquierdo y para el derecho). Lo que daría en última instancia una anchura de 10em al elemento width, en IE5.

A su vez, el valor de 15em será anulado por el segundo valor de 10em para todos los navegadores excepto IE5, que por la razón que sea, no puede entender que esos garabatos son código CSS. ¡No parece bonito pero realmente funciona!.

Detección del browser para el Internet Explorer en Mac

Simplemente, IE en Mac hace cosas extrañas con el CSS. El navegador ha llegado a ser algo obsoleto mientras Microsoft no lance su nueva versión. Por esto, muchos diseñadores Web escriben su CSS para que funcione con IE/Mac, aunque puede no ofrecer el mismo nivel de la funcionalidad o de avanzado diseño.

Con tal que los usuarios del IE y Mac puedan tener acceso a todas las áreas del sitio esta sería una manera conveniente de hacerlo.

Podemos ocultar un comando usando el IE/Mac CSS hack es simple, e implica envolver un sistema de tantas reglas CSS como le apetezca:

/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */

El IE en Mac no hará caso de todos estos comandos. Este hack CSS puede ser realmente útil si hay cierta área del sitio que no funciona correctamente. Si esa sección no es necesaria para el sitio, usted puede ocultarla absolutamente:

#noiemac {display: none}
/* Hide from IE-Mac \*/
#noiemac {display: block}
/* End hide */

La primera regla CSS oculta el div identificado como noiemac (i.e. <div>). La segunda regla CSS, que el IE en Mac no puede ver, exhibe esta sección.

Detección del browser para Netscape 4

Elaborar un diseño CSS en este navegador (que tiene una cuota de mercado por debajo del 1%) puede ser desafiante. Es práctica común de hoy en día, ocultar el archivo del CSS a este browser. Esto se puede lograr usando el directorio @import para llamar encima al documento CSS:

<style type=”text/css”>@import url(cssfile.css);</style>

Netscape 4 exhibirá una versión sin estilos del sitio pues no puede entender el directorio del @import.

Conclusión

Actualmente, los navegadores modernos tienen muy buen soporte para el CSS – por lo menos lo suficiente, como para utilizar CSS en la disposición y presentación de la página Web. A veces sin embargo, ciertos elementos de la página aparecerán de manera distinta según el tipo navegador y su versión. ¡No se preocupe demasiado si usted no conoce la razón! Pues, mientras usted utilice estos hacks, sus páginas Web tendrán grandes diseños en todos los navegadores.

Por Adriana Gonzalez

Hacks en CSS

Hacks en CSS

En este ejemplo podríamos aceder al <p></p> que engloba Test de las siguientes formas.

 
#attrhack[disabled=""]+p {}
    Firefox 1.5 y anteriores, posiblemente versiones futuras
    Safari 2.0 y anteriores, posiblemente versiones futuras
    Konqueror 3.5 y anteriores, posiblemente versiones futuras
#attrhack[disabled="true"]+p {}
    Opera 9 y anteriores, posiblemente versiones futuras

Los hacks de CSS son triquiñuelas para conseguir que una misma declaración de estilos CSS actúe de manera distinta en distintos navegadores. Bajo este concepto se engloban diversas técnicas, muchas veces poco ortodoxas, para lidiar con las distintas interpretaciones de CSS que tienen los distintos navegadores.

Los hacks CSS surgen porque distintos navegadores a menudo interpretan de manera distinta el mismo estilo CSS. Entonces los desarrolladores y diseñadores, que se ven en la necesidad de hacer páginas que se muestren igual independientemente del navegador, tienen que utilizar códigos y trucos complejos para conseguir que la página se visualice de la misma forma en distintos navegadores.

La cuestión es que debería haber una sola interpretación del estándar CSS, pero como cada navegador hace la guerra por su cuenta, al final ocurre que no es así y nos queda a nosotros el problema de hacer que todo cuadre. Es algo a lo que ya estamos acostumbrados con HTML y Javascript, pero que también tenemos que aprender a lidiar con CSS.

Los hack CSS muchas veces juegan con distintas interpretaciones a errores de sintaxis, cometidos a propósito en el código CSS. Por ello en principio conviene evitarlos o bien es recomendable utilizarlos con cuidado.

Hack CSS de los comentarios de dos barras (//)

En este artículo mostraremos un ejemplo sobre cómo funcionan los Hack CSS, con un típico caso que utiliza los comentarios formados por dos barras (//), que no son tratados como comentarios en Internet Explorer.

Es decir, como hemos visto en otros lenguajes de programación, si una línea de código tiene dos barras al comienzo significa que está comentada y no se tiene en cuenta. En CSS los comentarios se tienen que hacer así:

/* esto es un comentario */
Pero Firefox también interpreta los comentarios formados por //
// esto es un comentario

Internet Explorer simplemente ignora las dos barras y trata la línea como si fuera un código normal.

Por ejemplo tenemos este código:

h1{
font-size: 12px;
color: #009900;
//font-size: 16px;
//color: #000099;
}

Aquí hemos definido un par de estilos para la etiqueta H1.
Los dos primeros estilos son font-size:12px y color:#009900. Todos los navegadores leerán estos estilos.

Pero luego tiene otros dos estilos, que en realidad son los mismos que los anteriores, que comienzan por dos barras. Firefox y Opera, que interpretan esas dos barras como comentarios, no leerán los estilos. Internet Explorer que no tiene en cuenta las dos barras como comentarios, leerá los dos últimos estilos.

Por lo tanto, el resultado final será que
• Todos los navegadores mostrarán los H1 con tamaño de fuente 12px y color verde.
• Internet Explorer mostrará los H1 con tamaño de 16px y color azul, dado que no tiene en cuenta las dos barras como si fueran comentarios.
Podemos ver el ejemplo en marcha en la URL:

http://www.desarrolloweb.com/articulos/ejemplos/tallercss/css-hack1.html

Tendríamos que verlo con Internet Explorer y con otros navegadores para comprobar que cambian los estilos con los que se muestra el encabezamiento H1.

Conclusión sobre los hacks CSS

Lo cierto es que los hacks CSS están ahí y muchas personas los utilizan habitualmente. Hay varios tipos de hacks, con técnicas más o menos conflictivas u ortodoxas. No debemos abusar de ellos, pero en algunas ocasiones no queda otra solución que utilizarlos para que una página se vea de la misma manera en los navegadores más comunes.

Vimos también un tipo de Hack CSS que sirve para ocultar ciertos estilos en Firefox u otros navegadores y que sólo funcione en Internet Explorer.

Tipos de Hacks CSS

Disponemos de 2 tipos de hacks, los conocidos como condicionales, que se aplican generalmente en los , y los hacks en línea, que los encontraremos en nuestro CSS.

Hacks condicionales

Esta pobremente soportado por los estandares, ya que es algo que Microsoft creó para su Internet Explorer 5 con el nombre de “conditionals comments”. Estos comentarios nos permiten conocer de que navegador y de que versión se trata y aplicar unos estilos u otros.

Positivo

    <!--[if condicion]> HTML <![endif]-->

Negativo

    <!--[if !condicion]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

HTML

<!– De esta forma podremos crear una condición que nos carge unos estilos dependiendo del navegador en el cual estén visitando a nuestra aplicación.
Estas son las conciones que podemos consultar.

IE
Cualquier versión de Internet Explorer
lt IE X
Versiones inferiores a X
lte IE X
Versiones inferiores o iguales a X
IE X
Solo para la version X
gte IE X
Versiones superiores o iguales a X
gt IE X
Versiones superiores a X

Pudiendo sustituir X por las versiones de IE disponibles (5,5.5,6 o 7).
Pero creo que será mejor ver un ejemplo práctico para conseguir entenderlo perfectamente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
               <head>
                               <title>Test</title>
                               <link href="all_browsers.css" rel="stylesheet">
                               <!--[if IE]> <link href="ie_only.css" rel="stylesheet"> <![endif]-->
                               <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet"> <![endif]-->
                               <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet"> <!--<![endif]-->
                               <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet"> <!--<![endif]-->
               </head>
               <body>
                               <p>Test</p>
               </body>
</html>

Hacks en línea

Los conocidos como hacks en línea son aquellos que nos encontramos en nuestro CSS, y que están colocados de forma que un navegador que no conozca esa nomenclatura no aplicará dicho efecto dejando el anterior, generalmente se aplican selectores. De esta forma podemos aplicar un estilo y posteriormente aplicar un nuevo valor a ese estilo mediante uno de los hacks y que se ejecute en caso de que el navegador conozca dicho hack y lo pueda interpretar.

Veamos los principales selectores y los navegadores que los interpretan.

IE 6 y anteriores
* html {}
IE 7 y anteriores
*:first-child+html {} * html {}
Solor IE 7
*:first-child+html {}
IE 7 y navegadores modernos
html>body {}
Navegadores modernos (IE 7 no)
html>/**/body {}
Ultimas versiones de Opera 9 y anteriores
html:first-child {}

Estos selectores nos permiten acceder a un mismo elemento por dos caminos diferentes, dependiendo del navegador de la forma en la que interprete los selectores.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
               <head>
                               <title>Test</title>
               </head>
               <body>
                               <input disabled>
                               <p>Test</p>
               </body>
</html>

Opera 9 y anteriores, posiblemente versiones futuras

Dentro de los hacks en línea tenemos otros operadors que nos permiten condicionar el aspecto de nuestras páginas. Aunque no son recomendables por la W3C ya que no nos permite la validación de las hojas de estilos de nuestra aplicación.

!important

Internet Explorer 6 y versiones anteriores tienen un problema con este operador, ya que generalmente es ignorado en cualquier declaración, aunque Internet Explorer 7 ya ha conseguido arreglar este problema.
Es usado para que la mayoría de navegadores respeten la importancia que tiene la declaración que lo contenga.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
               <head>
                               <title>Test</title>
                               <style>
                                              p
                                              {
                                                             background: green !important; /* Navegadores superiores a IE 6 respetarán la importancia inmediatamente */
                                                             background: red; /* IE 6 y anteriores aplicará este estilo aunque esté marcado la anterior como importante */
                                              }
                               </style>
               </head>
               <body>
                               <p>Test</p>
               </body>
</html>

Test

@import “non-ie.css” all;

Internet Explorer 7 y anteriores no soporta las reglas de los selectores @import, por lo tanto son ignorados en nuestro CSS. De esta forma puedes crear una hoja de estilos para navegadores no IE y importarla desde tu CSS principal dejando todos los navegadores IE fuera de este diseño.

@import “stylesheet.css” all;

body[class|=”page-body”]

La especificación CSS 2.1 no es muy clara aobre este tema o no hay un guión sobre este selector. Muchos navegadores, incluido Firefox e Internet Explorer 7, permiten el uso de body[class|=”page-body”] como selector para un tag así: . Encambio Opera interpreta esta especificación de diferente manera. El corta el valor del atributo y solo selecciona la primera pieza del selector. Ovbiamente si el atributo se corta no obtenemos el valor deseado. Por lo tanto este selector parece no funcionar en las versiones de Opera, aunque se espera que en versiones 8 y 9 deberían funcionar.

Hacks no recomendados

Debido a la dictadura que Internet Explorer nos ha tenido sometidos, disponemos de una serie de hacks que el validador de CSS de la W3C no soporta, pero que Internet Explorer 6 (y versiones inferiores) aún permite.

_propiedad: valor y -propiedad: valor

El uso de caracteres no alfanuméricos delante del nombre del atributo es algo que IE6 y anteriores si permite, menos mal que IE7 ya corrige este “problema”. Aunque gracias a él muchos años se han usado estos “fallos” para diferenciar aspectos entre IE y el resto de navegadores.
Una buena alternativa es usar !important.

_propiedad: valor y -propiedad: valor se aplica a IE6 y anteriores.

CSS no válido.

*propiedad: value

Este método es similar al anterior pero en este caso tambien tenemos que tener en cuenta a Internet Explorer 7, que pese a ser un caracter no alfanumérico lo trata como si del operador * se tratara.
*propiedad: valor funciona para todos los navegadore Internet Explorer, pero en futuras versiones no debería seguir funcionando.

CSS no válido.

body:empty

:empty es una pseudo-clase propuesta por la W3C para el CSS3 y debería hacer referencia a un elemento que no tiene en su interior otros elementos o nodos de texto. Sin embargo cuando lo usamos con el elemento body, Firefox 1.5 y 2.0 siempre lo selecciona pese a tener contenido.
Aunque parece que este hack será valido para la CSS3 las recomendaciones de la W3C es no usarlo, ya que para la especificación 2.x lo considera inválido. Sin embargo es probablemente la mejor manera de diferenciar Firefox en tus CSS.
body:empty selecciona el body únicamente en navegadores Gecko (Firefox 1.5 y 2.0).

CSS 2.x: CSS no válido.

CSS 3: CSS válido.

a:link:visited, a:visited:link

De acuerdo con el estandard CSS :link y :visited son estados que no pueden darse a la vez. Parece ser que IE7 y versiones anteriores ignoran una de ellas y lo trata como un simple selector. Si tienes un enlace podrás usar #enlace:link:visited{} o #enlace:visited:link {} para selecionar el elemento en Internet Explorer 7 y anteriores. Aunque se espera que en versiones futuras no funcione.
a:link:visited, a:visited:link {} selecciona un elemento
en Internet Explorer 7 y anteriores.

>body

Pese a ser un selector simple que nos indicaría el hijo de … (>) úbicado sin un elemento padre al que referenciar únicamente IE7 parece que lo interpreta. Aunque en futuras revisiones parece ser que van a solucionar este fallo.

>body {} Solo para Internet Explorer 7

CSS no válido.

html*
Internet Explorer 7 y todas las versiones anteriores, interpretan este hack como un intento de hacer referencia a todos los descendientes de html.
html* {} en Internet Explorer 7 y anteriores selecciona todos los nodos hijos de .

CSS no válido.

!ie

Internet Explorer 7 soluciona uno de las cuestriones con !important pero tiene problemas cuando el identificador tiene un error. Si se usa en lugar de !important, Internet Explorer manejará la propiedad correctamente en lugar de fallar. Por lo tanto en cualquier declaración de estilo puedes incluir las características prevista para aplicarse solamente en Internet Explorer y agregar !ie, cualquier palabra puede ser utilizada en lugar de ie.
CSS no válido.

!important!

Otro problema con el identificador !important que no han solucionado en IE7 es el uso de caracteres no alfanumérico detrás del identificador. Normalmente usarlo debería fallar, pero Internet Explorer 7 y anteriores ignoran el caracter final y lo aplica como si de !important se tratara.
!important! permite que la propiedad sea aplicada con la importancia requerida en IE7 y anteriores, aunque no será tratado por lo otros navegador. En futuras versiones dejará de funcionar.

CSS no válido.

Por Adriana Gonzalez

Función del atributo line-height

El atributo line-height define la distancia vertical entre las varias líneas de texto. Los valores se expresan en porcentajes o en unidades absolutas em. Dichos valores son directamente proporcionales al tamaño del texto (font-size). Por ello, en el ejemplo que sigue, estando el valor absoluto line-height impostado en 2 y el texto en 14px, la distancia será 28px (14px * 2em).

Ejemplo practico:

<DIV STYLE=”font-family:arial; font-size:14px; width:400px; line-height: 2em”>
HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>

Manual CSS

manual css

manual css Por Adriana Gonzalez

Por Adriana Gonzalez