Mantente actualizado


Síguenos en Facebook y Twitter
Suscríbete a nuestro Canal de Telegram

Regístrate y gana dinero

Crea tus posts (música, películas, libros), acorta los enlaces con el sistema que prefieras para descargar (la mitad para ti, lo demás para el sitio) y quédate con las ganancias. Entre más posts tengas, el número de enlaces crecerá, lo que significa que ganarás más. Regístrate o inicia sesión si ya tienes una cuenta
Más información

¿Te gusta nuestro sitio?

Suscríbete y recibe nuestros posts en tu correo

Curso V2B: HTML5 práctico: Scroll y presentación de contenidos

Por gully_foyle en Cursos Video2brain
septiembre 10, 2018. Actualizado el septiembre 10, 2018
#Diseño web #Estándares web #CSS 3 #HTML 5 #Experiencia de usuario #HTML5 prático scroll y presentación de contenidos #Cursos Video2brain #V2B html5 práctico

HTML5 práctico: Scroll y presentación de contenidos

Muestra contenidos web de forma dinámica y original

Por Jorge González Villanueva | 34 Videos (3:02 horas)

Introducción a HTML5 práctico scroll y presentación de contenido

Los efectos de scroll aplicados sobre páginas HTML5 son útiles debido a la necesidad de facilitar la navegación a los usuarios de dispositivos móviles que entran en nuestro microsites. Pero en vez de ser una limitación, el uso de estructuras verticales ha servido para añadir atractivo a nuestras páginas gracias a la combinación de animaciones de distinto tipo, e incluso a aportarles información. En este curso aprenderás a crear este tipo de efectos en tres ejemplos basados en JavaScript y CSS, que van a empezar con un ejemplo simple de parallax, para terminar con otro un poco más complejo y así abarcar las distintas opciones de efectos de scroll que podemos añadir a nuestros front-ends.

Contenido del curso

1. Efectos parallax simples para contenidos single page

Este ejercicio va a consistir en crear diferentes efectos de scroll en paralelo a lo largo de páginas estructuradas como single page. Crearemos un microsite con una navegación atractiva, y todo ello muy fácilmente.

  1. Por qué crear animaciones para webs usando scroll   02:17
  2. Diferentes librerías para crear efectos parallax   06:15
  3. Estructura del HTML para implementar efectos parallax   05:57
  4. Maquetación de los contenidos con CSS   07:28
  5. Aplicando estilos de diseño con CSS   06:25
  6. Aplicando parallax a los contenidos   06:45
  7. Elementos fijos en combinación con elementos móviles   07:23
  8. Preparando la página para su visualizacion en versión móvil   07:22

2. Combinación de animación horizontal y vertical

En muchos casos, la simple navegación vertical no es suficiente: En este ejercicio vamos a mezclar el uso del scroll con efectos parallax con la navegación horizontal para moverse entre apartados, y con ello tendremos todo un sistema complejo y atractivo de navegación.

  1. Descripción básica del proyecto de navegación   02:21
  2. AngularJS para el control de la estructura del proyecto   03:52
  3. Estructura del HTML principal   06:21
  4. Maquetación de los contenidos principales   04:57
  5. Generación del menú de contenidos.   08:03
  6. Formateo de la portada   02:58
  7. Integración de AngularJS en la aplicación web   05:03
  8. Estructura de los contenidos del nivel secundario   07:28
  9. Animaciones horizontales en el segundo nivel de contenidos   04:44
  10. Mejora de los contenidos secundarios   05:44
  11. Aplicación del sistema de animación vertical   08:37
  12. Ajustes finales en la app de animación horizontal y vertical   06:53
  13. Modificaciones para dispositivos móviles   04:39

3. Técnicas de control avanzado de contenidos mediante el scroll

Este capítulo va a servir como ejemplo de uso de un sistema de scroll creativo que, además de permitir ir accediendo a los contenidos, añade animación a la escena aportando así información visual a las imágenes y el texto.

  1. Descripción del proyecto de scroll   01:39
  2. La librería ScrollMagic   03:23
  3. Estructura del HTML de nuestra aplicación de scroll   04:18
  4. Estilos básicos para la estructura de la aplicación   05:08
  5. Escena del establo   08:16
  6. Escena del huevo   08:16
  7. Recuperación de información del scroll   03:34
  8. Escena del pollo rompiendo el huevo   08:01
  9. Escena del pollo caminando   05:03
  10. Escena de los carteles   04:10
  11. Escena de la gallina y cambio de color del final   03:33
  12. Aplicando un callback   02:17
  13. Finalización del contenido para dispositivos móviles  03:02

Ficha técnica

  • Nombre del archivo: V2B_html5_5cr0ll_pr353nt4c10n_c0nt3n1d05.rar
  • Peso: 552 MB
  • Nombre del curso: HTML5 práctico: Scroll y presentación de contenidos
  • Formadora: V2B | Video2Brain
  • Servidores de descarga: Mega.nz / pCloud / Google Drive

Imágenes del curso

La librería scrollmagic v2b

Integración de AngularJS en la aplicación web

Enlaces de descarga

Reportar este post (sólo en casos de enlaces caídos, si tienes una queja o sugerencia utiliza la caja de comentarios)

¡Difunde nuestro sitio!

Descargar más de Cursos Video2brain

Curso Video2Braian Excel 2016 básico

enero 01, 2018 Por @tuning-hack en Cursos Video2brain
Etiquetado:

Información de: Curso Excel 2016 básico En este curso de Excel 2016 conocerás las nuevas funcionalidades para creación y edición de hojas de cálculo para ser más rápido y productivo, ya seas un usuario experimentado de Excel o si es la primera vez que lo utilizas. Aprenderás las mejores t...

Curso Facebook Negocios Creacion y Configuracion de Paginas

diciembre 26, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #

  Usar correctamente las redes sociales puede marcar la diferencia entre el éxito o el fracaso de la presencia de un negocio en internet. En este curso video2brain aprenderás a discernir entre cada una de ellas, y a sacar provecho a sus ventajas y sus beneficios. Conocerás la manera de crear y d...

Visual C++: Programación de Aplicaciones para Windows

diciembre 28, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #

Visual C++: Programación de Aplicaciones para Windows Crea tu propios programas ejecutables para Windows usando este poderoso y flexible lenguaje de programación. Con este curso aprenderás a crear proyectos en Visual Studio, los elementos esenciales de programación en MSVC++ y a crear interfaces...

Administración de Servidor Linux

diciembre 28, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #

Instala y gestiona tu propio servidor Linux con este curso, en el que te enseñaremos, paso a paso, a gestionar mediante la línea de comandos un servidor y donde verás que crear, gestionar y administrar tu propio servidor no es tan difícil como pueda parecer en un principio. AVANZADO: Aprende a ...

Curso video2brain: PowerPoint 2016 básico

noviembre 25, 2016 Por @gully_foyle en Cursos Video2brain
Etiquetado: #curso #power point #2016 #video2brain #mega

Descargar Curso video2brain: PowerPoint 2016 básico PowerPoint 2016 básico Aprende a crear, editar y compartir tus presentaciones con PowerPoint 2016. Portada del curso Aprende a utilizar PowerPoint 2016, el famoso y popular programa de Office para hacer presentaciones audiovisuales. En este curs...

Seguridad en PHP

diciembre 28, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #

La seguridad en PHP no debe tomarse a la ligera ni puede realizarse en una sola acción, ya que es una disciplina que debemos alimentar constantemente, investigando, actualizando, probando potenciales agujeros de seguridad, corrigiéndolos y ante todo, encontrando el equilibrio entre la importancia ...

Video2Brain - Curso Introducción a Algoritmos para Programación

julio 13, 2018 Por @chronos25 en Cursos Video2brain
Etiquetado: #video2brain #programacion #web #algoritmos #sistemas #operativos

Información de Algoritmos para programación Muchas personas, cuando empiezan a programar, se ven en apuros cuando se comienza sin las bases y entendimiento de los algoritmos. Antes de conocer un lenguaje de programación o de desarrollar nuestro primer programa debemos cambiar la forma de pensar ...

Curso video2brain: Web services con PHP

enero 16, 2017 Por @gully_foyle en Cursos Video2brain
Etiquetado: #curso #video2brain #mega #español #completo #descargar #v2b #php

Web services con PHP Conecta tus aplicaciones y sitios web a servicios de datos basados en PHP Web services con PHP | Portada En este curso aprenderemos a crear servicios web que nos permitan enviar y recibir datos de nuestra aplicación PHP, aprenderemos los conceptos de servicios REST en PHP, usar...

Curso video2brain: Excel 2016: Tablas dinámicas

febrero 14, 2017 Por @gully_foyle en Cursos Video2brain
Etiquetado: #curso #video2brain #completo #descargar #gratis #v2b #excel

Excel 2016: Tablas dinámicas Aprende a organizar, gestionar y presentar grandes tablas de forma dinámica y visual Velocidad de cálculo, versatilidad, capacidad de ordenar y filtrar... todos estos son algunos de los adjetivos y características que podemos aplicar a las tablas dinámicas. Por ello...

Curso Fundamentos del Video para Web

diciembre 26, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #Herramientas de vídeo #Formatos de vídeo para web #Transcodificación para web

Curso Fundamentos del Video para Web Contenido del Curso Presentación del curso Fundamentos del vídeo para web Presentación del contenido y los objetivos del curso de Fundamentos del vídeo para web. Presentación de Fundamentos del vídeo para web 02:40 Archivos base de Fundamentos del vídeo pa...

Fundamentos de SQL

diciembre 28, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #

SQL (Structured Query Language) es el estándar de comunicación entre bases de datos, y surgió como norma para que diversas bases de datos se comuniquen entre ellas y no tener que aprender cada lenguaje de comunicación de cada base de datos.     SQL podemos decir que es una norma para el manejo...

Curso de MongoDB

diciembre 27, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #Sistemas de bases de datos #Por qué usar NoSQL #Diferencia entre SQL y NoSQL #Usos de NoSQL

Las bases de datos NoSQL existen como solución al problema surgido en el mundo de la web actual, en la que la hiperconexión de millones de usuarios de todo el mundo provoca en ocasiones la imposibilidad de gestionar y mostrar por pantalla la información alojada en la base de datos. En el Curso de...

Curso Tienda Online con PHP

diciembre 26, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #Gestión de los productos y de los clientes #Registros de visitantes #Estadísticas #Registro de nuevos usuarios en nuestra tienda #Pedido de múltiples unidades

Contenido del Curso Gestión de los productos y de los clientes Ampliamos el código de gestión de pedidos para abarcar la gestión de productos y clientes. Creamos un listado de productos para nuestra tienda 05:40 Un nuevo producto con un formulario 02:34 Procesamiento del formulario anterior 03:5...

Curso de Bootstrap 3

diciembre 26, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #

    Bootstrap es un framework front end muy extendido y pensado sobre todo para crear proyectos web responsive. Descubre en este curso cómo Bootstrap 3 puede mejorar el flujo de trabajo de tus proyectos web, desde el diseño a la maquetación, logrando crear sitios webs adaptados para dispositivo...

Curso Primera Tienda con Magento

diciembre 26, 2018 Por @arelychava en Cursos Video2brain
Etiquetado: #Introducción a Magento #Configurando nuestra tienda en Magento #Atributos y catálogos en Magento #Trabajo con productos en Magento #Magento y los clientes

Magento es una de las soluciones e-commerce más utilizadas en el mundo, y realmente es posible montarla sin necesidad de programar. Con este curso aprenderás a crear tu primera tienda online con el CMS open source más potente del mercado. Magento te permitirá crear catálogos de productos, añad...

Comentarios

Todavía no hay comentarios.
Ayuda
Justo ahora

Si quieres realizar un comentario, regístrate o inicia sesión. Es gratis y puedes generar ganancias.