viernes, 24 de febrero de 2012

TRUCOS DE CODIFICACIÓN DE LOS DESARROLLADORES DE JUEGOS - PARTE 1

Si tienes algo de experiencia en el mundo de programación real, entonces sin duda en algún momento usted ha tenido que recurrir a alguna solución rápida y sucia para resolver un problema o una característica de ejecución, mientras que un plazo se vencía. Los desarrolladores de juegos a menudo experimentan una terrible "crisis" (también conocido como "marcha de la muerte"), lo que ocurre en los últimos meses de un proyecto anterior a la fecha del lanzamiento del juego. El no poder cumplir el plazo puede significar a menudo que el proyecto se cancela o, peor aún, usted pierde su trabajo. Entonces, ¿qué tipo de trucos se usan cuando se encuentran debajo de la bomba, haciendo 12 horas + por día durante semanas?

A continuación se presentan algunas anécdotas clásicas y consejos - muchas gracias a Brandon Sheffield quien originalmente elaboró este artículo en Gamasutra. He reposteado algunas de sus historias y tambien tiene añadido un poco más de las nuevas fuentes. También he enlazado en cada historia a la página principal del autor o blog siempre que sea posible.

1. El antihéroe de programación - Noel Llopis


Yo estaba recién salido de la universidad, todavía húmeda detrás de las orejas, y estaba a punto entrar en la fase beta de mi primer proyecto profesional del juego - un título a finales de los años 90 para PC. Había sido un viaje en montaña rusa emocionante, ya que en los proyectos a menudo son así. Todo el contenido estaba dentro y el juego se ve bien. Había un problema: Estábamos muy por encima de nuestro presupuesto de la memoria.

Dado que la mayoría de memoria fue recogida por los modelos y texturas, se trabajó con los artistas para reducir la huella de la memoria del juego tanto como sea posible. Hemos reducido las imágenes, modelos y texturas diezmadas comprimido. A veces lo hicimos con el apoyo de los artistas, y, a veces encima de sus cadáveres.

Cortamos megabytes después de megabytes, y después de unos días de frenética actividad, llegamos a un punto en que sentía que no había nada que pudiéramos hacer. A menos que cortar un poco de mayor contenido, no había manera de que pudiéramos liberar memoria más. Exhausto, se evaluó el uso de nuestra memoria actual. Todavía estábamos 1,5 MB por encima del límite de memoria!

En este punto, uno de los programadores más experimentados del equipo, quien había sobrevivido a muchos años de desarrollo en los "buenos viejos tiempos", decidió tomar el asunto en sus propias manos. Él me llamó a su oficina, y se encamina por lo que me imaginaba sería otra agotadora sesión de la liberación de memoria.

En cambio, trajo a colación un archivo de origen y se refirió a esta línea:

static char buffer[1024*1024*2];


"¿Ves esto?" dijo. Y luego se elimina con una sola tecla. ¡Hecho!

Probablemente vio el horror de mis ojos, así que él me explicó que había dejado de lado esos dos megabytes de memoria al inicio del ciclo de desarrollo. Sabía por experiencia que siempre era imposible cortar contenido a los presupuestos de la memoria, y que muchos proyectos había estado a punto de fallar a causa de ella. Así que ahora, como una práctica regular, el siempre pone a un lado un bonito bloque de memoria para liberar cuando es realmente necesario.

Salió de la oficina y anunció que había reducido el consumo de memoria dentro de las limitaciones presupuestarias - se le brindó como el héroe del proyecto.

la práctica Tan horrorizado como yo estaba en ese entonces sobre tal "barbaridad", tengo que admitir que estoy calentando a la misma. No he entrado en el estado de ánimo en el que puede ponerla en uso todavía, pero puedo ver cómo a veces, cuando estás contra la pared, con un poco de memoria escondida para un día lluvioso puede marcar la diferencia. qué gracioso es ver como el tiempo y la experiencia, cambia todo.

2. Caché para arriba - Andrew Russell


Para mejorar el rendimiento cuando se están procesando las cosas en un ciclo cerrado, quieres hacer que los datos para cada repetición lo más pequeño posible, y lo más cerca posible entre sí en la memoria. Eso significa que el ideal es una matriz o un vector de objetos (no punteros) que contienen sólo los datos necesarios para el cálculo.

De esta manera, cuando la CPU obtiene los datos para la primera iteración del bucle, para las siguientes iteraciones muchas líneas de datos son cargados en la memoria caché de la misma.

Realmente no hay mucho que puedas hacer con el uso de pocas y mas rápidas instrucciones porque la CPU es lo más rápida que vas a conseguir, y el compilador no puede ser mejorado. La coherencia de caché es donde está - este artículo contiene un buen ejemplo de coherencia de caché para obtener un algoritmo que no se limita a ejecutar a través de los datos de forma lineal.

3. Planee sus distracciones - Jay Barnson

El Internet es una de las mejores herramientas que se han inventado, tanto para la mejora de la productividad y su destrucción. Twitter y los foros y blogs y sitios web institucionales puede ser muy motivacionales y educativos, pero también pueden ser una distracción que destruye por completo toda esperanza de conseguir cualquier cosa hecha. Una cosa que he hecho en el pasado que ha demostrado ser muy exitosa es ceñirse a un plan para cuando puedo pasar algunos minutos consultar el correo electrónico y Twitter, o jugar una partida rápida o algo así. Ya sea en la realización de una tarea, o después de un período de tiempo (por ejemplo una de cinco minutos por cada hora). De lo contrario, el único uso del navegador es para la lectura de las páginas de referencia del manual, si es necesario. De esa manera convertir una distracción potencial en una herramienta de motivación.

4. El daño colateral - Jim Van Verth (@ cthulhim)

No sé cómo muchos recuerdan la Fuerza 21, pero fue uno de los primeros de RTS (estrategia en tiempo real) en 3D que utiliza una cámara de seguimiento para observarsu pelotón actual. Hacia el final del proyecto que tenía un error extraño en donde la cámara se detendría siguiendo el pelotón - que sólo se quedaría donde estaba, mientras que el pelotón pasó y nada se movió. La causa aparente fue al azar porque no podíamos encontrar un caso de reproducción decente. Hasta que, finalmente, uno de los probadores se dio cuenta de que ocurrió con más frecuencia cuando un ataque aéreo se produjo cerca de sus vehículos. Con esa información yo era capaz deseguirle la pista.


Debido a que la cámara estaba usando la velocidad y la aceleración y era chocable, loderivado de nuestra clase PhysicalObject, que tenía esas características. También tenía otra característica: PhysicalObjects podría recibir daño. Los ataques aéreos hizobastante daño en un radio lo suficientemente grande que fueron literalmente "matar" ala cámara.


Hice arreglar el fallo, asegurando que las cámaras no podían recibir daño, pero sólo para estar seguro, que aumentó su armadura y puntos de vida a niveles ridículos. Creo que puedo decir con seguridad que tenía la cámara más dura en cualquier juego.


5. El ciego guiando al ciego - Mauricio Gomes


En la universidad había un equipo que hizo un juego flash FPS. Por alguna extraña razón, el programador, en lugar de comprobar si el personaje estaba chocando con la pared y dejar que ir allí, lo hizo a la inversa, él comprobó si había una pared, y sólo se permite que se mueva paralelo a ella!

Esto provocó un error extraño: en los cruces o uniones T en el nivel, en realidad no se podía cruzar, sólo recurren a la aprobación a la izquierda oa la derecha. La fecha límite se acercaba, y no tenían ni idea de cómo solucionarlo.

A continuación, el escritor del equipo solucionado el problema, dijo al artista que añadiera una animación de las manos tocando las paredes, y luego añadió en la historia de fondo que el personaje principal era ciego y tenía que tocar constantemente las paredes para saber a dónde iba.

6. No te gusto cuando estoy enojado - Waanders Nick


Una vez trabajé en THQ Relic Entertainment estudio en conjunto, que algunos recordarán como uno de los primeros juegos para la Xbox 360. Comenzamos con un motor de PC (único - subproceso), y tuvimos que convertirlo en un juego completo en una nueva generación de núcleos múltiples de la consola en unos 18 meses. Unos tres meses antes de su envío, que todavía estaban en curso en alrededor de 5 disparos en el 360. Obviamente este juego necesita alguna optimización enorme.

Cuando hice algunas mediciones de desempeño, se hizo evidente que tanto como el código fue lento y muy "PC", también hubo un montón de problemas en el lado del contenido. Algunos modelos eran demasiado detalladas, algunas sombras eran demasiado costosos, y algunas misiones sólo tenía a muchos chicos dando vueltas.

Es difícil convencer a un equipo de 100 personas que los programadores no puede limitarse a "arreglar" el rendimiento del motor, y que algunas de las maneras que la gente se había acostumbrado a trabajar necesitaba ser cambiado. La gente necesita entender que el rendimiento del juego era un problema de todos, y pensé que la mejor manera de hacerlo es con un poco de humor que tenía un poco de la verdad oculta detrás de él.

La solución me llevó una hora. Un programador de compañeros tomó cuatro fotos de mi cara, uno muy feliz, normal, un poco enojado uno, y uno donde estoy tirando de mi pelo. Pongo esta imagen en la esquina de la pantalla, y que estaba vinculada a la velocidad de fotogramas. Si el juego corría a más de 30 cuadros por segundo, me sentí muy feliz, si corriera por debajo de 20, yo estaba enojado.

Después de este cambio, la cuestión pasó de todo FPS, "¡Ah, los programadores se lo arreglaran". que, "Hmm, si pongo este modelo en, Nick va a estar enfadado! mejor que optimizar esta un poco primero." Inmediatamente la gente puede ver si un cambio que hicieron tuvo un impacto en la velocidad de fotogramas, y acabamos de enviar el juego a 30 fps.

7. No es un error, es una función! - Philip Tan


He trabajado en un juego de rol en el que estábamos tratando de conseguir los NPCs (personajes no jugadores) para detectar cuando usted estaba en el rango, camina hacia ti, y entablar una conversación con usted por la activación del sistema de diálogo.

Nos olvidamos de agregar el código para distinguir los PNJ (Personajes de la PC del jugador), por lo que íbamos a pie a la ciudad y todos los puntos de contacto estaría hablando unos con otros. Debido a que todo el código de la APN de IA usaba la plantilla de diálogo misma, que en realidad tiene un par de frases antes de que las conversaciones se hizo absurda. Y debido a que fue transmitido en carácter de diálogo, ud podia leer todo lo que decían si estaban en el rango.

