MANGASVERDES.- Hoy Martin Pulido me avisa de la patada en la boca a los estandares web por parte de la nueva página web del Congreso. Jajajaja divertidísima manera de aprender como NO hacer una página Web.
ACTUALIZACIÓN 18 junio 2007:
Diario TI | España.- Los sitios con diseño confuso y gran demora en la presentación de contenidos aumentan la frecuencia cardiaca y la tensión muscular. Según estudio publicado por el Centro de Investigaciones de Asuntos Sociales, de Gran Bretaña, algunos sitios web “son directamente `perjudiciales para la salud debido a las reacciones de estrés que se originan al visitarlos”. En el estudio participaron 2.500 internautas, a quienes se midió la actividad cerebral, frecuencia cardíaca y tensión muscular mientras navegaban por Internet.
Google, un ejemplo
Los sitios lentos, al igual que aquellos con un diseño confuso, ocasionaban invariablemente una serie de reacciones fíÂsicas en los participantes. Las ventanas emergentes (pop-ups) y la publicidad también aumentaban el nivel de estrés de los participantes.
NazarDesign.- Cuando diferentes selectores tienen declaraciones iguales podemos agruparlos en una única regla separando los selectores por comas. El resultado de los dos cuadros siguientes es el mismo:
ul { text-align:justify; font:0.8em Helvetica,sans-serif; }
ol { text-align:justify; font:0.8em Helvetica,sans-serif; }
dl { text-align:justify; font:0.8em Helvetica,sans-serif; }
EscríÂbelos mejor asíÂ:
ul, ol, dl { text-align:justify; font:0.8em Helvetica,sans-serif; }
SIDAR.ORG INTERNET.-Una declaración puede ser vacía o consistir en una propiedad, seguida por dos puntos (:), seguidos por un valor. Alrededor de cada uno de estos pueden haber espacios en blanco.
Debido a la manera en que trabajan los selectores, las declaraciones múltiples para el mismo selector pueden organizarse en grupos separados por punto y coma (;).
De este modo, las siguientes reglas:
H1 { font-weight: bold }H1 { font-size: 12pt }H1 { line-height: 14pt }H1 { font-family: Helvetica }H1 { font-variant: normal }H1 { font-style: normal }
son equivalentes a:
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal}
Una propiedad es un identificador. Cualquier carácter puede aparecer en el valor, pero los paréntesis (”( )”), los corchetes (”[ ]“), las llaves (”{ }”), las comillas simples (’) y las comillas dobles (”) deben ir con su par correspondiente, y los punto y coma que no formen parte de una cadena deben ir con escape. Los paréntesis, los corchetes y las llaves pueden anidarse. Dentro de las comillas, los caracteres son tomados como una cadena.
La sintaxis de los valores se especifica separadamente para cada propiedad, pero en todos los casos, los valores están compuestos de identificadores, cadenas, números, medidas, porcentajes, URI, colores, ángulos, tiempos y frecuencias.
Una aplicación del usuario debe ignorar una declaración con un nombre de propiedad no válido o un valor ilícito. Cada propiedad CSS2 tiene sus propias restricciones sintácticas y semánticas para los valores que acepta.
Por ejemplo, asumiendo que un analizador CSS2 encuentra esta hoja de estilo:
H1 { color: red; font-style: 12pt } /* Valor ilícito: 12pt */P { color: blue; font-vendor: any; /* Propiedad no válida: font-vendor */ font-variant: small-caps }EM EM { font-style: normal }
La segunda declaración en la primer línea contiene un valor ilícito: ‘12pt’. La segunda declaración en la segunda línea contiene una propiedad indefinida ‘font-vendor’. El analizador CSS2 ignorará estas declaraciones, reduciendo de hecho la hoja de estilo a:
H1 { color: red; }P { color: blue; font-variant: small-caps }EM EM { font-style: normal }
MAESTROS DEL WEB GUATEMALA.- El propósito de este artículo es mostrar cómo estructurar de una forma sencilla y ordenada nuestras Hojas de Estilo (CSS). Las Hojas de Estilo en Cascada (CSS) son el recubrimiento gráfico de tu documento HTML. Cuando estamos creando una web tenemos presentes en todo momento tanto la estructura de nuestro código HTML como del propio CSS. Y sabemos siempre en qué línea del archivo buscar la información que necesitamos para modificar nuestros selectores y clases.
Pero cuando ha pasado un tiempo desde que terminamos el desarrollo de este código, y deseamos retomarlo porque queremos rediseñarlo partiendo del CSS ya escrito, o simplemente porque queremos hacer algunos ajustes, seguramente no nos acordaremos de la mitad de la información que antes teníamos tan clara.
Nota completa en Maestros del Web.
MAESTROS DEL WEB GUATEMALA.- El propósito de este artículo es mostrar cómo estructurar de una forma sencilla y ordenada nuestras Hojas de Estilo (CSS). Las Hojas de Estilo en Cascada (CSS) son el recubrimiento gráfico de tu documento HTML. Cuando estamos creando una web tenemos presentes en todo momento tanto la estructura de nuestro código HTML como del propio CSS. Y sabemos siempre en qué línea del archivo buscar la información que necesitamos para modificar nuestros selectores y clases.
Pero cuando ha pasado un tiempo desde que terminamos el desarrollo de este código, y deseamos retomarlo porque queremos rediseñarlo partiendo del CSS ya escrito, o simplemente porque queremos hacer algunos ajustes, seguramente no nos acordaremos de la mitad de la información que antes teníamos tan clara.
Nota completa en Maestros del Web.
NAZARDESIGN SAN SALVADOR.- CSS u Hojas de Estilo en Cascada es un estándar de la w3c que especifica una forma de separar el contenido de la representación en contenido web. Básicamente, antes del estándar, los tags HTML contenían información sobre la representación de un tipo de información.
CSS soluciona este problema de mezclar dos visiones en un mismo documento. Un ejemplo en CSS sería: body {color: #3F3F3F;} dentro del archivo .css dentro del archivo .html
Conozca más sobre las hojas de Estilo en Cascada en: Usabilidad y Accesibilidad en la Recuperación de Información.
NAZARDESIGN SAN SALVADOR.- CSS u Hojas de Estilo en Cascada es un estándar de la w3c que especifica una forma de separar el contenido de la representación en contenido web. Básicamente, antes del estándar, los tags HTML contenían información sobre la representación de un tipo de información.
CSS soluciona este problema de mezclar dos visiones en un mismo documento. Un ejemplo en CSS sería: body {color: #3F3F3F;} dentro del archivo .css dentro del archivo .html
Conozca más sobre las hojas de Estilo en Cascada en: Usabilidad y Accesibilidad en la Recuperación de Información.
El pasado 31 de octubre se inició el Proyecto Camaleón CSS, un experimento de la misma naturaleza y formato que el CSS Zen Garden de Dave Shea. Consiste en publicar una sola página HTML, y alterar su aspecto usando solamente hojas de estilo CSS.
El proyecto se ha difundido entre diseñadores web y diseñadores gráficos, de tal forma que cualquiera que desee participar con una aportación gráfica pueda hacerlo. Lo que se obtiene con esto es una página web con múltiples apariencias, que dificilmente puede decirse que se trata del mismo documento. Y con la creatividad de los participantes, esto puede convertirse en una plataforma para difundir la codificación web con apego a estándares.
Fuente: Barrapunto.
El pasado 31 de octubre se inició el Proyecto Camaleón CSS, un experimento de la misma naturaleza y formato que el CSS Zen Garden de Dave Shea. Consiste en publicar una sola página HTML, y alterar su aspecto usando solamente hojas de estilo CSS.
El proyecto se ha difundido entre diseñadores web y diseñadores gráficos, de tal forma que cualquiera que desee participar con una aportación gráfica pueda hacerlo. Lo que se obtiene con esto es una página web con múltiples apariencias, que dificilmente puede decirse que se trata del mismo documento. Y con la creatividad de los participantes, esto puede convertirse en una plataforma para difundir la codificación web con apego a estándares.
Fuente: Barrapunto.
NAZARDESIGN SAN SALVADOR.- Ufff!! cuanto lío. Después de muchos meses en el abandono he actualizado el diseño del Blog. Diariamente podrán darse cuenta de los rollos de diseño en los que me he metido. Saludos a todos mis clientes de diseño Web (vean el portafolio) gracias por la confianza que han depositado en su servidor (no hablo del Hosting sino de mí).
Que les cuento? bueno Microsoft anda haciendo de las suyas con Origami y parece que esta copiando nuevamente a otro. En ese post de Gadget Blog hay más info.
NAZARDESIGN SAN SALVADOR.- Ufff!! cuanto lío. Después de muchos meses en el abandono he actualizado el diseño del Blog. Diariamente podrán darse cuenta de los rollos de diseño en los que me he metido. Saludos a todos mis clientes de diseño Web (vean el portafolio) gracias por la confianza que han depositado en su servidor (no hablo del Hosting sino de mí).
Que les cuento? bueno Microsoft anda haciendo de las suyas con Origami y parece que esta copiando nuevamente a otro. En ese post de Gadget Blog hay más info.
Algunas vez te haz preguntado como transparentar un fondo con CSS?
Es fácil y el código que te muestro abajo funciona para IE, Mozilla y Safari (en ese orden).
Veamos:
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
Los valores 80 y 0.8 deben cambiarse según te parezca, en escala 10 a 100 y 0.1 a 1.0 en el segundo caso. Un ejemplo:
#id {
background-color:#FFFFFF;
padding: 8px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
El color blanco se hará un poco transparente. El valo 10 o 0.1 es transparencia casi total.
Saludos!
Hola a todos!
De ahora en adelante contaremos con un espacio para poder “charlar” y debatir acerca del diseño web y muchos más temas que a lo largo del tiempo se nos vayan ocurriendo.
Bueno espero que entre nuestras pláticas podamos aumentar en mucho nuestros conocimientos en herramientas gráficas digitales y conceptualizaciones de diseño. Bienvenidos todos…