SlideShare uma empresa Scribd logo
1 de 21
Baixar para ler offline
MAESTRÍA EN MEDIOS INTERACTIVOS
         Curso Propedéutico
                2010
ADOBE CS, CONCEPTOS MÍNIMOS




          04
CONTENIDO

• Las   tres capas del diseño Web, otra vez

• ¿Cómo     crear documentos HTML, CSS y JS?

•A   cada quien su santo

• Editar   HTML, de David a Goliat

• Dreamweaver     y cia.
VOCABULARIO PENDIENTE


  Web 1.0, 2.0, 3.0 y los que aparezcan
•Accesabilidad Web
•Usabilidad (preferentemente definición norma ISO)
•hipertexto
•hipermedia
                       Actividad

•Consultar el sitio Web del W3C
LAS TRES CAPAS DEL DISEÑO WEB,
               OTRA VEZ

Al diseñar un sitio Web, bajo estándares, es recomendable :

•   Separar contenido/presentación/comportamiento

•   Aplicar semántica

•   Tener en cuenta la accesabilidad

•   Utilizar herramientas de validación

•   Pensar en todos los dispositivos desde donde todos los posibles
    usuarios puedan acceder
LAS TRES CAPAS DEL DISEÑO WEB,
               OTRA VEZ
Con esto se logra:

•   Mejorar la usabilidad

•   Mejorar la indexación

•   Simplificar el desarrollo

•   Mejorar la semántica y estructura de contenidos

•   Mejorar la eficiencia en la gestión de contenidos

•   Independencia del dispositivo
LAS TRES CAPAS DEL DISEÑO WEB,
            OTRA VEZ


Los estándares Web fomentan la separación de un contenido
Web en 3 capas:

•Contenido: bla, bla, bla..., o sea, documento HTML
•Presentación: bla, bla, bla..., o sea, hoja de estilo CSS
•Comportamiento: bla, bla, bla..., o sea, documento JS
LAS TRES CAPAS DEL DISEÑO WEB,
            OTRA VEZ

Todo está claro..., juro diseñar bajo estándares Web..., pero

      ¿¡ Cómo creo documentos HTML/CSS y JS !?

                                     ?
A CADA QUIEN SU SANTO




Los diseñadores usan
Dreamweaver, los demás
programan
A CADA QUIEN SU SANTO




Los programadores
codifican, no diseñan
A CADA QUIEN SU SANTO




Los contenidos
comunican, los demás
construyen el medio
A CADA QUIEN SU SANTO


•La programación HTML y JS, así como la definición de estilos CSS
implica la adquisición de conocimientos sobre estándares, naturaleza y
sintaxis específica de cada lenguaje.

•La definición del aspecto visual, así como la definición de la
experiencia del usuario implica la adquisición de conocimientos sobre
diseño gráfico, editorial y diseño de interacción

•La definición de contenidos, así como la arquitectura de la
información implica la adquisición de conocimientos sobre diseño de
la información, comunicación, mercadotecnia y otras áreas afines
A CADA QUIEN SU SANTO




Hasta el momento, ningún Software es capaz de
         crear sitios y páginas Web.
EDITAR HTML, DE DAVID A GOLIAT

Un documento que contenga lenguaje HTML puede ser
escrito en un simple editor de texto hasta en una poderosa
aplicación especializada.




TextEdit   Smultron   Coda    Dreamweaver   Joomla   Drupal
EDITAR HTML, DE DAVID A GOLIAT

El mejor editor de código es...
lápiz y papel.
DREAMWEAVER Y CIA.

pero, pa´qué sufrir...

Diseñe, desarrolle y realice el mantenimiento
de aplicaciones y sitios web basados en
estándares

Adobe® Dreamweaver® CS5 permite a los
diseñadores y desarrolladores crear sitios web
basados en estándares. Diseñe de forma visual
o directamente sobre el código, desarrolle
páginas con sistemas de gestión de contenido
y pruebe de forma precisa la compatibilidad
con los navegadores.
DREAMWEAVER Y CIA.
•Entorno de desarrollo web líder del sector
•Integración con Adobe Creative Suite



•Asistencia de codificación inteligente
•Compatibilidad con CMS integrada (CS5)
•Compatibilidad integral con CSS
•Integración con contenido de FLV
•Compatibilidad con las principales tecnologías
•Integración con Adobe BrowserLab
•Integración con Device Central
DREAMWEAVER Y CIA.

             drag&drop

    no
programes



         usa
      templates



                    ¿Diseñe de forma visual o directamente sobre el código?


            WYSIWYG                                MWYSINWSB
            (what you see is what you get)       (maybe what you see is not what should be)
DREAMWEAVER Y CIA.

              drag&drop

    no
programes
                       Práctica 01:
            Conociendo la interfaz de Dreamweaver
         usa
      templates



                     ¿Diseñe de forma visual o directamente sobre el código?


             WYSIWYG                                MWYSINWSB
             (what you see is what you get)       (maybe what you see is not what should be)
VOCABULARIO
•WYSIWYG
•CMS
•FLV
•Algo de ortografía..., interface/interfase/interfases/interfaces/interfaz



                                  Actividad
•Visitar: http://www.adobe.com/es/
•Visitar: http://www.chicageek.com/, como la ven, se verán!
Siguiente sesión:
05. INTRODUCCIÓN A HTML

Mais conteúdo relacionado

Mais procurados

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasAvanet
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasPeter Concha
 
Creación de Páginas web y Blogs - Introducción
Creación de Páginas web y Blogs - Introducción Creación de Páginas web y Blogs - Introducción
Creación de Páginas web y Blogs - Introducción Ivan Obradovic
 
Adobe dreamweaver cs6
Adobe dreamweaver cs6Adobe dreamweaver cs6
Adobe dreamweaver cs6Daniel Mf
 
Presentacion Adobe Dreamweaver CS6
Presentacion Adobe Dreamweaver CS6Presentacion Adobe Dreamweaver CS6
Presentacion Adobe Dreamweaver CS6daniuelrizzop
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin títuloDylan Caro
 
Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)reyestarita
 
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webResponsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webJavier Usobiaga
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaJano Garcia
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web Digetech.net
 
Presentacion plataforma wix
Presentacion plataforma wixPresentacion plataforma wix
Presentacion plataforma wixJohann Peralta
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño WebNicida Malca
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaLuis Felipe Perez
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsiveRenny Batista
 

Mais procurados (20)

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Creación de Páginas web y Blogs - Introducción
Creación de Páginas web y Blogs - Introducción Creación de Páginas web y Blogs - Introducción
Creación de Páginas web y Blogs - Introducción
 
02 introducción al diseño web
02 introducción al diseño web02 introducción al diseño web
02 introducción al diseño web
 
Adobe dreamweaver cs6
Adobe dreamweaver cs6Adobe dreamweaver cs6
Adobe dreamweaver cs6
 
Presentacion Adobe Dreamweaver CS6
Presentacion Adobe Dreamweaver CS6Presentacion Adobe Dreamweaver CS6
Presentacion Adobe Dreamweaver CS6
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin título
 
Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)
 
LA WEB
LA WEBLA WEB
LA WEB
 
El diseño web
El diseño webEl diseño web
El diseño web
 
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webResponsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño web
 
Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarcia
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web
 
Presentacion plataforma wix
Presentacion plataforma wixPresentacion plataforma wix
Presentacion plataforma wix
 
Adobe Dreamweaver
Adobe DreamweaverAdobe Dreamweaver
Adobe Dreamweaver
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 

Destaque (8)

Masquemeoamor
MasquemeoamorMasquemeoamor
Masquemeoamor
 
03 HTML/CSS/JA Conceptos mínimos
03 HTML/CSS/JA Conceptos mínimos03 HTML/CSS/JA Conceptos mínimos
03 HTML/CSS/JA Conceptos mínimos
 
Introduccion al diseño web
Introduccion al                                 diseño webIntroduccion al                                 diseño web
Introduccion al diseño web
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTML
 
Integración de Lean UX en Scrum
Integración de Lean UX en ScrumIntegración de Lean UX en Scrum
Integración de Lean UX en Scrum
 

Semelhante a 04 Adobe CS Conceptos minimos

Semelhante a 04 Adobe CS Conceptos minimos (20)

Todo sobre dreamweaver
Todo sobre dreamweaverTodo sobre dreamweaver
Todo sobre dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamwaver cs5
Dreamwaver cs5 Dreamwaver cs5
Dreamwaver cs5
 
Dreamwaver cs5
Dreamwaver cs5Dreamwaver cs5
Dreamwaver cs5
 
Dreamwaver cs5
Dreamwaver cs5Dreamwaver cs5
Dreamwaver cs5
 
Taller+de+wordpress+avanzado+2
Taller+de+wordpress+avanzado+2Taller+de+wordpress+avanzado+2
Taller+de+wordpress+avanzado+2
 
Páginas web
Páginas webPáginas web
Páginas web
 
Páginas web
Páginas webPáginas web
Páginas web
 
Defensa proyecto fin de carrera
Defensa proyecto fin de carreraDefensa proyecto fin de carrera
Defensa proyecto fin de carrera
 
presentacion de editores adrian rodriguez.pptx
presentacion de editores adrian rodriguez.pptxpresentacion de editores adrian rodriguez.pptx
presentacion de editores adrian rodriguez.pptx
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Pistas Construccion Web
Pistas Construccion WebPistas Construccion Web
Pistas Construccion Web
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
EXPOSICION DREAMWEAVER
EXPOSICION DREAMWEAVEREXPOSICION DREAMWEAVER
EXPOSICION DREAMWEAVER
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presenta dsfjksdfd
Presenta dsfjksdfdPresenta dsfjksdfd
Presenta dsfjksdfd
 

Mais de Víctor Manuel García Luna

Design Thinking en la transformación digital de una organización de gran escala
Design Thinking en la transformación digital de una organización de gran escalaDesign Thinking en la transformación digital de una organización de gran escala
Design Thinking en la transformación digital de una organización de gran escalaVíctor Manuel García Luna
 
Midiendo la estrategia de producto en las organizaciones
Midiendo la estrategia de producto en las organizacionesMidiendo la estrategia de producto en las organizaciones
Midiendo la estrategia de producto en las organizacionesVíctor Manuel García Luna
 
Diseño estratégico para la gestión de un portfolio de proyectos
Diseño estratégico para la gestión de un portfolio de proyectosDiseño estratégico para la gestión de un portfolio de proyectos
Diseño estratégico para la gestión de un portfolio de proyectosVíctor Manuel García Luna
 
Una guía práctica para crear empatía a través de Design Thinking
Una guía práctica para crear empatía a través de Design ThinkingUna guía práctica para crear empatía a través de Design Thinking
Una guía práctica para crear empatía a través de Design ThinkingVíctor Manuel García Luna
 
Métodos de Integración Lean, Agile & Design Thinking
Métodos de Integración Lean, Agile & Design ThinkingMétodos de Integración Lean, Agile & Design Thinking
Métodos de Integración Lean, Agile & Design ThinkingVíctor Manuel García Luna
 
Taller de introducción a Lean Startup - Agile Open Acapulco
Taller de introducción a Lean Startup - Agile Open AcapulcoTaller de introducción a Lean Startup - Agile Open Acapulco
Taller de introducción a Lean Startup - Agile Open AcapulcoVíctor Manuel García Luna
 
Taller de Introducción a Design Thinking - Agile Open Acapulco
Taller de Introducción a Design Thinking - Agile Open AcapulcoTaller de Introducción a Design Thinking - Agile Open Acapulco
Taller de Introducción a Design Thinking - Agile Open AcapulcoVíctor Manuel García Luna
 
