Para Diseño de Web

Este punto es una deuda con los alumnos, ver diseño sin trabajar al menos lo fundamental para la web -digo los primeros pasos- es algo que no sería serio de mi parte. Es un tema muy complicado para ver en una o dos sesiones, pero al menos quiero referirme a la comunión Html5-css3 y en este caso photoshop para la creación básica de una primera página para entender este mundo web.

Primero: PHOTOSHOP NO ES EL PROGRAMA IDEAL PARA EL TRABAJO WEB.

Es una ayuda y en este caso espero bien importante para crear a partir de una creación de una interfaz una programación básica y fundamental que nos permita presentar al menos un documento HTML para navegar de una manera sencilla. Las herramientas de photoshop para web -como sectores, como salvar para la web, como ajustes de exportación- son herramientas que al conocerlas nos permiten añadir comportamientos web.

Segundo: PROCESO.

1. crear una interfaz en Photoshop, en este caso la llamé  introweb.psd.

Fijarse en la ventana flotante de capas, cada capa marcada y con el estilo para decorar.

2. Crear los sectores de la siguiente manera:

a. ir a herramienta sector

b. Dividir en sectores la página, acuerdense que la web reconoce son áreas rectangulares. por ello se divide en diferentes sectores rectangulares así:

Interfaz de la pagina creada en photoshop con los sectores ya determinados.

c. Optimizar la web en guardar para web:

Optimizo, selecciono el jpg a 50% – la segunda opción.

4. Guardo seleccionando o creando una carpeta nueva para la web y establecer los ajustes necesarios-en clase veremos esos ajustes- por lo pronto el mas necesario es este:

ajustes para web y otros dispositivos.

Y listo, tenemos nuestra carpeta:

carpeta creada por nosotros, y el contenido creado por photoshop automáticamente.

Y este es el código creado por PHOTOSHOP AUTOMATICAMENTE, aqui podemos ver la estructura básica de una pagina web, htm, css e imagenes:

La Presentación del HTML para que sea reconocida por la web.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<title>introweb</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ />
<!– Save for Web Styles (introweb.psd) –>
<style type=»text/css»>

El Código CSS.
<!–

#Tabla_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}

#miweb_ {
position:absolute;
left:0px;
top:0px;
width:250px;
height:80px;
}

#introweb-02_ {
position:absolute;
left:250px;
top:0px;
width:101px;
height:80px;
}

#introweb-03_ {
position:absolute;
left:351px;
top:0px;
width:100px;
height:80px;
}

#miweb004_ {
position:absolute;
left:451px;
top:0px;
width:4px;
height:80px;
}

#introweb-05_ {
position:absolute;
left:455px;
top:0px;
width:96px;
height:80px;
}

#introweb-06_ {
position:absolute;
left:551px;
top:0px;
width:100px;
height:80px;
}

#introweb-07_ {
position:absolute;
left:651px;
top:0px;
width:100px;
height:80px;
}

#miweb008_ {
position:absolute;
left:751px;
top:0px;
width:273px;
height:80px;
}

#miweb009_ {
position:absolute;
left:0px;
top:80px;
width:250px;
height:620px;
}

#miweb010_ {
position:absolute;
left:250px;
top:80px;
width:500px;
height:620px;
}

#miweb011_ {
position:absolute;
left:750px;
top:80px;
width:1px;
height:620px;
}

#miweb012_ {
position:absolute;
left:751px;
top:80px;
width:273px;
height:620px;
}

#miweb013_ {
position:absolute;
left:0px;
top:700px;
width:1024px;
height:68px;
}

–>

</style>
<!– End Save for Web Styles –>

</head>
<body style=»background-color:#FFFFFF;»>

Cuerpo del HTML
<!– Save for Web Slices (introweb.psd) –>
<div id=»Tabla_01″>
<div id=»miweb_»>
<img id=»miweb» src=»imagenes/miweb.jpg» width=»250″ height=»80″ alt=»» />
</div>
<div id=»introweb-02_»>
<a href=»edgarbelsol.wordpress.com» target=»_blank»>
<img id=»introweb_02″ src=»imagenes/introweb_02.jpg» width=»101″ height=»80″ border=»0″ alt=»» /></a>
</div>
<div id=»introweb-03_»>
<a href=»http://html5facil.com/tutoriales/estructura-basica-de-un-documento-de-html5″ target=»_blank»>
<img id=»introweb_03″ src=»imagenes/introweb_03.jpg» width=»100″ height=»80″ border=»0″ alt=»» /></a>
</div>
<div id=»miweb004_»>
<img id=»miweb004″ src=»imagenes/miweb-04.jpg» width=»4″ height=»80″ alt=»» />
</div>
<div id=»introweb-05_»>
<a href=»http://www.cristalab.com/tutoriales/como-crear-un-diseno-web-en-photoshop-c84950l/»>
<img id=»introweb_05″ src=»imagenes/introweb_05.jpg» width=»96″ height=»80″ border=»0″ alt=»» /></a>
</div>
<div id=»introweb-06_»>
<a href=»http://www.cristalab.com/tutoriales/como-crear-un-diseno-web-en-photoshop-c84950l/»>
<img id=»introweb_06″ src=»imagenes/introweb_06.jpg» width=»100″ height=»80″ border=»0″ alt=»» /></a>
</div>
<div id=»introweb-07_»>
<a href=»http://www.photoshopytutoriales.com/crear-una-pagina-web-con-photoshop/» target=»_blank»>
<img id=»introweb_07″ src=»imagenes/introweb_07.jpg» width=»100″ height=»80″ border=»0″ alt=»» /></a>
</div>
<div id=»miweb008_»>
<img id=»miweb008″ src=»imagenes/miweb-08.jpg» width=»273″ height=»80″ alt=»» />
</div>
<div id=»miweb009_»>
<img id=»miweb009″ src=»imagenes/miweb-09.jpg» width=»250″ height=»620″ alt=»» />
</div>
<div id=»miweb010_»>
<img id=»miweb010″ src=»imagenes/miweb-10.jpg» width=»500″ height=»620″ alt=»» />
</div>
<div id=»miweb011_»>
<img id=»miweb011″ src=»imagenes/miweb-11.jpg» width=»1″ height=»620″ alt=»» />
</div>
<div id=»miweb012_»>
<img id=»miweb012″ src=»imagenes/miweb-12.jpg» width=»273″ height=»620″ alt=»» />
</div>
<div id=»miweb013_»>
<img id=»miweb013″ src=»imagenes/miweb-13.jpg» width=»1024″ height=»68″ alt=»» />
</div>
</div>
<!– End Save for Web Slices –>
</body>
</html>

Yo sé que este código a la mayoría de nosotros nos marea… pero bueno lo verde es el HTML y lo Azul es el CSS.

De aquí en adelante es generar Java script para darle movimiento, bases de datos por PHP para hacerla dinámica y muchísimo más – cercana a los verdaderos entusiastas, desarrolladores, ingenieros y algunos desocupados curiosos -y los pubicistas que queramos entender COMO FUNCIONA LA WEB PARA DESARROLLAR PROPUESTAS AL MENOS BÁSICAS-. Muchas preguntas? en clase o dejen sus comentarios o envíenme un mensaje…

 

IMPORTANTE: El que desee el archivo en .psd por favor SOLICÍTELO ESCRIBIÉNDOME A MI CORREO.

Deja un comentario