Una opción muy interesante para mostrar los vídeos de youtube de una manera un tanto mas "integrada" en nuestra web es usar el chromeless player. Este player es estéticamente mas liviano y no tiene controles. Por defecto sólo permite encender/parar el vídeo pulsando sobre el, esta opción puede ser suficiente para un vídeo corto que queramos incrustar en nuestra web.
De todas formas con un mínimo de javascript podemos darle unos controles personalizados para arrancar/parar y mutearlo sin apenas esfuerzo. En el summun se pueden conseguir todas las virguerías que muestran desde youtube
En el código adjunto yo he creado 3 divs con un texto que al pulsar sobre ellos mediante un evento jQuery se lanzan las acciones contra el vídeo. De todas formas lo normal será, mediante CSS, posicionar estos DIVs y darles una imagen con los iconos que queramos.
Para hacer funcionar este ejemplo se requiere de jquery y swfobject. Para el video hay un DIV que hace de contenedor y lo que hace el javascript es llamar a la función loadPlayer() que se encarga de pasar el ID del vídeo que queremos cargar y le dice donde esta el DIV que contendrá el video.
Página sin título
You need Flash player 8+ and JavaScript enabled to view this video.
A parte de cargar un css también sirven para poner cosas como la URL canónica de una pagina o la imagen que se muestra al compartir nuestra pàgina en Facebook. En este caso lo que hay que hacer es poner el head link rel="img_src" y en href el enlace de nuestra imagen característica.
Cuando tenemos una web compleja en la que se usan controles y todo se carga en una MasterPage puede ser complicado de saber controlar quien pone el head link para la imagen que muestra Facebook de nuestra web.
Pongamos por ejemplo que nuestra MasterPage siempre carga un head link por defecto. Pero claro, algunas páginas querrán poner su própia imágen.
Si definimos el método que os propongo en la MasterPage podremos llamarlo desde esta para poner el "img_src" por defecto. Si ahora definimos una interfície para la masterPage desde los controles o bien la página podremos llamar a este método para poner una "image_src" propia para una pagina en concreto.
Por cierto, una de las cosas que me gustan de este método es que crea un enlace con la URL absoluta en función del servidor a partir de una URL relativa.
Con esto ya sólo queda jugar con el ciclo de carga de la pagina o bien el de controls -> MasterPage -> Page para determinar cual llega el último y por tanto se queda.
Validar una fecha es algo que seguro que toda web necesitará algún día, sea para registrar la fecha de un usuario, para introducir fechas, para confirmar la mayoría de edad de un usuario....
Una manera de hacer esta tarea consiste en poner un TextBox y recoger la fecha separada por barras separadoras, pero esto es algo que suele acarrear problemas. Así que otra opción muy usada consiste en ofrecer unos desplegables con los que el usuario escoge el día, el mes y el año.
Algo como
De esta manera podemos mostrar nombres para los meses, limitar el numero de años que mostramos, devolver mensajes de error personalizados...
Para llevar a cabo esta tarea con éxito hace falta una código en el servidor y en el cliente tanto en c# como en javascript. Empezaremos con el código aspx necesario en la página.
Escoge un día.
Escoge un mes.
Escoge un año.*
]]>
Realmente el único validador necesario es el custom ya que nos interesa el resultado final de toda la fecha, aunque podemos poner validadores para cada campo para informar al usuario. Este validador custom tiene una parte de código mínima que es la parte en el servidor, posteriormente añadiremos una validación javascript para hacer mas rápida la detección de una fecha incorrecta y poder informar al usuario sin tener que hacer un postback.
///
/// Validar Mayoria de Edad
///
protected void ValidateEdad(object sender, ServerValidateEventArgs e)
{
// custom date validate
DateTime nacimiento = new DateTime(Convert.ToInt32(ddlAno.SelectedValue), Convert.ToInt32(ddlMes.SelectedValue),
Convert.ToInt32(ddlDia.SelectedValue));
if (nacimiento.CompareTo(DateTime.UtcNow.AddYears(-18)) > 0)
e.IsValid = false;
else
e.IsValid = true;
}
En este caso nuestro código comprueba que el usuario sea mayor de edad, pero aquí es un buen sitio para hacer la validación que necesaria. Tened en cuenta que si no se puede parsear la fecha se producirá una excepción que quizás nos interesa capturar y asignar el valor false a e.IsValid;
En la página aspx, dentro de un tag script pondremos:
function isValidDate(source, args) {
var dayfield = document.getElementById('<%= ddlDia.ClientID%>').value;
var monthfield = document.getElementById('<%= ddlMes.ClientID%>').value;
var yearfield = document.getElementById('<%= ddlAno.ClientID%>').value;
var dayobj = new Date(yearfield, monthfield - 1, dayfield);
// construir fecha
if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield))
args.IsValid = false;
else {
var day18 = new Date(eval(yearfield) + 18, monthfield - 1, dayfield);
// es mayor de edad?
if (day18 > new Date())
args.IsValid = false;
else
args.IsValid = true;
}
}
El truco aquí reside en buscar cada campo que forma parte de la fecha con una llamada a la propiedad ClientID de cada elemento asp.
Una vez localizados el día, mes y año seleccionados intentamos crear una fecha con ellos, después comprobamos que los elementos seleccionados sean los mismos que la fecha resultante. De esta manera, por ejemplo, salvamos errores por seleccionar el 31 de febrero. Finalmente y siguiendo con el ejemplo, comprobamos la mayoría de edad.
Con todo esto tendremos una sólida manera de recoger las fechas de los usuarios en prácticos desplegables para nuestros usuarios.
Mas adelante veremos como popular estos DropDownList de una manera muy cómoda.
