Técnicas y herramientas para HTML y CSS

"Más que todo el esfuerzo en construir tu sitio web, la cosa más importante para tus usuarios es cómo se ve tu sitio. Administrar las inconsistencias en tus temas para cada browser, para cada módulo y para los temas seleccionados para tus usuarios puede ser un gran reto..."

Lo anterior es parte de las técnicas y herramientas que se exponen en el sitio web de Drupal y que mejor que ellos para explicarlo. En esa página se explican las precausiones y herramientas de validación para los sitios web que vayamos a desarrollar.

HTML and CSS techniques and tools

Traducir un módulo de Drupal

A continuación resumo los pasos que hay que realizar para traducir un módulo específico de esos que nos bajamos para instalar en Drupal.

Primera Etapa:

  Descargar el módulo potx
  Descargar el programa Poedit
  Instalar dichos programas (obvio jaja!).

Segundo Etapa:

Lo siguiente es traducir un módulo, el módulo que
queramos traducir por ejemplo el módulo de Ubercart;
vamos al directorio de Ubercart y creamos un
sub-directorio que se llame "translations" para poner
en dicho directorio los archivos que vamos a generar.

Otra vez volvamos a la carpeta de Ubercart. En ese
lugar pegar los archivos potx.inc y potx-cli.php los
cuales se encuentran en el módulo de Potx.

En línea de comandos ubiquémonos en la carpeta de
Ubercart y ejecutamos el comando php potx-cli.php.
Ese comando genera mínimo un archivo con el nombre
"general.pot"

En ese archivo (general.pot) están todas las cadenas
de texto que se identificaron para traducir.

Lo que se necesita ahora es crear un archivo con
extención *.po el cual sirve para importarlo utilizando
la opción que se encuentra en "Traducir interfaz" del
sistema Drupal; pero primero generemos el archovo *.po.

El archivo *.po se genera con ayuda del programa
Poedit. En la opción de menú:

"Archivo" -> "Nuevo catálogo esde un archivo POT"

servirá para cargar el archivo creado anteriomente.
Una vez generado el archivo hay que guardarlo en el
directorio "Tranlations" para mantener la misma
convención que se mantiene con las otras traduciones
existentes en Drupal.

Lo demás es más que obvio, simplemente proceda a
traducir cada cadena usando el mismo programa POEdit
y posteriormente importe el archivo a Drupal.

Como empezar el brete de diseño web.

En los siguientes enlaces se muestra como ir paso a paso con el diseño y desarrollo de un sitio web:

Ejemplo #1

Ejemplo #2

Imagen Rollover para menu

Para crear una imagen rollover por ejemplo para un menú, hay que preparar una única imagen con los estados que va a tener cuando se está inactivo, encima, etc.

En el archivo de estilos se puede agregar un código como el siguiente:


.button a:link,
.button a:visited
{
display:block;
overflow:hidden;
background-image:url(images/menu.png);
background-repeat:none;
height:0;
width:400px;
padding-top:100px;
background-position:0px 0px;
}

.button a:hover
{
background-position:0px -100px;
}

Animación con JQuery

Ejemplo:


Por supuesto, para que esto funcione tenemos que incluir el script
de JQuery a la página web.

<fieldset id="bloque" style="display:block">
<legent>Ejemplo</legent>
<br />
<input type='textbox' id="txt" name="txt" value="" />
<br />
<br />
<input type="button" id="btn" value="Press Me!" />
</fieldset>

<script type="text/javascript">

$("#btn").click
(
function()
{
$("#bloque").fadeOut("slow",function(){$("#bloque").fadeIn(1000);});
}
);

</script>

Este código hace que el elemento Fieldset desaparezca lentamente y vuelve a aparecer otra vez igualmente lentamente.

Javascript: Mostrar un objeto cada segundo

