WebMatrix ha sido construido para facilitar el desarrollo web, independientemente de si está aprendiendo o si lo que quiere es que las cosas estén hechas. WebMatrix le permite centrarse en lo importante, su sitio web. Aquí tiene un primer vistazo de algunas de las características de WebMatrix.

Una herramienta sencilla, pero completa

WebMatrix es una herramienta de desarrollo web gratuita, se instala en minutos e incorpora un servidor web, una base de datos y un framework de desarrollo en una única e integrada experiencia. WebMatrix le permite desarrollar, probar y desplegar aplicaciones ASP.NET y PHP.

Crece con usted

Con WebMatrix en su escritorio, usted está utilizando el mismo servidor web, base de datos y frameworks que su sitio utilizará en internet. Esto asegura que la transición entre desarrollo y producción se produzca de forma transparente y sin obstáculos.

Cuando sea necesario, WebMatrix integrará Visual Studio en el proceso. Conecte con Visual Studio para aprovechar las funcionalidades de depuración y análisis de rendimiento. Y si llega a ser necesario utilizar un motor de base de datos relacional para gran volumen de consultas, puede migrar su base de datos e información del SQL Server Compact a un SQL Server con un solo click.

Publicación del sitio

Con WebMatrix puede encontrar el mejor alojamiento para su sitio web. Utilice WebMatrix para encontrar un hoster que encaje en sus requisitos y aproveche el soporte integrado de publicación por FTP, FTPS y WebDeploy para asegurar que sus archivos, bases de datos y configuración se despliegan sin complicaciones.

La base de datos hecha simple

¡Utilizar una base de datos nunca ha sido tan sencillo! WebMatrix incorpora un pequeño motor de base de datos empotrado que puede convivir con el código y contenido de su sitio web. Utilícelo para construir su próximo sitio web, y cuando esté preparado para publicar, simplemente copie la base de datos de su computadora a cualquier servidor web y funcionará automáticamente, no hace falta ninguna instalación extra. En caso de que necesite soporte para un gran volumen de trabajo con datos, puede migrar fácilmente a SQL Server.

Interfaz elegante, experiencia sencilla

WebMatrix incorpora un editor de código rico, un editor de bases de datos, gestión del servidor web, optimización para motores de búsqueda (SEO), publicación por FTP y más. WebMatrix aporta una nueva experiencia de desarrollo de sitios web que agrupa todos los componentes clave para crear, ejecutar y desplegar sitios web.

Más que “Hola Mundo”

¿Quiere mostrar un feed de Twitter? ¿Necesita mostrar un vídeo? Los helpers de código facilitan las tareas frecuentes con una simple etiqueta en su HTML.

Inicio > Código Abierto

WebMatrix le conecta con un mundo de aplicaciones web gratuitas y de código abierto, incluyendo DotNetNuke, Umbraco, WordPress, Joomla!, y más… Simplemente seleccione una aplicación de las disponibles en la galería y WebMatrix se encargará del proceso de descarga e instalación de su nuevo sitio web. Los días de cambiar a mano los archivos de configuración y asegurarse de que están instalados los componentes adecuados han llegado a su fin. Personalice su sitio utilizando el editor incorporado y hágalo suyo.

Desarrollo fácil

WebMatrix es la forma más sencilla de aprender desarrollo web estándar y simplifica la construcción y publicación de sitios web en internet. Empiece con HTML, CSS y Javascript para posteriormente conectar con una base de datos o incorporar código para la parte servidora utilizando la sintaxis ‘Razor’ para ASP.NET Web Pages. Su código será fácil de leer, fácil de aprender, sencillo de escribir y funcionará con cualquier editor de texto. Utilice las funciones incorporadas para conectar con una base de datos, mostrar un feed de Twitter o incrustar un vídeo. Y con una transición transparente a ASP.NET MVC es más fácil que nunca desarrollar aplicaciones web ASP.NET potentes.

Sugerencias cuando más las necesitas

WebMatrix no simplemente colorea la sintaxis y pestañas para facilitar la búsqueda, también autocompleta etiqueta y ofrece sugerencias para las etiquetas del estándar HTML y CSS, haciendo más sencilla y rápida la escritura de código.