Taller de generación de modelos de negocio con Business Model Canvas
Taller de generación de modelos de negocio con Business Model CanvasTaller de generación de modelos de negocio con Business Model Canvas
Taller de generación de modelos de negocio con Business Model CanvasVíctor Manuel García Luna
 
Integración de UX en Scrum: Lecciones para compartir
Integración de UX en Scrum: Lecciones para compartirIntegración de UX en Scrum: Lecciones para compartir
Integración de UX en Scrum: Lecciones para compartirVíctor Manuel García Luna
 
Lean Canvas: Diseñando tu modelo de negocio bajo principios de Lean Startup
Lean Canvas: Diseñando tu modelo de negocio bajo principios de Lean StartupLean Canvas: Diseñando tu modelo de negocio bajo principios de Lean Startup
Lean Canvas: Diseñando tu modelo de negocio bajo principios de Lean StartupVíctor Manuel García Luna
 
Unidad a través del cambio social: 4 pequeñas historias
Unidad a través del cambio social: 4 pequeñas historiasUnidad a través del cambio social: 4 pequeñas historias
Unidad a través del cambio social: 4 pequeñas historiasVíctor Manuel García Luna
 

Mais de Víctor Manuel García Luna (20)

Design Thinking en la transformación digital de una organización de gran escala
Design Thinking en la transformación digital de una organización de gran escalaDesign Thinking en la transformación digital de una organización de gran escala
Design Thinking en la transformación digital de una organización de gran escala
 
Outcomes over outputs
Outcomes over outputsOutcomes over outputs
Outcomes over outputs
 
Midiendo la estrategia de producto en las organizaciones
Midiendo la estrategia de producto en las organizacionesMidiendo la estrategia de producto en las organizaciones
Midiendo la estrategia de producto en las organizaciones
 
Diseño estratégico para la gestión de un portfolio de proyectos
Diseño estratégico para la gestión de un portfolio de proyectosDiseño estratégico para la gestión de un portfolio de proyectos
Diseño estratégico para la gestión de un portfolio de proyectos
 
Una guía práctica para crear empatía a través de Design Thinking
Una guía práctica para crear empatía a través de Design ThinkingUna guía práctica para crear empatía a través de Design Thinking
Una guía práctica para crear empatía a través de Design Thinking
 
Dual-Track Agile
Dual-Track AgileDual-Track Agile
Dual-Track Agile
 
Transformación a través del Diseño
Transformación a través del DiseñoTransformación a través del Diseño
Transformación a través del Diseño
 
Métodos de Integración Lean, Agile & Design Thinking
Métodos de Integración Lean, Agile & Design ThinkingMétodos de Integración Lean, Agile & Design Thinking
Métodos de Integración Lean, Agile & Design Thinking
 
Team Canvas Meeting - Lite Version
Team Canvas Meeting - Lite VersionTeam Canvas Meeting - Lite Version
Team Canvas Meeting - Lite Version
 
10 técnicas de divergencia y convergencia
10 técnicas de divergencia y convergencia10 técnicas de divergencia y convergencia
10 técnicas de divergencia y convergencia
 
Taller de introducción a Lean Startup - Agile Open Acapulco
Taller de introducción a Lean Startup - Agile Open AcapulcoTaller de introducción a Lean Startup - Agile Open Acapulco
Taller de introducción a Lean Startup - Agile Open Acapulco
 
Taller de Introducción a Design Thinking - Agile Open Acapulco
Taller de Introducción a Design Thinking - Agile Open AcapulcoTaller de Introducción a Design Thinking - Agile Open Acapulco
Taller de Introducción a Design Thinking - Agile Open Acapulco
 
Taller de generación de modelos de negocio con Business Model Canvas
Taller de generación de modelos de negocio con Business Model CanvasTaller de generación de modelos de negocio con Business Model Canvas
Taller de generación de modelos de negocio con Business Model Canvas
 
Integración de UX en Scrum: Lecciones para compartir
Integración de UX en Scrum: Lecciones para compartirIntegración de UX en Scrum: Lecciones para compartir
Integración de UX en Scrum: Lecciones para compartir
 
