Contenido

El PDF por fin es un estandar

3 Jul

aNieto2k hace 2 días en: Asides, estandares, web, webdev

+ 3

Ayer Antonio Ortiz, de Error500 nos comentó que por fín, el PDF será tratado como estandar, aunque los usuarios de Internet ya lo estaban haciendo. [Ver original en Inglés]

Google comienza a indexar fichero Flash

1 Jul

aNieto2k hace 4 días en: Asides, Programacion, estandares, flash, web, webdev

+ 15

Hoy leo que Google va a indexar los ficheros flash. Por el momento solo será benficioso de cara al SEO, pero esto abre una puerta a navegadores accesibles capaz de leer el contenido de los elementos flash. ¿podría esto llegar a un renacimiento del flash? [Via]

Curioso bug en Internet Explorer 7

30 Jun

aNieto2k hace 5 días en: CSS, Curiosidades, Programacion, estandares, web, webdev

+ 12

Internet Explorer 7 solucionó mucho de los problemas que los usuarios de Internet Explorer 6 sufrían (y aún sufren), pero por otro lado nos encontramos con problemas curiosos que seguro en algún momento nos puede llegar a poner los pelos de punta.

El código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>Test</title>
    	<style type="text/css">
      	ol li {height:40px;}
       </style>
</head>
<body>
<ol>
    <li>Esto</li>
    <li>es</li>
    <li>solo</li>
    <li>una</li>
    <li>prueba</li>
</ol>  
</body>
</html&gt;

Como podemos ver, únicamente se trata de un listado ordenado al que acada uno de sus elementos <li></li> le aplicamos un tamaño de 40px con la propiedad height, debido a esto obtenemos un listado numérico bastante peculiar.

Explicación del bug

Si revisamos el código vemos que el problema reside en que usamos un height para definir el tamaño de cada elemento <li></li> de la lista <ol></ol>, esto hace que se pierda la cuenta y aparezca como 1, cada elemento. El tamaño de cada item, es indiferente, incluso puede ser height:0px;

Demo

He montado el código en un fichero HTML para que lo podais probar vosotros mismos. Es necesario usar Internet Explorer 7 para ver el bug en acción.

Via

Layout multicolumnas líquido compatible con iPhone

26 Jun

aNieto2k hace 9 días en: Asides, CSS, Programacion, estandares, web, webdev

+ 4

Interesante layout completamente en CSS (sin hacks) con el que podremos disponer de una estructura líquida con multicolumnas. Ideal para los que queremos evitar las barras horizontales en nuetros diseños. Esta versión es compatible con el iPhone/iPod Touch por lo que el tamaño de la pantalla no supone un problema. [Demo][Descargar]

Webkit soporta variables CSS

23 Jun

aNieto2k hace 12 días en: CSS, Programacion, estandares, web, webdev

+ 6

En CSS3.info informan que la gente de WebKit está actualmente con una implementación experimental de las variables para el CSS. Una utilidad que muchos de nosotros estamos esperando desde que nos iniciamos en el desarrollo web.

@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}
@variables {
  myMargin1: 2em;
}

@variables print {
  myMargin1: 2em;
}

.data, div.entry {
  margin-left: 30px;
  margin-left: var(myMargin1);
}

Esto podría ser una futura implementación de este tipo de variables, unas variables que nos ahorrarán tiempo y nos permitirá que los diseños sean mucho más flexibles para los usuarios y para nosotros mismos.

Como nos tienen acostumbrados, podemos testearlo nosotros mismos bajando la última versión disponible.

Listado de editores CSS

23 Jun

aNieto2k hace 12 días en: CSS, Programacion, estandares, web, webdev

+ 17

La llegada del diseño basado en CSS nos ha abierto las puertas a diseños reutilizables, más ligeros y sobretodo espectaculares. Para hacernos la vida más fácil existen editores que nos sugieren las opciones disponibles e incluso podemos ver las modificaciones en tiempo real, es importante conocer las opciones que tenemos a la hora de maquetar nuestras aplicaciones:

smallmacrabbit

* Aptana profesional ($99), la versión FREE viene limitada en opciones.

Alternativas

Como conseguir compatibilidad entre navegadores siempre

19 Jun

aNieto2k hace 16 días en: CSS, Programacion, estandares, javascript, web, webdev

+ 20

Cuando has terminado una aplicación y la abres con un navegador diferente al que lo habías hecho durante la fase de desarrollo, te das cuenta de que te queda prácticamente el mismo tiempo que has tardado en desarrollar la aplicación puliendo los detalles en los diferentes navegadores.

Este es el mayor problema con el que nos encontramos los desarrolladores web y por el que más me han solicitado ayuda por mail. Ya hemos hablado varias veces de por que ocurre esto, y básicamente es por que cada equipo de desarrollo encargado de desarrollar cada uno de los navegadores interpreta de una forma u otra los estandares definidos por la W3C. De ahí que aparezcan tests con los que la W3C se asegura de que los navegadores han entendido lo que solicitaban.

Por suerte o por desgracia, existen centenares de navegadores y nunca podemos saber a ciencia cierta que navegador va a usar cada visita, por ese motivo tenemos que pulir nuestro código, añadir opciones específicas (los llamados hacks) o incluso desarrollar sitios aposta para abarcar el máximo de estos navegadores.

