El post que buscas se encuentra eliminado, pero este también te puede interesar

Bootstrap 3 [Tutorial]

Anuncios


Bootstrap 3 [Tutorial]
A continuación una serie de Tutoriales de Bootstrap 3 (El Framework CSS de Twitter, que si te gusta la programación web tenes que aprender)
video tutorial
web

html
css
Vamos a los bifes: www
(como decimos los Argentinos, en otros países se dice "al grano", pero nosotros preferimos la carne )

tutorial
Título: Introducción.

Sinopsis: En esta oportunidad tratare la introducción a Twitter Bootstrap 3. Este video es el comienzo de toda una guía, que estamos preparando para ustedes.

En este primer video veremos:
¿Qué es Twitter Bootstrap?
Origen
Características
Ejemplos de paginas creadas con este framework
y las Herramientas para empezar a crear un Proyecto.

Video:

link: http://www.youtube.com/watch?v=Qkiw1mZH_sk&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

Maquetación
Título: Prototipado e inicialización del proyecto

Sinopsis: En esta guía explicamos en que consiste el prototipado, su importancia y mostramos varios ejemplo de manera didáctica.
Juntos creamos un propio mockup (wireframing, maqueta, prototipado, etc), el cual será el proyecto que se desarrollará paso a paso en cada guía.

Video:

link: http://www.youtube.com/watch?v=w4CoiprNYPI&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

programación web
Título: Sistema de rejillas (grid system) y container en Bootstrap 3.

Sinopsis: En esta guía se explican el uso de las grillas y de contenedores para la ubicación de los elementos, se aplica brevemente responsive web design en grid system.

Video:

link: http://www.youtube.com/watch?v=CvyZJaym9rM&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

bootstrap
Título: Aplicando grid system (sistema de rejillas)

Sinopsis: En esta guía se realiza a nivel de código el maquetado de nuestro proyecto (página) haciendo uso de diversos Containers y del Grid System, también se hace uso de las diversas bondades de sublime text, que nos facilita la manipulación de código.

Video:

link: http://www.youtube.com/watch?v=FvylfQxToZE&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

Bootstrap 3
Título: Header con Twitter Bootstrap 3

Sinopsis: En esta guía se da comienzo a la creación de los componentes de nuestra pagina, como inicio elaboramos nuestro header, haciendo uso de tipos de letras como las de google fonts como también hacemos uso de imagines, para una buena presentación de nuestra pagina como debe ser todo desarrollo front end.

Video:

link: http://www.youtube.com/watch?v=2urKZrqv3l8&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

Bootstrap 3 [Tutorial]
Título: Barra de navegación y Menú

Sinopsis: Otro elemento bastante típico y común en muchas páginas web es la zona de navegación, formada por enlaces a las zonas principales de la web, o por un menú de navegación, desplegable de enlaces, etc.
En esta guía creamos nuestra barra de navegación que tendrá la característica de ser responsiva.

Material y Código:
https://github.com/DevCodela/Guia-Bootstrap-3

Video:

link: http://www.youtube.com/watch?v=sLos6pkMXK8&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

video tutorial
Título: Slider (Carousel)

Sinopsis: En esta guia creamos nuestro slider o también llamado carrusel, el cual se suele introducir como una forma de destacar contenidos y que tenga dinamismo la web.
Recordar que pueden personalizarlos como ustedes gusten, existen diversos diseños con sus respectivos efectos que nos trae este gran framework como lo es Bootstrap 3.

Material y Código:
https://github.com/DevCodela/Guia-Bootstrap-3

Video:

link: http://www.youtube.com/watch?v=zhIJ_TYcuvY&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

web
Título: Contenidos personalizados - imágenes

Video:

link: http://www.youtube.com/watch?v=5dOJx8O7ZZE&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

html
Título: Contenidos personalizados: Video y footer

Sinopsis: Con esta guía damos por concluido la guía del framework bootstrap 3. Terminamos de crear los demás elementos de manera muy didáctica, video responsivo y se muestra las bondades del plugin Emmet, que nos ayuda a que la codificación sea mas fácil, el uso de multi-cursores y más.

Material y Código:
https://github.com/DevCodela/Guia-Bootstrap-3

Video:

link: http://www.youtube.com/watch?v=2aNrFjFXRqc&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

css
¡Excelente trabajo de los muchachos de DevCode!
www
tutorial
Fuente:
http://devcode.la/

http://www.youtube.com/watch?v=Qkiw1mZH_sk&list=PLQCgNGUqLK4n0rd3a6Lozw9ys_A-wSuwg

https://www.facebook.com/DevCode.la

https://twitter.com/DevCodela

http://es.wikipedia.org/wiki/Twitter_Bootstrap
Maquetación
(Lo comparto porque me pareció realmente muy bueno, y no lo encontré posteado aún)

Espero que les sea de utilidad...

¡Saludos!
programación web
* Porfavor no hacer comentarios ofensivos
bootstrap

7 comentarios - Bootstrap 3 [Tutorial]

@DevcodeLa +1
Muchas gracias por compartir nuestro contenido, tenemos mas videotutoriales gustosos de que lo puedas seguir difundiendo.
@zdedany
Un placer amigos... ¡Qué bueno verlos por aqui!
¡Cuenten con la difusión!

Por cuestiones de tiempo, no he armado nuevo post... Pero con gusto lo haré en breve... ¿Cuál de sus videos nuevos les gustaría que comparta primero?

¡Un abrazo grande amigos!

¡Gracias por compartir su experiencia!
@DevcodeLa +2
@zdedany saludos. Actualmente en DevcodeLa: https://www.youtube.com/user/DevCodela tenemos cursos de Django, Ruby on Rails, Laravel, Javascript, JQuery, Less, Backbone.js y Python en otros, cualquiera de estos cursos nos ayudaría bastante el que los puedas compartir. Podrías comenzar con Django que tiene bastante aceptación. Cualquier duda o sugerencia, no dudes en hacérnosla saber, así mismo tenemos predisposición para realizar hangouts gratuitos con universidades para compartir nuestros
@zdedany
@DevcodeLa En breve vamos con eso!
Un gran abrazo a los amigos de DevCode!! Además voy a tener en cuenta tu comentario sobre hangouts con universidades! (Muy interesante la idea...)
@wualdoilo +1
Excelente material muy claro todos los ejemplos.
Saludos.
@zdedany -1
¡Gracias por tu comentario amigo! ¡Qué lo disfrutes!

Un abrazo
@NaHueLs_MdP +1
gracias me viene perfecto !
@zdedany -1
Gracias a vos por pasar! Qué alegría que te sirva, para eso estamos, yo agradecido con la gente de DevCode por su gran trabajo, te recomiendo su sitio web!

Un abrazo amigo
@notelapuedo +1
muy bueno! muchisimas gracias! vale la pena ponerse a toquetear estas cositas que nos ayudan a desarrollar mas rapido. recomiendo 100 % el tutorial. a usar bootstrap en mis proyectos desde hoy!
@zdedany -1
¡No hay de qué amigo! Es un verdadero placer saber que te es útil...
Yo también lo recomiendo totalmente...

Consejo: No dejes de seguir los tutoriales de @DevcodeLa

¡Un abrazo!

Muchas gracias por tu comentario
@Alex_zoUl
Muchas gracias justo lo que estaba buscando!!! Excelente recopilación !!!

Ahora a ponerlo en practica!! je
@zdedany -1
Gracias por pasar amigo, ¡qué lo disfrutes!

Un abrazo