Programación Avanzada
Tema: Thymeleaf
Docente: Mg. Mario Ruben Pérez Cargua
Contenido
Objetivo
● HTML
Crear las UI de usuario basados
● Bootstrap
en html de las entidades
● Thymeleaf
● HTML Dinámico
Programación Avanzada/ UI Usuario
Conceptos fundamentales
El desarrollo web se divide, de forma general, en Front-end (la parte cliente) y Back-end (la parte
servidor).
El desarrollador Back-end se encarga de lo que no se ve, es decir, dónde se almacenan los datos. El
Back-end consiste en el servidor que acoge la web,
Programación Avanzada/ UI Usuario
Conceptos fundamentales
El Front-end esta conformado por tres tecnologías básicas
HyperText Markup Language, es decir, lenguaje de marcado de hipertexto. Su
funcionamiento se basa en la utilización de etiquetas que estructuran y organizan el
contenido de la web.
Cascading Style Sheets, la traducción sería hojas de estilo en cascada. Se encarga del
formato y diseño visual de las páginas web escritas en html.
Javascript: Lenguaje de scripting y tiene una programación más compleja. Se encarga de
hacer dinámico el diseño de la web. Utiliza animaciones y acciones interactivas con el
usuario. interactúa con HTML y CSS.
Programación Avanzada/ UI Usuario
Como están creados las paginas web
• Son documentos de texto
• Estos documentos están escritos en
HTML (Lenguaje de Marcado no de
Programación), utiliza Etiquetas de
marcados (tag)
• El navegador interpreta esos
documentos
Programación Avanzada/ UI Usuario
Como están creados las paginas web
HTML significa lenguaje de marcado de hipertexto, y le permite al usuario crear y estructurar
secciones, párrafos, encabezados, enlaces y elementos de cita en bloque para páginas web y
aplicaciones.
HTML no es un lenguaje de programación, lo que significa que no tiene la capacidad de crear una
funcionalidad dinámica. En cambio, hace posible organizar y formatear documentos, de manera
similar a Microsoft Word.
Etiqueta Inicio Etiqueta final
Contenido
Elemento
Programación Avanzada/ UI Usuario
Como están creados las paginas web
Tipo Documento
Inicio pagina web
Cabecera
Titulo
Cierre de Cabecera
Inicio Contenido
Cierre de Contenido
[Link] Fin pagina web
Fuente:
[Link]
Programación Avanzada/ UI Usuario
Estilos en Html
CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de
estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado
como HTML. CSS separa el contenido de la representación visual del sitio.
• Colores
• Espacios entre elementos
• Tipos de letra
• Etc..
Programación Avanzada/ UI Usuario
Estilos en html
En la hoja de estilo
En la página web (archivo .css) se
(archivo .html) se escribe cómo
escriben las etiquetas queremos que sea el
que definen estilo de presentación
categorías o de las etiquetas
elementos. (color, tamaño,
fuente, bordes,
márgenes, posición,
etc).
En la página web se
escribe qué hoja de
estilo queremos utilizar.
[Link]
Programación Avanzada/ UI Usuario
Estilos en html
Programación Avanzada/ UI Usuario
Estilos en HTML (Tipos de CSS)
Programación Avanzada/ UI Usuario
Estilos en HTML (Tipos de CSS)
[Link]
Programación Avanzada/ UI Usuario
Funcionamiento
Programación Avanzada/ UI Usuario
Funcionamiento
Programación Avanzada/ UI Usuario
Funcionamiento
● Bootstrap
Programación Avanzada/ UI Usuario
Funcionamiento
Bootstrap, es un framework originalmente creado por Twitter, que permite
crear interfaces web con CSS y JavaScript, cuya particularidad es la de
adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice.
Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una
Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como
“responsive design” o diseño adaptativo.
[Link]
Programación Avanzada/ UI Usuario
Plantillas
[Link]
templates?rating_min=4&sort=sales&term=bootstrap&view=grid#content
Programación Avanzada/ UI Usuario
Plantillas
Programación Avanzada/ UI Usuario
Plantillas - Estructura
Programación Avanzada/ UI Usuario
Plantillas - Estructura
[Link]
Programación Avanzada/ UI Usuario
Plantillas - Estructura
Carpetas que contienen los JS y CSS del proyecto
Programación Avanzada/ UI Usuario
Plantillas - Requiere
Componentes Necesarios
• Estilos y Diseño
• Pagina en blanco
• Diseño del formulario insertar
• Diseño de la tabla para listar
• Alertar y mensajes
• Paginación de tablas
Gracias
Responsabilidad con pensamiento positivo
Tareas
● Investigar mas tipos de consultas condicionales y aplicar 3 consultas
diferentes a cada entidad (total 15 consultas)
NOTA: El deber será enviado en formato rar, especificando su nombre y número de semana.
Ejemplo: Semana1_Mario_Pé[Link]