Hemos decidido convertir ese error en una de las principales características.

8. Acciones sucias - Tim Randall (Desarrollador @ Encore)

El equipo de motor en Gremlin Interactive mantiene un guante en su oficina. Cuando alguien le preguntó por qué estaba allí, se les dijo que sólo se usaba cuando alguien estaba a punto de escribir algo de código muy sucio. No era tanto un caso de no querer dejar huellas dactilares, sino más bien que no quería tocar en realidad correcciones muy sucias!








miércoles, 22 de febrero de 2012

YO SOY UN GRAN PROGRAMADOR, PERO TERRIBLE PARA HACER ALGORITMOS


Traducido de TREND LINE:

Yo soy un gran programador, pero un algoritmista terrible. Es un pensamiento que ha pesado sobre mí muy poco, y me gustaría recoger los sentimientos de otros desarrolladores sobre el tema también.

Comencé a lo que puede llamarse mis espaldas profesionales de desarrollo profesional en 1999. Yo todavía estaba en la escuela media, pero mi padre me contrató en su compañía de software. Mi misión oficial era hacer cambios a nuestros sitios web, pero sobre todo terminó molestando a otros desarrolladores para ayudarme a aprender.

A partir de ahí cogí Perl (un poco) y luego se trasladó para el desarrollo de PHP y la interfaz web final, donde me he alojado cómodamente durante los últimos doce años.

Cuando se trata de la construcción de sistemas de gran escala, la comprensión de los detalles de estos sistemas, y en realidad a escribir, lo hago muy bien. Soy capaz de escribir código PHP elegante (creo que existe), y realmente entiende de programación también. Hago todas las cosas que hace un artesano del software: escribe pruebas automatiza la medida de lo posible, se entera de las nuevas tecnologías, piedras de afilar mi oficio con el trabajo de lado y el trabajo de código abierto, y construyo sistemas que escalan con las peticiones de la demanda y el cliente.


Incluso tengo una licenciatura en Ciencias de la Computación de lo que creo que es una gran universidad.

Sin embargo, siento que soy un algoritmista Terrible

Pídeme que escribir un algoritmo complejo (incluso uno que se ha descubierto), y me pongo a sudar en las palmas de las manos y nervioso. ¿Es este un síntoma que usted también? Para que sea realmente capaz de expresar un algoritmo en el código, realmente tengo que pasar mucho tiempo en comprender que lo haga.

Yo entiendo que un algoritmo es una serie de pasos para completar un problema. Me refiero a los algoritmos complejos como la clasificación, las estrategias recursivas que se fusionan, la criptografía y la compresión, por nombrar algunos.

Mi mayor orgullo logrado en la universidad fue escribir el algoritmo A * para mis primeras estructuras de datos y algoritmos de clase. Me pasaba las horas físicamente dibujando gráficas y mantenia escribiendo las tablas de la pila que los nodos estaban siendo empujados hacia dentro y fuera de.

Incluso mantuve los dibujos porque yo estaba muy orgulloso de ellos.




Lo que se reduce a es a menudo tengo problemas para ver el algoritmo subyacente a un problema complejo. Una vez entrevisté con Amazon y no lo hace más allá de la segunda vuelta porque no podía ver el algoritmo subyacente en una de las preguntas que me pidieron (las preguntas sobre la arquitectura en general, sin embargo, lució muy bien). Afortunadamente, esto no es algo que se tiene o no. Algunos programadores tienen una habilidad natural para ver el algoritmo subyacente de un problema, pero si no puede, se puede aprender.

¿Soy el único en sentir esto? ¿Es la lucha de otros programadores con esto también? ¿Es esta una manifestación del síndrome del impostor? Lo disfrutamos en la universidad, pero yo no estudié tanto como debería haberlo hecho. Si eres un mayor en Ciencia de la Computación de la universidad ahora y mucho de esto no es algo natural, le pido: por favor, pasar tiempo en sus estudios. Realmente se aprende de los algoritmos presentados en clase. Asi usted nunca se aproveche de ellas durante su carrera, por lo menos le ayudará a sentirse más como un programador.





lunes, 20 de febrero de 2012

UN TUTORIAL PARA PRINCIPIANTES EN ASP.NET PARA ADMINISTRACIÓN DE ESTADOS


Introducción

Este artículo analiza la necesidad de que la administración del estado en las aplicaciones ASP.NET, ¿cuáles son las distintas formas de gestión estatal en ASP.NET y un análisis comparativo de todas las técnicas de administración de estado.

En el fondo

HTTP es un protocolo sin estado. Una vez que el servidor sirve las peticiones cursadas por el usuario, se limpia todos los recursos utilizados para atender esa petición. Estos recursos incluyen los objetos creados durante esa solicitud, la memoria asignada en esa solicitud, etc Para un tipo que viene de un fondo de desarrollo de aplicaciones Windows, esto podría ser una gran sorpresa porque no hay manera de que podía confiar en los objetos y miembros las variables por sí solas para realizar un seguimiento del estado actual de la aplicación.

Si tenemos que seguir la información de los usuarios entre las visitas a la página e incluso en múltiples visitas de la misma página, entonces tenemos que utilizar las técnicas de gestión del Estado proporcionados por ASP.NET. La gestión del Estado es el proceso mediante el cual los desarrolladores de ASP.NET permiten mantener información de estado y la página sobre el pedido múltiple de las mismas páginas o diferentes.

Tipos de la administración del estado

Hay principalmente dos tipos de gestión estatal que ASP.NET ofrece:

  1. Del lado del cliente de administración de estado
  2. El lado del servidor de administración de estado
Cuando usamos el lado del cliente la administración del estado, la información de estado relacionada se almacenan en el lado del cliente. Esta información viaja de ida y vuelta con cada petición y respuesta. Esto puede ser visualizado como:

Nota: Imagen tomada del libro de Microsoft Press.

La ventaja principal de tener este tipo de gestión del Estado es que a aliviar el servidor de la carga de mantener actualizada la información relacionada con el estado, se ahorra una gran cantidad de memoria del servidor. La desventaja de la administración del estado del lado del cliente es que se necesita más ancho de banda considerable cantidad de datos está viajando de ida y vuelta. Pero hay otro problema que es más grande que el problema del ancho de banda. El lado del cliente la administración del estado hace que la información viaja de ida y vuelta y por lo tanto esta información puede ser interceptada por alguien en el medio. Así que no hay manera de que podamos almacenar la información confidencial como contraseñas, número de tarjeta de crédito y el importe a pagar en el lado del cliente, tenemos que del lado del servidor de gestión de estado para estas cosas.

El lado del servidor de gestión estatal, en contraste con el lado del cliente, mantiene toda la información en la memoria del usuario. La desventaja de esto es más el uso de memoria en el servidor y el beneficio es que la información de los usuarios es confidencial y segura.

Nota: Imagen tomada del libro de Microsoft Press.

No podemos decir que vamos a utilizar un solo tipo de gestión estatal en nuestra aplicación. Tendremos que encontrar una mezcla de lado del cliente y la gestión del lado del servidor del Estado en función del tipo y el tamaño de la información. Ahora echemos un vistazo a lo que son las diferentes maneras en que puede manejar el estado en el lado cliente y del servidor.

Del lado del cliente las técnicas de administración de estado
  • Ver Estado
  • Control del Estado
  • Los campos ocultos
  • Galletitas
  • Cadenas de consulta
Ver Estado - ViewState

ASP.NET utiliza este mecanismo para el seguimiento de los valores de los controles en la página web entre la solicitud de página para una misma página. También podemos añadir valores personalizados para ver el estado. El marco ASP.NET se encarga de almacenar la información de los controles en el estado de vista y recuperar de nuevo de estado de vista antes de renderizar la devolución de datos.

Si tenemos que usar ViewState para almacenar nuestra información, sólo tenemos que recordar que el estado de vista es un objeto de diccionario. Podemos tener nuestros datos almacenados como un par de valores clave en el estado de vista (véase el código de abajo). La información que los controles también se está ordenada en este diccionario en la petición y se rellena de nuevo durante la respuesta.

Dado que esta información se almacena en la propia página web, ASP.NET codifica la información. Podemos ajustar los parámetros relacionados con el cifrado de web.config.

<Configuration>
       <system.web>
        <pages viewStateEncryptionMode="Always"/>
      </system.web>
</configuration>

o en la página declarativa:

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" 
ViewStateEncryptionMode="Always"%>


Veamos ahora en una aplicación pequeña de estado de vista. Contamos con una simple página web con un cuadro de texto y un botón. La idea es que vamos a escribir algo en el cuadro de texto y ver cómo ASP.NET almacena esta información en el estado de vista. Vamos a almacenar nuestra propia información en el estado de vista también. Al ejecutar la página y escribir mi nombre en el cuadro de texto y pulse el botón, se produce una devolución de datos, pero mi nombre se mantiene en el cuadro de texto. Viewstate hecho posible así que después de la devolución de datos, la página se ve así:

Cuando nos fijamos en la fuente, el estado de vista se parece a:

<input type="hidden" name="__VIEWSTATE"
id="__VIEWSTATE" value="/wEPDwUKMTkwNjc4NTIwMWRkfIZa4Yq8wUbdaypyAjKouH5Vn1Y=" />



Ahora vamos a tratar de añadir nuestra propia información en el estado de vista. Vamos a 
llevar un registro de devolución de datos de los usuarios en esta página. Cada vez que el 
usuario se presiona un botón, vamos a añadir 1 al valor de marihuana almacenadas. La forma 
de hacerlo sería la siguiente:

protected void Page_Load(object sender, EventArgs e)
{
    if(IsPostBack == true)
    {
        if (ViewState["number"] != null) //Lets retrieve, increase and store again
        {
            ViewState["number"] = Convert.ToInt32(ViewState["number"]) + 1;
        }
        else //First postback, lets store the info
        {
            ViewState["number"] = 1;
        }

        Label1.Text = ViewState["number"].ToString();
    }
}
Al ejecutar la página y pulsa el botón para hacer una devolución de datos, la web nosmostrará las devoluciones de datos está haciendo hasta ahora que se está almacenando en el estado de vista:

client side
El estado de vista está habilitado por defecto, pero podemos deshabilitar estableciendo la propiedad EnableViewState para cada control en la web en false. Esto reduce el tiempo de procesamiento del servidor y disminuye el tamaño de la página.


Control del Estado

Ahora sabemos lo que es un estado de vista es, y también sabemos que podemos desactivar el estado de vista de los controles en la página. Pero imagino que si estamos desarrollando un control personalizado y el interior están el uso de ViewState para almacenar alguna información, pero el usuario del control se puede desactivar el estado de vista de nuestro control. Para evitar este problema, podemos tener un comportamiento similar al estado de vista que no puede ser desactivado por los usuarios de control y se llama ControlState. Los estados de control se encuentra dentro de los controles personalizados y funcionan igual que funciona viewstate.

Para utilizar el estado del control en un control personalizado, tenemos que reemplazar el método OnInit y llame al método RegisterRequiresControlState durante la inicialización. Entonces tenemos que reemplazar los métodos SaveControlState y LoadControlState.

Campos ocultos

Campo oculto son los controles previstos por el ASP.NET y y permiten almacenar información en ellos. La única restricción es que en los campos ocultos, mantendrán la información cuando el post HTTP se envía, es decir, hace clic en el botón. No va a funcionar con HTTP gey. Vamos a hacer el mismo ejercicio de hacer el seguimiento de las devoluciones de datos utilizando HiddenFields ahora.
(Nota: ViewState también utiliza campo oculto por debajo.)

//Store in Hidden Field -----------------------------------------------------------
int newVal = Convert.ToInt32(HiddenField1.Value) + 1; //Hidden field default value was 0
HiddenField1.Value = newVal.ToString();
Label2.Text = HiddenField1.Value;
Al ejecutar la página y pulsa el botón para hacer una devolución de datos, la web nos mostrará las devoluciones de datos está haciendo hasta ahora que se está almacenando en HiddenFields (Ver código para más detalles).

Galletitas

Hay situaciones en que tenemos que almacenar los datos entre las peticiones de páginas. Hasta ahora, las técnicas que hemos discutido almacenan los datos de las solicitudes de páginas individuales. Ahora nos centraremos en las técnicas que almacenan información entre solicitudes de páginas.

Las cookies son pequeñas piezas de información que pueden ser almacenados en un archivo de texto en el ordenador del usuario. La información se puede acceder por el servidor y se puede utilizar para almacenar información que se requiere entre las visitas de página y entre las múltiples visitas en la misma página por parte del usuario. Vamos a hacer el mismo ejercicio de hacer el seguimiento de la devolución de datos mediante el uso de cookies.

int postbacks = 0;
if (Request.Cookies["number"] != null) //Lets retrieve, increase and store again
{
    postbacks = Convert.ToInt32(Request.Cookies["number"].Value) + 1;
}
else //First postback, lets store the info
{
    postbacks = 1;
}
Response.Cookies["number"].Value = postbacks.ToString();

Label3.Text = Response.Cookies["number"].Value;

No podemos hacer un seguimiento de las devoluciones de datos que utilizan las cookies como cookies permaneceran en la máquina del usuario, por lo que en esencia estamos ante el número de veces el usuario ACCEDE en su página hasta el momento desde el comienzo.

Al ejecutar la página y pulsa el botón para hacer una devolución de datos, la web nos mostrará las devoluciones de datos que se han hecho hasta ahora, que está siendo almacenada en Cookies (véase el código para más detalles). Las cookies pueden tener varios parámetros como el tiempo que son válidas y cuándo deben caducar. Estos parámetros pueden ser manipulados como:

Response.Cookies["number"].Expires = DateTime.Now.AddDays(1);


Esta cookie expira después de 1 día de su creación.

Cadenas de consulta

Las cadenas de consulta se utilizan para almacenar las variables que identifican páginas específicas, tales como términos de búsqueda o números de página. Una cadena de consulta es la información que se anexa al final de la URL de la página. Se pueden utilizar para almacenar / pasar información de una página a otra e incluso a la misma página. Vamos a trabajar sobre el almacenamiento de la información de devolución de datos en cadenas de consulta ahora:

//GetDataItem from querystring
if (Request.QueryString["number"] != null) //Lets retrieve, increase and store again
{
    Label4.Text = Request.QueryString["number"];
}

//set in query string
int postbacks = 0;

if (Request.QueryString["number"] != null) //Lets retrieve, increase and store again
{
    postbacks = Convert.ToInt32(Request.QueryString["number"]) + 1;
}
else //First postback, lets store the info
{
    postbacks = 1;
}

Response.Redirect("default.aspx?number=" + postbacks);
Una cosa a notar aquí es que no hay manera de almacenar la información de devolución de datos en la cadena de consulta que se envía con la misma página. La razón es que la cadena de consulta crea una nueva dirección URL cada vez y será una nueva solicitud cada vez que utilice cadenas de consulta. Así que ahora, esencialmente hacemos seguimiento al número de clics aquí. La idea detrás de la cadena de consulta es pasar pequeña información a OTRAS páginas que pueden ser utilizados para llenar la información en esa página.

NOTA: El uso de cookies y QueryString aquí son sólo para propósitos de demostración. En escenarios reales, nunca debe ser usado para almacenar información necesaria para la misma página. Las cadenas de consulta se debe utilizar para almacenar la información de las visitas de varias páginas. Las cookies se utilizan para almacenar información entre múltiples visitas a nuestra página web desde la misma computadora.

Estado de la aplicación

ASP.NET permite guardar valores utilizando el estado de la aplicación. Un mecanismo de almacenamiento global que sea accesible desde todas las páginas de la aplicación web. El estado de aplicación se almacena en la Solicitud de clave / valor del diccionario. Esta información también estará disponible para todos los usuarios de la web. En caso de que necesitemos información específica del usuario, entonces es mejor usar sessionState.

ASP.NET proporciona tres eventos que le permiten inicializar las variables de aplicación (liberando recursos cuando se cierra la aplicación) y responder a los errores de aplicación:


  • Application_Start: Se produce cuando se inicia la aplicación. Este es el lugar perfecto para inicializar las variables de la aplicación.
  • Application_End: Se produce cuando una aplicación se cierra. Utilice esta aplicación a los recursos libres y realizar el registro.
  • Application_Error: Se produce cuando se produce un error no controlado. Use esto para realizar el registro de errores.
Vamos ahora a almacenar la información de las devoluciones de datos en el estado de la aplicación:

//global.asax
void Application_Start(object sender, EventArgs e)
{
    Application["number"] = 0;
}

//In web pages
Application.Lock();
Application["number"] = Convert.ToInt32(Application["number"]) + 1;
Application.UnLock();

Label5.Text = Application["number"].ToString();
Al ejecutar la página y pulsa el botón para hacer una devolución de datos, la web nos mostrará las devoluciones de datos está haciendo hasta ahora que se está almacenando en ApplicationState. Podemos utilizar este objeto para realizar un seguimiento de los clics por todos los usuarios en todo el sitio web (véase el código para más detalles).

Estado de la sesión

Como estado de la aplicación, esta información también está en un almacenamiento global que sea accesible desde todas las páginas de la aplicación web. El estado de sesión se almacena en el diccionario SessionKey / valor. Esta información estará disponible para el usuario actual, es decir, la sesión, actual.

//global.asax
void Session_Start(object sender, EventArgs e)
{
    // Code that runs when a new session is started
    Session["number"] = 0;
}

// Web forms
Session["number"] = Convert.ToInt32(Session["number"]) + 1;

Label6.Text = Session["number"].ToString();
Al ejecutar la página y pulsa el botón para hacer una devolución de datos, la web nos mostrará las devoluciones de datos está haciendo hasta ahora que se está almacenando en SessionState. Podemos utilizar este objeto para realizar un seguimiento de clics el usuario actual, es decir, que es propietaria de la sesión para el sitio web completo (véase el código para más detalles).

Ventajas de la administración de estados del lado del cliente

  • Mayor escalabilidad
  • Soporte para múltiples navegadores
Ventajas de la administración de estados del lado del Servidor
  • Mayor seguridad
  • Reducción del ancho de banda
Puntos de interés Este pequeño documento se ha creado para conocer un poco de material de revisión sobre la gestión de estados. Pensé que dará a conocer en CodeProject para que algunos principiantes puedan encontrar algo útil en ella. En resumen las técnicas de gestión de estados son: • Del lado del cliente la administración del estado debe ser usado cuando Identificación escalabilidad requerida. • El lado del servidor de gestión del Estado debe ser utilizada cuando se requiere seguridad de los datos. • Página por defecto a nivel estatal técnica de gestión utilizado por ASP.NET es ViewState. • Podemos almacenar información personalizada en ViewState. • Controles personalizados ControlState utilizar para almacenar la información. • Campo oculto también se puede utilizar para almacenar información para la misma página. • Las cookies se pueden utilizar para la información que se requiere en múltiples visitas desde el mismo ordenador. • Cadena de consulta se puede utilizar para pasar información de una página a otra. • ApplicationState se debe utilizar para almacenar información que debería ser accesible desde todas las páginas web y para todos los usuarios. • SessionState debe utilizarse cuando la información debe estar disponible en todas las páginas web, pero para el usuario actual.

Agradecimientos: Rahul Rajat Singh y CodeProject




viernes, 17 de febrero de 2012

EVITANDO Y EXPLOTANDO LOS BACHES DE JAVASCRIPT


JavaScript es un lenguaje Gestalt.

Uno de los sentimientos hacia JavaScript que voltea entre la elegancia y el asco, sin tránsito por estados intermedios.

La clave para ver JavaScript tan elegante es la comprensión de sus defectos, y saber cómo evitar, evitar o incluso explotarlos.

Para entender el uso de los terminos evitar / corregir / explotar favor leer el libro de: Doug Crockford - Javascript: The Good Parts.


Doug tiene una toma un poco diferente y más elaborada de las partes malas y partes horribles, así que estoy compartiendo mi punto de vista sobre los cuatro temas que me han causado más dolores de cabeza en el pasado:

  • Cómo solucionar ámbito de bloque roto con With;
  • Los cuatro (! no tres) significados de esto;
  • La promoción de argumentos a una matriz; y
  • Evitando truthiness.
Cuando chocan los baches: var frente a with

Ámbito de un bloque léxico en JavaScript está roto, y piense en el uso de with considerada de forma pobre, es una buena solución a este problema.

