Programación Cotidiana: § HTML

Mostrando las entradas con la etiqueta § HTML. Mostrar todas las entradas

18 de junio de 2013

Tabla con esquinas redondeadas y que tenga una sombra incrustada dentro de ella

Necesité hacer una tabla HTML que se viera así:

Para esto, usé CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Table with inset shadow and round corners</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <style>
  table.tabla {
   width: 500px;
   margin: 0 auto; /* centrado */

   background: white;

   /* sombra interior */
   /* Ver http://css-tricks.com/snippets/css/css-box-shadow/ */
   box-shadow: inset 1px 1px 1px 0px #999999;
   
   /* esquinas redondeadas */
   /* Ver http://border-radius.com/ */
   border-radius: 10px;
  }
  table.tabla > tbody > tr:first-child > td:first-child { /* celda superior izquierda */
   border-top-left-radius: 10px;
  }
  table.tabla > tbody > tr > td:first-child { /* celdas de la primera columna  */
   border-left: 1px solid #999999;
  }
  table.tabla > tbody > tr:last-child > td:first-child { /* celda inferior izquierda */
   border-bottom-left-radius: 10px;
  }
  table.tabla > tbody > tr:last-child > td:last-child { /* celda inferior derecha */
   border-bottom-right-radius: 10px;
  }
  table.tabla > tbody > tr:nth-child(even) { /* celdas de los renglones pares */
   background: #e7e7e7;
  }
 </style>
</head>
<body>
 <table cellpadding=0 cellspacing=0 class="tabla">
  <tr>
   <td>abc</td>
   <td><table><tr><td>123</td><td>456</td></tr><tr><td>123</td><td>456</td></tr></table></td>
   <td>ghi</td>
  </tr>
  <tr>
   <td>abc</td>
   <td><table><tr><td>123</td><td>456</td></tr><tr><td>123</td><td>456</td></tr></table></td>
   <td>ghi</td>
  </tr>
  <tr>
   <td>abc</td>
   <td><table><tr><td>123</td><td>456</td></tr></table></td>
   <td>ghi</td>
  </tr>
  <tr>
   <td>abc</td>
   <td><table><tr><td>123</td><td>456</td></tr></table></td>
   <td>ghi</td>
  </tr>
  <tr>
   <td>abc</td>
   <td><table><tr><td>123</td><td>456</td></tr></table></td>
   <td>ghi</td>
  </tr>
 </table>
</body>

He aquí este código ejecutándose en el navegador:

abc

123	456
123	456

ghi

abc

123	456
123	456

ghi

abc

123

456

ghi

abc

123

456

ghi

abc

123

456

ghi

23 de julio de 2012

Cómo guardar datos localmente en HTML

Según observo, actualmente (julio 2012), las posibles APIs para almacenar localmente datos en HTML son las siguientes:

Storage

Lista simple de pares de valores de cadenas de texto.
Los valores, al ser cadenas de texto, deben serializarse y deserializarse.
Especificaciones:

Ejemplos:

http://www.w3schools.com/html5/html5_webstorage.asp

SQL Database

base de datos SQL
Quedó obsoleta y ya no se mejorará.
Especificación:

http://dev.w3.org/html5/webdatabase/

IndexedDB

Lista de pares de valores, con índices para mejorar desempeño.
Me parece que todavía no está implementada entre varios navegadores.
Especificación:

http://www.w3.org/TR/IndexedDB/

Un ejemplo del uso del Storage (con el objeto LocalStorage, que mantiene los valores incluso cuando se cierra el navegador) es el siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>LocalStorage Example</title>
  </head>
  <body>
    <h1>Storage Example</h1>

    <script type="text/javascript" charset="utf-8">
      if(typeof(Storage)!="undefined" && typeof(localStorage)!="undefined") {

        var value1 = window.localStorage.getItem("key1");
        var value2 = window.localStorage.getItem("key2");
        alert("value1="+value1);
        alert("value2="+value2);
        window.localStorage.setItem("key1", "aaa");
        window.localStorage.setItem("key2", "bbb");
        value1 = window.localStorage.getItem("key1");
        value2 = window.localStorage.getItem("key2");
        alert("value1="+value1);
        alert("value2="+value2);

      }
    </script>

  </body>
</html>

Este ejemplo lo probé en Apple Safari 5.1.2, Mozilla Firefox 13.0.1, y Google Chrome 20.0.1132, todos en Microsoft Windows 7. Y no, no corre en Internet Explorer 8.0.7601 (no cuento con Windows 9 para probarlo ahí.)

21 de julio de 2011

PasteHTML: Web hosting gratuito, sin publicidad y anónimo

Imagen: (c) PasteHTML.com

Necesitaba un servicio de web hosting gratuito que no agregara ningún aviso de publicidad. Mejor dicho, que no modificara la página de ninguna manera, pues necesitaba arreglar una página HTML que contiene CSS y Javascript para que se viera y funcionara mejor en una iPad. Por supuesto, he usado Zymic anteriormente, pero por alguna razón no podía accederlo hoy. Como alternativa, encontré PasteHTML, un curioso servicio en el que simplemente escribes —o pegas— el código HTML, y lo publicas.

16 de julio de 2011

Sombras usando sólo CCS3

Para lograr el efecto de sombra en el siguiente texto, usando únicamente CSS3, usé el siguiente código:

13 de enero de 2011

Checkbox de tres estados sin imágenes en HTML (estado indeterminado)

Necesitábamos un checkbox de tres estados para una sección de nuestro sitio de Internet. El checkbox debería iniciar en el tercer estado al cargar la página. También, debería poderse regresar al tercer estado usando Javascript. Además, quería que se usara el control nativo de la plataforma en la que se consultara, por lo que no podía usar imágenes. Encontré el atributo indeterminate.
Al parecer, sólo se puede acceder a este atributo mediante Javascript.

<form>
   <input id="c" type="checkbox" checked="checked"/>
</form>
<script>
   document.getElementById('c').indeterminate = true;
</script>

En la página 614 del libro Dynamic HTML: The Definitive Reference se menciona que este atributo lo reconoce Microsoft Internet Explorer versión 4 en adelante (Danny Goodman, O'Reilly Media, Third Edition edition, ISBN-10: 0596527403, ISBN-13: 978-0596527402.)

El sitio MSDN de Microsoft dice:

The indeterminate property can be used to indicate whether the user has acted on a control. For example, setting the indeterminate to true causes the check box to appear checked and dimmed, indicating an indeterminate state. The value of the indeterminate property acts independently of the values of the checked and status properties. Creating an indeterminate state is different from disabling the control. Consequently, a check box in the indeterminate state can still receive the focus. When the user clicks an indeterminate control, the indeterminate state turns off and the checked state of the check box toggles. (http://msdn.microsoft.com/en-us/library/ms533894.aspx)

El Working Draft de HTML5 más reciente hasta el día de hoy dice:

If the element's indeterminate IDL attribute is set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state. The control is never a true tri-state control, even if the element's indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the appearance of a third state (HTML5, A vocabulary and associated APIs for HTML and XHTML, W3C Working Draft 13 January 2011).

Libros que, espero, encuentres útiles (lista automática):

Secciones