HTML css y html css y html css y html.ppt
AdielMoran1
18 views
37 slides
Sep 12, 2025
Slide 1 of 37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
About This Presentation
xdfgs
Slide Content
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.
•Índice
•HTML
•CSS
•Javascript
•Bootstrap
•Índice
•HTML
•CSS
•Javascript
•Bootstrap
© 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
Javascri
pt
• Colores
•
Tipografías
•
Alineación
• Efectos
• Validaciones
•
Automatización
• Párrafos
•
Encabezados
• Listas
•Tablas
• Capas
• Etc.
• Textos
• Imágenes
• Enlaces
•Fondos
•Tamaños
•Etc.
Estructura de una página web
Página Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascri
pt
• Colores
•
Tipografías
•
Alineación
• Efectos
• Validaciones
•
Automatización
• Párrafos
•
Encabezados
• Listas
•Tablas
• Capas
• Etc.
• Textos
• Imágenes
• Enlaces
•Fondos
•Tamaños
•Etc.
© 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.
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.
© 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
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
© 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.
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.
© 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
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
© 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.
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.
© 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>
NombreValor
Atributo
HTML5
•El concepto de elemento HTML
Elemento
Etiqueta de Apertura Etiq. de CierreContenido
<p class=“texto”>Curso HTML CEMA </p>
NombreValor
Atributo
© 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>
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>
© 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>
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>
© 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
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
© 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
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
© 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
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
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.
•Índice
•HTML
•CSS
•Javascript
•Bootstrap
•Índice
•HTML
•CSS
•Javascript
•Bootstrap
© 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.
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.
© 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.
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.
© 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.
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.
© 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.
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.
© 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:
CSS3
•Cómo se define un estilo en css:
Selector { propiedad: valor; ...}
Declaración
H1 {color:#CC9900;}
Ejemplo:
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.
<link rel=“stylesheet” href=“estilos.css”>
<link rel=“stylesheet” href=“estilos.css”>
© 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
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
© 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.
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.
© 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)
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)
© 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
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
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.
•Índice
•HTML
•CSS
•Javascript
•Bootstrap
•Índice
•HTML
•CSS
•Javascript
•Bootstrap
© 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).
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).
© 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.
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.
© 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>
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>
© 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".
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".
© 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.
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.
© 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
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
© 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".
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".
© 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
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
© 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.
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.
© 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.
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.
© 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”,
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”,
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 18
- Slides 37
- Age 82 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
35 views
21
Know for Certain
DaveSinNM
23 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views