epespad

El post que buscas se encuentra eliminado, pero este también te puede interesar

si te interesa el diseño web, entra!! + yapa

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, 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. Se lo considera dentro del Diseño Multimedial.

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.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.

DISEÑO WEB APLICADO

El diseño de páginas web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).

Estos documentos o páginas web pueden ser creadas:

* creando archivos de texto en HTML.
* utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.
* utilizando lenguajes de programación del lado servidor para generar la página web.

ETAPAS

Para el diseño de páginas web debemos tener en cuenta tres etapas:

* La primera es el diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

* La segunda, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada.

* La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, por que a diferencia del texto, aún para el año 2009 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento.

Todo esto teniendo en cuenta el nivel de programación en el diseño de las aplicaciones y del impacto visual que se quiere generar en el usuario.

FUNDAMENTOS

Un correcto diseño web implica conocer cómo se deben utilizar cada una de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.

La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización.

De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar como se mostrará dicha información en los diferentes medios (como por ejemplo, una pantalla de computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la accesibilidad del documento.

También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un Panel de Control de administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma.

ACCESIBILIDAD

El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.

HISTORIA

En un principio era sólo texto, pero a medida que ha evolucionado la tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusión de imágenes fue la más significativa, pero también debemos mencionar el vídeo y la animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y de interactividad jamás imaginados antes.

El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo había alrededor de 50 sitios web[cita requerida]. Las últimas estadísticas nos confirmaban que actualmente (2005) rondan los 8.000 millones de sitios web, a los que diariamente se les suma a raíz de 4400 por día[cita requerida].

Rápidamente, su importancia alcanzará las mismas cotas que la televisión o el teléfono. Datos recientes estiman que hay alrededor de 2 mil millones de páginas colgadas y se espera que en los próximos años llegue a los 8 mil millones, excediendo el número de habitantes del planeta. Sin embargo, sólo una fracción de este número es visitado habitualmente por la mayoría de los usuarios (sólo alrededor de 15.000 sitios webs, el 0,4% del total).

A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para atraer y mantener la atención de los usuarios. Junto con un desarrollo efectivo de la estructura web y del contenido, el diseño y el uso del color son la llave para atraer y ser identificado, formando vínculos en el subconsciente del usuario y generar esquemas para captar y fidelizar a nuevos visitantes.

Al mismo tiempo que la evolución de los aparatos y de su introducción en los hogares, también ha aumentado la calidad de las transmisiones a través Internet y ha bajado su precio. A medida que la tecnología ha solventado estas dificultades, ya no nos encontramos con problemas de forma sino de contenido.

LENGUAJE DE PROGRAMACION WEB

si te interesa el diseño web, entra!! + yapa

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,&gt. HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

FUENTE

CODIGOS CSS

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

PARA QUE SIRVE

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

COMO FUNCIONA

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}


h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Las tres formas más conocidas de dar estilo a un documento son las siguientes:

* Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
.
.
.
.
</body>
</html>


Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>hoja de estilo interna</title>
<style type="text/css">

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}

h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}

</style>
</head>
<body>
<h1>Aquí se aplicará el estilo de letra para el Título</h1>
</body>
</html>


* Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.

Algunas normas básicas a la hora de crear una CSS son las siguientes:

* En el siguiente ejemplo, h1{color: red;}, el selector, <h1>, le dice al navegador la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:

h1, h2, h3 {
color: red;
}

o lo que es lo mismo
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}


La propiedad, que en este caso sería color, especifica qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el color. Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma.

p {text-align:center;color:red}


Normalmente se describe una propiedad por línea, de la siguiente manera:

h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}


#

}

# El valor, representado a la derecha de los dos puntos (, establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.
p {font-family: "sans serif";}


FUENTE

existen algunos programas para el diceño web

tales como:

Adobe Dreamweaver
diseño


es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.

Se vende como parte de la suite Adobe Creative Suite 3 y 4.

La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.

Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.

Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.

Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir codigo.

Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).

No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de codigo.

Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.

Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.

Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.

