trabajo Práctico Herramientas Digitales 3

tierra de diseadores

Ingreso

tierra de diseadoresObjetivo del trabajo

2 parcial

hd3

Disear un sitio en el que puedan entrar todos los alumnos de la Carrera de Diseo Grfico de la Ues para conocerse un poco mejor.Un sitiio para estudiantes de diseo, en el cual estarn presentes todos los estudiantes de nuestra ctedra,

tierra de diseadoresVamos por partes

2 parcial

hd3

Qu debers hacer para aprobar el segundo parcial?El segundo parcial se compone de 2 partes.1 Prctica: 50% de la nota2 terica: 50% de la nota

Para aprobar el segundo parcial debs tener al menos el 50% apro-bado de cada fase.

Porqu terico?Porque Dreamweaver es un programa muy complejo que nos llevar tiempo comprender, ya que los diseadores grficos no estamos acostumbrados a lidear con cdigos y programacin.

Por ello, la idea en esta instancia es que vayamos adentrndonos en el mundo web como anticipo de HD4, materia en la que seguiremos aprendiendo sobre esta rea del diseo grfico.

Qu debo saber de teora?Todo lo que habrs practicado en el programa para hacer la parte prctica

No se desesperen!!!

tierra de diseadoresPRACTICO

2 parcial

hd3

Aportar al diseo web de diseolandia

index.htm designers.htm anelocas.htmest listo,pero pods aportar

porfolio de todos losalumnos

ancdotas del grupo(redactar al menos 1)(fotografas o ilustra_ciones son bienvenidas)

propuesta.htm

links.htm

vas a tener que PENSARqu le faltara a esta pginapara ser interesante paraustedes/ estudiantes/ disea_dores...?

tierra de diseadoresPRACTICO

2 parcial

hd3

Organizacin de carpetas

index.htmest listo,pero pods aportar

Bienvenidos

designers.htm

anelocas.htm

propuesta.htm

links.htm

basarse en la esttica y estructuras de lapgina principal

basarse en la esttica y estructuras de lapgina principal

NO BASARSE NECESARIAMENTEEn la esttica y estructuras de lapgina principal

Ser simple pero creativo

index.htm:

index.htm

Carpeta designers

www.diseolandia.com.ar/designers

para disear esto todos se tendrnque poner de acuerdo y pasarse una imagen de perfil, junto consu nombre.

Esta ser TU propuesta

Slo traer el archivo de textocon imgenes.

Slo traer el archivo de textocon una justificacin.

www.diseolandia.com.ar/designers/acciarri/(index.htm)

diseo del minibookde acciarriPARTE SUPER IMPORTANTE

Debe contener un link haciawww.mauroacciarri.com.ar(esto va en el trabajo para el final)

carpeta acciarri

Diseo con tablas.

nombre de alumno c. link

foto

nombre de alumnofoto

nombre de alumnofoto

carpeta acciarri

propuesta.htm

tierra de diseadoresTEORICO

2 parcial

hd3

Qu debers hacer para aprobar el segundo parcial?Leer apuntes de claseCuadro de la hoja siguienteword adosado a la carpeta comprimida


2 parcial

hd3

En el final debers traer TU pgina web, registrada y subida a un hosting gratuito o a un hosting pago.

La clave de este desafio esta en1: Comprender Dreamweaver desde lo + generalhacia lo particular2: Desarrollar el trabajo practico en base a los archivos que se te han dado y comenzar a investigaren base a un ejemplo de diseno para MEJORARLO.Los archivos tienen errores.Ser critico.


2 parcial

hd3

Se entrega: archivo original (index.htm) archivos nuevos (designers .htm, propuesta.htm) En la carpeta de designers deben estar los links de los apellidos de todos los alumnos hacia la carpeta del alumno con su index. archivos de word de aneclocas (con fotos) y de links La carpeta con tu portfolio contendra los archivos css que caracterizarn a tu pgina.

Para tu tranquilidad: En el parcial escrito pods traer hasta 4 hojas Oficio de resmen . No pods traer resmenes fotocopiados Los resmenes llevan nombre y apellido de su autor.

ES MUY IMPORTANTEQUE RESPETES EL ORDEN de las carpetas y los nombres de los enlaces.

Crear un sitio desde 0

Denir el sitio

Mapa del sitio del sitio

Decirle a DW dnde van a estar todos nuestros textos, imgenes, animaciones y dems archivos

Una vez que el sitio ha sido denido, conviene hacertodos los cambios de los archivos desde dreamweaver.En sntesis: AGREG TODAS LAS CARPETAS Y ARCHIVOSDESDE DREAMWEAVER.Cuando muevas un archivo de carpeta, DW te pregunta-r si quers actualizar (update) la ubicacin en todoslos documentos abiertos.

Map Only: Te muestra la estructura jerrquicaMap &Files: Te muestra todos los archivos.

Tambin se le llama local route folder. Pods hacerlo desde Sites>manage sites> new sites

Nombre del sitio:Un nombre que a nosotros no sea til para identicarlo

Una vez que denimos el sitio podemos ver en la ventana de archivos cmo se crea la carpeta con todos los archivos que hay dentro

Carpeta raz // local root folderLa ubicacin donde estarn todos los archivos de nuestro sitio. (para seleccionarlo hay que abrirlo)Dejarlo activado

Conviene tener una carpeta seleccionada donde vas guardando todas las imgenes.

Si tens un sitio escogido, conviene escribir el nombre completo.

Por ms que podemos distinguir entre maysculas y minsculas SIEMPRE es preferible escribir todo en minsculas, sin ningn tipo de puntuacin

Archivos

Disearlo

Es ms cmodo y rpido editar los archivosdesde TU pc.

Avanzado

Crearlo desde 0:

Datos primarios

Bsico

Nombre:Qu pgina se abre primero? para guardar el archivo: index.html index.htm: Guardarlo en la carpeta localTitle:Ser descriptivo. EJ. Bienvenidos a MiSitio

Orden de Carpetas:El index puede ser utilizado ms de una vez en un sitio que tiene varias carpe-tas cuando el sitio es complejo y se va a otra rea.Ej en UES: Alumnos, Docentes, Gradua-dos, Empresas.A estas carpetas es conveniente crearlas desde la ventana de archivos

Ventana de Assets o Activos (pestaa al lado de archivos)Escanea todo tu sitio cuando abrs dreamweaver y vas a poder ver todos los archivos de diferentes medios que estn en tu sitio (divididos por categora).La ventaja de assets es que a diferencia de archivos te mues-tra una previsualizacin de las imgenes u otros archivos.

Uso del Color : Si bien hay 256 colores indexados hoy en da te conviene seleccionar el espectro y elegir el color que vos quieras.

METATAGS: la idea es que los buscadores INDEXEN tu sitiolos robots o las araas de buscadores (como google) andan por la web buscando informacin de los sitios que muestran en los resultados de bsqueda. Los metatags le informan a estos programas cmo categorizar tu sitio y qu informacin contiene.Son lneas de info qus slo aparecen en el cdigo html. Keywords: Lo primero es insertar palabras clave: se escriben separadas por (,) comas. Generalmente no poner ms de 10 palabras clave.,porque sino te pasan de largo.Description: Una buena descripcin es imprescindible. Escribir algo corto pero importante sobre tu sitio. Si no lo agregs, el buscador inserta las primeras lneas del texto del index.

Seleccionar la fuente Ponemos imagen de fondo?

Cada vez que aprietes Enter te va a hacer un prrafo nuevo

Para que esto no suceda tens que apretar shift+enter.

Alineacin: Viene por omisin al centro (en vertical y a la izquierda en horizontal). Para cambiarla ir a propiedades

El primer paso para hacer un link es seleccio-nar la palabra completa que va a ser el link (ser cuidadoso con la selec-cin)

Tanto para agregar arhivos desde Assets o desde Archi-vos podemos arrastrarlos.Tambin podemos agregarlos desde Insertar en el men, pero tens que localizar el archivo.

Vnculos Relativos: dentro de nuestro sitio. Slo llevan la direccin de dentro de la carpeta.

Vnculos Absolutos:Estn fuera de nuesto sitio. Ej: http://www.sljlskj.com/archivo.jpg.

Qu es el ALT?Es texto alternativo que se relaci-iona con la accesibilidad del sitio para personas con capacidades diferentes..

MA

NEJ

O D

E A

RCH

IVO

SPR

OPI

EDA

DES

GEN

ERA

LES

MET

ATAG

S

MANEJO DE TEXTOS Acordate

Qu pasa cuando el texto entra en conicto con la imagen?En ms opciones de propiedades, tens la opcin de ALIGN, suele usarse la opcin de Izq o Der.

A disear

Linksinternos (rel)

Linksexternos (abs)

Desde la barra de propiedades,. Buscar Link o vnculo: Pods escribirlo pero te conviene seleccionar la carpeta y enlazarlo desde la ventana archi-vos con el crculo

Desde la barra de propiedades,. Buscar Link o vnculo: Pods escribirlo pero te conviene seleccionar la carpeta y enlazarlo desde la ventana archi-vos con el crculo

KEYWORDSDESCRIPTION

(propiedades)

Identidad Corporativa

Linksexternos (abs)

LinksdeMailOjo: este es el clsico mail to:-- que te abre outlook.

Identidad Corporativa

Identidad CorporativaEn Html se escribe

El primer paso para hacer un link es seleccio-nar la palabra completa que va a ser el link (ser cuidadoso con la selec-cin)

Color de Links

color original

este es el texto que vos seleccionas

direccin de mail

direccin de mail

Introducir textos en Dreamweaver es tan sencillo como usar un procesador de textos. Tipe. seleccinelos con el Mouse de la manera habitual y ajuste sus propiedades a travs de la Barra de Propiedades. Las propiedades que pueden ajustarse son las habituales:

Fuente: Recuerde las limitaciones de fuentes estudiadas. Nunca ser conveniente utilizar fuentes que no sean las estndar Arial, Times New Roman, Verdana. Una trampita para insertar texto no estandar es insertar un swf.....................................................

Estilo de Fuente: Aqu Dreamweaver presenta las tpicas opciones de Negrita, Cursiva y Subrayado.

Alineacin: De nuevo Dreamweaver presenta los habituales iconos para alinear a la izquierda, centro, derecha y justicar el texto.

Color de Fuente: Dreamweaver presenta un icono para seleccionar el color de la fuente. Al hacer Clic en l desplegar los denominados Colores Web son aquellos colores estndar que con seguridad se vern iguales en cualquier computadora con cualquier sistema operativo. Tambin se cuenta con un icono que amplia la paleta, aunque no se recomienda utilizar esos colores puesto que nada garantiza que se vean iguales en diferentes sistemas.

Tamao de Fuente: La escala de tamaos que presenta Dreamweaver es un tanto extraa, puesto que incluye valores negativos. Estos valores, representan los tamaos intermedios. Estos son tamaos de fuente relativos segn el tamao que tenga el navegador del usuario seteado

La idea de CSS en resumidas cuentas es hacer el cdigo HTML ms sencillo, pudiendo guardar por un lado los atributos de contenido de una pgina y por el otro la estruc-tura en un archivo CSS. Es muy similar a lo que hemos visto en InDesign a principio de ao con los Estilos de Texto y de Prrafo.CSS signica Hojas de Estilo en Cascada:

Entrar en EDICIN> preferencias> General > tildar la opcin de css (o no).Es importante escoger esta opcin al momento de comenzar a disear la pgina.

MANEJO DE CSS: Porqu hojas en Cascada? Porque mientras ms especco es el estilo prevalece esa regla sobre el estilo general.La hoja de estilo puede ser INTERNA o EXTERNA a la pgina en s. Si es interna slo se aplica en la pgina y si es externa puede aplicarsea todo el sitio.,

CSS

Una Breve Introduccin Al CSS (la manera nueva)

Qu precauciones generales debo tomar al momento de elegir entre disear mi pgina con tags html o css?

La manera vieja: (formato dentro del cdigo html)

Sigue en el apunte

1

Trabajar con CSS en Dreamweaver Qu es CSS? Las Cascade Style Sheet (hojas de estilo en cascada) son un estndar diseado para separar la presentacin visual del contenido, del contenido en s mismo. La mayor ventaja de usar CSS es el cmo y dnde se denen las reglas. En lugar de controlar la apariencia del texto (por ejemplo) al nivel del bloque, una regla sencilla puede escribirse en una pgina aparte y aplicarse a todas las pginas de un sitio. Cuando quiere cambiar la informacin de una regla, slo se necesita editar una cosa. Esto ahorra una gran cantidad de tiempo. Tambin signica que las pginas tienden a tener un estilo ms consistente, porque todas las pginas comparten las mismas reglas. Cmo se conjugan HTML y CSS Como se dijo al principio de este apunte, las pginas Web se crean en un lenguaje denominado HTML. Aunque no nos demos cuenta, a medida que vamos desarrollando nuestra pgina con Dreamweaver, el cdigo HTML se va generando automticamente. Lo que CSS hace es permitirnos utilizar HTML para describir el tipo de contenido (si se trata de un prrafo, de una tabla, de una imagen, etc.) y desarrollar el contenido en s mismo; mientas tanto CSS especica cmo se deben mostrar los contenidos (alineado, color, tamao, fuente, etc.) estableciendo las reglas en un archivo aparte (un archivo con extensin .css). En HTML los tipos de contenidos se especican a travs de etiquetas. Luego CSS describe mediante reglas cmo debe mostrarse cada etiqueta HTML. CSS puede redenir una etiqueta HTML para que se vea diferente a como normalmente se vera, e inclusive puede hacer que una misma etiqueta se vea diferente segn su contexto. Por ejemplo, podemos denir una regla CSS que diga que los vnculos sean rojos si se encuentran dentro de un prrafo, pero sean azules si se encuentran dentro de una tabla. A este tipo de estilo CSS se le denomina estilo contextual. Lo que sigue es un resumen de las etiquetas HTML ms utilizadas:

Etiqueta/s HTML Signicado Imagen. Encabezado y cuerpo de la pgina

respectivamente. Ttulo de la pgina que aparecer en la

barra de ttulo del navegador Web. Prrafo Lista ordenada, lista con vietas

respectivamente. Tabla, encabezado de tabla, la de tabla,

celda de tabla respectivamente.


apunte de HD3 ..... Hojas de Estilo

Federico Lbaque



Federico Lbaque

importante!



Federico Lbaque

en el trabajo de t porfolio disears tu propia hoja de estilos

1



Federico Lbaque



Federico LbaqueEsto no es tan importante,pero lanlo para saberlo.El ao que viene lo vemos.

EstoEs muy imp



Federico Lbaque

trabajo Práctico Herramientas Digitales 3

Documents

Transcript of trabajo Práctico Herramientas Digitales 3