2011/04/27

.htaccess para proteger index.html

Se puede usar .htaccess para proteger el acceso a un determinado archivo en un directorio. En este caso, se desea proteger el acceso a http://example.com/protegido/

.htaccess
En el directorio que contiene a index.html:

<FilesMatch index.html>
AuthUserFile /var/www/.htpasswd
AuthType Basic
AuthName "Pagina Privada"
Require valid-user
</FilesMatch>

.htpasswd
/var/www/.htpasswd se puede crear usando el comando htpasswd:

cd /var/www
htpasswd -c .htpasswd uuu

Donde uuu es el nombre del usuario al que se quiere dar acceso a ese directorio.

Files o FilesMatch
Inicialmente habia usado Files en lugar de FilesMatch, pero me permitía entrar al directorio omitiendo index.html en el url.

Por ejemplo, si el url era:

http://example.com/protegido/index.html

Podía entrar con:

http://example.com/protegido/

En cambio, con FilesMatch se protegieron ambos accesos.

2011/04/23

Cómo sombrear filas alternas con CSS3

A esta forma de presentar filas se le suele llamar cebra.

Caso Tabla

HTML
<table class="zebra">
  <thead>
    <tr>
      <th>Col0</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
  </tbody>
</table>

CSS
table.zebra tbody tr:nth-child(2n+1) {
  background-color: #eef;
}

Normalmente, las tablas presentan sus celdas con un borde. Para ocultarlo, se puede usar el atributo html border="0". Sin embargo, también se puede hacer usando estilos, con algo como:

table.zebra {
  border-collapse: collapse;
  border-spacing: 0;
}

Caso Lista

HTML
<ul class="zebra">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS
ul.zebra li:nth-child(2n+1) {
  background-color: #eef;
}

Normalmente, las listas presentan sus filas con un bullet. Para ocultarlo, se puede usar estilos, con algo como:

ul.zebra {
  list-style: none;
  padding: 0;
}

2011/04/15

uphp


Con HTML, el contenido se mezcla con etiquetas que permiten mostrarlo en un navegador.
CSS permite separar la data del formato de la data del contenido.
Javascript permite poner código en las etiquetas para manipular el documento e interactuar con sus elementos.
Unobstrusive javascript es una forma de usar javascript que procura mantener el código aparte. jQuery ayuda mucho en esto.
JSP, PHP, etc, permiten generar HTML, abriendo la puerta a la automatización y al uso de recursos como las bases de datos.
Frameworks web permiten para manejar el desarrollo de un site relativamente extenso o complejo.
El modelo de framework MVC (Modelo-Vista-Controlador), viene del mundo Smalltalk a la web para separar el desarrollo en esas tres capas.
En mi opinión, aumenta la inercia del proceso de desarrollo. Expresar una solución web en términos MVC se convierte en un problema adicional.
Drupal usa un modelo de framework diferente, ingenioso, permitiendo agregar libremente componentes que pueden colaborar entre sí.
También requiere algo de tiempo y trabajo aprender a pensar y expresar cualquier solución en sus términos. A cambio, a mi parecer, permite ser mucho más productivo que en cualquiera de las alternativas anteriores.
En general, estos frameworks requieren que aprendamos una nueva versión de lo que ya sabemos hacer en web. A veces, incluso hay que hacer ese reaprendizaje de una versión a otra del mismo framework.
¿No le parece que algo tiene que cambiar?
¿Habrá alguna forma de hacer dinámica una página estática sin tener que reescribirla? 
Encontrando a QueryPath, algo como un puerto de jQuery para PHP, que facilita la manipulación de una página, me pareció que podría haber alternativas.
uphp es la búsqueda de una forma de desarrollar web en la que el código afecta al contenido pero se manteniene aparte.
De ese modo, se pueden respetar las páginas estáticas de un site mientras se lo vuelve dinámico.
Además, se podría usar, tal cual, soluciones HTML/CSS/Javascript que sean independientes del framework.
Quien sabe, quizás tambien se halle una forma de hacer todo eso y además separar la data del contenido de la data HTML.

2011/04/07

Cómo definir un selector CSS que requiera dos clases


El problema que tenía involucraba bloques similares a:

proyectos-vista_1
<div class="view view-proyectos view-display-id-page_1">
  ...
</div>

proyectos-vista_2
<div class="view view-proyectos view-display-id-page_2">
  ...
</div>

noticias-vista_1
<div class="view view-noticias view-display-id-page_1">
  ...
</div>

noticias-vista_2
<div class="view view-noticias view-display-id-page_2">
  ...
</div>

Necesitaba aplicar un estilo únicamente al bloque proyectos-vista_1. Podría ser más fácil si éste tuviera un id, pero no lo tenía (así lo construye Drupal, en este caso).

La solución la encontré en este artículo. Consiste en usar un selector como:

.view-proyectos.view-display-id-page_1 {
  ...
}

Qué sencillo. No me lo imaginaba :-) Ojalá te sirva de ayuda tambien.

Referencia
Defining A CSS Selector That Requires A Multi-Class Union

2011/04/05

Separación entre párrafos en Flash

Para aprovechar esta característica, el documento flash debe ser para Flash 10 y Actionscript 3.

Cuando defina un texto, asegúrese de que es de tipo TLF (no la opción Classic Text). Esto permite acceder a propiedades avanzadas para el control de texto como Spacing, que permite controlar el espaciado entre párrafos.

Algo que hay que tomar en cuenta es que, a diferencia de la mayoría de procesadores de texto, donde el espaciado después del párrafo se suma al espaciado anterior del párrafo siguiente, en flash se solapan. Lo que significa que si el espaciado antes del párrafo es 12px y el espaciado despues del párrafo es 24px, el espaciado entre dos párrafos no será 36px, sino 24px.

Referencia:
http://www.flashconf.com/flash-cs5/flash-cs5-paragraph-styles/