DISEÑO WEB DISEÑO WEB Integración de contenidos como imágenes, Integración de contenidos como imágenes, texto, vínculos y animaciones que en texto, vínculos y animaciones que en conjunto transmitan un mensaje claro y conjunto transmitan un mensaje claro y contundente, a través de un bóxer o contundente, a través de un bóxer o navegador. navegador. El diseño de sitios o paginas web involucra El diseño de sitios o paginas web involucra a varias herramientas para la creación del a varias herramientas para la creación del código, los elementos visuales, la código, los elementos visuales, la optimización de imágenes ,etc. optimización de imágenes ,etc.
Transcript
DISEÑO WEBDISEÑO WEB
Integración de contenidos como imágenes, Integración de contenidos como imágenes, texto, vínculos y animaciones que en texto, vínculos y animaciones que en
conjunto transmitan un mensaje claro y conjunto transmitan un mensaje claro y contundente, a través de un bóxer o contundente, a través de un bóxer o
navegador.navegador.
El diseño de sitios o paginas web involucra El diseño de sitios o paginas web involucra a varias herramientas para la creación del a varias herramientas para la creación del
código, los elementos visuales, la código, los elementos visuales, la optimización de imágenes ,etc.optimización de imágenes ,etc.
DREAMWEAVERDREAMWEAVER
Editor profesional de documentos Web. Editor profesional de documentos Web. Permite crear pàginas tanto escribiendo Permite crear pàginas tanto escribiendo directamente el còdigo en HTML como directamente el còdigo en HTML como diseñando de forma visual los elementos.diseñando de forma visual los elementos.
FLUJO DE TRABAJO PARA LA FLUJO DE TRABAJO PARA LA CREACIÒN DE UN STIO WEBCREACIÒN DE UN STIO WEB
Se define como la estrategia que debe Se define como la estrategia que debe seguir el desarrollo de una página web a seguir el desarrollo de una página web a partir de su diseño, objetivo y partir de su diseño, objetivo y funcionamiento. Este proceso inicia con la funcionamiento. Este proceso inicia con la planeación y culmina con la codificación.planeación y culmina con la codificación.
Recuerda que un sitio Web se compone Recuerda que un sitio Web se compone de varias páginas que tratan de un mismo de varias páginas que tratan de un mismo tema. Cada una de las páginas contiene a tema. Cada una de las páginas contiene a su vez textos, imágenes y vínculossu vez textos, imágenes y vínculos
Antes de crear cualquier sitio web Antes de crear cualquier sitio web necesitas planearlo, Debes definir los necesitas planearlo, Debes definir los objetivos y la forma de presentarlos. objetivos y la forma de presentarlos. Tienes que elegir una estructura de Tienes que elegir una estructura de navegación. Hay que definir un estilo navegación. Hay que definir un estilo visual.visual.
Todo sitio web debe tener una página Todo sitio web debe tener una página princiapl denominada princiapl denominada index .index .
Debes diseñar cada uno de los Debes diseñar cada uno de los documentos (páginas) que componen el documentos (páginas) que componen el sitio.sitio.
ESTRUCTURAS DE ESTRUCTURAS DE NAVEGACIÒNNAVEGACIÒN
JERARQUICA.-Estructura de árbol, en JERARQUICA.-Estructura de árbol, en donde la raíz (index) contiene la donde la raíz (index) contiene la introducción o presentación y un menú introducción o presentación y un menú principal.principal.
Lineal.- Es la estructura más simple de Lineal.- Es la estructura más simple de todas, en que se navega de una página a todas, en que se navega de una página a la siguiente o a la anterior como si fuera la siguiente o a la anterior como si fuera un libro.un libro.
Lineal con Jerárquica.- Es una mezcla de Lineal con Jerárquica.- Es una mezcla de las dos anteriores: los temas y subtemas las dos anteriores: los temas y subtemas están organizados en forma jerárquica, están organizados en forma jerárquica, pero puedes leer todo el contenido en pero puedes leer todo el contenido en orden lineal.orden lineal.
Red.- Es una organización libre sin un Red.- Es una organización libre sin un orden establecido aparente. Esta orden establecido aparente. Esta estructura tiene el riesgo de perder al estructura tiene el riesgo de perder al visitante dentro del sitio, o de que no logre visitante dentro del sitio, o de que no logre ver algún contenido que pretendías ver algún contenido que pretendías mostrarle.mostrarle.
PASOS PARA CREAR UN SITIO WEBPASOS PARA CREAR UN SITIO WEB
1.1. Planeación del sito WebPlaneación del sito Web
2.2. Recopilación de información e imágenesRecopilación de información e imágenes
3.3. Manipulación y optimización de imágenes Manipulación y optimización de imágenes en un programa de diseño grafico.en un programa de diseño grafico.
4.4. Creación del nuevo sito en DreamweaverCreación del nuevo sito en Dreamweaver
5.5. Diseño de las paginas Web que Diseño de las paginas Web que conformaran el sitioconformaran el sitio
6.6. Integración de contenido en las paginasIntegración de contenido en las paginas
PLANEACIÓN DE UN SITIO WEBPLANEACIÓN DE UN SITIO WEB
La planeación de un sitio web comprende La planeación de un sitio web comprende varios aspectos como:varios aspectos como: El temaEl tema El propósitoEl propósito La audienciaLa audiencia La estructuraLa estructura El contenidoEl contenido
ACTIVIDAD 01. ACTIVIDAD 01. Ejemplo de planeación de Ejemplo de planeación de un sitio web un sitio web
1.- Elige un tema en general para un sitio 1.- Elige un tema en general para un sitio educativo, relacionado con alguna educativo, relacionado con alguna asignatura como literatura, ciencias, asignatura como literatura, ciencias, historia u otra.historia u otra.
2.- Define un propósito para el sitio y 2.- Define un propósito para el sitio y decide el tipo de audiencia al que decide el tipo de audiencia al que quieres dirigir tu trabajo.quieres dirigir tu trabajo.
Tema: MATEMÁTICASTema: MATEMÁTICAS
Propósito: Ser un material de apoyo auxiliar Propósito: Ser un material de apoyo auxiliar en internet que permita consultar fórmulas en internet que permita consultar fórmulas o como consulta rápida de algunos temaso como consulta rápida de algunos temas..
3.- Desglosa el contenido del nuevo sitio en 3.- Desglosa el contenido del nuevo sitio en temas generales, que se convertirán en temas generales, que se convertirán en las páginas del sitio web. No olvides las páginas del sitio web. No olvides siempre incluir una página principal de siempre incluir una página principal de introducción o presentación introducción o presentación
PrincipalPrincipal SecundariaSecundaria
Productos NotablesProductos NotablesFactorizaciónFactorizaciónSistema de ecuacionSistema de ecuacion
PreparatoriaPreparatoriaGeometría analíticaGeometría analíticaCalculo diferencialCalculo diferencialCalculo integralCalculo integral
4.- Dibuja un esquema de la estructura 4.- Dibuja un esquema de la estructura que tendrá el sitio y que posteriormente se que tendrá el sitio y que posteriormente se convertirá en el flujo de navegación del convertirá en el flujo de navegación del mismo. mismo.
Principal
PreparatoriaSecundarial
5.- En la siguiente tabla describe 5.- En la siguiente tabla describe brevemente el contenido que tendría cada brevemente el contenido que tendría cada una de las páginas. Puedes usar una una de las páginas. Puedes usar una frase que resuma el texto que piensas frase que resuma el texto que piensas insertar. Incluye además una descripción insertar. Incluye además una descripción de la imágenes que te gustaría colocar en de la imágenes que te gustaría colocar en cada página.cada página.
* Breve explicación** Desarrollo*** Tips**** Ejercicios
Factorización
* Breve explicación** Formulario*** Tips**** Ejercicios
