Html5 y php5

356 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
356
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 y php5

  1. 1. HTML 5 Y PHP JHON E. ROJAS B. DIPLOMADO DE DISEÑOS DE OBJETOS MULTIMEDIALES OCTUBRE 2013>
  2. 2. HTML 5 INTRODUCION DREAMWEAVER ETIQUETAS OBJETOS MULTIMEDIA WEB DISPOSITIVO MOVIL
  3. 3. HTML 5 DREAMWEAVER CSS Con HTML5 tendremos una web más simple y semántica gracias a las nuevas etiquetas para identificar mejor algunos elementos y no llenar nuestra página de elementos div sin ningún valor semántico. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
  4. 4. HTML 5 ETIQUETAS Uso de Header, Nav y Footer Vamos a editar la estructura para adecuarla a lo que queremos, empezando por cambiar el lenguaje de la página a español y poniendo el título “Mi primer sitio html5”. También pondremos un título, un menú de navegación y el pie de página. Existe una etiqueta nueva denominada <header>. Se utiliza para los elementos que sean encabezados, normalmente títulos, que tengamos en nuestra página y pueden haber varias de estas etiquetas. El título lo pondremos dentro de una etiqueta <header>. Para el menú utilizaremos la etiqueta <nav> que es la etiqueta para este tipo de funcionalidad que se ha añadido en HTML5. Añadiremos unos cuantos enlaces en el menú. En HTML5 también existe una etiqueta <menu> pero hay que tener en cuenta que si se trata del menú de navegación se debe utilizar <nav>. El pie de página será un elemento <footer> y dentro de este hemos añadido el copyright y una fecha para mostrar la última actualización.
  5. 5. HTML 5 ETIQUETAS Etiquetas Section y Article vamos a añadir algo de texto. Para ello insertaremos un elemento <section> entre el menú y el pie, y dentro de ella unos elementos <article> donde pondremos un pequeño texto con un título. El título lo pondremos también entre etiquetas <header>. http://msdn.microsoft.com/eses/ie/ff468705#_HTML5
  6. 6. fichero CSS para que coja el estilo aplicado en ese CSS. <link rel="stylesheet" href="estilo.css"/> Pondremos el menú de navegación a la izquierda, la sección con los artículos a la derecha y el pie de página debajo de la sección a la izquierda. También le daremos un ancho fijo a cada una.
  7. 7. MENU NAVEGADOR ● Pulse para editar el formato de esquema del texto – Segundo nivel del esquema ● Tercer nivel del esquema – Cuarto nivel del esquema ●  Quinto nivel del esquema ● Sexto nivel del esquema Séptimo nivel del esquemaHaga clic para modificar el estilo de texto del patrón  Segundo nivel  Tercer nivel  Cuarto nivel  Quinto nivel
  8. 8. Redondear esquinas de bordes con border-radius
  9. 9. HTML 5  opciones  META  http://www.google.com/fonts  Http;//www.google.com/maps
  10. 10. Paginas de tutoriales http://www.aprendiendoando.com/ http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/ http://www.cristalab.com/blog/sproutcore-la-competencia-en-javascript-a-flex-y-flash-c58098l/ http://www.cristalab.com/tutoriales/bordes-redondeados-con-css3-c69441l/ http://msdn.microsoft.com/es-es/ie/ff468705#_HTML5 http://codecriticon.com/html5-meta/
  11. 11. Java script <script> </script> var device = navigator.userAgent if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)|| device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|iPad|iPod/i)|| device.match(/Opera Mini/i)|| device.match(/IEMobile/i)|| device.match(/Mobile/i)|| device.match(/Windows Phone/i)|| device.match(/windows mobile/i)|| device.match(/windows ce/i)|| device.match(/webOS/i)|| device.match(/palm/i)|| device.match(/bada/i)|| device.match(/series60/i)|| device.match(/nokia/i)|| device.match(/symbian/i)|| device.match(/HTC/i)) { window.location = "http://www.miwebmovil.com/"; } else { }
  12. 12. PHP 5
  13. 13. Preguntas y respuestas

×