UTB Edupol convenio desarrollo software Bootstrap

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

UTB Edupol convenio desarrollo software Bootstrap

Recommended

Recommended

More Related Content

Similar to UTB Edupol convenio desarrollo software Bootstrap

Similar to UTB Edupol convenio desarrollo software Bootstrap (20)

More from Edison Monsalve

More from Edison Monsalve (20)

Recently uploaded

Recently uploaded (20)

UTB Edupol convenio desarrollo software Bootstrap