#AW392 Khan Academy HTML/CSS

Como ya os dije hace tiempo Khan Academy te necesita... pues ahora ya podemos aprovecharnos nosotros de ellos. De entre todos los contenidos creados en esta plataforma de e-learning ya disponemos de contenidos aptos para el módulo de Aplicaciones Web del CFGM de SMR.

Para ampliar el apartado 3 sobre HTML y CSS os recomiendo este tutorial

https://es.khanacademy.org/computing/computer-programming/html-css

Hace falta registrarse y ir haciendo cada etapa.

Todo el contenido en "Intro to HTML/CSS: Making webpages"

Introducción a HTML

Aprende qué es HTML y cómo hacer una página web básica con texto marcado e imágenes.

• ¡Bienvenido a la web! (Video)
• Conceptos básicos de HTML (Bloc de notas)
• Desafío: escribe un poema (Bloc de notas)
• HTML: énfasis de texto (Bloc de notas)
• Desafío: puedes aprender etiquetas de texto (Bloc de notas)
• HTML: listas (Bloc de notas)
• Desafío: tu lista de aprendizaje (Bloc de notas)
• HTML: imágenes (Bloc de notas)
• Desafío: un viaje de ensueño (Bloc de notas) 

 

Introducción a CSS

Aprende cómo escribir reglas sencillas de CSS, cómo seleccionar con base en el elemento, clase o ID, y cómo cambiar los colores de tu página.

• CSS básico (Bloc de notas)
• Desafío: criatura colorida (Bloc de notas)
• CSS: seleccionando por id (Bloc de notas)
• Desafío: ids estacionales (Bloc de notas)
• CSS: seleccionando por clase (Bloc de notas)
• Desafío: clases de manzanas y plátanos (Bloc de notas)
• Cuestionario: selectores CSS (Ejercicio)
• Proyecto: página web de viajes (Bloc de notas)

 

Más etiquetas HTML

Aprende a hacer vínculos, tablas y comentarios.

• Vínculos en HTML (Bloc de notas)
• Desafío: vínculos que te encantan (Bloc de notas)
• Vínculos internos en HTML (Bloc de notas)
• Desafío: saltar de un lado a otro (Bloc de notas)
• Tablas en HTML (Bloc de notas)
• Desafío: el menú de la cena (Bloc de notas)
• Comentarios en HTML (Bloc de notas)
• Proyecto: libro de recetas (Bloc de notas)

 

Propiedades de texto CSS

Aprende cómo estilar tu texto, como familias de fuentes, tamaño, espacio y alineación.

• CSS Zen Garden (Video)
• Propiedad font-family de CSS (Bloc de notas)
• Desafío: familias de fuentes elegantes (Bloc de notas)
• Propiedad font-size de CSS (Bloc de notas)
• Desafío: tamaños de fuente grandes (Bloc de notas)
• Estilos de fuentes y taquigrafía en CSS (Bloc de notas)
• Desafío: formatos de fuentes famosas (Bloc de notas)
• Más propiedades de texto en CSS (Bloc de notas)
• Cuestionario: propiedades de texto (Ejercicio)
• Herencia en CSS (Bloc de notas)
• Proyecto: blog (Bloc de notas)

 

Diseño CSS

Aprende cómo usar los elementos span y div de HTML con propiedades de CSS como position y float para cambiar el diseño de tus páginas web.

• Agrupando elementos en CSS (Bloc de notas)
• Desafío: agrupa a los meros (Bloc de notas)
• Propiedades width, height y overflow en CSS (Bloc de notas)
• El océano que se desborda (Bloc de notas)
• Modelo de caja en CSS (Bloc de notas)
• Desafío: el modelo bóxer (Bloc de notas)
• Posición en CSS (Bloc de notas)
• Desafío: coloca al planeta (Bloc de notas)
• CSS en la naturaleza: Google Maps (Video)
• Elementos flotantes en CSS (Bloc de notas)
• Desafío: nubes flotantes (Bloc de notas)
• Cuestionario: diseño CSS (Ejercicio)
• Proyecto: invitación a un evento (Bloc de notas)

 

Más selectores CSS

Aprende selectores más complejos- usando múltiples clases, combinando elementos con clases, selectores descendientes, selectores agrupados y pseudo-clases dinámicas.

• Usando múltiples clases en CSS (Bloc de notas)
• Desafío: una galería con clase (Bloc de notas)
• Combinando clases y selectores de elementos en CSS (Bloc de notas)
• Desafío: clases de elementos (Bloc de notas)
• Selectores descendientes en CSS (Bloc de notas)
• Desafío: descendientes de Khan (Bloc de notas)
• Agrupando selectores en CSS (Bloc de notas)
• Pseudo-clases dinámicas en CSS (Bloc de notas)
• Desafío: animales agrupados (Bloc de notas)
• Especificidad en CSS (Bloc de notas)
• Cuestionario: especificidad en CSS (Ejercicio)

 Más aprendizaje

¿Qué puedes hacer para seguir aprendiendo HTML y CSS?

• Validación HTML (Video)
• Cuestionario: valida este HTML (Ejercicio)
• Qué aprender a continuación

ENTRADAS RELACIONADAS

 

 Todas sobre Khan Academy -  http://smrweb2.blogspot.com.es/search/label/Khan%20Academy

Esperando que os sea de interés y os aporte algo. ¿Nos gustaría saber si te ha gustado esta entrada? ¿Estas utilizandoKhan Academy? ¿Y vosotr@s alumn@s? Gracias por seguirnos y leernos. Hasta el próximo artículo...

¿Me regalas un tuit o tweet de esta entrada? Gracias por compartirla...

3ª Recopilación de la Unidad 1 de AW 2.0 SMR

Llegados a la última semana del año 2014 voy a dedicar estas últimas 7 entradas a hacer recopilaciones sobre las entradas que se han ido haciendo sobre cada unidad.

Hoy empiezo por la unidad 1:

• 2ª Recopilación de la Unidad 1 de AW 2.0 SMR
• 1ª Recopilación de la Unidad 1 de AW 2.0 SMR

3ª Recopilación de la Unidad 1 de AW 2.0 SMR

Pasando ya al detalle de la primera unidad sobre de Aplicaciones Web Sociales (-abrevidado como AWS o AW1- que como ya sabéis ha integrado la anterior unidad 1 de Escritorio y la unidad 2 de trabajo colaborativo y ofimática). Los temas que se han tratado a groso modo de esta unidad han sido los que más entradas tienen, ya que esta unidad trata muchos temas sin entrar demasiado en detalle en cada uno de ellos.

Estas etiquetas han sido las más representativas de esta nueva unidad 1 donde han destacado la parte de SoLoMo e Identidad Digital con sus habilidades y la parte de HTML junto con CSS:

1.  U1 (38) 
2. BLOG (22) 
3. Google (18)  
4. twitter (18) 
5. Blogger (15) 
6. Facebook (14) 
7. redes sociales (13) 
8. Firefox (11) 
9. WEB (9) 
10. #chuche20 (8) 
11. Blogs (8) 
12. HTML (8) 
13. Identidad Digital (8)  
14. BitNami.org (7) 
15. Chrome (7)  
16. Linkedin (7)
17. navegador (7)
18. Google Docs (6)
19. Internet (6) 
20. Social Media (6) 
21. plugin (6) 
22. 365 (5) 
23. Aplicaciones Web (5)   
24. IE (5)
25. Infografías (5) 
26. Office (5) 
27. RSS (5) 
28. Safari (5)  
29. wikipedia (5)

La semana pasada os deje lo más buscado en Google en la entrada de Oh capitán, mi capitán y hoy os dejo lo más editado este 2014 en la Wikipedia. 

Lo más editado en Wikipedia durante el 2014

DIÁLOGO ABIERTO

Esperando que os sea de interés y os aporte algo, como especie de resumen o recordatorio de lo visto sobre la nueva unidad 1 de Aplicaciones Web Sociales o Social Media
¿Nos gustaría saber cual fue la entrada que más os ha gustado? ¿O el tema o etiqueta que más os interesa? ¿Cuáles echáis en falta? ¿Y cuales quitaríais? Gracias por seguirnos y hasta la próxima.

Ampliación didáctica U4 con Google Docs/Drive

Hoy que tengo el examen de esta unidad 4 con mis alumnos (bueno por problema técnicos al final lo harán mañana), les he pedido nuevamente que hagan un formulario de Google Docs/Drive con una pregunta (de tipo test con 4 opciones) por cada subapartado de la unidad 4. Aprovechando que hoy hemos alcanzado las 26.000 visitas gracias  tod@s los que siguen este blog. Y la entrada estrella de las ponencias de las jornadas que ya han llegado a las 700 visitas con ella sola.

Aquí os dejo una batería de formularios que me han realizado mis alumn@s este curso, seguro que hay algún buena pregunta y alguna no tan buena ;-)

