Archivo de la categoría: HTML

Creative Tim – Dale un look profesional a tu web

01/03/2016 Rubén Lacasa Mas Deja un comentario

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.

Tema Awesome landing page de Creative Tim

Tema Get Shit Done de Creative Tim

Tema Paper Kit de Creative Tim

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.

Diseño,HTML,Web

Required en radio o checkbox multiple

12/11/2014 Rubén Lacasa Mas Deja un comentario

A veces cuando diseñamos un formulario tenemos que incluir en este elementos radio o checkbox, y queremos que estos sean obligatorios, en el resto de elementos lo podemos tener claro le ponemos el atributo «required» y ya, pero estos elementos sueles dar multiples opciones, entonces que hacemos, lo ponemos en todos el atributo «required», pues si, esa es una de las soluciones, pero hay otra mas sencilla, que es ponerlo solo en el ultimo.


<input type='checkbox' name='opcion' value='si' required>

<input type='checkbox' name='opcion' value='no' required>


<input type='checkbox' name='opcion' value='si'>

<input type='checkbox' name='opcion' value='no' required>

Ejemplo: http://www.sacredheartprimary.co.uk/macss-js/webforms2/testsuite/021.html

CSS,Diseño,HTML,Web

Generador de botones CSS

07/04/2014 Rubén Lacasa Mas Deja un comentario

Buscando por internet he encontrado esta pagina en la cual podemos crear nuestros botones personalizados y generar el código para usarlos en nuestra web.

http://www.cssbuttongenerator.com/

CSS,Diseño,HTML,JavaScript,Programación

CodePen – Comparte tus ejemplos HTML CSS JS

14/03/2014 Rubén Lacasa Mas Deja un comentario

CodePen es un editor HTML, CSS y Javascript en nuestro navegador el cual nos permite generar vistas previas de nuestros ejemplos, ademas podemos compartir estos. Aparte de esto es también una red social y colaborativa de proyectos y nos permite probar nuestros desarrollos en distintos dispositivos.

http://codepen.io

Diseño,HTML,SEO,Varios

Cuidando el diseño de nuestra pagina web para mejorar el SEO

04/03/2014 Rubén Lacasa Mas 2 comentarios

Hace unos dias lei en comenzandodecero.com un articulo sobre como hay que cuidar el diseño de nuestra web para mejorar el SEO, en el se destacan tres aspectos que tenemos que tener en cuenta a la hora de tener bien posicionada nuestra web, estos son:

Velocidad de carga de la web.
Adaptabilidad a cualquier tamaño y dispositivo.
Uso correcto de los meta tags, sobre todo el titulo y la descripción.

Destacar que las keywords ya no son importantes, es mas hoy en día casi es mejor no ponerlas.

http://comenzandodecero.com/cuidando-el-diseno-web-de-una-pagina-para-mejorar-el-seo/

Diseño,HTML,Programación,Web

Introducción al desarrollo web HTML5 con Google Drive

03/03/2014 Rubén Lacasa Mas 3 comentarios

Os dejo el siguiente enlace a un curso compuesto en 5 sesiones en las cuales nos explican como crear una aplicación HTML5 en Google Drive, y como integrar distintas aplicaciones de Google en este sitio.

http://programa-con-google.blogspot.com.es/2014/02/google-developers-hackademy_26.html

Diseño,HTML,Web

5 errores evitables en el diseño web

14/02/2014 Rubén Lacasa Mas Deja un comentario

He encontrado esta pagina web en la que mas que errores a la hora de la implementación de una pagina web es mas a la hora de implementar o modificar una pagina web, y seguro que mas de uno sabe casos relacionados con esto, por ejemplo a todos nos suena la frase «Esta web, seguro que la ha hecho el primo o el sobrino de alguien» con todos mis respetos a los primos-sobrinos.

http://www.artincom.com/5-errores-evitables-en-diseno-web/

Diseño,HTML,JavaScript,Programación,Web

Bootstrap Datepicker

12/02/2014 Rubén Lacasa Mas Deja un comentario

Bootstrap se esta convirtiendo desde hace tiempo en casi un estandar a la hora de realizar paginas web. Algo que siempre nos lleva de cabeza, es el campo Date a la hora de introducir fechas, sobre todo para los que desarrollamos en castellano, ya que si bien algunos navegadores lo soportan, a la hora de mostrar la fecha esta aparece en un formato distinto al que usamos nosotros. He dedicado unas cuantas entradas a la personalización del Jquery datepicker en castellano pero creo que con este Datepicker para Bootstrap voy a tener que modificar unos cuantos de los que tengo desarrollados.

https://github.com/eternicode/bootstrap-datepicker

Aplicaciones,Diseño,Escritorio,HTML,IDE,Java,JavaScript,Linux,Mac,PHP,Programación,Python,Sublime Text 2,Web,Windows

Configurando Sublime Text 3

11/02/2014 Rubén Lacasa Mas Deja un comentario

Sublime Text es una aplicación para desarrollo la cual me esta ganando cada día mas. Tengo que decir que no soy asiduo de ella ya que para grandes proyectos uso PHPStorm y para cosas puntuales sigo siendo muy fan de TextMate, o incluso Vim, pero estas aplicaciones tienen unos «peros», los cuales los cubre el Sublime Text. Y diréis,¿ que «peros» le ves? pues bien, PHPStorm, como todos los entornos de programación basados en Java (Eclipse, Zend Studio, Netbeans), consume barbaridad de recursos, y el «peso» es muy grande. TextMate es solo para Mac, y Vim es solo para sistemas *NIX, ¿entonces,si necesitamos un entorno de programación ligero y que se pueda utilizar en todos los sistemas? pues ahí esta Sublime Text, valido para cualquier plataforma, ligero y potente.

Sublime Text es muy personalizable y lo podemos ajustar a nuestra manera de programar, y para ello contamos con cantidad de paquetes para complementarlo y personalizarlo a nuestro gusto. En este enlace nos explican como instalar estos complementos, personalizar fuentes y configurar el tema para dejarlo a nuestro gusto. Yo os recomiendo el Soda Light, sobre todo si estáis acostumbrados a TextMate.

A la hora del desarrollo yo os recomiendo instalar tambien los siguientes paquetes: SublimeLinter-php SublimeLinter-phpcs SublimeLinter-phpmd, HTML, SimpleTODO.

HTML,JavaScript,Programación,Web

Tether posiciona elementos de una manera eficiente

05/02/2014 Rubén Lacasa Mas Deja un comentario

Esta es una libreria muy sencilla que nos puede servir de mucha ayuda a la hora de mantener dos elementos juntos en una pagina web de una manera sencilla y efectiva.

Por ejemplo supongamos que tenemos dos divs, uno llamado yellowBox y otro llamado greenBox, y queremos que se mantengan unidos en la esquina de arriba: