[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
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
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] 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] 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] 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] 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] 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
[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] comportamiento hover
LISTAS escribió:
El ancla (A) no admite coordenadas de ancho y alto en Firefox y primos
(Ópera, etc.)... :(
Eso no es cierto, si miras el ejemplo que te dieron vas a notar que le
asignaron una visualización de bloque al elemento A:
a:link {
display:block;
width:200px;
height:200px;
...
}
Todo lo que sea (o haya sido convertido a) bloque puede tener asignado
un ancho y un alto, y se ve bien en todos los navegadores.
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
[Ovillo] Clasificación semántica de las etique tas y atributos de HTML
Hola a todos! Acabo de descubrir una clasificación [1] que me resultó muy interesante, según el rol semántico que cumple cada etiqueta y atributo del lenguaje HTML. Como está escrita en inglés pero es breve, la resumo en castellano: según el autor, existen 3 tipos de etiquetas según la semántica que aportan: 1) Semántica Estructural 2) Semántica de Contenido 3) Semántica Retórica 1) Estructurales: * div * span * ol, ul, li, dl, dt, dd * del, ins * h1 .. h6 * p 2) Contenido: * a * abbr * acronym * address * blockquote * cite * code * dfn * kbd * q * samp * var 3) Retórica: * em * strong 4) DUDOSOS: * blockquote * cite * q -Y en cuanto a la semántica de los atributos: 1) Contenido * alt * cite * datetime * lang * longdesc * title 2) Extensibilidad * class * id * rel * rev [1]Fuente: http://westciv.com/style_master/house/good_oil/semantics/classification.html Incluso hay un blog para debatir (en inglés) sobre el asunto: http://microformatique.com/?p=83 ¿Qué opinan de esto? ¿Cuál les parece que pueda ser la utilidad práctica de comprender el rol semántico de cada elemento que usamos al estructurar un documento HTML? 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] Presupuesto web CMS
maraña escribió: Me han pedido un presupuesto para diseñar y desarrollar una página web con el CMS Joomla. Me duda es ¿cuánto cobrar? 1) ¿Diseñar? Es una cosa. Si quieres una referencia respecto al diseño, puedes comparar cuánto te cobran una plantilla (template) pre-armada: oscila entre 50 a 250 euros. Hay miles buscando en Google, incluso gratuitas. 2) ¿Desarrollar? Ya es otro mundo... Aquí entras al terreno de los Sistemas de Información a medida, terreno en el que no te recomiendo entrar si no eres una experimentada programadora PHP/MySQL, con conocimientos sólidos del funcionamiento específico del CMS Joomla. El rango de modificaciones puede ser infinitamente amplio: desde modificaciones triviales de pocas decenas de euros (habilitar algún módulo pre-armado por un tercero, etc.) hasta desarrollar sistemas enteros a medida (decenas de miles o centenas de miles de euros, con meses o años de trabajo), o sea que en este territorio de los Sistemas, no hay un precio, el precio que se cobra se estima y se negocia con cada cliente según sus necesidades específicas, a esa etapa se la denomina relevamiento y análisis del sistema a programar. Si te piden algo así y tú eres exclusivamente diseñadora, mejor será que lo derives a gente dedicada a sistemas (en esta lista debe haber unos cuantos). Suerte, -- 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] Presupuesto web CMS
Javier Prieto escribió: Entre 1200€ y 1800€ es lo que deberias cobrar Juan Jorge Muñoz Herrero escribió: así que suponiendo que seas buena le puedes sacar los 1600€ fácilmente. Creo que hay una tendencia en nuestro gremio a: cobrar lo mismo que cobran otros free-lancers (tal vez principiantes, o más necesitados que uno), que hace que los precios del diseño y la programación web estén en constante retroceso sobre otras actividades que saben venderse mejor. Me gustaría recomendarle a Mara que aspire a cobrar 2.500€, 3.000€ o 3.500€ por ese trabajo. ¿Por qué no? El precio lo pone el cliente según su necesidad, no nosotros. El es quien dice sí o no a nuestra propuesta. Hay clientes que darían su reino por un caballo bajo ciertas circunstancias, y a veces nosotros tenemos ese caballo, por lo tanto debemos hacerlo valer. Nuestra tarea es encontrar a esos clientes dispuestos a pagar lo que valemos. Por ejemplo, en esta encuesta: http://www.alistapart.com/d/2007surveyresults/2007surveyresults.pdf ha sido demostrado que quienes mejor cobran en el mundo web son los arquitectos de información (página 31 del PDF) y que los diseñadores free-lancers unipersonales son los que menos ganan (página 39). ¿Quién se está vendiendo mejor?... Pueden descargar una planilla de cálculo que les ayude a estimar sus costos, directos, fijos, variables, etc. y a descubrir su verdadero valor por hora si trabajan por cuenta propia: http://www.mujeresdeempresa.com/negocios/negocios051101.shtml Es natural que nuestros potenciales clientes empujen los precios que quieran pagar hacia abajo, y solo depende de nosotros empujarlos hacia arriba ofreciendo valores que nos diferencien de nuestros competidores, tales como nuestra experiencia en casos similares, lo que le haremos ganar al cliente que otros no le sabrán hacer ganar, etc. Muchas veces la diferencia la percibe el cliente cuando nos ve decididos a decirle que no a un proyecto en el que el cliente no valora la calidad que tenemos para ofrecerle. Es común que clientes que han dicho que era muy alto un presupuesto mío, a los pocos meses vuelvan aceptando presupuestos incluso mayores, a cambio de un servicio que otros -que cobraron menos- no supieron ofrecerles, haciéndoles perder tiempo y dinero en chapuzas o soluciones de dudosa calidad. ¿Qué clientes estamos buscando? ¿Qué les estamos ofreciendo para diferenciarnos? Me gustaría conocer sus experiencias. Saludos a todos, 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] Presupuesto web CMS
Juan Jorge Muñoz Herrero escribió: Hernán, aunque comprendo lo que dices, no estoy de acuerdo, me parece que para un trabajo de 2 semanas 1600€ está bien cobrado Seguramente, Juan Jorge: no intentaba discutir el precio, ya que estoy en Argentina, y no sé si esos precios son comunes allí o no. Simplemente estaba reflexionando sobre la forma en que nos ponemos nosotros mismos los límites a nuestro crecimiento como free-lancers. Si hablamos de trabajos estandarizables, que puedan hacerse de idéntica manera en Pakistán que en Suecia (como las hamburguesas de Mac Donalds) seguramente que será fácil hacer una tabla de precios universal y estable. Y pasaremos a ser un eslabón de una cadena transnacional, que prefiere mandar a armar sus calzados a Bangladesh, su software a la India, etc. porque es más barato y el precio es la única variable que cuenta. Pero en trabajos más artesanales (no artísticos, pero casi, estamos hablando de diseño aplicado a negocios, diseño funcional, arte funcional) hay más variables que inciden, entre ellas la individualidad, el artista que algunos llevan dentro y otros no. Yo hago un dibujo y no vale nada, un artista plástico reconocido hace algo parecido y lo vende a miles de euros... No estamos pagando por el costo de la tela y los esmaltes, hay más que eso detrás del trabajo de cada quien. Cuanto más nos alejemos de fabricar hamburguesas y más nos acerquemos a la actitud del artista multimedial, mejor provecho obtendremos de nuestros conocimientos. Claro, si estamos 8 horas al día empleados en una empresa, no tendremos mucho tiempo para intentarlo... Solo pienso en voz alta, no es mi intención discutir precios, solo quería ver si a alguien le interesaba reflexionar sobre esto y aporté mi granito de arena con los enlaces que envié para estimar costos horarios, las encuestas de que los free-lancers son los peores pagos del mercado, etc. Saludos a todos, 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] Presupuesto web CMS
Pedro Moreno escribió: si trabajas con una metodología que te permite ser hiperproductivo y entregar cosas bien hechas no entiendo porqué cobrar por horas, costes, etc. cuando ese dato es algo interno de cada empresa o profesional. Exacto! Mi intención fue poner en evidencia que el cálculo por horas que (en el mejor de los casos) hacen muchos free-lancers, suele dejar afuera muchísimos más costos de los que se imaginan (vean el Excel que recomendaba leer), entonces, cuando dicen trabajo a 30€ la hora, x 10 horas = 300€ están infra-pagándose a sí mismos, se están fijando salarios bajísimos sin sospecharlo! el cliente lo que ve es una web con una serie de funcionalidades de las que puede obtener un retorno de inversión Totalmente de acuerdo! Un sitio web (o lo que sea) vale por lo que el cliente gane con él. Si yo convenzo a mi cliente de que mi trabajo le hará ganar 1.000 por mes en ventas y en cambio mi competidor le hará ganar solo 100, puedo cobrarle hasta esos 900 de diferencia, que el cliente lo verá con buenos ojos. El punto es que la promesa luego debe hacerse realidad, debe notarse que gana gracias a mi trabajo. Mi conclusión es que uno debe buscarse clientes que ganen muchísimo con nuestro trabajo, debemos hacerles evidente lo mucho que ganan gracias a nuestro trabajo. Esos clientes estarán dispuestos a pagar más que otros a quienes les dé lo mismo para su negocio si la web funciona o se cae a pedazos, ya que no ganan nada con su web. Huyamos de esos clientes que no ganan nada con su web! :-) siempre hay uno más barato. pero eso no siempre significa que el cliente se indigne si lo encuentra. es ley de mercado y también el barato es el que te puede dejar en la estacada. probablemente en mucha mayor proporcion que los caros lo de caro y barato es como lo de ricos y pobres. el dinero no define a la persona que hay detrás ni al servicio que presta. si sabes que tu trabajo aporta valor, cobra según ese valor. 100% de acuerdo! Al cliente no le importará si recibe ofertas de otros que dicen que le habría hecho la misma web por menos plata, al cliente le importará que alguien le ofrezca más resultados, mejores ventas, más retorno. Y lo pagará, sea yo o sea otro quien se lo ofrezca. No conozco clientes que estén consultando constantemente cuánto vale la hora del programador PHP, más bien están centrados en hacer rentable su negocio. he dicho :D Has dicho estupendamente bien! :-) 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] Contener un textarea en un div. No hay manera! :-[
JuanP escribió: Y ahora un poco de reflexión: (Ladrillo incoming) Ladrillo 2 outgoing! ;-) La verdad es que llevo diseñando/programando para la Web desde hace tiempo (el siglo pasado xDDD), Yo también, así que estamos entre viejos diseñadores que fuimos acostumbrados a las viejas tablas. ¿Tu auto es un Ford T? ¿Puedes transitar por las mismas carreteras y a la misma velocidad que con un modelo recién fabricado? Piénsalo. Fíjate este ejemplo: He localizado tres combinaciones diferentes (a priori válidas) que muestran diferencias para una operación tan simple como arropar un área de texto. Es que habría que plantearse si es necesario realmente envolver un elemento textarea con un div, ¿para lograr qué? a) Algo decorativo ¿un borde? No deberías agregar tags para eso, con poner una regla de estilo en el CSS alcanzaba. b) Y si la necesidad venía por el lado de la programación JavaScript, podrías agregar dinámicamente ese nodo con DOM accesible y multinavegador. Obviamente que no todos los ejecutarán, pero eso debes tenerlo claro a estas alturas. (Me refiero a que se necesita un navegador ultimo modelo para que funcione). Olvidémonos de las PDAs, teléfonos, mail HTML, etc. Todo lo contrario! Un sitio hecho separando contenido de presentación se ve perfectamente bien en una PDS, un teléfono, etc. Se ve la capa 1, la de contenidos. Un sitio hecho con tablas, NO. Ya que mezcla contenidos con formato. El punto es querer obligar a ejecutar idénticos efectos visuales (mostrar y esconder capas, por ejemplo) a todos los usuarios uniformemente. Es un error conceptual del diseñador, no es un problema técnico del navegador. Simples capas que aparecen y desaparecen, por ejemplo. Me parece muy fuerte que la solución que le tenga que dar es cambie de ordenador, cuando ése le va bien y sin CSS se puede hacer igualmente. La solución es: ¿tiene sentido que la información se visualice apareciendo y desapareciendo en todos los dispositivos por igual? No me imagino eso en la pantalla de un teléfono... Si sabes programar en 3 capas (contenidos, estética y comportamiento), con x/HTML, CSS y JavaScript accesible, no obstrusivo o como quieras llamarlo, aquellos que posean navegadores nuevos verán el efecto super-que-tanto-te-gusta, y los que no, pues ellos saben que su navegador antiguo tiene ciertas limitaciones, no debes pretender que vean lo mismo que ve un usuario con el último navegador. Pero deben poder acceder al contenido (capa 1). Una capa no debe destrozar la capa anterior. Si no tengo JavaScript, veo x/HTML y CSS. Si no tengo CSS, veo x/HTML. Pero siempre veo los contenidos. Sería como pretender que construyamos carreteras donde se pueda circular a 120 km/hora, pero obligando a quien tenga un Ford T del año 20 a que circule a esa misma valocidad mínima. ¿Por qué? Por eso digo que a día de hoy, utilizar CSS puro por desgracia impedirá el funcionamiento de los sitios en bastantes equipos. Todo depende de los conceptos que maneje quien programe. Si sabes separar tu código en 3 capas (no hablo de DIVs, hablo de capas conceptuales: contenidos, estética, comportamiento) no tendrás ningún problema a la hora de proporcionar la información al visitante. Contenido: x/HTML Estética: CSS Comportamiento: JavaScript Claro, es el usuario el que decidirá si utiliza tal o cual software, nuevo o viejo, lo importante es que no sea discriminado por eso (y en este punto, es mucho más accesible un sitio construido sin tablas que uno con tablas). He dicho! 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] Contener un textarea en un div. No hay manera! :-[
JuanP escribió: durante el día de hoy estuve investigando y he encontrado, para tal operación, esta autentica maravilla: http://www.silueth.com/p/textarea/textarea3.html Muy bueno! En particular, porque la parte de contenido (x/HTML) es válida, y en caso de tener JavaScript desactivado, permite que el usuario pueda acceder de todas maneras al textarea y escribir dentro de él, lo que lo vuelve un script accesible o no intrusivo (no invalida capas conceptuales más básicas). Muy buen script, gracias por compartirlo! 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] Editores XHTML y CSS
sn escribió: parece ser que lo que más triunfa es eclipse junto con sus extensiones. ahora bien, pregunto: para programar xhtml, css, php, Si vas a programar PHP mediante Eclipse, te sugiero descargar esto, ya trae todo preinstalado: http://download.eclipse.org/tools/pdt/downloads/?release=R20070917 Elige la opción PDT All-in-One y luego pulsa sobre la correspondiente a tu sistema operativo. Aquí explica qué es: http://www.eclipse.org/pdt/ Tiene autocompletado de HTML y PHP, etc. 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] Editores XHTML y CSS
SkuNk escribió: y pesar de que Eclipse también tiene un buen soporte, el ZendDebugger y la integración con PHPDocumentor es algo único de los chicos de Zend. También puede utilizarse el Zend Debugger en Eclipse, y específicamente puedes descargarte la versión para PDT: http://downloads.zend.com/pdt/debugger/ por cierto, que en run y debug me da error unable to launch / the selection cannot be launched. El error en debug se debe a que no has instalado el debugger (no viene pre-instalado), y el error en run, a que posiblemente no has configurado bien la ruta hacia el servidor web (que debes instalarlo aparte y especificar si trabajarás con PHP4 o PHP5, en mi caso he utilizado Xampp con PHP5). 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] [OT] modificar archivo del servidor
Tei escribió: Dentro del estandar, solo podrias descargarte el fichero a un directorio temporal, editarlo, y despues de salir (de OpenOffice) subirlo otra vez. Ja, ja! Es broma, no? Eso en un hosting no se hace así! Si no, harían falta muchos enanos viviendo encerrados adentro de los servidores, con su OpenOffice abierto, ja, ja! Cualquier lenguaje de servidor como PHP, ASP, JSP, etc. puede recibir de un formulario un campo de tipo file con el fichero DOC a editar, y una vez llegado al servidor, el intérprete de PHP puede abrirlo, leerlo, extraer la información necesaria, guardarla en una base de datos, procesar la información como sea necesario, y finalmente volver a generar otro nuevo DOC listo para ser descargado, todo en, digamos, unas décimas de segundo. De la misma forma que PHP puede leer ficheros XLS y generarlos en el acto, o generar PDFs, o XMLs. Investiga en www.phpclasses.org en la categoría Files and Folders, dentro de los 453 scripts hay varios dedicados a leer y/o generar ficheros DOC, como por ejemplo: MS DOC generator: http://www.phpclasses.org/browse/package/2631.html (para servidores Linux, no usa objetos COM) Class HTML to DOC: http://www.phpclasses.org/browse/package/2763.html MS files converter: http://www.phpclasses.org/browse/package/388.html WordDocumentHandler: http://www.phpclasses.org/browse/package/1352.html etc. etc. 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] [OT] Opinión sobre una web
Fran escribió: Buenas, sé que no es del todo correcto, pero me gustaría que me dierais opiniones sobre esta web [*]. Accesibilidad, usabilidad, etc. Muy buena idea, y coincido sobre la cantidad de perlas, deberían ser más por página, unas 10 (ya que las traes de una base de datos, es muy sencillo agregar un select que permita al usuario elegir si desea 10, 20 o 50, usando el valor del select para usarlo en el LIMIT de la consulta a la base de datos). Mi sugerencia es que, además de los comentarios, tal vez podrías implementar algún sistema de valoración o votación, ya que a medida que la cantidad crezca a varios cientos o miles, será imposible pretender leerlas a todas. Algo como menéame, o una puntuación de 1 a 5 estrellas, etc. que permita cambiar el criterio de orden de aparición, para permitir ver las que la mayoría de usuarios ha puntuado más alto al inicio de la lista. Por lo demás, buena idea y muy clara la implementación. Exitos! 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] OT: aplicación para crear catálogo de productos
Pedro Sanz escribió: Hola a todos: lo primero disculpas por el Off-topic, pero no termino de encontrar una herramienta de codigo libre para crear catálogos de productos Te recomiendo osCommerce[1], puedes hacer que se oculte la parte de carrito de compra y venta, y tienes un catálogo con su panel de administración listo para usar. [1] http://www.oscommerce.com 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] Ocultar texto de un value en un input submit
Ramón Corominas escribió: Con respecto a la terminología, tienes muchar razón. Obstrusivo es fatal. ¿Qué te parece invasivo? Me parece estupendo... que invade o tiene capacidad para invadir. Es justo lo que buscaba [guiño] Me parecería más acertado emplear la palabra obstructivo, ya que el JavaScript mal usado produce a quien -por cualquier motivo- no pueda utilizarlo, una obstrucción (del verbo obstruir). Un obstáculo. Algunas acepciones de obstruir de la RAE: 1) Estorbar el paso, cerrar un conducto o camino. 2) Impedir la acción. Fuente: http://buscon.rae.es/draeI/SrvltGUIBusUsual?TIPO_HTML=2TIPO_BUS=3LEMA=obstruir Creo que ambas acepciones reflejan perfectamente lo que sucede cuando uno quiere enviar un formulario programado en JavaScript, y se cansa de pulsar el botón sin que suceda nada. Eso es más un obstáculo a la acción que uno quería realizar, que una invasión. Invasión es la de los popups que se abren solos... 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] Ocultar texto de un value en un input submit
Ramón Corominas escribió: Bueno, es que el javascript invasivo no tiene por qué ser obstructivo [guiño] Exacto. Son dos cosas distintas: 1) una es la forma de programar JavaScript (mezclado con los atributos de las etiquetas, o fuera de ellas), y otra cosa es: 2) el efecto frustrante para el usuario. Son dos cosas distintas, y hay palabras diferentes para ambas. -Obstrusive = Obstructivo: 1) La palabra obstrusive se utiliza en inglés para describir la forma de programar el JavaScript mezclado con las etiquetas. Es decir, cuando uno no sigue la separación en capas (marcado, presentación, comportamiento). Para esto es para lo que serviría la palabra obstructivo. -No accesible, no usable: 2) Para las molestias que provoca en el usuario, ya existe la palabra no accesible, o poco usable. Por ejemplo, yo puedo poner un evento onclick en un input para validar el formulario antes de enviarlo, Totalmente obstructivo y no accesible! (bingo! Ambas a la vez!). Ya que en cuanto el usuario ingresa al campo haciendo click, saltará la validación! Terrible... Lo que se suele validar en JavaScript es el evento submit del elemento form, y no cada input por separado. Algo que sería peor de obstructivo e inaccesible es que el botón enviar en vez de ser de tipo submit fuera de tipo button, y que el evento submit se disparase mediante un onClick de JavaScript. Quien no tenga JavaScript, no puede usar el formulario! el onclick no obstruye nada, Sí, el onClick es totalmente obstructivo. Ya que se mezcla en el código HTML. Además, es poco usable y accesible, porque solo puede hacer click quien tiene un ratón (mouse), y si no está acompañado de un manejador de eventos para teclado (onKeyPress), quien no tiene ratón se queda fuera. así que no será obstructivo (palabra que, por cierto, parece no existir). Consulta el amplio uso de la palabra obstructivo con este sentido: http://es.wikipedia.org/wiki/JavaScript_no_obstructivo http://developer.mozilla.org/es/docs/JavaScript_no_obstructivo Prueba a poner en Google javascript no obstructivo y te aparecerán cientos de resultados. En el diccionario de la RAE dice que obstruir se conjuga como construir, así que si existe constructivo, ¿por qué no habría de existir obstructivo? Fuente: http://buscon.rae.es/draeI/SrvltGUIBusUsual?TIPO_HTML=2TIPO_BUS=3LEMA=obstruir Sin embargo, el hecho de que ese onclick esté en mitad del código sí es invasivo, porque invade el terreno correspondiente a los contenidos, lo que no es apropiado al intentar separar los contenidos de los comportamientos. Le estás queriendo dar un sentido a la palabra invasivo que es exactamente el mismo que ya se le viene dando a obstructivo. 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] OT: Filosofía de lo obstructivo y lo invasivo [Era: Ocultar texto de un value en un input s ubmit]
Amigos, ante todo esta vez salgo en defensa de Ramón, que no creo que venga por el lado de un purismo en el lenguaje su opinión, más bien por el de su significado, y lo que está aportando es valioso para tratar de entender su sentido. Así que nada de criticarlo por querer usar la palabra correcta, que aquí todos estamos aprendiendo! ;-) Ramón Corominas escribió: Nada me hace pensar que haya una oscura razón para no incluir obstructivo a pesar de su existencia. Sí que existe una razón: el escaso tiempo de uso. Es una palabra que venimos usando hace apenas 7 u 8 años, y el tiempo de reacción de la RAE es más lento. Que no esté en los diccionarios no impide el uso. ¿Cuánto demora el diccionario en incluir las palabras que internet nos aporta cada día? ¡Años! El que alguien haya hecho una mala traducción usando una palabra inventada y la haya colgado en la Wikipedia no la hace existir. Y desde luego el que una palabra esté en Google tampoco. Ambas son confirmaciones de su amplio uso. No la hará existir en el diccionario (por ahora, pronto no tendrán más remedio que incluirla), pero se usa, y mucho. No hay tutorial sobre JavaScript que no la use. En inglés, la palabra es obtrusive, y no obstrusive, lo cual ya da una idea de cómo se hizo la traducción (a oído, vamos); Aquí me entra una duda: si buscamos obstrusive con s, también aparece una enorme cantidad de resultados, y hasta hay diccionarios que la incluyen: http://diccionario.reverso.net/informatica-ingles-espanol/obstrusive (ya sé que no es la RAE...) Como no domino tanto el inglés, no sé si los cientos de artículos publicados en inglés bajo el título de Javascript non-obStrusive han sido todos creados por personas que no saben inglés. Existen muchos con non-obtrusive y otros muchos con non-obstrusive. Me queda la duda. Por eso para mí, en español, la traducción correcta sigue siendo invasivo, porque realmente invade un terreno que no le corresponde: el del código HTML, y además no se presta a confusiones sobre si eso obstruye a algo o a alguien. Es que me parece que es un poco estéril remar contra la corriente de los significados ya establecidos para las palabras: si yo opino que no me gusta la traducción de blog como cuaderno de bitácora, y comienzo a llamarlo registro porque creo que representa mejor el sentido de log, pero miles de personas ya usan la otra palabra, no veo la ventaja de no sumarme al uso de esa palabra ya difundida. Me quedaré con la razón tal vez, pero sin poder comunicarme con los demás! Las palabras ante todo son consensos entre las personas, si muchos llaman perro al perro, pues mejor para todos que lo llamemos perro en vez de argumentar que debería llamarse canis. Tota, que aunque soy consciente de que se ha generalizado el uso de una palabra inexistente, y que tal vez en el futuro esa palabra entre en el diccionario con un significado que nada tiene que ver con su raíz... Hasta que eso suceda, me quedo con una traducción que me parece bastante más acertada, qué le vamos a hacer. Bueno, yo te invitaría a usar la que ya usamos hace rato, y realmente coincido en que da lugar a confusión, yo mismo le he confundido muchas veces su sentido. Sin embargo, a pesar de que son cosas diferentes el programar con una técnica entrometida y el crear obstáculos de acceso para el usuario, la mayoría de las veces ambas cosas van de la mano: una técnica entrometida suele producir también efectos de inaccesibilidad o poca usabilidad. Y creo que eso se debe a que el aprendizaje de una técnica de JavaScript separado del marcado HTML, solo lo suelen alcanzar quienes dominan a un nivel avanzado la programación web. En cambio, los principiantes que se dejan llevar por lo que un editor visual programa por ellos (Dreamweaver, por ejemplo), no evalúan los efectos de poca accesibilidad que su editor provoca, como tampoco evalúan el que se mezcle con el marcado. Ellos tocan un botón y a otra cosa, y lamentablemente, son la mayoría de los que se dicen programadores web en el mercado... 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] Carga de todas las imágenes del CSS
Hola Javier, Xavier y a todos los demás!
Javier Trejo escribió:
No es necesario un script para eso porque tanto la hoja de estilos como las
imágenes quedarán cacheadas en el navegador una vez que este haya hecho la
petición.
Corrijo el final de la frase: una vez que el navegador la haya
mostrado a la imagen en pantalla, de lo contrario, no la tendrá en la
memoria cache...
Entiendo que lo que Xavier busca es forzar al navegador a que descargue
por adelantado todas las imágenes que aún no deben mostrarse, para
que, llegado el momento de mostrarlas, ya estén en la cache del navegador.
No puedo probarlo ahora, pero creo que esta idea funcionaría: incluir a
todas las imágenes como background-image del body, forzándolas a
ubicarse fuera de la pantalla con márgenes negativos:
.cargador {
background-image:url(imagen1.jpg);
background-repeat: no-repeat;
background-position: -5000px -5000px;
background-image:url(imagen2.jpg);
background-repeat: no-repeat;
background-position: -5000px -5000px;
}
etc...
Y luego en el HTML:
body class=cargador
Si alguien lo puede probar y funciona, que avise!
Por cierto, acabo de descubrir una técnica muy simple para aplicar a
todas las imágenes de un sitio para que, mientras cada imagen no se
descargó, aparezca en su lugar un icono animado de cargando...:
img { background: url(loading.gif) no-repeat 50% 50%; }
Fuente:
http://www.xyberneticos.com/index.php/2007/06/03/precargas-para-imagenes-utilizando-css/
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] Accesibilidad
Juan Jorge Muñoz Herrero escribió: Cadius es lo mejorcito que te puedes encontrar http://www.cadius.org/lista/ La lista de Cadius no es sobre Accesibilidad, es sobre Usabilidad, que no es lo mismo (aunque a todo desarrollador web le convendría estar suscripto a ambas). La lista especializada en accesibilidad, como ya mencionaron, es Acceso Web. 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] Imagenes de fondo en IE 6
Hola Mónica,
Monica Forrisi escribió:
.navegacion {width:384px; background:url(../imagenes/fdonavega.gif)
Sospecho de un problema de rutas: ¿sabías que al haber colocado un ../
delante la carpeta imagenes, estás indicando que el navegador vaya a
buscar esa carpeta un nivel de carpetas por detrás de donde está
ejecutándose esta orden?
Por ejemplo, si tus archivos HTML y CSS están sueltos en la raíz de un
sitio, y la carpeta imagenes también, la ruta correcta debería ser:
.navegacion {width:384px; background:url(imagenes/fdonavega.gif)
Sin el ../ por delante.
Sospecho que sea algo de eso.
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] Imagenes de fondo en IE 6
Ignacio Ricci escribió: No es un problema de ruta si se ve bien en Firefox e IE7 ... Ouch! Cierto, eso me pasa por leer apurado! Acabo de probar el código y se ve perfectamente la imagen de fondo en Explorer 6, 7, Firefox, Opera, Safari, no veo ningún problema. Me interesaría ver qué puede tener de especial esa imagen que en Explorer 6 no se vea, a ver si es culpa de la imagen... O tal vez Mónica aplique alguna otra hoja de estilo solo para Explorer que esté desactivando o sobre-escribiendo esta regla, en fin, sin ver la URL real donde eso le sucede al Explorer 6, no termino de entender qué problema hay. 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] Invitación a conectarnos en LinkedIn
Hola Ernesto (y todos los demás!) Ernesto Frías escribió: Lo que no entiendo es porque tengo esa dirección en un usuario. :( Muy probablemente, has recibido copia de algún mensaje mío a la lista de Ovillo, y te ha quedado almacenado en tu programa lector de correos mi nombre, pero con la dirección de la lista Ovillo; fijate que la cabecera Reply-to de los correos enviados por la lista es: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Y eso es lo que quedará almacenado, según en qué lector de correos... De paso, y aunque no sea lo que sucedió en este caso, aprovecho para recomendarle a todos que no se arriesguen colocando sus contraseñas de su casilla de Hotmail, Gmail, Yahoo, etc. en un formulario de Buscar amigos de Linkedin, Facebook, o de la red social que sea, por más que nos juren cien veces que no almacenarán esos datos... seré muy desconfiado, pero yo no les creo!! Es tan fácil ir almacenando en una base de datos esas contraseñas de forma totalmente inadvertida para el usuario! ¿Por qué deberíamos confiar en una empresa y creer a ciegas que no usarán nuestra contraseña? No me convence... Mejor invitar a nuestros contactos uno por uno a nuestras redes sociales. Un saludo a todos! -- 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] Insertar archivo .flv
Hola Ramón y todos, Ramón Corominas escribió: Ostrás, pues iba a decirte que sí, que por supuesto, pero acabo de comprobarlo y veo que valida sólo si es Transitional, en la versión Strict no deja meter un object dentro de otro... Cosa que, por cierto, no entiendo, porque pensaba que esa era la manera lógica de degradar a diferentes contenidos alternativos. Sí que valida perfectamente, si te fijas en tu código de ejemplo tenías un atributo codebase al que le faltaba abrir la comilla de inicio que envuelve a su valor. Y además, este mensaje de error que muestras: /Line 12, Column 26/: document type does not allow element object here; missing one of p, h1, h2, h3, h4, h5, h6, div, address, fieldset, ins, del start-tag. Eso con XHTML 1.0 Strict, con el Transitional ya digo que sí traga... no se debe a que hayas anidado dos etiquetas object, sino que se debe a que, dentro de un documento XHTML Strict, debe existir al menos una etiqueta en bloque dentro del body, no puedes colocar información suelta dentro de etiquetas en línea (la etiqueta object no es en bloque, es en línea). Copio el código que sí valida en XHTML Strict perfectamente: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; html xmlns=http://www.w3.org/1999/xhtml; head meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 / titlePrueba de object dentro de object/title /head body div object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 codebase=http://download.Adobe.com/pub/shockwave/cabs/Flash/swFlash.cab#version=7,0,19,0; width=300 height=50 param name=movie value=./img/player.swf / !-- objeto para los demás -- object type=application/x-shockwave-flash data=./img/player.swf width=300 height=50 !-- contenido alternativo para cuando no se cargan los objetos -- pSu navegador no es capaz de mostrar Flash. a href=./info.htmAcceda a la información alternativa/a./p /object /object /div /body /html Fíjate cómo simplemente he envuelto las etiquetas object en una simple etiqueta div (en bloque), y santo remedio! Saludos a todos! -- 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
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] 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] 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] 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] 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] 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] 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] 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] 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] 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] 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
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
;-) 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] 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] 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] 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] [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] 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
[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] 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
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
[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] 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
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] 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] 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] 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
