Introducción a Component CSS, front-end del futuro

Clase 28 de 61 • Curso de JavaScript y jQuery 2015

Contenido del curso

Bienvenidos

1
¿Dónde aprender JavaScript actualizado?
00:16 min

Introducción a JQuery

Eventos, callbacks y AJAX

Optimización en JQuery

Complementos del curso

Proyecto: Marvel Card Game

Introducción al Front-end: Componentes, Stylus y Jade

ECMAScript 6, AJAX y Promises

LocalStorage, Latencia y Plantillas con ECMAScript6

Introducción a Single Page Apps

Optimiza tu Single Page App con Browserify Y Gulp

Livereload, Express y Node.js

Tomar examen

Comentarios

George Zambrano

student•

Hola Leonidas, una pregunta y cómo estructurarías los componentes si tu app tiene varias páginas y no es Single Page Application.
En el curso mencionaste esta solución, que detallo. Es la arquitectura que mencionastes? Asimismo, como separarías en componentes un formulario?

-index.html
-public
-css
app.css
-images
-javascript
-lib
-contact -------> página
-user -------> componente
template.jade
styles.styl
-map -------> componente
template.jade
styles.styl
-help --------> página
-faq ---------> componente
template.jade
styles.styl

Daniel Cueto

student•

Me parece una forma interesante de hacerlo. Otra forma que me parece muy razonable es separar las vistas por apps, y tener en cada app un directorio con lib y public.

Javier Ignacio Caicedo Samboni

student•

Que buen aporte. Me gusta la estructura de directorios propuesta de CCSS

styles  
    ├── bootstrap.css  
    ├── ext  
    │   ├── bootstrap  
    │   │   ├── _settings.scss  
    │   │   └── bootstrap.scss  
    │   └── font-awesome  
    │       └── font-awesome.scss  
    ├── font-awesome.css  
    ├── images.css  
    ├── main.css  
    └── scss  
        ├── _config.scss  
        ├── base  
        │   ├── _animation-classes.scss  
        │   ├── _base-classes.scss  
        │   ├── _base.scss  
        │   └── images.scss  
        ├── components  
        │   ├── directives  
        │   │   ├── _empty-state.scss  
        │   │   ├── _legend.scss  
        │   │   └── _status-message.scss  
        │   ├── pages  
        │   │   ├── _404.scss  
        │   │   └── _redirect.scss  
        │   └── standard  
        │       ├── _alarm-state.scss  
        │       ├── _graph-message.scss  
        │       └── _panel.scss  
        ├── main.scss  
        ├── mixins  
        │   ├── _animation.scss  
        │   ├── _bem.scss  
        │   └── _icon.scss  
        └── themes  
            └── _light.scss

Edison Osorio

student•

Genial!! Gracias por la información...

Alexander Valencia

student•

Raúl Segura Nabarret

student•

/introducing-ccss-component-css/

Raúl Segura Nabarret

student•

Naming Conventions – Simplified BEM

u-className – Global base/utility classes
img-className – Global image classes
animate-className – Global animation classes
ComponentName – Standard Components (B)
ComponentName-elementName – Component’s Element (E)
ComponentName--modifierName – Component’s Modifier (M)

/introducing-ccss-component-css/

KEVIN BRAYAN LUNA FIGUEROA

student•

Excelente información!!
Espero aprender mucho sobre este tema

styles  
    ├── bootstrap.css  
    ├── ext  
    │   ├── bootstrap  
    │   │   ├── _settings.scss  
    │   │   └── bootstrap.scss  
    │   └── font-awesome  
    │       └── font-awesome.scss  
    ├── font-awesome.css  
    ├── images.css  
    ├── main.css  
    └── scss  
        ├── _config.scss  
        ├── base  
        │   ├── _animation-classes.scss  
        │   ├── _base-classes.scss  
        │   ├── _base.scss  
        │   └── images.scss  
        ├── components  
        │   ├── directives  
        │   │   ├── _empty-state.scss  
        │   │   ├── _legend.scss  
        │   │   └── _status-message.scss  
        │   ├── pages  
        │   │   ├── _404.scss  
        │   │   └── _redirect.scss  
        │   └── standard  
        │       ├── _alarm-state.scss  
        │       ├── _graph-message.scss  
        │       └── _panel.scss  
        ├── main.scss  
        ├── mixins  
        │   ├── _animation.scss  
        │   ├── _bem.scss  
        │   └── _icon.scss  
        └── themes  
            └── _light.scss

Introducción a Component CSS, front-end del futuro

Bienvenidos

¿Dónde aprender JavaScript actualizado?

Introducción a JQuery

Preguntas antes de la clase

El desarrollo web moderno

Configurando y agregando jQuery

Uso de selectores en jQuery

Teoria de Objetos en jQuery

Objetos de jQuery

Preguntas y respuestas en clase

Eventos, callbacks y AJAX

Preguntas antes de la clase

Teoria sobre eventos y callbacks

Uso de eventos onClick y AJAX

Callbacks y efecto spinner

Promises en jQuery

Persistencia de datos con Local Storage

Preguntas y respuestas en clase

Optimización en JQuery

Preguntas antes de la clase

Efectos y transiciones con jQuery

Herramientas adicionales: ¿Qué es NPM?

Integración y configuración de NPM

Optimización para producción

Modulando el proyecto usando Browserify

Preguntas y respuestas en clase

Complementos del curso

Guia completa sobre ECMAScript 6

VanillaJS vs jQuery

Mejorar el performance de jQuery

Selectores con jQuery

Usando un plugging de jQuery desde NPM