Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje...
Transcript of Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje...
![Page 1: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/1.jpg)
Conceptos Fundamentales
Introducción
![Page 2: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/2.jpg)
ContenidoEl Lenguaje HTML 5
Hojas de Estilo en Cascada
Importancia de Versiones Móviles
Entornos de Desarrollo
![Page 3: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/3.jpg)
El Lenguaje HTML 5
![Page 4: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/4.jpg)
¿Qué es HTML?HTML – Lenguaje de Marcas de Hipertexto (HyperTextMarkup Language)
Es el lenguaje más utilizado en el desarrollo de páginas web
Formado por una serie de etiquetas que son interpretadaspor los navegadores y desplegadas en pantalla
![Page 5: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/5.jpg)
Estructura de un Documento HTMLLa estructura de un documento HTML está dada poretiquetas con funciones específicas que abren y cierran
Éstas etiquetas están formadas por palabras clave y atributos
Se definen con símbolos de mayor y menor que (< >) paraabrir
Para cerrar, se coloca una diagonal después del símbolo demenor que (</ >)
![Page 6: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/6.jpg)
Elementos PrincipalesHay dos elementos principales que se tienen en undocumento HTML
El encabezado en donde se definen elementos que no seránvisibles en la pantalla, elementos de configuración y referencia aotros archivosEl cuerpo que contiene toda la estructura a mostrarse enpantalla
![Page 7: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/7.jpg)
Versiones de HTMLDesarrollado por Tim Bernes-Lee, rápidamente surgió lanecesidad de establecer un estándar para desarrollar en él
HTML 2.0 - 1995HTML 3.2 - 1997HTML 4.01 - 1999HTML 5.0 - 2014
![Page 8: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/8.jpg)
HTML 5HTML5 se enfocó en crear elementos que se encuentran demanera típica en los sitios web además de considerar loselementos de las otras versiones
Esto permite clasificar el contenido en distintos niveles, estofacilita el posicionamiento y la generación de código mássencillo
Permite la creación de sitios adaptables (responsivos)
![Page 9: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/9.jpg)
Hojas de Estilo en Cascada
![Page 10: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/10.jpg)
CSSLas Hojas de Estilo en Cascada CSS (cascading style sheets) esun lenguaje utilizado para establecer la presentación de undocumento HTML
Las versiones que han existido de CSS son:CSS1 – 1996CSS2 – 1998CSS3 - 2011
![Page 11: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/11.jpg)
Objetivo de CSSEl principal objetivo de CSS es separar los contenidos de supresentación lo que facilita el desarrollo y hace más claro elcódigo
Anteriormente dentro de las etiquetas de HTML se incluíanmodificadores relacionados con su apariencia
![Page 12: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/12.jpg)
Archivo de EstiloLas modificaciones sobre la apariencia se pueden especificaren el documento HTML o en un archivo conocido comoarchivo de estilo con extensión CSS
La última opción es la más utilizada ya que ofrece variasventajas sobre la opción de incluir las modificaciones en elcódigo
![Page 13: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/13.jpg)
Estructura Básica de una DefiniciónLa definición de la apariencia (estilo) de un elemento estáformado por dos elementos básicos
Nombre del elemento (propio o palabra reservada)Cuerpo (encerrado entre corchetes { })
![Page 14: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/14.jpg)
Cuerpo de la DeclaraciónDentro del cuerpo de la declaración se tiene la siguienteestructura:
Propiedad:valor;
Propiedad representa una palabra reservada que modificaráuna propiedad del elemento
Valor representa el comportamiento que se tendrá para esapropiedad
Dentro de una declaración se pueden tener gran cantidad demodificadores
CSS3 puede modificar 239 propiedades
![Page 15: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/15.jpg)
Comportamiento en CascadaEl término en cascada se debe a que las propiedades se van“heredando” hacia abajo
Una etiqueta “heredará” sus características hacia las etiquetasque estén dentro de ella
La apariencia de éstas etiquetas internas también se puedemodificar con su respectivo estilo
![Page 16: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/16.jpg)
Importancia de Versiones MóvilesCon el crecimiento de los dispositivos móviles con acceso ainternet, gran cantidad de usuarios ha optado por el llamado“Internet en el bolsillo”
De acuerdo a Google, el tráfico en dispositivos móviles se haquintuplicado desde el 2007
Esto ocasionó que surgiera una nueva forma de desarrollarsitios web que se vieran de manera correcta en losdispositivos móviles
![Page 17: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/17.jpg)
Sitios AdaptablesUn sitio adaptable es aquel que se comporta de maneraadecuada (se visualiza) sin importar el dispositivo en el que sedespliega
Un Sitio Adaptable no implica solamente hacer todo “máspequeño”
Debe ofrecer una navegación mucho más simplificada ycentrarse en la información más importante para losvisitantes
![Page 18: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/18.jpg)
Adaptable vs Versión MóvilLos primeros sitios para móviles se comenzaron a desarrollarcomo si se trataran de sitios para PC
La diferencia eran los tamaños y proporciones
El cambio se realizaba de manera “manual” o a través de unredireccionamiento a otro sitio (normalmente un subdominio)
![Page 19: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/19.jpg)
Versiones AdaptablesCon la aparición de HTML5 y CSS3, fue posible construirsitios web que se adaptaran al dispositivo de maneraautomática sin tener que desarrollarlos nuevamente
Éstas versiones adaptables o responsivas permiten especificarel comportamiento de los elementos dependiendo laresolución en la que son desplegados
![Page 20: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/20.jpg)
Entornos de Desarrollo
![Page 21: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/21.jpg)
¿En qué desarrollar?La ventaja del lenguaje HTML y de CSS es que no requierenun entorno especial para poder desarrollar en ellos
Al ser interpretadas las etiquetas por los navegadores, no serequiere ningún programa especial para probar el desarrollo
Cualquier editor de texto por sencillo que sea es suficientepara realizar el desarrollo
![Page 22: Introducciónacademicos.azc.uam.mx/jfg/cursos_extra/responsivos/Unidad_1.pdfLa ventaja del lenguaje HTML y de CSS es que no requieren un entorno especial para poder desarrollar en](https://reader034.fdocuments.ec/reader034/viewer/2022050716/5e2e947b99a4037fef30ecde/html5/thumbnails/22.jpg)
Los Entornos de DesarrolloCon el paso del tiempo han aparecido gran cantidad deentornos
Entornos que permiten crear sitios sin conocimiento deHTML o estilos
Entornos cada vez más profesionales que ofrecen muchas delas ventajas que presentan los entornos de desarrollo enlenguajes de programación