CLASE__GMAIL-DOCS

https://spreadsheets.google.com/ccc?key=t44eHhY8GlivI_kKykS_TBw&hl=en#gid=0

Diseño Web

¿En que Consiste el Diseño Web?
El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo.

Ya que el diseño es la comunicación textual (contenidos) existente en Internet una faceta visual, sino que obliga a pensar una mejor estructuración de los mismos en este soporte. La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio Internet.

CONCLUSIÓN:

El diseño web es la presentación de una Pagina en Internet como si fuera la portada de una Revista, es simplemente Acomodar los colores, texto imágenes y enlaces de una manera llamativa y organizada e interactiva. Hay varias maneras de hacerlo con programas como el DREAMWEAVER o el FRONTPAGEo escribiendo el Código HTML, Java script, PHP o Flash directamente.

¿Qué programas y herramientas existen actualmente para el desarrollo del Diseño Web?

Una computadora no funciona por si sola, requiere de un sistema operativo que coordine todas las instrucciones que van a ejecutar los fierros y chips (hardware). Una vez que tenemos un OS sea MAC OS X, Windows, Linux o lo que sea, nuestro equipo ya puede encender y ejecutar funciones básicas como navegar por Internet, escribir un email, visualizar imágenes, entre otra muchas cosas. Pero, en cuestiones de diseño no hay gran cosa para trabajar, asi que realizamos una lista con el software indispensable para diseño gráfico.

1. A continuación te mostrare los "PROGRAMAS" indispensables, es una lista totalmente aleatoria y cubren las áreas de edición de imagen, dibujo vectorial, modelado 3d y algunas utilerías.

• Adobe Photoshop CS3 (Edición y administración de imágenes)

Sin lugar a dudas el rey de la edición de imágenes, ¿alguien dijo Corel Photopaint?, soporte para formato RAW, ajuste avanzado de color, gran cantidad de filtros, excelente manejo de perfiles de color, optimización para web, y un largo etc. Además ofrece integración con Bridge, el software de administración de archivos de Adobe, una herramienta muy útil, que nos permite previsualizar imágenes y documentos, además de mostrarnos información detallada sobre el archivo, un excelente navegador de archivos.

• Adobe Illustrator CS3 o Corel Draw X4 (Dibujo vectorial)
  

  

Aquí hay dos opciones que ofrecen una amplia gama de posibilidades, con la llegada de las nuevas versiones, nos permiten prescindir de alguna de las dos y utilizar únicamente el programa que mas nos guste. Existe mucha controversia sobre cual de los dos programas es mejor, pero en realidad es cuestión de gustos, ambos nos ofrecen excelentes herramientas para el manejo de texto, dibujo, filtros y manejo de color. En Corel Draw podemos manejar, múltiples paginas, mientras que en Adobe Illustrator solo lo podemos hacer de una por una, aunque la herramienta de dibujo y degradado de malla de Adobe Illustrator son mejores que las que ofrece Corel Draw. En lo personal, prefiero Adobe Illustrator CS3, por la facilidad de dibujo, la optimización en el peso de los archivos y su completa integración con los productos de Adobe.

• Adobe InDesign. (Diseño editorial)
  
  

Poco a poco se ha ido convirtiendo en el standard para el diseño editorial, ofrece completa integración con la familia de productos de Adobe, lo cual hace un flujo de trabajo más rápido y sencillo. Nos permite el manejo de múltiples páginas maestras para el diseño de cada sección de nuestro proyecto, herramientas avanzadas para sincronizar los perfiles de color con otras herramientas de Adobe como Photoshop o Illustrator, creación de indice, tabla de contenido, corrección ortográfica, manejo de estilos de carácter y párrafo, entre otras características.

• QuarkXPress
  

  

Es la otra opción para diseño editorial, ofrece manejo de múltiples paginas, un pequeño editor de imágenes, transparencias en los bloques, herramientas de corrección ortográfica, manejo de páginas maestras, estilos de párrafo y carácter, manejo avanzado de color, entre otras cosas. Una de las desventajas que en lo personal le veo, es el precio, la mitad de lo que cuesta la Suite de Diseño de Adobe.

• Adobe Acrobat (Editor de archivos PDF)
  

  

