Vinco Orbis Proyectos, S.A. de C.V. http://vincoorbis.com Desarrollo Web + SEO + App Wed, 22 Feb 2012 16:07:19 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 777 el nuevo 666 http://vincoorbis.com/777-el-nuevo-666/ http://vincoorbis.com/777-el-nuevo-666/#comments Wed, 22 Feb 2012 15:48:47 +0000 Elden Barrera http://vincoorbis.com/?p=734 777 hoy día significa tener la puerta abierta a todo el mundo, esa no es una práctica segura, los permisos de los archivos en un entorno Linux / Unix son una herramienta poderosa que en la mayoría de los casos es dejada atrás por el famoso 777

Cada uno de esos números tiene una función para dar o denegar permisos en base a lo siguiente

Permisos de usuario Permisos de Grupo Permiso a otros 7 7 7

Dentro de cada tipo de permiso en función de los bit’s ...]]> 777 hoy día significa tener la puerta abierta a todo el mundo, esa no es una práctica segura, los permisos de los archivos en un entorno Linux / Unix son una herramienta poderosa que en la mayoría de los casos es dejada atrás por el famoso 777

Cada uno de esos números tiene una función para dar o denegar permisos en base a lo siguiente

Permisos de usuario   Permisos de Grupo   Permiso a otros

                  7                   7                 7

Dentro de cada tipo de permiso en función de los bit’s se dan permisos de Lectura (r) Escritura (w) y Ejecución (x)

r  w  x   valor numérico
0  0  0     0
0  0  1     1
0  1  0     2
0  1  1     3
1  0  0     4
1  0  1     5
1  1  0     6
1  1  1     7

Sabiendo todo lo anterior terminamos ejecutando lo siguiente:

chmod -R 777 /var/www/patito.com/proyecto

Ya que nos hemos visto “forzados” a realizar comandos así para que “corra” la aplicación, en lugar de dar solo permisos a unas cuantas carpetas y/o archivos que en realidad lo necesitan.

Esto se debe a que la mayoría de las configuraciónes y en particular para el caso de Plesk si hacemos un

ls -l

En nuestro directorio vamos a tener algo parecido a esto

-rw-r--r--  1 misitio   psacln     397  Aug 12 2011 index.php

Pero que pasa si nos vamos a un directorio donde se suba algún archivo desde nuestra aplicación veremos algo como esto

-rw-rw-rw-  1 www    www         53481  Aug 19 2011 imagen.png

Con los resultados de arriba tenemos dos usuarios y dos grupos diferentes en los archivos de nuestra aplicación, esto se debe a que el servidor web está ejecutando los scripts por medio de un módulo (mod_php) con el usuario que ejecuta servidor web y por seguridad estos usuarios tienen accesos limitados.

Una mejor practica sería tener configurado nuestro lenguaje de scripts vía CGI o FastCGI que en conjunto con el módulo suEXEC nos permite configurar que usuario queremos que ejecute nuestros scripts por lo tanto ser menos flexibles con los permisos eliminando la necesidad de dar permisos a usuarios como www, apache, http y muchos otros que se encargan de la ejecución del servidor web

Una configuración recomendada quedaría de la siguiente manera

Archivos estáticos / editables por la app / uploads: 640

-rw-r----- 1 misitio    psacln 49364855 feb  1 22:04 upload.txt

Scripts ejecutables: 440

-r--r----- 1 misitio    psacln 49364855 feb  1 22:04 index.php

En el caso de los directorios

Directorios donde se alojan archivos para manipulación / libs : 750

drwxr-x--- 3 misitio    psacln    4096  sep 13 17:49 reportes

Directorios de ejecución (500, 510, 550)

dr-x------ 3 misitio    psacln    4096  sep 13 17:49 actions
dr-x--x--- 3 misitio    psacln    4096  sep 13 17:49 actions
dr-xr-x--- 3 misitio    psacln    4096  sep 13 17:49 actions

Si quieres encontrar que archivos tienen estos permisos puedes ejecutar el siguiente comando

find . -perm 777 -type f #solo archivos desde la ubicación actual

find . -perm 777 -type d #solo carpetas desde la ubicación actual

PD. el server patito.com tiene 6220 directorios con el fabuloso permiso 777 =D

]]> http://vincoorbis.com/777-el-nuevo-666/feed/ 1 La amabilidad y los clientes http://vincoorbis.com/la-amabilidad-y-los-clientes/ http://vincoorbis.com/la-amabilidad-y-los-clientes/#comments Tue, 21 Feb 2012 06:15:18 +0000 Crater http://vincoorbis.com/?p=728 Dentro de mi experiencia laboral, tanto independiente como profesional, siempre le he rendido cuentas a un cliente; desde que era adolescente y trabajaba en una tienda de vinos y abarrotes, hacía ilustraciones para conocidos o hasta trabajos muy laboriosos como freelance para eventos, negocios, también fotografías o videos. Esto ha hecho crecer mi necesidad de satisfacción, de hacer las cosas cada vez con mayor precisión, de obtener ganancias económicas y sobretodo, emocionales.

Cuando ves que a alguien le agrada tu trabajo, se asombra con lo que puedes crear  y sonríe al ver los resultados, la satisfacción personal es enorme y es muchísimo más, cuando son decenas, cientos o tal vez miles de personas las que indirectamente aprecian y se admiran por tus resultados. Siempre se debe ser amable, nunca debemos olvidar que hay que tratar a las personas como quisiéramos que nos trataran, se debe aprovechar todo ...]]> Dentro de mi experiencia laboral, tanto independiente como profesional, siempre le he rendido cuentas a un cliente; desde que era adolescente y trabajaba en una tienda de vinos y abarrotes, hacía ilustraciones para conocidos o hasta trabajos muy laboriosos como freelance para eventos, negocios, también fotografías o videos. Esto ha hecho crecer mi necesidad de satisfacción, de hacer las cosas cada vez con mayor precisión, de obtener ganancias económicas y sobretodo, emocionales.

