Página web que se ve pequeña en movil

Cuando hacemos una web, y esta se ve muy pequeña en un teléfono móvil, se debe que los navegadores de los móviles entienden por defecto que la página está realizada para verse en monitores más grandes, por lo que escalan su contenido. Esto obliga a tener que hacer zoom para poder ver correctamente la página.

Para evitar este efecto, HTML5 dispone de la etiqueta viewport. Para que la web se vea correctamente en un dispositivo más pequeño que un monitor, se debe de incluir dentro del head de la página la siguiente etiqueta:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Los valores posibles del atributo content, son los siguientes:

width: Ancho en píxeles o device-width para coger el ancho de la pantalla.
height: Alto en píxeles o device-height para coger el alto de la pantalla.
user-scalable: (yes o no) Si el usuario puede o no hacer zoom.
initial-scale: (0.0 a 10.0) Escala a usar la primera vez que se cargue la página web. Para no usar escalado: 1.0.
minimum-scale: (0.0 a 10.0) Escala mínima a la que el usuario puede llegar al hacer zoom.
maximum-scale: (0.0 a 10.0) Escala máxima a la que el usuario puede llegar al hacer zoom.

Se puede encontrar más información en la siguiente página.

Leer más

Formulario de contacto en Blogger en página independiente

Para añadir un formulario de contacto a una página creada en Blogger que no sea la principal, hay que seguir los siguientes pasos.

Ir a Diseño, y en cualquier lugar, seleccionar Añadir un gadget

Seleccionar el gadget Formulario de contacto. Si no se encuentra, pulsar en la segunda opción, Más gadgets.

Una vez añadido, ir a Plantilla - Editar HTML.

Buscar el texto ContactForm. Pulsar sobre la flecha negra de la izquierda para desplegarlo, y se observará un código como el siguiente:

<b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        BLA, BLA, BLA
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Del código anterior, se debe eliminar todo excepto las dos primeras y las dos últimas líneas.

Ahora, ir a la página donde se desea añadir el formulario de contacto, y en la edición HTML incluir esto:

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Nombre<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>Correo electrónico *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mensaje *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Eso es todo.

Leer más

Mostrar código fuente en Blogger

Para formatear el código fuente de una entrada se puede utilizar SyntaxHighlighter. El resultado es muy bueno, pero el rendimiento es bastante pobre. Otra forma para conseguir código con formato para tu blog, es usar google-code-prettify. Se instala muy fácilmente siguiendo esto pasos:

• Entrar en el blog 
• Ir a Diseño->Edición HTML
• Buscar el cierre del head, </head> y justo arriba pegar el siguiente código:

<script src="
https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>

• También puede descargarse el módulo completo desde aquí y usar esto:
  

  <link href="prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="prettify.js"></script>

• Guardar los cambios

Así, cuando se escriba una entrada nueva, en la edición HTML, debe encerrarse el código con estos tags:

<pre class="prettyprint">

  código fuente aquí
</pre>

Más información sobre el google-code-prettify puede encontrarse pulsando aquí.

Leer más