La versión completa del lector de archivos PDF, se llama simplemente Acrobat. Con este programa podemos crear archivos en formato PDF, editarlos, transformarlos, unir o cortar documentos, tiene funciones avanzadas como protección por password, creación de formularios, presentaciones y demás. Otra de las grandes ventajas es su capacidad para el manejo de archivos para impresión, permitiéndonos incrustar perfiles de color y mantener la homogeneidad de nuestros diseños tanto en la pantalla como en la impresión. Estas son entre otras algunas de las ventajas que ofrece Acrobat, el complemento perfecto para los demás programas de la familia Adobe.

• Modelado 3D
  

  

El uso de software para modelado 3D ya no es exclusivo para la realización de películas animadas, videos, diseño arquitectónico, etc., sino que se ha extendido a su uso en el diseño gráfico y es muy utilizado en la realización, de ilustraciones, infografías, retoque digital, entre muchas otras aplicaciones. Existen muchas opciones en el mercado desde Autodesk Maya (famoso porque es con el software con que se han realizado muchos de los efectos de las películas de Hollywood), hasta otros no tan famosos pero igual de efectivos como el Rinho o Carrara, pasando por los también conocidos, 3D Studio Max, Cinema 4D y Lightwave.

1. Existen multitud de "HERRAMIENTAS" para el diseño, algunas gratuitas otras de pago. Pero también existen muchas aplicaciones web, que de manera online nos ayudan con este amplio mundo. A continuación os descubriremos doce de ellas:

• kuler: Se trata de una herramienta web realizada en flash que nos guiará en la creación de un tema, ya sea a partir de diferentes colores como de imágenes que nosotros elijamos, tanto de nuestro pc como de flickr. Estos temas los podremos compartir con el resto de usuarios, así como usar nosotros los que compartan los demás.
  

  

• Pixlr: Con un aspecto similar al famoso programa Photoshop, esta web nos ofrece una herramienta con la que casi podemos realizar las mismas tareas. Con características tan útiles como las capas, diferentes pinceles y clonado no echaremos de menos tener el photoshop en nuestro poder.

• Color Scheme Designer: Otra sencilla herramienta que nos guiará en la creación de un tema. Podremos elegir diferentes estructuras de la página, diferentes colores, incluso si usar un solo color o mezclar varios.

• FontStruct: Herramienta web que nos proporcionará la opción de crear y editar fuentes para que las que usemos en nuestro sitio sean lo más originales posible. Una vez realizada nuestra fuente podremos compartirla. La única pega que le podemos encontrar es que para usarlo necesitamos registrarnos.

• Typetester: Con esta herramienta podremos comparar diferentes fuentes entre ellas. De esta forma podremos comprobar las diferencias que existen entre ellas según el tamaño y color que seleccionemos para cada una. Buena herramienta para decidir que fuente usamos.

• TypeNavigator: Excelente herramienta que nos ayudará a buscar aquella fuente ideal para nuestro sitio. Ésto lo haremos seleccionando diferentes características que busquemos y la web nos dará varias opciones, incluso para comprarlas directamente desde ahí.

• Blind Text Generator: Generador de lo que se comoce como “Dummy Texts”, es decir, textos tontos para poderlos insertar y rellenar partes de nuestra web a la hora de hacer el diseño de la misma. Tenemos varios modelos como el más conocido Lorem ipsum.

• BgPatterns: Esta sencilla herramienta nos proporcionará diferentes patrones para usarlos como fondo en nuestras webs. Tenemos desde el uso de colores lisos, figuras o diferentes imágenes. Una vez realizada nuestra elección podremos descargar la imagen para aplicarlo a nuestro diseño.
  
  

  
  

• Dabbleboard: Otra herramienta para dibujar de manera online, pero esta vez lo podremos hacer de forma colaborativa. A la hora de crear un nuevo dibujo podremos invitar a otros amigos para que se conecten a la página y nos ayuden. Además, podremos chatear con ellos mientras trabajamos, tanto con texto como con audio y video.

• PickMarkr: Si queremos proteger nuestras imágenes podremos usar esta herramienta web para poderle añadir marcas de agua. Hay una versión gratuita y también otra de pago con la cual tendremos algunas funcionalidades más como la posibilidad de marcar y sustituir de forma automática nuestras imágenes en nuestra cuenta de flickr.

• Favicon.cc: Herramienta muy conocida con la cual podremos generar una imagen favicon para nuestro sitio. Podremos hacerlo tanto dibujándolo como a partir de una imagen que ya tengamos. Para quien aún no lo sepa, favicon es aquella imagen que aparece junto a la url de una página en cualquier navegador, algo que le da distinción y estilo a nuestro sitio.

