#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.

WiX: Editor Web Visual

WiX es un Editor Web Visual, que permitirá a nuestr@s alumn@s a crear sitios web sin necesidad de conocer HTML ni CSS, aunque siempre viene bien conocerlo (con los contenidos del apartado 3 de la unidad 1).

Os dejo los primeros pasos que he hecho con esta herramienta:

1. Acceder a la web http://es.wix.com

 http://es.wix.com

2. El registro se puede realizar con una cuenta de correo o con los servicios de conexión de Facebook o Google Plus.

3. Una vez que nos hayamos registrado, realizaremos un proceso de postregistro, decidiendo en que categoría y subcategoría quieres incluir tu nuevo espacio web. Como no esta la de Educación he optado por la de Diseño -> Diseño Web.

 

http://es.wix.com/new/account

 4. El siguiente paso es elegir una de las plantillas disponibles (casi todas son gratis).

 http://es.wix.com/website/templates/html/design/web-designer/2

5.  De modo que el aspecto del CSS quedara elegido.

 6. Una vez terminemos con los pasos previos, nos cargara el editor Wix HTML5

7. Nos mostraran este vídeo introductorio a Wix.

Vamos a hacer una visita rápida de las opciones del editor Wix HTML5

A. Páginas.

B. Diseño

C. Agregar

D. Opciones

E. Wix. App Market.

Sí llegado ha este punto quieres ver el resultado iendo a la web http://smrweb2.wix.com se nos indicara que aún no hemos mandado publicar la web.

Por lo que si volvemos a la edición de nuestro nuevo espacio (como podemos crear más de una con nuestra misma cuenta) deberemos elegir un nombre para este: en mi caso opto por el año 2014

Por fin, parece que lo he conseguido, pero...

Aún quedan unos pequeños detalles por personalizar para conseguir publicar la nueva web.

En este caso, este espacio web tiene un editor móvil especifico, ya que cada vez es más importante cuidar nuestra web para dispositivos móviles.

Este es el aspecto del editor móvil de wix.

Con su propio menú para opciones móvil.

Y voilà, ya esta disponible, y si queremos utilizar nuestro propio dominio también podemos hacerlo actualizando o mejorando el servicio.

Y podemos compartir con nuestro social media que ya esta disponible.

 My very own @Wix website! check it out: http://smrweb2.wix.com/2014 #MyProWebsite #ItsOKtoStare

  Voy a seguir los dos perfiles de Wix en Twitter para aprender más sobre este servicio.  

 

  Y hasta aquí esta entrada sobre este editor web y móvil de wix, espero que les guste a nuestr@s alumn@s.   ENLACES RELACIONADOS

 Por unidades: U1 - U2 - U3 - U4 - U5 -  U6
WiX
HTML y CSS

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 WiX? ¿Y vosotr@s alumn@s? Gracias por seguirnos y leernos. Hasta el próximo artículo...

¿Me regalas un tweet de esta entrada? Gracias por compartirme....