Autor: loretahur

Categorías
Material de Apoyo

¿Cómo se ve tu web con Explorer? IE NetRenderer

En el post Todos los IE en una misma casa os presentábamos un programa con el que podíamos ver la apariencia de nuestras páginas en diferentes versiones de Internet Explorer.

Pues Julen me pasa la referencia de una página desde la que podemos hacer lo mismo pero sin necesidad de tener nada instalado: IE NetRenderer. Desde aquí nos permiten comprobar cómo nuestras páginas son “renderizadas” por Internet Explorer 7, 6 ó 5.5.

Ventajas del servicio:

* Todo se hace on-line, sin tener que depender de ningún software (sólo de nuestra conexión 😉 ).
* En la parte superior de la captura que hacen de nuestra web, nos ponen unas marcas indicándonos hasta dónde llegaría la visualización dependiendo de la configuración de pantalla del usuario (800×600 ó 1024X768).
* Nos permiten comprobar las diferencias de visualización entre IE 7 e IE6. Aquí podéis ver un ejemplo de este blog (pinchar sobre la imagen):

Desventajas del servicio:

* No nos muestran toda la web (nos quedaremos sin saber cómo queda la parte inferior)
* Sólo podemos probar con ese navegador… No estaría mal poder hacerlo también con Firefox, Safari, Opera, Konqueror, etc. (por pedir, que no quede 😉 )

Categorías
Introducción

La hoja de estilos por defecto de los navegadores

Seguimos con aquello de que, dependiendo del navegador, las hojas de estilo se verán de forma diferente.

Para comprender mejor este “fenómeno” es recomendable la siguiente lectura en el blog de Damián en el que nos explica que cada navegador tiene una hoja de estilos por defecto. Es decir, que si nosotros no definimos ciertas propiedades, esas tomarán el valor que tenga esa hoja. Y claro está, cada navegador tiene valores diferentes (para hacernos la vida un poco “más fácil”…).

Al comenzar un nuevo sitio, y al aplicar los primeros estilos a un documento XHTML, los parámetros que guían la forma en que se muestran las páginas no son los mismos. Es decir, no es cierto que todos los parámetros de una hoja de estilos estén en los mismos valores en todos los navegadores, ni siquiera están todos en 0. Cada navegador tiene unos ciertos valores, que pueden variar de manera especial, dependiendo del navegador y del sistema.

Más en castellano y en inglés en Electriblog.

Categorías
Material de Apoyo

Todos los IE en una misma casa

Durante muchos posts hemos reiterado la importancia, a la hora de diseñar una web, de comprobar que se visualiza bien en la mayoría de navegadores.

Echando un vistazo a esta gráfica de nuestras estadísticas, podemos comprobar, que entre los navegadores que usan nuestros lectores hay de todo un poco:

Navegadores

Por tanto, deberíamos cuidar a todos con el mismo mimo.

El problema viene cuando, gracias a las actualizaciones automáticas de nuestro querido Windows XP, nuestro nuevo navegador pasa a ser el Internet Explorer 7. Ahora ya no podremos comprobar cómo se ven las páginas en el IE6 (y os puedo prometer que la interpretación del CSS es muy distinta).

Pues gracias a MultipleIEs podremos tener instaladas diferentes versiones del IE (3.0, 4.01, 5.01, 5.5, 6.0) sin que se peguen entre ellas.

IE

Categorías
General

Fichajes de invierno

Como últimamente una no hace más que procrastinar, me he agenciado un fichaje para este blog. Se trata de Ángel Luis a.ka. GeL/T0. Y quien mejor que él mismo para presentarse.

Hi, my name is Ángel Luis, I’m from…
Soy un ubetense que se ha recorrido medio España para acabar en Madrid. Por las mañanas soy un simple currito contratado como desarrollador de php, en una empresa de ingeniería civil, donde hasta hace unos años, el bic naranja era lo máximo en tecnología.

Por las tardes paso a ser un simple estudiante de matemáticas de la UCM, que hasta hace unos años pasaba bastante desapercibido; que alegría que dan las asociaciones de usuarios. Y ahora se pelea cada año por intentar acabar la carrera interminable.

Siempre he sido muy curioso, me ha encantado la informática desde que llegó el primer 8086 a mi casa, me gusta saber de todo un poco y trastear con todo. Y me ha venido de perlas, ya que entré a mi empresa sin tener mucha idea de CSS, pero bueno, eso era cosa del diseñador web, hasta que decidió largarse, y como suelen decir, «a la fuerza ahorcan», ahora se podría decir que a parte de desarrollar en php, también hago mis pinitos con el css.

Mis conocimientos sobre CSS son muy escasos, aunque intento que cada día la cosa vaya a más, de ahí que me quiera unir a este blog, para intentar sacar algo de provecho y echar un cable a Loretahur en todo lo que pueda.

Que cuantos más mejor!

Pues eso. Ya contamos con un nuevo profesor y aprendiz de CSS. Bienvenido Angelito 😉

Categorías
Material de Apoyo

Libros de CSS

Me gustaría ir creando un listado de libros que sean de interés para aprender CSS. Por supuesto, espero que sea algo que generemos entre todos. Según vayáis poniendo en los comentarios, los agregaré a este post.

  • Título: CSS: The Definitive Guide
    Autor/es: Eric A. Meyer
    Editorial: O’Reilly Media
  • Título: CSS Web Design for Dummies
    Autor/es: Richard Mansfield
    Editorial: Wiley Publishing
  • Título: Cascading Style Sheets: Separating Content from Presentation
    Autor/es: Owen Briggs, Steve Champeon, Eric Costello, Matthew Patterson
    Editorial: Peer Information
  • Título: Diseño con Estándares Web
    Autor/es: Jeffrey Zeldman
    Editorial: Anaya Multimedia
Categorías
Estructura

Sintaxis

Las hojas de estilo están basadas en reglas. Como ya comentabamos antes, estas reglas se van evaluando de forma secuencial, de arriba hacia abajo.

Las reglas están formadas por un selector seguido de un bloque de declaraciones:

Selector {
propiedad : valor;
propiedad : valor;
…
}

Ejemplo:

body {
color: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

Como vemos, cada declaración consta de una propiedad separada de su valor por el carácter «:«. A su vez, se pueden definir varias declaraciones para el mismo selector separadas por el carácter «;«, formando un bloque de declaraciones.

También tenemos la opción de aplicar un mismo bloque de declaraciones a varios selectores:

h1, h2 {color: green }

En el próximo post analizaremos más a fondo cómo pueden ser esos selectores, propiedades y valores.