Este documento proporciona una introducción a Bootstrap y explica 30 clases útiles de Bootstrap para aplicar diseño y maquetado web de manera fácil. Explica clases para contenido, botones, imágenes, parrafos, tablas, formularios y menús, con ejemplos de código para cada una. El objetivo es ayudar a los lectores a aprender y aplicar Bootstrap de forma práctica para crear sus propios sitios web.
BLOGSPOT
Para comenzar, iremos al sitio de blogger: http://www.blogger.com/, donde nos encontraremos con la pantalla que vemos a continuación, y vamos a apretar el botón que dice CREAR TU BLOG AHORA.
BLOGSPOT
Para comenzar, iremos al sitio de blogger: http://www.blogger.com/, donde nos encontraremos con la pantalla que vemos a continuación, y vamos a apretar el botón que dice CREAR TU BLOG AHORA.
Tutorial de Blogger para el taller "Aprende a publicar tu propio blog" de la VIII Semana de la Ciencia en Madrid, que impartimos Fernando Paniagua y Tíscar Lara en noviembre de 2008 en la UC3M.
BLOGSPOT
Para comenzar, iremos al sitio de blogger: http://www.blogger.com/, donde nos encontraremos con la pantalla que vemos a continuación, y vamos a apretar el botón que dice CREAR TU BLOG AHORA.
BLOGSPOT
Para comenzar, iremos al sitio de blogger: http://www.blogger.com/, donde nos encontraremos con la pantalla que vemos a continuación, y vamos a apretar el botón que dice CREAR TU BLOG AHORA.
Tutorial de Blogger para el taller "Aprende a publicar tu propio blog" de la VIII Semana de la Ciencia en Madrid, que impartimos Fernando Paniagua y Tíscar Lara en noviembre de 2008 en la UC3M.
Si bien los hospitales conjuntan a profesionales de salud que atienden a la población, existe un equipo de organización, coordinación y administración que permite que los cuidados clínicos se otorguen de manera constante y sin obstáculos.
Mario García Baltazar, director del área de Tecnología (TI) del Hospital Victoria La Salle, relató la manera en la que el departamento que él lidera, apoyado en Cirrus y Estela, brinda servicio a los clientes internos de la institución e impulsa una experiencia positiva en el paciente.
Conoce el Hospital Victoria La Salle
Ubicado en Ciudad Victoria, Tamaulipas, México
Inició operaciones en el 2016
Forma parte del Consorcio Mexicanos de Hospitales
Hospital de segundo nivel
21 habitaciones para estancia
31 camas censables
13 camillas
2 quirófanos
+174 integrantes en su plantilla
+120 equipos médicos de alta tecnología
+900 pacientes atendidos
Servicios de +20 especialidades
Módulos utilizados de Cirrus
HIS
EHR
ERP
Estela - Business Intelligence
Los desafíos de calidad de software que nos trae la IA y los LLMsFederico Toledo
En esta charla, nos sumergiremos en los desafíos emergentes que la inteligencia artificial (IA) y los Large Language Models (LLMs) traen al mundo de la calidad del software y el testing. Exploraremos cómo la integración, uso o diseño de modelos de IA plantean nuevos retos, incluyendo la calidad de datos y detección de sesgos, sumando la complejidad de probar algo no determinístico. Revisaremos algunas propuestas que se están llevando adelante para ajustar nuestras tareas de testing al desarrollo de este tipo de sistemas, incluyendo enfoques de pruebas automatizadas y observabilidad.
Escaneo y eliminación de malware en el equiponicromante2000
El malware tiene muchas caras, y es que los programas maliciosos se reproducen en los ordenadores de diferentes formas. Ya se trate de virus, de programas espía o de troyanos, la presencia de software malicioso en los sistemas informáticos siempre debería evitarse. Aquí te muestro como trabaja un anti malware a la hora de analizar tu equipo
1. ESCUELA SUPERIOR FRANCISCANA ESPECIALIZADA
ESFE/AGAPE
CLASES BÁSICAS DE
BOOTSTRAP
Bootstrap para niños
Luis Alonso Guzmán Espinoza
ALUMNO ESFE/AGAPE CICLO II
Jonathan William Cheverria Molina
DOCENTE ESFE/AGAPE CICLO II
2. 1http://codigocrack.blogspot.com/
TABLA DE CONTENIDO:
CONOSCAMOS EL FRAMEWORK DE DISEÑO BOOTSTRAP ............................ 2
VEAMOS LA PRACTICA ........................................................................................ 2
CREACION DEL DOCUMENTO............................................................................. 3
AGREGADO DE BOOTSTRAP CDN...................................................................... 4
TREINTA CLASES PARA APLICAR DISEÑO CON BOOTSTRAP ........................ 5
CONTENIDOS Y PARRAFOS ................................................................................ 5
BOTONES............................................................................................................. 10
IMÁGENES ........................................................................................................... 16
PARRAFOS........................................................................................................... 20
TABLAS ................................................................................................................ 25
FROMULARIOS.................................................................................................... 29
MENUS ................................................................................................................. 30
3. 2http://codigocrack.blogspot.com/
CONOSCAMOS EL FRAMEWORK DE DISEÑO BOOTSTRAP
Te has hecho alguna vez preguntas como: ¿qué es un
framework?, ¿para qué sirven las framework? o incluso
te has preguntado ¿en qué me beneficia el uso de una
framework para el desarrollo de páginas web? Pues a
través de este escrito podrás conocer treinta clases de
Bootstrap con la cual podrás practicar diseño y
maquetado de tu propio sitio web de una manera súper
fácil la cual incluirá procesos ilustrativos en la aplicación
de esta framework.
Debes de tener en cuenta que, para crear tu sitio web y tu diseño con esta
framework tienes que poseer conocimientos previos de HTML, CSS y
JAVASCRIPT para que encuentres fácil el desarrollo web. Como ya te pude
comentar como está diseñado Bootstrap ahora te explicare que un framework es
un ambiente de trabajo que facilita ciertos aspectos al momento de crear ya sea
diseño, funcionamiento o atajos para optimizar el desarrollo de software.
Cada etiqueta HTML posee un estilo dentro de Bootstrap el cual es aplicado
mediante clases dentro de ellas.
VEAMOS LA PRACTICA
A continuación, te mostrare como utilizar Bootstrap a través de la famosa
CDN que podemos encontrar en el sitio http://getbootstrap.com/getting-started/
4. 3http://codigocrack.blogspot.com/
CREACION DEL DOCUMENTO
Para iniciar la parte práctica te invito a que elijas un editor de texto y crees
tú documento index.html, le aplicas su estructura básica y lo guardas en el lugar
de tu preferencia, en mi caso para explicarte utilizare Sublime Text 3.
5. 4http://codigocrack.blogspot.com/
AGREGADO DE BOOTSTRAP CDN
Como ya tenemos nuestro documento HTML creado, nos ubicaremos abajo
de la etiqueta de cierre </title> y pegamos ahí el código CDN que nos genera
la página de Bootstrap como se muestra a continuación.
Este conjunto de links corresponden a la famosa Bootstrap CDN, esto
quiere decir que para utilizar esta framework de diseño podemos obtner de
manera remota (internet) nuestra hoja de estilos y nuestro archivos JavaScript.
Toma en cuenta que esta forma es opcional ya que tambien puedes
descargar el paquete de archivos de Bootstrap y llamarlos desde la carpeta de
CSS y JS como normalmente la mayoria de programadores lo hace como buena
practica de programación.
Los primeros dos links correponden a archivos css o comunmente
conocidos como hoja de estilos, mientras que el ultimo correponde a un script JS
con el cual se pueden aplicar efectos modales (ventanas flotantes y más).
1
2
3
6. 5http://codigocrack.blogspot.com/
TREINTA CLASES PARA APLICAR DISEÑO CON BOOTSTRAP
CONTENIDOS Y PARRAFOS
1. container
Esta clase permite que a través de la etiqueta HTML <div> se pueda crear un
contenedor para crear un conjunto de columnas dentro de ella.
Como no disponemos de más objetos dentro de nuestro <div> no nos
aparecerá nada en el navegador si corremos nuestro archivo index.html
7. 6http://codigocrack.blogspot.com/
2. row
Esta clase se aplica en la mayoría de los casos dentro del div con la clase
container, la cual indica que dentro del contenedor (div con la clase container)
habrá una fila (clase row).
3. col-md-*
Como ya expliqué que la clase container es un contenedor de filas y
columnas, es momento que conozcas que estas en Bootstrap no se les conoce
como columnas sino como rejillas ya que esta framework secciona tu
navegador en doce columnas, por lo cual se utilizan de la siguiente forma.
Como puedes ver cada col-md-1 corresponde a una columna o una rejilla,
ahora te invito a que trates de hacer una fila que tenga dos columnas y que cada
una sea de seis rejillas.
8. 7http://codigocrack.blogspot.com/
Resultado:
Como puedes ver en este ejemplo a cada col-md-* le coloque el numero 6
ya que sé que la pantalla de mi navegador está dividida en 12 sejillas; entonces
como solo necesitaba 2 columnas, lo que hice fue dividir el total entre las sejillas
que necesito de esta forma 12 / 2= 6. Como puedes ver me dice que cada col-md
tendrá 6.
9. 8http://codigocrack.blogspot.com/
4. Container-fuid
Como puedes ver la clase container por defecto te coloca un margen entre
derecha e izquierda, sino te parece puedes aplicar esta clase y mira lo que ocurre.
Como puedes ver el margen que anteriormente te aplicaba, con esta clase
ha desaparecido y te ha colocado los dos párrafos en la pantalla desde el punto
cero de la izquierda hasta el punto cero de la derecha.
10. 9http://codigocrack.blogspot.com/
5. Lead
Esta clase se aplica a la etiqueta <p> para hacer un tipo de escritura atractiva
(más grande de lo normal
¿Puedes ver la diferencia? Si te fijas detenidamente en el código te podrás dar
cuenta que la etiqueta <p> de la primera columna le aplique la clase lead y a la
segunda no, por esa razón nos creó un párrafo más atractivo a la izquierda.
11. 10http://codigocrack.blogspot.com/
BOTONES
Si puedes ver, así como hay estilos para contenidos y sejillas, de igual
manera hay estilos para botones.
6. Btn
Esta clase se coloca sobre la etiqueta <button> y produce un efecto de botón
como que si fuera una app de escritorio.
Como puedes ver el efecto se le coloco al botón de la derecha y al de la izquierda,
lo hago de esta manera ya que es un ejemplo básico de esta explicación de
Bootstrap.
12. 11http://codigocrack.blogspot.com/
7. btn-primary
Esta clase permite que nuestros botones tomen un estilo color azul mate y se
complementa con la clase anterior (btn) de la siguiente manera:
Como puedes ver al botón de la izquierda le colocamos la clase, por la cual
tomo ese estilo color azul mate, ahora puedes crear tus propios botones con la
clase btn-primary.
17. 16http://codigocrack.blogspot.com/
IMÁGENES
A continuación, te mostrare algunos estilos que ofrece Bootstrap para la
inserción de imágenes en tu app web.
12. img-responsive
Esta clase permite que nuestras imágenes tomen un estilo responsivo, esto
quiere decir que la imagen se acoplara perfectamente a cualquier dispositivo.
Pantalla de PC.
SmartPhone