SlideShare una empresa de Scribd logo
1 de 17
BADILLA NUÑEZ DAVID
GRIJALVA MARTINEZ VANESSA
Las capas son bloques con


contenido HTML que pueden
posicionarse de manera
dinámica y organizables en
3D.     Realmente    tienen
sentido dentro de los
estilos CSS (Las hojas de
estilo en cascada Cascading
Style Sheets).
   En realidad, el nombre de capas
    proviene de Netscape, que
    estos       elementos        los
    implementaba como <layers>, en
    castellano capas. Las versiones
    modernas de Netscape (de la 6
    en adelante) ya no usan esta
    etiqueta si no que se han
    decantado por la más Standard
    <div>.
   No obstante la manipulación de estos elementos
    por parte de Micr     osoft y Netscape son
    diferentes, ambos usan algunas extensiones
    propias, aunque ambos admiten los standares de
    la W3C con lo que el uso de estos elementos es
    bastante universal.
   Se definen cada una de las celdas (capas) por
    separado, dándoles las características que deseemos
    como
    color
    imagen de fondo
    tamaño de letra
    anchura
    altura
   y una vez definidas todas las capas le asignamos una
    posición en la página, una por una, hasta conseguir hacer
    la Web.
   Al final obtenemos lo mismo que usando las tablas, pero
    de un modo más profesional. Además, que los buscadores
    como Google leen más fácilmente el contenido de las
    capas o DIVs que el de las celdas de una tabla.
   Los layers (capas) formaban la base de una
    técnica de programación HTML dinámico
    específica para Netscape 4. Cada capa se trataba
    como objeto documento distinto en Java Script.
   El contenido se podía o incluir en el mismo
    archivo dentro del elemento no estándar HTML
    <layer> (o cualquier otro elemento con su posición
    definida como quot;absolutequot; mediante CSS(Las
    hojas de estilo en cascada Cascading Style
    Sheets), cargado desde un archivo aparte con
    <layer src=quot;URL AQUIquot;> o <span src=quot;URL
    AQUIquot;> o <div src=quot;URL AQUIquot;>, o generado
    mediante Java Script con new Layer(), el
    contenido      entonces      se    llenaría    con
    layer.document.write().
   En los navegadores modernos, esta funcionalidad
    se consigue mediante span o div con
    posicionamiento absoluto, o, para la carga de
    contenido desde un archivo externo, un Frame.
FUNCIONAMIENTO

 Mejoran la visibilidad de la pagina en la
  web, creando un atractivo visual hacia el usuario
  final.
 La navegación es mas sencilla en algunos casos.

 La exposición de las capas es una estrategia de
  marketing, llamativa y bien visible.
   Cuestionar los factores que delimitan y conducen la
    creatividad en el acto de diseñar.

   Reflexionar sobre el trabajo del diseñador analizando
    sus métodos y sus contextos teóricos y estéticos.

   Fomentar un análisis en torno al uso de la tecnología de
    punta y cómo ésta influye en los procesos creativos y
    en las necesidades de comunicación.

   Intentará generar una postura crítica ante el diseño, la
    tecnología y el contexto sociocultural, motivando el
    planteamiento de nuevas estrategias de comunicación
    que satisfagan necesidades reales y conduzcan a
    discursos y posturas propias ante la tecnología y ante el
    mismo diseño.
 Algunos de los programas que utilizan
 layers son:
FUENTES CONSULTADAS
   http://www.cenart.gob.mx/data.lab.02/programas/ve
    rsionh/layers.htm.

   http://74.125.47.132/search?q=cache:gNBwYZl4Hj
    YJ:dc.exa.unrc.edu.ar/nuevodc/materias/ingenieria/
    Material/1163109537/1163110516/Layer%25201.pd
    f+APLICACION+DIV+O+LAYERS&cd=5&hl=es&ct=
    clnk&gl=mx

   www.cenart.gob.mx/data.lab.02/programas/version
    h/layers.htm

   http://www.echoecho.com/csslayers.htm
   http://www.todoexpertos.com/categorias/tecnol
    ogia-e-internet/desarrollo-de-sitios-
    web/respuestas/20682/capas-y-tablas

   http://www.diccionarios-
    online.com.ar/sitios/modelo_de_capas.html

   http://mundogris.wordpress.com/2008/06/19/ar
    quitectura-por-capas-para-sitios-web/

   http://aprendeenlinea.udea.edu.co/lms/moodle/c
    ourse/view.php?id=123
   http://www.youtube.com/watch?v=sdJql7ytOfU

   http://www.youtube.com/watch?v=bURvPojEGHo
    &feature=related

   http://www.comocreartuweb.com/html-kit-
    tutorial/tutorial-html-kit-introducion.html

   http://www.mailxmail.com/curso-creacion-
    paginas-web-html/capas
LayeRs Dyv

Más contenido relacionado

Similar a LayeRs Dyv

Defensa proyecto fin de carrera
Defensa proyecto fin de carreraDefensa proyecto fin de carrera
Defensa proyecto fin de carreraBorja Merino
 
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...Fellyph Cintra
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas webGeraldyn De Sousa
 
06_Nuevas reglas.pptx
06_Nuevas reglas.pptx06_Nuevas reglas.pptx
06_Nuevas reglas.pptxyendrao
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Hernan Beati
 
Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web DesignNadal Soler
 
Manual css
Manual cssManual css
Manual cssJennifer
 
Introducción de canvas y de svg html5
Introducción de canvas y de svg  html5Introducción de canvas y de svg  html5
Introducción de canvas y de svg html5CarlosGonzalezGalvez
 
Front-end Basics for Developers
Front-end Basics for DevelopersFront-end Basics for Developers
Front-end Basics for DevelopersNadal Soler
 
Presentacióin tema 6
Presentacióin tema 6Presentacióin tema 6
Presentacióin tema 6Diana Mabel
 

Similar a LayeRs Dyv (20)

Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
Defensa proyecto fin de carrera
Defensa proyecto fin de carreraDefensa proyecto fin de carrera
Defensa proyecto fin de carrera
 
final
finalfinal
final
 
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
06_Nuevas reglas.pptx
06_Nuevas reglas.pptx06_Nuevas reglas.pptx
06_Nuevas reglas.pptx
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
CSS3
CSS3CSS3
CSS3
 
Investigacion de pagina web
Investigacion de pagina webInvestigacion de pagina web
Investigacion de pagina web
 
Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web Design
 
Flexsdashboard
Flexsdashboard Flexsdashboard
Flexsdashboard
 
Manual css
Manual cssManual css
Manual css
 
Semana 2 Configuración entorno de desarrollo
Semana 2   Configuración entorno de desarrolloSemana 2   Configuración entorno de desarrollo
Semana 2 Configuración entorno de desarrollo
 
Introducción de canvas y de svg html5
Introducción de canvas y de svg  html5Introducción de canvas y de svg  html5
Introducción de canvas y de svg html5
 
Front-end Basics for Developers
Front-end Basics for DevelopersFront-end Basics for Developers
Front-end Basics for Developers
 
Presentacióin tema 6
Presentacióin tema 6Presentacióin tema 6
Presentacióin tema 6
 
Manual css-hojas-estilo
Manual css-hojas-estiloManual css-hojas-estilo
Manual css-hojas-estilo
 
Separando el Contenido de la Presentación
Separando el Contenido de la PresentaciónSeparando el Contenido de la Presentación
Separando el Contenido de la Presentación
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
CSS3
CSS3CSS3
CSS3
 

Último

Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...AlanCedillo9
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersIván López Martín
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 

Último (19)

Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 

LayeRs Dyv

  • 1. BADILLA NUÑEZ DAVID GRIJALVA MARTINEZ VANESSA
  • 2. Las capas son bloques con  contenido HTML que pueden posicionarse de manera dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS (Las hojas de estilo en cascada Cascading Style Sheets).
  • 3. En realidad, el nombre de capas proviene de Netscape, que estos elementos los implementaba como <layers>, en castellano capas. Las versiones modernas de Netscape (de la 6 en adelante) ya no usan esta etiqueta si no que se han decantado por la más Standard <div>.
  • 4. No obstante la manipulación de estos elementos por parte de Micr osoft y Netscape son diferentes, ambos usan algunas extensiones propias, aunque ambos admiten los standares de la W3C con lo que el uso de estos elementos es bastante universal.
  • 5. Se definen cada una de las celdas (capas) por separado, dándoles las características que deseemos como color imagen de fondo tamaño de letra anchura altura  y una vez definidas todas las capas le asignamos una posición en la página, una por una, hasta conseguir hacer la Web.  Al final obtenemos lo mismo que usando las tablas, pero de un modo más profesional. Además, que los buscadores como Google leen más fácilmente el contenido de las capas o DIVs que el de las celdas de una tabla.
  • 6. Los layers (capas) formaban la base de una técnica de programación HTML dinámico específica para Netscape 4. Cada capa se trataba como objeto documento distinto en Java Script.
  • 7. El contenido se podía o incluir en el mismo archivo dentro del elemento no estándar HTML <layer> (o cualquier otro elemento con su posición definida como quot;absolutequot; mediante CSS(Las hojas de estilo en cascada Cascading Style Sheets), cargado desde un archivo aparte con <layer src=quot;URL AQUIquot;> o <span src=quot;URL AQUIquot;> o <div src=quot;URL AQUIquot;>, o generado mediante Java Script con new Layer(), el contenido entonces se llenaría con layer.document.write().
  • 8. En los navegadores modernos, esta funcionalidad se consigue mediante span o div con posicionamiento absoluto, o, para la carga de contenido desde un archivo externo, un Frame.
  • 9. FUNCIONAMIENTO  Mejoran la visibilidad de la pagina en la web, creando un atractivo visual hacia el usuario final.  La navegación es mas sencilla en algunos casos.  La exposición de las capas es una estrategia de marketing, llamativa y bien visible.
  • 10. Cuestionar los factores que delimitan y conducen la creatividad en el acto de diseñar.  Reflexionar sobre el trabajo del diseñador analizando sus métodos y sus contextos teóricos y estéticos.  Fomentar un análisis en torno al uso de la tecnología de punta y cómo ésta influye en los procesos creativos y en las necesidades de comunicación.  Intentará generar una postura crítica ante el diseño, la tecnología y el contexto sociocultural, motivando el planteamiento de nuevas estrategias de comunicación que satisfagan necesidades reales y conduzcan a discursos y posturas propias ante la tecnología y ante el mismo diseño.
  • 11.  Algunos de los programas que utilizan layers son:
  • 12.
  • 13.
  • 14. FUENTES CONSULTADAS  http://www.cenart.gob.mx/data.lab.02/programas/ve rsionh/layers.htm.  http://74.125.47.132/search?q=cache:gNBwYZl4Hj YJ:dc.exa.unrc.edu.ar/nuevodc/materias/ingenieria/ Material/1163109537/1163110516/Layer%25201.pd f+APLICACION+DIV+O+LAYERS&cd=5&hl=es&ct= clnk&gl=mx  www.cenart.gob.mx/data.lab.02/programas/version h/layers.htm  http://www.echoecho.com/csslayers.htm
  • 15. http://www.todoexpertos.com/categorias/tecnol ogia-e-internet/desarrollo-de-sitios- web/respuestas/20682/capas-y-tablas  http://www.diccionarios- online.com.ar/sitios/modelo_de_capas.html  http://mundogris.wordpress.com/2008/06/19/ar quitectura-por-capas-para-sitios-web/  http://aprendeenlinea.udea.edu.co/lms/moodle/c ourse/view.php?id=123
  • 16. http://www.youtube.com/watch?v=sdJql7ytOfU  http://www.youtube.com/watch?v=bURvPojEGHo &feature=related  http://www.comocreartuweb.com/html-kit- tutorial/tutorial-html-kit-introducion.html  http://www.mailxmail.com/curso-creacion- paginas-web-html/capas