Escritorio o servidor, es igual

WebMatrix utiliza el mismo servidor web, motor de base de datos y framework que se utilizará cuando el sitio web se ejecute para internet, esto hace que la transición de desarrollo a producción sea transparente.

Atado fuertemente, completamente integrado

WebMatrix integra IIS Express y está fuertemente enlazado con los componentes de servidor web que ejecutan su sitio. Supervise directamente en tiempo real las peticiones y respuestas de su sitio web para encontrar problemas rápidamente. ¿Falta una imagen? Verá de forma inmediata porqué y dónde, y WebMatrix le situará en el archivo para corregir el problema.

Optimizar para la búsqueda

Obtenga un informe de optimización para motores de búsqueda (SEO) y descubra cómo hacer su sitio más visible a motores de búsqueda. WebMatrix descubre los secretos de SEO y aporta una guía clara de cómo mejorar su sitio, incluso le sitúa en el archivo específico que necesita adaptar.

Descripción general Funciones Áreas de trabajo Comenzando Instalar WebMatrix

Los espacios de trabajo son lo importante

WebMatrix integra 4 espacios de trabajo que nos ayudan a la hora de enfocarnos en las diferentes áreas de los sitios web. Supervise las peticiones en tiempo real y configure los parámetros del servidor web desde el espacio de trabajo Site. Gestione los archivos y modifique el código utilizando el editor con resaltado de sintaxis en el espacio de trabajo Files. Incluya y gestione bases de datos utilizando el espacio de trabajo Database. Y por último, pero no menos importante, genere informes SEO y optimice su sitio web para motores de búsqueda con las herramientas del espacio de trabajo Reports.

Seleccione un espacio de trabajo para ampliar información.

Área de trabajo Site

Centro de operaciones

Acceda rápidamente a la información relevante de su sitio utilizando un sencillo cuadro de mandos. Obtenga la URL de su sitio web y la ruta física del sistema, o acceda rápidamente a tareas frecuentes como encontrar un hoster compatible y establecer una conexión remota.

Peticiones en tiempo real

Monitorice las peticiones y respuestas del sitio web en tiempo real y solucione problemas en ese instante. ¿Falta una imagen? Vea la petición y sepa en ese momento porqué y cuál es el archivo hay que arreglar.

Sitio + Servidor

Configure los parámetros más habituales para su sitio, desde la URL para su website hasta el modelo de desarrollo que utiliza. Todo se hace desde aquí.

Iniciar sesión | ¡HAZTE MIEMBRO! | Ayuda

Ivana Tilca DPE Developer en MicrosoftArchives

July 2011 (1) May 2011 (1) April 2011 (1) March 2011 (2) February 2011 (2) January 2011 (5) November 2010 (5) October 2010 (3) April 2010 (1) March 2010 (2) February 2010 (1) January 2010 (8) December 2009 (1) November 2009 (15) October 2009 (3) July 2009 (1) June 2009 (1) March 2009 (3) February 2009 (2) January 2009 (1) December 2008 (1) October 2008 (7) September 2008 (3) August 2008 (4) July 2008 (1) June 2008 (10) May 2008 (8) April 2008 (15) March 2008 (6)

This Blog

Inicio Contacto

Syndication

RSS ATOM RSS de comentarios

WebMatrix Parte 3 – Demos un poco de estilo

Recordemos… en el post anterior, parte dos de esta serie de tutoriales, vimos como crear una página dentro de nuestro sitio vacío. Ahora veremos como comenzar a darle un poco de estilo a nuestra página utilizando la tecnología llamada Cascading Style Sheets CSS.

PREPARANDO NUESTRA PÁGINA PARA USAR CSS

Utilizando DIVS

En html se puede dividir el contenido de una página en divs con el tag <div>, veamos como logramos incorporar esto a nuestra página. Recordemos nuestro código.

Lo primero que haremos será es colocar la lista de películas que tenemos en un div.

Si corremos la página ahora, no verán nada diferente a como la teniamos antes  Esto es por que el tag div es un divisor lógico y no tiene apariencia física.

