toggle

Componente de Tabla como RadioGroup

Hoy he tenido que desarrollar un nuevo componente, para un muy interesante proyecto que estamos empezando a desarrollar en Paradigma.

Este componte debe de mostrarse como una tabla, tal y como podéis ver en la siguiente imagen con el diseño creado por el artistazo @davidmontalvo, pero debe de actuar como un grupo de input tipo radio, ya que el usuario podrá seleccionar cada una de las celdas.

leer mas

Android no me actualiza las aplicaciones

Ya se que estoy «meando fuera del tiesto» al escribir este post, pero es que me ha costado mucho encontrar la solución a este problema.

Mi Android,  un Samsung Galaxy S plus I9001, desde un tiempo a esta parte no actualizaba ninguna de las aplicaciones.

Me apare que tengo actualizaciones pendientes, y empiezan a descargar, pero nunca llega al paso de instalación.

La solución

Al parecer el problema es un bug que tiene una versión de Google Play market para los terminales de Samsung Galaxy.

Tan solo hay que desinstalar la aplicación de Google Play Store, y reiniciar.

Con este sencillo paso, todo debería de de volver a la normalidad, y por fin poder descargar actualizaciones y nuevas aplicaciones.

Metaetiquetas SEO

Nunca viene mal recordar conceptos básicos, y en este caso toca turno de las metaetiquetas.

Estas son las metaetiquetas que se suelen usar en una web (incluyo las de geoposicionamiento):

<title>Nombre descriptivo y único de cada una de las paginas de tu web</title>

<meta http-equiv="content-language" content="en-gb" /> <!-- "es-es" si es española-->
<meta http-equiv="language" content="english" />  <!-- spanish -->
<meta name='geo.position' content="40.452537;-3.726412"> <!-- coordenadas del lugar físico -->
<meta name="ICBM" content="40.452537,-3.726412" />
<meta name='geo.placename' CONTENT='Madrid'> <!-- nombre de la ciudad -->
<meta name='geo.country' content="ES">
<meta name='DC.title' content="Titulo único de la página">
<meta name="keywords" content="palabras, clave, descritivas" />
<meta name="description" content="Descripción de la pagina" />
<meta property="og:title" content="Titulo único de la página"/>
<meta property="og:image" content="http://url/logo.png"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.domain.com"/>
<meta property="og:site_name" content="Nombre de la web"/>
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="es_ES" />
<head profile="http://microformats.org/profile/hcalendar">
<meta name="robots" content="index, follow" />

y recuerda insertarlas todas dentro de la cabecera de la página:


<head>

...

</head>

Selector :nth-child CSS

Siempre me resulta muy difícil acordarme de como debo de usar los selectores :nth-child de CSS. Al final siempre tengo que buscar en google alguna pagina que me lo explique bien.

Hoy he tenido la suerte de encontrarme con el articulo Useful :nth-child Recipes de página de css-tricks.com, en el que a través de unos sencillos ejemplos podemos ver los típicos casos de usos de este selector.

También podemos probar tanto como queramos en este :nth tester

/* Seleccionar el elemento 5 */
li:nth-child(5) { ...  }

/* Seleccionar todos menos los primeros 5 elementos */
li:nth-child(n+6) {  ... }

/* Seleccionaar los primeros 5 elementos */
li:nth:child(-n+5) {  ... }

/* Seleccionar un elemento cada 4 */
li:nth-child(4n+1) {  ... }

/* Seleccionar solo los elementos impares */
li:nth-child(odd) {  ... }

/* Seleccionar solo los elementos pares */
li:nth-child(even) {  ... }

/* Seleccionar el último elemento */
li:last-child {  ... }

/* Seleccionar el penúltimo elemento */
li:nth-last-child(2) { ... }

El próximo día ya me acordaré que debo de acudir a esta web directamente.

Crónica de SpainJS

Ahora que tengo el SpainJS totalmente reciente quiero tomarme la libertad de escribir mis ideas sobre este evento.

Lo primero agradecer a los organizadores por atreverse a montar este tinglado desde cero. Gracias a su valentía todos los presentes hemos tenido el lujo de escuchar a grandes referentes del sector.Tambien quiero destacar su simpatía y dedicación, atendiendo todas nuestras dudas, las presenciales, y las efectuadas por twitter.

Pero como también tenemos que tener espíritu crítico, y así poder todos mejorar hay aspectos que en mi opinión han sido mejorables.

leer mas

Llego la hora del responsive design

Ya era hora. Tanto hablar de responsive design, de internet en el móvil, etc, etc… y luego en casa del herrero… diseño fijo no adaptado para móviles.

He retomado el diseño del nuevo responsive vissit, que podéis ver a tamaño completo aquí.

De momento doy el diseño por cerrado, aunque cualquier comentario que me hagáis será muy tenido en cuenta. Ahora el siguiente paso es comenzar con la maquetación, y después de varios test lo subiré a producción para que podaís jugar con él.

El principal cambio de esta nueva versión será lo fluido de su maquetación, pero también hay ligeros cambios en el diseño: nuevo logotipo, y tipografía de los titulares y botones. He optado por una imagen más redondeada, que creo encaja más con el resto del diseño. También añadiré un par de slider en la home, uno con mis últimas imágenes  subidas a Instagram y otro con el portfolio, así como acortar la parte a mostrar de los post en la home, y añadir una navegación para recorrer las diferentes paginas de posts (no se como no me había dado cuenta hasta ahora que no lo tenía).

¿Os gusta? Hablar ahora o callar para siempre 😉

¿Qué debo conocer para empezar a Maquetar?

Una buena amiga me ha pedido recientemente ayuda para introducirse en el mundo de la maquetación. Aunque ya llevo muchos años maquetando, nunca he tenido que formar a nadie desde cero, y he querido aprovechar mis consejos para ella en un nuevo post.

La maquetación web se sabe donde empieza; en la combinación de HTML (estructura del código) y CSS (estilos aplicados al código HTML), pero donde acaba ya no está tan claro. Según a quien preguntes, algunos te dirán que termina ahí, y otros te dirán que el Javascript (comportamientos) también forma parte del «pack». Yo no tengo ninguna duda de que el no se puede separar Javascript y maquetación, y que un maquetador que no sabe aplicar Javascript en sus aplicaciones web, no es un buen maquetador.

Antiguamente las tres patas del «pack» se agrupaban en un fichero HTML, pero es una buena practica el desacoplar estructura (HMTL), de estilos (CSS) y de comportamientos (Javascript). Esto hace que el código esté mejor estructurado, sea mas limpio, y sea mas sencillo trabajar en equipo.

¿Por donde debo empezar?

Pues en mi opinión creo que se debe de empezar por conocer bien HTML. Es un lenguaje muy sencillo, y con el que muy rápido veremos resultados. Puedes consultar este manual online de introducción a HTML.

Posteriormente deberíamos de familiarizarnos con HTML5, la versión actual de HTML, para conocer el potencial actual y futuro de este lenguaje.

Una vez que nos sintamos cómodos con HTML, deberíamos pasar a conocer CSS, y profundizar todo lo que se pueda en las técnicas más avanzadas de CSS, ya que será la base de nuestro trabajo.

Con estos dos lenguajes de programación ya sabríamos lo básico para empezar a maquetar, pero a poco que maquetes vas a sentir la necesidad de conocer Javascript para ampliar tus superpoderes.

Deberías de conocer al menos lo básico de Javascript, y luego pasarte a un framework como jQuery, que facilitará mucho tu tarea de trabajar con Javascript.

¿y esto es todo?

Pues en lo que a conocimiento teórico se refiere si. Si lees todos los enlaces anteriores tendrás la base teórica necesaria para ser un buen maquetador, pero el 90% del éxito de tus trabajos se basaran en práctica, práctica y práctica.

Cuando veas paginas que tengas cosas que te gustan, no dudes en revisar su código, y averiguar como lo han hecho. Con estos ejercicios obtendrás mucho conocimiento práctico.

¿Que herramientas debo de usar?

Pues para crear y editar código yo te recomiendo que uses un editor de textos sencillos. Yo uso el notePad++, pero puedes usar con el que mas cómodo te sientas.

Podrías usar programas que te facilitarían mucho la tarea de maquetar páginas, como DreamWeaver, pero yo creo necesario el escribir tu propio código desde cero, sin ayudas, ni autocompletados, ya que este esfuerzo extra repercutirá de manera muy positiva en el conocimiento de las etiquetas, y en consecuencia en nuestra valía como maquetadores.

La herramienta de la que no te debes de separar ni a sol ni a sombra es del inspector de código de tu navegador favorito. Si usas Chrome, tendrás instalado por defecto el inspector de código (pulsa F12 en chrome, si usas windows, y lo verás). En cambio si eres de Firefox, tendrás que instalarte el Firebug, ya que aunque Firefox tiene un inspector de código instalado por defecto, creo que todavía no es muy potente.

Por último, instálate un arsenal de navegadores, con los que pruebes todo tu código. Que hagas algo que se vea bien en Firefox, no significa que se vea bien en Explorer, y aunque con las nuevas versiones de Explorer cada vez son menos las incompatibilidades, todavía es algo que te dará muchos dolores de cabeza.

Yo en mi caso, pruebo mis páginas con: Chrome, Firefox, Opera, Explorer 9, Explorer 8 y Explorer 7. Creo que ya no deberíamos de pelearnos con Explorer 6, su tiempo pasó.

Y para empezar no se me ocurre ningun consejo mas, aunque seguro que los habrá. Sientete libre para solicitar o aportar más consejos en los comentarios.

anteriores
siguientes