• Templatr: Herramienta web que nos ayudará a crear una plantilla en pocos pasos, y no solo los colores, si no la distribución de la misma, eligiendo donde queremos que esté la o las columnas, la parte central, la cabecera o el pie. Muy útil si las hojas de estilo y la visión espacial no son nuestro fuerte.
  
  

  
  
  

¿Qué se Necesita Sabe Para Aprender Diseño Web?

Lo primero que necesitamos es GANAS y PACIENCIA.
Una página web se puede realizar de muchas formas. Pero antes de empezar a formarte como un buen diseñador tienes que marcarte un objetivo: Ser diseñador y Ser programador.

* Para ello necesitas saber de DREAMWEAVER uno de los programas mas factibles en su uso pero para conocer de Software necesarios para realizar maquetas: ADOBE FIREWORKS o ADOBE PHOTOSHOP.

* Es importante y necesario saber manejarlos, conocer de ellos para un adecuado y rápido desarrollo para el desarrollo de una pagina web.

* SI TE GUSTA LAS ANIMACIONES Y LOS EFECTOS AUDIOVISUALES, deberás aprender de flash, para poder hacer un proyecto dinamico, impactante y muy comercial.

LINk DE Mi PAGiNa WEB (Trabajos del Ciclo): trabajosalmeyda.6te.net

CONCEPTO DE CAPAS Y SU USO

A diferencia de la estructura a través de tablas con las que dividíamos la página en celdas para colocar algo en particular en cada una de ellas.

Como por ejemplo: el logotipo arriba a la izquierda, el menú en la izquierda, etc)

Hoy en día lo que hacemos es definir cada una de las celdas (capas) por separado, dándoles las características que deseemos como color o imagen de fondo, tamaño de letra, anchura, altura, etc. Y una vez definidas todas las celdas (vamos a llamarlas capas), y ya definidas todas las capas le asignamos una posición en la página, una por una, hasta conseguir hacer la web.

Las capas tienen una ventaja enorme a la hora de resolver determinados tipos de maquetación. Y por ello necesariamente se va usar los estilos CSS para asignar las propiedades de cada una de las capas y lo que sería muy complejo con el sistema tradicional de tablas animadas puede ser elegantemente simple con CSS. Además, es posible aprovechar el espacio en forma tridimensional (superponer parcialmente capas, hacerlas visibles sólo ante determinados eventos...)

Ya que en el uso de capas se basan muchos de los efectos más comunes del DHTML. Que con Una idea interesante para el uso de capas es preparar una interfaz que aproveche además los comportamientos dinámicos asociados a ellas (DHTML). Y así, podremos diseñar una interfaz semejante a la del sistema de ventanas, con una serie de contenedores libremente movibles, o sistemas de menús desplegables que no sólo economizan espacio, sino que tienen un funcionamiento familiar para la mayoría de usuarios.

Luego en el HTML de la página bastará con escribir el contenido y definir el tipo de capa.

Hay que Tener Presente:

si alguna vez quieres cambiar el aspecto de una capa como por ejemplo el color o la anchura, basta con cambiarlo una sola vez en la hoja de estilo y no en cada una de las páginas de tu web.

Por otro lado, al separar la definición de todas esas características en la hoja de estilo, dejamos más limpio el código HTML en sí, lo cual es bueno para nosotros (podremos encontrar lo que buscamos dentro del código más fácilmente) y para buscadores como Google, que solo tienen que leer lo importante (el color y la anchura no es para nada importante, solo los textos).

Web Site de Ayuda:
http://www.comocreartuweb.com/curso-con-div/div-leccion1-introducion.html

DIFERENCIAS ENTRE SITIO REMOTO Y SITIO LOCAL

Un sitio es un emplazamiento donde se almacenan todos los documentos y archivos pertenecientes a un determinado sitio web.

SITIO LOCAL:

• Archivos guardados en el disco local que componen un sitio Web desde el punto de vista del autor (diseño), y no del usuario.

• Es el directorio de trabajo. En Dreamweaver se conoce como “sitio local”. En ella se almacenan los archivos con los que se está trabajando.

SITIO REMOTO:

• Archivos guardados en un servidor que componen un sitio Web desde el punto de vista del autor (Diseño), y no del usuario.
• Se almacenan los archivos, según el entorno de desarrollo, para fines de prueba, producción, colaboración, etcétera.
  
  
  

Hay Que Tener Presente:

La forma correcta de trabajar es crear el sitio en forma local (Sitio Local) y una ves que tenemos la estructura subirla al servidor (Sitio Remoto) y continuar el trabajo en forma remota a medida que avanzamos con el proyecto.

