Videotutoriales Curso completo HTML5 y CSS3 [Español] Quiero compartir con ustedes unos videotutoriales en español sobre HTML5 y CSS3 que he encontrado bastante interesantes porque los conceptos se explican de forma sencilla y expone las nuevas funcionalidades disponibles. Estos tutoriales están realizados por Jesús Conde. OBJETIVO DEL CURSO Aprender las nuevas etiquetas y propiedades del lenguaje, saber utilizarlas y conocer la importancia de la semántica en el entorno web. El usuario finalizará el curso con los conocimientos necesarios para poder crear y desarrollar webs actuales, que se basen en el nuevo lenguaje del Diseño Web. DIRIGIDO A Diseñadores Web, Programadores Web y Responsables Técnicos de portales web que quieran ponerse al día en las últimas tendencias para la creación web. CONTENIDO DEL CURSO HTML5 01.- Curso de HTML 5. ¿Qué podemos esperar de HTML5? Primer VideoTutorial del Curso dedicado al nuevo Estándar Web, HTML5. Empezamos indicando las principales novedades que presenta, su integración con JavaScript, y empezaremos a trabajar con el nuevo elemento Canvas, creando un lienzo y empezando a introducir figuras en el mismo. 20 minutos. 02.- Curso HTML 5. Trabajar con la API Canvas. VideoTutorial Nº 2 del Curso de HTML 5, en el que vemos el trabajo con la API Canvas. Dibujar líneas y figuras; Rellenar figuras geométricas; Dibujar con Curvas Bezier; Dibujar con Curvas Cuadráticas; Dibujar Arcos; Dibujar Textos; Incluir Imágenes; Dibujar sobre Imágenes; Incluir gradientes; Crear animaciones en Canvas. 30 minutos. 03.- Curso de HTML 5. Arrastrar y Soltar. VideoTutorial Nº 3 del Curso de HTML 5 en el que vemos cómo aplicar arrastrar y soltar a elementos de nuestra página Web. Atributos HTML 5 de arrastrar y soltar; El Objeto dataTransfer; Creación de un proyecto completo de arrastrar y soltar; Atributos. 32 minutos. 04.- Curso de HTML5. Controles de Formularios. VideoTutorial Número 4 del Curso de HTML5, en el que vemos los nuevos controles de formularios que incluye. Default, url, email, fechas y horas, colores, búsqueda. 17 minutos. 05.- Curso de Html5. Edición Inline. VideoTutorial Nº 5 del Curso de HTML 5. Vemos las nuevas funcionalidades de Edición Inline. Atributos contenteditable, designmode y spellcheck; Convertir en editable un elemento div, añadir botones de edición; Convertir en editable un documento completo. 18 minutos. 06.- Curso de HTML5. Trabajar con la historia del navegador. VideoTutorial Número 6 del Curso de HTML5 que vamos dedicar al trabajo con la historia del navegador. Trabajar con la API history; Atributos y Funciones; Back; Forward; go; pushState; replaceState; onpopstate; ejemplo práctico; Cambiar dirección web sin recarga página. 32 minutos. 07. Curso de HTML5. Los elementos video y audio. VideoTutorial Número 7 del Curso de HTML5 en el que trabajamos con dos de las etiquetas más importantes del nuevo estándar Web. Video y Audio. Conocer la API Video; Problemas y soluciones al tema de formatos y Codecs; Añadir atributos al elemento video: autoplay, loop, controls; el evento onerror; Uso del Miro video converter; creación de proyecto que funcione en la mayoría de los navegadores; uso de Kaltura, proyector de videos basado en HTML5 y JQuery. Algo más de 40 minutos. 08. Curso de HTML5. Almacenamiento Web. VideoTutorial Nùmero 8 del Curso de HTML 5. Almacenamiento Web. En él veremos las nuevas APIs de HTML 5 que nos permiten guardar datos en páginas web sin tener que utilizar lenguaje de lado del servidor. Vemos el Objeto sessionStorage y el atributo y funciones que incluye y que permite almacenar datos en la sesión que el navegador abre con el servidor sólo con html5 y javascript. Vemos el Objeto localStorage que permite almacenar datos directamente en el navegador. Creamos dos ejemplos prácticos de cada uno. 23 minutos. 09. Curso de HTML5. Creación Juego de Memoria (I). VideoTutorial Número 9 del Curso de HTML5, en el que iniciamos una parte práctica con la elaboración de varios juegos. En este Videotutorial iniciamos la construcción de un juego de memoria que nos permitirá practicar con el dibujo de formas y colocación de texto en el Canvas, con el desarrollo de técnicas para representar la información, uso de timers y programación de pausas, colocación aleatoria de objetos....43 minutos. 10. Curso de HTML5. Creación juego de memoria (II). VideoTutorial Nº 10 del Curso de HTML5 en el que terminamos de crear nuestro juego de memoria, con cartas de polígonos y creamos la segunda versión con imágenes en las cartas. 39 minutos. 11. Curso de HTML5. Creación de sistema de Test. VideoTutorial Número 11 del Curso de HTML5 en el que creamos un sistema de elaboración de Tests. Requerimientos necesarios; Uso de Arrays de Arrays; Crear y modificar código HTML de modo dinámico; Modifiar código CSS usando JavaScript; Modos de proveer feedback al jugador; presentar videos. 12. Curso de HTML5. Creación del juego del ahorcado. Videotutorial Número 12 del Curso de HTML5 en el que seguimos con ejemplos prácticos. Creamos el juego del ahorcado. Requerimientos del juego. ;Usar archivos externos; generar y posicionar marcadores HTML, convertirlos en botones; Crear dibujos progresivos en el canvas; Mantener el Estado del juego y determinar cuando se gana o pierde. Funcionamiento de la aplicación. 42 minutos. 13. Curso de HTML5. Creación sistema de post-its. VideoTutorial Número 13 y último del Curso de HTML5 en el que creamos un sistema de post-its, usando HTML5 Application cache, que permite ejecutar aplicaciones web offline y HTML 5 Database API que permite crear bases de datos en el disco duro. Usaremos también varios efectos CSS3, como box-shadow y transiciones. Creación de archivos .manifest; 49 minutos. CSS3 01.- Curso de CSS3. ¿Qué hay de nuevo? VideoTutorial Nº 1 del Curso de CSS3 en el que vemos las novedades que ofrece. ¿Qué es CSS3? Situación actual de desarrollo; Las nuevas funcionalidades de los módulos CSS3; ejemplos concretos; Sitios web donde informarse del estado de desarrollo de los nuevos estándares; explicación de los distintos niveles de desarrollo y de los prefijos usados por los motores de renderizado para las propiedades que aún no son estándares; Sistema de trabajo basado en Progressive enhancement. 32 minutos 02.- Curso de CSS3. Crear efectos gráficos sin gráficos. VideoTutorial Número 2 del Curso de CSS3. Empezamos con proyectos prácticos, desarrollando un sistema de bocadillos para comentarios de un blog, lo que nos permitirá profundizar en la versión 3 del lenguaje de hojas de estilo en cascada. Empezaremos creando una página base, compatible con todos los navegadores, siguiendo el principio de mejoras progresivas. A continuación usaremos la propiedad word-wrap para impedir que los textos se salgan de los bordes de un elemento html; Usaremos border-radius para dar esquinas redondeadas al cuerpo de nuestro comentario y añadiremos una cola al bocadillo que apunte al avatar del usuario sin usar ninguna imagen. Algo más de una hora. 03.- Curso CSS3. Crear semitransparencias, gradientes y sombras Videotutorial Nº 3 del Curso de CSS3 en el que seguimos elaborando nuestro primer proyecto y profundizando en las principales propiedades y módulos de este nuevo nivel de las hojas de estilo. Fondos semitransparentes con RGBA o HSLA; Sintaxis; Herramienta de color online; Darle una semitransparencia a nuestros bocadillos; Uso de gradientes sin necesidad de imágenes; sintaxis -moz y -webkit; anatomía de un gradiente lineal; gradientes radiales; Aplicar sombras a elementos html sin imágenes; La propiedad box-shadow; Uso de Text-shadow. Una hora. 04.- Curso de CSS3. Usos de la Propiedad Transform Videotutorial número 4 del Curso de CSS3, en el que acabamos nuestro primer proyecto y trabajamos con las distintas funciones que forman la propiedad transform. ¿Qué son Transforms en CSS3? Las funciones translate, rotate, scale y skew. Ejemplos prácticos. Creación de un sistema de Tarjetas; aplicar Transforms a los avatares. 33 minutos. 05.- Curso de CSS3. Uso de Css3 en el trabajo con imágenes. VideoTutorial Nº 5 del Curso de CSS3 en el que iniciamos un nuevo proyecto que nos va permitir trabajar con las propiedades y conceptos aplicables a imágenes. Creamos una página con aspecto de una hoja de un cuaderno. Usamos la propiedad background-size para escalar una imagen de fondo con el texto. Vemos ejemplos prácticos y la sintaxis y usos de la propiedad a fondo. Vemos cómo aplicar múltiples imágenes de fondo en un mismo elemento y el modo de posicionarlos, redimensionarlas, repetirlas....... Hacemos también una selección de tutoriales online sobre los mismos temas. 45 minutos. 06.- Curso de CSS3. Usar gráficos en bordes y fuentes Web. VideoTutorial número 6 del Curso de CSS3 en el que terminamos nuestro segundo proyecto, usando la propiedad border-size para añadir una imagen en el borde. Usamos también background-clip para impedir que las imágenes de fondo aparezcan en el borde y le aplicamos una sombra al div con box-shadow. En la última parte del Videotutorial vemos en profundidad la regla @font-face, viendo cómo podemos incluir en nuestros diseños web fuentes independientemente de si se encuentran o no en el ordenador del usuario. Indicamos los formatos de fuente que debemos usar y como crearlos online. 07.- Curso de CSS3. Selectores de Atributos. Videotutorial número 7 del Curso de CSS3, en el que vemos los selectores de atributos, tanto de CSS 2.1 como de CSS3. Vemos ejemplos prácticos de su uso, añadiendo iconos automáticamente a las descargas por tipo, y aplicamos distintos estilos a las imágenes según la carpeta en la que se encuentren. 35 minutos. 08.- Pseudo-clases y Pseudo-elementos VideoTutorial Nº8 del Curso de CSS3. Vemos como apuntar a elementos específicos del documento sin usar IDs o Clases mediante el uso de Pseudo-clases y pseudo-elementos. Pseudo-clases estructurales en CSS3; El uso de nth-child( ); El DOM(Document Object Model); Ejemplo práctico: Aplicar a los comentarios estilos diferentes. 37 minutos. 09.- Curso de CSS3. Prácticas con Pseudo-Clases Videotutorial Número 9 del Curso de CSS3 en el que llevamos a cabo distintas prácticas con el uso de pseudo-clases. Dar rotación aleatoria a las fotos del proyecto; El uso de nht-of-type; Destacar de modo dinámico secciones de una página; La pseudo-clase :target; Crear iconos sólo con CSS; Uso de Counters CSS; Cambiar el color de fondo de secciones de un documento de modo dinámico. 37 minutos. 10.- Curso de CSS3. Transiciones y animaciones Videotutorial nº 10 del Curso de CSS3 en el que vemos como crear animaciones y transiciones con puro CSS. Hacer Fade in con transiciones; ¿A qué se puede aplicar transiciones? Hacer fade out con el uso de animaciones; ejemplos prácticos del uso de transiciones y animaciones. 31 minutos 11.- Curso de CSS3. Uso de Media Queries. Videotutorial Nº 11 del Curso de CSS3 en el que vemos los Media Queries. Diferente tamaño de pantalla, diferente diseño; Diseño de partida; ¿Qué son Media Queries?; Cambiar el diseño para grandes pantallas; Fundametales de las Media Queries; Modificación navegación de horizontal a vertical. 25 minutos. 12.- Curso de CSS3. Multi-Columns y diseño para móviles. Videotutorial Nº 12 del Curso de CSS3 en el que trabajamos con la propiedad multi-column y usamos media queries para crear diseños para dispositivos móviles. Con este videotutorial completamos la web que readapta su diseño dependiendo de los píxeles que tenga la ventana del navegador o la pantalla del dispositivo móvil. 32 minutos. 13.- Curso de CSS3. Diseñar sin floats ni posicionamientos. Videotutorial Nº 13 y último del Curso de CSS3, que dedicamos a los módulos CSS3 que permiten crear diseños web. El Modelo Flexible Box Layout; Crear diseños multi-columna sin floats ni posicionamientos; Hacer que los bloques sean flexibles; Añadir columnas; Reordenar columnas; Centrar vertical y horizontalmente elementos de la página; La propiedad box-sizing; Los Módulos Template layout y Grid Positioning. 45 minutos. Insertar CODE, HTML o PHP: https://www.oboom.com/#folder/H11XU5BW/Curso%20CCS