USANDO HYPERLINKS

Probablemente ya estén familiarizados con hyperlinks o vínculos, áreas clickeables que te dirigen a otra página o a otro lugar dentro de una página. Para crear uno es necesario usar el tag <a>. El tag hace que cualquier contenido que se encuentre adentro sea clickeable. Cuando el usuario haga click el browser se redireccionará a donde indica el atributo HREF  (Hyper- Reference).

Un atributo es definido dentro del tag de esta forma.

<tag attribute=”valordelatributo”>contenido</tag>Entonces para crear un vínculo se puede poner lo siguiente.

El href no tiene que ser un sitio web, también puede ser una función javascript. Hay un href especial que puede ser utilizado como un placeholder, mientras se está desarrollando, para probar que el estilo del vínculo está funcionando. Para hacer esto se coloca # dentro de href.

Asi que para poner todos los <li> items de nuestras películas a hyperlinks, simplemente colocamos el texto de la película en un <a> y colocar href en #.

Al correr veremos lo siguiente.

AGREGAMOS CABECERA Y PIE

Lo que haremos a continuación será agregar una cabecera y pie a nuestra página. Utilizaremos el <header> y <footer>  disponibles en HTML5.

Veamos como se vé nuestra pagina ahora.

DEFINAMOS EL ESTILO DE LA PÁGINA

Como saben se definen atributos para especificar como se ven los elementos en una página, incluyendo fuente, tamaño, color ancho y mucho más. Como recuerdan en el código utilizamos en el título un tag <h1> veamos como podemos cambiar el color por ejemplo de este título.

<h1 style="color:blue; font-size:32; font-family:Verdana; text-decoration:underline">TITULO DE LA PÁGINA</h1>

Como pueden ver el estilo del tag <h1> contiene una lista de definiciónes. Entonces el código anterior se vería de la siguiente forma.

Esto funciona bien para cambiar el estilo pero no es la mejor práctica. Qué pasa si tuviesen que aplicar el mismo estilo a varios elementos, terminarían con mucho texto en su página haciendo que sea más lenta la carga del a misma en el navegador.

Afortunadamente hay una forma de aplicar estilos, la conocemos como Style Sheets, definidas utilizando el concepto de Cascading Style Sheets, en el cual el estilo de un elemento p uede ser heredado por un elemento hijo. Por ejemplo si ponemos un estilo al <div> y ese div tiene un hijo <ol> y <li>, el estilo también se aplicará a estos elementos hijos. A menos que se sobreescriba el estilo.

Veamos lo que necesitamos para definir el estilo de <h1>. Entonces en vez de poner estilo en el tag h1 definimos una clase de esta forma.

<h1 class="Titulo">TITULO DE LA PÁGINA</h1>

Ahora ese tag tiene una clase que definimos en CSS de esta forma.

.Titulo {font-size: xx-large;font-weight: normal;padding: 0px;margin: 0px;}

El código de estilos de cascada vá dentro de los tag <style> y dentro del <head> de la página, ahora nuestro código quedaría de la siguiente manera:

Cuando se desea dar estilo a un elemento especifico se utiliza una class para ese elemento, o pueden brindarsela a travez de una id y codificar la clase para esa id, si vemos nuestro codigo obsevaremos que nuestra lista de películas está contenida por un <div> que tiene una id. Podemos brindarle estilo a ese div a travéz de css de la siguente forma:

#peliculaslista{ font-family: Geneva, Tahoma, sans-serif;}

Esto es definir un estilo para el div, y cualquier elemento dentro del div heredará este estilo.

Recordemos que los elementos <ol> se encuentran dentro del div, entonces podemos brindarles estilos de la siguente forma.

#peliculaslista ol {

  list-style: none;  margin: 0;  padding: 0;  border: none;

}

Lo único qu ehace nuestro estilo es quitarle los bullets, sin margen, sin padding, sin borde. Ahora nos queda darle estilo al tag <a> dentro del <li> lo haremos de la siguiente forma.

#peliculaslista li a { font-size: large; color: #000000; display: block; padding: 5px;}

