Select Page

Ideas and rants

Apple – Accesibility

This is perhaps the most touching and moving case for how empowering accessible hardware and software can be.

Apple – Perspective

This spot is one of the most invested in the creative use of typography, as well as inspiring.

bits & pieces · by Emily Blincoe on Instagram

bits & pieces.

A post shared by emily blincoe (@emilyblincoe) on

Came across [this wonderful composition][1] this morning. I find it to be a delightful mix of colors and textures and shapes!

[1]: https://www.instagram.com/p/BQLTAxfF0X1/ “Bits & Pieces · by Emily Blincoe · Instagram”

Pamela and Alberto · Songs

My cousin got married recently, and it was a lovely wedding, and they had amazing little details, like this soundtrack which I turned into a Spotify playlist! Enjoy!

Spotify helpers for your Mac

I was looking for a way to easily see what song was currently playing on my Spotify without needing to check the app. I was fortunate to find the following great free choices:

* [Statusfy](https://github.com/paulyoung/Statusfy/releases)
* [Silicio](https://itunes.apple.com/mx/app/silicio-for-spotify-itunes/id933627574?l=en&mt=12)
* [TrayPlay](https://mborgerson.com/trayplay)

Mom’s pesto recipe

##Ingredientes

* Un manojo de albahaca

* media taza de piñones

* un diente (o dos) grande de ajo

* un tercio de taza de aceite

* unas hojas de espinaca (o más de albahaca)

## Preparación

Se licúa todo menos el aceite en una o dos tazas de agua, para que quede medio espeso. Luego agregar aceite y licuar nuevamente. Añadir sal, al gusto.

Today I came across a beautiful little menu calendar replacement[^1] for my Mac. It’s called Itsycal, go check it out!

[^1]: My old favorite was: Object Park’s MenuCalendarClock, but they haven’t updated in over 5 years. Also, just for posterity, I came across a random ‘MenuCalendarClock’ update that Shaun Inman took on, called [Day-O](http://shauninman.com/archive/2011/10/20/day_o_mac_menu_bar_clock). It also looks pretty good.

SafariStand after Yosemite 10.10.2 update

So… after installing the latest Yosemite update (10.10.2) I noticed [SafariStand] was not working anymore. After panicking and searching for a possible solution to reinstate it as soon as possible, I found the answer on this [MacRumors forum post][3].

Turns out I didn’t need a SafariStand update, simply my EasySIMBL had turned off.

![Easy SIMBL off](https://robertvalencia.com/wordpress/wp-content/uploads/easy_simbl_off.png)

As soon as I checked the box to Use SIMBL, SafariStand got recognized instantly.

![Easy SIMBL on](https://robertvalencia.com/wordpress/wp-content/uploads/easy_simbl_on.png)

[3]: http://rober.tv/1xaX94i
[SafariStand]: http://hetima.com/safari/stand-e.html

SafariStand I love you!!

**aaaaand I’m back to loving Safari!** After updating to Mac OS X 10.10 Yosemite, I was seriously sad when —upon launching my Safari browser— the wonderful [Glims][] companion no longer worked. Daily, then weekly, I kept searching for a workaround, a fix, a hack, anything that could restore my favorite features that Glims offers previous versions of Safari.

My favorite features are:

* Enabling favicons to show up in Tabs
* Dated Downloads Folders: YYYY-MM-DD in my case
* The ability to switch Tabs by pressing , or .
* Custom search query shortcuts

This morning, my most recent attempt at finding a solution proved successful! Old trusty [SafariStand][] recently updated to a Yosemite compatible version, and after following the [installation instructions][1] —which require installing [EasySIMBL][2] (hadn’t heard of SIMBL since the good ol’ [Saft][] days)— I was back up and running with all of my favorite features, and even one I didn’t realize I missed, the address bar in the browser window expanding to the full width.

Thank you SafariStand developers/collaborators! I can enjoy Safari once again.

![Safari Stand Prefs](https://robertvalencia.com/wordpress/wp-content/uploads/safari_stand_prefs.png)
My Safari Stand Prefs

![Fullwidth Safari Addressbar](https://robertvalencia.com/wordpress/wp-content/uploads/fullwidth_safari_addressbar.png)
Full-width address bar support

![Safari Stand Menu](https://robertvalencia.com/wordpress/wp-content/uploads/safari_stand_menu.png)
SafariStand preference settings available via the menu to the left of Safari’s Help menu.

[Glims]: http://wiki.machangout.com/howdoi/glims-development-build
[SafariStand]: http://hetima.com/safari/stand-e.html
[Saft]: http://www.macupdate.com/app/mac/12402/saft
[1]: http://hetima.com/safari/safaristandhelp/index.html
[2]: https://github.com/norio-nomura/EasySIMBL

Estandarización de elementos de interfaces de usuario (UI) y diseño de experiencia del usuario (UX) para activos digitales universitarios.

Escuela de Artes y Comunicación

> Roberto Abel Valencia Loredo
> Ceyla Drusila Sánchez Sánchez
> Verónica Rodríguez Cañedo

Una investigación académico-científica y educativa, dentro de las líneas de comunicación visual a través de nuevos soportes tecnológicos y soluciones a problemas de diseño en la comunicación interna y externa de la Universidad.

Fecha de inicio: Septiembre 2014
Fecha de conclusión: Febrero 2015

Elaboración de recursos web, interfaces y elementos gráficos que optimicen información —de aprendizaje en la UM— a ser consumida por diferentes tipos de públicos.

##Antecedentes

Los recursos digitales de las páginas web de las escuelas de la Universidad de Montemorelos tienen un nivel medio bajo en mostrar una interfaz unida y fácil de utilizar.

La Universidad cuenta con un sitio web y las facultades y escuelas con sus propios micrositios, pero no cuentan con una guía ni un diseño unificado para presentar todos sus recursos digitales.

Existe necesidad entre las escuelas de interactuar entre sus públicos, los cuales se pueden ver beneficiados por el uso de interfaces bien diseñadas, con un enfoque de experiencias optimizadas para los usuarios.

##Justificación
El acceso a recursos digitales universitarios es una necesidad creciente para los públicos involucrados. De igual manera ha incrementado el número de exigencias que los accesos a tales recursos deben cumplir. Es necesario diseñar interfaces apropiadas y adaptables que cumplan características de portabilidad y tengan la capacidad de mostrar contenidos dinámicos y fluidos, contando con las tecnologías web apropiadas y competitivas.

##Objetivos
* Entender mejor los intercambios y accesos a recursos digitales que los públicos universitarios necesitan realizar.
* Diseñar interfaces optimizadas para la frecuencia de uso que los públicos universitarios necesitan efectuar.
* Estandarizar el uso de las mejores prácticas para los diseños de tales interfaces.

##Hipótesis
A través de un diseño optimizado de interfaces los usuarios de recursos digitales universitarios pueden mejorar su experiencia de aprendizaje.

##Diseño experimental o metodología
Se utilizará el proceso creativo para explorar el diseño de interfaces y pautas estandarizadas apoyándose en las recomendaciones más respaldadas respecto a experiencia del usuario, usabilidad y accesibilidad.

Este proceso requiere colectar información, analizarla crear prototipos, ponerlos a prueba, hacer ajustes y lanzar propuestas.

##Beneficios y productos esperados
Diseño de accesos a recursos digitales en forma de interfaces optimizadas para móviles y otras pantallas, también se generaría una documentación que serviría para estandarizar el diseño de nuevas interfaces y facilitar el mantenimiento de las interfaces propuestas.

##Planificación de la secuencia del proyecto

Abril – Mayo 2014
: Contacto con escuelas y sus necesidades de diseño de interfaz para facilitar el acceso a sus recursos digitales.

Mayo – Agosto 2014
: Armar un equipo de estudiantes, diseñadores e ingenieros que puedan abortar la problemática desde sus áreas de especialidad.

Agosto 2014
: Inicia reuniones por área de trabajo y definen las tareas a realizar.

Septiembre 2014
: Reuniones con la primera escuela para clarificar sus necesidades.
: Reuniones entre los equipos para definir las estrategias a seguir y herramientas a utilizar.

Octubre
: Recibir los ejemplos de los recursos digitales de la primera escuela e iniciar bocetos del diseño de esos contenidos.

Noviembre 2014
: Entrega inicial de pantallas, revisión y presentación de los primeros prototipos.

Diciembre 2014
: Pre-lanzamiento, reiteraciones , hacer ajustes en preparación del lanzamiento.

##Evaluación y cierre del proyecto
Encuestas pos-lanzamiento, en comparación con el pre-lanzamiento.

posting from TextMate 2

So just checking the funcionality of this out. It looks pretty good so far.

![TextMate 2 Window](https://robertvalencia.com/wordpress/wp-content/uploads/textmate_2_window.png)

Weekend notes

code

found a most useful [tutorial][1] for getting responsive form elements to play nice:

{{lang:css}}
input[type=’text’], select, textarea { width: 100%; }
input[type=’text’], textarea {box-sizing: border-box;}

As a result of following the tutorial, I also discovered a wonderful little frameworkboilerplate called [skeleton][2].

![Skeleton](https://robertvalencia.com/wordpress/wp-content/uploads/skeleton.png)

[1]: http://webdesign.tutsplus.com/articles/quick-tip-encourage-responsive-form-elements-to-play-nice–webdesign-5646
[2]: http://www.getskeleton.com/

quote

> “You know that place between sleeping and awake, that place where you can still remember dreaming? That’s where I’ll always think of you.” —James M. Barrie

I found that wonderful phrase as part of the [Fairytales](http://8tracks.com/theelephantschild/fairytales) playlist description on [8tracks](http://8tracks.com). Here’s an embed for those interested.

Fairytales from TheElephantsChild on 8tracks Radio.


os x

Para aquellos que batallen en iniciar su Mac, les recomiendo los siguientes pasos, para intentar resolver o al menos diagnosticar su problema.

###Reestablecer la ‘PRAM‘
Al iniciar tu Mac, mantén presionadas las teclas P R hasta que ésta renicie unas 6 veces.

En muchos casos, es posible que esta limpieza restaure tu máquina y así pueda reiniciar sin problema. Si aún tienes problemas para iniciarla, intenta el siguiente procedimiento.

###Iniciar desde el ‘Disco’ de instalación y revisar con la Utilidad de Discos.
A partir de Mac OS X 10.7 Lion en adelante, tu computadora crea una partición en la unidad de almacenamiento interna en el cual instala una copia del ‘disco’ de instalación. Este incluye una aplicación llamada Utilidad de Discos, la cual sirve —entre otras cosas— para reparar la unidad de almacenamiento y los permisos de tu Mac. Para usar esto, basta con mantener presionadas las teclas R inmediatamente después de iniciar la Mac. Mantener presionadas esas teclas hasta que salga el logo de la manzanita con el círculo giratorio…


quote

> You don’t realize how quickly everything can fall apart, until it does… —Zoe Kazan, as Chantry in [What If (2013)](http://www.imdb.com/title/tt1486834/)

![what if movie](https://robertvalencia.com/wordpress/wp-content/uploads/what_if_movie.jpg)

Negating CSS Rules With :not

Recently I discovered a wonderful little pseudo-selector that I didn’t know existed:

> A simple, if not terribly practical, example: let’s say that we wanted to italicize every paragraph on a page except content that was marked up with a class of special. The traditional CSS approach would require two separate declarations: one setting up the general rule for italicizing every paragraph, and the other creating an exception to that rule:

p { font-style: italic; }

.special { font-style: normal; }

> We could reduce this to a single rule by the use of the :not selector:

p:not(.special) { font-style: italic; }

via [demosthenes.info – Negating CSS Rules With `:not`](http://demosthenes.info/blog/589/Negating-CSS-Rules-With-not)

Also from Demosthenes is another [wonderful little reference for pseudo-class selectors](http://demosthenes.info/blog/47/Pseudo-class-selectors)

2014dw – apuntes para el 30 de septiembre

Clase de Diseño web – 30 de septiembre 2014
——————————————-

En la clase trabajamos en un proyecto de una página sencilla que anuncia datos básicos de una persona o producto. Aquí está el ejemplo de lo que hicimos en clase: [Perfil móvil ✿ dabblet.com](http://dabblet.com/gist/88964aeae6569748039e)

Primero hicimos algunos bocetos en Illustrator de cómo queríamos que luzca nuestro diseño en un dispositivo móvil.

Aquí hay algunos ejemplos:

![](https://robertvalencia.com/wordpress/wp-content/uploads/140930-mockup-1.jpg)
![](https://robertvalencia.com/wordpress/wp-content/uploads/140930-mockup-2.jpg)
![](https://robertvalencia.com/wordpress/wp-content/uploads/140930-mockup-3.jpg)
![](https://robertvalencia.com/wordpress/wp-content/uploads/140930-mockup-4.jpg)

Debido a que nos enfocamos primordialmente en que nuestro diseño luzca bien en un dispositivo móvil, para nuestro fondo nos servimos de la imagen original del proyecto [Etnias libres: raza Anglo-africana · Expo ARTCOM Portafolio estudiantil · otoño 2012](http://artcom.um.edu.mx/g/o12-166).

Aquí algunos ejemplos de cómo luce el diseño en diferentes ventanas de navegador:

[![](https://robertvalencia.com/wordpress/wp-content/uploads/Screen-Shot-2014-09-30-at-11.38.27-AM.png)](http://dabblet.com/gist/88964aeae6569748039e)

[![](https://robertvalencia.com/wordpress/wp-content/uploads/2014dw-ipad.jpg)](http://dabblet.com/gist/88964aeae6569748039e)

Usando la referencia de propiedades CSS y etiquetas HTML, consultamos cómo aplicar la etiqueta [``](http://htmldog.com/reference/htmltags/a/) para crear hipervínculos.

Tipografías
———–
Usamos la [Open Sans](http://www.google.com/fonts#QuickUsePlace:quickUse) de Google Fonts y [Font Awesome](http://fontawesome.io/icons/) para los íconos. En estos últimos usamos el CDN de [cdnjs](http://cdnjs.com/libraries/font-awesome#)
Inspeccionamos la [hoja de estilos del CDN](http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css) para saber cómo ‘seleccionar’ la fuente íconos dentro de nuestro documento.

Para mostrar nuestros íconos sociales, usamos el elemento `` sin contenido, agregando la clase correspondiente (ej. ``), consultando la guía en [Font Awesome](http://fontawesome.io/icons/)

Imagen de fondo
—————
La imagen de fondo en nuestro proyecto debía ser una imagen que abarcara todo el fondo, pero sin distorcionarse.

Para esto consultamos en Google los términos `css cover image` y nos arrojó el siguiente tutorial de CSS-Tricks: [Perfect Full Page Background Image | CSS-Tricks](http://css-tricks.com/perfect-full-page-background-image/).

Imagen de perfil circular
————————-
En vez de usar Photoshop para recortar de forma circular nuestra imagen de perfil, aplicamos un borde circular al elemento `` con la ayuda del [CSS Border Radius Generator](http://border-radius.com/). También hay una explicación de cómo funciona la propiedad [border-radius](http://css-tricks.com/almanac/properties/b/border-radius/) en CSS-Tricks.

Imagen de perfil incrustada
—————————
Para no colgar la imagen de perfil de ningún otro servidor, usamos un codificador [Base64](http://www.base64-image.de/) para así incrustar la imagen en código dentro del documento html.