Archivo de la categoría: Web

Diseño,HTML,Web

Input autocompletable sin Javascript – HTML Tips

Deja un comentario

El elemento datalist

Otro de los nuevos elementos que trae el HTML5 es el elemento datalist.  La documentación acerca de este elemento nos dice lo siguiente:

The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
 

Es decir, el elemento datalist representa un conjunto de opciones que nos muestran opciones predefinidas para otros controles. En la visualización el elemento y sus hijos están ocultos.

¿Como podemos utilizarlo?

A la hora de incluirlo dentro de nuestro código definimos el elemento y su conjunto de opciones, este elemento lo vincularemos por ejemplo con un campo input


<label>Airport: <input type="text" list="airports" name="to" />
<datalist id="<span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;>airports</span>"></datalist>
value='ATL' label="Atlanta">
value='MEM' label="Memphis">
value='LHR' label="London Heathrow">
value='LAX' label="Los Angeles">
value='FRA' label="Frankfurt">
 </datalist>
Al pulsar la tecla L se muestra los aeropuertos que empiezan con L
Al pulsar la tecla L se muestra los aeropuertos que empiezan con L

Como se ve en la imagen, nos aparece el value en negrita y  el valor de label un poco mas claro, y una vez seleccionado el valor, en el campo de texto se queda el valor del value.

Estos elementos pueden ser reutilizados dentro de una pagina web, por ejemplo si quisiéramos poner una lista de aeropuertos de origen y destino, nos podría valer con el mismo datalist.

Este elemento esta soportado por todos los navegadores a excepción de Safari.

Mas información:

http://www.w3.org/TR/html5/forms.html#the-datalist-element

http://www.w3schools.com/tags/tag_datalist.asp

Related articles
Enhanced by Zemanta
HTML,JavaScript,Programación,Web

Integrar Google Translator en nuestra web – Google Tips

2 comentarios

Hoy he vuelto a revisitar el complemento de Google para traducir una pagina web a cualquier idioma. En lineas generales lo ha hecho bastante bien, aunque, hay me he encontrado unos cuantos inconvenientes.

No voy a explicar aquí como integrarlo ya la web que genera el código a integrar esta muy clara y nos lo explica muy bien http://translate.google.com/translate_tools.

El primero es muy visual, ya que en la web que he traducido, estoy usando bootstrap y la barra de traducción de Google me tapa todo el menú.

El segundo ha sido, vamos a calificarlo como gracioso, ya que en la web que he traducido, hay palabras sueltas en inglés y cuando traduces la pagina al inglés, te traduce los términos ingleses al castellano.

Este segundo problema, mirando la documentación para webmasters he encontrado la manera de solucionarlo, y es establecer la clase «notranslate» a las palabras o frases que no quieres que traduzca. Por ejemplo


<p>La etiqueta <span class='notranslate'>form</span> se utiliza para crear formularios web</p>

Otra de las cosas a tener en cuenta a la hora de realizar traducciones de paginas web, sobre todo a la hora de posicionamiento es que, la web traducida no sera indexada en el directorio de Google. Lo dice clarito en la documentación

Search engine indexing
The automatically translated version of your web page will not be indexed by search engines.

Mas información: https://support.google.com/translate/#2641276

Enhanced by Zemanta
Diseño,HTML,JavaScript,Programación,Web

¿Por que el botón reset no vacia los campos hidden? – HTML Tips

Deja un comentario

Hoy mientras desarrollaba un formulario y comprobaba los datos que enviaba me he dado cuenta de algo que en todos los años que llevo programando no me había dado cuenta, o quizá no me había visto en esa situación. Explico el escenario, tengo un formulario en el cual pongo un rango de fechas y luego en otro campo tengo un autocompletar el cual cuando marco la selección, se queda el nombre en el campo visible y el id en un campo hidden. Al darle a buscar pues me busca los datos relacionados de ese id en ese rango de fechas. Pues bien, a la vez del botón enviar, he puesto un botón reset para limpiar el formulario, y me he dado cuenta que si por ejemplo buscaba solo entre rangos de fechas, sin buscar nada en el autocompletar, me buscaba filtrando por los datos anteriores.

