Fedesoft Bootstrap UTB

Taller Fedesoft / UTB / Edupol @morpheusco
#BootstrapEnLaUTB
Tecnología en Desarrollo de Software
Convenio UTB Edupol

#BootstrapEnLaUTB
¿Quién soy yo?
Edison Monsalve C.
Coordinador Programa TDS
Cacharrero de corazón
@morpheusco
Especialista en Sistematización y Gestión de Datos

#BootstrapEnLaUTB
¿Cómo disfrutársela?
#BootstrapEnLaUTB
cc @morpheusco
Dropbox

#BootstrapEnLaUTB
Algo sobre la UTB
Cartagena de indias
Universidad privada, de los gremios para la ciudad
Acreditada Alta Calidad

#BootstrapEnLaUTB
Llegando a
más de 100
municipios.
Más de 40 años.
Programas
Virtuales y a
Distancia

#BootstrapEnLaUTB

#BootstrapEnLaUTB
Tecnología en
Desarrollo de
Software
6 Semestres
Líneas definidas
Programación
Bases de Datos (SQL)
Ambientes Web

#BootstrapEnLaUTB
Sobre la UTB y Edupol

#BootstrapEnLaUTB
El convenio UTB Edupol
Modalidad Polimodal
•Escrito
•Virtual
•Presenciales - Teleclases
•Apoyo al estudiante
Financiación
Centros de Apoyo
Universitario

#BootstrapEnLaUTB
Cómo ingresan
Estratos 1 y 2 en su mayoría
Plan padrino
MinTIC
Directamente con opciones de beca

#BootstrapEnLaUTB
Concurso: #MeProgramoConLaUTB
www.meprogramoconlautb.com
Puedes ganar beca 100% en la carrera
hasta 6 semestres,
sujeto a promedio académico

#BootstrapEnLaUTB
¿Existe
mercado para
el desarrollo de
software?
Si.
¿Qué tan
bueno eres?

#BootstrapEnLaUTB
Concepto
Expertos e investigadores – y
no los de radioactiva XD –
pro” de estandarizarlo todo.
“Estándares y datos permiten
se mide, no se mejora y lo que no
estandariza, no se usa"

#BootstrapEnLaUTB
Tecnologías Web

#BootstrapEnLaUTB
Otras Tecnologías, pero no las veremos
aquí.
JADE
SCSS
OOCSS
BEM
SMACSS
SASS
LESS
(Pero deberían echarles un vistazo)

#BootstrapEnLaUTB
Desde el sketch hasta el mockup funcional

#BootstrapEnLaUTB
De donde viene todo este movimiento de
móviles
Es simple, a mayor cantidad de móviles, mayor
necesidad de sitios web enfocados a móviles
"moviles first"
Tu mismo, haces consultas en tu móviles y hasta
compras

#BootstrapEnLaUTB
¿Qué hizo Google?
Buscando la mejor experiencia de usuario, exige
que evoluciones para el usuario y ese usuario
ahora usa móviles.

#BootstrapEnLaUTB
¿Cómo se hacía antes?
Cuando no teníamos sino pocos modelos de
móviles, algunos creaban sitios web con enfoque
a esos modelos.
Parecido a "Optimizado para Internet Explorer"
Otros creaban una web oficial y otra para móviles
•¿Problemas?

#BootstrapEnLaUTB
¿La pregunta de aquel momento?
• ¿Si HTML desde su comienzo se adaptaba al
contenedor, porqué no volvemos a eso?
• ¿No sería super tener una sola web y que los
contenidos se adapten?
• ¿La mezcla entre responsive y adaptative, esto
qué es?
• ¿y si yo tengo los dedos grandes?

#BootstrapEnLaUTB
Marcas que se adaptan

#BootstrapEnLaUTB
Otros problemas de la vida real
• Múltiples hacks sin ser hackers
• La pesadilla de la transición
• La eterna frase "Un programador no diseña, un
diseñador no programa"
• ¿Cómo hacemos que se comuniquen los
responsables de la web?
• ¿Existe el webmaster?

#BootstrapEnLaUTB
Frameworks a la ayuda
¿Porqué no re utilizar código?
¿Aprovechamos las librerías?
¿Recuerdan el hack de Yahoo - el reset?
Modernizer

#BootstrapEnLaUTB
El camino ...
Boilerplate
Foundation
Otros ...

#BootstrapEnLaUTB
Los editores y sus complementos
Notepad++
Sublime Text
Brackets
Atom
(Quoda, Quanta, NVU)

#BootstrapEnLaUTB
El enfoque de Twitter
OOCSS - y así nos vamos poniendo de acuerdo.
Integremos lo bueno
Compartamos y así crece

#BootstrapEnLaUTB
Conceptos básicos
Default
Success
Info
Alert
Warning
Danger
(Tu les pones el color, pero ya significan algo)

#BootstrapEnLaUTB
Objetos
Panels
Carrousel
Alerts
Img Responsive
Modals
Btn - Forms
Navs, Tabs, etc.
Accordion
(Otros +)

#BootstrapEnLaUTB
El Grid
Doce columnas (pueden ser más)
8+4 es así de simple
Cada fila un row
Meta todo en un contenedor (Container o
Container-fluid)
Agítese y sírvase bien frio.

#BootstrapEnLaUTB
Otras alternativas
• Foundation
• ED Grid

#BootstrapEnLaUTB
La semántica
No te la coloca ningún
framework, "La energía la
pones tú" :-)
Pensar primero - mockups,
wireframes, etc.
Hay que extenderlo
Usar CDN
¿WebFonts?

#BootstrapEnLaUTB
<header>
<aside>
<section> <aside>
<article>
<article>
<div>
<div>
<footer>
<nav>
<aside>
<nav>

#BootstrapEnLaUTB
Externos
Snippets
Editores online
Plugins para editores

#BootstrapEnLaUTB
Y no todos los
retos son de
tecnología o de
código puro.

#BootstrapEnLaUTB
Nuestro proceso ágil
Sketch Wireframe Mockup Prototipo

#BootstrapEnLaUTB
A trabajar
Sketchs, Mockups, wireframes, Prototipos
Ejemplo: Despiece hacia PHP

#BootstrapEnLaUTB
Optimizando
Integración con tecnologías
Usar lo necesario
Cambiar el theme
Otras actividades

#BootstrapEnLaUTB
http://www.ninjamock.com/
Útil para la creación de
wireframes – incluso
prototipos funcionales.
Servicio gratuito online

#BootstrapEnLaUTB
http://www.layoutit.com/
Útil para la creación de
prototipos funcionales.
Basado en Bootstrap
Útil para iniciar.

#BootstrapEnLaUTB
http://getbootstrap.com/
Implementa modernizar
Implementa responsive
Hacks para IE
Font awesome
Otras características

#BootstrapEnLaUTB
http://bootsnipp.com/
Más y más recursos

#BootstrapEnLaUTB
¿Preguntas?
Hágale, "sin miedo"

#BootstrapEnLaUTB
Universidad Tecnológica de Bolívar
Tecnología en Desarrollo de Software
Convenio UTB Edupol
Edison Monsalve C.
edison.monsalve@utbvirtual.edu.co
@morpheusco

Fedesoft Bootstrap UTB

Más contenido relacionado

Similar a Fedesoft Bootstrap UTB

Más de Edison Monsalve

Último

Fedesoft Bootstrap UTB