Subscribe to RSS Subscribe to Comments

Juan Jorquera

Lista de Sitios incompatibles – Documentación Firefox Chile

Lista de Sitios incompatibles – Documentación Firefox Chile

He aquí una lista de sitios web incompatibles con Firefox “Made in Chile”

Espero no estar en la lista.

Chiste para linuxeros que hablan ingles


Pharyngula: Si lo entiendes, eres geek

jajajajaja, esta cool ! si las cosas fueran asi en la vida real …

SigT » Plantillas CSS para impresión y 9 consejos

Via SigT » Plantillas CSS para impresión y 9 consejos: “Plantillas CSS para impresión y 9 consejos”

Suele ser habitual tener hojas de estilo en CSS para la presentación de nuestras webs, una de las grandes ventajas de trabajar con XHTML y CSS es la separación de contenido y presentación: Con una plantilla CSS podemos modificar la forma de presentar información sin modificar el contenido.

Vamos a ver un ejemplo de plantilla CSS únicamente para impresión con algunos consejos para aplicar, lo primero es definirla en el documento y aunque podríamos hacerlo añadiendo una línea igual que la siguiente (cambiando screen por print):


Lo vamos a hacer diferente ¿por qué? pues porque algunos navegadores no muestran la hoja para impresión en “Previsualizar impresión� si no es de la siguiente manera dentro de :


@import url( style.css );

Lo importante de esto es que el CSS al cual se le da un media="print" es el de impresión y el media="screen" el clásico para presentación, hay otros cómo por ejemplo media="handheld" para dispositivos de mano (PDA’s, etc) pero estos ya no entran en está entrada.

Ahora solo toca poner lo que queramos en print.css, es hora de los consejos:

  1. Elimina todo rastro de elementos de navegación: Una vez impreso no sirve de nada un menú, el lector no va a poder pinchar en él por lo tanto elimina todo lo que no forme parte del contenido. Es muy fácil, sólo debes pillar los distintos identificadores y añadirles un display: none;.
     #menu, #footer, #cabecera, .contenido-irrelevante {
    display: none;
    }
  2. Utiliza pt en lugar de px, % o em: Los valores px, %, em, etc., son medidas absolutas para mostrar a un determinado tamaño información en pantalla en lugar de ello utiliza pt, recomendación:
     body {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    }
  3. Utiliza fuentes muy legibles: Lo que con una fuente se lee bien en pantalla, impresa no tiene por que verse igual de bien: Arial, Courier New para ancho fijo, etc., te servirán.
  4. Utiliza float:none;: Los elementos flotantes dan problemas con algunas versiones de Mozilla Suite, borra los floats que no necesites o en su lugar utiliza float: none;.
  5. Especifica el fondo y el color de letra por defecto: Fondo siempre blanco y letra con un buen contraste: negro o similar:
     body {
    background: #fff;
    color: #000;
    }
  6. Las tablas salen sin presentación: Por defecto las tablas aparecen sin bordes, si tienes una forma de presentar las tablas en CSS para la web, copia esa parte del código al fichero CSS para impresión. Ésto también se puede aplicar a cualquier elemento.
  7. Utiliza a[href]:after para mostrar los enlaces. Seis líneas de CSS y los enlaces se mostraran justo a la derecha del texto enlazado entre paréntesis y con un bonito tono azul. Si no recuerdo mal los selectores (:after, :before, etc) no funcionan en IE.
  8. Puedes hacer lo mismo que en el punto siete pero con el atributo alt="" de las imágenes.
  9. Resumiendo: Hacer plantillas CSS para impresión es lo mismo que para presentación: Retocar, refrescar la web, “Previsualizar impresión�, ver cambios y empezar de nuevo. Lo único que cambia es que vamos a quitar los elementos de navegación y el código del CSS usado al final sera mucho más corto que en la presentación.

Actualmente tengo pendiente hacer una versión impresa en condiciones pero lo más importante ya está: elementos de navegación fuera, publicidad fuera, arial 10pt +/- para una buena impresión y solamente se muestra logo+artículo.

Referencias y más para leer

Y ya de paso recomiendo “Principios básicos de CSS� en castellano por parte de Tierra de nómadas.

Mi versión Simpson


Alguna similitud ? algunos dicen que si.
jajajajajajajajaja

Tiempos aquellos en que era chascon. Bueno, para los que me conocen, o los que me conocen hace poco, este era yo hace un par de años atrás.

melkorcete

Via melkorcete : “Menú con CSS”

Ejemplo de MenuDespués de haber dejado claras las bases de una maquetación con estilos, ahora vamos a aprender a hacer un menú solo con XHTML y CSS. La idea es obtener un menú que sin mucha carga de funcionalidad a la página, y sobre todo que sea fácil generarlo vía PHP, utilizando plantillas (que será otra de las cosas que veremos próximamente).

Comenzamos como siempre con el XHTML. Definiremos una capa contenedora y dentro una lista sin ordenar. En los elementos

  • introduciremos elementos para las opciones de menú y un elemento

    para el titulo del menú.


    La etiqueta

    nos va a permitir varias cosas: generalizar los estilos a nivel de fuente, ya que declararemos uno solo para el y así el titulo quedara diferenciado. Además para que los estilos de tipo li:hover no afecten al titulo, crearemos uno que tenga los li:hover igual que el titulo. Eso dará un efecto distinto a los li pero no cambiara el titulo.Además, para ver aun mas posibilidades añadiremos una imagen transparente de viñeta y en el li:hover pondremos otra del mismo tamaño que si se vera, lo que creara una mayor sensación al usuario (aunque sea demasiado sobrecargado, luego no hay por que usarlo todo, eso como siempre a gusto del consumidor ). Ahora el CSS.

    // Reiniciamos los Margenes para partir de cero
    * {
    margin: 0px;
    padding: 0px;
    font-family: Verdana;
    text-decoration: none;
    color: #000000;
    }
    // Declaramos el contenedor
    .contenedor {
    display: block;
    position: absolute;
    width: 150px;
    top: 150px;
    left: 150px;
    }

    // Aquí empiezan los estilos en cascada.
    // Lista
    .contenedor li {
    list-style: none;
    list-style-image: url(blank.gif);
    list-style-position: inside;
    padding-left: 0px;
    font-size: 11pt;
    background-color: #ADD8E6;
    }

    // Lista con efecto rollover
    .contenedor li:hover {
    background-color: #32CD32;
    list-style-image: url(arrow.gif);
    }

    // Titulo del Menu
    .contenedor h4 {
    font-size: 12pt;
    font-weight: bold;
    color: #ffffff;
    }

    // Porpiedades para el titulo
    .contenedor .titulo {
    background-color: #1E90FF;
    list-style-image: none;
    padding-left: 5px;
    }

    // Evitamos el :hover en el titulo
    .contenedor .titulo:hover {
    background-color: #1E90FF;
    list-style-image: none;
    }

    // Estilos de los enlaces
    // links, visitados y activos
    .contenedor a:link a:visited a:active {
    color: #000000;
    text-decoration: none;
    }

    // Enlace Seleccionado
    .contenedor a:hover {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    }


    Ahora que ya esta el CSS, es el momento de dejarlo a vuestro gusto: Sin fondos y solo enlaces, solo las imágenes, con otras viñetas... como os plazca, pero con una base como esta.

    Os dejo un enlace a un .ZIP con los archivos (.HTML, .CSS y los .GIF).

    Artículos Relacionados:

  • Galeria de imagenes con CSS

    Stu Nicholls | CSSplay | Another CSS slide show

    Excelente galeria de imagenes con CSS, a mirar el codigo fuente !

    Google Office: pisando aún más el césped de Microsoft

    Google Office: pisando aún más el césped de Microsoft

    Hace poco menos de un año, el anuncio de una conferencia conjunta de los Directores Generales de Sun Microsystems y de Google dispararon los rumores del lanzamiento de un ‘Google Office’, un entorno vía web donde poder crear y gestionar documentos ofimáticos (correo electrónico, agenda, textos, hojas de cálculo).

    Al final todo se quedó en una descafeinada declaración de intenciones de crear juntos productos para competir contra Microsoft, aunque es cierto que Google ha seguido apostando por productos en esa línea (Writely, Google SpreadSheets) y por mejorar OpenOffice.

    Sin embargo, el lanzamiento hoy de ‘Google Apps for your Domain‘ ha dejado más en evidencia la estrategia de Google. Hace un par de años contábamos que la compañía estaba pisando el césped de Microsoft a través del escritorio del PC y hoy Enrique Dans, por ejemplo, asegura que el objetivo es ahora “poner al alcance de empresas de cualquier tipo, independientemente de su tamaño, un conjunto de herramientas con la comodidad de una gestión y una fiabilidad probadas”, compitiendo directamente con MS Office Live.

    Sin embargo, dentro del nuevo servicio presentado hoy no se incluyen el gestor de hojas de cálculo (Google SpreadSheets) ni el editor de texto (Writely), y solamente se incorpora el correo electrónico (Gmail) y la agenda (Google Calendar). ¿Por qué lanza Google algo que todavía no compite frente a frente con ‘Office Live’ y que realmente se trata de una mezcla de productos sin apariencia uniforme?

    Como bien puntualiza Steve Bryant, lo que pretende Google es conocer cómo los usuarios utilizan las herramientas y qué tipo de información gestionan. “Es fácil unificar las aplicaciones con un interfaz similar y un plan de márketing, pero lo que es díficil es conseguir que la gente lo utilice”, asegura Bryant recordando palabras del Director General de Google.

    “Con ‘Google Apps for your Domain’ lo que se está haciendo es construir primero las aplicaciones, conseguir que los usuarios las adopten como herramientas de trabajo, juntarlas después y finalmente preocuparse por el márketing”, recuerda. Eso es lo que ha venido haciendo Google durante los últimos años: utilizar el atractivo de su marca para, desde Internet, intentar conseguir introducir diversas herramientas (hasta ahora, monopolio de Microsoft) donde poder seguir comercializando su modelo de negocio basado en la publicidad.

    Por cierto, según asegura el ‘Seattle Post Intelligencer’, parece que Google va a adquirir un edificio de 20 plantas y 40.000 metros cuadrados en Seattle (EEUU), muy cerca de la sede central de Microsoft, empresa de la cual ha fichado a varios trabajadores.

    Sony T30: cámara digital compacta de 7 megapíxeles | Microsiervos (Gadgets)

    Via Microsiervos (Gadgets) | Sony T30: cámara digital compacta de 7 megapíxeles:

    La más conocida como «T-30» de Sony es la última versión de la familia de compactas/planas Cybershot T1, T3, T5, T7 y T9, algunas de las cuales todavía se venden. El rango de estas cámaras oscila entre los 150 y 500 euros más o menos, con prestaciones acordes a lo que se paga y a lo recientes que sean los modelos: la T-30 es sin duda la más moderna, cara y con más prestaciones de la familia. Tiene el mismo tamaño que sus predecesoras, realmente pequeñas, y pesa menos de 200 gramos, aunque es un poco más gruesa que otros modelos (24 mm.) La lente está protegida por un tapa que baja que sirve alternativamente también de encendido y apagado. Es bastante cómoda y fácil de manejar y las baterías duran unos 400 disparos sin problemas, así que necesita poca recarga. Su principal característica son los 7,2 millones de píxeles de resolución, que son más que suficientes para las fotos cotidianas y ayudan a compensar el escaso zoom ×3 típico de estas pequeñas ópticas. La pantalla para visualización es de 3 pulgadas, realmente grande y espectacular, tanto para ver cómo quedan las fotos como para apuntar y disparar. Por desgracia no tiene visor pequeño (vendría bien aunque fuera de mentirijilla), así que hay que disparar siempre las fotos en postura «mundo digital» con los brazos estirados.

    Las especificaciones técnicas Sony T30 son amplias e inabarcables. Lo que Sony destaca de este modelo es su alta sensibilidad (equivalente ISO 1000) y el super-sistema de estabilización de imagen que permite obtener buenas fotos cuando hay poca luz, la cámara se mueve o tiembla el pulso. Como el ajuste focal, velocidad e ISO son automáticos, resulta fácil aprovecharse de todo ello. También lleva varios programas típicos (retrato, paisarje, acción, etc.) que suelen resultar efectivos. Pero la calidad obtenida en malas condiciones es siempre relativa debido al efecto «entra basura/sale basura». En las pruebas he podido conseguir fotos decentes en condiciones malas, aunque otras salían movidas o borrosas. Comparándolas con la Cyber-shot 717, que aunque más antigua tiene una óptica infinitamente más poderosa (y configurable), se podría decir que cumple bien con su papel. Diría que ofrece un sensor con una óptica decente (equivalente a 38-114, Carl Zeiss Vario-Tessar) y sistemas adicionales de apoyo bastante buenos para lo que pretende ser: una cámara de andar por casa y de llevar a todas partes con las que hacer fotos buenas pero no necesariamente profesionales. Aparte de eso lleva todo el kit típico de funciones como flash, anti ojos-rojos, programas típicos, ajustes de exposición (se pueden hacer HDRs) y otras utilidades varias.

    Algunas de las cosas buenas de la T30: Esos generosos 7 megapíxeles que proporcionan mejores fotos, que ocupan unos 3 MB comprimidas en JPEG. Las películas en movimiento: como cámara de vídeo también funciona espectacularmente, grabando a 30 fps en 640×400, una calidad más que razonable (unos 10 minutos con una tarjeta de 1 GB). El macro es impresionante, incluyendo una función de lupa. El gran visor, una maravilla también, que hasta tiene opciones para hacer pases de fotos con música. También resultan muy efectivos y se agradecen los tiempos de respuesta: poco más de un segundo (1,3) para encenderse y estar lista; una fracción de segundo (1/10) sin apenas retardo entre disparar la foto y lo que se captura en realidad (en otras cámaras es mucho más lento y hay que andar «adivinando» y calculando, debido al retardo).

    Lo peor de la T30: Tradicional tacañería de Sony (¡parecen Apple!) en un producto que puede considerarse caro (~500 €): ¡viene sin memoria y sin funda! Los 50 MB de memoria interna son testimoniales y de poco sirven, por lo que hay que añadirle Memory Sticks. La opción recomendable de 1 GB cuesta unos ~70-80 €. Por suerte sirven los Duo y Pro Duo que también funcionan en la PSP, y son muy rápidos en lectura y escritura. Falta de posibilidades de configuración: algunas funciones no se pueden programar, como los ajustes de velocidad, foco o sensibilidad, fuera de los pre-programas (podrían hacer el software más flexible), y todo ello está un poco escondido en los menús, porque la cámara tiene pocos botones. Lío de cables: como también es habitual en Sony, lleva baterías, conectores y cables diferentes a otros modelos y no-estándar. Lo del cable es especialmente triste: en vez de un conector USB 2.0 típico como en otros modelos, lleva un conector especial y un complejo cable de entrada/salida que entre otras cosas incorpora el USB. O llevas el cable a todas partes o necesitas un lector de memorias externo (mejor alternativa). La batería también debe recargarse en una base especial.

    En conjunto, la T30 es una muy buena cámara. La calidad de imagen, fotos, vídeo es estupenda, los automatismos y ayudas muy buenos, los tiempos de respuesta difíciles de mejorar, la interfaz sencilla y agradable. Hace muy bien su trabajo y puede calificarse de buena compra. Sony podía haber creado la cámara perfecta de cinco estrellas si se dejara de tacañerías e incorporara una memoria digna, un conector/cable estándar, una funda aunque fuera de tela y le hiciera dos o tres mejoras al software y que por ejemplo se pudiera recargar por USB. Con todo eso y un precio un poquito más ajustado sería sin duda una cámara personal «de gama alta» candidata a superventas.

    Algunas fotos con la T-30: Bomberos en acción, A través de las ventanas y en alta resolución, 3072×2304 (se pueden ver en Flickr con la opción «See Different Sizes», menú de la derecha): Autopista y Puerta de Hierro.

    Algunas otras reseñas y pruebas de gente que ha podido probar la Sony T-30

    Siguiente »