Depurando he visto que si no ponía nada en el campo autocompletar ( el cual al cambiar establecía el valor en el campo hidden) este se mantenía con el valor establecido en la búsqueda anterior.

A esto uno se pregunta ¿el reset no lo borraba todos los datos de un formulario?, pues la respuesta es si y no.

Vamos en la documentación de la w3.org que nos dice acerca del estado hidden en los inputs

«El estado hidden representa un valor el cual no esta permitido que el usuario lo examine o lo manipule».

Y la definición de reset dice «El estado reset de un button representa un button que cuando se activa restablece el formulario».

Con estas definiciones, de primeras pensaríamos que no tiene sentido que al pulsar el reset  no se restablezcan los valores de un hidden, pero reflexionemos un momento y hagamosnos una pregunta ¿quien establece el valor del campo hidden? ¿el usuario? ¿o nosotros con una programación? La respuesta es la segunda, el usuario no establece el valor del campo hidden ni lo puede modificar, y la acción del reset la efectúa el usuario, por lo tanto, no puede modificar el valor del hidden.

Para solucionar esto, si estamos usando jQuery podemos hacerlo de una manera muy sencilla

$('button[type=reset]').click(function(){
    $('#idCampoHidden').val('');
});

En este ejemplo estoy usando button, y serviria igual poniendo input[type=reset] y luego en el nombre del campo, donde pone #idCampoHidden, lo sustituiremos por #nuestrocampohidden.
El estado hidden http://www.w3.org/community/webed/wiki/HTML/Elements/input/hidden

El estado reset http://www.w3.org/community/webed/wiki/HTML/Elements/input/reset

Programación,Web

Mejorar la velocidad de nuestro sitio Moodle

2 comentarios

Uno de los sitios que gestiono es una plataforma de formación basada en Moodle, y la verdad que es bastante completa y tiene todo lo que una plataforma de formación puede necesitar, aunque algunas cosas, en mi opinión son mejorables, y se podrían presentar de una manera mas clara.

Pero dentro de las cosas que mas me preocupaban era lo lento que funcionaba el sitio, y la verdad no comprendía como una plataforma con tanta comunidad detrás de ella y tan usada funcionara tan lenta. Primero pensé que podría ser del servidor,  pero la única web que tenia problemas de rendimiento era esta. Hasta que un día googleando descubrí esta pagina http://opensourceelearning.blogspot.com.es/2012/10/why-your-moodle-site-is-slow-five.html y la verdad, realizando los 5 pasos, y algún otro mas, la velocidad y el rendimiento de la plataforma se ha visto muy mejorado.

Los pasos que nos indica en la web son los siguientes:

  1. Deshabilitar las Copias de seguridad automáticas.  Esto se hace desde Administración del sitio > Cursos > Copias de seguridad > Copia de seguridad programada. Si esta opción no note diferencia, supongo que el problema puede venir cuando se realiza la copia de seguridad que baja el rendimiento.
  2. Deshabilitar las Estadísticas.  Esto se hace desde Administración del sitio > Características avanzadas. Esta opción me mejoro mucho el rendimiento.
  3. Deshabilitar el modo de diseño de temas. Esto se hace desde Administración del sitio > Apariencia > Temas > Ajustes de temas. Esta opción me mejoro mucho el rendimiento.
  4. Establecer el Mantener registros para igual o menor a 365 días. Esto lo establecemos desde Administración del sitio > Servidor > Limpieza. Esta opción no la cambie ya que necesito tener registros de muchos años atrás.
  5. Deshabilitar Usar la base de datos para información de la sesión. Esto se hace desde Administración del sitio > Servidor > Gestión de la sesión. Esta también mejoro mucho el rendimiento del sitio, y como apunte decir que no os asustéis si una vez deshabilitada se cierra la sesión, es normal, se vuelve a iniciar listo.

