Les presentamos la primera parte de la guía para la creación de interfases web. Fue desarrollado en Photoshop 6, pero se puede ejecutar en Photoshop CS 2 sin problemas.

1.- Preparación del Área de Trabajo.

Esta es nuestra Interface en pañales, tan sólo es un esbozo de lo que será. En ella podemos ver ya las medidas y las posiciones que ocuparán tanto el nombre de la empresa y el logotipo. Esta imagen la encuentras en el zip de imágenes en tamaño real, pero por si la quieres hacer desde cero, la imagen es de 800 600 px con fondo transparente.

A continuación Presiona Crtl + R para ver las Reglas, hecho esto podemos utilizar las guías: haz clic encima de una regla, vertical u horizontal según sea el caso, y sin soltar arrastra hacia el diseño, y con esto te aparece una guía. Usualmente de color azul, estas te dan mayor exactitud a la hora de dibujar. Hay que poner una en cada medida. La imagen te muestra cómo deben de quedar.

Hay que activar el Salto: Ver>Salto a>Guias (View>Snap To>Guides)
Una vez listas las guía podemos iniciar con nuestro diseño, lo primero que hay que hacer es dibujar los distintos elemento de fondo.

2. Diseño de Elementos Básicos de la Interface.

Crea una Nueva Capa: Capa>Nueva Capa (Layer>New Layer) luego toma la herramienta Marco Rectangular , haz clic y sin soltar crea un rectángulo vertical desde 0 hasta 140 px luego rellénala con un gris muy oscuro, casi negro (333333) y nos queda así, sin la capa de fondo (el dibujo a lápiz). Deselecciona Presionando Crtl + D.

Hay que crear una Nueva Capa y con Marco Rectangular siguiendo las guías para formar la primera crestilla. Seguimos con la gama de grises, pero esta vez menos bajo aun (666666), y disminuimos su opacidad hasta un 50%.
El rectángulo va de 90 a 520 px Horizontal y de 140 a 160 px vertical (cresta inferior)

Ahora hay que crear una punta, para esto necesitamos ir a:
Editar>Transformar>Distorsionar (Edit>Transform>Distort)

Y presionando la tecla Shift arrastramos la punta inferior derecha de nuestro rectángulo hacia arriba. Finalmente Presiona Aceptar (Enter) en tu teclado.

Deselecciona.

Duplicamos esta capa arrastrándola hasta el icono de Nueva Capa (New Layer) en la paleta de Capas.Presiona Ctrl + T o ve a: Editar>Transformar>Escalar (Edit>Transform>Scale) y arrastra la parte inferior de la forma hasta guía de 495 px horizontal. Pon la opacidad de esta capa en 75% (cresta media). Haz lo mismo con otra, duplica la primera, sin embargo colócala a la altura de la guía de 470 px horizontal y una opacidad del 100% (cresta superior).

En este momento nos viene bien ver la capa de fondo, color blanco, para empezar a distinguir entre los distintos componentes de la Interface, que no son blancos. Crea una Nueva Capa (New Layer) y rellénala de blanco. Y ahora sí podemos distinguir claramente el efecto de las transparencias en las crestillas.

Así es como vamos en las capas, tan sólo son 5 junto a nuestro fondo blanco artificial.

Para nombrar a las capas debes de hacer clic con el botón derecho del Ratón sobre la capa y del menú emergente seleccionar Propiedades de Capa (Layer Properties).

Hemos terminado los elementos del fondo y así vamos hasta ahora:

Iniciaremos ésta serie de posts, con una descripción rápida de lo que es JavaScript.

JavaScript es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C.

Al igual que Java, JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si bien ésta se realiza siguiendo el paradigma de programación basada en prototipos, ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad.

 Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM.

El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que es la que desarrolló los primeros navegadores web comerciales. Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0.

Tradicionalmente, se venía utilizando en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación únicamente cliente, sin acceso a funciones del servidor. JavaScript se ejecuta en el agente de usuario al mismo tiempo que las sentencias van descargándose junto con el código HTML.

Vía Wikipedia.org

Aquí un ejemplo sencillo para mostrar un mensaje de alerta al cargar una página:

 

<script language=”JavaScript” type=”text/javascript”> alert(”Texto a mostrar, lo puedes modificar”); </script>

 Sólo es necesario copiar y pegar el  código anterior antes de la etiqueta “</head>”,dentro de el html de la página que quieras que lo muestre.