1. https://docs.google.com/forms/d/1ZyZtNgvcpWZrWCTgA-f8vfxa8iV23TyzliONbDjuLQo/viewform
2. https://docs.google.com/forms/d/161EuM-2T4W5D4290Ej0sEcyXVfjltV6QvbTZdaK7MQU/viewform
3. https://docs.google.com/forms/d/1o4ojCr-xPdnidzOh1xnsQLtjMdBQk_lxdcLosu-7JKQ/viewform
4. https://docs.google.com/forms/d/1UZptOYbJKNPZWFfkQ_11TmrgTQepc14Ajs6453UapYs/viewform
5. https://docs.google.com/forms/d/18mgu3gc1lBbunAqAxkQ9XlhORWm939em1CIeq4T2xmw/viewform
6. https://docs.google.com/forms/d/1fD8asydwWlNFycIIsQhePOLoBWEE18KyNaDKDRVW6s0/viewform
7. https://docs.google.com/forms/d/1E6gIEzORVH4kiT264d2AGwWZ_-IbETO2-Cg2z0-Qdgc/viewform
8. https://docs.google.com/forms/d/1HeCjxXJMToSMEGW6jzeKuT4dyx5iTQosCm23r_DGH5w/viewform
9. https://docs.google.com/forms/d/1E6gIEzORVH4kiT264d2AGwWZ_-IbETO2-Cg2z0-Qdgc/viewform
10. https://docs.google.com/forms/d/1fD8asydwWlNFycIIsQhePOLoBWEE18KyNaDKDRVW6s0/viewform
11. https://docs.google.com/forms/d/1E6gIEzORVH4kiT264d2AGwWZ_-IbETO2-Cg2z0-Qdgc/viewform
12. https://docs.google.com/forms/d/1HeCjxXJMToSMEGW6jzeKuT4dyx5iTQosCm23r_DGH5w/viewform
13. https://docs.google.com/forms/d/1nOmHbT04GFhW-txaoe-qHb5NmJS019gcJed2RouYzSQ/viewform
14. https://docs.google.com/forms/d/1uBA5euNM4RQFu3mx_X_MbLyGNTwW7i9Rjkzu8k9CIHQ/viewform
15. https://docs.google.com/forms/d/1JKDiy9AnSbZ0IYq0nR07-eIeXOj-m4JjFbYYGPaoM2o/viewform
16. https://docs.google.com/forms/d/1rEK08ab-Azop0WmYuzPeaPdKPWMMTzFyPUCN7Q9vfIs/viewform
17. https://docs.google.com/forms/d/1A6r06w13GazdR7OgDkR7NbVLCvvNRTx-X3lkPql4mVs/viewform
18. https://docs.google.com/forms/d/1Q0HtNhEVCoMMmmGphiy3dfOiwlZR9rkFK84EIZZ2-kY/viewform
19. https://docs.google.com/forms/d/1HeCjxXJMToSMEGW6jzeKuT4dyx5iTQosCm23r_DGH5w/viewform
20. https://docs.google.com/forms/d/1_gysTXkHpV_dfW6PouNMG7mgfiM9enFQwkXY7kkaThk/viewform

Y también creo interesante que se envíen los formularios entre ellos y los rellenen para que luego puedan ver como se rellenan las hojas de cálculo asociadas a los formularios creados en este ampliación...

 ENTRADAS RELACIONADAS

 

  Web Oficial 2ª Edición AW

 Todas sobre Formularios - http://smrweb2.blogspot.com.es/search/label/Formularios

  Todas sobre Unidad 4 - http://smrweb2.blogspot.com.es/search/label/U4

DIÁLOGO ABIERTO

Esperando que os sea de interés y os aporte algo. ¿Nos gustaría saber si te ha gustado esta entrada? ¿Os han gustado esta ampliación didáctica? ¿Habéis probado alguna otra con esta herramienta con  vosotr@s alumn@s? Gracias por seguirnos y leernos. Hasta el próximo artículo...

 ¿Me regalas un tuit o tweet de esta entrada? Gracias por compartirla...

ERROR: Unidad 4. Caso práctico 7. HTML 5.

Aprovechando vuestr@s consultas sobre este caso práctico que están haciendo nuestr@s alumn@s estos días, para comentar algunos errores detectados:

