[Ovillo] Workshop de HTML5 y CSS3 para diseñadores, en Buenos Aires
Hola a todos, Quería avisar que vamos a realizar en Buenos Aires el viernes 8 de febrero nuestro Workshop de HTML5 y CSS3 para Diseñadores. Es una jornada de 8 horas estilo Bootcamp (traer notebook, netbook o tableta) ideal para quienes viven en el interior y solo pueden dedicar un día para capacitarse. Todos los datos en: http://www.html5ycss3.com.ar P.D.: Hay un 20% de descuento por pago adelantado hasta el 31 de enero. Un saludo y ¡qué nos estemos viendo! -- Hernán Beati ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] duda responsive design
Te conviene seguir el camino contrario, es decir, utilizar el concepto
Mobile First (móvil primero) en el orden en que vincules las hojas CSS.
La primera debería ser la versión a una columna, sin media queries, para
que móviles que no procesan media queries se queden con el diseño a una
columna.
La segunda hoja CSS, deberías vincularla con una media querie con
min-width:400px donde flotan dos columnas.
La tercera hoja, con min-width:600px y flotas 3 columnas.
Como tablets y PC soportan media queries, no tendrás problemas si usas un
script compatibilizador para navegadores viejos, como el de:
http://code.google.com/p/css3-mediaqueries-js/
Te sugiero ver estas diapos:
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Y una recopilación mía sobre el tema del año pasado (algunas cosas
cambiaron, pero el concepto móvil primero continúa vigente):
http://www.slideshare.net/hbeati/web-mvil-inclusiva-y-accesible
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
a) Limitar el ancho. Que nunca sea más de 1200, para que los que tengan
resoluciones mayores no vean una página ilegible.
Para eso, en el body podemos añadir esto:
max-width: 1220px;
b) Luego vamos con las media querys. Entonces, podrías hacer esto:
En normal se ven las tres columnas, cada una con el 31% del ancho
disponible
Un poco más chico, hasta 600, solo dos, cada una con aproximadamente el
49%
del ancho disponible
Ya con menos de 400, se desflotan las columnas1 y se ponen al 100.
Algo así:
Normal:
.columna1 {
float:left;
width:31%;
margin: 0.5%;
overflow:hidden;
height:33em;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
/* Responsive */
@media screen and (max-width:620px){
.columna1 {
width:45%;
float:left;
}
}
@media screen and (max-width:400px){
.columna1{
float:none;
width:100%;
margin:0 auto;
}
}
El 24 de octubre de 2012 16:11, german vaquer
germ...@telefonica.netescribió:
Hola!
Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la
clase
columna1 y la clase imagen columna 1, y ahora ya se ve bien a
resoluciones
mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven
a
descolocar la disposición de las imágenes y su contenido.
http://www.pruebasgerman.com/companyo/entorn.html
Que tengo que hacer mediaqueries específicos para cada resolución para
que
me quede todo ok?.
Saludos i gracias a todos por vuestra ayuda.
Germán Vaquer
-Mensaje original-
From: marcos méndez filesi
Sent: Wednesday, October 24, 2012 12:37 AM
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] duda responsive design
+ cosas.
*1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...),
como te ocurre con la segunda de la segunda fila, conviene que
especifiques
una altura máxima a las imágenes. Para eso puedes añadir una clase a las
imágenes
.img_columna1 {
width:100% !important;
max-height: 10em;
overflow:hidden;
margin:1em;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
*2)* En vez de
meta name=viewport content=width=device-width
mejor así
meta name=viewport content=width=device-width, initial-scale=1,
user-scalable=yes
*3)* Como estás con cajitas flotantes, te conviene que todas las
columnas
estén dentro de un div que las contenga y en ese es importante que
añadas
overflow:hidden, para que la tostadora del explorer haga las cosas bien.
4) No veo que el diseño sea responsive. No sé si es que aún no has
empezado. Te dejo un enlace a una guía que espero te sirva de ayuda.
http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i
SUERTE.
El 23 de octubre de 2012 23:56, german vaquer
germ...@telefonica.netescribió:
Hola buenas!
Estoy reconvirtiendo una web ya realizada en una web con diseño
responsivo
para visualizar en cualquier dispositivo. El problema que tengo es en
la
siguiente página de dicha web:
http://www.pruebasgerman.com/companyo/entorn.html
Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me
queden en la misma posición que las 3 primeras y las 3 de la parte
central,
el resto de imágenes se me salen de madre y se me descolocan y no sé
el
porqué, puesto que el código css es el mismo para todas las imágenes.
Alguna sugerencia?, he repasado el código por si hubiese algo que me
faltase, pero la verdad es que no he visto nada raro. y eso que le he
dado
bastantes vueltas.
Gracias de antemano: saludos
Germán Vaquer
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Marcos Méndez Filesi
http://www.mmfilesi.com/
___
Lista de distribución Ovillo
Para
Re: [Ovillo] Maquetación inicial con Web Responsive Design
Hola Edgardo! faltaría seria saber los pasos precisos para no perderme en el proceso de hacerlo adaptativo. Me gustaría aportarte algo, por si puede servirte (y a los demás compañeros de la lista). Ante todo, te invito a leer las diapositivas de una capacitación que preparé el año pasado sobre ese tema: http://www.slideshare.net/hbeati/web-mvil-inclusiva-y-accesible La primera recomendación es que sigas el concepto de Mobile First: primero piensa la versión más pequeña, luego las mayores. Segundo, los breakpoints (las medidas donde dejar de usar un diseño y crear un layout diferente), contra lo que muchos pregonan, no conviene que sean definidos según la medida de los dispositivos de moda (iPhone, iPad), sino según los contenidos específicos de cada sitio. Cuando un diseño a una columna para móviles ya se vea feo si lo seguimos estirando horizontalmente, entonces ya es tiempo de crear otro layout para el siguiente tamaño de pantalla, y así sucesivamente. Con 3 o 4 variantes debería ser suficiente. Tercero: no solo la cantidad de columnas flotadas importa, sino que la grilla sea flexible (en porcentajes y ems), y que las imágenes y videos también sean adaptables. Para los que quieran profundizar en Responsive Web Design, hace más de un año que dicto dos cursos que incluyen ese tema. Los doy en el instituto DotZero (Buenos Aires, Argentina). Son el curso de HTML5 y CSS3 (donde vemos RWD a nivel introductorio), pero más a fondo lo vemos en el curso CSS Práctico, donde una clase entera está dedicada a este tema, y codificamos varias páginas usando media queries: http://www.dotzero.org/capacitacion/curso-css-practico Hoy justamente (y por eso lo comento) acaban de darme la noticia de que han puesto online la versión adaptable de MundoD (diario deportivo de La Voz del Interior, Córdoba: http://mundod.lavoz.com.ar ) donde estuve dando una capacitación sobre este tema al equipo de diseñadores y programadores en marzo pasado: ¡me pone muy contento que se comience a crear sitios con este concepto por aquí en Argentina!... Un saludo! -- Hernán Beati her...@saberweb.com.ar http://www.saberweb.com.ar Facebook: https://www.facebook.com/saberweb Twitter: https://twitter.com/hernan_beati LinkedIn: http://ar.linkedin.com/in/hernanbeati Slideshare: http://www.slideshare.net/hbeati Autor del libro PHP, Creación de páginas Web dinámicas: http://www.cuspide.com/isbn/9871609213 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] HTML - Incluir un article en un article
Hola a todos! section article div header h2 Publicaciones /h2 /header !-- ¿PUEDO METER UN ARTICLE POR CADA LIBRO ESTANDO A SU VEZ DENTRO DE OTRO ARTICLE ? -- Creo que no sería correcto; en este caso, podrías quitar ese article que abre luego de tu section (y de paso, también el div que le sigue), ya que parecen cumplir todos la misma función de contener a los article. Mi voto es por dejar solo section como contenedor de los articles. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Información acerca de Media Queries y de Adaptative Desi gn
¿Alguien puede informarme un poco? ¿Pros y contras? Conviene tener en cuenta la técnica de Yiibu (Rethinking the mobile web): http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu para que móviles antiguos que no leen media queries sean los que lean la hoja CSS por defecto (a una columna, tamaños de texto e imagen mínimos, etc.). Siguiendo ese orden de hoja para móvil primero, no hay contras en esta técnica, son todas ventajas al usar una hoja CSS distinta para cada tamaño de dispositivo. Hay muy buenos ejemplos en la galería de: http://mediaqueri.es He leído que este tipo de diseños consume mucho la CPU al tener que escalar imágenes y demás. Las media queries por sí solas no implican escalar imagen, sino servir distintas imágenes, de distinto tamaño, colocadas como background con distintas hojas CSS según resolución. Lo de escalar imágenes es para las que están insertadas como IMG, por ejemplo: http://adaptive-images.com/ Eso no lo he probado. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Mis primeras pruebas con HTML5
Hola Reynier, http://libnew.libroria.com cuando puedan hechenle un ojo y el Se echa de menos la etiqueta article, que creo es la más importante en una página HTML5, ya que debe contener el contenido central de la página. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Es correcto usar SECTION para mostrar mensajes?
es correcto semanticamente usar SECTION para mostrar mensajes de error, advertencia o cualquier otro tipo de mensaje al usuario? Que etiqueta(s) usarian ustedes para este fin? A mi entender, creo que bastaría con usar un simple p (párrafo), ya que el texto del error no creo que sea una sección del artículo (article) ni del documento entero, solo es un texto más dentro de la página. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar de HTML4 a HTML5
Hola Reyner, es todo un reto y un problema para mi dado que aun existen personas que utilizan IE8 e inclusive IE6 Es muy fácil hacer que las etiquetas HTML5 sean procesadas correctamente en Explorer 6 en adelante agregando el script HTML5Shiv: http://code.google.com/p/html5shiv/ Si les interesa HTML5 (y CSS3), les recomiendo leer las diapositivas de mis cursos y sus códigos de ejemplo en: http://www.html5ycss3.com.ar Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Bordes redondeados CSS3 dentro de elementos HTML5
Hola a todos! En una página HTML5, estoy intentando redondear bordes para que sean compatibles con Explorer, usando un conocido script: border-radius.htc. Si los elementos a redondear están fuera de cualquier etiqueta de HTML5 (article, header, footer, etc.) el redondeado funciona perfectamente. Pero si los elementos a redondear están dentro de alguna nueva etiqueta de HTML5, ya no funciona el redondeado. Incluso probé con otro script, PIE.htc, y pasa exactamente lo mismo... Ver en: http://www.saberweb.com.ar/prueba/bordes/index.html (verlo con Explorer, obviamente). Esa página contiene algunos bloques sueltos en el body, que sí los redondea, y otros dentro de article, header, footer, etc. que no los redondea... Utilicé un script (html5shiv) para lograr que Explorer reconozca las nuevas etiquetas HTML5. ¿Alguien se encontró con este mismo problema? ¿Tiene solución? Muchas gracias! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bordes redondeados CSS3 dentro de elementos HTML5
Prueba el script modernizer.js para que Explorer entienda HTML5. Creo que es para eso tambien Gracias, pero Modernizr solo detecta si está presente la propiedad que intentamos usar (en este caso, border-radius), pero no fabrica la posibilidad de usar border-radius y que se vea en Explorers. En la página de polyfills de Modernizr: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills en la sección sobre CSS3 Styles, mencionan que se puede agregar la propiedad border-radius en Explorer únicamente con CSS3PIE, pero eso ya lo probé, y pasa lo mismo que planteaba yo de entrada: fuera de article, etc. redondea a la perfección los bordes en Explorer, pero dentro de article, aside, etc. no los redondea. ¿Alguien se ha encontrado con el mismo problema? Ver ejemplo: http://www.saberweb.com.ar/prueba/bordes/index.html Muchas gracias, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bordes redondeados CSS3 dentro de elementos HTML5
Lo que te indican, es que agregues modernizr para que interprete las etiquetas html5 (internet explorer) y pruebes a ver si funciona. En mi primer mail decía que ya estoy usando HTML5shiv para eso, y funciona. Las etiquetas de HTML5 las está reconociendo bien Explorer, el problema es que no redondea los bordes dentro de esas etiquetas, aunque sí los redondea fuera de ellas. -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Curso a distancia de Maquetación Web con CSS (con DIVs, sin tablas)
Hola a todos! Está abierta la inscripción para un nuevo curso a distancia que estoy dictando, de Maquetación Web con CSS. Es un curso para quienes ya tienen experiencia en diseño web, pero quieren aprender todas las técnicas del diseño con CSS, sin tablas. Los cinco módulos que forman el curso profundizan en los siguientes temas: -Módulo 1: El marcado estructural -Módulo 2: Preparación de páginas con DIVs -Módulo 3: Posicionamiento de columnas con CSS -Módulo 4: Menúes y aplicación de imágenes decorativas -Módulo 5: Maquetación de formularios con CSS El temario detallado del curso, junto con el formulario de matriculación, pueden encontrarlos en: http://www.saberweb.com.ar/maquetacion-css.php Espero que les sea de utilidad. Un saludo! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] adaptar web a dispositivos moviles
El 13/11/2010 06:26 a.m., anthony mapp escribió: Hola, quisiera saber como poder adaptar mi web a dispositivos mobiles, pasos a seguir, etc. He estado buscando pero no he encontrado links que me sirvan de ayuda y espero encontrarla aqui, gracias de antemano A mí me impactó el concepto de Yiibu que descubrí hace pocas semanas (aún no tuve ocasión de implementarlo): en lugar de diseñar para monitor y luego adaptar para móviles, proponen hacer lo contrario: crear la web primero para móviles, y luego adaptarla a pantallas grandes: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu Probablemente, para entender esa lógica, primero deberías conocer las técnicas ya difundidas a las cuales le está contestando: la principal es la técnica de Media Queries usando hojas para pantalla y anti-pantalla, te recomiendo estudiarla primero: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet P.D.: desde ya que está todo en inglés. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] no me hace caso handheld
El 09/09/2010 09:40 a.m., Manuel medina escribió: Estoy probando mi pagina en Firefox y en Opera Mobile Emulator (que simula un dispositivo móvil como iphone) pero no me hace caso. Pongo por ejemplo en la pagina: link href=templates/spanish_red/css/template_css_hand.css rel=stylesheet type=text/css media=handheld / Casi ningún móvil soporta handheld, algunos soportan Media Queries y otros directamente leen la hoja screen. Te recomiendo investigar sobre la técnica de aplicación sucesiva de varias hojas, que se van aplicando según el dispositivo: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Borrar datos de formulario [OT]
El 09/08/2010 06:22 p.m., José Diaz escribió: Es cierto, reset vuelve a hacer request al servidor. Borrar seria no hacer request sino solo limpiar los input text Que yo sepa, un input type=reset no hace ningún REQUEST (petición HTTP) a ningún servidor para volver los datos al estado en que estaban al cargarse la página. ¿No será que el navegador ya tiene cargado en la memoria el árbol DOM del documento, con todas sus etiquetas y atributos y values, y por lo tanto recuerda cuál era el estado inicial de los campos del formulario? Si es así, no hace falta ninguna petición (request) a ningún servidor y ningún refresco, sino que el reset actúa de inmediato, en una milésima de segundo, ya que todo esto sucede del lado del cliente, en el navegador. Disculpen, pero me resulta sorprendente esa afirmación. -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con :focus en WebKit (Safari y Chrome)
El 05/08/2010 08:06 p.m., inesansebastian escribió: Hola Hernán he visto tu código en el Safari en mac y creo que no puedo ayudarte, pero me ha parecido muy curioso que no funcione cuando pinchas con el ratón y sin embargo sí lo haga cuando vas pasando de uno a otro con alt + tabulador. Un saludo Así es, Inés, lo había probado (en PC también sucede lo mismo, al pasar con el tabulador funciona correctamente). En fin, ¿alguien conocerá a algún programador de WebKit al que podamos avisarle del fallo?... :-) Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con :focus en WebKit (Safari y Chrome)
El 05/08/2010 04:06 a.m., Dani F. Serch escribió:
Entiendo que tú lo usas en enlaces, no?
Quizá lo que buscas es una combinación entre active y visited?? No lo sé.
En realidad, Dani, uso una combinación de :active y :focus, y sí, lo uso
en enlaces.
Y gracias Tei por la sugerencia, pero justamente el desafío cuando
apliqué este código fue hacerla solo con CSS, sin scripts.
Les copio el código que uso a ver si alguien lo quiere probar:
div class=contenedorGaleria
ul class=galeria1
lia href=javascript:void(0);01img src=1.jpg alt=gato //a/li
lia href=javascript:void(0);02img src=2.jpg alt=perro //a/li
lia href=javascript:void(0);03img src=3.jpg alt=liebre
//a/li
lia href=javascript:void(0);04img src=4.jpg alt=conejo
//a/li
lia href=javascript:void(0);05img src=5.jpg alt=leon //a/li
lia href=javascript:void(0);06img src=6.jpg alt=tigre //a/li
lia href=javascript:void(0);07img src=7.jpg alt=pato //a/li
lia href=javascript:void(0);08img src=8.jpg alt=cisne
//a/li
lia href=javascript:void(0);09img src=9.jpg alt=caballo
//a/li
lia href=javascript:void(0);10img src=10.jpg alt=gallo
//a/li
/ul
/div
Y la parte CSS:
.contenedorGaleria {
width: 480px; /* el ancho total de la galería */
height: 400px; /* el alto total de la galería */
margin: 0px auto;
background: #EE url(1.jpg) no-repeat scroll 0px 0px; /* la imagen
que se verá por defecto, ubicada en el contenedor */
border: 1px solid #AA;
text-align: center;
}
.galeria1 {
position: relative; /* para que sirva de coordenada a los absolutos
internos que tenga */
width: 480px; /* el ancho de las imágenes */
margin: 360px 0px 0px 0px; /* el margen superior debe ser igual al alto
de la imagen, para que la lista baje */
padding: 0;
list-style-type: none;
}
.galeria1 img {
border: none;
}
.galeria1 li {
float: left;
}
/* estos son los enlaces con numeritos del menú inferior */
.galeria1 li a, .galeria1 li a:visited {
float: left;
width: 32px;
margin: 6px 2px 0px;
padding: 3px 0;
background-color: #FF;
border: 1px solid #44;
color: #00 !important;
text-decoration: none !important;
}
.galeria1 li a img {
position: absolute; /* para posicionarla con relación al contenedor */
visibility: hidden; /* las imágenes están ocultas */
left: 0px;
top: -360px; /* la imagen se sube, compensando el margin que había
bajado a todo el menú de numeritos */
border: none;
}
.galeria1 li a:hover {
background-color: #DD; /* efecto de rollover */
}
.galeria1 li a:active img, .galeria1 li a:focus img {
visibility: visible; /* se muestra la imagen al hacer click (foco o
pulsarla) */
}
.galeria1 li a:active, .galeria1 li a:focus {
background-color: #C2C4D0;
}
Las últimas dos declaraciones son las que tienen problemas en WebKit, ya
que usan :focus y :active (ya no sé cuál de los dos será el problemático).
¿Alguna pista?
Gracias!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problema con :focus en WebKit (Safari y Chrome)
Hola a todos! Recurro a los especialistas en CSS, ya que no encuentro pistas por Google: ¿alguien conoce alguna solución al modo en que Safari y Chrome manejan la seudo-clase :focus? Todos los demás navegadores, cuando uno pulsa un elemento con el mouse, consideran que el estado :focus permanece, sigue sucediendo, en tanto uno no pulse otra cosa distinta, lo cual permite soltar el dedo del botón del mouse mientras -por ejemplo- miramos varios segundos una foto que apareció al hacer foco en un elemento de una lista. Queda a la vista esa imagen que tuvo por última vez el foco. Pero WebKit (Safari, Chrome) parece que considera que el estado :focus sucede de manera momentánea, solo mientras permanecemos pulsando con el dedo el mouse; al parecer considera a :focus idéntico al estado :active. En cuanto soltamos el dedo, adiós foco... ¿Alguien conoce alguna solución que permita diferenciar estos dos estados en WebKit? Gracias de antemano! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ¿Como cambio el estilo a un anchor?
El 02/07/2010 06:59 a.m., qui...@somosene.com escribió: Quiero crear una serie de enlaces desde una página web a varias partes concretas de otra página diferente mediante anchors, ¿es posible mediante CSS cambiar el estilo del texto que contiene el anchor al que me he dirigido para destacarlo y diferenciarlo del resto? Usando CSS solamente no se me ocurre, pero si las páginas fuesen PHP (o cualquier otro lenguaje de servidor) sería muy fácil, haciendo que cada enlace envíe al servidor un valor distinto de una variable, al estilo de: pa href=paginab.php#subtexto?ancla=subtextoSubtexto/ap pa href=paginab.php#seccion2?ancla=seccion2Sección 2/ap etc. Y luego en la segunda página, un condicional (if o switch) que según lo que contenga la variable $_GET[ancla], escriba dentro del anchor de destino elegido un class=activo o algo así, para que se vea diferente. Ya sé que no es solo con CSS, pero funciona. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ¿Como cambio el estilo a un anchor?
El 02/07/2010 09:17 a.m., Tei escribió: pa href=paginab.php#subtexto?ancla=subtextoSubtexto/ap pa href=paginab.php#seccion2?ancla=seccion2Sección 2/ap etc. esto puede que sea mas bien al reves paginab.php?ancla=subtext#subtexto Ouch! Sí, es cierto, la almohadilla va al final. Eso me pasa por hacerlo de memoria... -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Invitación a conectarnos en LinkedIn
El 10/05/2010 08:28 a.m., José Diaz escribió: spam en la lista no filtrado. Creo que eso no es spam, es desconocimiento de quienes aceptan que Linkedin, Facebook (o cualquier otra web similar) envíe mensajes a todos sus contactos para invitarlos. Entre esos contactos, está la lista Ovillo... -- Hernán Beati http://www.saberweb.com.ar El 10 de mayo de 2010 06:24, Jorge Vallejo de Castro jorgevallejodecas...@gmail.com escribió: LinkedIn Jorge Vallejo de Castro pidió añadirte como contacto en LinkedIn: -- Hernan, Me gustaría añadirte a mi red profesional en LinkedIn. -Jorge Aceptar invitación de Jorge Vallejo de Castro http://www.linkedin.com/e/Z7lSpksHLQSxxzgcU59yClLOLQWis8f-N5Y2/blk/I2027048141_2/1BpC5vrmRLoRZcjkkZt5YCpnlOt3RApnhMpmdzgmhxrSNBszYOnP4QcjwQc3sOc399bRpChjBjhANObPsMdjgScPsUcz4LrCBxbOYWrSlI/EML_comm_afe/ Ver invitación de Jorge Vallejo de Castro http://www.linkedin.com/e/Z7lSpksHLQSxxzgcU59yClLOLQWis8f-N5Y2/blk/I2027048141_2/39vcjgNe3gMdP8McAALqnpPbOYWrSlI/svi/ -- ¿SABÍAS que LinkedIn te puede ayudar a encontrar a los proveedores de servicio adecuados utilizando recomendaciones de tu red? Por medio de los Servicios de LinkedIn, puedes eliminar las arriesgadas conjeturas al seleccionar proveedores de servicios leyendo las recomendaciones de socios creíbles y confiables de tu red. http://www.linkedin.com/e/svp/inv-25/ -- (c) 2010, LinkedIn Corporation ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo Se certificó que el correo entrante no contiene virus. Comprobada por AVG - www.avg.es Versión: 9.0.819 / Base de datos de virus: 271.1.1/2863 - Fecha de la versión: 05/09/10 03:26:00 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Invitación a conectarnos en LinkedIn
Hola Jairo, El 10/05/2010 12:39 p.m., Jairo Ochoa escribió: El email ovillo@lists.ovillo.org aparece como email de contacto de Hernán Beati. !??? No encuentro dónde has visto eso. En mi perfil de Linkedin no lo veo. Pásame la URL de lo que afirmas, quiero ver si es cierto lo que dices. Si alguien desde Linkedin le envía una solicitud, Linkedin envía el mensaje a este email y no a su otro email. Supongo que es un error de Linkedin. De nuevo, ¿en qué URL viste eso? Me resulta raro, más bien me inclino a creer lo que el propio autor de la invitación, Jorge Vallejo de Castro, ha dicho: Efectivamente no sabia q repercutiria en la lista de contactos, generando estos reenlaces, pido disculpas por las molestias que este ocasionando esta interferencia dentro de la lista de Ovillo. Que es lo mismo que viene a decir José Florido en su último mensaje, y lo mismo que sospechaba yo; supongo que Jorge Vallejo de Castro ingresó a la URL: https://www.linkedin.com/secure/importAndInvite y allí fue incluida la dirección de la lista, ya que la tenía entre sus contactos. Me gustaría saber del propio Jorge si fue esto lo que sucedió. Lo que sí me intriga es por qué decía Hernán en la invitación, ¿habías querido agregarme a mí a tu lista de Contactos, Jorge? Cuéntanos, así descubrimos por qué sucede esto. Hace unos 4 años que uso Linkedin, tengo 133 contactos, y utilizo como email de contacto la misma casilla de correo con la que escribo a esta lista (hernan @ saberweb com ar), pero de ninguna manera uso la casilla DE la lista como mi propia casilla! (supongo que si así fuera, la lista recibiría copia de cada uno de los mensajes que intercambio con toda esa gente, y no he visto que suceda eso!). A ver si descubrimos qué es lo que pasa... Gracias, y disculpas al resto, que esto no tiene nada de CSS! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Invitación a conectarnos en LinkedIn
El 10/05/2010 03:17 p.m., Jairo Ochoa escribió: Correo electrónico:hernan saberweb com arher...@saberweb.com.ar Principal ovillo@lists.ovillo.org other Gracias por darme esa pista, Jairo! En la configuración pude encontrar que, además de mis 3 casillas de correo, efectivamente figuraba la de Ovillo como 2da. opción (no me pregunten por qué, porque no lo entiendo cómo llegó hasta allí!!). Ya está borrada, y espero que ya no sucedan más estos reenvíos a la lista, disculpas a todos, y gracias Jairo por tu ayuda! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] CSS3
Hola a todos! El 12/03/2010 11:21 a.m., Eduardo Varela escribió: http://cafeina.ladybenko.net/?p=338 Comparto que el de Lady BenKo es un excelente manual de XHTML y CSS, pero no es específicamente sobre CSS 3, que es lo que están pidiendo. Recomiendo estos dos sitios (en inglés), exclusivamente dedicados a CSS 3: http://www.css3.com http://www.css3.info Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Tabindex en opera: foco en capa con overflow -Desplazamiento no funciona.
El 01/02/2010 01:52 p.m., SoporteNuke escribió: div style='margin-bottom: 10px' tabindex='2' div style='overflow: auto;height: 145px;' tabindex='2' Los dos divs tienen el mismo tabindex. -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Curso de Xhtml
Hola Jaume! El 11/01/2010 04:50 a.m., jaume op escribió: Mi plan es comenzar con : - Accesibilidad, Estandares y Semantica - Etiquetas y marcas de contenido. - Ejercicios Html - Separación de contenido y presentación - Css Me sumo a lo que mencionó Victoria acerca del orden: mi sugerencia sería que comiences por lo más técnico (las etiquetas del marcado XHTML), para luego, en base a problemas reales, incorporar los conceptos de por qué es mejor separar contenido y presentación, y por qué ciertas formas de programar pueden traer problemas de accesibilidad (esto al final de todo, ya que si no saben programar el código, es muy difícil que entiendan los problemas de accesibilidad solo hablando, hay que haber codificado para comprender el problema y la solución). Por eso mi sugerencia sería darle este orden: 1) Etiquetas y marcas de contenido (aquí iría machacando por qué el marcado es según lo que son los contenidos y no según lo que aparentan, o sea, lo que creo que has llamado semántica, y el hecho de que DEBAN ser válidos según las reglas del W3C -creo que es lo que llamas estándares en tu temario-). 2) Separación de contenido y presentación (conceptos que introducen a la necesidad de usar CSS). 3) CSS (para aprender a poner en práctica esa separación). 4) Accesibilidad (para refinar el código, que si les has enseñado a marcar bien el XHTML, ya traerán incorporados muchos hábitos accesibles, como el cuidar los textos de los enlaces, usar alt, encabezados h1, h2, etc.). En cuanto a los ejercicios, te recomiendo que los incluyas abundantemente, en cada tema, ya que leyendo no se aprende, se aprende equivocándose una y otra vez mientras intentamos aplicar la teoría, allí uno recuerda para siempre el por qué no se debe hacer tal cosa así, sino de otra manera. Te ofrezco que uses como referencia el temario de mi curso de Diseño Web con XHTML y CSS que dicto a distancia, puedes descargar un PDF con las distintas unidades y temas que se ven, lección por lección, quizás te sirvan de guía: http://www.saberweb.com.ar/Diseno%20Web%20con%20XHTML%20y%20CSS%20-%20SaberWeb.pdf O entrando por esta página lo puedes descargar pulsando el botón de Descargar: http://www.saberweb.com.ar/xhtml.php Cualquier otra consulta que tengas que te pueda servir, estoy a tu disposición. Un saludo! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Curso de Xhtml
Hola SoporteNuke (¿cuál será tu verdadero nombre?). El 11/01/2010 11:49 a.m., SoporteNuke escribió: Hola Hernán, interesante y tupido curso... Veo que tiene un costo ese curso, pero ofreces la descarga o es solo el temario? Como docente del curso, le estoy ofreciendo a otro docente que lea el temario. Jamás ofrecí la descarga (?) de mi curso (supongo que posiblemente te confundes cursos con tutoriales, ya que los cursos no se descargan, se cursan durante cientos de horas!). De hecho, el cursado dura casi un año de correcciones diarias a los ejercicios de mis alumnos, y eso me lleva cientos de horas, no puedo ofrecerlo gratis, por supuesto (podría aceptarte como mecenas si quieres pagar mis gastos y los de mi familia, auto, dos hijas, perro, vacaciones...) :-) Creo que hay diferencia entre un tutorial y un curso. Los tutoriales se descargan, son archivos. Los cursos son PERSONAS enseñando a otras PERSONAS. Tiempo, trabajo... No sé si tú eres docente, SoporteNuke, pero de serlo, sabrías que puede ser de bastante ayuda tener como hoja de ruta un temario de un curso similar al que estás por dictar (no solo no sé si eres docente, la verdad es que ni siquiera sé quién eres, ya que te amparas en el anonimato firmando tus correos como SoporteNuke). Otro asunto es que en ese enlace los textos no se ven cuando se navega sin imágenes... Sí, gracias por preocuparte en testearlo. Ya conoces el refrán: en casa de herrero... Hace tiempo tengo pendiente limarle algunos detalles a ese sitio, pero no tuve tiempo de hacerlo por ahora. Un saludo, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Curso de Xhtml
Hola Ramón! El 12/01/2010 12:05 a.m., SoporteNuke escribió: Mi nombre real es Ramón Jiménez, soy de República Dominicana y soy estudiante de Educación Matemática Espero no haber ofendido a nadie con eso de SoporteNuke y pronto estaré en la lista con nombre autentico y dirección propia de correo electrónico... Muchas gracias por presentarte, Ramón, soy yo el que no se acostumbra a hablarle a los seudónimos, ahora te imagino mucho mejor, estudiante, viviendo en tierras Dominicanas, al menos para mí, ya es otra cosa! Y a Hernán, gracias por tan particular oferta...seguro que mejor es pagar el tuto' que tirarse una familia completa, xD... Jajaja!! Seguro! (pero que no le digas tuto a mi curso! jajaja!). Espero que jaume tenga todos los éxitos en su curso, ¡Jaume! ¡Lee! ¡Lee! ¡Lee! :D Coincido 100% con tu consejo para Jaume: no podemos pretender programar sin tener el hábito de la lectura atenta y crítica, casi obsesiva (lo dice alguien que empezó trabajando en editoriales como corrector de estilo y erratas, lo que me ayudó a tener ojo clínico para el código). Por más videos que uno ponga en los cursos, mostrando cómo se hacen las cosas en forma visual, si el alumno no lee hasta comprender los temas conceptuales relacionados con el diseño y con sus problemas de implementación, de poco le servirá conocerse de memoria todas las etiquetas HTML o los botoncitos del mejor editor... Un saludo cordial, Ramón! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] [OT] Cursos de diseño web
Hola Félix! El 29/12/2009 07:15 p.m., Felix Manuel Fernandez Chamorro escribió: Tengo una pequeña duda. Voy hacer un curso pero no tengo claro cual. Estoy entre un master de diseño web en el que dan dreamweaver, flash, html, css, El otro es un curso en el que se daria php y javascript de los cuales no tengo ni idea. En principio, eso debería depender del perfil en el que quisieras especializarte: 1) Si eres bueno en lo estético, en el diseño, entonces profundiza CSS y HTML, bien a fondo, hasta que tus diseños se destaquen del resto. 2) En cambio, si quieres convertirte en programador o desarrollador de sistemas, entonces comienza con PHP y JavaScript (pero tienes un laaargo camino por delante). Y si te interesan las dos cosas, entonces te recomiendo profundizar en ese mismo orden, es decir, primero HTML y CSS y luego PHP y JavaScript. El mercado te pagará mejor si eres capaz de hacer MUY BUEN diseño aunque tercerices la programación, o si eres del área de sistemas y programas MUY BIEN aunque tercerices el diseño. Si te quedas a mitad de ambos caminos, los especialistas te ganarán la competencia... Piensa que los diseñadores gráficos de carrera universitaria te llevarán ventaja a la hora de diseñar bien, y los que tengan una carrera universitaria en sistemas te llevarán ventaja a la hora de programar eficientemente. Entonces, una buena opción que siempre suelo recomendar a mis alumnos, sería diferenciarte y apuntar al mercado de las aplicaciones web pre-armadas (de código abierto), donde apliques diseño a cosas ya programadas por expertos, y donde a lo sumo apliques retoques menores de programación, ya sea por tu cuenta o tercerizando. De esa manera, obtienes rapidez en proporcionar una buena solución a tus clientes (y ofreces menores costos que la gente de sistemas que haría una solución desde cero, mucho más cara y con plazos más largos). Y te despegas de los diseñadores que no tocan código... que no pueden ofrecer más que webs estáticas en HTML y CSS únicamente. En caso de elegir ese camino, te recomiendo ir en orden: primero profundiza CSS y HTML, luego aprende PHP y JavaScript, y luego aprende a adaptar software libre prearmado (como osCommerce, Joomla, WordPress, etc.). P.D.: Lo digo en voz baja para que no se moleste nadie: ¿has visto los dos cursos a distancia que dicto en mi sitio web, donde ofrezco precisamente esos dos temas, Diseño Web con XHTML y CCS y Programación Web con PHP y MySQL? ;-) Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Posición de background dependiente de otro div
Hola a todos! Estoy tratando de entender un ejercicio al que no le encuentro una causa lógica: 1) El body tiene aplicada una imagen de fondo en mosaico. Sin problemas hasta aquí. Luego hay dos divs: 2) un div #contenedor con una imagen de fondo (unos planetas grandes) 3) y otro div con textos dentro. Si aplico un margin-top (unos 200px en este caso) al div del TEXTO, la imagen del fondo DEL CONTENEDOR se mueve hacia abajo esos 200px, como si ese div percibiera que cambió la posición del div interno, y se reacomodara a él! Si le pongo overflow:auto al #contenedor se soluciona, el #contenedor sube y muestra la foto de fondo comenzando del borde superior de la pantalla, pero no entiendo por qué regla específica de CSS la ubicación DEL CONTENEDOR cambia si cambio el margen de OTRO div interno... La URL es: http://www.cursodecss.com.ar/index.html Desde ya, gracias por cualquier pista... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Posición de background dependiente de otro div
Ignacio Ricci escribió: Va no sé. Ahora que pienso no se si era lo que buscabas. Ahora me mareé y no me queda claro la pregunta. Jaja! Yo también estoy mareado a esta altura... lo que no entiendo es cómo está trabajando el modelo de caja en este caso concreto. ¿Por qué si aplico margin-top a un div interno, el contenedor se mueve hacia abajo? ¿No se tendría que quedar quieto en su lugar, pegado al inicio del body, ocupando toda la pantalla desde el borde superior de la ventana? Esa sería la pregunta, busco la referencia en la especificación CSS que avale que ese es el comportamiento esperable (cosa que a mí no me parece muy lógica que digamos). ¿Por qué si le pongo overflow:auto vuelve a su lugar -pegado al borde superior de la ventana- el #contenedor? No le veo lógica, si no hay flotados... Gracias por responder Nacho! -- Hernán Beati http://www.saberweb.com.ar 2009/10/27 Ignacio Ricci ignacio.ri...@gmail.com Dale a #contenedor un PADDING igual al MARGIN del div #transparente, y borrale el margen a #transparente. Luego ajusta el ancho de #contenedor, ya que estas agregando padding. Y listo. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Un select al lado del otro
ReynierPM escribió:
form#paypal_form label { ... width:50em; ... }
form#paypal_form select { ... width: 145px; }
No creo que sea buena idea mezclar unidades de medida, estás dando un
ancho al label en EMs, y un ancho al select en pixeles. ¿Cómo sabes
cuántos em ocuparán 145 pixeles. Te recomiendo usar EMs para ambos.
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cursor
Ignacio Ricci escribió:
Tenés que conseguirte algún soft que pueda guardar en .cur y probarlo.
NO hace falta que sea .cur (e incluso es más compatible en gif).
Eso sí, para Firefox, hay que aclarar el valor auto a continuación:
a:hover {
cursor: url(foto.gif), auto;
}
Con eso debería funcionar.
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cursor
Nesta Guerrero Pancorbo escribió:
BODY{cursor: url(URL IMAGEN CURSOR IE),
url(URL IMAGEN CURSOR FIREFOX), auto;
}
A:hover
{cursor: url(URL IMAGEN CURSOR IE EN LINK),
url(URL IMAGEN CURSOR FIREFOX EN LINK), auto;}
Perdón, después de escribir mi mensaje anterior, vi esta solución, no
sabía que se podían poner dos cursores, uno para Explorer y otro para el
resto, voy a probarlo!
Saludos,
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ver estadisticas
Fabio Acosta Barrientos escribió: quiero crear en mi sitio web un cuadro donde yo pueda hacer una pregunta, colocar las respuestas, que la gente le de click sobre ellas, y luego, de darle click en la opción, se puedan ver las estadisticas de las opciones.. como se puede hacer?? Si sabes programar PHP y MySQL, podrías hacer tu propio sistema de votaciones, o utilizar uno pre-armado que sea software libre, como PHP-Poll: http://www.phppoll.org/ Pero sospecho que si supieras programar en PHP, no estarías haciendo esa pregunta en esta lista; si ese fuera tu caso, te recomiendo utilizar algún servicio de votaciones online gratuito, como los que se enumeran aquí: http://www.javascriptkit.com/howto/polls.shtml Suerte! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Suma de px!
Hola Raúl! Raúl Antonio Marino escribió: Me pasa que estoy con un div, y tengo muchos divs anidados con diferente ancho, y la suma de todos me da 540px que es lo que vale el div que contiene a los otros divs, pero me aparece como que lo supera! donde esta el error? En CSS el ancho del contenedor NO ES igual a la suma de los anchos de sus elementos anidados... tenés que sumarle también los márgenes y bordes (que no son cero si no los declaraste explícitamente así). Este tema es uno de los más espinosos de CSS, tendrás que entender el Quirks Mode y cómo le afecta al modelo de cajas, aprender a tratar con márgenes que colapsan, etc. etc. Te sugiero buscar en Google: modelo de cajas CSS. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] JavaScript
Hola Raúl! Raúl Antonio Marino escribió Queria saber si existia la lista de JavaScript?! Te recomiendo esta lista en castellano sobre JavaScript: http://lists.scriptia.net/listinfo.cgi/javaescript-scriptia.net Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar página con ancho dinámico
Hola Marcela!
si tengo un sitio con medidas de ancho rdinámico, por ej. 90%, y
quiero que se vea centrado, qué código debo utilizar en el CSS?
Podría ser:
#contenedor {
position: absolute;
width:90%;
margin-left: -45%; /* la mitad del width */
left: 50%;
top: 1px;
}
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar página con ancho dinámico
marcela sluka escribió:
Gracias a todos! Pero la solución que me dio Hernán es la que me está
dando mejor resultado al probarlo... Si le quito el position: absolute
al contenedor, me desarma toda la alineación de capas que tengo...
Eso es porque las capas (tus divs con position:absolute) deben tomar
como referencia para sus coordenadas algo que no sea static, y en tu
caso serviría (como leo que te acaba de decir Martín mientras escribo
esto) tanto position:absolute en el contenedor, como position:relative.
Volviendo a tu necesidad, se arreglaría también si pusieras:
body{
text-align: center; /* centra en Explorer */
}
contenedor {
position: relative; /* sirve de coordenadas para los absolutos que haya
dentro */
margin: 0 auto; /* centra en todos menos Explorer */
width:90%;
text-align: left; /* para volver el texto a la izquierda */
}
De esa manera también te funcionaría.
Y no creo que una técnica sea mejor que la otra, las dos funcionan.
El centrado con margin:0 auto sirve para bloques static o relative, y
el centrado con márgenes negativos sirve para bloques absolute.
Distintas técnicas, para distintos problemas.
Saludos,
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Marcado de abreviatura para 7UP
Hola a todos, Hace tiempo que tengo una duda: la marca de gaseosas 7Up (que es una notación distinta de las palabras Seven Up), ¿constituye una abreviatura que debe marcarse con abbr? ¿O con acronym? ¿O con ninguna de las dos? Yo me inclino por abbr, pero no estoy seguro (siempre confiaba en que las que tenían puntitos eran las abreviaturas, pero 7Up no tiene...). Me gustaría recibir opiniones. Gracias, y saludos a todos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Marcado de abreviatura para 7UP
Ignacio Ricci escribió: No es una abreviación. Es una marca. Gracias Nacho! Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Explorer 6 no deja escribir en campos de formulario
Asela Ortiz de Murua escribió: Hola Hernan Acabo de testear el formulario con Ie6.0 (el viejo del XP) y me permite la escritura en los campos, perfectamente. Muchas gracias Asela (y Javier), el problema era usar MultipleIE como decía Ignacio. Ya me pasé al IETester que recomendó Rodrigo, y la verdad que me gustó mucho más, lo estoy usando para probar cosas en esos navegadores innombrables... Saludos a todos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Explorer 6 no deja escribir en campos de formulario
Hola Rodrigo! Rodrigo Álvarez Virgós escribió: Yo desde que descubrí el bug me pasé a IETester [1] y desde entonces estoy encantado, no me vuelvo a MultipleIE aunque resuelvan el error. [1] http://www.my-debugbar.com/wiki/IETester/HomePage Muchas gracias por la recomendación! Acabo de probarlo, y es muy práctico poder abrir varias versiones en una misma ventana, me resulta muy cómodo! Gracias por el dato! Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Explorer 6 no deja escribir en campos de formulario
Hola a todos, Me he llevado una sorpresa al ver un código de formulario que genera que en Explorer 6 no se pueda escribir en los campos (hago click y no me permite escribir nada!!). Y es solo HTML y CSS, nada de scripts... No deja de sorprenderme Explorer 6!... ¿Alguien que sepa por qué puede ser esto? Está subido provisoriamente a: http://www.saberweb.com.ar/prueba/explorer6/index.html Por favor, entrar para ver si se repite el error con Explorer 6 (el resto de navegadores no me preocupa, solo Explorer 6 esta vez, hay un comentario condicional que provisoriamente puse con: if lte IE 8... para que pueda entrar con Explorer 6 aun quien tenga Explorer 8 instalado). Si alguien tiene una pista para empezar a investigar por qué no se puede escribir dentro de los campos, algún otro bug que aún no conozco de Explorer 6, en fin, se agradecen ideas... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Explorer 6 no deja escribir en campos de formulario
Ignacio Ricci escribió: Si estás usando Multiple IE para instalar IE6 es eso.Porque yo lo tenía y tenia el mismo BUG. Sí, tengo MultipleIE... entonces era eso! Aggghh... :-) Muchísimas gracias Ignacio! Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Listado con elementos de listado flotantes
Julio Loayza Herrero escribió:
Me planteo: Si tenemos un listado (ul por ejemplo) y con todos sus
elementos flotantes ¿Cómo hacer para que el listado (ul) no aparezca
vacío? Es decir, para que tome la altura de los elementos contenidos.
Prueba con:
ul {
overflow:auto;
}
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] [OT] Elección de diseño
Manuel Castillo Sánchez escribió: http://www.arte2.es/design2.jpg Voto por el 2, porque me hace VER antes que LEER. Mis ojos se van hacia las manos pintando, antes que a leer los slogans y demás frases. Detalles: 1) ¿no sería Qué SON el cordobán y el guadamecí? (en plural). 2) Coincido con lo que ya dijeron, Showroom no suena nada bien en ese contexto. 3) Los textos imagino que no serán los definitivos, a mí la frase Desde Arte2 todos los días innovamos para hacerles llegar creaciones únicas me obliga a leer mucho y no me dice nada... Lo mismo la palabra BIENVENIDA, creo que sobra, y el texto que le sigue también, yo encabezaría la atención aclarando con un breve texto cuál es la función de lo que viene a continuación: ¿son productos en venta? ¿es un taller para aprender a crear esto? Ese breve texto creo que tendría que aclarar eso. Mis dos centavos... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Parpadeo de imágenes de fondo en IE al cambiar de sección
Samuel - escribió: no quería usar PHP para evitar repetir el código porque se supone que el contenido que sea cargado por un include de PHP no sería indexable por los buscadores ¿no? ¿? Es igual de indexable. El include de PHP se ejecuta en el servidor, en el hosting, justo ANTES de enviarle al navegador del usuario ese código HTML que fabricó con la función include, y del mismo modo, justo ANTES de enviarle al bot de Google ese mismo código HTML que fue escrito por la orden include. Así que no importa cómo generes el código HTML, si usas PHP o si usas includes o no: de cualquier manera, el código que llegue al navegador o al bot es tan indexable como cualquier otro contenido que no use PHP. -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Intercambiar visualmente el orden de dos párrafos
Estoy pensando en otra posibilidad: ¿alguien sabe si existe alguna forma confiable de detectar la presencia del lector de pantalla, ya sea mediante parte de la petición HTTP, mediante User-Agent o con una hoja de estilos aural, o con X técnica, para que cierto contenido sea omitido con display:none SOLAMENTE en un lector de pantalla? Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Intercambiar visualmente el orden de dos párrafos
Ramón Corominas escribió:
Es una buena idea, aunque me temo que no es posible, al menos por
ahora... El problema es que el lector de pantalla funciona como una capa
aparte del navegador, capturando las llamadas a la tarjeta de vídeo, así
que tengo la impresión que sería como tratar de detectar la presencia de
una determinada tarjeta de vídeo o de una memoria usb. No cambia la
cadena User-Agent, y tampoco parece afectarle el uso de media=aural.
No se me ocurre de qué otra manera se podría detectar, la verdad.
Acabo de descubrir que con ActionScript de Flash sí se puede detectar la
presencia de un lector de pantalla:
if (Accessibility.isActive()){
// hacer algo...
}
o al contrario, detectar su ausencia.
Pero resulta demasiado poco confiable la solución, ya que habría que
confiar en que el usuario tenga el plugin de Flash, más JavaScript
activado (ya que Flash puede ejecutar código JavaScript), para poder
insertarle los nodos (p, h1, etc.) dentro del DOM en el orden que
queremos que un lector de pantalla los lea... o que un no-lector de
pantalla los lea.
Quizás alguien que sepa más de JavaScript le pueda dar una vuelta al
tema (no es mi especialidad JavaScript!).
Pero es demasiado dependiente de tecnologías accesorias como los
plugines, no me gusta...
Hernán Beati - SaberWeb.com.ar escribió:
Estoy pensando en otra posibilidad: ¿alguien sabe si existe alguna forma
confiable de detectar la presencia del lector de pantalla, ya sea
mediante parte de la petición HTTP, mediante User-Agent o con una hoja
de estilos aural, o con X técnica, para que cierto contenido sea
omitido con display:none SOLAMENTE en un lector de pantalla?
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Menu resaltado
alejandra.j.go...@gmail.com escr
ul
li class=current a href=index.htmlspanLa Institucioacute;n
nbsp;nbsp;//span/a/li
En este caso yo tengo un menu horizontal, fijate que la primer linea (1),
tiene una clase current, esta clase, se lo pones en cada pagina, en el link
que le corresponde, por ejem: en contacto.html, esta clase la tiene el link
contacto, en soluc.html, esta clase la tien soluc, se entiende?, no se
repite en todas, solo en la que quieres resaltar
La solución de Alejandra funciona perfectamente, pero hay una solución
que a veces puede ser más simple para este problema, ya que no requiere
modificar el menú en cada página para agregarle el class (lo cual
puede ser útil cuando el menú es generado dinámicamente con PHP o
similares).
Es similar a lo que planteaba Alberto, pero sin clases.
La solución es colocar en cada página un id distinto a la etiqueta body.
Por ejemplo, en index.html:
body id=index
En contacto.html:
body id=contacto
y así sucesivamente.
Luego, a cada elemento del menú lo identificamos con un id también (y el
menú queda siempre igual en todas las páginas, por eso es que puede
generarse dinámicamente muy fácil):
li id=a_home a href=index.htmlIndex/a/li
li id=a_contacto a href=contacto.htmlContacto/a/li
etc.
Luego, en la hoja de estilos, usando un selector contextual o
descendentes, identificas a los elementos de menú cuando estén dentro
del id similar a su propio id, es decir, que se aplicará solamente
cuando el #a_contacto esté dentro del body identificado como #contacto:
#index #a_home{}
#contacto #a_contacto{}
etc.
y entre esas llaves declaras los estilos distintos a su estado normal.
Espero que se entienda y te sirva.
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Advertencia del Validador CSS ante declar aciones múltiples
Acabo de pasar por el Validador CSS del W3C [1] este código de columnas
con anchos en EM, ambas flotadas (#menu y #contenido1):
#menu, #contenido1 {
display:inline;
float:left;
}
#menu {
width:13em;
}
#contenido1 {
width:41em;
}
Me da por válida la hoja, pero a continuación incluye estas dos
advertencias:
#menu In (x)HTML+CSS, floated elements need to have a width declared.
Only elements with an intrinsic width (html, img, input, textarea,
select, or object) are not affected
#contenido1 In (x)HTML+CSS, floated elements need to have a width
declared. Only elements with an intrinsic width (html, img, input,
textarea, select, or object) are not affected
En cambio, si incluyo en una única declaración el width en vez de
separarlo, no da esas advertencias (pero eso obviamente me obliga a
poner el mismo width a ambos divs):
#menu, #contenido1 {
display:inline;
float:left;
width:13.8em;
}
En definitiva, no me permnite hacer una declaración múltiple separada
por comas, me obliga a declarar por separado los dos selectores, para
poder darles un ancho distinto.
¿Es un error del validador que me dé esa advertencia, o hay algo en
alguna recomendación CSS que ponga ese requisito? (que me parece no muy
lógico).
¿Alguien sabe algo sobre esto?
[1] http://jigsaw.w3.org/css-validator/#validate_by_input
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Advertencia del Validador CSS ante declar aciones múltiples
Choan Gálvez escribió: Según CSS 2 los elementos flotados deben tener una anchura intrínseco o asignada. El validador hace bien en advertirte. (Según CSS 2.1 no es necesario y es lo que aplican los navegadores de hoy en día) Si es cierto que en CSS 2.1 no es necesario el width en los flotados, entonces no creo que haga bien el validador en mostrar esta advertencia, ya que yo selecciono que evalúe según el Perfil: CSS versión 2.1. Otra falla más, entonces... Otra cosa es que el validador no sepa combinar reglas, en cuyo caso es un defecto del validador. Sí, eso también. Seguramente se complicaba demasiado la programación si debían verificar todas las declaraciones complementarias de un mismo selector antes de dar el mensaje. De todos modos, ten presente que es una advertencia y no un error. Y como ante cualquier advertencia, debes evaluar el mensaje y decidir si la ignoras o la tomas en cuenta. Muchas gracias, Choan! Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Intercambiar visualmente el orden de dos párrafos
Victor Hugo Arias Valencia escribió: Si es un ante-titulo puede ser un H3, y el titulo de la noticia un H2, y pues me parece lógico lo que dice martin, si va antes, pues ponerlo antes de una vez... Yo también comparto el razonamiento de Víctor y de Martín: h3Ante título 1/h3 h2Noticia 1/h2 pCuerpo de la noticia/p Y agregaría que, si fuera necesario marcar un bloque que envuelva a cada noticia entera, para eso están las divisiones (DIV): div class=noticia h3Ante título 1/h3 h2Noticia 1/h2 pCuerpo de la noticia 1/p pPie de la noticia 1/p /div div class=noticia h3Ante título 2/h3 h2Noticia 2/h2 pCuerpo de la noticia 2/p pPie de la noticia 2/p /div Este punto ya fue debatido en la lista por nosotros mismos, hace 3 meses, hablando de que es totalmente válido cambiar el orden de los encabezados, mientras no los omitamos. Referencia: http://www.w3.org/TR/WCAG20-TECHS/H42.html El orden de los factores no altera el producto... los encabezados no son enumeraciones de una lista ordenada, son señales de lo que es más o menos importante dentro de un documento. Quizás el documento empiece con cosas no demasiado importantes. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Intercambiar visualmente el orden de dos p árrafos
Sergio.Iglesias escribió: y en cuestión de accesibilidad? yo también creía que tenían que ir en orden. El 11 de marzo de 2009 20:26, Ignacio Ricci ignacio.ri...@gmail.comescribió: En realidad se recomienda poner los encabezados en orden h1, h2 ,h3, h4, h5 en el código de nuestra página, pero bueno, no me parece un aspecto tan vital. ¿Alguien sabe fehacientemente DONDE se recomienda que DEBAN ir en orden? ¿Y qué fuente lo recomienda? Si es el W3C en las recomendaciones HTML, XHTML, o si son las WCAG, o si son criterios de usabilidad, o de accesibilidad no oficiales... Si fuera un requisito de accesibilidad de las WCAG, sería contradictorio con la referencia y el ejemplo que aporté, copiada de las mismas WCAG 2.0 del W3C: Referencia: http://www.w3.org/TR/WCAG20-TECHS/H42.html Quiero comprobar si son rumores, o es ley, digamos... El orden no define la importancia de un texto. Son criterios distintos. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Intercambiar visualmente el orden de dos p árrafos
Ignacio Ricci escribió: No es un guideline. Pero es un best practice. Pues resulta que busqué un poco, y parece que sí que son Guidelines, y que ambas técnicas que venimos debatiendo están contempladas, y con cada una de ellas se puede alcanzar distintos niveles de Accesibilidad. 1. H42: Usar h1-h6 (sin importar el orden) es una técnica suficiente para el Criterio de Conformidad 1.3.1, que es NIVEL A: http://www.w3.org/TR/WCAG20-TECHS/H42.html 2. G141: Usar niveles correlativos, es una técnica para alcanzar el Criterio de Conformidad 2.4.10, que es de Nivel AAA: http://www.w3.org/TR/WCAG20-TECHS/G141.html Por lo tanto, de acuerdo a las WCAG 2.0 es más fundamental marcar los encabezados como encabezados (sin importar el orden), que tener una jerarquía correlativa. Así que dependerá del Nivel de Accesibilidad que te propongas alcanzar. No hay ningún problema de accesibilidad en un sitio de Nivel A que tenga marcado el texto previo a un título con un h3 y luego el título con un h2, ya que un usuario de JAWS irá saltando igual de encabezado en encabezado perfectamente. Pero si te piden un sitio AAA, allí sí deberás seguir el orden de los encabezados (cosa que por suerte con XHTML 2 se acabará, con sections y h, sin números!). Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Intercambiar visualmente el orden de dos párrafos
Pablo Suárez León escribió: Eso según las WCAG 2.0... Pero... las WCAG 1.0, que por cierto, según la legislación vigente en España, son con las que hay que validar los contenidos, sí que lo citan. http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers Es lo mismo que decía yo en mi último mensaje: eso corresponde a quienes deseen alcanzar Nivel AA y AAA. Ya que es un punto de prioridad 2 (así lo dice en la URL que citas). Por lo tanto, un sitio que solo aspire a Nivel A de accesibilidad, que debe cumplir solo con los puntos de Prioridad 1, puede tener cualquier orden en los encabezados y sin embargo alcanzar el Nivel A. P.D.: como no estoy en España, no sabía que se guiaban por las WCAG 1, pero es lo mismo... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
;-) estilables por separado, Todo es estilable por separado usando DIVs, nada más fácilmente estilable que apuntar hacia #columna1-fila3, o sea, hacia un id que identifica a una columna, y ponerle una imagen de background posicionada en cualquiera de los bordes de esa columna, y despegando el texto con un padding solo de ese lado, para que deje ver la imagen perfectamente. Muy simple. y que se extienden por igual en altura (es decir, que si le doy color a cada columna por separado, veré dos columnas de igual altura, aunque sus contenidos no ocupen esta altura por completo). Esto es algo que es inherente a las celdas de tablas, pero no a los divs normales. Entramos en otro territorio mucho más subjetivo: el de la estética. Ramón: es que están totalmente PASADOS DE MODA esos diseños de rectángulos rígidos!!... Ya no se usa eso de que cada columna esté pintada de un color liso, o de un motivo repetido en mosaico. Es muy antiguo ese enfoque, precisamente porque fue tan fácil de hacer con tablas, y se usó hasta el hartazgo durante 15 años... Hoy día se prefieren diseños más libres de rectángulos, como el de cualquiera de los diseños que puedes encontrar en www.csszengarden.com En los diseños que allí ves, seguramente encontrarás muy pocas columnas rellenas de color uniforme, y en cambio encontrarás diseños como éste, IMPOSIBLE de hacer con tablas: http://csszengarden.com/?cssfile=/213/213.csspage=0 Resultado: DIV/CSS: 3 - Tablas: 0. Gol de Css Zen Garden! ;-) Por eso en tu layout, efectivamente, se cumple todo, salvo que cuando se aplican estilos a cada contenedor como colores de fondo, bordes, etc., aparecen los solapamientos entre las columnas. Es más o menos lo mismo que les pasa a otros layouts como los de Ruthsarian, ya que en realidad tú haces más o menos lo mismo. Como te decía, eso NO SE USA MAS hoy día. ¿Bordes a un rectángulo? Creo que no hay nada más duro en diseño que eso... Habiendo técnicas de reemplazo de texto por imagen, pudiendo colocar backgrounds sutiles en cualquiera de las zonas de una página... pero claro, ya estamos hablando de estética, que no es terreno tan objetivo como el código. No voy a discutirte en ese terreno: quédate con tus tablas anidadas para pintarlas de un color liso y con bordes, que eso es bien fácil. Yo, como tantos otros (y como la mayoría de clientes!), prefiero los diseños más modernos con CSS y sin rectángulos, que realmente son mucho más fáciles. De todos modos, quiero aclarar que no dudo de que dándole vueltas al tema se puedan crear columnas del 100% de altura, con anchos en ems combinados con porcentajes, y que cumplan todas las demás condiciones. Seguro que se puede, no lo dudes... Lo que digo es que para estas cosas me parece tan simple el diseño con tablas que parece mentira que haya que complicarse tanto la vida para acabar llegando a lo mismo. ¿Simple? ¿De veras que te parece más simple esa maraña de tablas anidadas que unos pocos DIVs con solo 7 declaraciones CSS, como tenía mi ejemplo? No puedo creerte. Tal vez (es solo una conjetura, no sé cómo codificas) solo estés pensando en tu propia facilidad de pulsar un botón en un editor VISUAL y crear la tabla. De veras, es que no te imagino codificando a mano los TR y TD de una tabla anidada y defendiendo la facilidad de eso! Entonces, claro, hablando de editores visuales, parecería que es más fácil tocar un botón de un asistente que codificar a mano los divs. Y digo parecería, porque, uses el modo de edición que uses, existen metodologías de diseño (o costumbres, como prefieras llamarlo) donde nunca se parte desde cero. Lo típico es tener esquemas prearmados de distinta cantidad de columnas, tanto el XHTML como el CSS (incluyendo la hoja de estilos de reseteo), entonces uno simplemente se pregunta: ¿qué tipo de diseño busco? ¿3 columnas?. Y copia los archivos XHTML y CSS de 3 columnas a una carpeta, y en 30 segundos ya tiene la base lista. ¿Qué es más simple entonces? Que cada uno saque sus propias conclusiones. Pero yo creo que el partido éste ya está terminado, y se definió para el lado de CSS por goleada... jaja! ;-) Me voy a dar una ducha a los vestuarios... Un saludo, Ramón!! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: 1. Te empeñas en decir diseño con tablas cuando estoy hablando en todo momento de tablas SIMULADAS CON DIVS (propiedades de CSS 2.1, que desgraciadamente IE6 no sabe interpretar). No se trata de DIVS/CSS vs TABLAS (es OBVIO que el CSS es más flexible que las tablas, no recuerdo haber dicho lo contrario), sino de DIVS flotados con paddings/margins para abrir huecos o DIVS de simulación de tablas. De acuerdo, he malentendido lo que proponías, y ya ni recordaba el inicio del hilo. Disculpa por haber olvidado ya tu propuesta original después de tantas idas y vueltas de concentrarme en dar una solución a tu desafío. Ahora que releo el inicio, fue con estas palabras tuyas: cita Ramón lo ideal sería poder combinar tamaños de contenedores, es por eso por lo que a veces un layout con tablas podría hacer cosas que no es posible hacer con CSS (salvo con propiedades CSS que simulen tablas, claro). Por ejemplo, yo daría algo por poder usar un esquema a 2 columnas donde: - El conjunto tenga un ancho del 100% - La parte izquierda tenga un ancho de 12em (por ejemplo) - La parte derecha tenga un ancho de (100% - 12.1em). Con tablas es trivial, sin ellas... /cita Ramón 3. Si tú quieres anidar tablas (cosa que yo no he hecho) para demostrar lo malas que son las tablas, allá tú, pero estás falseando la realidad a tu conveniencia, porque no hace falta anidar nada (podría decirte que estudies HTML, pero daré por hecho que sabes del tema, cosa que tú pareces no creer del resto de la humanidad) No me ofendas, Ramón. No he falseado nada. Yo creía sinceramente que defendías las tablas (reitero, estaba confundido), y en ese contexto, sí que hace falta anidar tablas para lograr columnas de distintos anchos a través de distintas filas. Y no precisas decirme que estudie más HTML para saber esa obviedad que tú también debes saber. Ahora, si cuando dices tablas, quieres decir CSS simulando tablas, entonces ten la precaución de hablar más claro, porque nadie te entenderá, tal como yo no te entendí. Con respecto a tus suposiciones sobre lo que creo o no creo sobre el resto de la humanidad, ¿tú eres el resto de la humanidad? Y yendo al caso, habiendo unos 6.000.000.000 de seres humanos que no saben HTML... seremos apenas un par de millones los que sabemos algo del tema, entre los cuales estamos tú, yo y (casi) todos los que estamos en esta lista. No creo que lleguemos al 0,0 y algo % de la humanidad... :-) de hecho, el código con tablas tiene prácticamente la misma estructura que con tus divs Salvo por el hecho de que se precisan tablas anidadas. ¿O es que cuando acabas de decir tablas, en realidad quieres decir CSS con display:table? Entonces disculpa, pero explícate mejor. 4. En tu layout HAY divs dentro de otros, como podrías haber comprobado fácilmente si te hubieras tomado la molestia de darles colores de fondo distintos. Verás cómo algunos de ellos se ven por debajo de los otros, y no adyacentes. Disculpa, pero ¿cuál es el problema de que haya unos DIVs dentro de otros? Es lo usual. Claro, hablo del código de esos DIVs. Lo que no hay es columnas dentro de columnas, eso no. Columnas, dentro de filas, y filas, dentro de contenedor general. ¿Cuál es el problema de eso? Es como se usan los DIVs. Hablo del código, y siempre hablé de él, reitero. Pero ahora que hablas de colorearlos, me doy cuenta de que no te estabas refiriendo al código, como yo, sino al resultado visual; ahí sí se entiende que te parezca que están dentro de otros, porque una columna 1 flotada al lado de otra columna 2 PARECE estar adentro, pero no está dentro de esa columna 2 (otra vez, en el código). En todo caso, se superponen, se solapan, se enciman, o como prefieras decirlo. Pero no por ello están dentro de la otra columna en el código. Y hablando de lo visual, nada impide decorarlas perfectamente. Faux-columns, por ejemplo. 3. No he entrado jamás (ni entraré) a valorar cuestiones estéticas, al parecer tú decides lo que está bien y lo que está mal Yo tampoco entré a valorar lo estético. No sé de dónde sacas que yo decida nada, justamente dije que era un tema subjetivo al que no quería entrar, y di mi opinión, tal como tú das la tuya libremente a continuación. Las modas son tan efímeras que no creo que nadie pueda asegurar que esto o lo otro no se usa más, a no ser que tenga tu clarividencia, Sigues ofendiendo. Si ibas a dar tu opinión sobre las modas, ¿por qué no te limitas a darla y punto, sin ofender? Comprendo que tú crees que sabes más que nadie y sientes la necesidad de demostrarlo, ¿Cómo lo sabes? ¿Me conoces? Creo que tienes mucha imaginación... Yo no sé más que nadie, soy un humilde aprendiz como todos, y aprendo cada día de esta lista y de otras, y de libros, y de artículos, y hasta de tus desafíos. Pasemos a otra cosa más productiva. Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: table id=fila1 tr td/td td/td /tr /table table id=fila2 tr td/td td/td td/td /tr /table ¡Sorpresa! No hace falta anidar tablas guiño Ah! Claro, y seguro que desde un primer momento cuando decías filas querías decir distintas tablas y no una sola. Por favor... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Venga, va, la última vez que explico el escenario: Ante todo, disculpa si no he sabido entenderte, y no te impacientes tanto, pero se me hizo muy cuesta arriba seguirte la idea de fondo: cuando te enfocabas en detalles secundarios, yo también intentaba solucionar esos detalles secundarios. Por favor, prueba a ver si esto resuelve tu acertijo :-) http://www.saberweb.com.ar/emsencolumnas/index.html He tomado la idea de un min-width en pixeles y un max-width en EM que aplicó Julián Landerreche en su propuesta (ver mensajes de anteayer en la lista). Y simplemente he desplazado las columnas cuyo ancho no es en EMs mediante un padding en EMs aplicado del lado de las columnas flotadas de su misma fila, a una distancia levemente superior a la del ancho de esas columnas. Entonces, si crecen las columnas en EMs, se desplaza el contenido de la columna cuyo ancho no es en EMs, dejando el lugar suficiente para que se muestren las columnas en EMs a medida que crecen. - Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de letra (hasta un 200%). Cumplido (y superado), soporta hasta 7 niveles de zoom de solo texto en Firefox (sabiendo que 6 niveles es el 200%), sin hacer scroll y sin superponer las columnas. - N columnas, con contenidos desconocidos (no necesariamente menús, puede ser cualquier tipo de contenido) Cumplido, y aunque solo puse ejemplos de 2 y 3 columnas por fila, puede continuarse la idea con más columnas flotadas cuyo ancho esté en EM. Ahora, si quisieras agregar más de una columna SIN ANCHO EN EM en la misma fila horizontal, entonces convendría usar un contenedor que divida la fila en paquetes, cada uno de los cuales contenga UNA sola columna libre de ancho en EM, y luego todas las demás flotadas con el ancho en EM que quieras, siempre que la libre tenga un padding levemente superior al ancho de las columnas en EMs que comparten su paquete contenedor, aplicado del mismo lado hacia el que éstas flotan. Pero a mi entender, crear más de 3 columnas teniendo como objetivo un usuario que verá esto a 6 niveles de zoom... no es una buena decisión de diseño, ya que cada columna será demasiado angosta, dificultando la lectura. - La altura de cada columna es indeterminable a priori (por ejemplo, los contenidos se leen de una b.d.) Cumplido, en la columna 2 de la fila 2 tienes un ejemplo de columna cuyo contenido es menor en altura al de la columna 1 de esa fila, si tienes el texto a tamaño normal. En cuanto lo amplías 4 o 5 veces, la primera fila supera el alto de la segunda, y nada se desarma. - Algunas de las columnas deben poder tener anchos en ems para que crezcan al aumentar la fuente (el objetivo de esta restricción es evitar que sus contenidos se solapen con otros contenedores al aumentar, cosa que puede ocurrir con los porcentajes o los pixels). Cumplido, en la fila 1, la columna 1 tiene ancho en EM, y en la fila 2, las columnas 2 y 3 tienen ancho en EM. - El resto de las columnas deberán ajustar su ancho al restante tras haber crecido las columnas en ems (se entenderá que estas columnas variables son aún suficientemente anchas con un 200% de aumento como para no producirse solapamientos). Cumplido, se ajustan al espacio restante, y a 200% no se producen solapamientos. - En caso de existir más contenidos bajo las columnas, estos deben desplazarse hacia abajo a medida que crece la altura de las columnas superiores (¡ojo!, puede darse el caso de que una columna que antes era menos alta pase a ser más alta al aumentar la fuente). Cumplido, la fila 2 se desplaza hacia abajo cuando aumenta la altura de la fila 1, y la fila 3 se desplaza hacia abajo cuando aumenta la altura de las filas 1 y/o 2. Si ahora miras mis ejemplos DIVS3 y TABLAS, verás que cumplen TODAS las condiciones impuestas. Con DIVS flotados yo no he sabido hacerlo, aunque repito que he visto algunos esquemas más o menos complejos que funcionan relativamente bien, pero que añaden gran cantidad de divs extra y a veces fallan. Bueno, este esquema no agrega gran cantidad de divs extra, solo uno por fila al igual que tu ejemplo DIVS3; no veo que falle; está hecho con flotados; y no veo que sea complejo. Así que creo que cumple TODAS las condiciones impuestas. Dime si descifré el acertijo... :-) Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: No sé cómo lo has probado tú... En mi Firefox3, con 2 niveles de zoom ya aparece un pequeño scroll. Con 6 niveles de zoom ya ni te cuento... Lo he probado usando Firefox 3.06, a 1024 x 768 y 1280 x 800px. Te he subido capturas de pantalla de cada nivel de zoom, tal como yo veo la pantalla, puedes verlas en: http://www.saberweb.com.ar/emsencolumnas/capturas/index.html Fíjate cómo tienes configurado el Firefox, Ramón, tal vez eso sea la causa de cómo ves las cosas. -Por favor, ¿alguien más en la lista nos puede decir cómo ve este esquema?: http://www.saberweb.com.ar/emsencolumnas/index.html Gracias! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Victor Hugo Arias Valencia escribió: -Por favor, ¿alguien más en la lista nos puede decir cómo ve este esquema?: Pues a 800x600 se ve chevere, a 1024x768 el menú ALTISIMO rebasa el borde inferior del contenido Mascotas y menos cortos. Cuando hago CTRL + en Chrome todo bien, en Firefox/3.0.7 al segundo CTRL + aparece un Scroll Horizontal. Gracias Víctor Hugo! ¿Lo estás probando con el zoom de Solo texto de Firefox? (ya que esa era la idea en este caso). Por si alguien quiere probarlo, esta forma de hacer zoom del Firefox, se activa entrando al menú Ver - Tamaño - Solo ampliar texto (debe verse el tilde como señal de que solo aumentará el texto). Me extraña mucho que con el mismo navegador haya resultados distintos... Ah! Está probado solo en Firefox (no he dedicado tiempo a hacer ajustes para otros navegadores, eso vendría después). -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Alberto García escribió: En Firefox 3.06 perfecto, tal como dice Hernán, y en Explorer 7 también pero con la opción aumentar texto, no el zoom. En Safari 4 el scroll horizontal aparece al tercer Ctrl++ y en Opera al 170%. Salud! Alberto García Muchas Gracias por probarlo, Alberto! Solo agrego que la idea era probarlo solamente en Firefox por ahora (los ajustes multi-navegador vendrían después). Me sigue dejando perplejo que usando el mismo navegador haya resultados distintos: tú y yo lo vemos de una manera, y Ramón y Víctor Hugo ven otra cosa... -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Hernan Javier Lopez escribió: Probado en Firefox 3.0.7 sobre Linux, si se aplica la version solo texto, lo veo tal cual lo ves vos, si lo destildo al 2 Ctrl++ empieza a aparecer el menu inferior, pero esto si configuro la ventana a 1024, si la agrando, por supuesto, va sobre ruedas de cualquier manera. La diferencia entre visualizaciones es por el tildado o no de solo texto. Gracias Hernán por probarlo. Claro, sería lo esperable que la diferencia sea por tildar o no el solo texto. Pero no quisiera creer que Ramón ha probado los esquemas haciendo zoom sin tildar el Solo ampliar texto... cuando él mismo ha puesto como condición que se pruebe en ese contexto! ¿Cómo lo ves ahora Ramón? ¿Ya lo consigues ver igual que los demás? -Repito el enlace del experimento por si alguien perdió el hilo: http://www.saberweb.com.ar/emsencolumnas/index.html -Y repito cuál era el objetivo: He tomado la idea de un min-width en pixeles y un max-width en EM que aplicó Julián Landerreche en su propuesta (ver mensajes de anteayer en la lista). Y simplemente he desplazado las columnas cuyo ancho no es en EMs mediante un padding en EMs aplicado del lado de las columnas flotadas de su misma fila, a una distancia levemente superior a la del ancho de esas columnas. Entonces, si crecen las columnas en EMs, se desplaza el contenido de la columna cuyo ancho no es en EMs, dejando el lugar suficiente para que se muestren las columnas en EMs a medida que crecen. - Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de letra (hasta un 200%). Cumplido (y superado), soporta hasta 7 niveles de zoom de solo texto en Firefox (sabiendo que 6 niveles es el 200%), sin hacer scroll y sin superponer las columnas. - N columnas, con contenidos desconocidos (no necesariamente menús, puede ser cualquier tipo de contenido) Cumplido, y aunque solo puse ejemplos de 2 y 3 columnas por fila, puede continuarse la idea con más columnas flotadas cuyo ancho esté en EM. Ahora, si quisieras agregar más de una columna SIN ANCHO EN EM en la misma fila horizontal, entonces convendría usar un contenedor que divida la fila en paquetes, cada uno de los cuales contenga UNA sola columna libre de ancho en EM, y luego todas las demás flotadas con el ancho en EM que quieras, siempre que la libre tenga un padding levemente superior al ancho de las columnas en EMs que comparten su paquete contenedor, aplicado del mismo lado hacia el que éstas flotan. Pero a mi entender, crear más de 3 columnas teniendo como objetivo un usuario que verá esto a 6 niveles de zoom... no es una buena decisión de diseño, ya que cada columna será demasiado angosta, dificultando la lectura. - La altura de cada columna es indeterminable a priori (por ejemplo, los contenidos se leen de una b.d.) Cumplido, en la columna 2 de la fila 2 tienes un ejemplo de columna cuyo contenido es menor en altura al de la columna 1 de esa fila, si tienes el texto a tamaño normal. En cuanto lo amplías 4 o 5 veces, la primera fila supera el alto de la segunda, y nada se desarma. - Algunas de las columnas deben poder tener anchos en ems para que crezcan al aumentar la fuente (el objetivo de esta restricción es evitar que sus contenidos se solapen con otros contenedores al aumentar, cosa que puede ocurrir con los porcentajes o los pixels). Cumplido, en la fila 1, la columna 1 tiene ancho en EM, y en la fila 2, las columnas 2 y 3 tienen ancho en EM. - El resto de las columnas deberán ajustar su ancho al restante tras haber crecido las columnas en ems (se entenderá que estas columnas variables son aún suficientemente anchas con un 200% de aumento como para no producirse solapamientos). Cumplido, se ajustan al espacio restante, y a 200% no se producen solapamientos. - En caso de existir más contenidos bajo las columnas, estos deben desplazarse hacia abajo a medida que crece la altura de las columnas superiores (¡ojo!, puede darse el caso de que una columna que antes era menos alta pase a ser más alta al aumentar la fuente). Cumplido, la fila 2 se desplaza hacia abajo cuando aumenta la altura de la fila 1, y la fila 3 se desplaza hacia abajo cuando aumenta la altura de las filas 1 y/o 2. Si ahora miras mis ejemplos DIVS3 y TABLAS, verás que cumplen TODAS las condiciones impuestas. Con DIVS flotados yo no he sabido hacerlo, aunque repito que he visto algunos esquemas más o menos complejos que funcionan relativamente bien, pero que añaden gran cantidad de divs extra y a veces fallan. Bueno, este esquema no agrega gran cantidad de divs extra, solo uno por fila al igual que tu ejemplo DIVS3; no veo que falle; está hecho con flotados; y no veo que sea complejo. Así que creo que cumple TODAS las condiciones impuestas. Dime si descifré el acertijo... :-) Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió:
http://www.ramoncorominas.com/ovillo/2col/
Ay Ramón, Ramón... jajaja! No me has dicho concretamente lo que yo te
preguntaba, pero voy a aprovechar tus ejemplos para mostrarte una
solución definitiva a tus tres desafíos. :)
La solución es muy simple, a cualquiera de tus 3 diseños, ponle
solamente estas reglas de estilo:
#menu {
position:absolute;
width:4em;
left:0;
}
#contenido {
margin-left:4em;
}
Puedes aumentar el zoom de Firefox al MAXIMO que no se desarma, a
cualquier resolución.
El menú está posicionado de manera absolute, y el contenido de forma
static, aplicándole un margin-left en EM del mismo ancho que el del
menú, y santo remedio!!
Aclaro que no es un mérito mío, es como se hacen la mayoría de los
layouts hace años...
Me debes una... ;)
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Ay, Hernán, siempre te quedas en lo simple... Ay, ay, ay, Ramón!... Y tú que complicas lo que de veras ES simple... jaja! La solución: http://www.saberweb.com.ar/prueba/divs4.htm Te sugiero estudiar a fondo el posicionamiento CSS. Existen 4 tipos de posicionamiento: static, absolute, relative y fixed. La noticia de ayer es que se pueden combinar entre sí, según la necesidad concreta que tengas. Que yo haya puesto un ejemplo tan simplón no quiere decir que ese sea el layout normal que uno se va a encontrar o que puede desear. Si me sirviera el posicionamiento absoluto no haría falta tanta complicación, obviamente, pero no sirve. Por supuesto que SI sirve, dentro de contenedores relative. Me explico: Imagina que debajo del menú y de los contenidos quiero otro contenido que se expanda a las dos columnas (o a las 3, 4 o X que quiera poner, así de chulo soy). Entonces, al menu y el contenido que tenías hasta ahora, los envuelves en un div contenedor (ya lo tienes en tu marcado, es ese div al que le has colocado el class=row). Tienes tu primera fila horizontal. Si debajo quieres otro contenido que se expanda las 2, 3 o 4 columnas, que así de chulo eres, jaja!... simplemente pones otro div class=row que haga de contenedor de esa segunda fila, y verás que se queda quietecito debajo de manú y contenido, a lo ancho de la pantalla. Si ese div es relative, dentro de esa segunda fila creada puedes poner nuevamente otros divs absolutos como el menu, tanto a izquierda como a derecha. Solo cambias left:0 por rigth:0 y se acomodarán a ambos lados. Imagina también que cualquiera de las columnas, pueden tener distintas alturas, unas más altas que otras, y que cualesquiera que sean esas alturas, el contenido inferior siempre debe quedar por debajo de la columna más alta, que empujará hacia abajo ese contenido. Ya está hecho, cada div class=row que agregues hará eso, bajará hasta debajo de la columna más alta de su div class=row (fila) anterior. Ahora mira a ver cómo haces eso con posicionamiento absoluto. Míralo tú, lo hice partiendo de tu propio código: 2 columnas, 3 columnas, y pie de una sola columna: http://www.saberweb.com.ar/prueba/divs4.htm -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Ay, ay, ay, ay, ay, Hernán... Y tú que sigues simplificando, y sin leer lo que escribo, o no queriendo entenderlo... La solución: http://www.saberweb.com.ar/prueba/divs4.htm Sobre esa misma página, simplemente añade 8 opciones más a #menu2 y #menu2b, y quita uno de los p del #contenido2. Ahora observa lo bonitos que quedan tus saludos al pie solapándose con el menú... Va a ser que no funciona del todo bien. Si sabes que existe esa LIMITACION dada por la cantidad de opciones del menú, pues entonces tendrás la precaución de usar este esquema solo en sitios donde el menú es lo suficientemente breve. Además, si el menú es más largo que los contenidos, sospecho que debe haber algún problema de arquitectura de la información al armar ese menú, yo veo en la mayoría de sitios menúes más cortos que el contenido... Para cada problema hay que buscar la solución apropiada, no hay una sola solución universal. Mira Ramón, lamento que te molestes, pero yo solo tomé tus propios ejemplos donde tú decidiste usar posicionamiento absoluto. Un par de mensajes atrás hablábamos de cajas static flotadas con anchos en porcentajes, y no me respondiste cuáles anchos de columnas preferías. Cambiaste de ejemplos de pronto, sin responder las preguntas concretas que te hacía. En el mensaje anterior tú mismo pusiste estos ejemplos absolutos, y por eso los tomé como base. Si cambias el escenario en cada mensaje, no hay forma de terminar un diálogo productivo. Yo te sugiero que uses flotados dentro de contenedores, y aplícale overflow:auto a esos contenedores. Anchos de cajas en porcentajes y textos en EM. No hay nada mejor. Puedes tener menúes cortos, largos, medianos, lo que quieras... Funciona. Ni siquiera el W3C exige que el diseño líquido o elástico se sostenga más allá de un 200% de zoom. Para eso existen los magnificadores de pantalla. Cada cosa con su solución apropiada. Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Retomo el hilo, tratando de cerrar el tema original:
Ramón Corominas escribió:
http://www.ramoncorominas.com/ovillo/2col/
- DIVS1: Con porcentajes, al ampliar las fuentes más allá de un
determinado tamaño, los contenedores se me comen el contenido.
Te invito a seguir un proceso de diseño lógico, partiendo de las
LIMITACIONES REALES, y no de unas arbitrarias medidas deseadas.
Si el cliente te da un menú como ése, y tú ves que el texto Hamsters
(que es el más largo que te ha dado) se te sale afuera, ¿por
qué no lo tomas en cuenta? Deberías hacerlo...
No es el diseño CSS el que debe ser adaptable, ES UNO MISMO el que
debe adaptar sus técnicas a cada proyecto, y manejar soluciones
apropiadas para distintos casos, sin buscar una solución única y
uniforme, igual para todos los casos.
Por ejemplo, aplica el MAXIMO de zoom del Firefox (aunque sea muchísimo
más del 200% recomendado por el W3C) y mira qué tanto se asoma la
palabra Hamsters.
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Probado a 800x600, 1024x768 y 1280x800.
Eso sí, me adelanto: si lo reduces a un extremo sumamente exagerado
claro que tendrá sus problemas. Pero la enorme mayoría de usuarios que
precisa hacer 500% de zoom creo que usa pantallas con resoluciones de
más de 800 x 600, no más chicas que eso. Además, para resoluciones
menores existe media:handheld.
Desde ya, a un zoom normal, el menú se verá bastante holgado, pero la
perfección absoluta no es una característica humana ni del diseño web
líquido o elástico... no debes pretender que el contenido se vea
exactamente igual en todos los tamaños, es imposible eso, ya sea con CSS
o con tablas.
- DIVS2: Mezclando ems y porcentajes con divs flotados, en cuanto el
menú crece un poco el segundo div se cae (no se me ocurre ninguna manera
de hacer que se encoja).
No tiene sentido plantear un layout con esa combinación. Es mezclar agua
y aceite. No perdamos tiempo.
- DIVS3/TABLAS: Con divs simulando tablas mediante propiedades de CSS,
obtengo lo que quiero, quedando exactamente igual que si utilizo una
maquetación con tablas reales. Desgraciadamente, esas propiedades no
funcionan bien con IE, por lo que la única opción cross-browser sería
maquetar con tablas de verdad
NO, no sería la única solución maquetar con tablas.
Una solución cross-browser sería que uses la simulación de tablas para
todos los navegadores, y agregues comentarios condicionales solo para
Explorer, que agreguen el código necesario para que se vea el contenido
(no dije idénticamente, solo que se vea) y para ese navegador puedes
usar porcentajes como en tu ejemplo 1. ¿Más trabajo? Sí. Pero
funciona. Sin tablas.
Sí, soy consciente de que esas medidas pueden ser casos extremos
Sí que son extremos! Has llevado el zoom de Firefox a su máximo posible.
No hay sitio que aguante a ese nivel, y por eso el W3C fija en 200% el
zoom máximo sin que se desarmen las cajas.
pero
no veo la razón para no querer que algunos de los contenedores crezcan
acorde con la fuente y que a la vez otros se adapten al espacio que
quede. Para mí es algo realmente útil.
Por más que a ti te guste o te sea muy útil, que lo comprendo, no es un
objetivo excluyente para hacer un buen sitio web al que incluso tú
puedas acceder con comodidad. El objetivo de una web es que se acceda a
los contenidos, si eso se cumple, la solución empleada es válida.
Pero de todos modos, el requerimiento de que los contenedores crezcan se
satisface con porcentajes (caso 1). No creo que debas seguir perdiendo
el tiempo intentando mezclar ems y porcentajes para lograr que los
contenedores crezcan.
Nota: he visto algún diseño con CSS a dos (y tres) columnas que usa una
técnica a través de márgenes en ems para hacer algo parecido a esto,
pero no termina de funcionarme bien del todo, es una pena.
Por favor! Compártenos el código al punto en que lo tengas, que
trataremos de hacerlo funcionar entre todos... :-)
Tú mismo has dicho unos mensajes atrás que estamos en una lista para
aprender los unos de los otros, si te guardas el código tal vez nos
estás privando a todos de llegar a una solución algo mejor que las
limitadas soluciones conocidas hasta ahora.
Saludos,
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió:
Tengo curiosidad... ¿Qué entiendes tú por 200%? Tal y como está ese
menú, para llegar a aumentar su tamaño de letra en un 200% necesitas
pulsar 6 veces la tecla Ctrl + (al menos eso necesito yo). El máximo
zoom de FF3 son 8 pulsaciones de esa tecla. Yo entiendo que 200% es que
la letra mida el doble de lo que medía originalmente, ¿tú qué es lo que
entiendes?
Entiendo eso mismo, es claro.
Pero los últimos 2 Control + ellos solos producen un aumento de 100%
extra (contado sobre el valor inicial).
Es decir, con los primeros 6 llegas al 200%, con los 8 posibles niveles
llegas aproximadamente al 300% del tamaño original (al menos eso medí a
ojo con la extensión MeasureIt de Firefox). Así que al menos con
Firefox, el máximo posible es un 300% (bastante por encima del 200%
mencionado por el W3C).
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Sí, se elimina mi problema y se eliminan las medidas del diseño
original... Ya le puedo decir al diseñador: oye, que dice Hernán que
en lugar de poner 7% ponemos 18%, que así ya no da problemas.
(te respondo abajo)
[3] Mark #2, de Douglas Livingstone
http://www.redmelon.net/tstme/3cols2
Fíjate cómo en este ejemplo al llegar a unos 5 control + en Firefox,
las palabras de la columna derecha se salen fuera de pantalla.
¿Qué debería hacer un diseñador ante este dato de la realidad?: yo creo
que ensanchar algo más esa columna...
Entonces, volvemos a la idea de que el proceso de diseño DEBE tener en
cuenta los CONTENIDOS, no puede consistir en una inspiración repentina
y rígida de un diseñador que no sabe las consecuencias posteriores al
pasar a XHTML y CSS sus diseños. Algo de eso hemos hablado ayer en otro
hilo...
No sirve un diseño descontextualizado de sus contenidos, y de las
limitaciones del HTML/CSS.
Si voy a crear el menú para una empresa de tuercas que colocará en su
menú vertical nombres como: Tuerca XZF-34678b opción JX34 tendré que
rechazar un diseño de un diseñador que se empeñe en sostener que ese
menú debe medir 50px de ancho... el diseño depende del contenido
muchas veces. Es un límite a tener en cuenta.
[2] Skidoo Too, de Ruthsarian
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/two_columns_left.html
En el último nivel de zoom del Firefox, me produce scroll horizontal (en
1280 x 800px). Pero voy a estudiarlo con tiempo, parece muy interesante.
Gracias por compartir los enlaces.
Saludos!
--
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Pablo Suárez León escribió: Si defines el texto en ems y los contenedores en píxeles (por ejemplo) al aumentar el tamaño del texto, éste aumentará pero no sus contenedores, llegando un momento que los contenedores se comerán, literalmente, su contenido. No es tan así. Convengamos en que eso solo sucederá si además de ancho le pones un height a los contenedores, práctica para nada aconsejable. Pero si no pones ningún height, dejando fluir el alto del contenedor para que se ajuste a su contenido, ningún contenedor se comerá al texto. Por lo cual, no es tan mala la solución de combinar contenedores en pixeles y textos en EM (claro, habría que disponer de un CSS para media=handheld para que no queden unas columnas inusables en pantallas pequeñas). Otra cosa, es usar porcentajes en las cajas, en lugar de píxeles (por ejemplo)... Coincido en que ésa es una de las mejores combinaciones posibles. Los anchos de las cajas en porcentajes, y el texto en EM. Sin height en las cajas, por supuesto. Permite ampliar el texto para quien lo necesite, y no se supera nunca el ancho de pantalla (no hay scroll horizontal). Según las WCAG 2.0 recién salidas del horno, el texto debe poder ampliarse solo un 200% sin romper el diseño, no más. Es bastante más de lo que necesita un miope como yo... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Los usuarios que realmente necesitan ampliar el tamaño de letra a veces lo amplían mucho más de lo que los diseñadores creen, y pasa lo que pasa: solapamientos, desapariciones de letras y demás cosas raras. Pablo Suárez León escribió: si el ancho del contenedor está limitado en px y aumentas el texto llega un momento en que una sola palabra puede ser mas ancha que el contenedor. Yo no estoy de acuerdo en llevar los ejemplos al extremo (y soy de los que hacen control + en TODAS las páginas wbe, debido a mi miopía). Creo que nadie podría navegar sin un magnificador de pantalla si necesita un nivel tan enorme de zoom. Y al parecer es lo que han entendido en el W3C. No encuentro ahora mismo la referencia, pero según las nuevas WCAG 2.0, solo es necesario cuidar que el usuario pueda hacer hasta un 200% de zoom (si alguien tiene la referencia, por favor, se agradecerá que la comparta). Es un margen prudente, que depende de nuestra precaución y habilidad como diseñadores. Si vas a hacer una lista de largas URLS en una columna de 50px de ancho... bueno, pues como que no habrá ninguna solución para tan mala decisión. Pero si creas contenedores de al menos el doble de ancho de tu palabra más larga, asunto solucionado. Si el usuario es tan miope que necesita más del 200% de zoom, seguramente ya estará usando un magnificador de pantalla, y no precisará más del 200% mediante el zoom del navegador. Creo que es un buen punto para plantear en la lista de Accesibilidad del Sidar, AccesoWeb [1]. [1] http://es.groups.yahoo.com/group/accesoweb/ Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Pablo Suárez León escribió: Las técnicas de suficiencia en este punto [1] nos dicen en el punto 2 que nos aseguremos de que tanto texto como contenedores se puedan redimensionar Gracias Pablo por la referencia! Dice que los contenedores se puedan redimensionar. Entonces acepto que no podemos usar píxeles para cajas. Nunca más. Pero podemos seguir usando porcentajes, que creo es la mejor solución. Los diseños líquidos son mencionados explícitamente en la misma referencia, en el punto: http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G146 el segundo enlace bajo el título: Techniques for text container resizing. y en el punto 4 que en el caso de que el texto redimensione y los contenedores no, nos aseguremos de que no se pierde contenido ni funcionalidad. [1] http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale Eso implícitamente acepta que podría ser que los contenedores no se redimensionen (que es lo que sucede con los diseños líquidos, en porcentajes, que solo se adaptan hasta el ancho de la ventana, no hacen scroll horizontal, y no tienen relación con el zoom). Entonces, si el diseñador contempló que hasta un 200% de zoom el texto no desborde de su contenedor en porcentajes, entonces se cumple la pauta, porque: 1) el contenido no se pierde, 2) ni la funcionalidad tampoco. Es algo que debe controlar el diseñador al tomar la decisión de qué ancho aplicará a una caja. Y aprovecho para responder a Ramón: ¿Seguro que no te sería útil un magnificador si precisas un 400% de zoom en todas las páginas? Es que creo que es imposible hacer un diseño a 2 columnas (ni soñar con 3!) que permita un 400% de zoom sin desbordar!... Por ejemplo, típico sitio de dos columnas, menú vertical a la izquierda, tenemos la palabra contáctenos en un cuerpo de 1em (lo que se traduce en unos 16px en la mayoría de navegadores), y esa palabra ocupará unos 100px de ancho en ese escenario. ¿Debo hacer esa columna de 400px de ancho como mínimo, solo por si acaso le haces un zoom del 400%? ¿Y cómo garantizo eso si el ancho de las cajas debe ser especificado en porcentajes? ¿Y qué hacemos con los huecos de 300px que quedarán solo por si acaso? Creo que no hay diseño que aguante eso... ¿tienes una solución, Ramón? ¿Algún sitio que al 400% de zoom no se desborde NADA, pero NADA de veras? Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ignacio Ricci escribió: Perdón pero no entiendo. Tenes una caja de ancho no se, 8em. Con un parrafo adentro.Y tenes que hacer un sitio para una resolución de 800 x 600. Y empezas a hacer ctrl+ Podés controlar que el contenido no se exceda esa resolución sin hacer un contenedor en pixels? Sí, haciendo un contenedor en porcentaje al 100%. -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: en ocasiones aumento el texto hasta un 400%, más o menos. Pero no porque me haga falta siempre ese aumento, sino más bien porque la medida 200% no quiere decir nada, en realidad, y no se aplica por igual a todas las partes de la página. Por ejemplo, si el diseñador usa (como a veces pasa) un tamaño de letra de unos 8-10px, Otra vez los extremos... Es que pensar en esos extremos erróneos no era la meta, venimos buscando la solución ideal y creo que es clarísima a estas alturas: -Contenedores en porcentajes -Textos en em. Si el texto está BIEN estructurado en em, partiendo de 1em como mínimo (unidad que tú mismo, Ramón, decides qué tan grande es, ya que eres el usuario y tienes el control), entonces podrás hacerles un 400% de zoom al texto o más, y los contenedores no excederán el ancho de tu pantalla. ¿No es ésta la solución ideal? -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Martin Etxauri escribió: Hace tiempo que estoy cada vez mas convencido (aunque no lo acabo de llevar del todo a la práctica, unos bocetos previos son un poco ineludibles) que la mejor manera de diseñar una web es directamente en html, pasando de diseñar primero en photoshop/illustrator/freehand/ gimp/etc al fin y al cabo ese es el medio en el que acabará. Resulta un poco como hacer un vestido en cerámica y luego pretender que en tela quede igual, pues no, la tela cae y se mueve, podrás hacer bocetos aproximativos del vestido a lápiz, y luego unos bocetos de patrón recortados en papel para calcular tamaños, pero una vez llegado a la tela, según quien se ponga el vestido quedará una cosa u otra. Me encantó la metáfora!! De veras que los diseñadores (sobre todo quienes vienen de gráfica) usando el Photoshop y otros similares a veces crean diseños tan duros como si fueran hechos de cerámica, jaja! Pero igual creo que es necesario partir de bocetos en imagen (algo imprescindible para que un cliente te apruebe un diseño!), y luego llevarlos a XHTML y CSS, siempre y cuando tengamos presente desde un principio la elasticidad o liquidez del diseño. Pero para esto, el diseñador que hizo el boceto en Photoshop DEBE CONOCER lo suficiente de CSS y XHTML como para no hacer diseños que luego sea imposible trasladar a código... si no lo sabe (o si no hay nadie que lo corrija a tiempo), se corre el riesgo de que el cliente apruebe cosas que después no hay otro modo de implementarlas que usando anchos fijos... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ¿Bocetos en imagen o en HTML/CSS? ( era: Trabajar con EMs)
Jorge L. Batista E escribió: Si es producto final es Web al cliente hay que mostrarle Web. Los bocetos, maquetas o como lo llamen TIENEN que ser HTML+CSS No estoy para nada de acuerdo. En la mayoría de los casos, es avanzar demasiado antes de tener el OK del cliente. ¿Programas un sitio entero solo a ver si le gusta, y si no le gusta, empiezas de nuevo? Mal negocio... 1) Mejor empezar con wireframes (bocetos) sumamente abstractos, en blanco y negro, con esquemas de las principales pantallas. 2) Cuando te aprobó esos esquemas, encargas las pantallas decoradas en Photoshop (imágenes en colores). 3) Cuando te aprobó las pantallas, las pasas a XHTML/CSS. Y solo allí haces los ajustes de detalles menores. Creo que es más lógico. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Julián Landerreche escribió: 1) para tu caja contenedora (aka wrapper, container, contenedor, etc) definí un min-width en píxeles (760px, por ejemplo) 2) y un max-width en ems (ej: 80em) 4) obviamente, definís tu font en el body en ems, o en porcentajes creo que también resulta. Me parece una excelente solución, Julián! De hecho, todavía estoy buscando si tiene alguna contraindicación, y no se la encuentro. Encontraste el santo grial!! jaja!!... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ¿Bocetos en imagen o en HTML/CSS? ( era: Trabajar con EMs)
Estudio Creativo Bynet escribió: Tal mente de acuerdo con el procedimiento de Jorge. No sería el primer proyecto que por pecar de profesional o de bueno, terminas comiendotelo con patatas y eso si.. luego echales un galgo para que te pagen... se han disfrazado de camaleones y se han subido a un arbol. ;-) No entendí bien: ¿crees que al hacer trabajar varios días a tus diseñadores y maquetadores HTML y CSS y mostrarle todo el HTML ya decorado al cliente de un golpe, no corres el riesgo de comerte con patatas todo ese tiempo invertido en el desarrollo? Salvo que el cliente te haya firmado un cheque en blanco, pero los clientes reales no suelen ser tan ingenuos... Si justamente para eso existen los prototipos, para ir logrando acuerdos parciales de tu cliente. Sin esos acuerdos, sí que corres riesgos... ¿Quisiste decir que estabas de acuerdo con Jorge? ¿O conmigo? Me resulta contradictorio tu comentario. Explícamelo por favor! jaja! :-) Un saludo! -- Hernán Beati http://www.saberweb.com.ar Alez jacta est Juan José - Original Message - From: Hernán Beati - SaberWeb.com.ar her...@saberweb.com.ar To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Thursday, March 05, 2009 3:35 PM Subject: Re: [Ovillo] ¿Bocetos en imagen o en HTML/CSS? (era: Trabajar con EMs) Jorge L. Batista E escribió: Si es producto final es Web al cliente hay que mostrarle Web. Los bocetos, maquetas o como lo llamen TIENEN que ser HTML+CSS No estoy para nada de acuerdo. En la mayoría de los casos, es avanzar demasiado antes de tener el OK del cliente. ¿Programas un sitio entero solo a ver si le gusta, y si no le gusta, empiezas de nuevo? Mal negocio... 1) Mejor empezar con wireframes (bocetos) sumamente abstractos, en blanco y negro, con esquemas de las principales pantallas. 2) Cuando te aprobó esos esquemas, encargas las pantallas decoradas en Photoshop (imágenes en colores). 3) Cuando te aprobó las pantallas, las pasas a XHTML/CSS. Y solo allí haces los ajustes de detalles menores. Creo que es más lógico. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ¿Bocetos en imagen o en HTML/CSS? ( era: Trabajar con EMs)
Jorge L. Batista E escribió: El 05/03/2009, a las 09:35 AM, Hernán Beati - SaberWeb.com.ar escribió: ¿Programas un sitio entero solo a ver si le gusta, y si no le gusta, empiezas de nuevo? Claro que no, maqueta es maqueta no va mas allá del marcado... HTML +CSS El HTML solo no creo que tenga sentido mostrarlo al cliente. Y ya agregarle CSS al HTML me parece demasiado para una primera etapa (porque implica que un diseñador te haya armado el diseño en Photoshop y recortes las imágenes decorativas para ponerlas vía CSS). Salvo que le muestres un molde de columnas acomodadas, sin más que colores y SIN imágenes de fondo, estilo prototipo, pero no sé si el cliente valorará eso, o si se podrá imaginar su sitio en base a eso. y funcionalidades básicas. Aquí nos ha dado buen resultado sobre todo porque hay cosas que el cliente común es incapaz de ver en una imagen estática por mucho que se lo expliques y ni aún así puedes garantizar que se lleve la idea correcta. Ah, pero entonces estás hablando solo de esas cosas que no se pueden ver en imagen, de funcionalidades, como Lightbox y esas cosas. Yo en esos casos, le muestro OTRO sitio ya diseñado que implemente el mismo efecto. En lo que a esfuerzo se refiere, te aseguro que cuando tienes cierta experiencia es igual de sencillo y mucho más productivo escribir etiquetas que manejar una herramienta de diseño como Photoshop o similares. Pero, a ver si entiendo... ¿NO usas el Photoshop en absoluto? ¿Le muestras HTML y CSS con funcionalidades sin una sola imagen decorativa? Entonces, es lo mismo que mostrar un prototipo en papel... Yo creo que el armar un boceto en imagen es previo a codificar, y más si a la pregunta anterior me respondieses que le muestras el HTML CON imágenes decorativas: tu diseñador gráfico ya ha tenido que hacer el boceto en Photoshop, entonces, ¿por qué no pedir la aprobación del cliente en ese paso, ANTES de maquetar esa imagen con HTML y CSS? Yo también creo que FINALMENTE el cliente terminará viendo su HTML y CSS, pero no como PRIMER entregable del proceso de diseño, sino como ULTIMO paso. De todas formas nada es absoluto, cada cual puede tener su método y le habrá dado mejores o peores resultados, yo sólo comparto el que hemos adoptado aquí y créeme que es el resultado de una evolución. También depende mucho del cliente. Seguro, cada cual tiene su metodología. Y dependerá del tipo de sitio entonces: seguramente para Flash y cosas con mucha interactividad, deberás incluir algún ejemplo de lo que propones, pero para eso creo que es preferible mostrar otros casos que implementen similar tecnología, y no hacerlas desde cero. Para sitios HTML y CSS sin muchas funcionalidades extra, me cuesta ver la ventaja. Por si acaso aclaro que digo esto, pensando en voz alta sobre qué haría yo si aplicara esa metodología, a ver si la encuentro interesante para implementarla, en ningún caso digo que sea mala, cada cual sabe lo que le funciona. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Hernán Beati escribió: Si el texto está BIEN estructurado en em, partiendo de 1em como mínimo (unidad que tú mismo, Ramón, decides qué tan grande es, ya que eres el usuario y tienes el control) Eso es una interesante teoría... En la gran mayoría de sitios web ...Stop. Estoy tratando de encontrar una solución, Ramón, no quiero criticar más lo mal hecho, estoy tratando de ver cómo deberíamos HACERLO BIEN. Por ahora, a falta de algo mejor, me quedo con los contenedores en porcentaje y las fuentes en em. Nadie (ni tú) ofrece otra solución mejor (salvo lo que aportó Julián hace unas horas, que me gustó mucho pero todavía debo estudiarlo con mayor detenimiento). yo daría algo por poder usar un esquema a 2 columnas donde: - El conjunto tenga un ancho del 100% - La parte izquierda tenga un ancho de 12em (por ejemplo) - La parte derecha tenga un ancho de (100% - 12.1em). ¿Y por qué no habría de servirte un sitio con las dos columnas en porcentajes, con 20% / 80% para las dos columnas, por decir una proporción cualquiera? ¿Cuál sería tu problema con ese diseño? Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ¿Bocetos en imagen o en HTML/CSS? ( era: Trabajar con EMs)
Martin Etxauri escribió: Siguiendo con las metaforas :) a veces es como pintar con acuarelas intentando tener un acabado de pintura al oleo, pues no porque por muy bueno que seas y por mucho arte que tengas una cosa es una cosa y otra es otra. Pero es que si debo bocetar, prefiero esquematizar primero la idea con lápiz, en segundo término con acuarelas, que son baratas y rápidas de implementar. Y solo una vez que el cliente haya aprobado el boceto, allí sí le hacemos el óleo con todos los detalles finales (son caros los óleos!). Habría que preguntarle a Miguel Angel si las metodologías de diseño centrado en el usuario sirven para artistas (que no lo creo!!) :) Para mi y mi realidad un buen proceso que no siempre sigo es, preparar unos wireframes para enseñar y hacerte tu a la idea, esbozar en illustrator/photoshop la cabecera, sobre todo si va a llevar algún montaje un poco especial y después diseñar la parte de contenido en directamente en html y conforme voy necesitando imágenes me las preparo en photoshop y las meto en el html/CSS. Eso si, en el proceso de diseño que se vea bien en firefox, después ya cuando me ponga mas a montar todo ya me encargaré de hacerlo crossbrowser. Finalmente, coincido 100% con tu proceso (y a veces, yo tampoco lo sigo, jaja!) Wireframes - Photoshop - HTML/CSS. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ¿Bocetos en imagen o en HTML/CSS? ( era: Trabajar con EMs)
Martin Etxauri escribió: Pero es que si debo bocetar, prefiero esquematizar primero la idea con lápiz, en segundo término con acuarelas, que son baratas y rápidas de implementar. Y solo una vez que el cliente haya aprobado el boceto, allí sí le hacemos el óleo con todos los detalles finales (son caros los óleos!). jejeje le has dado la vuelta a la metáfora y tienes razón eso si, el problema está en explicarle al cliente que esto que ve con textura de acuarelas va a ser tipo óleo y si luego te pide esas transparencias de acuarela en el óleo vas a sudar para que te queden igual :D Solo por eso es que no pinto cuadros y me quedo con el XHTML y CSS, que si no... jaja! :) Un abrazo! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: El porcentaje no me resuelve nada, porque el 10% de 800px siempre son 80px, una medida que no cambiará al aumentar la letra. Sí, 10% del algo es muy poco de ese algo, ¿qué tal 50%? ¿40 y 60%? ¿30 y 70%? ¿Y por qué no habría de servirte un sitio con las dos columnas en porcentajes, con 20% / 80% para las dos columnas, por decir una proporción cualquiera? ¿Cuál sería tu problema con ese diseño? Por lo que ya he comentado más arriba, el 10% de 800px son 80px SIEMPRE. ¿Quién defiende el DIEZ por ciento? Yo no. Dije 20/80%. Pero pongamos 30/70, o 60/40. Díme tú cuánto quieres y te lo hago, hombre! Quiero ese número que te dejaría contento!... Mi menú lateral estará confinado a 80px fijos que no darán para mucho si la fuente crece. Sin embargo, si son 12em, por ejemplo, el menú izquierdo aumentará de ancho, y la parte derecha se contraerá a la vez. Llegará un punto donde la parte derecha se encoja mucho, pero en general el resultado será aceptable hasta escalas muy grandes. ¿Qué porcentaje concreto te parecería aceptable para que yo maquete una web en porcentajes a DOS columnas? Columna 1:% Columna 2: ¿Y qué porcentaje para una a TRES columnas? Columna 1:% Columna 2: Columna 3: Si me respondes concretamente eso, habré aprendido algo de una persona con mayores dificultades visuales que las mías, y aplicaré lo aprendido en mis futuros sitios. Muchas gracias. Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Imprimir tabla
Hugo López escribió: cada página tiene que tener su respectiva cabecera (el nombre de la empresa, el número de página y los headings de las columnas). Te sugiero investigar page-break-inside y cortar cada X filas tu tabla al generarla mediante lenguajes de servidor, intercalando un div que tenga aplicado ese page-break que fuerce a la impresora a comenzar una nueva página. Y que ese div contenga tu cabecera completa. A ese div, en la hoja normal, le pones display:none para esconderlo, y en la hoja para impresora, lo haces visible. Si funciona, nos cuentas... Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Formulario con javascript
Felix Manuel Fernandez Chamorro escribió: Hombre que tampoco estoy pidien la obra del Escorial ni que me hagan un sitio compleo en php que es un simple formulario con 4 apartados. Disculpa que me sienta tocado por esta frase, pero ¡qué parecido a lo que dicen algunos clientes!: Oye, agrégame éste y otro detalle, si total es una tontería que hasta la hace mi sobrino!... Me gustaría saber cuánto has entendido del código PHP de la tontería que te pasé, ese simple formulario con 4 apartados que me he tomado el trabajo de copiarte. Estimo que poco o nada. Ahora, piensa que eso solo era un boceto de lo que un buen programador debería hacerte, ya que le faltan las validaciones y mensajes apropiados, más otras validaciones del lado del cliente con JavaScript. Considera que no todo programador será tan hácil de hacerlo bien, y que puede dejar en riesgo tu sitio. Supongamos que hablamos de 3 o 4 horas de buen trabajo de alguien que pasó años programando correctamente. ¿Simple formulario? jaja! El unico problema es que me corre algo de prisa sino ya me leeria lo que hiciese falta o ya veria como lo solucionaria. Si eres diseñador y nunca programaste, te va a llevar un buen tiempo aprender a programar, varios meses sin duda. Debes evaluar si te interesa, y si llegarías a ser bueno en eso, y en ese caso invertir tiempo y dinero en un buen curso. De lo contrario, te conviene seguir siendo solo un diseñador, y tercerizar toda la programación. No es fácil programar, hay que acabar con ese mito de una buena vez, hay quienes estudiamos una carrera universitaria para eso, lo mismo que para hacer buenos diseños es bueno estudiar una carrera universitaria. Mira si a un diseñador le dijeran, enséñenme a diseñar un logotipo/folleto/web rápido y gratis, es que me corre algo de prisa si no ya me leería lo que me hiciese falta... jajaja! qué risa, no? Bien, así como no se aprende a diseñar bien solo leyendo un par de cosas, tampoco se aprende a programar bien solo leyendo un par de cosas... Y si tengo un amigo programador el problema es que anda demasiado ocupado. Y supongo que no me cobraria nada ya sabeis favor por favor. P.D.: Para que estan los amigos sino. Yo me considero verdaderamente amigo de muchos de mis clientes, y sin embargo les cobro y me pagan por mi trabajo, cuentas claras conservan amistades... 3 o 4 horas de trabajo especializado gratis: ni a mi mejor amigo! jaja!! Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Formulario con javascript
Hola Ramón! Ramón Corominas escribió: Sólo por curiosidad... Cuando alguien pregunta en esta lista por un problema con un CSS, y alguien de esta lista le contesta dándole la solución, ¿No es eso a veces un trabajo de X tiempo basado en los conocimientos adquiridos durante X años? Obviamente! Y hemos dedicado bastante tiempo entre todos a aclararle varios conceptos a Félix, y hasta a darle un código PHP que funciona pero que él no sabe cómo usar (pero eso es problema de él y no de los miembros de esta lista!). ¿Dónde ves el problema, Ramón? ¿Te parece poco lo que esta lista le ofreció? ¿Si no nos quedamos programando fuera de horario hasta darle la solución final perfecta, entonces no cuentan nuestros dos centavos? Leyendo algunos comentarios empiezo a dudar entre lo que es ayudar desinteresadamente y lo que debe considerarse ya como un trabajo de pringao no remunerado. Vamos, que si alguien le quiere dar el trabajo/la ayuda gratis, no veo cuál es el inconveniente, que yo sepa es la base del conocimiento colaborativo y de las listas de correo como esta. Es mi forma de verlo, no sé... Nadie se opone a que aparezca ese valiente que le haga (a mano y desde cero) el formulario completo, con validaciones anti-spam, código válido XHTML, CSS y JavaScript no intrusivo, y accesible y usable y decorado con flores... :-) y que luego Félix sepa usarlo y aparte tenga la suficiente gratitud como para agradecer lo que por él se ha hecho. Falta que aparezca ese héroe anónimo, solo eso... vamos, hombre! Que aparezca! Que si no esta lista es un fracaso! :-) Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Formulario con javascript
Javier Trejo escribió: Hernán: Cómo estás tanto tiempo, veo que se ha armado un gran revuelo por tus comentarios. Coincido 100% con vos sobre lo que decís de hacer el trabajo por otro con las excusas de no tener tiempo. ¿Cómo estás Javier!? Mirá en qué circunstancias ruidosas vengo a encontrarte, jaja! Pero las malas interpretaciones son una constante en las listas de correo. Es muy curioso que varios hayan ayudado, mientras que otros que ni siquiera ayudaron aparecían a cuestionar el nivel de satisfacción a Félix(!) alcanzado... Con la mayor sinceridad, y espero que Félix no se enoje por esto, concretamente me molestó el tono esta frase suya (dirigida a otros, pero que me cayó pésimamente mal): Felix Manuel Fernandez Chamorro escribió: Hombre que tampoco estoy pidien la obra del Escorial ni que me hagan un sitio compleo en php que es un simple formulario con 4 apartados. Ese tipo de comentarios poco felices desmotivan por completo a cualquiera. Si alguien pregunta algo en una lista, debería hacerlo desde la humildad, y no desde la desvalorización del esfuerzo del otro. Por supuesto, sigamos adelante con CSS y a otra cosa... Un abrazo, Javier!! :-) -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Formulario con javascript
Felix Manuel Fernandez Chamorro escribió: Lo he hecho poniendo mailto pero lo que no quiero es eso que me habra un programa de correo sino que lo envie directamente y me gustaria que fuese en javascript Eso es imposible, Felix, ya que JavaScript es un lenguaje del lado del cliente, o sea, un lenguaje que le da órdenes al NAVEGADOR del usuario (ubicado en la casa o la oficina del usuario). Ese navegador web del usuario (Explorer, Firefox, Opera, etc.) no es una herramienta que sepa enviar correos a su destino. Precisa alguna otra cosa. En los formularios, el envío de datos llenados por el usuario en su casa, en su archivo HTML que el navegador le descargó, hacia el servidor, es realizado por simples etiquetas HTML form, input, etc. que envían los datos al hosting mediante una petición del protocolo HTTP, usando el método post o get, según el caso. Ahora, una vez llegados esos datos al servidor (hosting), debe ser un PROGRAMA instalado en ese hosting el que realice el envío de esos datos (típicamente ese programa es Sendmail en hostings Linux). Y debes usar PHP (o cualquier otro lenguaje de servidor), para pasarle los datos llegados del formulario a ese Sendmail, no tienes alternativa. JavaScript solo no sirve para esto, porque está a kilómetros de un servidor, está ejecutándose en la casa del usuario, en su navegador. Y de nada sirve que te digan hazlo con Ajax, que es lo mismo, JavaScript, sí, pero combinado con un lenguaje de servidor, SI O SI. Si no tienes ningún lenguaje de servidor en tu propio hosting, puedes hacer que el formulario haga una petición hacia otro servidor tuyo que sí tenga PHP, haga el envío, y devuelva al usuario al sitio original, pero sea desde el servidor que sea, sí o sí deberá ser UN LEGUAJE DE SERVIDOR (ubicado en el hosting) el que envíe los datos recibidos por el formulario hacia una casilla de correos. Saludos! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Formulario con javascript
Hola de nuevo, Félix, Felix Manuel Fernandez Chamorro escribió: Lo dicho si nadie me puede dar una solucion tendre que eliminarlo cosa que me molestaria mucho :( Nadie te dará una solución sin PHP o lenguajes de servidor, porque NO EXISTE. Por más que pidas y reclames a gritos un círculo cuadrado, nadie te lo dará... :-) Si no sabes programar en PHP, tus formularios serán un riesgo de que te los usen para hacer SPAM. Solo te paso este ejemplo como para que tengas un inicio en la lógica del asunto, pero debes estudiar PHP. NO PONGAS ESTO ONLINE!!! Suponiendo que los name de tus inputs sean nombre, mail, empresa y mensaje, que tienes definido method=post y que el action de tu formulario apunta a un archivo llamado respuesta.php ubicado en la misma carpeta que el formulario, el contenido de ese archivo respuesta.php será este (ubicado en el body de un archivo html o xhtml normal): ?php $nombre = $_POST['nombre']; $mail = $_POST['mail']; $empresa = $_POST['empresa']; $header = 'From: ' . $mail . \r\n; $mensaje = Este mensaje fue enviado por . $nombre . , de la empresa . $empresa . \r\n; $mensaje .= Su e-mail es: . $mail . \r\n; $mensaje .= Mensaje: . $_POST['mensaje'] . \r\n; $para = 'tucasi...@reemplazala.com';// reemplaza por el email donde quieres recibir los datos del formulario $asunto = 'Contacto desde el sitio X'; mail($para, $asunto, utf8_decode($mensaje), $header); echo Gracias por sus datos, pronto le responderemos; ? Antes de que quienes saben pongan el grito en el cielo, por supuesto que a esto le faltan todas las validaciones de rigor, de que hayan llegado los datos esperados, de que haya funcionado el envío de correos, y de que no sea un bot el que esté usando el formulario. NO LO USES! Creo que mejor deberías pedirle a un amigo programador que te lo programe, o estudiar un poquito de PHP. Suerte! -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Me han castigado
Ignacio Ricci escribió: Pero de donde sacan estos clientes?Yo ni tomo el trabajo por ridículos. Hola Ignacio, Creo que si bien tienes el derecho a no tomar trabajos de clientes que consideres ridículos, resulta que esos ridículos clientes PAGAN UN SERVICIO, y también tienen el derecho a contratar a programadores web que sepan darle soluciones a sus ridículos problemas y a los de sus ridículos clientes (usuarios). Un sitio web no es más que una posible solución a un problema de comunicación entre el dueño del sitio y sus usuarios. Si, como dijo Mauricio, el sitio está dirigido a pequeños distribuidores ubicados en pueblos, con equipos p3 y acceso mediante linea telefonica, ¿qué hacemos con esa gente? ¿que se queden sin web? ¿los matamos a todos? ¿que revienten por vivir lejos de las ciudades y de los adelantos tecnológicos? ¿que se muden a las capitales?... Disculpen, pero me parece un criterio totalmente discriminativo, como habitante de pueblo que soy, condenado a un único proveedor de mi maldita conexión de 128Kb que funciona como quiere y cuando quiere... el ridículo no soy yo, ridícula es la empresa telefónica que no me da otras opciones mejores! Otra cosa será qué costo tendrá semejante trabajo de hacer detección de navegador y doble sitio, y de si tú lo sabes hacer o no, pero quien sepa hacerlo tendrá un buen trabajo, y será el único que podrá darle una solución real a los problemas de comunicación de esas PERSONAS, que es a lo que nos dedicamos al hacer sitios web. ¿O no? Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] selector css
Hola Andrés,
Andres escribió:
div class=dostercios id=enviar
div class=btna href=#enviar/a/div
a href=#volver/a
/div
Como parece que por el color no se puede, ¿podría seleccionar la segunda
etiqueta a dentro del div#enviar?.
Puedes dividir el problema en dos pasos:
1) Primero aplicas un color a TODOS los enlaces dentro de dostercios,
lo cual incluirá ese segundo enlace suelto que quieres alcanzar;
2) y luego puedes indicar otro color distinto para el primer enlace:
div.dostercios a {
/* seleccionas todos los enlaces a que estén dentro de dostercios,
incluyendo el SEGUNDO enlace */
color:red;
}
div.btn a {
/* ahora cambias la apariencia solo del primero */
color:blue;
}
De esa manera, te quedan los dos enlaces de distintos colores.
Esta técnica se denomina selectores contextuales, puedes investigar.
Saludos!
Hernán Beati
http://www.saberweb.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Menú de navegación horizontal adapta ble al ancho
Nacho Diez-Quijada - No mires atrás escribió: [1] http://mrclay.org/web_design/tabs/ Primero, que ese truco hace uso de JavaScript, y quien hizo la pregunta (Rafa) aclaró que solo con CSS. Cosa que no se puede hacer, ciertamente. Además, los ejemplos 1 y 3 de esa página no funcionan en Explorer 7 (y mucho menos en Explorer 6). Ya que hacen uso de display:table-row, display-table:cell y otras características de CSS aún no soportadas por todos los navegadores. Lo cual nos debería hacer descartar la solución inmediatamente, por unos 2 o 3 años al menos, hasta que los futuros navegadores mayoritarios lo soporten. Creo que no debemos apresurarnos a responder cualquier cosa que no dé soluciones profesionales a lo que se pregunta, miles de personas recibimos los mensajes de esta lista, y perdemos el tiempo en testear las soluciones propuestas, seamos más prudentes... -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Menú de navegación horizontal adaptab le al ancho
Hola Félix, Félix Horro Pita escribió: Es una solución más, que estudiándola podremos aprender cosas. Quien busque soluciones profesionales que no acuda a una lista abierta, sino a un profesional. La palabra profesional posiblemente sobra en mi mensaje, quítala así no te impide ver el sentido de lo que dije. El punto es que si alguien pregunta por una solución solo con CSS y yo voy a proponer una solución solo con JavaScript, lo menos que puedo hacer es AVISAR que mi propuesta NO SOLUCIONARA lo que preguntaban. Ah! Y de paso, creo que es lógico que quien envía el enlace nos avise que NO FUNCIONARA para un... digamos 50% de los usuarios (los de Explorer 6 y 7). Poca cosa, ¿no es cierto? Creo que merece aclararse eso al publicar un enlace de ese tipo (que no da respuesta al problema, y que solo funciona en la mitad de los navegadores), sigo creyéndolo, al menos yo lo haría si publicara un enlace semejante, y creo que la mayoría de los usuarios de esta lista lo hacen. Salvo, claro, que quien lo esté publicando ni siquiera sepa que su propuesta hace uso de JavaScript, y que tampoco sepa que eso no funcionará en Explorer 6 ni 7... en ese caso, ¿qué podemos esperar? Pero creo que esta lista merece ese mínimo cuidado antes de proponer soluciones. Un saludo, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] OT, diapositivas con JScript
Hola Alejandra, Un granito de arena: siempre que copies ejemplos, asegurate de haber bajado todos los archivos vinculados: Sobre todo el x_core.js, sospecho que importa: link href=pirulo.css rel=stylesheet type=text/css / script type='text/javascript' src='../x/x_core.js'/script Saludos, Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] WCAG 2.0 ya es una recomendación del W3C
¿ Alguna novedad que merezca la pena comentar ? Seguramente, no terminé de leer todo, pero la primera novedad que encuentro, da respuesta a los largos debates que hemos tenido recientemente sobre jerarquías de encabezados. Miren el ejemplo bajo el título H42: Using h1-h6 to identify headings. Lo traduzco directamente (para quien quiera la versión en inglés, abajo copio el enlace). Dice: Usando h1-h6 para identificar encabezados: En este ejemplo, el contenido principal de la página está en la columna central de una página de 3 columnas. El título del contenido principal coincide con el title de la página, y está marcado como h1, INCLUSO AUNQUE NO SEA LA PRIMERA COSA EN LA PAGINA. El contenido de la primera y tercera columna es menos importante, y está marcado com h2. Código del ejemplo: head titleStock Market Up Today/title /head body !-- left nav -- div class=left-nav h2Site Navigation/h2 !-- content here -- /div !-- main contents -- div class=main h1Stock Market up today/h1 !-- article text here -- /div !-- right panel -- div class=left-nav h2Related links/h2 !-- content here -- /div /body Referencia: http://www.w3.org/TR/WCAG20-TECHS/H42.html Estoy contento, estoy contento... jajaja! Escucharon mis plegarias! Lo MAS importante de la página, sigue siendo lo MAS importante (h1) sin interesar el orden o lugar en que lo ubiquemos. Saludos! Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Enlace interno en iebeta8
Hola Alejandra, [EMAIL PROTECTED] escribió: hola Amigos!, aqui estoy yo otra vez, les cuento: use un div de esta forma div id=2nbsp;/div Los id no pueden comenzar por un número. a href=index.html #2 2° Ronda/a Te sobra un espacio entre la ele de .html y el numeral, va todo junto, claro que primero deberías cambiar el valor del id para que comience con una letra y no con un número. Por ejemplo: a href=index.html#ronda22° Ronda/a Saludos, Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] [AccesoWeb] semi OT: popups temporarios
Hola Alejandra! [EMAIL PROTECTED] escribió: en un sitio debo poner temporariamente( solo una semana) un popup que se abra automaticamente al entrar en la pagina, y luego pase automaticamente al inicio en unos 20 segundos, aprox. No te lo recomiendo, pero podrías usar un DIV con position:absolute ubicado en la posición left y top que desees. Pero no creo que sea buena idea. Primero, dices que se oculte automáticamente: y si lo estoy leyendo despacio, o me distraje unos segundos, ¿de golpe desaparece de mi pantalla?. Algo mejor sería si le pasas el control al usuario, y colocas un botón de cerrar, que pueda ocultar el DIV mediante JavaScript. El problema es que quienes tengan desactivado JavaScript no podrán quitarlo del medio de su pantalla... Y lo mismo pasa con tu idea original de ocultárselo automáticamente, para eso también deberías usar JavaScript, y quien no pueda ejecutar JavaScript se quedará con tu banner tapando la pantalla permanentemente. Por otro lado, si es un afiche como dices, me imagino que hablas de una imagen, no olvides incluirle su texto alternativo y/o longdesc para quienes no puedan ver a la imagen. Creo que la mejor solución sería que lo integraras al contenido natural de la página, como parte del cuerpo y de la información de la página, no como un popup. Saludos! Hernán Beati www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cursos on-line de diseño web
Hola Stella! (te escribo sin copia a la lista para que no piensen que hago SPAM!). Yo dicto un curso a distancia de Diseño Web con XHTML y CSS. El curso empieza la semana que viene. Te invito a visitar mi sitio: http://www.saberweb.com.ar Si querés, te aviso cuando esté listo el temario definitivo, y esté listo para comenzar a cursar. Un saludo! -- Prof. Hernán Beati - http://www.saberweb.com.ar - Juan B. Justo 254 Alejandro Korn - Buenos Aires República Argentina - Tel.: 54 (02225) 425-309 - Stella escribió: Hola gente, como estan?...Les queria preguntar si conocen alguna institucion o algo similar, que dicten cursos on-line sobre diseño web con CSS. y que sea de Argentina Espero sus recomendaciones. Muchas Gracias Saludos! ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cursos on-line de diseño web
Ouch!! No fue mi intención enviar esto a la lista. Pulsé responder pensando que iba solo a Stella! Mis disculpas. -- Hernán Beati www.saberweb.com.ar Hernán Beati - SaberWeb.com.ar escribió: Hola Stella! (te escribo sin copia a la lista para que no piensen que hago SPAM!). Yo dicto un curso a distancia de Diseño Web con XHTML y CSS. El curso empieza la semana que viene. Te invito a visitar mi sitio: http://www.saberweb.com.ar Si querés, te aviso cuando esté listo el temario definitivo, y esté listo para comenzar a cursar. Un saludo! ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
