Crear Website básico en Microsoft Azure


El pasado jueves 11 de Diciembre en Microsoft Branch Colombia se estaba llevando a cabo unas sesiones técnicas para emprendedores del país, en esta sesión accedí a dictar la charla donde se tomarán los siguientes temas:

  • Websites Azure
  • Virtual Machines Azure
  • Windows Phone
  • Xamarin

Por lo cual decidí compartir este código usado durante la sesión en varias secciones, la primera es acerca de la creación básica de Websites en Azure.

Creando el Front End

En esta ocasión se decidió hacer un sitio muy básico y estático que a la final solo se conectará con un Backend publicado en otro lado.

En este caso se simulará un negocio de una disquera musical, sin embargo aclaro que todos los logos y nombres de marca son propiedad registrada.

  • Seleccionar una plantilla adecuada, en este caso ir a http://startbootstrap.com/template-overviews/freelancer/
  • Descomprimir el contenido y renombrar la carpeta a algún nombre fácil de recordar.
  • Modificar las imágenes primarias, donde aparece el muñeco por una foto de algún Dj y agregarle un background a esa sección, esto se hace en el archivo freelancer.css
header {
    text-align: center;
    color: #fff;
    background: #18bc9c;

    background-image: url(../img/DJ-Background.jpg);
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
  
    /* Background image doesn't tile */
    background-repeat: no-repeat;
  
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
  
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
}

  • En este caso como la imagen usada es muy clara se confunde con las letras, por lo tanto es necesario ponerle una sombra que haga de efecto “resplandor”, para ello ir a las clases .name y .skills y agregarle el siguiente código
text-shadow: 1px 2px 15px rgba(150, 150, 150, 1);
  • Por lo cual ya podremos ver cambios bastante interesantes en la primera sección
  • Ahora, agregar la identidad de la empresa en el título, esto hacerlo en index.html, aprovechar este momento para modificar los textos del menú y demás.

<a class="navbar-brand" href="#page-top"><img src="img/EtonMessy.png" alt="logo Eton Messy" width="40"> ETON MESSY</a>

  • En portafolio mostraremos cuales han sido las producciones del Dj, solamente en este ejercicio se modificarán las imágenes
  • Modificar los textos de About y asignarle un background, en este caso es otra imagen, de una manera parecida a como se hizo anteriormente, pero esta vez en la clase .success
section.success {
    color: #fff;
    background: #000000;

    background-image: url(../img/AboutArtist.png);
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
  
    /* Background image doesn't tile */
    background-repeat: no-repeat;
  
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
  
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
}
  • Todavía falta modificar el color de la estrella en las secciones principales, dado que ya no estamos usando el color azul.
hr.star-light:after {
    color: #fff;
    background-color: #000000;
}
  • Finalmente cambiar textos en Contact Me y Footer.
  • Y quedaría de la siguiente manera.

Publicar el Website

En esta parte se publicará de la manera más sencilla y atractiva que me parece de  Microsoft Azure, que es publicar desde Dropbox. Siendo así que no es necesario tener conocimientos de Git ni tener suscripción a Visual Studio Online o algún otro repositorio, simplemente una cuenta gratuita de Dropbox y listo!.

  • Para ello, es necesario ir al panel de control en Azure, seleccionar nuevo>Proceso>Sitio Web>Creación Personalizada
  • Cuando se despliegue una ventana emergente seleccionar la URL, la ubicación donde se almacenará y muy importante seleccionar “Publicar desde control de código fuente“.
  • En el siguiente paso nos permitirá seleccionar algún control de código fuente, entre esas vienen las opciones más famosas y útiles en el mundo actual, sin embargo, aquí aparece la opción de seleccionar Dropbox.
  • A continuación, Microsoft Azure solicitará permiso a Dropbox para poder tener acceso a los archivos, como es de suponer se debe permitir el acceso para que funcione.
  • Ahora, regresando al panel de creación se solicitará el nombre la carpeta contenedora y la ubicación donde estarán todos los archivos. Es importante analizar la opción que nos ofrece Azure, “Habilitar reversiones de implementación”, para saber qué hace pueden pasar el cursor encima del signo de interrogación.
  • Una vez creado el sitio ir a Dropbox y se podrá encontrar la carpeta en /Aplicaciones/Azure/<Nombre de la carpeta>. Allí almacenar todos los archivos necesarios; muchas veces solo basta con arrastrar y soltar.
  • Ahora solo nos queda sincronizar los archivos que tenemos en Dropbox y Azure, para ello ir al panel de administración de los Websites e ingresar en el que previamente se hizo.
  • Ir a la sección de implementaciones y dar click al botón que dice, “Sincronizar
  • Cuando se haya implementado correctamente el sitio veremos algo como la siguiente imagen, ahora cada vez que ocurra un cambio debemos darle click al botón en la parte inferior que sincronizará todos los archivos y listo!

2 comentarios en “Crear Website básico en Microsoft Azure

Los comentarios están cerrados.