HTML desde cero – Introducción a CSS: colores, posiciones, tamaños, y más

Hasta ahora hicimos las siguientes cosas: Clase 1: párrafos, encabezado, y cuerpo Clase 2: negrita, cursiva, enlaces Clase 3: imágenes, título de página y títulos de secciones Clase 4: Listas numeradas y  no numeradas, tablas Pero en ningún momento definimos el formato de cada objeto: color, tamaño, posición, etc. En este tutorial de HTML y … Continuar leyendo “HTML desde cero – Introducción a CSS: colores, posiciones, tamaños, y más”

Lindos botones con CSS (II)

Al igual que en el post anterior, voy a compartir el código HTM y CSS para hacer unos botones lindos y accesibles, ya que el contenido está separado del formato. En este caso usé una imagen transparente de frente y una imagen de unas flores como fondo*. Imagen de frente: Rectángulo semi transparente hecho en … Continuar leyendo “Lindos botones con CSS (II)”

Lindos botones con CSS

En uno de mis trabajos tenía que hacer unos botones más o menos acordes con el resto del sitio y se me ocurrió hacerlos en un rectángulo con sombra, sobre una franja de otro color. ¿Por qué no hacerlos directamente como imagen? Porque la regla número uno de la accesibilidad es separar el contenido del … Continuar leyendo “Lindos botones con CSS”

Haciendo magia con CSS

Estoy trabajando una plataforma Moodle 2, y debo decir que los muchachos se pasaron con los cambios… ¡cuánto cuesta adaptarse a las novedades! Sin embargo,  voy entendiendo y encontrando la lógica poquito a poco. Hoy quiero comentar cómo hice algunas cosas espectaculares con CSS. Yo tenía una página con links (página de categoría) y quería … Continuar leyendo “Haciendo magia con CSS”

Cargando #18: CSS para salir

Cargando… es una tira de IrisFernandez.com.ar y AgenciaBlog. Publicada bajo una licencia Creative Commons Atribución. Si bien su lenguaje es mayormente visual, quisiéramos que todos la puedan disfrutar y para ello la publicamos con un código que permite a los lectores de pantalla, usado por invidentes, leerles un texto equivalente a la imagen. Si desea … Continuar leyendo “Cargando #18: CSS para salir”

Más sobre estilos CSS: Float y clear

Cuando recién empezamos a crear páginas web usando hojas de estilo nos cuesta entender de qué manera acomodar los diferentes DIVs en la pantalla. Aquí creé una página de ejemplo que tiene dos divs, todavía sin float ni clear: <div id=”izquierda”> <p>Ingredientes</p> <ul><li>Tapa para pascualina</li> … </div> <div id=”contenido”> <h1>Tarta de Jamón y queso</h1> <p>Encender … Continuar leyendo “Más sobre estilos CSS: Float y clear”

Imágenes en CSS

Cuando uno empieza a hacer páginas web accesibles, empiezan a surgir algunas preguntas cuya respuesta no es tan sencilla. ¿Cómo centrar una imagen usando CSS? Existen muchas formas de hacerlo, pero la que me parece la más sencilla  es la que proponen en este post del blog lamateporunyogur. En la hoja de estilo, debemos crear … Continuar leyendo “Imágenes en CSS”

ChatGPT para crear código

En estos días estuve haciendo pequeños experimentos para crear archivos SVG, sitios web o interactivos con javascript, usando ChatGPT. Los resultados son sorprendentes (y emocionantes!) Comparto aquí tres videos y varios prompts. Algunos prompts Crear gráfico de torta interactivo Crear gráfico de barras interactivo Crear gráfico lineal interactivo Generar imágenes de tipo SVG Crear un … Continuar leyendo “ChatGPT para crear código”

Presentación: Software Libre y Educación

Me invitaron a realizar una charla sobre software libre y Huayra. Comparto aquí mis diapositivas, realizadas en HTML + CSS, con licencia Creative Commons Atribución. Enlace a las diapositivas en línea: http://irisfernandez.ar/SLyHuayra/ Descargar archivo comprimido con las diapositivas

Crear un recuadro para cada categoría en WordPress

Estaba necesitando mostrar una grilla donde se linkeara a los posts de una categoría en particular, en WordPress. Buscando en la web, encontré el plugin WP Ultimate Post Grid, que permite: Crear una gilla Elegir qué tipo de contenido tendrá la grilla (en mi caso “Categorías”) Insertar la grilla en una página Personalizar el CSS … Continuar leyendo “Crear un recuadro para cada categoría en WordPress”