FDT Sobre colocar imágenes en una página web
denis Humberto Solís
Jonatan
El diseño WEB, igual que el de cualquier aplicación, sin ver es muy difícil de hacer bien; al menos visualmente atractivo.
En todo caso, no sólo la posición de las imágenes, sino el diseño completo de la WEB, sin ver, deberías hacerlo tirando mucho de matemáticas.
Lo primero que deberías hacer, es comprender las medidas básicas, como por ejemplo los píxeles. Cuando hablo de "comprender", me refiero a tener una idea física de cuanto ocupa esa unidad de medida, como por ejemplo un píxel. Esto es así, porque en el diseño de páginas, o de aplicaciones, todo se maneja en medidas. En el diseño WEB hay otras, como pt (puntos). Pero en muchas ocasiones se expresa en píxeles. Así que como sin ver, que nos digan "20 px" no nos dice nada, porque no sabemos realmente cuanto ocupa eso en la pantalla, lo mejor es saber a cuanto equivaldría en una medida que controlemos mejor, y de la que tengamos una noción física, como los centímetros. Así es más fácil hacer el puzle de colocar los elementos en la interfaz WEB en este caso, ya que sabiendo en cm cuanto ocupa el área que hay para distribuir los elementos, y cuanto ocupan los elementos que queremos poner en la interfaz, puede ser más sencillo imaginarnos como queda el diseño.
Pero es más complejo que eso: hay que tener en cuenta los elementos de alrededor; que ha de haber margen entre ellos, etc.
Y llendo más al grano acerca de tu pregunta, sabiendo lo anterior, debes establecer el tamaño de la imagen, tanto al indicar en el código HTML el espacio que ocupará, como en la resolución de la imagen, que debe coincidir con el espacio asignado en la WEB mediante HTML, para que la imagen no se vea mal, cortada etc.
Lo de hacerse una idea en cm, sirve para saber si en tu caso, la imagen será muy grande o muy pequeña, y calcular bien los márgenes con el resto de elementos en la interfaz. Pero hay que tener en cuenta que hay más factores, que pueden complicar el diseño de la WEB: por ejemplo, que un píxel no ocupa siempre lo mismo; o que la interfaz debería ser responsiva, para adaptarse a cualquier resolución; con lo cual, si quieres una WEB responsivea, será más difícil establecer el tamaño de la imagen, así como su posición exacta en cualquier resolución, y los márgenes con el resto de elementos.
para eso, es bueno usar medidas relativas, en lugar de absolutas. Eso combinado con algo de programación PHP, Javascript etc, te ayudará a crear un diseño responsivo que pueda quedar más o menos bien.
Ahora, con ChatGPT, podemos tener bastante más autonomía al diseñar la interfaz de un programa o una página WEB: primero porque puede ayudarte a crear la WEB en tu caso; pero también puede aconsejarte sobre como hacerlo bien estéticamente. Y luego, si tienes ChatGPT plus, puedes subir capturas de la WEB y preguntarle sobre el diseño, lo que quieras, incluso si cree que visualmente es atractivo, si ve algún error estético (como que una imagen no se vea bien, esté muy pegada o separada de otros elementos etc).
Pero en todo caso, si quieres asegurarte de que realmente esté bien visualmente, sobre todo en distintos dispositivos, deberías finalmente pedir ayuda a alguien que vea para que te explique bien como se ve la WEB
--
Visita la web oficial de la comunidad de NVDA en español para acceder a recursos y descargas que desplegarán todo el potencial de tu lector de pantalla:
https://nvda.es
Visita la tienda de la web oficial de la comunidad para adquirir algunos productos, como materiales de formación o sintetizadores de voz, que mejorarán tu experiencia con NVDA: https://nvda.es/tienda/
Consulta las normas de esta lista siempre que quieras en la siguiente dirección:
https://nvda.es/documentacion/normas-de-convivencia-y-buen-comportamiento/normas-de-la-lista-de-correo-de-la-comunidad-de-nvda-en-espanol/
---
Has recibido este mensaje porque estás suscrito al grupo "NVDA en español" de Grupos de Google.
Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a nvda-es+u...@googlegroups.com.
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/nvda-es/DS7PR19MB5709FAE805E89B652A5C6AD1BFAFA%40DS7PR19MB5709.namprd19.prod.outlook.com.
carlos alberto pacheco uribe
Víctor Hugo León Sánchez
difícil que ¿nosotros podamos estudiar diseño de web o de software?.
solo dejo la interrogante.
El 10/11/23, carlos alberto pacheco uribe <cap....@gmail.com> escribió:
> Visita la web oficial de la comunidad de NVDA en español para acceder a
> recursos y descargas que desplegarán todo el potencial de tu lector de
> pantalla:
> https://nvda.es
> Visita la tienda de la web oficial de la comunidad para adquirir algunos
> productos, como materiales de formación o sintetizadores de voz, que
> mejorarán tu experiencia con NVDA: https://nvda.es/tienda/
> Consulta las normas de esta lista siempre que quieras en la siguiente
> dirección:
> https://nvda.es/documentacion/normas-de-convivencia-y-buen-comportamiento/normas-de-la-lista-de-correo-de-la-comunidad-de-nvda-en-espanol/
> ---
> Has recibido este mensaje porque estás suscrito al grupo "NVDA en español"
> de Grupos de Google.
> Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes,
> envía un correo electrónico a nvda-es+u...@googlegroups.com.
> https://groups.google.com/d/msgid/nvda-es/0a3c0d12-f8dc-4d72-b0eb-0c038237402dn%40googlegroups.com.
>
denis Humberto Solís
ya
que quizás con eso puedo tener en la mente una idea más de como colocar imágenes.Enviado: viernes, 10 de noviembre de 2023 07:02
Visita la web oficial de la comunidad de NVDA en español para acceder a recursos y descargas que desplegarán todo el potencial de tu lector de pantalla:
https://nvda.es
Visita la tienda de la web oficial de la comunidad para adquirir algunos productos, como materiales de formación o sintetizadores de voz, que mejorarán tu experiencia con NVDA: https://nvda.es/tienda/
Consulta las normas de esta lista siempre que quieras en la siguiente dirección:
https://nvda.es/documentacion/normas-de-convivencia-y-buen-comportamiento/normas-de-la-lista-de-correo-de-la-comunidad-de-nvda-en-espanol/
---
Has recibido este mensaje porque estás suscrito al grupo "NVDA en español" de Grupos de Google.
Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a nvda-es+u...@googlegroups.com.
denis Humberto Solís
Enviado: viernes, 10 de noviembre de 2023 02:57
Para: nvd...@googlegroups.com <nvd...@googlegroups.com>
Asunto: Re: [nvda-es] FDT Sobre colocar imágenes en una página web
Tirecias Engineering
Buenas,
A ver, he estado explorando de forma no muy constante, pero desidida esa posibilidad de usar un asistente de IA tipo ChatGPT para buscar ayuda en el diseño visual de interfaces.
Con detalles básicos de html funciona bien, traté de hacer un formulario para una aplicación de VBA, pero algo falla en la generación del código que me manda errores cuando indico un arreglo de controles juntos, del tipo varios botones de radio en array.
Alguien más ha intentado hacer algo similar?
Cómo le ha ido?
Podrían compartir sus expreriencias?
Gracias
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/nvda-es/7a846849-d349-4460-9e66-7b163f9cc43b%40yahoo.es.
Jonatan
Yo no hablaba tanto de que ChatGPT te genere el código, sino de que te ayude a diseñar la interfaz de la WEB, que luego tú deberías crear con HTML y CSS. Hay que tener claro que una cosa es el diseño (como se verá) y otra crear ese diseño en código.
ChatGPT puede hacer también lo que dices, que sería lo contrario de lo que yo quería decir: darle un diseño en texto, y que te lo devuelva ya codificado en HTML y CSS, por ejemplo. Pero en este caso hay bastantes probabilidades de que hayan errores, sobre todo en ChatGPT 3.5. Dicen que ChatGPT plus es bastante mejor programando; pero al final es una ia para mantener conversaciones, donde se le da un texto y te devuelve otro en forma de respuesta. Para programar, aunque a veces lo hace bien (sobre todo con mucha paciencia) puede patinar un poco.
De todas formas, ChatGPT puede darte un código inicial según lo que le has pedido, y tú tienes que verificar ese código y probarlo, para pedirle que te corrija aquello que no funcione bien; y suele hacerlo.
Como digo, ChatGPT plus parece que programa bastante mejor que la versión gratuita.
Además, a veces viene bien un poco de prompt ingenier, para forzar a ChatGPT a trabajar mejor en cosas como la programación: por ejemplo, hacerle meterse en el papel de un programador experto, que tiene que desarrollar una aplicación para tal cosa, una WEB con x elementos... Y muchas veces, eso da mejor resultado que pedírselo directamente.
Pero de todas formas, no podemos esperar que lo clave a la primera: a veces hay que tener paciencia.
Lo bueno de ChatGPT plus, además de que programa mejor, es que en cuanto al diseño, puedes hacer una captura de pantalla, pasársela, y trabajar con esa imagen, para ver si ha hecho exactamente lo que querías, si hay algo que en su opinión hay que arreglar ... ¡hay infinidad de posibilidades!.
Por ejemplo, si le dices que quieres crear el diseño de un logo, para luego crear la imagen con Dall-e 3, te puede ayudar, si le das cuanta más información mejor: para qué es el logo (WEB, tarjeta de presentación, aplicación etc) la temática... Pero si recurres nuevamente al prompt ingenier, y en este caso le dices que tiene que aconsejarte bien acerca del diseño, porque no ves y no sabes si lo que te diga va a quedar bien o no visualmente, lo comprende, y hace por explicarte mejor por qué te aconseja un color concreto, por qué un tipo de letra, por qué una posición concreta de un texto en el logo ...
Lo del logo es un ejemplo; por supuesto, vale para cualquier imagen, e incluso para el diseño de una WEB o aplicación.
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/nvda-es/b1d66006-f882-43df-98db-38745caa7682%40gmail.com.
Jonatan
Por aclarar: cuando hablaba de usar PHP o Javascript para hacer la interfaz responsiva, me refería a usarlos principalmente, para obtener la resolución de la pantalla, controlar si se muestra una plantilla u otra, etc. Pero el diseño como tal se hace con HTML y CSS.
También, con PHP o Javascript, se puede comprobar el navegador, para mostrar la interfaz de una forma u otra según el navegador, ya que ahora suelen seguir bastante más los estándares del diseño WEB; pero aun así, es posible que la misma página, en la misma resolución (mismo dispositivo) no se vea exactamente igual en Chrome que en Firefox, o Edge, por ejemplo.
Entonces, con PHP por ejemplo, puedes comprobar el navegador y/o la resolución, y adaptar de forma dinámica la interfaz de la WEB; o puedes crear una interfaz de la WEB para cada caso, y mostrar la que corresponda según el navegador y/o la resolución.
Algo común, es tener un diseño para equipos de escritorio como ordenadores o portátiles, y otro para móviles, ya que si bien la resolución no va a ser siempre la misma, puede ser parecida entre móviles, por ejemplo. Entonces, teniendo los dos diseños, cada uno puede igualmente adaptarse a cada dispositivo; pero siempre será un diseño bastante parecido.
Por ejemplo, el logo de la WEB, o cualquier imagen, es bueno tener una copia para el diseño para dispositivos de escritorio/portátiles, y otra para dispositivos móviles, ya que en estos últimos, las imágenes deben ser más pequeñas, por razones obvias.
Como dije, ChatGPT puede hacer de esa persona que ve en gran medida, ya que también sabe de diseño WEB. E incluso, es muy útil para elegir correctamente la paleta de colores, ya que sabe qué color es más adecuado en cada situación (muy útil para personas que nunca han visto, y no saben como son los colores).
Esto no significa que quizás lo que para ChatGPT puede estar bien estéticamente, lo vaya a estar para alguien que vea la WEB, pero seguro que con paciencia a la hora de trabajar con ChatGPT para el diseño de la interfaz, la cosa acaba saliendo bastante decente (aunque finalmente haya que retocar alguna cosilla).
Y para ciertas cosas, sirve incluso la versión gratuita de ChatGPT, en la que no se puede subir una captura de pantalla de la WEB, pero en la que igualmente puede consultarse como hacer un diseño atractivo, para cualquier temática que se te ocurra.
Con la versión plus de Chat GPT, incluso podría dársele una imagen de un diseño y pedirle que lo haga en HTML con CSS.
He visto algún vídeo haciendo algo parecido, y termina haciéndolo bastante bien.
Eso sí, ChatGPT es el único que puede servir para estas cosas. Bard por ejemplo es un desastre, y Bing Chat... Es lo mismo que ChatGPT; pero personalmente me gusta más la versión de Open AI.
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/nvda-es/DS7PR19MB5709A9334E27051A3738C12FBFAEA%40DS7PR19MB5709.namprd19.prod.outlook.com.
Ramón Corominas
> Entonces, con PHP por ejemplo, puedes comprobar el navegador y/o la
> resolución, y adaptar de forma dinámica la interfaz de la WEB; o
> puedes crear una interfaz de la WEB para cada caso, y mostrar la que
> corresponda según el navegador y/o la resolución.
>
>
>
trabajo de manera innecesaria. Hoy en día los navegadores se comportan
prácticamente igual a la hora de renderizar, y las pocas diferencias
suelen estar más bien en características avanzadas que un navegador
soporta unos meses antes que otro. Usando diseño responsive se puede
hacer una web única que se vea perfectamente en móvil, tablet y
escritorio, y esas distintas versiones no se basan en resoluciones
fijas, sino más bien en proporciones o relaciones visuales como el
aspect ratio, y más ahora con las content-queries, donde se pueden
establecer propiedades CSS basadas en las medidas de un contenedor, y no
solo de la pantalla.
Vamos, que es mejor usar las tecnologías actuales y no reinventar la
rueda 😉
Saludín,
Ramón.
Víctor Hugo León Sánchez
El 11/11/23, Ramón Corominas <ra...@ramoncorominas.com> escribió:
> Visita la web oficial de la comunidad de NVDA en español para acceder a
> recursos y descargas que desplegarán todo el potencial de tu lector de
> pantalla:
> https://nvda.es
> Visita la tienda de la web oficial de la comunidad para adquirir algunos
> productos, como materiales de formación o sintetizadores de voz, que
> mejorarán tu experiencia con NVDA: https://nvda.es/tienda/
> Consulta las normas de esta lista siempre que quieras en la siguiente
> dirección:
> https://nvda.es/documentacion/normas-de-convivencia-y-buen-comportamiento/normas-de-la-lista-de-correo-de-la-comunidad-de-nvda-en-espanol/
> ---
> Has recibido este mensaje porque estás suscrito al grupo "NVDA en español"
> de Grupos de Google.
> Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes,
> envía un correo electrónico a nvda-es+u...@googlegroups.com.
>
Ramón Corominas
> ¿Una curiosidad, cómo se hace para que NVDA lea cita cuando citas un mensaje?
>
del texto, aunque en mi caso lo que hago es darle al botón de
"responder" y dejar la cita tal y como la encuentra Thunderbird.
Saludín,
Ramón.
Héctor J. Benítez Corredera
de que la cita esté claramente marcada en el texto. Aquí hay algunos
consejos que pueden ayudarte:
1.
Uso de Símbolos de Citación: Muchas veces, las citas en los mensajes se
marcan con símbolos como `>` al inicio de la línea. Por ejemplo:
markdown
> Esta es una cita
NVDA leerá esto y, dependiendo de cómo esté configurado, puede anunciar
que se trata de una cita.
2.
Formato Claro: Si estás citando en un entorno que no utiliza símbolos
específicos para las citas (como un correo electrónico o un documento de
texto), es útil separar la cita del resto del texto con una línea nueva
o con frases como "Cita:" antes de la cita.
3.
Configuración de NVDA: Puedes revisar la configuración de NVDA para
asegurarte de que está configurado para leer correctamente las citas. En
la ventana de configuración de NVDA / Formateado de Documentos, puedes
ajustar cómo NVDA maneja la lectura de diferentes elementos de texto,
incluyendo citas.
4.
Uso de Comandos de Navegación: Si NVDA no lee automáticamente las citas
como esperas, puedes usar comandos de navegación para moverte por el
texto y leer las citas manualmente.
Recuerda que la forma exacta en que NVDA maneja las citas puede depender
de la configuración específica de tu NVDA y del programa o aplicación en
el que estés trabajando. Si encuentras problemas específicos, puede ser
útil consultar la documentación de NVDA o buscar ayuda en la comunidad
de NVDA para obtener consejos más específicos relacionados con tu situación.
osca...@gmx.com
Ahora por aquí con una consulta al respecto del tema que se está tratando, citas.
En el Microsoft Word, conforme a lo que las reglas de citas para documentos dice, es que se utiliza el símbolo de las comillas " " sin embargo, NVDA aunque tiene marcada la casilla de verificación para leer las citas, este no las lee o al menos, no manifiesta nada que pueda darme una idea de que esto que está leyendo es como tal una cita.
La cuestión en todo caso es, entonces, NVDA sí lee cuando agregas la fuente, desde el mismo Microsoft Word por medio del asistente para citas y fuentes que dispone, pero entonces, ¿qué configuración es la recomendable para sí poder identificar de manera específica las citas en los documentos?
De antemano, por su orientación gracias y saludos.
.
-----Mensaje original-----
De: nvd...@googlegroups.com <nvd...@googlegroups.com> En nombre de Héctor J. Benítez Corredera
Enviado el: sábado, 11 de noviembre de 2023 08:38 a. m.
Para: nvd...@googlegroups.com; Víctor Hugo León Sánchez <victorhugole...@gmail.com>
Nahir
osca...@gmx.com
Hola,
Gracias por tu respuesta.
Sí, entiendo que están en el hilo de los correos que están comentando sobre citas en páginas web y que, la casilla para las citas en el diálogo de NVDA, se refiere a las páginas web.
De ahí, que, me permití consultar sobre si hay forma de que NVDA pueda identificar las citas en el Microsoft Word, pues, como lo expongo, cuando insertas una fuente, desde el asistente para tal efecto en esta aplicación, NVDA te la lee, sin embargo, no te lee o identifica el texto de la cita, al menos, no he encontrado el cómo hacer para que esto ocurra.
De ahí mi consulta.
Saludos.
De: nvd...@googlegroups.com <nvd...@googlegroups.com> En nombre de Nahir
Enviado el: jueves, 16 de noviembre de 2023 07:26 p. m.
Para: NVDA en español <nvd...@googlegroups.com>
--
Visita la web oficial de la comunidad de NVDA en español para acceder a recursos y descargas que desplegarán todo el potencial de tu lector de pantalla:
https://nvda.es
Visita la tienda de la web oficial de la comunidad para adquirir algunos productos, como materiales de formación o sintetizadores de voz, que mejorarán tu experiencia con NVDA: https://nvda.es/tienda/
Consulta las normas de esta lista siempre que quieras en la siguiente dirección:
https://nvda.es/documentacion/normas-de-convivencia-y-buen-comportamiento/normas-de-la-lista-de-correo-de-la-comunidad-de-nvda-en-espanol/
---
Has recibido este mensaje porque estás suscrito al grupo "NVDA en español" de Grupos de Google.
Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a nvda-es+u...@googlegroups.com.
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/nvda-es/2e259ddd-177d-4b04-b484-f755c3d92ff8n%40googlegroups.com.
Shirly Rosado Vega
El 11/17/2023, a la(s) 11:47 a. m., oscarmora via NVDA en español <nvd...@googlegroups.com> escribió:
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/nvda-es/007e01da196d%2456378620%2402a69260%24%40gmx.com. existe formato APA con el lector de pantalla