pon css en tu vida!

css, html, javascript, php y mucho mas…

Posts etiquetados con ‘ HTML ’

adobe_browserlab

BrowserLab es una nueva herramienta de Adobe que proporciona bajo demanda, imágenes renderizadas de como se verán nuestras webs en distintos navegadores, corriendo en sistemas operativos diferentes.

Actualmente, soporta los siguientes navegadores:

  • Firefox 2.X y 3.X (Windows XP y Mac OS X)
  • Internet Explorer 6.X y 7.X (Windows XP)
  • Safari 3.X (Mac OS X)

Las capturas realizadas, pueden verse una por una, comparando los resultados de dos navegadores o superponiendo los resultados mediante transparencias que podemos ajustar a nuestro gusto.

adobe_browserlab_screenshot

BrowserLab también es capaz de guardar la configuración de navegadores que nos interesa.

Además, para rematar la faena, BrowserLab puede integrarse con Dreamweaver CS4 mediante una extensión, que nos permitirá comparar nuestra maquetación en local.

Más información sobre BrowserLab (ingles)

Prueba BrowserLab

Via | @vladocar

Con el lanzamiento de Internet Explorer 8, los maquetadores web nos encontramos ante un nuevo reto en nuestro trabajo diario, un nuevo navegador de Microsoft que, por suerte o por desgracia, poco o nada tiene que ver con sus antecesores.

Para los próximos desarrollos la estrategia a seguir está clara, asegurar nuestras maquetas en IE 7  y 8. Pero, ¿qué pasa con nuestros proyectos que ya están en producción? ¿Partimos desde cero para crear una hoja de estilos que funcione correctamente en IE 8?

La compañia de Redmond nos ha tenido en cuenta (aunque sea por primera vez) a nosotros, sufridos maquetadores y se ha sacado de la manga una nueva meta etiqueta, concretamente esta:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Con esta simple linea, forzaremos al motor de IE 8 a renderizar como lo hace  IE 7, haciendo las mismas barbaridades que su predecesor e incumpliendo exactamente los mismos estándares. Lo que hará que todas aquellas webs maquetadas a la perfección en IE 7, se vean exactamente igual en la nuva versión del navegador de Microsoft.

Su funcionamiento es muy simple. Tan solo debemos añadir la meta etiqueta en la cabecera del HTML, pero ojo, la etiqueta deberá estar obligatoriamente justo después de la apertura de la cabecera (<head>). Si la situamos en cualquier otro sitio del documento, no funcionará.

Veamos un ejemplo de donde insertarla utilizando el html de este blog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>X-UA-Compatible. Meta etiqueta para Internet Explorer 8 | pon css en tu vida!</title>

Modificando una sola línea de nuestros antiguos proyectos, conseguiremos que el nuevo Internet Explorer 8 muestre correctamente el fruto de nuestras horas de maquetación para ese suplicio llamado IE7.

¿Y tú? ¿Conocías y/o utilizas ya la etiqueta X-UA-Compatible para Explorer?

Fuente: Netadictos

Sistema de valoración por CSS.

27.05.09 CSS, Cómo se hizo, HTML 1 Comentario

Tener un sistema visual de valoración en nuestra web puede darle el toque diferente a nuestro proyecto.

Durante la maquetación de mi portfolio, me propuse utilizar este método de valoración para representar mi participación en los proyectos que he participado.

La idea.

El sistema es el típico método de valoraciones que todos conocemos (las tan conocidas estrellitas). Dándole “media” vuelta al diseño, cambiando las estrellas por asteríscos, podemos obtener algo así:

Final

– VER EJEMPLO FUNCIONANDO -

[Más]