Asignatura: Programación Hipermedia (Proyectos Cliente/Servidor)
HTML5, CSS3, Javascript, MySQL y PHP
Sept 2013 - Ene 2014
Profesor: JuanMa Garrido
- JuanMa.Garrido@gmail.com
- @juanmaguitar
- http://www.linkedin.com/in/juanmagarrido
- https://github.com/juanmaguitar
Aula Virtual: http://estudy2013.salleurl.edu/
TM015_Programació hipermèdia [2013/14]
Objetivos de la Asignatura
Introducir a los alumnos en el Desarrollo Web para que sean capaces de desarrollar una aplicación básica (tanto la parte del cliente como la del servidor) utilizando:
- HTML5
- CSS3
- Javascript
- MySQL
- PHP
Resources
HTML5
-
HTML5
- HTML, XHTML & HTML5
- Web Semantica
- Forms
- Class Interaction
HTML5
HTML5
-
Clear Ideas (Layer Separation, Accesibility, Usability, SEO, Frontend, Backend)
-
HTML, XHTML & HTML5
HTML5
-
Web Semantica
- Las nuevas etiquetas HTML5From the book Guía HTML5. El presente de la web
- HTML5 elementsFrom the book Up to Speed on HTML5 & CSS3
- HTML5 Element Index(html5doctor.com)
- HTML5_ CheatSheet
- HTML5_ Semantics
- The importance of sections(http://coding.smashingmagazine.com/)
- HTML5 Element Flowchart
- Designing a blog with html5
- Based blog layout with html5
HTML5
Ejercicio 1: Smashing Articles
Hacer el marcado semantico del layout segun la estructura sugerida.
(Click en la imagen para ver el layout completo)
Solución Ejercicio 1: Smashing Articles
Designing a HTML5 Layout from scratch (post explicativo de Smashing Magazine)
Ejercicio 2: Portfolio
Hacer el marcado semantico del siguiente layout en una sola pagina.
(Click en la imagen para ver el layout completo)
Solucion Ejercicio 2: Portfolio
Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 (post explicativo)
CSS3
CSS3
CSS3
Ejercicio 1: Selectors
Añadir el CSS para que el marcado de index.html se vea como el siguiente screenshot.
(Click en la imagen para ver el layout completo)
Ejercicio 2: Floats
Hacer el marcado y el CSS para el siguiente diseño.
(Click en la imagen para ver el layout completo)
Ejercicio 3: Layouts
Hacer el marcado (en base a estos textos) y el CSS para el siguiente layout.
(Click en la imagen para ver el layout completo)
Ejercicio 4: Landing
Hacer el marcado (en base a estos textos y estas imagenes) y el CSS para el siguiente layout.
(Click en la imagen para ver el layout completo)
