Enviar búsqueda
Cargar
Html
•
Descargar como PPT, PDF
•
0 recomendaciones
•
42 vistas
Ruben Percy Rodas Gil
Seguir
Tema
Leer menos
Leer más
Educación
Denunciar
Compartir
Denunciar
Compartir
1 de 36
Descargar ahora
Recomendados
Internet Navegadores
Internet Navegadores
Isis Jeronimo Angeles
HTML5, CSS3, JQUERY Y BOOSTRAP
HTML5, CSS3, JQUERY Y BOOSTRAP
Cristian Alberto Oliva
HTML.ppt
HTML.ppt
NahumMoralesHernande
Presentación HTML
Presentación HTML
GregorioBlazquezMart
Curso de-diseño-web-lección-1-html
Curso de-diseño-web-lección-1-html
Vanadis
Camilo diaz
Camilo diaz
camdia2rx
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
wandelsonwww
Curso CSS Avanzado
Curso CSS Avanzado
Irontec
Recomendados
Internet Navegadores
Internet Navegadores
Isis Jeronimo Angeles
HTML5, CSS3, JQUERY Y BOOSTRAP
HTML5, CSS3, JQUERY Y BOOSTRAP
Cristian Alberto Oliva
HTML.ppt
HTML.ppt
NahumMoralesHernande
Presentación HTML
Presentación HTML
GregorioBlazquezMart
Curso de-diseño-web-lección-1-html
Curso de-diseño-web-lección-1-html
Vanadis
Camilo diaz
Camilo diaz
camdia2rx
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
wandelsonwww
Curso CSS Avanzado
Curso CSS Avanzado
Irontec
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
joycesita
Seminario html5
Seminario html5
UDECI
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
José Rodríguez
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
Joaquin Lara Sierra
Programacion web
Programacion web
Carlos Alonso Pérez
Html
Html
jcarlosmejia
Html - Tema 1
Html - Tema 1
Renny Batista
Acerca de html
Acerca de html
Herberto Ramirez
Estructura semantica Html5.pptx
Estructura semantica Html5.pptx
EliAlbertoMendoza1
Introducción a XHTML
Introducción a XHTML
Arkaitz Garro
HTML5 y CSS3
HTML5 y CSS3
Sergio David Acosta
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
jcremiro
Introducción HTML
Introducción HTML
Carlos A. Iglesias
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y Accesibilidad
FRONTDAYS
Html
Html
candemartz
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
Sergio Nouvel Castro
Html5 Básico
Html5 Básico
FEDIMON
Conceptos basicos
Conceptos basicos
MarioLaraLpez
HTML.ppt
HTML.ppt
manenc1
HTML.ppt
HTML.ppt
Edilfredo Pieneda Florez
diseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demas
jeacordoba2020
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
Alex Vogager
Más contenido relacionado
La actualidad más candente
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
joycesita
Seminario html5
Seminario html5
UDECI
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
José Rodríguez
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
Joaquin Lara Sierra
Programacion web
Programacion web
Carlos Alonso Pérez
Html
Html
jcarlosmejia
Html - Tema 1
Html - Tema 1
Renny Batista
Acerca de html
Acerca de html
Herberto Ramirez
Estructura semantica Html5.pptx
Estructura semantica Html5.pptx
EliAlbertoMendoza1
Introducción a XHTML
Introducción a XHTML
Arkaitz Garro
HTML5 y CSS3
HTML5 y CSS3
Sergio David Acosta
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
jcremiro
Introducción HTML
Introducción HTML
Carlos A. Iglesias
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y Accesibilidad
FRONTDAYS
Html
Html
candemartz
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
Sergio Nouvel Castro
Html5 Básico
Html5 Básico
FEDIMON
Conceptos basicos
Conceptos basicos
MarioLaraLpez
La actualidad más candente
(18)
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Seminario html5
Seminario html5
Curso HTML 5 - Módulo 1
Curso HTML 5 - Módulo 1
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
Programacion web
Programacion web
Html
Html
Html - Tema 1
Html - Tema 1
Acerca de html
Acerca de html
Estructura semantica Html5.pptx
Estructura semantica Html5.pptx
Introducción a XHTML
Introducción a XHTML
HTML5 y CSS3
HTML5 y CSS3
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
Introducción HTML
Introducción HTML
Buenas prácticas en XHTML, CSS y Accesibilidad
Buenas prácticas en XHTML, CSS y Accesibilidad
Html
Html
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
Html5 Básico
Html5 Básico
Conceptos basicos
Conceptos basicos
Similar a Html
HTML.ppt
HTML.ppt
manenc1
HTML.ppt
HTML.ppt
Edilfredo Pieneda Florez
diseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demas
jeacordoba2020
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
Alex Vogager
Servidores.pptx
Servidores.pptx
Carlos Paredes
CSS estilos.pptx
CSS estilos.pptx
fgabycastillo1
1-HTML EXPO.pdf
1-HTML EXPO.pdf
MiguelangelFermnlope
Presentacion asignatura
Presentacion asignatura
COAC UNION POPULAR
Html5 2010
Html5 2010
Lluís Codina
HTML.ppt
HTML.ppt
ssusera9852a
Presentación de html, css y javascript.
Presentación de html, css y javascript.
CeteliInmaculada
Html, Css y JavaScript
Html, Css y JavaScript
Liz Nicol Cardenas Jauregui
html5
html5
Francesc Perez
Pistas Construccion Web
Pistas Construccion Web
T T
Tipo
Tipo
IVANCASTROFERREIRA
Html Sharon 4101
Html Sharon 4101
SharonQuintero01
Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
Juan Pernia (juanrules)
Elementos de html5 y css3
Elementos de html5 y css3
Deivis Ricardo Alvarez Mendoza
Articulo monica y christian "español"
Articulo monica y christian "español"
Mónica Sánchez Crisostomo
HTML y CSS
HTML y CSS
Dinamiclerning
Similar a Html
(20)
HTML.ppt
HTML.ppt
HTML.ppt
HTML.ppt
diseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demas
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
Servidores.pptx
Servidores.pptx
CSS estilos.pptx
CSS estilos.pptx
1-HTML EXPO.pdf
1-HTML EXPO.pdf
Presentacion asignatura
Presentacion asignatura
Html5 2010
Html5 2010
HTML.ppt
HTML.ppt
Presentación de html, css y javascript.
Presentación de html, css y javascript.
Html, Css y JavaScript
Html, Css y JavaScript
html5
html5
Pistas Construccion Web
Pistas Construccion Web
Tipo
Tipo
Html Sharon 4101
Html Sharon 4101
Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
Elementos de html5 y css3
Elementos de html5 y css3
Articulo monica y christian "español"
Articulo monica y christian "español"
HTML y CSS
HTML y CSS
Último
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
CesarFernandez937857
Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
Ciencias Integradas 7 (2023 - 2024)
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
patriciaines1993
Procesos Didácticos en Educación Inicial .pptx
Procesos Didácticos en Educación Inicial .pptx
MapyMerma1
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdf
samyarrocha1
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
EDUCCUniversidadCatl
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
Maestría en Comunicación Digital Interactiva - UNR
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
CesarFernandez937857
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamica
Flor Idalia Espinoza Ortega
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
AbelardoVelaAlbrecht1
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
gustavorojas179704
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Manuel Molina
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
OscarEduardoSanchezC
Cuadernillo de las sílabas trabadas.pdf
Cuadernillo de las sílabas trabadas.pdf
Brandonsanchezdoming
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
Carlos Campaña Montenegro
La Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdf
Joaquín Marbán Sánchez
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
José Luis Palma
Unidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDI
Maestría en Comunicación Digital Interactiva - UNR
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
danalikcruz2000
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo Sostenible
JonathanCovena1
Último
(20)
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
Procesos Didácticos en Educación Inicial .pptx
Procesos Didácticos en Educación Inicial .pptx
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdf
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamica
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
Cuadernillo de las sílabas trabadas.pdf
Cuadernillo de las sílabas trabadas.pdf
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
La Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdf
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
Unidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDI
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo Sostenible
Html
1.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. HTML5, CSS3, Jquery y Boostrap
2.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. • Índice • HTML • CSS • Javascript • Bootstrap
3.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. HTML5 • El concepto de elemento HTML Elemento Etiqueta de Apertura Etiq. de CierreContenido <p class=“texto”>Curso HTML CEMA </p> Nombre Valor Atributo
10.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. • Índice • HTML • CSS • Javascript • Bootstrap
16.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. CSS3 • Cómo se define un estilo en css: Selector { propiedad: valor; ...} Declaración H1 {color:#CC9900;} Ejemplo:
21.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. • Índice • HTML • CSS • Javascript • Bootstrap
26.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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.
© 2012. Área
de las Tecnologías de la Información y las Comunicaciones Aplicadas. 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”,
Descargar ahora