Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

18 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

 ¡Microsoft MVP!
Mostrando entradas con la etiqueta html. Mostrar todas las entradas
Mostrando entradas con la etiqueta html. Mostrar todas las entradas

Eliminar el botón de los campos password de IE10

miércoles, 30 de enero de 2013
Internet Explorer 10
Hace sólo unos días veíamos cómo eliminar y personalizar los botones que Internet Explorer 10 añade a nuestros cuadros de edición estándar, pero nos dejábamos por detrás un caso especial: los controles de edición de contraseñas, o sea, los <input type="password"> de toda la vida.

En esta ocasión, IE10 muestra por cortesía un pequeño icono con forma de ojo, que permite visualizar el contenido del campo mientras lo mantenemos pulsado:

Botón de visualizar contraseñas en IE10
Si por cualquier razón queremos eliminar este botón, debemos utilizar una técnica similar a la que vimos en el post anterior, esta vez utilizando el pseudoselector -ms-reveal, así:
input::-ms-reveal {
    display: none;
}
Y por supuesto, podríamos utilizar también este enfoque para personalizarlo y adaptarlo mejor al look de nuestro sitio web:
input::-ms-reveal {
    color: white;
    background-color: red;
}
Con lo que tendríamos un resultado:

image

Publicado en: Variable not found.

Publicado por José M. Aguilar a las 9:45 a. m.

Hay 2 comentarios, ¡participa tú también!
 

Etiquetas: , , , ,

Eliminar el botón de limpiado de controles de IE10

miércoles, 23 de enero de 2013
Internet Explorer 10Va un truquillo rápido. Los que ya habéis saltado a Internet Explorer 10 seguro habréis notado el pequeño botón que este navegador añade a los cuadros de edición estándar cuando obtienen el foco, y que permite limpiar rápidamente su contenido:

Botón de limpiar campo de IE10
Pues bien, hay veces que a nivel de diseño no nos interesa que se muestre la pequeña “X” en los controles, su posición entra en conflicto con otro elemento visual, o simplemente no queremos aportar esta funcionalidad,  por lo que es posible desactivar esta característica de los <input> usando CSS:
input::-ms-clear{
    display: none;
}
Tan sencillo como eso.

Pero seguro que te estás preguntando, ¿y en vez de eliminarla puedo personalizarla? Pues un poco también ;-) Observad el siguiente código:
input::-ms-clear{
    background-color: red;
    color: white;
    border: 1px solid #808080;
}
En tiempo de ejecución, esa discreta e insípida “X” se habría convertido en algo bastante más contundente ;-)

image


Publicado en: Variable not found.

Publicado por José M. Aguilar a las 11:26 a. m.

Hay 6 comentarios, ¡participa tú también!
 

Etiquetas: , , , ,

Enlaces interesantes 65

martes, 27 de diciembre de 2011
Enlaces interesantes: .NET, ASP.NET, Azure, HTML, CSS, javascript, Visual StudioEstos son los enlaces publicados en Variable not found en Facebook y Twitter del 18 al 23 de diciembre de 2011. Espero que os resulten interesantes. :-)

.Net

Asp.net

Azure / Cloud

Data access

Html/Css/Javascript

Visual Studio/Complementos

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Publicado por José M. Aguilar a las 10:08 a. m.

Nadie ha comentado la entrada, ¿quieres ser el primero?
 

Etiquetas: , , , , , , , ,

Enlaces interesantes 64

lunes, 19 de diciembre de 2011
Enlaces interesantes: .NET, ASP.NET, Azure, HTML, CSS, Visual StudioEstos son los enlaces publicados en Variable not found en Facebook y Twitter del 12 al 17 de diciembre de 2011. Espero que os resulten interesantes. :-)

Aprovecho además para pediros opinión sobre un nuevo formato de presentación de los enlaces, usando categorizaciones. De esta forma podréis acceder directamente a aquellos cuya temática os interese, en lugar de tener que leerlos todos para ver si hay alguno que al que valga la pena echar el vistazo. ¿Qué os parece? ¿Mejor así?

.Net

Asp.net

Azure / Cloud

Conceptos

Data access

Html/Css/Javascript

Visual Studio/Complementos

Otros

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Publicado por José M. Aguilar a las 9:25 a. m.

Hay 2 comentarios, ¡participa tú también!
 

Etiquetas: , , , , , , ,

Crea un traductor en tu web con Google AJAX Language API

domingo, 30 de marzo de 2008
MundoVía Dirson me entero de que Google ha publicado recientemente el API que permite, a base de Ajax, realizar traducciones de textos entre los idiomas contemplados por la herramienta, más de una decena.

Google nos tiene acostumbrados a implementar APIs muy sencillas de usar, y en este caso no podía ser menos. Para demostrarlo, vamos a crear una página web con un sencillo traductor en Javascript, comentando paso por paso lo que hay que hacer para que podáis adaptarlo a vuestras necesidades.

Paso 1: Incluir el API

La inclusión de las funciones necesarias para realizar la traducción es muy sencilla. Basta con incluir el siguiente código, por ejemplo, en la sección HEAD de la página:
  <script type="text/javascript"
          src="http://www.google.com/jsapi">
  </script>
  <script type="text/javascript">  
    google.load("language", "1");        
  </script>
 
El primer bloque descarga a cliente la librería javascript Ajax API Loader, el cargador genérico de librerías Ajax utilizado por Google. Éste se usa en el segundo bloque script para cargar, llamando a la función google.load el API "language" (traductor), en su versión 1 (el segundo parámetro).

Paso 2: Creamos el interfaz

Nuestro traductor será realmente simple. Además, vamos a contemplar un pequeño subconjunto de los idiomas permitidos para no complicar mucho el código, aunque podéis añadir todos los que consideréis necesarios.

El resultado será como el mostrado en la siguiente imagen.

Interfaz del traductor

El código fuente completo lo encontraréis al final del post, por lo que no voy a repetirlo aquí. Simplemente indicar que tendremos un TextArea donde el usuario introducirá el texto a traducir, dos desplegables con los idiomas origen y destino de la traducción, y un botón que iniciará la acción a través del evento onclick. Por último, se reservará una zona en la que insertaremos el resultado de la traducción.

Ah, un detalle interesante: en el desplegable de idiomas de origen se ha creado un elemento en el desplegable "Auto", cuyo valor es un string vacío; esto indicará al motor de traducción que infiera el idioma a partir del texto enviado.

Paso 3: ¡Traducimos!

La pulsación del botón provocará la llamada a la función Onclick(), desde donde se realizará la traducción del texto introducido en el TextArea.

Como podréis observar en el código, en primer lugar obtendremos los valores de los distintos parámetros, el texto a traducir y los idiomas origen y destino, y lo introducimos en variables para facilitar su tratamiento.
  var text    = document.getElementById("text").value;
  var srcLang = document.getElementById("srcLang").value;
  var dstLang = document.getElementById("dstLang").value;
 
Acto seguido, realizamos la llamada al traductor. El primer parámetro será el texto a traducir, seguido de los idiomas (origen y destino), y por último se introduce la función callback que será invocada cuando finalice la operación; hay que tener en cuenta que la traducción es realizada a través de una llamada asíncrona a los servidores de Google:

 google.language.translate(text, srcLang, dstLang, function(result) 
   {
     if (!result.error) 
     {    
       var resultado = document.getElementById("result");    
       resultado.innerHTML = result.translation;  
     }
     else alert(result.error.message);
   }
 );
 
Como podéis observar, y es quizás lo único extraño que tiene esta instrucción, el callback se ha definido como una función anónima definida en el espacio del mismo parámetro (podéis ver otro ejemplo de este tipo de funciones cuando explicaba cómo añadir funciones con parámetros al evento OnLoad).

Para los queráis jugar con esto directamente, ahí va el código listo para un copiar y pegar.

<html>
<head>
  <title>Traductor</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">  
    google.load("language", "1");        
  </script>
</head>

<body>
  <textarea id="text" rows="8" cols="40">Hi, how are you?</textarea>
  <br />
  <button onclick="onClick()">
        Traducir</button>
  Del idioma
  <select id="srcLang">
    <option value="">(Auto)</option>
    <option value="es">Español</option>
    <option value="en">Inglés</option>
    <option value="fr">Francés</option>
  </select>
  Al
  <select id="dstLang">
    <option value="es">Español</option>
    <option value="en">Inglés</option>
    <option value="fr">Francés</option>
  </select>
  <h3>Traducción:</h3>
  <div id="result">
    (Introduce un texto)
  </div>