Design Thinking Fundamentals
Design Thinking FundamentalsDesign Thinking Fundamentals
Design Thinking Fundamentals
 
Lean Canvas: Diseñando tu modelo de negocio bajo principios de Lean Startup
Lean Canvas: Diseñando tu modelo de negocio bajo principios de Lean StartupLean Canvas: Diseñando tu modelo de negocio bajo principios de Lean Startup
Lean Canvas: Diseñando tu modelo de negocio bajo principios de Lean Startup
 
Producto Mínimo Viable
Producto Mínimo ViableProducto Mínimo Viable
Producto Mínimo Viable
 
Team canvas workshop
Team canvas workshopTeam canvas workshop
Team canvas workshop
 
Unidad a través del cambio social: 4 pequeñas historias
Unidad a través del cambio social: 4 pequeñas historiasUnidad a través del cambio social: 4 pequeñas historias
Unidad a través del cambio social: 4 pequeñas historias
 
Taller Agile Inception Deck
Taller Agile Inception DeckTaller Agile Inception Deck
Taller Agile Inception Deck
 

Último

MINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIA
MINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIAMINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIA
MINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIANELLYKATTY
 
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
Certificado de Profesionalidad SSCM0108 massiel gutierrez.pptx
Certificado de Profesionalidad SSCM0108 massiel gutierrez.pptxCertificado de Profesionalidad SSCM0108 massiel gutierrez.pptx
Certificado de Profesionalidad SSCM0108 massiel gutierrez.pptxMassiel Gutierrez Espinosa
 
Proyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docxProyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docxYANETH ARENAS VALDIVIA
 
11. ¡Promoviendo la Paternidad Responsable en La Recoleta!
11. ¡Promoviendo la Paternidad Responsable en La Recoleta!11. ¡Promoviendo la Paternidad Responsable en La Recoleta!
11. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
El_ideal_de_Nación-En_Miguel-Triana[1].pdf
El_ideal_de_Nación-En_Miguel-Triana[1].pdfEl_ideal_de_Nación-En_Miguel-Triana[1].pdf
El_ideal_de_Nación-En_Miguel-Triana[1].pdfAngel David Guerrero
 
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdf
La Planificacion en Educacion Inicial   EDU7    Ccesa007.pdfLa Planificacion en Educacion Inicial   EDU7    Ccesa007.pdf
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdfDemetrio Ccesa Rayme
 
Dia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptxDia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptxxc025079
 
EVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docx
EVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docxEVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docx
EVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docxHermesMedinaMoran
 
Lengua Y Literatura 8 Básico 2024 pdfghh
Lengua Y Literatura 8 Básico 2024 pdfghhLengua Y Literatura 8 Básico 2024 pdfghh
Lengua Y Literatura 8 Básico 2024 pdfghhDidiexy1
 
BLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdf
BLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdfBLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdf
BLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdfcpblasdeotero
 
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
8. ¡Promoviendo la Paternidad Responsable en La Recoleta!
8. ¡Promoviendo la Paternidad Responsable en La Recoleta!8. ¡Promoviendo la Paternidad Responsable en La Recoleta!
8. ¡Promoviendo la Paternidad Responsable en La Recoleta!ProfesorGualberto
 
EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docxEXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docxssuser9be75b1
 
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docxUNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docxGLADYSP4
 

Último (20)

MINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIA
MINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIAMINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIA
MINISTERIO DE EDUCACIÓN prueba-diagnostica-lectura-CUARTO AÑO DE SECUNDARIA
 
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
3. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
Certificado de Profesionalidad SSCM0108 massiel gutierrez.pptx
Certificado de Profesionalidad SSCM0108 massiel gutierrez.pptxCertificado de Profesionalidad SSCM0108 massiel gutierrez.pptx
Certificado de Profesionalidad SSCM0108 massiel gutierrez.pptx
 
Tema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdf
Tema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdfTema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdf
Tema 4.- Cultura corporativa: Comunicacion e imagen de marca.pdf
 
Proyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docxProyecto del via crucis para semana s.docx
Proyecto del via crucis para semana s.docx
 
11. ¡Promoviendo la Paternidad Responsable en La Recoleta!
11. ¡Promoviendo la Paternidad Responsable en La Recoleta!11. ¡Promoviendo la Paternidad Responsable en La Recoleta!
11. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
El_ideal_de_Nación-En_Miguel-Triana[1].pdf
El_ideal_de_Nación-En_Miguel-Triana[1].pdfEl_ideal_de_Nación-En_Miguel-Triana[1].pdf
El_ideal_de_Nación-En_Miguel-Triana[1].pdf
 
El anhelo de Dios en Sion, porque nos ama
El anhelo de Dios en Sion, porque nos amaEl anhelo de Dios en Sion, porque nos ama
El anhelo de Dios en Sion, porque nos ama
 
Tema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdf
Tema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdfTema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdf
Tema 4.- INSFRAESTRUCTURAS DE TI Y TECNOLOGIAS EMERGENTES.pdf
 
Sesión de clase: El anhelo de Dios en Sion
Sesión de clase: El anhelo de Dios en SionSesión de clase: El anhelo de Dios en Sion
Sesión de clase: El anhelo de Dios en Sion
 
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
2. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdf
La Planificacion en Educacion Inicial   EDU7    Ccesa007.pdfLa Planificacion en Educacion Inicial   EDU7    Ccesa007.pdf
La Planificacion en Educacion Inicial EDU7 Ccesa007.pdf
 
Dia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptxDia internacional de peliculas iberoamericanas.pptx
Dia internacional de peliculas iberoamericanas.pptx
 
EVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docx
EVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docxEVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docx
EVALUACIÓN DIAGNÓSTICA DPCC 33 y 4°.docx
 
Lengua Y Literatura 8 Básico 2024 pdfghh
Lengua Y Literatura 8 Básico 2024 pdfghhLengua Y Literatura 8 Básico 2024 pdfghh
Lengua Y Literatura 8 Básico 2024 pdfghh
 
BLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdf
BLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdfBLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdf
BLAS DE OTERO PRESENTACION PUERTAS ABIERTAS.pdf
 
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
4. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
8. ¡Promoviendo la Paternidad Responsable en La Recoleta!
8. ¡Promoviendo la Paternidad Responsable en La Recoleta!8. ¡Promoviendo la Paternidad Responsable en La Recoleta!
8. ¡Promoviendo la Paternidad Responsable en La Recoleta!
 
EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docxEXPERIENCIA DE APRENDIZAJE 3  EPT - SECUNDARIA-2024.docx
EXPERIENCIA DE APRENDIZAJE 3 EPT - SECUNDARIA-2024.docx
 
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docxUNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
UNIDAD DE APRENIZAJE CERO QUINTO GRADO - 2024.docx
 

04 Adobe CS Conceptos minimos

  • 1. MAESTRÍA EN MEDIOS INTERACTIVOS Curso Propedéutico 2010
  • 2. ADOBE CS, CONCEPTOS MÍNIMOS 04
  • 3. CONTENIDO • Las tres capas del diseño Web, otra vez • ¿Cómo crear documentos HTML, CSS y JS? •A cada quien su santo • Editar HTML, de David a Goliat • Dreamweaver y cia.
  • 4. VOCABULARIO PENDIENTE Web 1.0, 2.0, 3.0 y los que aparezcan •Accesabilidad Web •Usabilidad (preferentemente definición norma ISO) •hipertexto •hipermedia Actividad •Consultar el sitio Web del W3C
  • 5. LAS TRES CAPAS DEL DISEÑO WEB, OTRA VEZ Al diseñar un sitio Web, bajo estándares, es recomendable : • Separar contenido/presentación/comportamiento • Aplicar semántica • Tener en cuenta la accesabilidad • Utilizar herramientas de validación • Pensar en todos los dispositivos desde donde todos los posibles usuarios puedan acceder
  • 6. LAS TRES CAPAS DEL DISEÑO WEB, OTRA VEZ Con esto se logra: • Mejorar la usabilidad • Mejorar la indexación • Simplificar el desarrollo • Mejorar la semántica y estructura de contenidos • Mejorar la eficiencia en la gestión de contenidos • Independencia del dispositivo
  • 7. LAS TRES CAPAS DEL DISEÑO WEB, OTRA VEZ Los estándares Web fomentan la separación de un contenido Web en 3 capas: •Contenido: bla, bla, bla..., o sea, documento HTML •Presentación: bla, bla, bla..., o sea, hoja de estilo CSS •Comportamiento: bla, bla, bla..., o sea, documento JS
  • 8. LAS TRES CAPAS DEL DISEÑO WEB, OTRA VEZ Todo está claro..., juro diseñar bajo estándares Web..., pero ¿¡ Cómo creo documentos HTML/CSS y JS !? ?
  • 9. A CADA QUIEN SU SANTO Los diseñadores usan Dreamweaver, los demás programan
  • 10. A CADA QUIEN SU SANTO Los programadores codifican, no diseñan
  • 11. A CADA QUIEN SU SANTO Los contenidos comunican, los demás construyen el medio
  • 12. A CADA QUIEN SU SANTO •La programación HTML y JS, así como la definición de estilos CSS implica la adquisición de conocimientos sobre estándares, naturaleza y sintaxis específica de cada lenguaje. •La definición del aspecto visual, así como la definición de la experiencia del usuario implica la adquisición de conocimientos sobre diseño gráfico, editorial y diseño de interacción •La definición de contenidos, así como la arquitectura de la información implica la adquisición de conocimientos sobre diseño de la información, comunicación, mercadotecnia y otras áreas afines
  • 13. A CADA QUIEN SU SANTO Hasta el momento, ningún Software es capaz de crear sitios y páginas Web.
  • 14. EDITAR HTML, DE DAVID A GOLIAT Un documento que contenga lenguaje HTML puede ser escrito en un simple editor de texto hasta en una poderosa aplicación especializada. TextEdit Smultron Coda Dreamweaver Joomla Drupal
  • 15. EDITAR HTML, DE DAVID A GOLIAT El mejor editor de código es... lápiz y papel.
  • 16. DREAMWEAVER Y CIA. pero, pa´qué sufrir... Diseñe, desarrolle y realice el mantenimiento de aplicaciones y sitios web basados en estándares Adobe® Dreamweaver® CS5 permite a los diseñadores y desarrolladores crear sitios web basados en estándares. Diseñe de forma visual o directamente sobre el código, desarrolle páginas con sistemas de gestión de contenido y pruebe de forma precisa la compatibilidad con los navegadores.
  • 17. DREAMWEAVER Y CIA. •Entorno de desarrollo web líder del sector •Integración con Adobe Creative Suite •Asistencia de codificación inteligente •Compatibilidad con CMS integrada (CS5) •Compatibilidad integral con CSS •Integración con contenido de FLV •Compatibilidad con las principales tecnologías •Integración con Adobe BrowserLab •Integración con Device Central
  • 18. DREAMWEAVER Y CIA. drag&drop no programes usa templates ¿Diseñe de forma visual o directamente sobre el código? WYSIWYG MWYSINWSB (what you see is what you get) (maybe what you see is not what should be)
  • 19. DREAMWEAVER Y CIA. drag&drop no programes Práctica 01: Conociendo la interfaz de Dreamweaver usa templates ¿Diseñe de forma visual o directamente sobre el código? WYSIWYG MWYSINWSB (what you see is what you get) (maybe what you see is not what should be)
  • 20. VOCABULARIO •WYSIWYG •CMS •FLV •Algo de ortografía..., interface/interfase/interfases/interfaces/interfaz Actividad •Visitar: http://www.adobe.com/es/ •Visitar: http://www.chicageek.com/, como la ven, se verán!