Categoría: cosas técnicas

Posts relacionados con la programación o manejo o configuración de los oredenadores (computadores)

  • El inherit de los CSS no funciona igual en todos los navegadores

    Pues eso… o al menos en el Internet Explorer y el Chrome que son los que suelo utilizar en mi portátil… (en el móvil utilizo el Opera Mini).
    Al menos en lo que al ancho (width) se refiere.

    No me voy a enrollar pero te explico brevemente:

    Tengo una serie de estilos (tanto en ficheros CSS como en bloques <style>) y en algunos de ellos simplemente quiero "heredar" el ancho que ya está previamente definido en otro de los estilos, por tanto, simplemente utilizo esto:

    width: inherit;

    Y supuestamente debería utilizar el ancho "heredado" es decir, el que tenga el bloque (normalmente un <div>) que contiene al que le aplico el nuevo estilo (para algunas páginas en concreto), pero resulta que no es así…

    Con Internet Explorer se muestra bien, pero cuando utilizo el Chrome me lo muestra mal, de hecho el ancho heredado es más grande y se "sale" de su sitio…

    Hoy me he puesto a "juguetear" con la opción que tiene el Chrome (supongo que el IE también) de "Inspeccionar elemento", que te vale para ver el "elemento" de la página web actual en la que pulsas con el ratón (mouse) y poder modificarla, de forma que puedas ver cómo quedaría con los cambios que realices.

     

    Para mostrar la opción Inspeccionar elemento de Chrome:

    Esto se consigue pulsando con el botón secundario del ratón (normalmente el botón derecho) sobre el "elemento" a inspeccionar de una página web.
    Te muestra una ventana con el código HTML, los estilos, etc. de forma que los puedes modificar sobre la marcha y ver el resultado.

     

    Lo que te decía que me he puesto a probar y al quitar esa línea de código en la que le digo width: inherit; se ha solucionado el "desborde" que tenía del div con el título en algunas partes de las páginas… en fin…

    Así que… me he puesto a buscar en los ficheros de estilos (.css) y en los modificados en algunas de las páginas maestras (.master) que utilizo en mi sitio y parece ser que ya no están esos desbordes… mejor así ¿no? po ezo

     

    Espero que te sea de utilidad.

    Nos vemos.
    Guillermo

  • Saber si navegamos en un móvil

    Pues eso… que estoy haciendo pruebas para saber si estoy usando el código de una página Web en un móvil o no… y buscando en mi sitio me encontré con este truco de la sección de HTML:
    1.- Detectar el navegador

    No es el navegador lo que quiero detectar, pero sí me sirve usar el mismo "informador", es decir navigator.userAgent.

    Por medio de esa propiedad podemos averiguar muchas cosas, algunas más enrevesadas que otras, y para el caso que quiero probar me sirve… aunque no al 100% ya que en realidad la comprobación que hago no es para saber si estoy usando el código en un dispositivo móvil si no en ciertos "modelos" de dispositivos móviles.

    En mi caso compruebo los siguientes: Android, iPhone, iPod, iPad, BlackBerry y Symbian.

    El código a usar sería algo así en JavaScript:

     

    <script type="text/javascript">
    
        var uAg = navigator.userAgent.toLowerCase();
        var isMobile = !!uAg.match(/android|iphone|ipad|ipod|blackberry|symbianos/i);
    
        if (isMobile)
            document.write("navegando desde un dispositivo móvil");
    
    </script>

     

    Como puedes ver en el código se comprueban varias cadenas que suelen (o pueden) aparecer en el valor devuelto por el navegador, y esa comprobación se hace por medio de una expresión regular, sabiendo esto, si necesitas añadir más "valores" a esa comprobación, por ejemplo, para saber si es un Nokia simplemente tendrías que poner antes del "/i" el separador y la cadena a añadir en minúsculas "|nokia", haciendo eso, la cadena de comprobación quedaría de esta forma:

     

    var isMobile = !!uAg.match(/android|iphone|ipad|ipod|blackberry|symbianos|nokia/i);

     

    Nota:

    Si a alguien se le ocurre que comprobando si está la palabra "mobile" en la cadena devuelta por navigator.userAgent, decirle que a lo mejor antes era así y puede que en muchos de los navegadores siga siendo así, pero da la casualidad que en el navegador Opera Mini que tengo en mi Samsung Galaxy S no aparece la palabra "mobile" por ningún sitio, así que… a mí no me vale.

     

    Y si quieres hacer esa misma comprobación usando Visual Basic para .NET, puedes hacerlo de esta forma:

     

    <%
    
    Dim uAg As String = Request.ServerVariables("HTTP_USER_AGENT")
    Dim regEx As New Regex("android|iphone|ipad|ipod|blackberry|symbianos", RegexOptions.IgnoreCase)
    Dim isMobile As Boolean = regEx.IsMatch(uAg)
        
    If isMobile Then
        Response.Write("navegando desde un dispositivo móvil")
    End If
    
    %>

     

    Esto mismo en C# puedes hacerlo, pero en la página ASPX tendrías que indicar que estás usando código de C# y hacer una importación del espacio de nombres System.Text.RegularExpresions:

     

    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Text.RegularExpressions" %>

     

    Y el código para comprobar si estamos usando el navegador en un dispositivo móvil en C# será este:

     

    <%
    string uAg = Request.ServerVariables["HTTP_USER_AGENT"];
    Regex regEx = new Regex(@"android|iphone|ipad|ipod|blackberry|symbianos", RegexOptions.IgnoreCase);
    bool isMobile = regEx.IsMatch(uAg);
    
    if(isMobile)
        Response.Write("navegando desde un dispositivo móvil");
    
    %>

     

    Nos vemos.

    Guillermo

  • Asignar el foco a un control al cargar una página web aspx

    Pues eso… que con la cabeza que tengo (se me olvidan las cosas o lo mismo mi disco duro ya está lleno, a saber) me he decidido a publicar este "truco" para ASP.NET usando páginas web ASPX, ya que hoy lo he necesitado y no me acordaba cómo había que hacerlo… o casi… ahora te explico el casi.

     

    Asignar el foco a un control de una página web ASPX al cargarla

    La idea es que hay que "darle el foco" al control en cuestión y aquí no vale eso de asignar un valor cero (0) a la propiedad TabIndex del control, que es lo que haríamos en una aplicación de escritorio (y casi me atrevería a decir que a una de XAML).

    Otra cosa que se te puede ocurrir es asignar el foco al cargar "el formulario" (en este caso la página web), y por ahí iríamos bien… pero en el caso de las páginas web ASPX el evento Load (en realidad Page_Load) no se produce o al menos no podemos interceptarlo salvo que indiquemos en la directiva @Page que queremos hacerlo, esto lo conseguimos asignando un valor "true" a la propiedad AutoEventWireup (el valor predeterminado o por defecto, es "false").

     

    Y uniendo todo lo dicho tendríamos algo así:

    <%@ Page Language="vb" AutoEventWireup="true" Strict="true" %>
    
    <!DOCTYPE html>
    <script runat="server">
    
        ' Para que se ponga el foco en el control indicado
        ' en @Page hay que indicar AutoEventWireup="true"
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
            If IsPostBack = False Then
                txtTotal.Focus()
            End If
        End Sub
        
    </script>
    
    

     

    Espero que te pueda ser útil

    Nos vemos.

    Guillermo

    P.S.

    Nota del 28/Oct/2012:

    Mira esta actualización que seguro que te interesa también:

    Asignar el foco a un control al cargar una página web aspx (ampliación y recapitulación)