También podría decirse, que para un diseño mas rápido y a la vez fácil podría complementarse con fireworks en donde podría uno diseñar un menú o para otras creaciones de imágenes (gif web, gif websnap, gif adaptable,jpeg calidad superior, jpeg archivo mas pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola, en donde ya llevara los vínculos a un dicho sitio en especifico que uno le haya dado.(MRR - U.P.C.)

FUENTE

css

VERSIONES DE ADOBE DREAMWEAVER

- 1.0 Diciembre de 1997 Primer lanzamiento, sólo para Mac OS.
- 1.2 Marzo de 1998 Primera versión para Windows.
- 2.0 Diciembre de 1998
- 3.0 Diciembre de 1999
- UltraDev 1.0 Junio de 1999
- 4.0 Diciembre de 2000
- UltraDev 4.0 Diciembre de 2000
- MX 29 de Mayo de 2002
- MX 2004 10 de Septiembre de 2003
- 8.0 13 de Septiembre de 2005
- CS3 16 de Abril de 2007 Sustituye a Adobe GoLive en la serie Creative Suite
- CS4 23 de Septiembre de 2008

OTROS PROGRAMAS

Adobe Photoshop Elements 3.0
El pequeño hermano de Photoshop ha crecido, y mucho. Con un precio atractivo y con una combinación impecable de herramientas.

Flash
Un programa para el diseño de animaciones vectoriales en páginas web.

Dreamweaver
Probablemente el mejor editor de páginas web para diseñadores que busquen resultados profesionesles.

Photoshop
Probablemente el mejor programa para trabajar con gráficos, para retoque fotográfico, etc.

Sothink DHTML Menu
Un programa para crear menús DHTML fácilmente: a golpe de ratón y sin tener que escribir ni una sola línea de código.

Corel Ventura 10
Despues de 4 años se publica una nueva versión de este programa de publicación de contenidos digitales para impresión.


Adobe Photoshop CS
Esta versión se centra especialmente en los ámbitos de video, fotografía, web y producción gráfica.

Photo Impact
Programa de retoque fotográfico y de creación de imágenes e interfaces para la web de bajo coste y alta calidad.

Xara X1
Xara es un software de dibujo e ilustración rápido y con interesantes funcionalidades. Puede sustituir a Corel o Ilustrator.

Deep Paint 3D
Proporciona a los artistas y creativos, que trabajan en 3D, una herramienta intuitiva y fácil de usar para pintar y texturizar modelos en 3 dimensiones.

Flax
Un programa muy útil para crea animaciones de texto en Flash muy buenas y rápidamente.

Adobe GoLive
Editor de HTML profesional WYSIWYG. Con grandes capacidades.

TopStyle Lite
Editor CSS. El programa permite crear nuestras hojas de estilo de forma sencilla.

Adobe Photoshop Album
Programa de Adobe para el almacenamiento, clasificación y retoque simplificado de fotografías digitales.

GIMP Shop
El programa de diseño gráfico Gimp Shop, en realidad es un plugin para GIMP, que hace que su interfaz se parezca más a la de Photoshop.


Gimp
Programa de edición gráfica y retoque fotográfico gratuito y de código libre con funcionalidades de un editor gráfico profesional.

ColorPic
ColorPic es un selector de color (Color Picker) de cualquier gráfico que haya en la pantalla del ordenador y un creador de paletas para sitios web.

Irfanview
IrfanView es visor de imágenes muy popular, que nos permite realizar todo tipo de acciones sencillas con gráficos. La pequeña navaja suiza.

Canvas 8.0 Professional Edition
Canvas es un editor gráfico que no ofrece la calidad que presentan los líderes del campo, como Photoshop, pero igualmente resulta excelente en varios aspectos.

MainTools Gestor y Editor Web
Software de edición web que permite crear y mantener todo el contenido de una página web. Se ofrece en dos versiones, online y offline.


Swish
Es un programa para hacer animaciones Flash sin el Flash, muy sencillo y fácil de usar.

Ulead Gif Animator
Programa completo para la creación de GIFs animados. Ideal para usuarios avanzados que deseen grandes posibilidades de edición de las animaciones.

Paint Shop Pro
Edición de gráficos. Con la posibilidad de descargar una versión shareware muy interesante.

Zoner Draw 4
Programa económico para la creación de gráficos vectoriales.

Thumb Plus
Programa que permite navegar fácilmente por los archivos gráficos y visualizar miniaturas.

Color Cop
Programa que ofrece una interesante herramienta de selección de color con la que podemos obtener el código de cualquier color que aparezca en la pantalla.

Power Bullet, animaciones Flash gratis
Programa gratuito para realizar animaciones de Flash fácilmente y con bastantes opciones de configuración.

WebDraw
Programa, de la compañía Jasc, para el diseño con el formato de gráficos vectoriales SVG.


Herramientas para medir espacios en la pantalla
Vamos a ver unas herramientas útiles para diseñadores que nos permiten medir las dimensiones de cualquier elemento que aparezca en nuestra pantalla.

Ims Web Dwarf
Programa para edición web que posiciona los elementos de manera absoluta. Tiene una opción para exportar a SVG.

Mayura Draw
Es un programa de ilustración vectorial sencillo y directo, sin demasiadas aspiraciones, y apenas conocido fuera del mundo del trazado SVG.

ALGUNAS PAGIANAS DE FREE HOSTTING

http://www.unlugar.com/
http://www.buscahost.com/hostinggratis.asp
http://www.tualojamientoweb.com/alojamiento-web/alojamiento-web-sin-publicidad.htm
http://www.logratis.com/webmasters6.html
http://www.evisos.com.co/servicios/informatica-web/web-hosting-gratis-cree-su-sitio-web-facil
http://www.free-webhosts.com/
http://www.zymic.com/free-web-hosting/
http://www.260mb.com/
http://www.bravenet.com/
http://www.000webhost.com/

lo que hacen estas paginas es proporcionar el espacio a cambio de publicidad, por lo que es mas comodo pagar

www.HostDime.com.co

ahora, para poder colgar un travajo echo desde dreamweaber es nesesario saber que es FTP

FTP (sigla en inglés de File Transfer Protocol - Protocolo de Transferencia de Archivos) en informática, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.

El Servicio FTP es ofrecido por la capa de Aplicación del modelo de capas de red TCP/IP al usuario, utilizando normalmente el puerto de red 20 y el 21. Un problema básico de FTP es que está pensado para ofrecer la máxima velocidad en la conexión, pero no la máxima seguridad, ya que todo el intercambio de información, desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en texto plano sin ningún tipo de cifrado, con lo que un posible atacante puede capturar este tráfico, acceder al servidor, o apropiarse de los archivos transferidos.

Para solucionar este problema son de gran utilidad aplicaciones como scp y sftp, incluidas en el paquete SSH, que permiten transferir archivos pero cifrando todo el tráfico. fuente



link: http://www.videos-star.com/watch.php?video=DUh5iVMUdKw

13 comentarios - si te interesa el diseño web, entra!! + yapa

98mau98
+5, todo lo que me queda
Obara
Muy bueno y explicativo a mi entender. Muchas gracias, muy valioso Post
Joel_Cabj
gracias,, despues leeo y dejo puntoss XD
a7ar1
a fav d una!!!
buena info!

dedydamy2 dijo:la biblia


buen post!
jean_21
Gracias!! lo probare para http://www.myrdesign.cl/
jean_21
gracias http://www.myrdesign.cl/servicios/desarrollo-web.html