</body>
<script type="text/javascript">
function onClick()
{
  // obtenemos el texto y los idiomas origen y destino
  var text    = document.getElementById("text").value;
  var srcLang = document.getElementById("srcLang").value;
  var dstLang = document.getElementById("dstLang").value;

  // llamada al traductor
  google.language.translate(text, srcLang, dstLang, function(result) 
    {
      if (!result.error) 
      {    
        var resultado = document.getElementById("result");    
        resultado.innerHTML = result.translation;  
      }
      else alert(result.error.message);
    }
  );
}
</script>
</html>
 

Enlaces: Página oficial de documentación del API

Publicado en: www.variablenotfound.com.

Publicado por José M. Aguilar a las 10:00 p. m.

Hay 21 comentarios, ¡participa tú también!
 

Etiquetas: , , , , , ,

Scripts de arranque en páginas web

domingo, 28 de octubre de 2007
Inicializaciones de librerías, llamadas a servidor mediante Ajax para obtener datos o porciones de la página, efectos gráficos... son sólo algunos de los escenarios donde resulta interesante utilizar scripts de arranque o (startup scripts), que se ejecuten en cliente en cuanto le llegue la página web.

Esto hay al menos dos formas de hacerlo: llamar a la función deseada desde el evento onload() del cuerpo de la página o bien hacerlo en un bloque de scripts fuera de cualquier función, bien sea dentro del propio (X)HTML o bien en un recurso .js externo. Pero hace tiempo que tenía una curiosidad: ¿qué diferencia hay entre una u otra? ¿cuándo deben usarse? ¿tienen contraindicaciones?

Para averiguarlo, he creado la siguiente página:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Prueba de scripting</title>
</head>
<body onload="alert('OnLoad()');">
    <h1>Prueba Scripting</h1>
</body>
<script type="text/javascript">
    alert('Script en HTML');
</script>
<script type="text/javascript" src="script.js"></script>
</html>


Como se puede observar:
  • en el elemento <body> he incluido un atributo onload="alert('onload');".
  • he añadido un bloque script con una única instrucción alert('script HTML');
  • he añadido también una referencia a un archivo script externo, en el que sólo hay una instrucción alert('archivo .js');
Además he jugado un poco con el orden de introducción de los bloques de scripts para comprobar su influencia en el orden de ejecución del código que contienen. El resultado ha sido el siguiente:
  • Se ejecuta en primer lugar el código incluido en los bloques <script> .
  • Si hay varios bloques de script, se ejecuta el código incluido en cada uno de ellos, siguiendo del orden en el que están declarados.
  • No importa si son scripts incrustados en la página o si se encuentran en un archivo .js externo, se ejecutan cuando le llega el turno según el orden en el que han sido definidos en la página, es decir, la posición del tag <script> correspondiente.
  • Por último, se ejecuta el código del evento onload del cuerpo de la página. De hecho, este evento se ejecuta una vez se ha cargado y mostrado la página al usuario, es el último en tomar el control.
Con estos datos, ya se puede intuir en qué casos puede ser conveniente usar un modelo u otro.

Debemos usar onload() si queremos que nuestro código se ejecute al final, cuando podemos asegurar que todo lo que tenía que pasar ya ha pasado; eso sí, mucho ojo, que onload() es un recurso limitado (de hecho, sólo hay uno ;-)), y si no se tiene cuidado podemos hacer que una asignación nuestra haga que no se ejecute la función anteriormente definida para el evento. Esto se evita normalmente incluyendo en el atributo onload de la etiqueda body las sucesivas llamadas a las distintas funciones de inicialización requeridas (<body onload="init1(); init2();"...), o bien desde script utilizando el siguiente código, todo un clásico:

function addOnLoad(nuevoOnLoad) {
   var prevOnload = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = nuevoOnLoad;
   }
   else {
      window.onload = function() {
          prevOnload();
          nuevoOnLoad();
      }
   }
}

// Las siguientes llamadas enlazan las
// funciones init1() e init2() al evento
// OnLoad:

addOnLoad(init1);
addOnLoad(init2);

 

En cambio, la introducción de código de inicialización directamente en scripts se ejecutará al principio, incluso antes de renderizar el contenido de la página en el navegador, por lo que es bastante apropiada para realizar modificaciones del propio marcado (por ejemplo a través del DOM) o realizar operaciones muy independientes del estado de carga de la página. Como ventaja adicional, destacar su facilidad para convivir con otros scripts similares o asociados al evento OnLoad().

Publicado por José M. Aguilar a las 10:14 p. m.

Hay 2 comentarios, ¡participa tú también!
 

Etiquetas: , , , , ,