Cuando se trata del tag <a> hay otro comportamiento que debemos tener en cuenta y es qué pasará cuando el usuario mueva el mouse por encima del contenido. para ello tendremos en cuenta el estado HOVER de <a>

#peliculaslista li a:hover{}

Entonces podemos definir que hacer cuando el mouse está encima de la siguiente forma

#peliculaslista li a:hover { border-left: 10px solid #94c9d4; padding-left: 10px; background-color: #e7f5f8; text-decoration: none;}

Esto es fácil de experimentar con CSS y WEBMATRIX lo hace mas fácil. Ahora todo este código que hemos programado dentro del tag HEAD lo podemos almacenar en un archivo externo de tipo css, y hacer que nuestra página apunte a ese archivo. De esta forma si el sitio tiene más de una sola página podemos utilizar las mismas clases en diferentes páginas.

Vamos a agregar este archivo, vamos a New, File.

Elegimos tipo de archivo CSS y de nombre le vamos a poner PeliculasEstilo.css puede ser cualquier nombre.

Reemplacen ese archivo con el código siguiente.

body { font-family: Tahoma, Verdana, Geneva, sans-serif; width: 85%; margin: 20px auto; }   header { padding: 10px; border-bottom: 1px solid #e5e5e5; }   header h1 { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; }   #peliculaslista { margin: 20px 0; }   #peliculaslista ul { list-style: none; margin: 0; padding: 0; }  

#peliculaslista li a { font-size: large; color: #000000; display: block; padding: 5px; }   #peliculaslista li a:hover { border-left: 10px solid #94c9d4; padding-left: 10px; background-color: #e7f5f8; text-decoration: none; }

Vamos a nuestra página nuevamente, borremos todo lo que está dentro del tag SCRIPT incluso los tags mismos y reemplacen con la siguiente linea de códigoGo back to your page, and delete the entire <script> tag, and replace it with this:

<link rel="stylesheet" type="text/css" href="PeliculasEstilo.css" />

Esto le indica al navegador que en véz de abrir el código en la misma página lo utilice desde ese archivo.

Vamos a agregar una nueva clase de estilo al footer de la siguiente forma.

footer {

font-size: smaller;color: #ccc;

text-align: center;padding: 20px 10px 10px 10px;border-top: 1px solid #e5e5e5;}

Y finalmente tenemos el siguiente resultado. Continuará…

Published 24/1/2011 19:18 por Ivana Tilca

Comparte este post:

http://geeks.ms/blogs/itilca/archive/2011/01/24/webmatrix-parte-3-demos-un-poco-de-estilo.aspx

01 noviembre 2011 ~ 13 Comments

Razor

.NET MVA Webmatrix

El lenguaje de Razor es un lenguaje de programación sencillo para incrustar código que se ejecutará en el servidor de una página web. En una página web que utiliza Razor, hay dos tipos de contenidos: El código del cliente y el código del servidor. El contenido del cliente son las cosas de las que estamos acostumbrados en las páginas web: HTML, información de estilo CSS, y script de cliente, como JavaScript y texto.

Razor nos permite agregar el código del servidor dentro del contenido del cliente. Si no hay servidor de código en la página, el servidor se ejecuta el código en primer lugar, antes de enviar la página al navegador. Razor puede realizar tareas que pueden ser mucho más complejas de lo que podría hacerse solo con código Html, por ejemplo acceder a consultar sobre la base de datos. Lo más importante es entender que el código dinámico finalmente genera código Html sobre la marcha y luego lo envia al navegador, junto con todo el código HTML estático que la página ya contenía. Desde la perspectiva del cliente, el código del Razor no es diferente a cualquier otro código Html.

En ASP.NET las páginas web que incluyen Razor tiene una extensión de archivo especial (. CShtml o VBhtml.). El servidor reconoce estas extensiones, se ejecuta el código que está marcado con Razor, y luego envía la página al navegador.

El lenguaje Razor se basa en una tecnología de Microsoft llamada ASP.NET, que a su vez se basa en la plataforma Microsoft .Net Framework. .Net es un framework grande, amplía la programación de Microsoft para el desarrollo de prácticamente cualquier tipo de aplicación informática. ASP.NET es la parte del .Net Framework, que está específicamente diseñado para la creación de aplicaciones web. Los desarrolladores han utilizado ASP.NET para crear muchos de los sitios web más grandes y de mayor tráfico del mundo. (Cada vez que veas la extensión .Aspx como parte de la URL de un sitio, sabrás que el sitio fue creado con ASP.NET.)

Razor le da todo el poder de ASP.NET, pero con una sintaxis simplificada que hace las cosas más fáciles si eres principiante y te hace más productivo si eres es un experto. A pesar de que esta sintaxis es muy simple de usar, al estar ligado con ASP.NET significa que a medida que tus sitios o aplicaciones web se vuelvan más sofisticados, tendrás todo el poder del framework .Net disponible.

ASP.NET utiliza el paradigma de programación orientada a objetos. Empecemos hablando de las clases. La clase es la definición o plantilla para un objeto. Por ejemplo, una aplicación podría contener una clase -cliente- que define las propiedades y los métodos de cualquier objeto del cliente.

Cuando la aplicación necesita para trabajar con información real de los clientes, se crea una instancia de la clase cliente, en este punto pasa a ser llamada como un objeto cliente. Cada cliente es una instancia independiente de la clase Cliente. Cada instancia soporta las mismas propiedades y métodos, pero los valores de propiedad para cada instancia son generalmente diferentes, porque cada cliente es un único objeto. En un objeto cliente, la propiedad Nombre podría ser “Alan Moore”, en otro objeto cliente, la propiedad Nombre podría ser “Isaac Newton”. Cualquier página web individuale en el sitio es un objeto Page que es una instancia de la clase Page. Un botón en la página es un objeto de botón que es una instancia de la clase Button, y así sucesivamente. Cada instancia tiene sus propias características, pero todos se basan en lo que se especifica en la definición de la clase del objeto.

Anteriormente detallamos un ejemplo básico de cómo crear una página Web y cómo se puede agregar el código Razor dentro del código Html. Ahora aprenderemos los conceptos básicos de la escritura de código de Razor, es decir, las reglas de este lenguaje de programación.

Si ya tienes experiencia con programación (especialmente si has utilizado C, C++, C#, Visual Basic o JavaScript), esto te resultará familiar.

Combinando HTML y Razor

Con frecuencia será necesario combinar Razor, con el texto y las etiquetas Html dentro de los bloques de código. Cuando esto suceda, ASP.net es capaz de decidir la diferencia entre ellos. Estas son las formas más comunes de combinar el contenido.

Podemos introducir líneas que contienen Html o Razor. Este método funciona si se tiene Razor o Html (o ambos), pero no de texto si este no está contenido en las etiquetas Html.

Podemos introducir líneas individuales que contienen texto sin formato mediante la @: (carácter @ seguido de dos puntos). Estas líneas pueden contener texto sin formato y una mezcla de Html y Razor.

También es posible escribir varias líneas que contienen mezclas de texto sin formato y Razor usando el elemento <text>. Esto puede ser usado como el ejemplo anterior @:

Comentarios en Razor

Los comentarios nos permiten dejar notas, es especialmente útil cuando luego de un tiempo tienes que revisar tú código o debes compartirlo con otra persona. ¡Leer código por más sencillo que sea nunca es tarea fácil! Los comentarios en Razor se hacen de la siguiente forma:

Agregando código haciendo uso de @

Para agregar código Razor a nuestra vista lo debemos hacer anteponiendo un carácter @ el cual el interprete del servidor usará como el carácter de escape para determinar cuando tiene código que debe ejecutar.

Variables

Una variable es un objeto con nombre que se utiliza para almacenar datos. Podemos nombrar a las variables de cualquier forma, pero el nombre debe comenzar por un

carácter alfabético y no puede contener espacios en blanco o reservados. En los ejemplos anteriores muchas veces has visto la palabra –var- y luego un nombre. ¡Declarar una variables es así de sencillo!

Variables y tipos de datos

Una variable puede tener un tipo de datos, lo que indica qué datos se almacenarán en la variable. Podemos tener variables de cadena que almacenan valores de cadena (como “Hola Mundo”), variables de tipo entero que almacenan un número entero de valores (por ejemplo, 31 o 79), y las variables de fecha en las que almacenamos los valores de fecha en una variedad de formatos (como 4/12/2010 o marzo de 2009). Hay muchos otros tipos de datos que se pueden utilizar. Sin embargo, por lo general no es necesario especificar el tipo de una variable. La mayoría de las veces, ASP.net puede determinar el tipo en función de cómo los datos de la variable están siendo utilizados.

 

Convertir tipos de datos

A pesar de que ASP.net usualmente permite determinar el tipo de datos de forma automática, en ocasiones no se puede lograr. Por lo tanto, puede ser necesario ayudar un poco mediante la realización de una conversión explícita.

También en ocasiones puede ser necesario convertir una variable a un tipo diferente. El caso más común es el de convertir una cadena a otro tipo, como a un número entero o fecha. El siguiente ejemplo muestra un caso típico en el que se debe convertir una cadena en un número.

Como regla general, la entrada del usuario viene en forma de cadenas. Incluso si solicita al usuario que introduzca un número, los datos están en formato de cadena. Por lo tanto, se debe convertir la cadena en un número. En el ejemplo anterior, si se intenta realizar operaciones aritméticas con los valores sin convertirlos, se obtendrá un mensaje de error al intentar sumar dos cadenas que se almacenaran en un total tipo entero.

Operadores

Un operador es una palabra clave o un carácter que le dice a ASP.net los comandos para llevar a cabo en una expresión. Como en la mayoría de los lenguajes de programación Razor es compatible con muchos operadores, pero sólo es necesario reconocer algunos de los más comunes.

Rutas y archivos

Uno de los enredos que tenemos comúnmente cuando trabajamos en web es la diferencia que existe entre las rutas de los archivos localmente y la que deben tener cuando publicamos el proyecto en web. No debemos enlazar nuestra ruta física en los links o las fuentes de los recursos de imagen, css o javascript. En la imagen siguiente por ejemplo notamos que todos los archivos se encuentran en la ruta C:\Users\Judavi\Documents\MyWebSites\Bakery\ en un servidor web, nuestros sitios también tiene una estructura de carpetas virtuales que corresponde a las carpetas físicas en el sitio. De manera predeterminada, los nombres de carpetas virtuales son los mismos que los nombres de las carpetas físicas. La raíz virtual se representa como una barra (/), al igual que la carpeta raíz del disco C: del equipo está representado por una barra invertida (\).

En este caso basándonos en la imagen podríamos decir que el archivo Order.cshtml estaría ubicado así:

Ruta virtual: /Order.cshtml

Ruta física: C:\Users\Judavi\Documents\MyWebSites\Bakery\Order.cshtml

Ahora bien, a veces es necesario hacer referencia a la ruta física y, a veces un camino virtual, dependiendo de lo que los objetos que estés trabajando. ASP.net nos ofrece estas herramientas para trabajar con archivos y rutas de las carpetas en el código: el operador ~, el método Server.MapPath, y el método Href.

En Razor, para especificar la ruta raíz virtual de las carpetas o archivos, debemos utilizar el operador ~. Esto es útil porque podemos migrar el sitio a una carpeta o ubicación diferente sin romper los enlaces en el código.

El método Server.MapPath convierte una ruta virtual (como /default.cshtml) en una ruta absoluta física (por ejemplo, C:\MyWebSites\default.cshtml). Este método se utiliza para tareas que requieren una ruta física completa, como leer o escribir un archivo de texto en el servidor web.

El método del objeto Href convierte los caminos que se crea en el Razor a las rutas que el navegador entiende. (El navegador no puede entender el operador ~, porque eso es estrictamente un operador de ASP.net) Debemos utilizar el método Href para crear rutas a los recursos como archivos de imagen, otras páginas web, y los archivos CSS. Por ejemplo, para los atributos de las etiquetas <img>, <link> y <a>.

Share and Enjoy: