Archivo de la etiqueta: web

Creative Tim – Dale un look profesional a tu web

Buscando inspiración y recursos para el desarrollo de nuevos proyectos di con la web de Creative Tim y sus diseños y plantillas para web son muy buenos. Dentro de los temas que nos ofrecen destacaria el Paper Kit, Get Shit Done Kit y Awesome Landing Page.
Estos Kits son gratuitos para uso personal, y en el caso que seas desarrollador tiene un coste de 19€ cada uno.
Yo os recomendaria descargar las versiones gratuitas primero y enredar con ellas. Tengo que decir que la documentación y los ejemplos que hay en las descargas dan mucha ayuda a la hora de realizar tus desarrollos. Decir que todos los temas estan basados en Bootstrap 3, y si tienes un poco de experiencia con el, no vas a tener problemas a la hora de integrarlos.

Para poder descargarlos hay que registrarse en la web, y uno de los primeros correos que te envian, por lo menos en mi caso, es un codigo de descuento para comprar uno de sus temas.

Temas gratuitos Bootstrap

BootstrapBootstrap, como muchos de vosotros ya conocéis, es uno de los frameworks para diseño de paginas web mas usado hoy en día. Esto hace que los recursos que podemos encontrar para personalizarlo a nuestro gusto son numerosos. En la entrada de Bootswhatch ya veíamos unos cuantos temas para usar gratuitamente tanto en la versión 2 como en 3 de Bootstrap, en la pagina de Black Tie podemos encontrar una gran colección de temas, destinados para la versión 3 para poder aplicar según la temática de nuestra web.

Como eliminar las extensiones .php, .html y htm de nuestra pagina web con .htaccess

Apache Web Server

A la hora de presentar nuestra pagina web, a veces nos puede interesar, que el usuario no sepa como esta hecha la pagina web, o simplemente queremos simplificar el enlace para que se pueda acceder de una manera sencilla.

He encontrado esta pagina web, la cual merece ser visitada, ya que esta muy bien hecha, en la cual nos explican de una manera muy sencilla, aunque en inglés, de como configurar, si usamos Apache, con .htaccess, para ocultar las extensiones.

http://alexcican.com/post/how-to-remove-php-html-htm-extensions-with-htaccess/

Convertidor de RGB a Hexadecimal

Seguramente en algún momento mientras estamos desarrollando hemos necesitado convertir un color de RGB a Hexadecimal, por ejemplo, en los nuevos diseños de paginas web, se esta empezando a usar cada vez mas el RGB o RGBA a la hora de establecer los colores, y puede que necesitemos trasladar ese color a hexadecimal, para ello podemos usar la siguiente pagina web para que nos convierta el color http://www.javascripter.net/faq/rgbtohex.htm

Como se mueven nuestros ojos cuando vemos una pagina web

Para los que nos dedicamos al desarrollo/diseño de paginas web, es bastante conocido el principio de como hay que ubicar los elementos  para que el usuario vea primero lo que queremos que vea primero. La siguiente imagen nos muestra como ubicar y distribuir los elementos para que nuestra distribución sea efectiva.

Articulo original en ingles: http://www.getelastic.com/eye-tracking-infographic/

eye-tracking-2

100 consejos SEO para poner tu blog en lo mas alto de Google – SEO Tips

Hace años con la explosión de internet se impuso una máxima que era “Si no estas en internet no existes”, hoy en día esa frase sigue vigente pero se completa con esta otra ” y si no apareces en la primera pagina de los buscadores es como si no existieras”. Desde la primera parte de la frase hasta la actual el trabajo a la hora de desarrollar un sitio web ha cambiado, y lo que podía considerarse como una tarea propia del desarrollador se ha convertido en una tarea especifica de un especialista y dedicar mas tiempo que el que mucha gente se cree. El siguiente articulo nos puede ayudar a la hora de posicionar nuestra/as paginas en lo mas alto de internet.
https://exploreb2b.com/articles/100-seo-tips-turn-your-blog-into-the-top-of-google

Enhanced by Zemanta

Input autocompletable sin Javascript – HTML Tips

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

Enhanced by Zemanta

Integrar Google Translator en nuestra web – Google Tips

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

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

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

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

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:

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