Daniel Mota / IceBeat

Mi vida en formato CSS3

Estás en la bitácora de IceBeat, una página sobre diseño y desarrollo web.

GTD: Color Bugs

Siempre me pasa lo mismo, por mucho que intento adaptarme a un gestor de tareas no consigo cogerle el gusanillo. Ni Anxiety ni Things consiguen engancharme, y fijo que tiene que ser por no darles una oportunidad en condiciones.

Asi que para la batalla diaria me he comprado una libretilla, dejando la Moleskine para ideas y proyectos.

gtd

La encontré en una tienda de todo a 100, la portada venia de lujo :).


Comentarios en los CSS

Hace tiempo con Andrés nos asalto la duda de cual era la mejor implementación para escribir código CSS. Desde su punto de vista el opto por algo muy elaborado como en otro lenguajes de programación pero creo que no todos los que escriben CSS son programadores.

Todos a los que les preguntaba me decían lo mismo, no tengo tiempo para escribir un comentario y menos para mi. Tenemos mala fama escribiendo comentarios CSS porque no pensamos que tarde o temprano tendremos que retocar la hoja de estilos.

Desde el punto de vista de un diseñador/maquetador lo más importante es la ubicación, tanto en layout como en el sistema de plantillas.

Partiendo de esto podríamos considerar necesario:

  • Nombre de la sección
  • Ubicación en el diseño
  • Ubicación en las vistas (si usamos un framework)

Un ejemplo de uso seria:

/*
    SIDEBAR, menú de información principal
    [top right] base/sidebar.php
*/

Hay que pensar desde el punto de vista de que algún día retomaremos el CSS, con este pequeño comentario ubicaremos la plantilla en el diseño y en el framework facilitando la edición a otros maquetadores.


Evitar el halo azul en safari

En safari cuando tenemos el foco en los inputs o textareas nos encontramos con un halo azul alrededor del borde, esto viene muy bien para saber donde te encuentras pero en el caso que usemos imágenes de fondo y los input no tengan bordes queda un poco feo. Para ello se utiliza la propiedad outline que es la misma que usamos para quitar el borde de los enlaces.

input, textarea  {
    outline:none;
}

Con esto evitamos ese halo azul.


job2time, fase 2

He tardado bastante en publicar el psd pero hemos estado liado con bitacoras.com y twitterposter.com.

En esta segunda fase he creado un proyecto en googlecode para que podamos ir buscando y añadiendo cosas al asunto, como ya he dicho en los comentarios todos sois bienvenidos (si tenéis dirección en gmail).

Voy a intentar hacer una lista con todos los que se apuntan y así realizar grupos.

Y ahora toca hablar un poco sobre el contenido del proyecto.

job2time es un simple gestor de tareas, puede ser multiproyecto pero cada proyecto tiene su propia pagina y configuración. La idea de hacerlo con tonos grises es para poder cambiar los colores y personalizarlo.

Solo contiene 5 secciones:

  1. Añadir historial
  2. Añadir tarea
  3. Opciones del proyecto
  4. Usuarios
  5. Informes

Existe otra opción pero que no esta incluida que consiste en una sección de clientes para que ellos puedan reportar fallos, sugerencias o nuevas tareas.

1. Añadir historial Es como se ve en la imagen que puse sobre la interfaz, esa parte esta fija para que en ningún momento se pierda el foco. Lo único que hay que destacar es el reloj, que en vez de incluir un input para poner el tiempo transcurrido es un scroll al estilo itunes, el cual se puede pausar o cambiar el tiempo.

2. Añadir tarea Aquí no se pierde tiempo, se debería mostrar un campo con solo el nombre de la tarea (que sale en plan menú vertical con slide), todas las gemas opciones (usuarios, tiempo, prioridad) se configuran más tarde en cada bloque (estilo dashboard de apple, por detrás).

Cada tarea tiene su propio TODO list, cuantas veces hemos creado una tarea y apuntado lo que había que hacer? ademas ayuda al usuario que le toque hacerla.

Para que cada usuario sepa que tareas son nuevas o que prioridad tienen, cada bloque contiene una chapa que se puede cambiar al vuelo, estas chapas son configurables(color/texto).

3. Opciones del proyecto Para cambiar datos del proyecto (imagen, datos de la empresa, etc.).

4. Usuarios En esta sección se añaden los usuarios para cada proyecto, nada del otro mundo, una gestión sencilla con el nombre y departamento que pertenece. Esto es algo importante para poder aplicar tareas a diferentes usuarios o grupos (diseño/programación/maquetación/).

5. Informes De nada sirve un gestor de tareas si luego no sabemos cuanto hemos invertido en cada proyecto (personal/tiempo), muestra informes con plantillas diseñadas por el usuario. Esta sección necesita un formulario (que no esta estudiado) para seleccionar que tipo de datos salen en los informes, si no escoge ninguna plantilla se muestra con el diseño del interfaz.

La idea de este proyecto es poder usar todo sin tener diferentes paginas.

Algunas de las cosas que hay que definir son las pantallas de login para cada proyecto, el dashboard y las pantallas para los clientes.

Y como buenos diseñadores os adelantamos que no vamos a usar nada que se asemeje al lightbox :).

No hay nada mejor que escuchar las ideas de aquellos que viven el trabajo en sus carnes, que cosas son prescindibles en esta aplicación y cuales son importantes?.


Nomenclatura en CSS

En el comentario de Nordic acerca de las propiedades CSS comenta sobre la nomenclatura de ID y Class.

Me ha picado la curiosidad para saber que nomenclatura es la idónea para escribir CSS.

Existen 3 tipos:

  • Guión medio: #mi-contenedor
  • Guión bajo: #mi_contenedor
  • CamelCase: #miContenedor

Normalmente para los lenguajes de programación se utilizan los dos últimos, debido a que el guión medio no puede ir en las variables.

En PHP por ejemplo se suele usar el guión bajo para los nombres de las funciones, en Ruby se utiliza el ultimo.

La verdad es que no entiendo cual puede ser el correcto.

Yo suelo utilizar el primero porque las propiedades CSS se escribe con guión medio (background-color, font-size).

Aunque también es cierto que para diferenciar las propiedades de los nombres de las clases se suelen escribir de diferente forma.

¿Que nomenclatura es la más acertada?

Página 1 de 11 · Mostrar 5 más