Tutoriales / Ayuda | el 03 de Abril del 2014

Videotutoriales Curso completo de HTML5 y CSS3



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.

https://www.oboom.com/#folder/H11XU5BW/Curso%20CCS