En la mayoría de lenguajes de corchetes, los bloques delimitan el alcance léxico. Por ejemplo, en C o Java:

{ 
    int i = 13 ;
    { 
       int i = 42 ; 
       print(i) ;
    }
    print(i) ;
 }

Pero, este código imprime 42 y luego 13.

Y en Javascript:


{
    var i = 13 ;
    {
       var i = 42 ;
       console.log(i) ;
    }
    console.log(i) ;
 }
Este código imprime 42 y 42.

En JavaScript, solo las funciones introducen un nuevo ámbito de léxico y las declaraciones de las variables están implícitamente realzadas a este nivel.

Por ejemplo:

function f ()  {
  var i = 13 ;
  {
     var i = 42 ;
     print(i);
  }
  print(i) ;
}

Es equivalente a:


function f () {
  var i ;
  i = 13 ;
  {
     i = 42 ;
     print(i) ;
  }
  print(i) ;
}
Aparte: elevación bajo el capó

JavaScript lleva la elevación a los extremos.

El siguiente programa - una referencia única para x - provoca un error de referencia:


 x ; // ReferenceError: x is undefined
pero el siguiente programa está bien, porque se declaró var x:


if (false) {
   var x ;
 }
 x ; // No problem! x is declared in this scope.
Por extensión, debe ser el caso (y es) que el siguiente también es legal:


x ; // No problem! x is declared in this scope.
 if (false) {
   var x ;
 }
Función de elevación

La historia de la función de elevación es más desordenado.

El siguiente código funciona:


console.log(fact(3)) ;

 function fact(n) {
  return (n == 0) ? 1 : n*fact(n-1) ;
 }
porque la definición de hecho es izado a la parte superior del bloque.

Así, el siguiente también funciona:

 {
   console.log(fact(3)) ;
   { 
     function fact(n) {
       return (n == 0) ? 1 : n*fact(n-1) ;
     }
   }
 }
Pero, el siguiente falla.

 if (false) {
   function fact(n) {
    return (n == 0) ? 1 : n*fact(n-1) ;
   }
 }
en la mayoría de las implementaciones de JavaScript.

Las declaraciones de variables son levantados fuera de los condicionales.

Las delaraciones de función no lo son.

La fijación de bloque con el ámbito with

Para restaurar el alcance del bloque en JavaScript, trate de usar with con objetos explícitos, por ejemplo:

{ 
   var i = 13 ;
   with ({i: 42}) {
     console.log(i) ; // prints 42
   }
   console.log(i) ; // prints 13
}
Debido a que el objeto se declara explícitamente, que no intefere con el análisis estático del código, y es igualmente claro para el razonamiento humano.

Este es el único uso justificado de with.

Dave Herman de Mozilla aconseja que, la forma correcta de manejar esta situación es una función de aplicación inmediata anónima:

 {
    var i = 13 ;
    (function () { 
       var i = 42 ;
       console.log(i) ;  // prints 42
    })() ; 
    console.log(i) ; // prints 13
 }
Para la programació funcional está de acuerdo con Dave, pero debería ser más estético.

¿Qué significa this?

El significado de this depende de cómo la función actual fue declarada:

  • Directamente: f(...);
  • Indirectamente: f.call(this,...) o f.apply(this,array);
  • Como un metodo: f.call(this,...) o f.apply(this,array);
  • Como un constructor: new f(...).
Llamada directamente.

Llama directamente, this se enlaza con el objeto de ventana de nivel superior.

Dado que las variables globales son en realidad campos de este objeto, esto modifica el namespace global:

 function f () {
   this.x = 3 ;
 }
 f() ;
 alert(x) ; // alert(3)
Pero, ¿qué pasa con nodejs, donde no hay objeto de la ventana?

Ejecute este código como un experimento:

function f() {
  this.x = 10 ;
  console.log(this) ;
  console.log(this.x) ;
}

f() ;

console.log(x) ;
Esto imprime:

{}
10
10
Claramente, por defecto this que en nodejs no es un objeto vacío ordinario.

Como era de esperar, este objeto conserva sus poderes, incluso si se las devuelve:

function global() {
  return this ;
}

(global()).y = 20 ;

console.log(y) ; // prints 20
Llamado indirectamente

El comportamiento más extraño (y menudo pasado por alto) con respecto a esto viene de llamar a una función directa, y tratar de definir this con la fuerza f.call y f.apply.

Si un objeto se presenta como el primer argumento, entonces el objeto se convierte en this.

Pero, si un átomo como un número, un booleano o una cadena se pasa, this no está ligado a ese valor.

En cambio, this se une a un "átomo objetivado" - un objeto que se comporta como el tipo de átomo.

Pruebe esto en nodejs o Firebug:

function f () { return this ; }

 var myTrue = f.call(true) ;
 console.log(myTrue) ;             // prints {}
 console.log(myTrue.constructor) ; // prints [Function: Boolean] 
 console.log(typeof myTrue) ;      // prints "object"

 var myBar = f.call('bar') ;
 console.log(myBar) ;             // prints {'0': 'b','1': 'a','2': 'r'}
 console.log(myBar.constructor) ; // prints [Function: String]
 console.log(myBar.toString()) ;  // prints bar
 console.log(typeof myBar) ;      // prints "object"

 var myThree = f.call(3) ;
 console.log(myThree) ;             // prints {}
 console.log(myThree.constructor) ; // prints [Function: Number]
 console.log(myThree.valueOf()) ;   // prints 3
 console.log(typeof myThree) ;      // prints "object"
Fascinado, ¿eh?

Llamado como un método

Cuando se invoca como un método - o.f () - una función recibe el objeto o como this.

Hay dos situaciones en las que los métodos conducen a problemas: funciones parcializadas o anidadas y los métodos de primera clase.

Es fácil olvidar que cuando se anidan las funciones, la función interna recibe su propio this, aun cuando this no tenga sentido.

 o.a = 3 ;
 o.b = 4 ;
 o.c = 5 ;

 o.generateValidator = function () {
   return function () {
     if (this.a*this.a + this.b*this.b != this.c*this.c)
       throw Error("invalid right triangle") ;
   } ;
 }
La forma de evitar este problema de alcance es declarar that:

 o.a = 3 ;
 o.b = 4 ;
 o.c = 5 ;

 o.generateValidator = function () {
   var that = this ;
   return function () {
     if (that.a*that.a + that.b*that.b != that.c*that.c)
       throw Error("invalid right triangle") ;
   } ;
 }
Alguna vez me picó user accidentalmente un método en una definición de primera clase:


 engine.setTickHandler(ship.ontick) ;
ship.ontick es un método, pero una vez que se invoca, este no estará obligado a enviarlo.

Con toda probabilidad, quedará vinculado a global().

Mi solución a este problema se inspira en la noción de η-expansión del cálculo lambda:

function eta (that,methodName) {
  var f = that[methodName] ;
  return function () {
    return f.apply(that,arguments) ;
  }
}
Entonces, en lugar de escribir object.methodName para pasar un método como una función de primera clase, se usa(objeto, 'methodName').

Llamado como un constructor

Cuando una función se llama como un constructor, el valor de this es el objeto recién creado.

La omisión de new por accidente destroza el namespace global.

Si las variables globales están mutando sin explicación, trate de guardar constructores with:

 this == global() && error() ;
Fijación de los argumentos

La capacidad de aceptar un número arbitrario de argumentos en JavaScript es con frecuencia útil.

En JavaScript, los argumentos que se pasan a una función están implícitamente ligados a los argumentos de variable.

Este objeto se parece y actúa sobre todo como una matriz, pero es sólo un objeto que pasa a tener índices numéricos, además de un campo llamado longitud.

La mayoría de los programadores no descubren esto hasta que los muerde.

Por ejemplo, con:

function f() {
  return arguments;
}
Una llamada a f(1,2,3), retorna:

{ '0': 1,
  '1': 2,
  '2': 3  }
Mejor que [ 1, 2, 3 ].

Los métodos habituales-como indexOf - están desaparecidos.

Hay un par de maneras para promover argumentos para una matriz real. El método adoptado por muchos frameworks de JavaScript es utilizar el método de corte:

 function f() {
   arguments = Array.prototype.slice.call(arguments) ;
   return arguments ;
 }
En implementaciones no IE de JavaScript, es posible volver a asignar directamente al objeto prototipo para el prototipo de las matrices:

 function f() {
   arguments.__proto__ = Array.prototype ;
   return arguments ;
 }

Evitando truthiness
Hay poco de verdad a la verdad en JavaScript.

Muchos valores se califican como falso en un condicional.


               false0undefinednullNaN; y ''.

A primera vista, parece que == entiende esto, teniendo en cuenta que:

 0 == false

los rendimientos son reales.

Sin embargo, null == false y'' == false son falsas.

Los operadores == y != Intento de coacción operandos de diferentes tipos.

Por ejemplo, "\t\t '== false, sin embargo, '\t\t' es verdadero en un condicional.

En teoría, es mejor utilizar === y !==, Que no trate de coerción.

Sin embargo, todavía hay un valor x tal que x != x and x !== X.

Ese valor es NaN.

Si las cuestiones de igualdad, es necesario utilizar una función auxiliar:

function equal(a,b) {
  if (a === b)
    return true ;
  if (isNaN(a) && isNaN(b))
    return true ;
  return false
}
Traducción de la pagina: http://matt.might.net/articles/javascript-warts/



USANDO C# COMO LENGUAJE DE SCRIPT


Clift Norris escribió un inteligente csrun.bat poco de archivo por lotes hace varios años. Si usted tiene un programa de C# foo.cs, puede escribir csrun  foo.cs para compilar y ejecutar el programa.

El archivo por lotes no hace mucho, pero puede cambiar su forma de pensar acerca de un programa en C#. El código C# todavía está compilado, pero desde el paso de compilación está oculto, se siente más como un lenguaje interpretado.

Cuando alguien dice que les gusta los lenguajes interpretados, tal vez lo que realmente quieren decir es que disfruto correr código de manera rápida sin la sobrecarga de la puesta en marcha de un IDE, compilar el código, navegar hasta el directorio que contiene el archivo ejecutable compilado, etc. Esto no tiene nada que ver con si un lenguaje está compilado o interpretado.

@echo off
REM : Compile and run a C# source file.
REM : The C# compiler (csc.exe) must be in your PATH.
REM : The command line argument is expected to be something like foo.cs

if "%1"=="" goto USAGE

csc.exe /nologo /out:%1.exe  %1
if ERRORLEVEL 1 goto EXIT

%1.exe %2  %3  %4  %5
goto EXIT

:USAGE
echo You must specify an argument representing the C# file you want to run.

:EXIT

Este archivo por lotes no establece referencias, habria necesidad de modificarlo si desea hacer referencia a un ensamblado.

Actualización: CsharpRepl es un REPL (read-evaluate-print-loop) que te permite escribir en C# en la línea de comandos como lo haría la mayoría de lenguajes de secuencias de comandos. CsharpRepl es parte de Mono y las works cross-platform. Gracias a MikeG en los comentarios.

martes, 14 de febrero de 2012

¿QUE NIVEL DE PROGRAMADOR ERES TU?

Según DanielBMarkham: 'Todo el mundo está hablando de cómo la programación es la habilidad que todos van a necesitar. [Salvo aquellas personas que puedan sentir que la mayor parte de programación podría convertirse en un asistente como herramientas. Inserte larga discusión acerca de la IA fuerte.]


Pero, que es un programador? Es el tipo que creó su propio servidor web Apache un programador? ¿Qué te parece el tipo que creó una compleja hoja de cálculo de Excel? El tipo que hizo su propio nivel de juego de rol? jugadores de Minecraft? Cuando decimos "Todo el mundo va a tener que saber programación" qué es, exactamente, qué significa eso?

Necesitamos un conjunto de niveles de programación.


  • Nivel 1, el Lea -y- Digite: Este es el tipo que se puede leer cómo configurar un servidor web, vaya a través de las direcciones, y obtener la cosa trabajando - siempre y cuando nada salga mal. Él sabe cómo usar un editor de texto y los fundamentos de los archivos del sistema que esta usando. También ha de tener cierta habilidad para mover y manipular los archivos, como el uso de zip o FTP. Él puede usar símbolos abstractos de una forma estructurada, explicó así además de tener las habilidades del sistema.
  • Nivel 2, El Script Kiddie: Puede escribir un guión lineal para indicar al ordenador que haga algo. Capaz de aprender y de usarsímbolos por sí mismo. Debe ser capaz de crear un script para una solución muy simple para hacer algo útil para sí mismo en basho VB si se les da el tiempo suficiente e instrucciones por escrito.
  • Nivel 3, El Bibliotecario: Se trata de alguien que ha aprendido algunas librerías o APIs y tiene la capacidad para aprender más. Él sabe que para cualquier lenguaje de scripting que está utilizando, tiene que ser capaz de conectar a las bibliotecas a la misma. Situviera que hacerlo, es capaz de leer los manuales y hacerlo por su propia cuenta. También es capaz de buscar las bibliotecas en la red y utilizarlos. Él es capaz de encontrar y, a veces incluso crear sus propios símbolos para su trabajo. (Se puede escribir una función o declarar y utilizar una estructura). La mayoría de administradores de sistemas empezando caen por aquí. También los usuarios de sistemas novatos de avanzados macro sistemas, como Excel.
  • Nivel 4, El Chico Object-Dot-Method: A partir de aprender de acoplamiento y la cohesión, la persona comienza a organizar susscripts en objetos con los miembros públicos y privados y los métodos. Se trata de su milagro de seis semanas de programación, la introducción al Programador de .NET. Se supone que debe jugar con los asistentes, conocer las bibliotecas, y luego construir algo que cabe dentro de las clases que le dan a él. Si no está utilizando las clases, puede crear sus propios módulos de código o archivos. Algunos usuarios avanzados de sistemas de scripting llegar hasta aquí. Hay una gran cantidad de tiendas avanzados de Excel con los intermediarios de valores que se han codificado básicamente su propia aplicación de VBA sin realmente saber que están en este nivel.
  • Nivel 5, el Hombre Paradigma  Múltiple: Una vez que son capaces de gatear, te metes en todo tipo de problemas. Un paso común al lado de la escalera de programación es ser capaz de trabajar en múltiples paradigmas. Puede codificar en C #, pero usted también sabe cómo crear tablas y escribir SQL. Usted puede escribir C aceptable, pero también puede trabajar con JavaScript y HTML. Usted no es un maestro de cualquiera de habilidad, pero tú eres capaz de entender diferentes formas de mirar el mismo problema. Usted sabe que ha llegado a este paso cuando se deja de decir "Podemos solucionar este problema en X" para cada pregunta, donde X es el idioma que primero entendió realmente.
  • Nivel 6, Aprendiz de Arquitecto: Así es como usted realmente comienza a involucrarse en el arte de la programación. Usted comienza a comprender en profundidad las bibliotecas y las API que se utilizan todos los días para trabajar. No es que usted haya aprendido de memoria. Es que usted entienda los diferentes patrones de los arquitectos utilizan para lograr sus objetivos. ¿Quieres dibujar en Win32? Probablemente va a necesitar un identificador de algún recurso GDI. Tal vez unos pocos. Usted sabe que un manejador es un hash UInt32 en una tabla del sistema en alguna parte - un paradigma común para Win32. ¿Quieres añadir tu propia biblioteca de jQuery? Hay un formato para cualquier nueva biblioteca. Ya sabes que funciona y puede explicar por qué funciona de esa manera. A medida que trabaje las herramientas, usted comienza a empezar a pensar como la gente que pone las herramientas en conjunto. También comienzan a aprender cómo refactorizar su código hasta el punto de rocas. Usted comienza a aprender lo que la calidad del código parece. Empiezas a entender.
  • Nivel 7, el Astronauta Arquitecto: Llega el momento para que usted pueda construir su propia API, plataforma, o una biblioteca. Tal vez es un proyecto grande que requiere. Tal vez usted sólo quiere llevar su nuevo conocimiento para dar una vuelta. Mientras que su sistema está diseñado para resolver un problema del mundo real para los usuarios, su público objetivo programadores de mantenimiento en el nivel 5. En esta fase usted está profundamente en la Banda de los Cuatro, OOAD, plantillas, y mejores prácticas. La mayoría de nosotros hacemos un desastre las primeras veces en esta área, sin entender que es más fácil hacer algo más complejo de lo que es hacer lo simple. Durante esta fase, que puede prolongarse durante mucho tiempo, continuamente confunden la creación de bibliotecas más complejas y flexibles con la construcción de sistemas de calidad más altos. Muchas veces (y con suerte algunos otros miembros de su equipo) entiende lo que estás haciendo, pero para traer a alguien desde afuera podría llevar meses de dominio específico de la formación. Personal de apoyo no tienen ninguna oportunidad - la mayoría de todas las llamadas de soporte terminan en el escritorio del equipo.
  • Nivel 8, el Hombre Meta: En algún momento, con suerte, te das cuenta de que gran parte de la complejidad que ha puesto en arquitecturas y marcos puede ser mejordescrito como un lenguaje de dominio específico. Su público objetivo se convierte enprogramadores de nivel 4. Sí, la complejidad de codificación es mayor, pero el código en sí es mucho más corto y el DSL abre su código a ir todo tipo de lugares. En resumen, usted se convierte en el autor de los lenguajes de script que los programadores novatos usan. Sus sistemas están abiertos a los principiantes a través de secuencias de comandos y asistentes fáciles de usar. Usted puede aprender esta habilidad por separado, pero la mayoría de las veces después de muchas arquitecturas complejas de gran tamaño, el tiempo que factorizar el camino a una conexión ADSL. Y luego de nuevo. Y una vez más. Muy pronto usted comienza a ver el patrón: los problemas bien entendidos se prestan a DSL.
  • Nivel 9, Nirvana Funcional: El paso a la ronda de bonos, se inicia realmente aprender a programar mediante el aprendizaje de programación funcional. Su público objetivo son los programadores de mantenimiento en el nivel 3. FP te hace un mejor programador imperativo, le ayuda a expulsar a DSL más rápido, y puede reducir enormemente la cantidad de código que se necesita para resolver un problema. También puede ser altamente escalable. En algunos lenguajes funcionales puede incluso intercambio en caliente, mientras que el sistema está funcionando. Al igual que con todos estos niveles avanzados de otro modo, en algún momento usted comienza a sentirse conseguir un poco de nirvana fluyendo. FP debe ser la respuesta para todo! En ese momento, sin embargo, que haya sido a través de varias de estas etapas de euforia, por lo que éste no es tan malo como el resto. Los entromete en el mundo real. PF, aunque menos errores y muchas veces mucho más rápido, puede ser muy difícil de código. Los programadores tienen que llevar a un enlazador vueltas en su cabeza la mayor parte del tiempo - que tienen que hacer un seguimiento de un montón de símbolos. Con el tiempo te das cuenta de FP también está a un paso en el camino, muy similar a desarrollo OOAD.
  • Nivel 10, Diseñador de Lenguaje Orientado: Ud ve toda la programación como la creación de nuevos lenguajes de programación. La única diferencia es lo que la nueva lengua se supone que debe hacer. Usted entiende cómo crear lenguajes orientados a objetos, los lenguajes funcionales y sencillos lenguajes de script sin tipo. Sabes que cuando cada uno es apropiado. Su público objetivo son los programadores de mantenimiento en el nivel 2. Te sientas en cada proyecto y preguntas "¿Qué tipo de lenguaje es el que necesitamos aquí?" Al final de su proyecto usted tiene una buena herramienta que tanto resuelve el problema, y es fácil de entender y extensible por los programadores de nivel de entrada, dándole la libertad al pasar a otras cosas. Usted puede hacer fácilmente el caso de que la mayoría de los proyectos no requieren un lenguaje orientados a los diseñadores, pero eso es otra historia para otro día.
  • El nivel misterioso, científico de la computación: Esto es el pináculo de la programacióno no existe en el espectro en absoluto, dependiendo de su perspectiva. Esta es la ciencia de la programación. Un montón de cosas interesantes aquí. Su público objetivoson todos los demás en el universo. Pero el foco no está en hacer cosas que la gentequiere, es avanzar en el estado de los conocimientos. Debido a que los niveles decapacidad de la mayoría de la programación son para que la gente-la base, estos chicos viven en un mundo diferente, pero necesario. ¿Qué tan fácil es cruzar de ida y vuelta entre los dos mundos? No tengo idea.
Usted podría construir muchos caminos alternativos aquí - por ejemplo, la programación funcional podría venir primero para usted, y entonces POO más adelante. Ustedtambién podría poner en la construcción de su propio compilador - no era que la diversión en la universidad? O el montaje. ¿O realmente entender la teoría de conjuntosy la forma en que se aplica a ambas bases de datos y estructuras de datos de programación. O escribir su primera herramienta de programación de verdad.

Pero este es el camino que veo la mayoría de los programadores de seguir.

ADD: Por favor lea (very short) follow-up para otro vistazo a esto.



TOP 5: FUNDAMENTOS DE GESTIÓN DE MEMORIA EN .NET


I ¿Qué sucede con los objetos pequeños?

Objetos pequeños en .NET. Se aplican sobre las pilas de objetos pequeños (SOH). Hay tres de ellas: la generación 0, Generación 1 yGeneración 2. Los objetos se mueven a estas generaciones en función de su edad.

Los nuevos objetos se colocan en GEN 0. Cuando Gen 0 se llena, el Colector .NET basura (GC) se ejecuta, la eliminación deobjetos que ya no son necesarios y mover todo lo demás hasta Gen 1. Si Gen 1 se llena de la GC se ejecuta de nuevo, pero también se mueve objetos en Gen 1 hasta Gen 2.

Un análisis completo con GC ocurre cuando Gen 2 se llena. Esto borra los objetos innecesarios Gen 2, Gen 1 se mueve objetos a Gen 2, luego se mueve Gen 0 objetos a Gen 1, y finalmente se borra todo lo que no se hace referencia. Después de cada ejecución de GC, los montones de afectados se compactan, para mantener la memoria, que todavía está en uso en conjunto.

Este enfoque generacional mantiene las cosas funcionando de manera eficiente - el proceso que consume tiempo de compactación se produce sólo cuando sea absolutamente necesario.

Recuerde: si usted ve una alta proporción de la memoria en Gen 2, es un indicador de la memoria se lleva a cabo a durante mucho tiempo, y puede ser una señal de que tienes un problema de memoria. Aquí es donde una herramienta de perfiles de memoria, tales como perfiles de memoria ANTS, puede venir muy bien.

II ¿Qué sucede con los objetos más grandes?

Objetos de más de 85 KB se asignan en el montón de objetos grandes (LOH). No se compactan, debido a la sobrecarga de copiar grandes trozos de memoria. Cuando un GC completa se lleva a cabo, los rangos de direcciones de los objetos LOH que no estén en uso se registran en una tabla de asignación de espacio libre en su lugar.

Cuando un nuevo objeto se le asigna, la tabla de espacio libre se comprueba para un rango de direcciones con capacidad suficiente para el objeto. Si existe, el objeto se asigna allí, si no, es asignado en el espacio libre de al lado.

Dado que los objetos es poco probable que el tamaño exacto de un rango de direcciones vacía, pequeños trozos de la memoria casi siempre se queda entre los objetos, lo que resulta en la fragmentación. Si estos trozos son menos de 85 KB, no hay posibilidad de reutilización en absoluto. En consecuencia, a medida que aumenta la demanda de asignación, nuevos segmentos están reservados a pesar de que el espacio fragmentado todavía está disponible.

Además, cuando un objeto grande debe ser asignada, .NET tiende a añadir el objeto al final de todos modos, en lugar de ejecutar una costosa Gen 2 GC. Esto es bueno para el rendimiento, pero una causa importante de la fragmentación de memoria.

III. El recolector de basura se puede ejecutar en diferentes modos para optimizar el rendimiento

.NET resuelve el trade-off entre el desempeño y la eficiencia de almacenamiento dinámico, proporcionando múltiples modos para el GC.

El modo de estación de trabajo da respuesta máxima para el usuario y reduce las pausas debido a GC. Puede funcionar como "concurrente" o "no concurrente", refiriéndose a las conversaciones de la GC se ejecuta en. El valor predeterminado es concurrente, que utiliza un subproceso independiente para la GC para que la aplicación puede continuar la ejecución, mientras que GC se ejecuta.

El modo de servidor ofrece el máximo rendimiento, escalabilidad y rendimiento para entornos de servidores. Tamaño del segmento y los umbrales de generación son mucho mayores en el modo de servidor de que el modo de estación de trabajo, lo que refleja las mayores exigencias impuestas a los servidores.

El modo de servidor se ejecuta la recolección de basura en forma paralela en varios subprocesos, la asignación de un SOH separado y LOH para cada procesador lógico para evitar que los hilos de interferir unos con otros.

El framework de. NET proporciona un mecanismo de referencias cruzadas para que los objetos todavía pueden hacer referencia a otra a través de los montones. Sin embargo, como respuesta de las aplicaciones no es un objetivo directo de modo de servidor, todos los hilos de la aplicación se suspende durante la duración de la GC.

IV. Las referencias débiles ofrecen un compromiso entre el rendimiento y la eficiencia de la memoria

Las referencias débiles a objetos es una fuente alternativa de las raíces de GC, lo que le permite mantener objetos, mientras que lo que les permite ser recogida si el GC lo necesita. Son un compromiso entre el rendimiento del código y la eficiencia de la memoria, la creación de un objeto tiene tiempo de CPU, pero mantenerlo cargado toma la memoria.

Las referencias débiles son particularmente adecuadas para estructuras de datos de gran tamaño. Por ejemplo, imagine que tiene una aplicación que permite a los usuarios navegar a través de estructuras de datos de gran tamaño, algunas de las cuales podrían volver. Usted puede convertir cualquier  referencia fuertes a las estructuras que han navegado en referencias débiles. Si los usuarios vuelven a estas estructuras, que están disponibles, pero si no la GC puede reclamar la memoria si es necesario.

V. El fijado de objetos puede crear referencias para pasar entre el código administrado y no administrado

. NET utiliza una estructura llamada GCHandle para realizar un seguimiento de los objetos del montón. GCHandle puede ser usado para pasar referencias de objetos entre dominios administrados y no administrados, y .NET mantiene una tabla de GCHandles para lograrlo. Hay cuatro tipos de GCHandle, entre ellos articulados, que se utiliza para fijar un objeto en una dirección específica en la memoria.

El problema principal con el fijado de objeto es que puede provocar la fragmentación SOH. Si un objeto se fija durante un GC entonces, por definición, no puede ser reubicado. Dependiendo de cómo se use el fijado, se puede reducir la eficiencia de la compactación, dejando huecos en la pila. La mejor política para evitar esto es para fijarlo por un tiempo muy corto y luego soltarlo.

Los Top 5 fundamentos de la gestión de memoria .NET de Ricky  han sido cosechados en un eBook de Chris Farrell y Nick Harrison, bajo la capa de gestión de memoria .NET.

APRENDA HTML5 EN 5 MINUTOS

No hay duda, HTML5 es un tema candente para los desarrolladores. Si usted necesita un curso acelerado para comprender rápidamente los fundamentos de la funcionalidad de HTML5, estás en el lugar correcto.

Voy a cubrir el nuevo marcado semántico, el Canvas para el dibujo y la ayuda de la animación, audio y vídeo, y cómo usar HTML5 en los navegadores más antiguos. Podría ser un poco más de cinco minutos, pero te prometo que lo haré rápido. Quédate conmigo ... que va a valer la pena!


Marcado semántico y Diseño de página

Hay una gran historia acerca de una universidad que, en la construcción de su campus, no crearon sus propios senderos. Ellos plantaron hierba y esperaron.

Un año más tarde, el césped se llevaba a cabo todos los que la gente caminaba con más frecuencia. Así que ahí es donde la universidad abrió las aceras actuales.

Tiene perfecto sentido! Las aceras estaban exactamente donde la gente realmente anduvo.

Los nuevos elementos de semantica de HTML5, se basan exactamente en la misma logica (véase la guía de diseño del W3C para "pavimentar los Cowpaths").


Los elementos semánticos describen su significado o propósito claramente en el navegador y para el desarrollador. Comparemos eso con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una división o una sección en un documento HTML, pero no nos dice nada acerca de su contenido o transmitir un significado claro. <div>

Los desarrolladores utilizan habitualmente identificadores y / o nombres de las clases con las etiquetas <div>. Esto conlleva un mayor significado a los desarrolladores, pero, por desgracia, no ayudar a los navegadores obtener el propósito de ese marcado. <div id="header">


En HTML5, hay nuevos elementos semánticamente ricos que pueden transmitir el propósito del elemento a los desarrolladores y navegadores. <header>

El W3C extraído miles de millones de páginas web existentes para descubrir las IDs y los nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se echó div1, div2, etc, aparecieron con una lista de elementos enriquecidos descriptivos que ya estaban siendo utilizados, y se convirtieron en estandares.

Éstos son algunos de los nuevos elementos semánticos en HTML5:
  • article
  • aside
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • mark
  • nav
  • section
  • time
Debido a la riqueza semántica, ud probablemente intuye lo que la mayoría de estos elementos hacen.

Pero por si acaso, aquí hay una visualización:


















Los header y footer son fáciles de entender y nav crea una navegación o la barra de menú. Puede utilizar las sections y artícles para agrupar su contenido. Finalmente, el elemento aside puede ser utilizado para el contenido secundario, por ejemplo, como una barra lateral de enlaces relacionados.

He aquí un ejemplo simple de un código que utiliza estos elementos.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman" />
            <figcaption>Jennifer Marsman</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>


Debería llamar a algunos pocos elementos nuevos en este código ... ¿Te diste cuenta el elemento hgroup, que agrupaba a las cabeceras h1 y h2? El elemento de marcado me ha permitido resaltar o marcar algún texto importante. Por último, los elementos de la figura y la figcaption especifica una figura en el contenido del contenido (como una imagen, diagrama, fotografías, fragmentos de código, etc) y me dejó asociar un título con esa figura, respectivamente. Esto es lo que la página se vería cuando se combina con un poco de CSS. (NOTA:. se ha tomado prestado este CSS del talentoso compañero de equipo Brandon Satrom).



Ahora, imagine que esta en manos de alguien realmente bueno en CSS (que no soy yo). El resultado es muy poderoso. El carácter descriptivo del HTML hace que sea muy fácil trabajar con él.

Por último, si usted está tratando de seguir a lo largo de Visual Studio, pero que se está viendo líneas onduladas por todos lados que VS no comprende los elementos de HTML5, asegúrese de que tiene Visual Studio 2010 SP1 instalado.

