Quiero añadir el up tweet pero no me acaba de aparecer donde me gustaría. Esta plantilla de Blogger me está matando .... grrr
Finalmente añado ShareThis con la ayuda de Integrar Share This 2.0 a Blogger
viernes, 25 de junio de 2010
probando el invento
Añade esta etiqueta donde quieras colocar el botón +1 -->
ShareThis
Etiquetas:
facebook,
social media,
twitter
Consejos para una buena vid@ social media
Añade esta etiqueta donde quieras colocar el botón +1 -->
ShareThis
Etiquetas:
infografia,
social media,
twitter
martes, 8 de junio de 2010
Diseñar tu web para móviles, en busca de estandares
Iniciativas para desarrollar estándares en la Web movil
Recomendaciones y buenas prácticas en el diseño de página web para dispositivos móviles.
Algunos simples consejos de usabilidad a considerar pensando en que nuestra web puede verse también en dispositivos móviles:
- diseñar una versión más sencilla para dispositivos móviles,
- ofrecer la posibilidad al usuario de elegir si desea ver esta versión simplificada o la web para ordenadores,
- utilizar nombres cortos para la dirección de la web,
- optimizar el tamaño de las imágenes para reducir al máximo los tiempos de descarga y pensando en el posible coste económico por ancho de banda consumido. No todos los usuarios disponen de tarifa plana para acceder a internet con su smartphone.
Recomendaciones y buenas prácticas en el diseño de página web para dispositivos móviles.
Algunos simples consejos de usabilidad a considerar pensando en que nuestra web puede verse también en dispositivos móviles:
- diseñar una versión más sencilla para dispositivos móviles,
- ofrecer la posibilidad al usuario de elegir si desea ver esta versión simplificada o la web para ordenadores,
- utilizar nombres cortos para la dirección de la web,
- optimizar el tamaño de las imágenes para reducir al máximo los tiempos de descarga y pensando en el posible coste económico por ancho de banda consumido. No todos los usuarios disponen de tarifa plana para acceder a internet con su smartphone.
Añade esta etiqueta donde quieras colocar el botón +1 -->
ShareThis
Etiquetas:
css,
Diseño web,
moviles,
web
Dispositivos para ver tu web - Media types y Media Queries
En CSS 2.1, podemos especificar hasta 10 tipos de dispositivos posibles:
- all ... apto para todos los dispositivos, es el valor por defecto
- aural / speech ... para sintetizadores de habla
- braille ... dispositivos que reciben feedback táctil en braille
- embossed ... para impresoras braille
- handheld ... para ordenadores de bolsillo (PDA, pantallas pequeñas, ...)
- print ... para material imprimible
- projection ... para presentaciones en proyector (por páginas, sólo visual, interactivo)
- screen ... para pantallas de ordenador en color
- tty ... para teletipos y terminales, no usar pixels como unidad,
- tv ... para televisores ( baja resolución, en color, movimiento limitado por la pantalla, sonido disponible)
En HTML4, se definen:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="estilo.css">
@media print { p { font-size: 14pt;}
@import url("otroestilo.css") screen;
(cuidado, los "media types" con @import son ignorados por IE5, IE6, IE7 e IE8)
En las recomendaciones para CSS3, se introduce el concepto Media Queries que amplía el control en el rendeado basado en algunas características más concretas de los dispositivos, por ejemplo el ancho de pantalla. La hoja de estilos CSS sólo será aplicable en el dispositivo especificado si la expresión es "verdadera".
<link rel="stylesheet" media="screen and (color)" href="example.css" />
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
<link rel="stylesheet" media="screen and (device-height: 600px)" />
@import url(example.css) screen and (color), projection and (color);
<?xml-stylesheet media="all and (min-color-index: 256)"
href="http://www.example.com/..." ?>
@media screen and (color), projection and (color) { ... }
@media all and (orientation: portrait) { ... }
@media (orientation: portrait) { ... }
@media (min-width: 100px) { ... }
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { ... }
@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (device-aspect-ratio: 32/18) { ... }
@media tv and (scan: progressive) { ... }
@media tv and (scan: interlace) { ... }
- all ... apto para todos los dispositivos, es el valor por defecto
- aural / speech ... para sintetizadores de habla
- braille ... dispositivos que reciben feedback táctil en braille
- embossed ... para impresoras braille
- handheld ... para ordenadores de bolsillo (PDA, pantallas pequeñas, ...)
- print ... para material imprimible
- projection ... para presentaciones en proyector (por páginas, sólo visual, interactivo)
- screen ... para pantallas de ordenador en color
- tty ... para teletipos y terminales, no usar pixels como unidad,
- tv ... para televisores ( baja resolución, en color, movimiento limitado por la pantalla, sonido disponible)
En HTML4, se definen:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="estilo.css">
@media print { p { font-size: 14pt;}
@import url("otroestilo.css") screen;
(cuidado, los "media types" con @import son ignorados por IE5, IE6, IE7 e IE8)
En las recomendaciones para CSS3, se introduce el concepto Media Queries que amplía el control en el rendeado basado en algunas características más concretas de los dispositivos, por ejemplo el ancho de pantalla. La hoja de estilos CSS sólo será aplicable en el dispositivo especificado si la expresión es "verdadera".
<link rel="stylesheet" media="screen and (color)" href="example.css" />
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
<link rel="stylesheet" media="screen and (device-height: 600px)" />
@import url(example.css) screen and (color), projection and (color);
<?xml-stylesheet media="all and (min-color-index: 256)"
href="http://www.example.com/..." ?>
@media screen and (color), projection and (color) { ... }
@media all and (orientation: portrait) { ... }
@media (orientation: portrait) { ... }
@media (min-width: 100px) { ... }
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { ... }
@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (device-aspect-ratio: 32/18) { ... }
@media tv and (scan: progressive) { ... }
@media tv and (scan: interlace) { ... }
Suscribirse a:
Entradas (Atom)