A parte de estos 5 puntos que nos recomiendan en esa web, hay otra cosa que hay que tener en cuenta y que a mi me ha servido para mejorar el rendimiento del sitio, y es eliminar paneles innecesarios en las paginas, es decir, usar solo los necesarios, y si tenéis que mostrar listados de cursos por pantalla intentar limitar el tamaño a mostrar a 10.

Espero que os sirvan estos consejos.

 

 

Apache,PHP,Programación,Web

Ocultar la extensión de nuestras paginas web – Apache Tips

2 comentarios

Apache Web Server

A veces, por el motivo que sea, puede que no nos interese que los visitantes que accedan a nuestra pagina web sepan como esta hecha, algunas veces este motivo es por motivos de seguridad, y otras, por motivos de posicionamiento web, queda bastante mejor tener un enlace de la manera http://midominio.com/contacta que http://midominio.com/contacta.php .

Si el servidor en el cual esta nuestra web es Apache y tiene el mod_rewrite habilitado podemos hacerlo creando un fichero .htaccess en la raíz de nuestro sitio de la siguiente manera:


Options Indexes FollowSymLinks
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ – [NC,L]
RewriteRule ^([A-Za-z0-9-]+)/?$ $1.php
ErrorDocument 404 /404.php

view raw

.htaccess

hosted with ❤ by GitHub

Este fichero esta configurado para ficheros php, si lo queremos hacer con ficheros html o htm solo tenemos que cambiar donde pone .php en la linea 7 por .html o .htm.

Decir también que la ultima linea no es necesaria, pero a mi me gusta ponerla ya que así evitamos que si alguien «escribe mal» la ruta no salga un error de servidor. Lo de «escribe mal» lo pongo entre comillas ya que muchas veces se hace intencionadamente con el único objetivo de conocer las características del servidor en el cual se esta ejecutando la web, así que no cuesta nada crear nuestra propia pagina de error o bien que aparezca la principal del sitio.

Enhanced by Zemanta
MySQL,Programación,Web

Error en el acceso a nuestro sitio Drupal – Drupal Tips

6 comentarios

Dentro de los sitiós que mantengo, tengo uno que me da mas de un dolor de cabeza, este fue desarrollado en su dia con Drupal,  y un buen dia paso a mis manos para su mantenimiento, y no voy a decir mas que cada dos por tres me sorprende con alguna.  Una de las que me hace de vez en cuando es no dejar acceder a los usuarios registrados. El usuario intenta acceder con su usuario y contraseña y sin ningun tipo de mensaje vuelve a la misma pantalla.

Una de las cosas que tenemos que hacer en este caso es acceder al registro de errores (error.log) y visualizar a ver que esta pasando. Si el registro tiene unas linea como esta:


<code>Table './dbname/sessions' is marked as crashed and should be repaired</code>

La solución es simple, siempre y cuando tengamos acceso claro.

Accederemos via phpmyadmin a nuestra base de datos y en el listado de estructura marcaremos la tabla `sessions` y a continuación seleccionaremos la opcion repair table o reparar tabla.

Una vez realizado esto ya podremos acceder normalmente a nuestro sitio Drupal.

Mas información acerca de este error https://drupal.org/node/833762

PHP,Programación,Web

Convertir colores VBA a RGB o Hexadecimal – PHP Tips

Deja un comentario

Recientemente en una aplicación que estoy desarrollando, me encontre con la necesidad de convertir los valores de los colores que usa visual basic a hexadecimal o rgb para poder usarlos en web. Googleando encontre el siguiente enlace en el cual se explicaba como hacerlo con visual basic, asi que basandome en la función que se explicaba desarrolle una función en PHP para poder hacerlo. Esta función la tengo publicada en Gist para el que la pueda necesitar