Cuando ves que a alguien le agrada tu trabajo, se asombra con lo que puedes crear  y sonríe al ver los resultados, la satisfacción personal es enorme y es muchísimo más, cuando son decenas, cientos o tal vez miles de personas las que indirectamente aprecian y se admiran por tus resultados. Siempre se debe ser amable, nunca debemos olvidar que hay que tratar a las personas como quisiéramos que nos trataran, se debe aprovechar todo lo que tengamos de nuestro lado para mantener a nuestro cliente contento, feliz y consentido.

En mi opinión personal, un trabajo debe ser interesante, complejo, entretenido, útil y bastante productivo y durante mi estancia en Vinco Orbis y en el bunker de uno de nuestros clientes, he encontrado muchas facilidades para resolver rápido y eficientemente mis labores. No lo sé, quiza es como jugar un RPG, vas avanzando, juntando items para mejorar tus capacidades, cargando herramientas en tu inventario, intercambiando conocimientos, conjuros o trucos, conociendo aliados para ayudarte o para que los auxilies, pasarás obstáculos y enemigos, al final ganarás y tendras grandes beneficios.

Tengan una excelente semana.

]]> http://vincoorbis.com/la-amabilidad-y-los-clientes/feed/ 0 La participación de tu empresa en época electoral http://vincoorbis.com/epoca-electoral/ http://vincoorbis.com/epoca-electoral/#comments Sat, 18 Feb 2012 00:02:34 +0000 jl http://vincoorbis.com/?p=515 La época electoral en el país es el mejor momento para los políticos para prometer y convencer a los empresarios mexicanos de tomar partido por cualquier tendencia electoral, la promesa de reducción de impuestos, de beneficios fiscales o de apoyos a la generación de empleo y la generación de incentivos para las empresas es uno de los bastiones principales de todas las campañas políticas.

Sin embargo, cada día la participación de la pequeña y mediana empresa en los asuntos políticos del país van más allá de su utilización como promesa de campaña, la época electoral es la mina de oro de los publicistas, los impresores, y todos los microempresarios que durante ella se benefician con la compra de materia prima, impresiones de propaganda, confección de prendas, creación de campañas puclitarias, sitios web, campañas en redes sociales y otras.

Si bien esta bonanza no representa un ...]]> La época electoral en el país es el mejor momento para los políticos para prometer y convencer a los empresarios mexicanos de tomar partido por cualquier tendencia electoral, la promesa de reducción de impuestos, de beneficios fiscales o de apoyos a la generación de empleo y la generación de incentivos para las empresas es uno de los bastiones principales de todas las campañas políticas.

Sin embargo, cada día la participación de la pequeña y mediana empresa en los asuntos políticos del país van más allá de su utilización como promesa de campaña, la época electoral es la mina de oro de los publicistas, los impresores, y todos los microempresarios que durante ella se benefician con la compra de materia prima, impresiones de propaganda, confección de prendas, creación de campañas puclitarias, sitios web, campañas en redes sociales y otras.

Si bien esta bonanza no representa un incremento continuo y una mejora constante para los números de las empresas, si genera una oportunidad de negocio que no se repetirá hasta dentro de seis años o hasta la siguiente campaña electoral. Las oportunidades en el país son escasas en tiempos de crisis económicas, sin embargo, debemos ser cuidadosos con las oportunidades generadas para la propaganda electoral, ya que pueden definir el rumbo y los principios éticos de cada empresa.

]]> http://vincoorbis.com/epoca-electoral/feed/ 0 Optimización de sitios Web – Parte 1 http://vincoorbis.com/optimizacion-de-sitios-web-parte-1/ http://vincoorbis.com/optimizacion-de-sitios-web-parte-1/#comments Fri, 17 Feb 2012 22:51:20 +0000 Rogelio http://vincoorbis.com/?p=637 Cuando maquetamos un sitio web es muy importante considerar el tiempo de carga, respuesta del sitio y el tiempo que le cuesta renderizar nuestro HTML al navegador, algunos de los puntos que debemos considerar son los siguientes:

HTTP Request

Cada que enlazamos un recurso a nuestro sitio web ya sea una imagen, una hoja de estilo, un script, etc. El navegador hace una petición al servidor y este le responde con el recurso solicitado. Cada petición es una conexión al servidor, ahora si por ejemplo nuestro sitio tiene en total 20 recursos enlazados, son 20 conexiones y si multiplicamos estas conexiones por el número de visitas que tenemos por segundo podríamos tener un número muy grande de conexiones/segundo y con esto llegaremos a saturar nuestro servidor con peticiones.

Para evitar saturar el servidor con peticiones se recomienda juntar todas las hojas de estilo ...]]> Cuando maquetamos un sitio web es muy importante considerar el tiempo de carga, respuesta del sitio y el tiempo que le cuesta renderizar nuestro HTML al navegador, algunos de los puntos que debemos considerar son los siguientes:

HTTP Request

Cada que enlazamos un recurso a nuestro sitio web ya sea una imagen, una hoja de estilo, un script, etc. El navegador hace una petición al servidor y este le responde con el recurso solicitado. Cada petición es una conexión al servidor, ahora si por ejemplo nuestro sitio tiene en total 20 recursos enlazados, son 20 conexiones y si multiplicamos estas conexiones por el número de visitas que tenemos por segundo podríamos tener un número muy grande de conexiones/segundo y con esto llegaremos a saturar nuestro servidor con peticiones.

  • Para evitar saturar el servidor con peticiones se recomienda juntar todas las hojas de estilo en un solo archivo css y los scripts en un solo JS.
  • Sprites CSS
    Para imágenes usar la técnica de Sprites CSS, esta tecnica consiste en crear una imagen con todas las imágenes que el sitio necesita cargar y posicionarlas como fondo de los elementos html por la propiedad background-position, como ejemplo está el sprite de Facebook: Facebook Sprite
    En el sprite anterior podemos apreciar los diferentes elementos de la interfaz de Facebook así como los emoticons del chat, entre otros elementos. La tarea de estar buscando la posición de las imágenes puede ser muy tediosa pero existen herramientas online que nos facilitan la tarea. Utilizar esta técnica nos da la ventaja de que además de reducir las peticiones HTTP al servidor a solo una, también podemos ver los elementos gráficos del sprite css al mismo tiempo y no esperar a que carguen uno por uno.
  • Gzip
    Aparte de minimizar nuestros CSS y JS también los podemos comprimir en un archivo gzip para obtener un archivo mas ligero y por lo tanto una respuesta mas rapida del servidor.

CSS

Este es un tema que da para hablar en muchos post y siempre tiene diferentes puntos de vista. Hacer código CSS eficiente y que renderize rápido es todo un arte, se tienen que considerar muchos puntos y todos varían depende el sitio que se esté realizando pero hay unos que son genéricos para la mayoria de los sitios:

Reset

He de reconocer que en mis primeros años como desarrollador utilizé varias veces el famoso reset con el selector universal asterisco: *

* {
  margin: 0;
  padding: 0;
}

Era novato y no tenia idea de lo que hacia, pero me servia y pensaba que estaba bien (fact: el asterisco en el código ASCII esta representado por el numero 42 y en CSS es el selector universal para todos los elementos).
Para explicarme mejor: Cada navegador web tiene definidos por defecto estilos para los elementos html, el problema es que estos estilos en cada navegador son diferentes, por lo tanto si maquetamos un sitio sin un Reset, cada elemento se va a renderizar diferente en cada navegador de acuerdo a las reglas de estilo que tiene por default.
Lo que hace el Reset anterior es que borra o reescribe los estilos de margen por default de todos los elementos y así ya tenemos una base consistente para empezar a trabajar. El problema con esto es que con reiniciar los estilos de todos los elementos en realidad se refiere a TODOS los elementos que soporta el motor del navegador (¡aunque no los utilizemos en nuestro sitio!), entonces se vuelve una tarea muy redundante ya que por ejemplo: ¿para que quiero yo borrar los estilos de todos los elementos si mi sitio web solo utiliza los elementos de parrafo y lista?. Si se reinician los estilos de solo los elementos que se utilizen en nuestro sitio web se mejora el renderizado y el tiempo de carga de nuestro sitio.
Por lo tanto el Reset de cada sitio es diferente, sin embargo hay algunos genéricos como el que propone Eric Meyer:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Personalmente recomiendo utilizar este Reset como base y agregar o quitar los elementos que utilize o no utilize nuestro sitio y en base a este comenzar nuestro maquetado.

Derecha a Izquierda y Selectores

Los navegadores web leen los selectores CSS de derecha a izquierda es decir que del selector:

#content .post h1

la primer parte que interpreta es el h1, después el .post y al final el #content.
En CSS hay cuatro tipos de selectores clave: IDs, clases, tags y selector universal y en este orden es también el orden de eficiencia en renderización (Tip: En Javascript también es más rápido el selector ID que el selector class), la razón es bastante sencilla: El ID de un elemento HTML es único por lo tanto es más rápido porque el navegador ya sabe en que elemento buscar, mientras que en los demás se pueden repetir en todo el documento HTML y al final el elemento universal que selecciona toda los elementos del sitio.

#left-sidebar {   }         /* ID (Mas Rápido) */
body #page-content {   }    /* ID */
.main-navigation {   }      /* Clase */
p a.current {   }           /* Clase */
p {   }                     /* Tag */
p a {  }                    /* Tag */
* {   }                     /* Universal (Mas Lento) */

Ahora mezclando el concepto de Derecha a Izquierda con el de selectores clave podríamos pensar que:

#left-sidebar a

seria la forma mas rápida de acceder a un elemento TAG (a) dentro del ID (#left-sidebar) ya que el navegador localizaría rápidamente el ID (#left-sidebar) y después accede al TAG (a). La realidad es que es una manera lenta ya que en realidad primero lee el selector TAG (a) que es más lento que el selector ID (#left-sidebar) que lee hasta el final.

NUNCA hagan esto:

div#left-sidebar {  }

, el
+ selector ID es único en todo el documento así que no es necesario poner el tag div, eso hace ineficiente la selección, lo mismo sucede con las clases y aunque las clases no son únicas el uso principal de las clases es para aplicar el mismo estilo en elementos diferentes, aunque si lo que quieres es aplicar estilo diferente dependiendo el estilo esta técnica si es efectiva

span.blue_button {}

Hay que considerar la cascada de estilo y para que se esta escribiendo el selector

#left-sidebar li a { font-family: Arial, Tahoma, Verdana, Serif; }

La propiedad font-family es una propiedad que va en cascada así que tal vez seria más eficiente solo escribir:

#left-sidebar { font-family: Arial, Tahoma, Verdana, Serif; }

Style Profiler Preview es una herramienta de Opera Dragonfly que nos permite ver el orden de ejecucion y renderizado de nuestros selectores CSS, muy útil para poner a prueba lo explicado anteriormente.

CSS3

  • Selectores
    Los selectores CSS3 son una cosa sorprendente y muy fancy y ayudan a mantener un código semántico y limpio pero desgraciadamente consumen muchos recursos del navegador, y tampoco están implementados en la mayoría de los navegadores.
  • Gradientes CSS3
    Utilizar gradientes con CSS3 es una practica muy poco recomendable ya que para generar el degradado se consumen mucho CPU y es más rápido renderizar una imagen que un gradiente CSS. Los gradientes radiales consumen más memoria y procesamiento que los gradientes radiales.

Móviles

Actualmente las computadoras portátiles y de escritorio cuentan con una gran cantidad de memoria y su capacidad de procesamiento aumenta cada año, con esto no significaría gran problema para la mayoría de navegadores modernos cargar y renderizar un sitio web. El problema viene cuando abren nuestro sitio web desde un Smartphone o Tablet y si no utilizamos buenas técnicas de optimización en nuestro sitio este podría cargar muy lento y tal vez perdamos visitas o terminemos traumando al usuario con nuestro sitio y nunca regresara a visitarlo.
Algunas cosas que debemos de considerar al hacer un sitio web y que deseemos que cargue bien en dispositivos móviles son las siguientes:

  • Memoria del dispositivo móvil
  • Batería
  • Conectividad o Plan de datos

Memoria

La primer cosa que debe de quedar muy clara es que los teléfonos no son laptops, ya sé, pero con esto quiero decir que la experiencia de carga y ejecución de nuestro sitio web sera diferente.

Comparación de Memoria en Dispositivos Moviles
Dispositivo Memoria
iPhone 3GS 256 MB
iPhone 4S 512 MB
HTC Inspire 768 MB
iPad 1 256 MB
iPod Touch 256 MB

Al ver la tabla anterior es obvio que no podemos comparar un móvil con nuestra MacBook Pro de 8GB de memoria, además también es muy importante considerar que el móvil comparte esta memoria entre diferentes recursos del sistema y Apps por lo cual es recomendable que para testear nuestro sitio web, primero lo saturaremos con varias Apps abiertas y después abrir nuestro sitio, si el sitio web carga sin que crashee el browser del móvil, felicidades.

Batería

El procesador absorbe la batería de un móvil, por lo tanto si nuestro sitio web necesita muchos recursos de procesamiento entonces requerirá de más batería del móvil para poderlos ejecutar y todos los usuarios de smartphones sabemos lo feo que es quedarse sin batería en nuestros teléfonos y nosotros no queremos que le pase eso a alguno de nuestros usuarios al visitar nuestro sitio web. Algunos consejos para evitar reducir el consumo de CPU por parte de nuestro sitio web, son los siguientes:

  • Minimizar los Javascripts
    Comprimir los archivos Javascript que utilize nuestro sitio, pero no solo esto también reducir la implementacion del mismo, analizar en que realmente se requiere Javascript o código obsoleto o repetitivo dentro de nuestros JS.
  • No usar animaciones en Javascript
    Evitar animaciones, las animaciones consumen mucho CPU y hay ocasiones en las que no aportan gran cosa a la experiencia de usuario de nuestros sitios web. Pero si realmente queremos mostrar una animación, la gran ventaja de los smartphones actuales es que la gran mayoría soportan CSS3 y a un nivel bastante decente por lo tanto muchas animaciones en JS se pueden reemplazar utilizando CSS3 o instrucciones de extensiones propietarias como las de Webkit (que es el motor que tiene el mayor mercado en navegadores móviles).
  • Evitar usar WebGL
    WebGL esta padre, es cool, es bonito… pero consume mucho CPU incluso en PC’s aquí lo recomendable es evitar su uso lo mas que se pueda y a menos que no haya otra solución utilizarlo.

Conectividad o Plan de datos

Este punto no tiene que ver tanto con dependencias de hardware de los dispositivos móviles si no con los recursos que carguemos en nuestro sitio tales como: hojas de estilo, imágenes, javascript, video, audio, etc.
Aquí recordamos al desarrollo web de la old-school donde teníamos que pelear con conexiones de 56kbps. Afortunadamente actualmente las velocidades de conexión han aumentado pero hay que recordar que mientras mayor sea el tamaño en bytes de nuestro sitio, este tendrá que hacer más transferencias y consumir más datos. Si nuestro sitio web es muy pesado por lo tanto tardará más tiempo en cargar lo cual puede desesperar al usuario y termine cerrando nuestro sitio, ademas no todos los usuarios tienen planes de datos ilimitados por lo que un sitio muy pesado será un sitio que costará muy caro por visita para el usuario que nos visite.
Algunos consejos para optimizar estos puntos son los siguientes:

  • Reducir peticiones HTTP con CSS & JS embebido
    Poner código embebido dentro de la estructura de un documento HTML es considerada una mala practica (de las peores, en la que hay un infierno para los desarrolladores web que hacen esto) pero para optimización móvil pues… esta ok, siempre y cuando solo sea el estilo y js de la página principal, con esto reducimos las peticiones HTTP del CSS, HTML y JS a solo una.
    Reducir las peticiones HTTP en móviles es muy importante ya que la forma de conexión en móviles es muy diferente a cuando nos conectamos desde una PC. En una PC nuestro navegador hace las peticiones a nuestro sitio por un DNS y la conexión se hace directa de PC a Servidor y viceversa. Pero cuando nos conectamos a un sitio desde un móvil que tenga una conexión de plan de datos las peticiones se realizan de manera diferente ya que primero se conecta a la torre de telefonía celular después esta se conecta a la compañía celular después esta se conecta al servidor donde esta nuestro sitio web y para devolver la petición tiene que hacer el mismo proceso en viceversa por esto se recomienda embeber codigo dentro del HTML para reducir la latencia de peticiones HTTP, pero ya que es una mala práctica se recomienda solo hacerse en la página de inicio ya que a la mayoría de usuarios que nos visiten desde un móvil solo les interesa ver la página de inicio para buscar algún dato como una dirección, teléfono, etcétera.
  • LocalStorage
    LocalStorage es su amigo, úsenlo, la mayoría de los smartphones actuales soportan HTML5 y LocalStorage es una manera fácil de cachear nuestros recursos, asi que jalen los recursos, ponganlos en localStorage y úsenlos en el load del sitio.
  • Imágenes
    Optimizar las imágenes, comprimirías lo más posible sin perder calidad, utilizar formatos adecuados y sobre todo nunca, nunca, ¡NUNCA! redimensionarlas con las propiedades width y height de html.
]]> http://vincoorbis.com/optimizacion-de-sitios-web-parte-1/feed/ 0 Processing http://vincoorbis.com/processing/ http://vincoorbis.com/processing/#comments Thu, 16 Feb 2012 23:55:08 +0000 Alesita http://vincoorbis.com/?p=631 Desde hace algunas décadas a la actualidad, los medios electrónicos así como las tecnologías se han incrementado de manera considerable a nivel mundial, y la sociedad se ha ido adaptando a este cambio de diversas formas, como lo ha sido el arte que ha tomado una nueva forma de expresión por medio de ordenadores, ciencia y tecnología tomando el nombre de arte electrónico. De esta manera hemos sido partícipes de la evolución tecnológica y el nuevo contexto social en el que vivimos.

Una nueva forma de creación de ideas para los medios electrónicos se encuentra a disponibilidad de cualquiera. Un software que maneja un lenguaje de programación open source, especializado en crear animaciones, imágenes e interacciones. Conocido como Processing te permite explorar el vasto mundo de los medios electrónicos, siendo un lenguaje basado en Java y con el poder que le ...]]> Desde hace algunas décadas a la actualidad, los medios electrónicos así como las tecnologías se han incrementado de manera considerable a nivel mundial, y la sociedad se ha ido adaptando a este cambio de diversas formas, como lo ha sido el arte que ha tomado una nueva forma de expresión por medio de ordenadores, ciencia y tecnología tomando el nombre de arte electrónico. De esta manera hemos sido partícipes de la evolución tecnológica y el nuevo contexto social en el que vivimos.

Una nueva forma de creación de ideas para los medios electrónicos se encuentra a disponibilidad de cualquiera. Un software que maneja un lenguaje de programación open source, especializado en crear animaciones, imágenes e interacciones. Conocido como Processing te permite explorar el vasto mundo de los medios electrónicos, siendo un lenguaje basado en Java y con el poder que le heredan tantos elementos de ese lenguaje se convierte en una buena opción para el desarrollo multimedia implementado en arte electrónico, diseño, interactive o applets.

La cantidad de proyectos realizados a la fecha con la ayuda de Processing se ha incrementado considerablemente, siendo de esta manera una nueva alternativa que diversos artistas electrónicos, músicos, desarrolladores web utilizan con naturalidad y de forma experimental que ha permitido la creación de piezas inigualables y que sin duda alguna causan una fuerte emotividad en los espectadores.

El software se encuentra disponible en http://processing.org/ en donde también podrán encontrar ejemplos de uso, una guía y ayuda por si les interesa.

Algunos ejemplos que podemos mostrar realizados en su totalidad o parcialidad con Processing enfocados al arte electrónico son los siguientes:

  • Un proyecto creado para el lanzamiento de el nuevo Beetle.
  • Adidas originals creo una campaña con ayuda de este programa para promocionar unos tenis que estaban lanzando al mercado.
  • En lo personal una de mis apps favoritas es Biophilia, creada para la cantante Björk y disponible para dispositivos con IOS.
  • Un proyecto interesante para web y tomado como chrome experiment ROME

Nunca es tarde para tener un acercamiento a las nuevas formas de creación y desarrollo [tal vez continuará... ]

]]> http://vincoorbis.com/processing/feed/ 0 Equipo Multidisciplinario http://vincoorbis.com/equipo-multidisciplinario/ http://vincoorbis.com/equipo-multidisciplinario/#comments Thu, 16 Feb 2012 00:54:54 +0000 ao http://vincoorbis.com/?p=614 Los equipos de trabajo se benefician de la multidisciplinariedad. Donde un programador es capaz de “ver” el código que se necesita para que se concretize una funcionalidad y el diseñador sabe como hacerla resaltar de acuerdo con su importancia dentro del sistema, es posible que ninguno de ellos se parezca en lo más mínimo al usuario final del sistema.

Es por eso que en Vinco Orbis nos esforzamos por comprender de la manera más completa las necesidades de un cliente antes de empezar un proyecto. Nuestro equipo está conformado por programadores expertos en Php, Java, Python; contamos con varios maquetadores que se encargan de llevar nuestros diseños a la red con amplios conocimientos de HTML, CSS, Javascript; tenemos personal dedicado a la administración de servidores y seguridad informática; nuestro personal de diseño tiene amplia experiencia en ilustración, diseño de imagen corporativa ...]]> Los equipos de trabajo se benefician de la multidisciplinariedad. Donde un programador es capaz de “ver” el código que se necesita para que se concretize una funcionalidad y el diseñador sabe como hacerla resaltar de acuerdo con su importancia dentro del sistema, es posible que ninguno de ellos se parezca en lo más mínimo al usuario final del sistema.

Es por eso que en Vinco Orbis nos esforzamos por comprender de la manera más completa las necesidades de un cliente antes de empezar un proyecto. Nuestro equipo está conformado por programadores expertos en Php, Java, Python; contamos con varios maquetadores que se encargan de llevar nuestros diseños a la red con amplios conocimientos de HTML, CSS, Javascript; tenemos personal dedicado a la administración de servidores y seguridad informática; nuestro personal de diseño tiene amplia experiencia en ilustración, diseño de imagen corporativa y creación de logotipos. Contamos con personas preparadas y entusiastas. Pero nada de eso sería diferente de otras empresas si no hablara yo de la capacidad para intercambiar ideas de todos los miembros del equipo.

Todas las semanas el equipo se reune para trabajar sobre los distintos proyectos que estamos desarrollando y en conjunto aportamos ideas y buscamos maneras de mejorar nuestro desempeño. Todo en función del cliente, con quién nuestra interacción es constante, no solo al inicio de un proyecto, sino durante su desarrollo y liberación. No siempre es fácil, pero nos gusta pensar en nuestros clientes como un miembro más del equipo Vinco Orbis, aquel que va a terminar por utilizar las herramientas que hemos puesto en sus manos y nos interesa que sean las mejores herramientas posibles.

Por supuesto no podemos resolverlo todo solos y sería iluso siquiera sugerirlo, pero cuando nos encontramos con nuestros límites estamos dispuestos aprender y a no rendirnos.

Permitanos poner nuestra experiencia y disposición a su servicio, ayudenos a seguir haciendo crecer nuestro ya de por si amplio y multidisciplinario equipo con su nuevo proyecto.

]]> http://vincoorbis.com/equipo-multidisciplinario/feed/ 0 SEO: White Hat / Black Hat http://vincoorbis.com/seo-white-hat-black-hat/ http://vincoorbis.com/seo-white-hat-black-hat/#comments Mon, 13 Feb 2012 22:03:29 +0000 Christian Aranda http://vincoorbis.com/?p=565 La labor SEO (Search Engine Optimization) consiste en aplicar un número de técnicas dentro y fuera del sitio web con la finalidad de incrementar su visibilidad orgánica en los resultados de buscadores como Google, Yahoo! y Bing sin tener que pagar dinero para posicionarlo, es decir, ayudar a que el sitio aparezca en los mejores resultados por la relevancia de su contenido, productos y/o servicios con los términos de búsqueda de los usuarios.

- El bien y el mal desde el Big Bang.

Todo en la vida tiene su lado oscuro, las galletas Oreo, los jedis y hasta la madre Teresa de Calcuta en algún momento de su vida quiso por lo menos lanzarle un zapatazo al gato que no dejaba de maullar a las tres de la madrugada.

Lo hemos visto en todas partes, en las películas del Viejo Oeste, el Ying ...]]> La labor SEO (Search Engine Optimization) consiste en aplicar un número de técnicas dentro y fuera del sitio web con la finalidad de incrementar su visibilidad orgánica en los resultados de buscadores como Google, Yahoo! y Bing sin tener que pagar dinero para posicionarlo, es decir, ayudar a que el sitio aparezca en los mejores resultados por la relevancia de su contenido, productos y/o servicios con los términos de búsqueda de los usuarios.

- El bien y el mal desde el Big Bang.

Todo en la vida tiene su lado oscuro, las galletas Oreo, los jedis y hasta la madre Teresa de Calcuta en algún momento de su vida quiso por lo menos lanzarle un zapatazo al gato que no dejaba de maullar a las tres de la madrugada.

Lo hemos visto en todas partes, en las películas del Viejo Oeste, el Ying y el señor Yang o Spy vs. Spy el blanco y el negro han representado opuestos, bien y mal, calor y frío, en el caso de hoy, cuestiones de ética y legalidad.

El posicionamiento en buscadores no es de un día para otro, es un proceso en el que se aplican medidas técnicas así como otras cuya eficiencia debe irse revisando y modificando durante un período de tiempo determinado que puede tomar hasta varios meses dependiendo del tamaño del sitio y su nicho de mercado entre otras cosas.

A veces un cliente demanda resultados buenos, bonitos, baratos y por si fuera poco “para ayer”, también muchas veces el prestador del servicio por quedar bien recurre a prácticas SEO “no éticas” Black Hat que son “mal vistas” por los buscadores (Google, Yahoo! o Bing).

Las principales maldades son:

  • Doorway Pages o páginas de puerta. Son páginas atiborradas de palabras clave y contenido incoherente cuyo fin es solamente posicionarse, cuando un usuario entra en ella es porque será redirigido a otra página a la que realmente quieren que llegue.
  • Contenido oculto. Introducir contenido invisible al visitante pero lleno de palabras clave que pretenden “engañar” al buscador.
  • Copiar contenido ajeno.
  • Link farming. Práctica que consiste en conseguir enlaces a través de compra o intercambio a como de lugar (los enlaces externos o inbound links son muy importantes para el posicionamiento de los sitios pues entre más existan se interpreta que este es más popular), muchas veces estos enlaces provienen de los lugares menos esperados y de muy dudosa reputación como sitios porno, piratería de contenidos, y en el menos peor de los casos sitios con contenido y temas que carecen totalmente de afinidad.
  • SPAM. de lo más reconocido por todos en internet, esta práctica consiste en utilizar programas automatizados (robots) para inundar blogs y otros sitios con comentarios prediseñados con el afán de conseguir enlaces de regreso.

Por el contrario estas son las principales prácticas de White Hat :

  • Contenido de calidad. Generar contenido de calidad para el sitio, que sea no solo relevante para el buscador sino para el visitante es lo más importante.
  • Contenido propio. Lo opuesto de copiar contenido, esto viene de la mano con el punto anterior, cuando este contenido es único y de calidad es más sencillo llamar la atención del visitante y que a su vez este lo recomiende, enlace en su blog o distribuya en redes sociales.
  • Usar palabras claves o keywords relevantes al contenido y sin abusar de ellas. No es necesario saturar de palabras clave, es mucho mejor usar dos o tres keywords relacionadas con el tema de la página y desarrollar el contenido que les complementa correctamente; esto es importante pues el buscador puede “entender” el tema del que trata dicha página y el visitante encuentra información con sentido y útil.
  • Los enlaces se consiguen de forma natural. Para ello se puede suscribir el sitio a directorios “decentes” que agrupan a otros sitios dentro del mismo nicho de mercado o de temas relacionados o complementarios. Así se crea contenido interesante que motiva su distribución y enlace por terceras personas, establecer alianzas estratégicas legítimas con otras empresas para intercambiar enlaces.
  • Integrarse a una comunidad. Dependiendo el tipo de producto o servicio es posible integrar el sitio a comunidades de usuarios, de opinión sobre temas afines, foros informativos y otras redes sociales directa o parcialmente relacionados con el tema que trata el sitio.
  • Reputación del cliente. Descuidar los puntos anteriores tarde o temprano generará mala reputación del sitio (del cliente); varios en algún momento nos hemos quejado de spam, comentarios incoherentes y páginas sin sentido a las que entramos pensando que allí encontraremos la información que necesitamos. Si se cometen estos errores y son relacionados con alguna marca o sitio, es muy probable que se “corra la voz” entre usuarios, se den malas reseñas o sea reportado como mal sitio. Cabe mencionar que las prácticas de sombrero negro pueden ser penalizadas por tiempo indeterminado por los buscadores marcándolas como dañinas o excluirlas de los resultados de búsqueda.