Solo la experiencia nos hará reducir el tiempo que perdemos en estas “modificaciones”. Hay mucha gente muy buena, con muchísima experiencia que comparte sus conocimientos y de esta gente tenemos que aprender, por ello una lista de “normas” a tener en cuenta antes de empezar nos podría ayudar a conseguir el equilibrio perfecto

  1. Siempre usa el DOCTYPE strict y valida los estandares HTML/CSS
  2. Usa siempre un sistema para resetear tus CSS
  3. Usa opacity:0.99 en elementos de texto para limpiar el renderizado de Safari
  4. Nunca redimensiones imagenes desde el CSS o HTML
  5. Revisa el renderizado de la fuente en todos los navegadores. Nunca uses Lucida.
  6. El tamaño del texto es % en el body y em para el resto
  7. Todos los divs flotantes deben llevar display:inline y overflow:hidden
  8. Los contenedores deben tener overflow:auto y activa hasLayout usando un width o un height
  9. No uses ningún estilo CSS3 extravagante
  10. No uses imagenes PNG transparentes a menos que hayas cargado el apha.

Guias de estilos soportados en clientes de Correo

19 Jun

aNieto2k hace 16 días en: CSS, Programacion, estandares, web, webdev

+ 3

Si alguna vez has intentado generar un mail en formato HTML sabrás los problemas con los que nos encontramos al visualizar dicho correo en los diferentes cliente disponibles, ya sean Offline u Online.

Para estos casos, es bueno tener una lista como esta con los estilos disponibles para cada unos de los clientes de correo, que pese a no cubrir todos los disponibles (imagino que debe de haber millones, entre offline y online) nos consigue dar una idea realmente clara de que estilos podemos usar y cuales no.

Si trabajamos con ello a diario, podremos descargarlo en formato PDF o en un formato Excel.

20 soluciones a problemas comunes de CSS

16 Jun

aNieto2k hace 19 días en: Asides, CSS, Programacion, estandares, web, webdev

+ 4

La gente de Noupe ha hecho una recopilación de los 20 problemas más comunes de los que nos podemos encontrar en CSS. Conociendo estos problemas y las soluciones no se nos resisitirá ningún diseño en ningún navegador.

Poniendo el radar a los navegadores web más modernos

15 Jun

aNieto2k hace 20 días en: Actualidad, de la red, estandares, web, webdev

+ 20

Los chicos de Lifehacker se han puesto a testear los más modernos navegadores web:

  • Internet Explorer 7.0.6
  • Firefox 3
  • Opera 9.5
  • Safari 3.1.1 (Windows)

El test

El test ha sido realizado sobre una máquina con 2GB de RAM y un procesador a 2GHz Core 2 Duo. Para incluir Internet Explorer 7 en la lista se han visto obligados a usar Windows Vista Home (32 bits).

La prueba se ha dividido en varias pruebas en las que testean los puntos en los que la velocidad es interesante de testear:

  1. Arranque en frio
  2. Arranque en caliente
  3. Carga multi-tab
  4. Javascript y CSS
  5. Memoria de uso

Arranque en frio

Para realizar esta prueba reiniciaron la máquina cada vez que encencían un navegador. Así partían todos del mismo punto de origen:

cold_start1

Opera 9.5 se ha coronado en esta prueba como vencedor indiscutible, sorprendentemente por encima de Internet Explorer que está perfectamente ligado al sistema operativo.

Arranque en caliente

El arranque en caliente consiste en volver a abrir el navegador una vez cerrado después de la prueba de arranque en frio. Los resultados son verdaderamente interesantes:

warm_start1

Pese a lo apretado de la gráfica Opera 9.5 repite y se adjudica la victoria, siendo el navegador que más rápido abre en caliente.

Carga multi-tab

Esta prueba nos muestra como abriendo 8 páginas (entre las que se encuentran YouTube, Apple, Lifehacker, Internet Explorer, Firefox, Opera,…) partiendo de la página blanca de Google.

multi-tab-load2

En esta prueba Safari 3.1.1 se alza campeón y desbanca a los demás por un segundo más que importante.

Javascript y CSS

Usando el test de Javascript de Sean Patrick Keane, ponen a prueba a los navegadores mostrando los resultados siguientes (menor tiempo == mejor).

javascript_test1

Opera y Safari se dispuntan el primero puesto en la prueba de Javascript, así que deciden usar el test de CSS de nontropp’s para desempatar esta disputada prueba.

css_test1

En este caso, Safari se lleva el gato al agua y demuestra rotundamente su gran velocidad de render en cuanto a CSS se refiere.

Memoria de Uso

Aprovechando las pruebas de tiempo y procesamiento, tomaron nota de la cantidad de memoria consumida en las pruebas, y de ahí podemos sacar algunas conclusiones comparando las memorias usadas:

memory_use1

Firefox 3 se lleva la medalla en esta prueba con menos de 100mb al tener 8 pestañas abiertas, casí la mitad menos que el navegador de Microsoft y Apple.

Conclusión

Viendo estos resultados y los que ya habíamos visto previamente en este blog queda más que claro que todos los navegadores testeados están más o menos al mismo nivel en cuanto a rendimiento y que el liderazgo se va a discutir en las mejoras y en la interpretación de estandares web. Habrá una lucha encarnizada que de ninguna manera nos vamos a perder.

← Anterior ↑