Luego, en el menú de Visual Studio, vaya a Herramientas, Opciones. En el panel de navegación izquierdo, expanda Editor de texto, HTML, a continuación, haga clic en Validación. En el menú de destino desplegable, seleccione HTML5. Esto le dará soporte HTML5 IntelliSense. ¡Menos mal!


Para profundizar más en los elementos semánticos, echa un vistazo a:




<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
    <script type="text/javascript">

        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // Draw blue rectangle
        ctx.fillStyle = '#0065BD';
        ctx.fillRect(0, 0, 125, 75);

        // Draw white X
        ctx.beginPath();
        ctx.lineWidth = "15";
        ctx.strokeStyle = "white";
        ctx.moveTo(0, 0);
        ctx.lineTo(125, 75);
        ctx.moveTo(125, 0);
        ctx.lineTo(0, 75);
        ctx.stroke();

    </script>
</body>
</html>

Esto es lo que el código anterior produce:



Ahora vamos a recorrer el código.

En primer lugar, creo el canvas actual y le doy una ID de "myCanvas". Si este código se visualiza en un navegador que no soporta el elemento canvas HTML5, se mostrará el mensaje "Su navegador no soporta la etiqueta canvas" en vez de dibujar la bandera.

A continuación, tengo un script. Recuerde, la etiqueta canvas sólo es un contenedor para los gráficos, usted debe usar JavaScript para llamar dibujar y hacer que los gráficos. En primer lugar, utilizo  una referencia al lienzo con la ID "myCanvas", y luego el contexto del lienzo que proporciona métodos y propiedades para la elaboración y manipulación de gráficos en el lienzo. He especificado "2D", para usar un contexto de 2 dimensiones para dibujar en la página.

Luego, dibujar el rectángulo azul. Yo uso fillStyle para especificar el color azul. Y fillRect para dibujar el rectángulo, especificando el tamaño y posición. Llamando fillRect (0, 0, 125, 75) significa: a partir de la posición (0, 0) - la parte superior izquierda esquina - dibujar un rectángulo con width = 125 height = píxeles y 75 píxeles.

Por último, dibujo la X blanca en la bandera. La primera vez que llame a BeginPath para iniciar el proceso de pintar un camino. Puedo especificar una anchura de línea lineWidth de 15 píxeles (con las conjeturas y comprobar el método de tratar los diferentes valores hasta que se parecía correcto) y un strokeStyle de "blanco" para hacer la ruta de color blanco. Luego trazar la ruta utilizando moveTo y lineTo. Estos métodos de la posición de un "cursor" para dibujar, la diferencia es que moveTo mueve el cursor sin trazar una línea y lineTo dibuja una línea en movimiento. Empiezo por pasar a la posición (0, 0) - la parte superior izquierda de la esquina - y luego trazar una línea a (125, 75) - la parte inferior derecha esquina. Luego me muevo a la posición (125, 0) - la parte superior derecha de la esquina - y trazar una línea a (0, 75) - la parte inferior izquierda esquina. Por último, el método de stroke en realidad renderiza estos strokes.


Comparativa rápida de Canvas Vs SVG

Scalable Vector Graphics (SVG) es un estándar anterior para dibujar en una ventana del navegador. Con el lanzamiento de canvas en HTML5, muchas personas se preguntan cómo se comparan.

Para mis ojos, la mayor diferencia es que utiliza la representación de canvas de modo inmediato y SVG utiliza el modo de representación retenido. Esto significa que el canvas causa representación directa de los gráficos a la pantalla. En mi código anterior, una vez que la bandera se dibuja, se olvida por el sistema y ningún estado se mantiene. Hacer un cambio requeriría un completo redibujado. En contraste, SVG retiene un modelo completo de los objetos a ser prestados. Para hacer un cambio, usted puede simplemente cambiar (por ejemplo) la posición del rectángulo, y el navegador determina la forma de volver a redibujar. Esto es menos trabajo para el desarrollador, pero también más pesado para mantener un modelo.

La posibilidad de estilo de SVG a través de CSS en adición de JavaScript es valido llamanarlo como otra consideración. Un canvas puede ser manipulado a través de JavaScript unicamente.

Aquí está una descripción de alto nivel de otras diferencias:



Canvas
SVG
Abstracción
Basado en pixeles (bitmap dinamico)
Basado en formas
Elementos
Elemento sencillo HTML
Elementos gráficos multiples los cuales se convierten en parte del Objeto Modelo del Documento (DOM)
Driver
Se modifica únicamente a través del Script
Modificado a través de Script y CSS
Modelo del Evento
La interacción con el usuario es granular (x,y)
La interacción con el usuario es abstaida (rect, path)
Desempeño
El desempeño es mejor con superficies pequeñas y/o mayores números de objetos
El desempeño es mejor con pequeños números de objetos y/o superficies grandes.



Para una comparación más detallada, quiero señalar que algunas de las sesiones (de la que se sacaron los datos para componer este cuadro fabuloso, con el permiso):

Patrick Dengler: "Pensamientos sobre cuándo usar SVG y Canvas"
Jatinder Mann: "Inmersión profunda en HTML5 Canvas"
John Bristowe: "Introducción a HTML5 Canvas"


Soporte de Audio y vídeo

Uno de los grandes rasgos en el nuevo HTML5 es la capacidad de soportar reproducción de audio y videos. Antes de HTML5, que necesita un plug-in como Silverlight o Flash para esta funcionalidad. En HTML5, es posible integrar audio y video utilizando el <audio> nuevo y etiquetas <video>.

Desde una perspectiva de codificación, el audio y video son elementos muy fáciles de usar. (Demosle una mirada más a fondo en sus atributos más abajo). Los elementos de audio y vídeo también se apoyan en todos los navegadores principales (las últimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difícil es que se necesita codecs para reproducir audio y vídeo, y apoyar a los diferentes navegadores diferentes codecs. (Para una maravillosa explicación en profundidad de los contenedores y codecs de vídeo, lea http://diveintohtml5.org/video.html.) Afortunadamente, este no es un show-tapón. El soporte para audio y video se llevó a cabo de una manera brillante, donde hay apoyo para tratar de varios formatos de archivo diferentes (el navegador intentará cada uno y luego bajar a la siguiente si no se puede jugar). Como práctica recomendada, se debe proporcionar múltiples fuentes de audio y vídeo para dar cabida a los diferentes navegadores. También puede retroceder a Silverlight o Flash. Por último, el texto entre las etiquetas de apertura y cierre (como <audio> y </ audio>) se mostrará en los navegadores que no soportan el audio o el elemento de vídeo.

Por ejemplo:

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>


Con este código, el primer navegador intentará reproducir el archivo laughter.mp3. Si no tiene los codecs adecuados para jugar, lo siguiente será tratar de reproducir el archivo laughter.ogg. Si el elemento de audio no se reconoce en absoluto por el navegador, se mostrará el texto "Su navegador no es compatible con el elemento de audio", donde el control de audio debe ser.

Una advertencia para audio y video: no hay un built-in gestión de derechos digitales (DRM) de apoyo, hay que implementarlo por ti mismo como el desarrollador. Vea este enlace de la W3C, que explica su posición. (Si usted tiene una necesidad de contenidos con DRM, también echa un vistazo a la documentación de Silverlight DRM, que puede ser una solución más fácil.)

Ahora vamos a profundizar en cada uno de estos nuevos elementos.

audio

En primer lugar, echemos un vistazo a <audio> con más detalle.

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>


Ya hemos discutido el efecto de retroceso de tratar de cada fuente hasta que encuentra uno que con suerte se pueden reproducir.

Nótese que no es un atributo controles. Esto mostrará los controles de reproducción de audio, incluyendo un botón de reproducción / pausa, el tiempo, un botón de silencio, y el volumen de los controles. En la mayoría de situaciones, es bueno para mostrar los controles de audio para el usuario; odio visitar un sitio web con sonido y ser incapaz de detener, silenciar, o gire hacia abajo. ¿No?


Los controles adquieren un aspecto diferente en distintos navegadores. Éstos son lo que parecen en Chrome (con una canción sonando). El volumen desplegable aparece abajo cuando se pasa sobre el icono de sonido en el extremo derecho.


Estos son los controles en Firefox (con una canción en pausa). Al igual que Chrome, también tiene un control de volumen pop-up (no se muestra) cuando se pasa sobre el icono de sonido en el extremo derecho.


Otros atributos divertidos en el elemento de audio incluyen:


Atributo
Valores pasivos
Descripción
Autoplay
Autoplay
Comienza a sonar el audio tan pronto como esta lista.
Controls
Controls
Muestra los controles de audio en la pagina
Loop
Loop
Hace que se repita y vuelva a sonar cada vez que termine.
Preload
Auto, metadata, none
Determina si se debe cargar el audio cuando se carga la página. El valor auto se carga el audio, los metadatos se carga sólo los metadatos asociados con el archivo de audio, y ninguno de audio no se precarga. (Este atributo se ignora si se especifica función de reproducción automática.)
Src
(cualquier url)
Especifica la url del archivo de audio a escuchar


Así que este ejemplo de código no sólo mostrar los controles de reproducción de audio, sino también iniciar la reproducción de audio inmediatamente y repetir una y otra vez en un bucle.


<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

Si ud quiere tocar el elemento <audio> en tu navegador, hay un gran "Editor Tryit" en http://w3schools.com que le permite modificar algunos ejemplos de código y ver qué pasa. O pruebe el Cómo agregar un reproductor de audio de HTML5 a su artículo del sitio.

Vídeo

Ahora, vamos a examinar el elemento <video>.



<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

Como ya comentamos anteriormente, el elemento de vídeo tiene soporte para múltiples fuentes, que se tratan en el orden y luego caen a la siguiente opción.

Como audio, vídeo tiene un atributo controls. Aquí hay una captura de pantalla de los controles de video en Internet Explorer:


Otros atributos divertidos del elemento vídeo incluyen:



Atributos
Valores Posibles
Descripción
audio
Muted
Establece el estado por defecto del audio (en la actualidad, "silenciado" es la única opción)
autoplay
autoplay
Inicia la reproducción de vídeo tan pronto como esté listo
controls
controls
Muestra los controles de reproducción de vídeo en la página
height
(valor en pixeles)
Establece la altura del reproductor de vídeo
loop
Loop
Repite el video y comienza de nuevo cada vez que se termina
poster
(some URL)
Especifica la dirección URL de una imagen para presentar el video cuando no hay datos de vídeo disponibles
preload
auto, metadata, none
Determina si se debe cargar el vídeo cuando se carga la página. El valor auto se carga el video, los metadatos se carga sólo los metadatos asociados con el archivo de vídeo, y ninguno de video no se precarga. (Este atributo se ignora si se especifica función de reproducción automática.)
src
(some URL)
Especifica la dirección URL del archivo de vídeo para jugar
width
(valor en pixeles)
Establece el ancho del reproductor de vídeo
Una vez más, para iteractuar con elemento <video> usted mismo, use el Editor de "Tryit" de http://w3schools.com que le permite modificar algunos ejemplos de código y ver qué pasa. Para aprender más acerca de video y audio, echa un vistazo a:
Desarrollar con HTML5, manteniendo el apoyo a los navegadores más antiguos Hemos hablado de un montón de nuevas funcionalidades fresco en HTML5, incluyendo los nuevos elementos semánticos, la etiqueta de tela para el dibujo y el apoyo de audio y vídeo. Usted puede pensar que esto es realmente genial, pero no puede adoptar HTML5 cuando muchos de sus usuarios no tienen compatibles con HTML5 navegadores todavía. Por no hablar de que los navegadores que HACER HTML5 support diferentes piezas de la misma, no todos de la nueva funcionalidad de HTML5 es compatible con todos los navegadores y diversas características puede implementarse de manera diferente. Pero hay una manera de utilizar las nuevas funcionalidades sin romper su sitio para los usuarios con navegadores más antiguos. Usted puede utilizar polyfills. De acuerdo con Paul Irish, un polyfill es "una cuña que imita a una futura API, que proporciona una funcionalidad de reserva para exploradores más antiguos." Un polyfill a llenar los vacíos en los navegadores antiguos que no soportan la funcionalidad de HTML5 en su sitio. Aprender a usar polyfills le permitirá utilizar HTML5 hoy sin dejar de lado los usuarios de navegadores más antiguos. Una forma de obtener el apoyo polyfill es la biblioteca JavaScript Modernizr (pero hay muchos polyfills disponible). Modernizr añade la capacidad de función de detección para que pueda comprobar específicamente para si un navegador soporta (por ejemplo) el elemento de tela y proporcionar una opción de copia de seguridad si no lo hace. Vamos a caminar a través de un ejemplo. Recuerda el ejemplo de código que he usado en la introducción de elementos semánticos y diseño de la página? Aquí está de nuevo:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman" />
            <figcaption>Jennifer Marsman</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>
Este código contiene una serie de elementos HTML5 nuevas que no son compatibles con los navegadores más antiguos. Recuerde que en Internet Explorer 9, se veía así:


Podemos utilizar las herramientas de desarrolladores de Internet Explorer para ver lo que esto se vería como en versiones anteriores de IE. En Internet Explorer, pulse F12 para acceder a las herramientas de desarrollo.

Tenga en cuenta que el modo de navegador (en la barra de menú de color gris en la parte superior) está configurado para IE9. Haga clic en el modo navegación, y desde el menú desplegable que aparece, seleccione "Internet Explorer 8" (que no tiene soporte de HTML5).
Después de realizar este cambio, y cambiar a un navegador no compatible con HTML5, esto es lo que mi página se ve así:
Aunque esto parece un problema monstruoso para corregir, no es realmente tan malo. La razón de que esto no funciona es que IE8 no reconoce los elementos HTML5 nuevos que estoy utilizando, por lo que no añadirlos a la DOM, por lo que no puede estilo usando CSS.

Sin embargo, sólo añadir una referencia a Modernizr (sin realizar ningún cambio de código de otros!) Será la fuerza bruta de estos elementos en el DOM. Puedes descargarlo desde http://www.modernizr.com/download/ y agregue una referencia en la sección <head> así:


<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
</head>

He añadido dos referencias de script, uno de jQuery y una de Modernizr. Yo en realidad no necesita la referencia de jQuery en este punto, pero lo necesito para la siguiente secuencia de comandos, así que estoy añadiendo ahora. Solo este simple cambio ahora recibe mi sitio a este estado de Internet Explorer 8:



No es perfecto, pero que es muy parecido a la versión original que vemos en Internet Explorer 9. Modernizr añadido estos elementos HTML5 nuevos que IE8 no entendía en el DOM, y desde que estaban en el DOM, podríamos estilo de ellos el uso de CSS.

Pero Modernizr hace más que eso! Tenga en cuenta que una de las diferencias entre nuestros IE8 e IE9 versiones de la página web es que la versión IE9 tiene buenas esquinas redondeadas en los dos artículos y la figura, y la versión de IE8 no es así. También podemos utilizar Modernizr para solucionar este problema.

    <script type="text/javascript">
        if (!Modernizr.borderradius) {
            $.getScript("script/jquery.corner.js", function() {
                $("article").corner();
                $("figure").corner();
            });
        }
    </script>


En este script, estamos revisando el objeto Modernizr para ver si hay apoyo para "borderradius" (una característica de CSS3). Si no es así, yo uso un script de jQuery llamado jquery.corner.js (que está disponible para su descarga en http://jquery.malsup.com/corner/ y requiere que la referencia adicional para jQuery que he hecho antes). Entonces sólo tiene que llamar al método de la esquina de esa secuencia de comandos en mis artículos y figuras para darles esquinas redondeadas.

O, usted puede hacer esto de una manera ligeramente diferente. Modernizr tiene un accesorio opcional (no incluido) cargador de recursos condicionada llama Modernizr.load (), sobre la base de Yepnope.js. Esto le permite cargar sólo las secuencias de comandos polyfilling que los usuarios necesitan, y se carga scripts de forma asincrónica y en paralelo que a veces pueden ofrecer un aumento de rendimiento. Para obtener Modernizr.load, usted tiene que incluir en un encargo de la estructura de la Modernizr que hay que crear en http://www.modernizr.com/download/, no está incluido en la versión de desarrollo. Con Modernizr.load, podemos escribir un script como el siguiente:

    <script type="text/javascript">
        Modernizr.load({
            test: Modernizr.borderradius,
            nope: 'script/jquery.corner.js',
            callback: function () {
                $('article').corner();
                $('figure').corner();
            }
        });
    </script>


En definitiva, se implementa la misma funcionalidad que el guión anterior. Modernizr.load primera prueba de la propiedad Boolean "Modernizr.borderradius" para ver si es compatible. Entonces, nope define los recursos necesarios para cargar si la prueba es falsa. Dado que IE8 no es compatible con la propiedad de CSS3 "borderradius", que se carga el script jquery.corner.js. Por último, la devolución de llamada especifica una función para ejecutarse cada vez que la secuencia de comandos se realiza la carga, por lo que llamaremos el "rincón" método en mis artículos y figuras como lo hacíamos antes. No hay un breve tutorial sobre Modernizr.load en http://www.modernizr.com/docs/#load si quieres adentrarte.


Ahora, mediante el uso de cualquiera de estos scripts, nuestra versión de Internet Explorer 8 (que no es compatible con HTML5) se parece a esto:

Por lo tanto, utilizando polyfills y herramientas como Modernizr le permiten utilizar la funcionalidad de HTML5 nueva y todavía proporcionar una buena experiencia en los navegadores antiguos también. Para obtener más información, echa un vistazo a http://www.diveintohtml5.org/detect.html que describe en detalle cómo Modernizr detecta las características de HTML5.

En resumen

En esta introducción a HTML5, cubrimos el marcado semántico, canvas, audio y video, y el uso de HTML5, manteniendo el apoyo a los navegadores más antiguos. Pero también señalan que hay un montón de cosas que no comprende: a los microdatos, almacenamiento, CSS3, etc Aquí hay algunos recursos para seguir aprendiendo acerca de HTML5:

Unidad de prueba de IE - incluso si usted no utiliza Internet Explorer, este es un sitio impresionante. Contiene un montón de demos: demostraciones de velocidad, Demos HTML5, Demos gráficos y demostraciones del explorador. Trate de ellos en tu navegador favorito! Este sitio también tiene enlaces a otros recursos, también.

Belleza de la Web - reúne a los mejores sitios en la web que aprovechan la aceleración de hardware de HTML5 y características de colocación de clavos con Internet Explorer 9

BuildMyPinnedSite - todo el código, las ideas, y las muestras es necesario utilizar clavos y la integración de Windows

HTML5 Labs - Este sitio es donde los prototipos de Microsoft especificaciones iniciales e inestable de los estándares web de organismos como el W3C. Puedes jugar con prototipos como IndexedDB, WebSockets, FileAPI, y Medios de Comunicación de captura de la API.

Videos

La charla de Brandon Satrom de "Application Development with HTML5" en TechEd 2011 - esta es una fabulosa hora de duración, habla de  de lo que usted necesita saber para hacer el desarrollo de HTML5

Conversaciones en HTML5  de MIX 2011 - una gran cantidad de sesiones de HTML5

Herramientas

Muchas de las herramientas de desarrollo soportan HTML5 ya. Prueba con estos:

  • Visual Studio 2010 Service Pack 1 - SP1 agrega HTML5 y CSS3 básicas de IntelliSense y validación. Para obtener más información, consulte
  • Estándares Web de actualización para Microsoft Visual Studio 2010 SP1 - esta es una extensión de Visual Studio IntelliSense que se suma actualizada HTML5 y CSS3 y validación de Visual Studio 2010 SP1, basado en la especificación W3C actual.
  • WebMatrix - HTML5 está soportada por omisión de la caja (la adición de una nueva página HTML utiliza el tipo de documento por defecto HTML5 y código de la plantilla)
  • ASP.NET MVC 3 herramientas de actualización
  • Expression Web Service Pack 1 de 4
Además de las herramientas de desarrollo, no se olvide:

  • Windows Phone "Mango" contiene Internet Explorer 9, que soporta sitios HTML5.
  • Internet Explorer 10 Avances de la Plataforma cuenta con el apoyo de muchos de los nuevos CSS3 y HTML5 características, la lista completa se encuentra en http://msdn.microsoft.com/en-us/ie/gg192966.aspx.
HTML5 ya está aquí. Anímese a desarrollar sitios web increíbles!

Agradecimiento a la autora: Jennifer Marsman