deberá disponer de acceso a un servidor Web remoto (como, por ejemplo, el servidor de su ISP, un servidor propiedad del cliente para el que trabaja, un servidor de intranet dentro de su empresa o un servidor IIS en un sistema Windows). Si aún no tiene acceso a dicho servidor, póngase en contacto con su ISP, su cliente o el administrador del sistema.

También puede ejecutar un servidor Web en su equipo local, como IIS (Windows) o Apache (Macintosh). Para más información sobre la configuración de un servidor Web en el equipo local, consulte Instalación de un servidor Web.

Web Site de ayuda:

*http://www.educarm.es/templates/portal/images/ficheros/manuales/1/secciones/4/contenidos/31/dreamweavermx2004.pdf

RUTAS RELATIVAS Y RUTAS ABSOLUTAS

1.- RUTAS ABSOLUTAS.

Son aquellas rutas que se refieren a direcciones de Internet (URLs) completos. Presentan la ventaja de que el destino está perfectamente localizado ya que está indicado por todos los elementos de su dirección. Estas direcciones requieren ser comprobadas periódicamente como una labor de mantenimiento.

Para lograr vincular un documento situado en otro servidor, es preciso emplear una ruta absoluta. Aunque también puede utilizar vínculos de rutas absolutas para vínculos locales (de documentos del mismo sitio), se desaconseja utilizar este sistema, ya que si mueve el sitio a otro dominio se romperán todos los vínculos de las rutas absolutas local, impidiendo ello lograr visualizar los archivos.


En caso de que en la página 1 quisiéramos incluir un enlace hacia la página 2, tal y

como explicamos, antes la dirección URL la especificaríamos así:

href=http://www.origen.com/carpeta 2/página 2

2.- RUTAS RELATIVAS.

Este permite reconocer primero las máquinas que tiene a su alcance y posteriormente revisa como servidor, y pasa a la línea del satélite que localiza su señal, hasta emitirla a la computadora donde esta la información.

Son aquellas rutas que se refieren a un documento que se encuentra en algún directorio o servidor. Son direcciones a las que falta alguna de las secciones de la URL. Cuando a una dirección le falta alguna de las secciones, estas son obtenidas de la propia página desde la que se hace el enlace.

Desde un punto de vista práctico las direcciones relativas se usan para enlazar páginas pertenecientes al mismo sitio con lo cual se coloca en el destino solamente el nombre del archivo al que se enlaza. En el caso de que el archivo al que se realiza el enlace no se encuentre dentro de la misma carpeta del sitio web, se le antepone el nombre de la carpeta para que el archivo sea localizado a partir de la ubicación actual.



CONCLUSIÓN

Apesar de lo explicado debe quedar claro que hay un pequeño problema en el uso de las rutas relativas. Puesto que si tenemos una página en una carpeta y la cambiamos a otra, la ruta absoluta de los elementos no cambia, pero la relativa si. Por lo tanto si cambiamos una página de lugar (si la cambiamos de carpeta o si la metemos en una carpeta), hay que volver a redefinir la ruta relativa.

Y sobre todo es muy importante considerar las mayúsculas y las minúsculas en los nombre de archivos, debido a que el servidor en el que ponga las páginas los ubique correctamente, ya que de lo contrario podemos provocar un error.

Resulta también útil poner una extensión a los nombres de los archivos (por ejemplo .html, .gif, .jpg) con el propósito de distinguir en de una página de una imagen si están en un mismo directorio y Cada vez que insertamos en una de nuestras páginas un elemento externo a ellas (una imagen, un sonido, un enlace...) tenemos que definir claramente dónde se encuentra este, para que el navegador pueda encontrarlo e insertarlo
Esto de cambiar páginas de lugar no es muy frecuente, y aún así, si utilizamos programas como el Dreamweaver, etc, este nos corrige las rutas automáticamente.


web site de ayuda:

*http://www.comocreartuweb.com/herramientas-utiles/enciclopedia-r-rutas.html
*http://livedocs.adobe.com/dreamweaver/8_es/using/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=16_link3.htm

Acerca de mi

Soy una joven estudiante en la carrera de “Computación e Informática”, cursando actualmente el 5to año en la “Universidad Nacional Federico Villarreal”.

PasOs Para Crear y Diseñar una Pagina Web
para las personas interesadas en crear y diseñar una pagina web aqui les dejo unos videos que les seran muy utiles. suerte!!!