Creación de Vistas con Mockups y Vue.js

Clase 11 de 53 • Curso Profesional de Vue.js 2

En este ejercicio te proveemos un par de Mockups para que pongas en práctica los conocimientos adquiridos durante los videos anteriores y para que al final puedas crear con todo lo aprendido en este curso otra aplicación, con estilo muy profesional que sin lugar a dudas se verá muy bien en tu portafolio.

Recuerda que es muy importante compartir, así que te invito a crear tus propios mockups o compartir tu código en el sistema de discusiónes y a retroalimentar a más usuarios, revisando su código, ayudándolos a resolver errores e inclusive proponiendo mejoras.

Este es el segundo de los ejercicios que deberás realizar y más adelante darle vida utilizando vue.js:

Aquí encuentras a detalle las vistas que debes crear:

Manuel Ojeda

student•

Listo

Resultado

App.vue

<template>
  <div id="app">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">    
        <barra></barra>
        <sidebar></sidebar>

        <principal></principal>
  </div>
</template>

<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>

<script>
import barra from './components/barra';
import sidebar from './components/sidebar';
import principal from './components/principal';
export default {
  name: 'app',
  components: {
    barra, sidebar, principal
  },
  data () {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
</style>

barra.vue

<template>
    <div id="barra">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-12">
                    <img src="../assets/ejercicio2/logo.png" alt="" class="img-fluid">

                    <div class="usuario">
                        <img src="../assets/ejercicio2/user.png" class="img-fluid rounded-circle">
                        <p><b>Manuel Ojeda</b></p>
                    </div>
                    <input type="text" class="form-control" placeholder="Busca tu peli, actor, actriz o director favorito">

                </div>
            </div>
        </div>
    </div>
</template>

sidebar.vue

<template>
    <div id="sidebar">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mt-3">
                    <a href="#">
                        <i class="fas fa-home fa-3x"></i>
                        Home
                    </a>
                </div>
                <div class="col-12 text-center mt-3">
                    <a href="#">
                        <i class="fas fa-fire fa-3x"></i>
                        Trending
                    </a>
                </div>
                <div class="col-12 text-center mt-3">
                    <a href="#">
                        <i class="fas fa-heart fa-3x"></i>
                        Más likes
                    </a>
                </div>
                <div class="col-12 fixed-bottom">
                    <a href="#">
                        <i class="fas fa-cog fa-3x ml-2"></i> <br>
                        <span class="ml-2 mb-2">Ajustes</span>
                        <br>
                        <br>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

principal.vue

<template>
    <div id="principal">
        <div class="container-fluid my-3">
            <div class="row">
                <div class="col-12 mt-4">
                    <h4 class="text-left">
                        Ahora en el cine
                    </h4>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mt-4">
                    <h4 class="text-left">
                        Aclamadas por la critica
                    </h4>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mt-4">
                    <h4 class="text-left">
                        No te debes perder
                    </h4>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

main.scss

@import './bootstrap/bootstrap.scss';


html{
    height: 100%;
    body {
        @import url('https://fonts.googleapis.com/css?family=Lato');
        height: 100%;

        #app {
            height: 100%;
            #barra {
                box-shadow: 1px 1px 10px #aaa;

                img.img-fluid {
                @extend .mx-auto;
                @extend .d-block;

                max-width: 65px;
                margin-top: 5px;
                margin-bottom: 5px;

                @media(min-width: 992px) {
                    float: left;
                    margin-left: 20px !important;
                }
                }

                .form-control {
                    @extend .mx-auto;

                    max-width: 500px;
                    margin-top: 15px;
                    margin-bottom: 15px;
                    
                }

                .usuario {
                    text-align: center;

                    @media(min-width: 992px) {
                        float: right;
                        width: 100%;
                        max-width: 180px;

                        .img-fluid {
                        margin-top: 13px;
                        float: right;
                        max-width: 40px;
                        }

                        p {
                        margin-top: 20px;
                        }
                    }
                }
            }

            #sidebar {
                @media(min-width: 992px){
                    float: left;
                    width: 100px;
                    height: -webkit-fill-available;
                    background-image: linear-gradient(to right, #FF535B, #FD746C);
                }

                a{
                    color: #fff;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
            }

            #principal{
                font-family: 'Lato', sans-serif;
                .elemento{
                    a{
                        font-family: 'Lato', sans-serif;
                        color: #fff;
                        .sobreposicion{
                            position: absolute;
                            bottom: 0;
                            padding: 10px;
                            background-color: rgba(255, 83, 91, .5);
                            margin-right: 15px;
                            h4{
                                font-weight: bold;
                            }
                            p{
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}

Creación de Vistas con Mockups y Vue.js

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa