diseño web HTML aplicaciones web y demas
- 1. HTML5, CSS3, Jquery y Boostrap
- 2. • Índice • HTML • CSS • Javascript • Bootstrap
- 3. Estructura de una página web Página Web Estructura Contenido Apariencia Comportamiento HTML CSS Javascript • Colores • Tipografías • Alineación • Efectos • Validaciones • Automatización • Párrafos • Encabezados • Listas •Tablas • Capas • Etc. • Textos • Imágenes • Enlaces • Fondos • Tamaños • Etc.
- 4. HTML5 • ¿Qué es HTML5? • Es un lenguajede marcas utilizado para el desarrollo de páginas web. • Define la estructura y contenido que debe tener una web. • No define el estilo visual que tendrá para eso se usará CSS. • Ha sido establecido como estándar de diseño web por el W3C. • Los navegadores deben saber interpretar este lenguaje de manera correcta (no siempre IE) • Sobre HTML se desarrollan tecnologías para facilitar a los usuarios el diseño de una web.
- 5. HTML5 • Evolución: • En 1997 nace HTML4 publicado por el W3C como estándar de diseño web. • En 1999 nace XHTML 1.0 que extiende HTML4 • En 2001 se publica la nueva versión de XHTML, la 1.1 • En 2002 se prepara un borrador para una nueva versión de XHTML • En 2008 naceHTML5 como el sucesor de HTML4 y XHTML 1.1
- 6. HTML5 • ¿Por qué HTML5? • HTML 4.0 era suficiente para cubrir todas las necesidades web surgidas hasta el momento. • La web evolucionó rápidamente insertando diferentes contenidos a ofrecer en cada página. • HTML 4.0 no cubre esas necesidades por lo que se crearon diversas tecnologías que suplieran este vacío: • Flash Player • Silverlight • Se tiende a un trabajo distribuido por lo que se exigen herramientas tipo "escritorio" en versión web.
- 7. HTML5 • ¿Por qué HTML5? • En este punto HTML4 se queda obsoleto. • Instalar plugins de terceros genera graves agujeros de seguridad. • Las nuevas funcionalidades requeridas no encajan con el esquema inicial diseñado. • Conclusión: hay que hacer evolucionar el estándar a las necesidades actuales HTML5 • Referencia: http://www.w3schools.com/html/default.asp
- 8. HTML5 • El concepto de elemento HTML • Los elementos son los componentes fundamentales del HTML • Cuentan con 2 propiedades básicas: • Atributos • Contenido • En general se conforman con una Etiqueta de Apertura y otra Cierre. • Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre.
- 9. HTML5 • El concepto de elemento HTML Elemento Etiqueta de Apertura Etiq. de Cierre Contenido <p class=“texto”>Curso HTML CEMA </p> Nombre Valor Atributo
- 10. HTML5 • Tipos de elementos HTML • Estructurales: • Describen el propósito del texto y no denotan ningún formato específico. <h1>Curso HTML</h1> • De Presentacion: • Describen la apariencia del texto, independientemente de su función. <b>Curso HTML</b> • Los elementos de presentación se encuentran obsoletos desde la aparición del CSS. • De HiperTexto: • Relaciona una parte del documento a otros documentos. <a href=“http://www.cema.edu.ar”>Universidad del Cema</a>
- 11. HTML5 • Estructura base de un documento html. <!DOCTYPE html> <html lang="es"> <head> <title>Título</title> <!– Encabezado de la web. Aquí incluiremos metainformación y cargaremos componentes y estilos utilizados en la web--> </head> <body> <!– Cuerpo de la web. Aquí escribiremos el contenido--> ….. </body> </html>
- 12. HTML5 • Definir un documento HTML. • El primer paso es crear un fichero html o xhtml. • Una vez creado deberemos especificar el tipo de documento, para ello la primera línea debe ser: • <!DOCTYPE html> si es HTML • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> si es XHTML • Una vez realizado esto podremos comenzar con el contenido de nuestro fichero HTML • HTML layout
- 13. HTML5 • La sección HEAD • Contiene metainformación de la página • Establecemos título y palabras clave para los buscadores • Incluimos hojas de estilo (CSS) a utilizar en la página • Podemos introducir código javascript a usar en nuestra página. • Referencia: http://www.w3schools.com/html/html_head.asp
- 14. HTML5 • La sección BODY • Alberga el "contenido" real de la página. • Establece cómo se visualizan los elementos. • Hace uso de los scripts y hojas de estilo definidos en la sección HEAD. • En este punto tenemos a nuestra disposición de todos los tags disponibles para maquetar nuestra página. • Referencia: Elementos HTML
- 15. • Índice • HTML • CSS • Javascript • Bootstrap
- 16. CSS3 • El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. • Sus estructuras tienen poca flexibilidad a la hora de dar forma al contenido mostrado. • HTML se creó originariamente para uso científico y posteriormente fue adoptado para el desarrollo web. • Para "maquetar" se utilizan elementos HTML en un uso diferente de su objetivo (tablas por ejemplo). • Todos estos problemas dieron lugar al origen de CSS.
- 17. CSS3 • El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. • Sus estructuras tienen poca flexibilidad a la hora de dar forma al contenido mostrado. • HTML se creó originariamente para uso científico y posteriormente fue adoptado para el desarrollo web. • Para "maquetar" se utilizan elementos HTML en un uso diferente de su objetivo (tablas por ejemplo). • Todos estos problemas dieron lugar al origen de CSS.
- 18. CSS3 • Principales características • Permite definir el estilo de cada elemento HTML de manera exacta. • Permite escalar tamaños en función del tamaño de la pantalla. • Aísla el contenido de la presentación. • Permite incorporar cierta lógica a los estilos aplicados (LESS y SASS). • Permite crear plantillas de estilos que pueden importarse en otros HTML.
- 19. CSS3 • Los estilos CSS deben darse de alta en un fichero acorde para ello, no obstante: • Pueden declararse dentro de un HTML mediante la etiqueta <style> • Pueden aplicarse directamente sobre un elemento concreto en la propiedad "style". • Lo correcto es llevar los estilos a un o unos ficheros css, pero se permite añadir pequeños retoques directamente sobre el HTML.
- 20. CSS3 • Cómo se define un estilo en css: Selector { propiedad: valor; ...} Declaración H1 {color:#CC9900;} Ejemplo:
- 21. CSS3 • Un selector es un identificador para saber sobre qué elemento HTML debemos aplicar el estilo. • Existen diferentes tipos de selectores. • Se pueden crear jerarquías de estilos. • Podemos definir estilos por defecto para los elementos HTML estándar. • Los estilos pueden sobreescribir a otro, el orden de sobreescritura es el mismo en el que se cargan los ficheros css o se lee el fichero. • Si queremos que un estilo prevalezca sobre el resto, podemos indicarlo con !important
- 22. CSS3 • Tipos de selectores: • De elemento HTML: • h1, table, div, span… • De identificador • Todos los elementos HTML cuya propiedad "id" tenga un determinado valor, tendrán ese estilo. • De clase • Todos los elementos HTML cuya propiedad "class" tenga un determinado valor tendrán ese estilo.
- 23. CSS3 • Normalmente se le aplica un estilo por defecto a los elementos HTML para conformar una plantilla. • La personalización definitiva se suele realizar haciendo uso de la propiedad "class". • No es recomendado usar el selector por id. Sólo se recomienda cuando el componente, además de estilo realiza alguna funcionalidad javascript. • Cuando incluyamos plantillas en un fichero HTML hay que estar seguros que no incorporan estilos CSS que sobreescriban los nuestros. • En caso de conflicto, debemos asegurar que nuestros estilos quedan situados por encima de los otros (aunque no siempre es posible)
- 24. CSS3 • CSS3 como mejora de CSS incorpora propiedades para una mejor maquetación y decoración de los elementos. • Se han añadido propiedades para aplicar efectos de pintado. • Se permiten realizar animaciones. • Habilita el uso de lógica en los CSS. • Ejemplo de dibujado HTML + CSS: Minion
- 25. • Índice • HTML • CSS • Javascript • Bootstrap
- 26. Javascript • Inicialmente se llamaba LiveScript. • Lenguaje de guiones (script). • Con el respaldo de SUN en 1995 pasó a llamarse JavaScript. • Es un lenguaje interpretado. • Se ejecuta en el cliente, nunca en el servidor. • Parte de un conjunto limitado de objetos y clases • No permite interacción cliente-servidor, únicamente opera en el cliente (Conseguido con jQuery).
- 27. Javascript • Diseñado para programas sencillos y pequeños. • Muy utilizado para validación de datos. • Utilizado junto con CSS para poner efectos en las páginas de Web. • Es independiente de la plataforma. • Es bajamente tipado. • Fácil de aprender, pero difícil de depurar. • Gran parecido con Java pero mucho más limitado.
- 28. Javascript • Javascript se integra en HTML de dos maneras: • Como fichero *.js incluido en la misma sección que los CSS. • Como código directamente en el fichero HTML haciendo uso de la etiqueta <script> • Algunos navegadores no soportan scripts por lo que tendremos que tenerlo en cuenta. • Para tratar el problema haremos uso de la etiqueta <noscript>
- 29. Javascript • La declaración de variables se hace sin especificar el tipo: • var miVariable; • Si intento hacer una operación no permitida sobre el tipo que contiene la variable tendré un error. • Para mostrar mensajes por pantalla haré uso de: • alert("texto del mensaje") • Los métodos se declaran con la etiqueta function: • function hola(){ … } • Para devolver un valor haremos uso de "return".
- 30. Javascript • La llamada a los métodos Javascript se hará desde elementos HTML. • Los elementos HTML tienen asociados determinados eventos cuando su estado cambie. • En esos eventos podemos llamar a código Javascript. • Haciendo uso de Jquery como extensión de Javascript podremos realizar funcionalidad antes de que un documento se cargue.
- 31. Javascript: jQuery • Jquery es una librería Javascript que pretende facilitar el uso del código Javascript a los programadores. • Añade un conjunto nuevo de eventos a los ya existentes HTML. • Permite hacer llamdas AJAX, por lo que permite que, el cliente, llame directamente al servidor. • Incorpora librerías de componentes HTML con funcionalidad enriquecida que podemos usar con poco esfuerzo. jQuery • Tutorial: jQuery tutorial
- 32. Javascript: jQuery • Al igual que en CSS haremos uso de selectores para recuperar un elemento concreto. • La sintaxis es $(selector): • $("p"): recuperaría todos los elementos HTML de tipo <p> • $(".test"): recuperaría todos los elementos HTML cuyo atributo "class" fuera "test". • $("#test"): recuperaría todos los elementos HTML cuyo atributo "id" fuera "test".
- 33. Bootstrap • Framework CSS que facilita a los desarrolladores la maquetación de las páginas. • Incluye un conjunto de clases CSS para maquetar de manera fácil una página a cualquier resolución. • Es mantenido y actualizado por Twitter. • Está optimizado para dispositivos móviles. • Permite un diseño “Responsive” • Web de Boostrap
- 34. Bootstrap • El problema • A la hora de maquetar una web tenemos que tener en cuenta infinitas resoluciones y tamaños de pantalla. • Nuestros diseños no se adaptan a todas las resoluciones. • Debemos hacer un gran esfuerzo para crear un CSS que maquete bien. • Tenemos que hacer diferentes versiones de la web según el dispositivo en el que se verán.
- 35. Bootstrap • Solución “Responsive Design” • Diseña una sóla vez para todos tus dispositivos. • El diseño se adaptará dinámicamente a la resolución en la que se esté visualizando. • Los diferentes elementos “saben” que propiedades deben tener, según la resolución. • Definimos la estructura que debe tener la web y esta se adapta según el dispositivo que la visualiza.
- 36. Bootstrap • Boostrap incluye un conjunto de estilos para hacer nuestra web responsive. • Es un framework potente y complejo por lo que para profundizar a fondo requiere conocimientos amplios de CSS. • No obstante no es necesaria una gran experiencia para conseguir una maquetación de calidad que sea “responsive”,