Skip to content

Latest commit

 

History

History
80 lines (50 loc) · 3.36 KB

README.md

File metadata and controls

80 lines (50 loc) · 3.36 KB

Blog js

Aquí tienes un ejemplo de cómo crear un blog básico utilizando HTML5, CSS3 y JSON como base de datos para las entradas. Este ejemplo incluye la estructura HTML, el estilo CSS y el uso de JSON para almacenar y mostrar las entradas del blog.

Estructura del Proyecto

  1. index.html - Archivo principal HTML.
  2. styles.css - Archivo CSS para el estilo.
  3. entries.json - Archivo JSON con las entradas del blog.
  4. script.js - Archivo JavaScript para manejar la carga de entradas desde el JSON.

Explicación

  1. index.html: Contiene la estructura básica del HTML, incluyendo un header, un main donde se insertarán las entradas del blog, y un footer.

  2. styles.css: Define el estilo visual del blog, con un diseño limpio y sencillo

  3. entries.json: Actúa como la base de datos de las entradas del blog, con cada entrada incluyendo un título, descripción, hashtags, imagen y autor.

  4. script.js: JavaScript que carga las entradas del blog desde el archivo JSON y las inserta en el HTML dinámicamente.

    Con estos archivos, tendrás un blog básico donde se muestran las entradas almacenadas en el archivo JSON, al estilo de Blogger. Puedes personalizarlo y expandirlo según tus necesidades.

Para implementar las nuevas características, haremos las siguientes modificaciones:

  1. Añadir un enlace a cada entrada en el archivo JSON.
  2. Hacer que los hashtags agrupen todas las entradas.
  3. Añadir una sección de búsqueda de entradas.

index.html Añadimos una barra de búsqueda y una sección para los hashtags.

styles.css Añadimos estilos para la barra de búsqueda y los hashtags.

entries.json Añadimos enlaces a cada entrada.

script.js Actualizamos el script para manejar las nuevas funcionalidades: añadir enlaces, agrupar por hashtags y buscar entradas.

Explicación

  1. index.html: Se ha añadido una barra de búsqueda y una sección para hashtags
  2. styles.css: Se han añadido estilos para la barra de búsqueda y los hashtags.
  3. entries.json: Cada entrada ahora incluye un enlace.
  4. script.js:

  • displayEntries: Muestra las entradas del blog, incluyendo los enlaces.

  • displayHashtags: Genera la lista de hashtags únicos y añade eventos de clic para filtrar entradas por hashtag.

  • filterByHashtag: Filtra y muestra las entradas basadas en el hashtag seleccionado

  • setupSearch: Configura la funcionalidad de búsqueda para filtrar entradas en tiempo real según el texto introducido.

    Con estos cambios, tendrás un blog más interactivo y organizado, permitiendo a los usuarios buscar entradas y navegar por hashtags.

Para asegurarte de que el footer se distinga claramente de las entradas del blog, puedes ajustar el estilo del footer para hacerlo más prominente y visualmente separado del contenido principal. Aquí tienes algunas mejoras en el CSS:

Explicación de los Cambios 1.footer:

  • Cambié el fondo a un color más oscuro (#222).
  • Aumenté el padding para hacerlo más alto y más prominente.
  • Añadí un borde superior (border-top: 4px solid #0073e6) para separarlo visualmente del contenido principal.
  1. footer p
    • Ajusté el margin a 0 para asegurar que el texto esté bien centrado verticalmente
    • Cambié el tamaño de la fuente a 1rem para asegurarse de que sea legible.

Estos cambios harán que el footer se distinga claramente del resto del contenido del blog, proporcionando una separación visual más efectiva.