1. Hay que tener el JRE de Java instalado en la maquina, para poder descargar el vídeo con la herramienta web Keepvid. Puedes descargarte java desde esta web: https://www.java.com/es/download/
2. La página HTML5 funciona con las últimas versiones de los navegadores que ya soportan este estándar, con chrome siempre funciona. Igual con otro navegador sino esta actualizado puede que no funcione. 

Si detectáis algún problema más, no dudéis en comunicarlos.

Caso práctico 7. HTML 5.

Tiempo: 15 min.

Dificultad: Fácil.

Objetivos: Crear una página web con elementos multimedia.

Vamos a ver un sencillo ejemplo de página web que utilice etiquetas HTML5 para incrustar elementos multimedia.

1. Obtención de los vídeos.
Puedes utilizar vídeos que hayas grabado tú mismo desde tu móvil, o descargar algún vídeo desde cualquier portal, como Youtube. En nuestro caso, vamos a descargar un tutorial de HTML5 desde Youtube. Para ello, vamos a utilizar la herramienta web Keepvid (http://keepvid.com), aunque puedes utilizar cualquiera para la descarga de vídeos/audio, como ClipNabber.

Para ello, accedemos a Youtube y buscamos el vídeo que deseamos. Copiamos la URL (en nuestro caso http://www.youtube.com/watch?v=mzPxo7Y6JyA), y la pegamos en la caja de texto de Keepvid, pulsamos Download y pulsamos en Aceptar sobre el applet de java que se encargará de la conversión.

Hecho esto, nos aparecerá una sección en la página con los diferentes tipos de fichero que podemos descargar.

U4

Descargaremos el vídeo en formato WebM y en MP4, a la resolución que deseemos.

Please report any issues to: contact@keepvid.com

What is HTML5?
youtube.com / TopicSimple
1:33

» Download 3GP « - 144p

» Download 3GP « - 240p

» Download FLV « - 240p

» Download MP4 « - (Max 480p)

» Download MP4 « - 720p

» Download MP4 « - 144p (Video Only)

» Download MP4 « - 240p (Video Only)

» Download MP4 « - 360p (Video Only)

» Download MP4 « - 480p (Video Only)

» Download MP4 « - 720p (Video Only)

» Download M4A « - 128kbps (Audio Only)

» Download WEBM « - 360p

» Download MP3 « - using ( SnipMP3.com )

*NEW* » Download SRT « - Subtitles - using ( KeepSubs.com )

Podemos hacer clic también en la descarga del fichero MP3 utilizando SnipMP3, o utilizar cualquier archivo de audio que dispongas.

Ten en cuenta que si el navegador no admite ficheros mp3, puedes utilizar herramientas como soundconverter o audacity para realizar la conversión.

What is HTML5?

http://youtu.be/mzPxo7Y6JyA

2. Creación de la página web.
Una vez tengamos los archivos descargados y preparados, los copiamos a una carpeta en nuestro home, que llamaremos html5, y creamos en ella un fichero llamado index.html con el siguiente contenido:

   

   




   

Ejemplo de página con HTML5

    Vamos a ver un vídeo sobre HTML5:


   

  

    Y su correspondiente audio:


   

  

   

Puedes observar algunos detalles:

• El elemento vídeo permiten especificar el ancho y alto en que éstos se
• Tanto el elemento vídeo como audio, deben
• Como ves, podemos añadir varios sources 

Reproducirán con los parámetros width y height. Además, la etiqueta controls, permite añadir controles de reproducción (pausa, reproducir,etc.), junto con el vídeo.

Tener anidado el elemento source, en el que indicaremos el fichero a reproducir mediante el atributo src y su tipo, mediante type. Dentro de las etiquetas vídeo y audio. Con esto, permitimos que el navegador utilice un source u otro en función de sus posibilidades. Por ejemplo, en nuestro caso, si no admite el formato webm, utilizará el fichero mp4, y si no admite ninguno nos mostrará el mensaje “Tu navegador no admite la etiqueta vídeo o los formatos utilizados”.

Y hasta aquí esta entrada sobre el ERROR: Unidad 4. Caso práctico 7. HTML 5.

ENLACES RELACIONADOS

HTML - HTML 5

YouTube
U4


DIÁLOGO ABIERTO

Esperando que os sea de interés y os aporte algo. ¿Nos gustaría saber si te ha gustado esta entrada? ¿Estas en esta unidad actualmente? ¿Y habían hecho este Caso Práctico tus alumn@s? Gracias por seguirnos y leernos. Hasta el próximo artículo...

¿Me regalas un tuit o tweet de esta entrada? Gracias por compartirla...