Moraleja: Pórtense bien, con SEO y en la vida en general.

]]> http://vincoorbis.com/seo-white-hat-black-hat/feed/ 0 Soy diseñador http://vincoorbis.com/soy-disenador/ http://vincoorbis.com/soy-disenador/#comments Mon, 13 Feb 2012 19:08:40 +0000 hb http://vincoorbis.com/?p=597 Muchas veces los diseñadores nos topamos con un gran muro a la hora de practicar y ejercer nuestro trabajo, la concepción que las personas tienen de nosotros es la mayoría de las veces esta:

“¡Ah! eres diseñador, dibujas bonito”¹

Lamentablemente existen muchos diseñadores a los que no les preocupa el trasfondo de un diseño o que simplemente fueron formados para cuidar la forma, lo visible, que sea estético, lo reducen a un medio meramente expresivo. Gracias a ellos es que esta errónea visión del diseño se ha diseminado.

Si bien es cierto que el diseño requiere cierta apreciación estética eso no lo es todo, normalmente la forma sigue a la función.² Esto significa que un diseño debe pensarse como una solución a un problema específico (si necesitas una resbaladilla, no la vas a hacer con picos porque se vería mejor).

El proceso es variado dependiendo ...]]> Muchas veces los diseñadores nos topamos con un gran muro a la hora de practicar y ejercer nuestro trabajo, la concepción que las personas tienen de nosotros es la mayoría de las veces esta:

“¡Ah! eres diseñador, dibujas bonito”¹

Lamentablemente existen muchos diseñadores a los que no les preocupa el trasfondo de un diseño o que simplemente fueron formados para cuidar la forma, lo visible, que sea estético, lo reducen a un medio meramente expresivo. Gracias a ellos es que esta errónea visión del diseño se ha diseminado.

Si bien es cierto que el diseño requiere cierta apreciación estética eso no lo es todo, normalmente la forma sigue a la función.²
Esto significa que un diseño debe pensarse como una solución a un problema específico (si necesitas una resbaladilla, no la vas a hacer con picos porque se vería mejor).

El proceso es variado dependiendo de cada proyecto, pero hay algunas cosas que yo no recomendaría pasar por alto a la hora de diseñar:

1. Conocer al cliente

Es importante conocer la identidad de cada cliente para poder apegarnos a sus estándares.

2. Mantener comunicación

Si desde un principio se dan a conocer los requerimientos de un diseño (por parte del cliente) será mas fácil conocer cuando los cumples en sentido riguroso y cuando estas entrando al terreno del “plus”, ese valor agregado que hace que tu diseño supere las expectativas del cliente.

3. Conocer al usuario final

No siempre el cliente es el que mejor conoce al usuario final, por ello recae en el diseñador la responsabilidad de conocer mejor que nadie al usuario final y de ser posible, convertirse en uno.

3. Conocer y evaluar soluciones existentes

Es necesario para poder innovar, mientras más amplia sea la cultura visual de un diseñador, mejores y más genuinos serán los diseños que pueda crear, es importante no repetir los errores de diseños ineficientes.

4. Realizar pruebas ergonómicas

El concepto puede sonar como algo reservado únicamente para el diseño industrial, sin embargo la ergonomía es aplicable a TODO tipo de diseño y es medible, en web o UI la disposición de los elementos en una pantalla, los colores, las imágenes, el texto y demás componentes, interactúan con el usuario, y cada uno debe ser probado y de ser necesario re-diseñado hasta que sea usable y 100% útil.

5. Feedback o retroalimentación

Una vez lanzado el diseño, lo ideal es que exista una respuesta del usuario, si es eficaz y resuelve el problema para el que fue pensado, o si en algún aspecto es mejorable, NUNCA subestimen al usuario, siempre tendrán otra perspectiva y una sugerencia suya podría ser muy útil para ponerla en práctica en el próximo diseño.

El éxito o fracaso de un diseño, depende de cuanto conozcamos el problema a resolver, poniendo en práctica estos 5 puntos reforzaremos por mucho la integridad de un diseño y al mismo tiempo seguiremos mejorando para los proyectos futuros.

___________________________

¹ True story

² A Horatio Greenough se le adjudica la creación de esta célebre frase entre los diseñadores de la corriente funcionalista en los años 30

]]> http://vincoorbis.com/soy-disenador/feed/ 0 Suplantar a un usuario usando el Plugin Spring Security. http://vincoorbis.com/suplantar-a-un-usuario-usando-el-plugin-spring-security/ http://vincoorbis.com/suplantar-a-un-usuario-usando-el-plugin-spring-security/#comments Sat, 11 Feb 2012 00:45:23 +0000 em http://vincoorbis.com/?p=555 Hoy en día, la mayoría de las aplicaciones requieren un control de acceso a la información dependiendo del rol al que pertenezca cada usuario, uno de estos roles suele ser el de administrador o supervisor, que cuenta con un acceso sin restricciones al sistema. Sin embargo puede darse el caso de que el supervisor requiere hacerse pasar por otros usuarios para fines de consulta de información sin la necesidad de conocer sus credenciales.

En Grails, mediante el uso del plugin Spring Security Core es posible realizar esto de manera sencilla.

Una vez instalando el plugin en los archivos de configuración se añade lo siguiente:

grails.plugins.springsecurity.useSwitchUserFilter = true

useSwitchUserFilter es el filtro que permite la suplantación de usuarios.

Deben elegirse los roles que tendrán la posibilidad de suplantar a otros. (‘ROLE_SWITCH_USER’).

Para hacer el cambio de usuario, se debe añadir un formulario similar a este:

<sec:ifAllGranted roles='ROLE_SWITCH_USER'> <form action='/j_spring_security_switch_user' method='POST'> Switch to user: <input type='text' name='j_username'/> <br/> <input ...]]> Hoy en día, la mayoría de las aplicaciones requieren un control de acceso a la información dependiendo del rol al que pertenezca cada usuario, uno de estos roles suele ser el de administrador o supervisor, que cuenta con un acceso sin restricciones al sistema. Sin embargo puede darse el caso de que el supervisor requiere hacerse pasar por otros usuarios para fines de consulta de información sin la necesidad de conocer sus credenciales.

En Grails, mediante el uso del plugin Spring Security Core es posible realizar esto de manera sencilla.

Una vez instalando el plugin en los archivos de configuración se añade lo siguiente:

grails.plugins.springsecurity.useSwitchUserFilter = true

useSwitchUserFilter es el filtro que permite la suplantación de usuarios.

Deben elegirse los roles que tendrán la posibilidad de suplantar a otros. (‘ROLE_SWITCH_USER’).

Para hacer el cambio de usuario, se debe añadir un formulario similar a este:

<sec:ifAllGranted roles='ROLE_SWITCH_USER'>
 <form action='/j_spring_security_switch_user' method='POST'>
 Switch to user: <input type='text' name='j_username'/> <br/>
 <input type='submit' value='Switch'/>
 </form>
 </sec:ifAllGranted>

Este formulario solamente será visible para aquellos usuarios que pertenezcan al rol ROLE_SWITCH_USER.

Realizados los pasos anteriores se habilita a los roles definidos en ROLE_SWITCH_USER para hacer una suplantación, aunque ¿qué pasaría si el usuario supervisor y el usuario suplantado ingresan al mismo tiempo?

]]> http://vincoorbis.com/suplantar-a-un-usuario-usando-el-plugin-spring-security/feed/ 0 Encontrar bugs usando git bisect http://vincoorbis.com/encontrar-bugs-usando-git-bisect/ http://vincoorbis.com/encontrar-bugs-usando-git-bisect/#comments Thu, 09 Feb 2012 18:53:56 +0000 Jair Trejo http://vincoorbis.com/?p=516 Hace unos días tuve que hacer un cambio importante que requirió varias alteraciones al sistema en el que estoy trabajando. Uso git como sistema de control de versiones, así que abrí una rama específica para ello, completé la tarea en una larga serie de commits y finalmente corrí mis pruebas automáticas. No pasaron.

El problema

Había un bug complejo y, como todos los bugs, inesperado. Claramente había sido introducido por el “gran cambio” (las pruebas automáticas en la rama principal pasaban sin problemas), pero el cambio se había dado en una serie larga y compleja de alteraciones a varios puntos del sistema. Si hubiera hecho pruebas automáticas en cada paso me hubiera dado cuenta, pero ahora la tarea se complicaba.

¿Acaso hay alguna manera sencilla y práctica de regresar a ver cada cambio y descubrir cuál causó el error?

En git la tenemos: el ...]]> Hace unos días tuve que hacer un cambio importante que requirió varias alteraciones al sistema en el que estoy trabajando. Uso git como sistema de control de versiones, así que abrí una rama específica para ello, completé la tarea en una larga serie de commits y finalmente corrí mis pruebas automáticas. No pasaron.

El problema

Había un bug complejo y, como todos los bugs, inesperado. Claramente había sido introducido por el “gran cambio” (las pruebas automáticas en la rama principal pasaban sin problemas), pero el cambio se había dado en una serie larga y compleja de alteraciones a varios puntos del sistema. Si hubiera hecho pruebas automáticas en cada paso me hubiera dado cuenta, pero ahora la tarea se complicaba.

¿Acaso hay alguna manera sencilla y práctica de regresar a ver cada cambio y descubrir cuál causó el error?

En git la tenemos: el comando git bisect.

La solución

git bisect es, según la propia documentación de git, un comando para “encontrar por búsqueda binaria el cambio que introdujo un bug“. Para usarlo, hay que localizar un commit con el bug (en mi caso, el más reciente) y uno sin el bug (para mí, el punto en el que me separé de la rama principal, digamos 495e8b). Para comenzar la bisección corrí:

$ git bisect start

Marqué como malo mi commit más reciente con:

$ git bisect bad

Y marqué como bueno el commit de la separación:

$ git bisect good 495e8b

A lo que git me respondió con:

Bisecting: 16 revisions left to test after this.

Y automáticamente hizo checkout de una versión intermedia entre HEAD y 495e8b.

En mi caso había un problema con mis pruebas (apuntaban a URL’s que se hicieron incorrectas con el cambio), así que lo corregí, las corrí y al ver que pasaban marqué la revisión como buena con:

$ git bisect good

Y obtuve como respuesta:

Bisecting: 8 revisions left to test after this.

Y git hizo checkout de una nueva versión intermedia. Tras repetir este proceso (corregir las pruebas, correrlas, determinar si el commit era bueno o malo y avisarle a git) varias veces finalmente quedó una sola revisión por probar, la marqué como buena y git me respondió:

b824cd36abed30de79e6765a684a4a22d5838bf3 is the first bad commit.

¡Ajá! El culpable. Usé git show b824cd para ver el patch con los cambios, identifiqué el error y volví a mi commit más reciente:

$ git bisect reset

Arreglé el problema y listo, a seguir trabajando.

¿Y si lo quiero automático?

Por diversas razones yo tuve que estar ajustando los tests a mano para hacerlos funcionar, pero si hubieran funcionado para todos los commits por revisar, habría podido escribir un pequeño script que regresara 0 si un commit es bueno o 1 si es malo:

#! /bin/bash
# Script para correr las pruebas automáticas.
python manage.py test miapp # O cualquier comando que corra tus pruebas.

Y le pediría a git que lo corriera para revisar los commits y determinar si son buenos o malos.

$ git bisect run script-de-pruebas

Incluso pude haber automatizado los ajustes dentro del script, pero para este caso me pareció más sencillo hacerlo a mano.

]]> http://vincoorbis.com/encontrar-bugs-usando-git-bisect/feed/ 0