Developer's Diary

25 marzo, 2011

Diseño básico de páginas web con Expression Blend 4.

Bueno este es mi primer articulo asi que espero que se me disculpe si tengo algun error xD

Este tutorial es el punto de inicio para una serie de guías para sacar todo el provecho a Expression Blend 4 para crear aplicaciones web.En este primer tutorial aprenderemos a crear nuestra página “Hola mundo”, una sencilla web con contenido estático para iniciarnos en Blend en muy pocos pasos. Este tutorial será implementado con otros posteriores, los primeros tratarán sobre la personalización del diseño de nuestra web, creación de botones y animaciones en Silverlight, bueno empezamos.



Para empezar vamos crear nuestro proyecto. Pulsamos New Project al iniciar Blend. En el tipo de proyecto elegimos Silverlight/ Silverlight Application + Website y ponemos nombre a nuestros proyecto.

Con esto obtendremos nuestra página en blanco tal que así.

Clicamos UserControl. 

Ahora modificamos el tamaño de nuestra página al que deseemos.

Para esto en el lado derecho, en propiedades cambiamos Width y Height a los que queramos.

Ahora que tenemos nuestra página en blanco al tamaño que deseamos, vamos a cargar una imagen de fondo, para que no esté tan sosa. En mi caso es una imagen simple que hice con el Photoshop y un par de pinceles.

· 1.- Clicamos en LayoutRoot.

· 2.- En Background marcamos imagen.

· 3.- Clicamos el botón de examinar (…) y elegimos la imagen que queramos.

En el siguiente paso vamos a añadir algo de contenido a nuestra página web, para esto vamos a crear un Canvas que contendrá nuestras imágenes, texto, etc.

Situamos nuestro canvas medianamente centrado y lo fijamos como indica la imagen para que al redimensionar la ventana del explorador, nuestro canvas no cambie de posición.

· 1.- Fijamos el canvas a la izquierda y arriba.

Ahora ha llegado el momento de crear nuestro “Hola mundo”, para esto nos vamos a Assets/All/TextBlock para crear nuestra etiqueta de texto.

Colocamos nuestro TextBlock en un espacio dentro del Canvas y escribimos nuestro texto.

También añadiremos una imagen a nuestro Canvas de la siguiente manera:

· 1.- Clicamos en Assets/All/Image y la situamos en la posición deseada.

· 2.- En las propiedades de la imagen, en la opción Source, pulsamos el botón de examinar y elegimos nuestra foto. Para que no se deforme elegiremos en Stretch la opción Uniform.

Añadiremos también una cabecera a nuestra web que no es otra cosa que una imagen fuera de nuestro Canvas. Fijaremos la imagen arriba a la izquierda para que no se mueva.

Vamos a añadir un botón:

· 1.- Seleccionamos Assets/Button y posicionamos nuestro botón donde deseemos.

Mi Botón es uno personalizado creado por mí, podréis crear botones así siguiendo un tutorial sobre botones customizados que subire pronto.

Ahora voy a saltarme unos pasos sin importancia, os lo resumo:

Creamos un segundo botón.

Creamos un canvas del mismo tamaño que el ya existente y lo rellenamos con un textblock y una imagen.

Vamos a hacer que al pulsar el botón “Inicio” se muestre el primer canvas, pero no el segundo y cuando se pulse “Btn2” pase lo contrario. Para hacer estos cambios nos iremos al código c# que hay tras nuestra web en Projects/MainPage.xaml.cs

El código que añadiremos ira tras el “InitializeComponent()”. Como queremos que al abrir la web solo muestre de inicio el canvas 1, escribiremos canvas2.Opacity=0.

Volvemos al diseño.

· 1.- Seleccionamos el botón inicio.

· 2.- En Propieties pulsamos Events (A la derecha de Name). Doble clic en el evento Click.

Con esto se nos creara la función btn_inicio_click.

· 1.-Dentro de la función click añadimos las instrucciones para que la opacidad de canvas1 sea 100 y la de canvas2 sea 0.

· 2.- Repetimos el proceso con el botón 2 pero la opacidad de nuestros canvas ira al contrario.

Y ya está, con esto tendremos nuestros botones programados y nuestra primera web de prueba lista, en próximos tutoriales tratare de explicar cómo completar nuestra web con recursos más avanzados.

Recordad, si os surge una duda solo tenéis que comentar y os responderé en la mayor brevedad.

Hasta la próxima.

Clicamos UserControl.
Anuncios

5 comentarios »

  1. Muy útil ^^

    Comentario por Ana — 27 marzo, 2011 @ 11:58 AM

    • Tu que vas a decir 😛 espero que sigas echandole un ojo al blog de vez en cuando aunque no sea lo tuyo.

      Comentario por nostromo86 — 27 marzo, 2011 @ 12:19 PM

  2. hola
    yo hice un proyecto en blend que tiene mainpage y page 1 yo quiero saber como hacer para que un boton que hice en mainpage al darle click lleve a page 1
    gracias

    Comentario por NATHALIE — 12 abril, 2011 @ 10:28 PM

  3. amigo donde consigo el programa talves me puedes pasar el link por favor

    Comentario por guido — 15 diciembre, 2012 @ 5:21 PM


RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: