endoedo linea de dos, Guías, Proyectos, Investigaciones de Sistemas Operativos

¡Descarga endoedo linea de dos y más Guías, Proyectos, Investigaciones en PDF de Sistemas Operativos solo en Docsity!

Marcos de desarrollo Web

Unidad 1 – Frameworks de front-end

Semana Nº 2 Front-end

Mag. Luis Fernando Campero Enriquez

Al finalizar esta sesión, los estudiantes

serán capaces de construir una página

web básica con diseño responsivo,

utilizando sus componentes y sistema

de cuadrículas.

Logro de la sesión

Recordando la sesión anterior

¿Qué vemos en el gráfico?

¿Qué es Bootstrap?

• Framework front-end de código abierto que facilita el desarrollo de sitios web responsivos y modernos.
• Creada originalmente por Twitter, Bootstrap proporciona una colección de estilos CSS predefinidos, componentes HTML, y funciones JavaScript que permiten a los desarrolladores diseñar interfaces de usuario de manera más rápida y eficiente.

Caracteristicas

• Framework front-end de código abierto creado por Twitter.
• Framework front-end más popular utlizando el enfoque Mobile First.
• Permite construir páginas web modernas y responsive de manera rápida.
• Incluye:  Sistema de grillas (Grid).  Componentes : botones, menús, cards, formularios, etc.  Utilidades : colores, espaciado, tipografía.

¿Para qué sirve?

• Desarrollar sitios web atractivos y funcionales en cualquier dispositivo.
• Permite a los desarrolladores trabajar con un conjunto estándar de herramientas y componentes como formularios, botones, barras de navegación y otros elementos de interfaz de usuario.
• Incluye un sistema de cuadrículas (grid system) que facilita la organización del contenido de manera responsiva en diferentes tamaños de pantalla.

Sistema de grillas (Grid System)

• Basado en 12 columnas.
• Responsive, se adapta a pantallas pequeñas, medianas y grandes.

Sistema de grillas (Grid System) Ejemplo de uso de grid system para un sitio de e-commerce

¿Cómo usarlo?

• Para usar Bootstrap, puedes integrarlo en tu proyecto web de dos maneras principales:
  1. A través de un CDN (Content Delivery Network)
  2. Descargando los archivos localmente

¿Cómo usarlo?

1. Descargando los archivos localmente

• Descargar desde https://getbootstrap.com → opción Download → Compiled CSS and

JS.

• Dentro de tu proyecto verás carpetas como:

css/

bootstrap.min.css

js/

bootstrap.bundle.min.js

Cuando es para una sola página web

• Si solo vas a usar Bootstrap en una sola página , basta con incluir la referencia a los archivos en el y al final del de ese HTML específico : __ __ __ __ __ Página con Bootstrap local __ __ __ __ ¡Hola Bootstrap local! __ __ __ __

Componentes de Bootstrap

Botones

Primario

Peligro

Componentes de Bootstrap

Barra de navegación (Navbar)

MiSitio