• info@oscarperez.es

Archivo de la etiqueta CSS3

Construir select editables para nuestros formularios

En alguna ocasión, nos hemos visto en la necesidad de tener select editables en nuestros formularios. Esto ocurre cuando queremos elegir una opción de una lista desplegables, pero también poder añadir un elemento nuevo a esta lista. He encontrado varias soluciones, pero la que más me gustó y la más sencilla de implementar es la que os comento. No es necesario añadir librería de javaScript. Únicamente unas lineas de CSS y de HTML.

El código CSS es el siguiente:

.select-editable {position:relative; background-color:white; border:solid grey 1px;  width:120px; height:18px;}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;}
.select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}

Y el código HTML, donde se define el select (y lo necesario) es el siguiente:

<div class="select-editable">
  <select onchange="this.nextElementSibling.value=this.value">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" name="format" value=""/>
</div>

Esta solución la encontré en StackOverflow, y podeís ver el funcionamiento en https://jsfiddle.net/nwH8A/

La lógica es sencilla. Básicamente lo que hace es, usando CSS, superponer el campo <input> encima del campo <select>, y con onchange=»this.nextElementSibling.value=this.value» hace que el valor del <select> cuando cambia (onchange) se guarde en el campo<input>. Y es el campo <input>, el que debéis de recoger en el POST, por que es donde va la información. En este caso se recogería con $_POST[«format»]

Yo lo único que hice es modificar un poco el CSS, para poder usarlo con Bootstrap. Este sería mi código CSS para que el <select> se vea con la apariencia que se muestra en Bootstrap.

.select-editable {position:relative}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; color: #555; width:99%; height: 34px; padding: 4px; margin:0; border: 1px solid #ccc; border-radius: 4px;}
.select-editable input  {position:absolute; top:0px; left:0px; font-size:14px; color: #555; width:90%; height: 31px; padding: 4px; margin:0; border: none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}

Hay más opciones y soluciones, pero muchas de ellas necesitan añadir ficheros js y css a nuestro proyecto, y esta me pareció «la mar de sencilla».

Añadir un icono a los pdf que insertamos en una entrada de WordPress

En algún momento nos hemos visto en la necesidad de insertar un pdf, doc, xls… dentro de una entrada en nuestro wordpress.
Usando al botón de «Añadir Objeto» en el menú de edición de entradas es sencillo. Lo que ocurre, es que a veces, y cada vez más, queremos que al lado del enlace aparezca un icono tal como aparece en la imagen adjunta.

Seguro que hay plugins que lo puede hacer, pero yo prefiero usar jQuery y Css3.

Lo primero es crear en nuestro style.css las clases necesarias para decorar estos enlaces.

Yo voy a crear tres clases nuevas, una para documentos pdf’s, otra para doc’s y otra para xls’s. Si necesitas más lo único que tienes que hacer es ir añadiendo las que vayas necesitando.

El código es el siguiente:

.icon_pdf { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_pdf.png') no-repeat center left }
.icon_doc { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_doc.png') no-repeat center left }
.icon_xls { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_xls.png') no-repeat center left }

Ten en cuenta que seguramente debas cambiar el path donde se encuentran los iconos y poner la ubicación donde se encuentran los tuyos.

Y ahora viene lo divertido.
¿Cómo añadimos estas clases a los distintos tipos de documentos que hay en la nueva entrada del wordpress?
Para ello vamos a usar jQuery, y por ello tienes que tener «cargado» el javascript jQuery antes. Una manera muy sencilla de cargar jQuery es poner en nuestra pagina el siguiente código:

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

P.D. Puedes usar la versión que más te guste de jQuery. Para ello lo único que tienes que hacer es cambiar la url en la linea anterior.

Pues una vez que estamos seguros que tenemos «cargado» correctamente el jQuery, añadimos el código que va a realizar la visualización del icono correspondiente al lado del enlace al documento que hemos insertado.

Este es el código:

<script type="text/javascript">    
    $(document).ready(function() {
        var fileTypes = {
          // extension:nombre de la clase
          doc: 'icon_doc', xls: 'icon_xls', pdf: 'icon_pdf'
        };

        $.each(fileTypes, function(extension, classname) {
            $('a[href$="' + extension + '"]').addClass( classname );
        });
    });
</script>

En la linea 2 creamos una variable cuyo nombre es ‘fileTypes‘ que es un array de registros de tipo clave/valor. Esto quiere decir, que el primer campo de cada registro es la clave y el segundo campo es el valor. Como clave usaremos la extensión del fichero (pdf, doc, xls) y en el valor guardarmos e nombre de la clase CSS que hemos creado en el fichero style.css.

En la linea 8, usamos la función .each(), para recorrer los elementos que están dentro del $(document), que es el elemento al que has hecho referencia en la linea 2.

En la linea 9, lo que hacemos es que dependiendo de la extensión que tiene el elemento que hay dentro de la entrada (el elemento que hemos insertado, ya sea el fichero pdf, fichero doc..) le añadimos la clase que le corresponde y que hemos definido dentro del array fileTypes.

Con un ejemplo, me explicaré un poco mejor:

1. El script recorre toda la entrada (o post), y encuentra un fichero pdf.
2. Con la extensión pdf, busca en la variable fileTypes el nombre de la clase que le corresponde a la extensión pdf. En este caso es ‘icon_pdf‘ ya que hemos definido la siguiente entrada dentro de fileTypes: pdf:’icon_pdf’.
3. A dicho elemento le añade la clase correcta en la linea 9: addClass( classname );

Espero que os sea útil

Ayuntamiento Real Sitio de San Ildefonso

Soy el responsable del departamento de Informática del Ayuntamiento del Real Sitio de San Ildefonso.

Mi cometido es mantener el parque informático y mantenimiento y desarrollo de todas las webs municipales.

La principal web es la Página oficial del Ayuntamiento del Real Sitio de San Ildefonso.

En esta web se refleja la información que se genera en el pueblo del Real Sitio de San Ildefonso (Segovia),  ya sean noticias propias del ayuntamiento o información cultural

EL CMS usado es WordPress. También se usa PHP y jQuery para diversas funcionalidades que se han implementado fuera del CMS, y tambien se han programado plugins específicos para mostrar información relativa al Ayuntamiento del Real Sitio de San Ildefonso.

El tema que se usa es un tema propio, es decir, construido integramente para este proyecto.

Para el diseño se ha usado HTML5 y CCS3, además el diseño es adaptativo y se puede visualizar en ordenadores, tablets y móviles

Pero la web oficial del ayuntamiento no es la única .  La lista de webs que desarrollo y mantengo se va incrementando poco a poco:

También diseño y desarrollo una intranet para uso interno de los trabajadores del Ayuntamiento

ShoppinginMadrid

Este proyecto es el trabajo final del Master que realicé en CICE en 2014 sobre Desarrollo y Diseño de proyectos Web.

Es una página web de ámbito turístico-comercial, donde muestro información comercial (tiendas, centros comerciales, grandes almacenes…) de algunas zonas de Madrid. Una web para saber que tiendas hay en distintas zonas comerciales de Madrid.

En principio estas zonas son: Sol-Arenal-Mayor, Gran Vía, Fuencarral, Serrano-Goya. En resumen, será un listado de tiendas y está enfocada para los turistas que visitan Madrid.

Al estar enfocada al turista, se ha realizado un sistema de multilenguaje, que en principio está disponible en inglés y español, y donde el lenguaje por defecto es el inglés.

El desarrollo se ha hecho en J2ee (usando los frameworks Struts e Hibernate)Php, Mysql, Html5, Css3, Javascript, jQuery, Ajax y el CMS también es propio y desarrollado por mí.

Se implementan llamadas Ajax para recuperar la información de base de datos. Uno de los retos con los que me encontré fué precisamente como implementar las llamadas Ajax con el frameworks Struts. Cuando lo consigues parece fácil pero hasta que llega ese momento, te vuelves un poco loco.

Usé HTML5 y CSS3, y el diseño web es adaptativo, con lo cual se visualiza perfectamente en móviles y tablets, lo que facilita el uso de la web para el turista que se encuentra en la calle.

Si quieres ver el código lo puedes descargar de GitHub

Sociedad Castellarnau

Página de la Sociedad Castellarnau. Está online desde 2010. Url

La Sociedad Castellarnau, de la que soy miembro, me encargó la realización de su página web. En esta página web, se refleja las inquietudes, pensamientos y conocimientos de los miembros de este Sociedad. El nexo común de todos nosotros es el amor que tenemos por el entorno de La Granja, Valsaín y la Sierra del Guadarrama.

La tecnología usada en la primera versión fué Php, Mysql, Html, Css, Javascript y el CMS también era propio y desarrollado por mí.

La he renovado en octubre del 2016 y he usado como CMS WordPress, y como tecnologías de diseño y programación Php, Mysql, Html5, Css3, Javascript, jQuery, Ajax, adaptando el diseño para dispositivos móviles. Para algunas funcionalidades programé plugins propios para guardar información en la base de datos y después mostrarla en la web pública.

Webdelagranja.com

Página personal sobre mi pueblo, Real Sitio de San Ildefonso. Está online desde 2006 y ahora, en el 2016, llegó el momento de rejuvenecerla.

En esta web se refleja toda (o casi toda) la información referente al pueblo de La Granja de San Ildefonso (Segovia). Este es el pueblo donde nací y crecí, y mi única intención es dar a conocer mi pueblo y las noticias referidas a él, ya sea para el turista que quiera visitarnos como para el vecino que quiera conocer las actividades y noticias que se producen en La Granja

La tecnología usada en l aprimera versión fué Php, Mysql, Html, Css, Javascript, Ajax y el CMS también era propio y desarrollado por mí.

El CMS, al ser propio, le aporta a esta web las funcionalidades necesarias para mostrar la información tal como yo quiero, las cuales no venían reflejadas en los CMS más comunes usados en aquellos años en el desarrollo web (WordPress, Joomla, Drupal). Otro de los motivos para no usar un CMS fué que está web la estaba manteniendo yo mismo, con lo cual, no necesitaba un CMS que me facilite la publicación de nueva información.

Pero, al hacer la nueva versión, evalué las necesidades y decidí usar WordPress para ello.

La he renovado en octubre del 2016 y he usado como CMS WordPress, y como tecnologías de diseño y programación Php, Mysql, Html5, Css3, Javascript, jQuery, Ajax, adaptando el diseño para dispositivos móviles. Adapté un tema de wordpress y para algunas funcionalidades programé plugins propios para guardar información en la base de datos y después mostrarla en la web.

1