Este código consiste en hacer cambiar la propiedad opacity del objeto textbox. La propiedad opacity va aumentando desde 0 hasta 1 en intervalos de 0.1. Cuando se llega al valor 1, el ciclo se detiene y el cuadro de texto queda renderizado totalmente con opcidad completa.


<script type="text/javascript">
document.getElementById('txt').style.opacity = 0;

var opa = 0.0;
var intv;
start();
function start()
{
if (start.length == 0)
intv = setInterval("Aumentar();", 500);
else
/* El parámetro arguments[0] son los milisegundos. */
intv = setInterval("Aumentar();", arguments[0]);
}

function Aumentar()
{
opa = opa + 0.1;
document.getElementById('txt').style.opacity = opa;

if(opa>1)
{
clearInterval(intv);
document.getElementById('txt').value = "Stopped!";
}
}

</script>

Imprimir legible en PHP

Una forma rápida para imprimir el contenido de un arreglo en forma legible al ojo humano es utilizando la función print_r. Es interesante como imprime por ejemplo el contenido de un arreglo asociativo; por ejemplo el contenido de la variable global $_SERVER se puede imprimir rápidamente utilizando dicha función.

Ejemplo:

     <pre>
     print_r $SERVER;
     </pre>

Parte del resultado sería:

Array
(
    [REDIRECT_STATUS] => 200
    [HTTP_HOST] => localhost
    [SERVER_SOFTWARE] => Apache/2.2.11 (Win32) PHP/5.2.8
    [SERVER_NAME] => localhost
    [SERVER_ADDR] => 127.0.0.1
    [SERVER_PORT] => 80
    [REMOTE_ADDR] => 127.0.0.1
    ...
)

Escritorio 3D para Windows

Hasta el momento, lo mejor que he instalado en mi máquina para simular un escritorio 3D es DeskHedron, definitivamente no se acerca al Compiz Fusion que se puede instalar en los sistemas Linux, pero bueno!

Descargar programa

En el sitio oficial también se pueden descargar otros programas interesantes.

Código PHP directamente en nodos de Drupal

No basta con poner código php por ejemplo en una página o bloque de Drupal, lo importante para que funcione es activar el módulo PHP Filter que por defecto viene deshabilitado.

Sitios multilenguaje en Drupal

Una de las ventajas de Drupal es la gran facilidad que posee para crear sitios Web multilenguaje. Con éste CMS se puede colocar un nuevo bloque en cualquier parte de la página web la cual permite escoger el idioma para el sitio y no hay que programar absolutamente nada, típico de éste CMS!

En el siguiente enlace explican en detalle como lograr esta característica: ver enlace

Nota: En Administrador->Configuración del Sitio->Lenguajes->Configurar, escoger cualquier opción que no sea "Ninguno|None", para que el bloque se pueda ver.

Drupal tools para desarrollar

En el siguiente enlace se encuentra una buena ayuda para desarrollar sitios web hechos con Drupal. Los encargados de Drupal recomiendan las siguientes herramientas: ver aquí

También hay detalles sobre como configurar las diferentes herramientas como por ejemplo el Eclipse en caso de que se quira usar.

Virtual Host en Apache 2.2 (Drupal+Windows)

Los sitios virtuales en un único servidor de páginas web como Apache es la técnica usada para poder tener acceso a diferentes sitios web o aplicaciones web que legalmente hablando están hospeados en la misma computadora o distribuidos en otras computadoras.

El punto es que si por ejemplo tenemos ya creado un sitio y lo accesamos desde la barra de direcciones del navegador web de la forma http://localhost/sitio1 y también tenemos creado otro sitio y lo accesamos de la forma http://localhost/sitio2, veremos que los estamos accesando explícitamente, pues estamos indicando la subcarpeta donde hemos guardado a cada sitio web. En éste caso se puede deducir que yo tengo un sitio web en una subcarpeta llamada "sitio1" y que también tengo otra subcarpeta llamada "sitio2".

Ahora bien, es posible con Apache, crear lo que se llaman sitios virtuales con la intención de que podamos utilizar direcciones URL de la forma a la que generalmente estamos acostumbrados utilizando el conocidícimo www y el punto com, por ejemplo:

URL Original URL Virtual o ficticia (puede ser cualquier URL deseada).
http://sitio1 ----> www.sitio1.com
http://sitio2 ----> www.sitio2.com

Para lograr el efecto deseado hay que configurar los siguientes archivos:

C:\WINDOWS\system32\drivers\etc\hosts
C:\wamp\bin\apache\Apache2.2.11\conf\extra\httpd-vhosts.conf
C:\wamp\bin\apache\Apache2.2.11\conf\httpd.conf

Además también hay que cambiar el nombre a la carpeta donde están todos los archivos del sitio web que queremos mostrar (donde instalamos drupal), por ejemplo si tenemos:

C:\wamp\www\sitio1\sites\default

Hay que ponerlo ahora como:

C:\wamp\www\sitio1\sites\www.sitio1.com


Configuración del archivo Hosts:

Agregar una línea según los sitios virtuales que vamos a tener. Cada línea se compone de la IP local, un espacio y luego el nombre del sitio. Originalmente ya debería existir la línea para hacer referencia a "localhost", entonces yo agregaría dos líneas más para los sitios web virtuales.

127.0.0.1 localhost
127.0.0.1 www.sitio1.com
127.0.0.1 www.sitio2.com

Obviamente la IP tiene que ser la misma porque los datos los tengo en la misma computadora.

Configuración de httpd-vhosts.conf:

En éste archivo hay que agregar lo siguiente:

NameVirtualHost *:80

<virtualhost 80="">
ServerName localhost:80
DocumentRoot "C:/wamp/www"
</virtualhost>

<virtualhost 80="">
ServerName www.sitio1.com
DocumentRoot "c:/wamp/www/www.sitio1.com"
</virtualhost>

<virtualhost 80="">
ServerName www.sitio2.com
DocumentRoot "c:/wamp/www/www.sitio2.com"
</virtualhost>

La línea de código que dice "NameVirtualHost *:80" generalmente ya está, por lo que no hay que cambiarla.

Para más detalles sobre la directiva <VirtualHost> recomiendo leer los siguientes sitios:

Name-based Virtual Host Support
Multi-site on Windows


Configuración de httpd.conf:

En éste archivo solo hay que activar una línea que originalmente está como comentario. La línea es:

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

La línea que tiene el include es a quién tenemos que activar removiendo el signo #. De está forma se podrá hacer referencia al archivo httpd-vhosts.conf el cual configuramos anteriormente.

Finalmente, ya se podrá utilizar la URL citadas, pero recordemos que hay que reiniciar el servidor web para que los cambios tengan efecto:

www.sitio1.com
www.sitio2.com

Cuando aparece el siguiente error:

Forbidden

You don't have permission to access / on this server.

Significa que no se agregó el servidor virtual en el archivo http-vhosts.conf de Apache o el caso de Linux ver si siguiente link.

También significa que en httpd.conf hay que agregar la directiva
<Directory>:
<Directory "c:/xxx/xxx/www/demo">
#
# Possible values for the Options directive are "None", "All",
# or any combination of:
# Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
# Note that "MultiViews" must be named *explicitly* --- "Options All"
# doesn't give it to you.
#
# The Options directive is both complicated and important. Please see
# http://httpd.apache.org/docs/2.2/mod/core.html#options
# for more information.
#
Options Indexes FollowSymLinks

#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# Options FileInfo AuthConfig Limit
#
AllowOverride all

#
# Controls who can get stuff from this server.
#

#onlineoffline tag - don't remove
Order Deny,Allow
Allow from all
Allow from 186.xx.xx.xx
</Directory>


Ayuda en En La PC

Seguridad en Drupal con el CRON

Ver Link