/**
* vbaColorToWeb.php Class to convert VBA color to web Color
*
*
* PHP Version 5.3
*
* @author Ruben Lacasa Mas <ruben@rubenlacasa.es>
* @copyright 2013 Ruben Lacasa Mas http://rubenlacasa.es
* @license http://creativecommons.org/licenses/by-nc-nd/3.0
* CC-BY-NC-ND-3.0
* @link https://gist.github.com/sbarrat/5908351
*/
/**
* @param $color Color vba
* @param bool $hex if $hex is true return hex value if not return rgb value
* @return string
*/
function vbaColorToWeb($color, $hex = false)
{
$red = $color % 256;
$green = ($color / 256) % 256;
$blue = ($color / 256 / 256) % 256;
if ($hex) {
return "#".dechex($red).dechex($green).dechex($blue);
} else {
return "rgb(".$red.", ".$green.", ".$blue.")";
}
}
// Example
$color = 8429680;
echo vbaColorToWeb($color); // Shows rbg(112, 160, 128)
echo vbaColorToWeb($color, true); // Shows #70a080

view raw

vbaColorToWeb.php

hosted with ❤ by GitHub

Diseño,HTML,Programación,Web

HTML5 en versiones anteriores de Internet Explorer 9 – HTML5 Tips

Deja un comentario

Uno de los problemas que nos encontramos a la hora de diseñar paginas con HTML5 es la compatibilidad con navegadores antiguos. Hay muchos usuarios que usan versiones anteriores a Internet Explorer 9, y en esas versiones, no reconocen los nuevos elementos de HTML5. Una de las maneras de solucionar esto es incluyendo el script HTML5 shiv en la cabecera dentro de un condicional, para que cuando el navegador sea menor que esa versión lo cargue y así pueda leer los elementos HTML5.


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Html5 shivEnhanced by Zemanta
Diseño,HTML,Programación,Web

El atributo Charset – HTML5 Tips

Deja un comentario

Uno de los atributos que debemos especificar en toda pagina web es el atributo Charset, este va a definir que tipo de caracteres vamos a utilizar en la web, para que el navegador lo detecte y lo visualice correctamente.

Este atributo, en HTML4 lo definimos de la siguiente manera


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Con HTML5 definir se ha introducido el atributo charset el y es mas sencillo


<meta class="charset="UTF-8">

Para asegurarnos que todos los navegadores leen la propiedad de codificación de caracteres, la declaración de este debe ser incluida en los primeros 512 caracteres de nuestro documento, es decir, para evitar problemas, debería definirse inmediatamente después de la etiqueta head.

W3schools HTML meta tag

Enhanced by Zemanta
Diseño,HTML,Programación,Web

Web Storage – Novedades HTML5

Deja un comentario

¿Que es el HTML5 Web Storage?

Una de las novedades en el HTML5 es el uso de Web Storage para almacenar los datos de la web en el navegador. Hasta aquí parecería que estoy hablando de las cookies pero a diferencia de estas el Web Storage es mas seguro y rápido y los datos no se incluyen en cada consulta, solo cuando se necesitan, ademas es posible guardar mucha cantidad de datos sin afectar al rendimiento de la web.

Navegadores Soportados

El Web Storage esta soportado en Internet Explorer 8+, Firefox, Opera, Chrome y Safari.

localStorage y sessionStorage

Hay dos nuevos objetos para almacenar los datos del cliente:

* localStorage – Almacena los datos sin limite de tiempo.

*sessionStorage – Almacena los datos durante una sesión.

El Objeto localStorage

El objeto localStorage almacena los datos indefinidamente. Los datos no son borrados cuando el navegador se cierra y estarán disponibles al día siguiente, semana, o año.


localStorage.propiedad = 'valor' //guarda el dato

console.log(localStorage.propiedad) //devuelve el dato

El objeto sessionStorage

El objeto sessionStorage es igual que el objeto localStorage, excepto que almacena el datos solo una sesión. Los datos son eliminados cuando el usuario cierra la ventana del navegador

HTML5 Web Storage (en ingles)