This is a real thing. It happened in my last trip flying with KLM. I bought a ticket from Barcelona to my natal country, Guatemala.

## How all of this begun

After almost a year since the last time I went to Guatemala, it was time to see my new nephew and see my family. I bought a ticket, the flight was operated with KLM and my schedule was:

- Barcelona to Amsterdam (KLM 1666)
- Amsterdam to Mexico City (KLM 685)
- Mexico City to Guatemala (Avianca 2617)

On the 11th of July I took the first flight in Barcelona, excited about it. I bought a couple of presents (wine of course) and a special present for my sister, an iPhone 6s that I wanted to give her.

## My first experience with KLM

Back in October 2014 I had my first flight with KLM, my destination, South Korea. I don't remember too much about the flight but I remembered I enjoyed it.

Back from Seoul, I thought it was a good idea to visit my guatemalan friend in Germany, so I changed my flight and extend it.

My first issue was when I asked to reschedule my flight to a week after my original departure, my surprise was when I was in Schiphol airport the day of my flight back to Guatemala, they booked my flight wrongly and I had to stay at the airport to take a flight the next day, they didn't give a place to stay, so without other clothes nor something to be warm I slept there. This happened after an argue about which had the fault of booking it, me or the counter woman.

Long story short, I was in Guatemala, not a big deal, just a bad experience.

## About the trip to Guatemala

I had a long layover in Mexico City so I visit a friend and had some tacos and a nice sleep, the next day (12th of July) I was in Mexico City airport, I went to the counter and got my new ticket, and this is when it starts to get interesting.

I had to go to Aeromexico to have my ticket from KLM (nothing strange here, I know that airlines cooperate between each other), but I was surprised when it was an Avianca flight I had to take.

So, I had the tickets with KLM, go to Aeromexico to take my ticket for an Avianca flight.

## My bag, my stuff

When I arrived to Guatemala, I got my bag and wait my father to get me from the airport, I was really happy about see him again and to know that he is good and happy too!

When I was at my house, I opened my bag and my surprise... it was all messed up, and I thought, "well probably it was because of the flights", I search for my sister present and violà, it wasn't there...

I was really worried, I mean, it wasn't a new phone but I take alot of care with my things, and the phone was in an optimal state, with all the accesories, and even the original box.

## When I ask for answers

I approached KLM, telling them the story you already know and they kindly start "helping me", then a message that I receive made me a little angry.

![klm-response](//images.ctfassets.net/byi1r1jyqvnm/3DbtaC1W5qwq6EaCKs6q6M/f7d58c4f3f56bd77fceb4f1aca3661be/klm-response.jpg)

I approached Avianca, as they told me and explained the same story (and was the plane I went from Mexico to Guatemala).

And this was their answer...

![avianca-response](//images.ctfassets.net/byi1r1jyqvnm/5ikrStORHiomOCykkesyaO/aac7191615e646cbf35a606d9fcf1b7c/avianca-response.jpg)

I (even more worried) approached Aeromexico, and again explained what happened. My surprise, they told me that that kind of objects weren't covered.

![aeromexico-respuesta](//images.ctfassets.net/byi1r1jyqvnm/3VOjjiX0tiW8Wme6wocSeg/ec39c1ddbae6d4cc7061180d96b47050/aeromexico-respuesta.jpg)

WHAT!? So, it's my fault that I had a phone in my bag, a valuable thing shouldn't be in the checked baggage, but that's not the point.

## So, what's the point?

Somebody opened my bag, in this case they stole something from it, but what if they put something in my bag, something that is not mine, or even worse... something that is not mine and is illegal.

I don't know what to do, I feel that I can't trust airlines, I want my phone back, and I need to know what happened.

This is my desperated attempt to have a little of notice about what happened to me. I'm sure I'm not the only one that had this issue and I want airlines to be more responsible of the people that fly with them, and to have some emphathy about it.

Non of them want to take responsability and they are just passing the ball between each other.

Please, help me and share this story. Make this happen and help avoid another person to be in this situation.



The time I got stolen by KLM

Como ingenierio de software, si tienes tu laptop y conexión de internet, puedes trabajar. 

Esa flexibilidad sumada a un lugar de trabajo que te permite hacerlo fuera de la oficina, ayuda a crear una sinergia donde puedes desarrollar tus ideas en cualquier parte del mundo.

En el último año tuve la oportunidad de ir a diferentes países con la misión de saber que eso de __trabajar remoto__.

Quiero mencionar que mi caso no es "complemente remoto" o "equipos distribuidos".

## Todo empezó desde casa

Una o dos veces a la semana la primera hora de trabajo la hago desde casa, leo mi artículo del día, respondo correos y resuelvo tareas que no están directamente relacionadas con programar.

Esta rutina me ayuda a enfocarme en 2 grupos de tareas distintos y tener tiempo de calidad dentro de la oficina haciendo las tareas técnicas.

Me gusta poder tomarme un café en casa mientras preparo el día y así ser más productivo dentro de la oficina.

## Viajar es descubrir

Recuerdo la primera vez que viajé fuera de Centro América y tuve contacto con otra cultura, a parte de lo emocionante que es lo desconocido y las nuevas experiencias que viví, al regresar sentí que un switch  cambió mi manera de pensar y estoy muy seguro que ha forjado ideas y habilidades que de otra forma hubieran sido muy diferentes.

 ![Parque Tairona - Santa Marta, Colombia](//images.ctfassets.net/byi1r1jyqvnm/2IsRU9DBZe0osWEy2YSmCw/7edfe7b02f5cd167bc6bf2c1ccd52b68/IMG_2085.JPG)

Poder conocer otros puntos de vista sobre un mismo tema por cuestiones de cultura, costumbres y tradiciones de otras personas enriquece la forma como resolvemos problemas y afrontamos situaciones en nuestra vida.

Normalmente viajamos por placer o por trabajo, ¿por qué no juntar ambos? Por qué tengo que esperar una fecha específica para gastar mis "ahorros de viaje" en 2-3 semanas donde me "desconecto" del trabajo y "difruto de la vida".

## Mi primera experiencia

La primera vez que trabajé remoto fue desde Guatemala, y tengo que decir que no fue la mejor. Se que fue un poco desafiante para mis compañeros de trabajo y también para mi.

Tuvimos algunos inconvenientes que resolvimos en iteraciones, donde los  diferentes miembros del equipo que también trabajan remoto apoyaron para resolver.

## Las normas

Luego de algunas iteraciones, retrospectivas y discusiones convenimos en algunas normas que ayudarían a que el trabajo remoto no fuera algo malo para el equipo, pero más algo común y normal.

![Uzitak Coffee - Belgrade, Serbia](//images.ctfassets.net/byi1r1jyqvnm/1GnxMvLdh6wmU2mgiqUu4w/50094f63bc4836561211f31d63e8f36a/IMG_8818.JPG)

### Overcommunicate

Al trabajar remoto la incertidumbre es muy grande, preguntas como: estará conectado, estará trabajando, a que hora se conectará, hasta que hora estará, está disponible, etc... surgen a los miembros del equipo que no están en remoto.

Por ello, es necesario que el que está remoto haga saber al resto del equipo, a que hora se conectó, y cuando no estará disponible.

En mi caso yo menciono cuando estaré conectándome, cuando iré a comer, cuando regreso de comer y hasta que hora estaré conectado, así mis compañeros sabrán cuando contactarme.

### Comprometerse a completar

Cuando se te asigna una tarea, no existe diferencia si estás remoto o no es necesario copmletarla para desbloquear al equipo para el siguiente paso.

El incoveniente puede ser cuando existen horas de diferencia, por ello la idea es que puedas terminar tareas en el día y que puedan existir avances día a día, así es más fácil que el equipo sigua un ritmo y descubrir algún bloqueo.

### Daily updates

Es importante reportar los avances hechos para que el equipo pueda estar al tanto y moverse agilmente ante cualquier imprevisto.

Solemos escribir en el grupo del equipo lo que se trabajó y los bloquers, para que cualquiera pueda apoyar en el momento indicado.

### Prepararse para las reuniones

Una de las cosas de trabajar remoto que es complicado en lugares que no conoces es encontrar un espacio para tener reuniones, por ello antes de alguan reunión al que está remoto tiene que asegurarse de:

- Tener una conexión a internet descente y estable
- Que el ruido debe sea moderado para que se escuche lo que dices y no moleste al equipo
- Tener la iniciativa de crear el cuarto para la reunión
- Estar listo 5 minutos antes para estar seguro que el audio y video funciona correctamente

### Es una relación bidireccional

Una de las cosas más importantes es que la empresa y tus equipo confía en tí por eso tienes la flexibilidad de trabajar remoto y tienes que devolver esa confianza. La diferencia es, trabajar remoto y no "trabajar remoto".

Coprometerse a entregar y ser igual de productivo que dentro de la oficina ayuda a crear confianza en el equipo y a mostrar respecto a tus compañeros. 

No solo es lo que entragamos y el valor que damos a la empresa el que cuenta, sino también la relación que tenemos con nuestros colegas.

## Los beneficios

Como comentaba, en mi caso y se que mucho otros, trabajar remoto es un punto medio entre trabajo y vacaciones.

Como decía Diego, nuestro PO, - *para mi al trabajar remoto, trabajo como en la oficina, simplemente que al cerrar la laptop estoy en otro lugar*.

Caminar entre calles solo para saber que hay en esa esquina escondida.

Probar comida nueva y desconocida para descrubrir los sabores de otra región.

Hablar con gente para conocer sus puntos de vista y abrir mi perspectiva de como ver la vida.

O simplemente ir por una cerveza en mi nuevo bar favorito.

Todo eso me hace creativo, y me ayuda a ser más feliz y más productivo.

![Campos de arroz - Sideman, Bali, Indonesia](//images.ctfassets.net/byi1r1jyqvnm/p8lIdKhaEKuIkou2ok2W8/157df668650c890722e52daaec6a58f0/IMG_4423.JPG)

...


Por más días en medio de alguna ciudad. Por esas líneas de código escritas en medio de la selva, o esas ideas que venían mientras caminas por un lugar desconocido.

Por esas personas que conoces en un restaurante o en algún bar.



Por qué trabajar remoto es importante para mi trabajo

En el último año hemos escuchado y leído mucho sobre los Chatbots y las interfaces conversationales o llamadas Conversational UI’s.

Y mucho de ese hype lo debemos a Messenger y a su estrategia de querer utilizar los bots para todo, quien los culpa, querer ser los primeros en un nuevo mundo de posibilidades.

Hace 2 meses cambié de proyecto para ser parte del equipo de exploración e innovación de Typeform, junto con el cual hemos trabajado en los últimos meses en un proyecto que llamamos Conversations.

## Pero, ¿qué es esto de Conversations?

El proyecto empezó cuando para una campaña de marketing, en mi equipo anterior, se me pidió hacer algo relacionado a las nuevas interfaces, entre ellas los bot. Después de unas rondas de brainstorming, se nos ocurrio hacer un tipo de “director cuts” pero para un artículo, pues hasta el momento los artículos eran de una vía.

La idea estaba creada, junto con los diseños de Sevkan Ariburnu y luego más tarde Iker Fernandez y con el apoyo de Alex Bass, creamos el primer artículo conversacional del mundo, al que llamamos CUI.

Pasaron los meses, mientras otras empresas lanzaban sus productos basados en una interaz tipo chat, nosotros con un hype de nuestros clientes e influencers no cabía en la mente por qué no hacíamos algo con esa tracción.

## Horizon 3, exploración.

Existen 3 horizontes para una empresa:
- __Horizonte 1__: Acciones con impacto a corto plazo y de apuesta segura
- __Horizonte 2__: Acciones con impacto a corto/mediano plazo, nuevas características de un producto para mercados existentes
- __Horizonte 3__: Acciones con impacto a largo plazo y para mercados nuevos o emergentes

Yo estoy en el __Horizonte 3__, y si bien las CUI ya existían (son horizonte 2), creíamos que con la experiencia que teníamos del experimento anterior podríamos sacar provecho y hacer algo interesante.

## Hola, CUI. La nueva interfaz.

En los últimos 2 meses he trabajado junto al equipo de exploración para hacer nuestra versión de un chatbot, con la diferencia que no lo es. Decidimos no finjir que hay un humano, sino crear una herramienta para poder recolectar datos de una forma más contextual, más conversacional.

Si estás tan emocionado como yo cuando escribí este artículo, llena este CUI 😉 y te agregaremos al Alpha Test.

<Cui uid="vTfT76" theme="#333" avatar="https://typeform-labs.s3.amazonaws.com/cui/avatars/vTfT76/5925919877e2b47bca6b.jpeg" />

La nueva interfaz conversacional - hola CUI

En cualquier tipo de software las versiones son algo familiar. La primera versión de un proyecto es normalmente denotada como 1.0.0, la versión beta cuando un proyecto es nuevo, o una versión menor cuando se arregla algún error o existe una nueva feature.

Al instalar un plugin de WordPress o una librería de NPM, cada vez que cambiamos una versión algo se arregla o algo se añade y la forma sistematica para describir esos cambios es a través de "semantic versioning".

## ¿Qué es semantic versioning ([semver](https://semver.org/))?

Semantic versiong es la forma como denotamos el cambio de un proyecto.

- Patch: (1.0.x), denota un "fix" normalmente se crea cuando se corrige algún error.
- Minor: (1.x.0), denota un cambio pequeño, normalmente añade funcionalidad que no rompe nada en la versión actual.
- Major: (x.0.0), denota un "breaking change", es decir un cambio en el API, un refactor que afect la interfaz de tu proyecto y que al consumidor del proyecto le puede forzar a hacer algún cambio en la implementación del proyecto.


## Haciendo un nuevo release

Implementar __semantic versioning__ es bastante sencillo y la complejidad viene con la personalización que necesitemos, veamos la que más utilizo.

#### Instalemos las herramientas

1. Intalemos el paquete para hacer semantic release
`yarn add --dev semantic-release`

2. Agregemos la configuración a `package.json`
```
"release": {
  "verifyConditions": [
    "@semantic-release/github"
  ],
  "publish": [
    "@semantic-release/github"
  ],
  "githubUrl": "https://api.github.com"
}
```

Donde en este ejemplo, es de un proyecto en el que no voy a publicar el proyecto en NPM. Este solamente creará un tag y un release en github.

Si en caso quisiera que también el proyecto se publicara en el registry, la configuración sería [algo así](https://github.com/semantic-release/semantic-release/blob/caribou/docs/usage/plugins.md#configuration).

En este ejemplo, usaremos Travis CI, y la configuración necesaria es una variable de entorno `GH_TOKEN`, que puedes obtener en el [área personal de tokens](https://github.com/settings/tokens) y luego agregar en tu proyecto.

En caso necesites publicar el projecto a NPM registry, debes agregar `NPM_TOKEN`.

Luego debemos hacer saber a nuetro CI que deseamos publicar una nueva versión en el build, agregando la configuración en Travis (.travis.yml):

```
language: node_js
node_js:
- node
cache: npm
script:
- npm run build
after_success:
  - npm run semantic-release
notifications:
  email: false
```

Cada vez que se haga un push a master en tu proyecto (merge o commit), este hará un nuevo release en GitHub. En caso utilizas `yarn`, puedes cambiarlo y funcionará de igual forma.

![last-release-github](//images.ctfassets.net/byi1r1jyqvnm/5SHnzm2wMMSo2swMucU0oK/55bc425a8be3e553c52892b3ba55f9ef/last-release-github.jpg)

## Haciendo commits "semánticos"

Las nuevas versiones de tu proyecto pueden ser descritas por los commits, y siguen el [formato de Angular](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines).

```
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

Los tipos de commits más comunes son:

- __fix:__ genera un patch version
- __feat:__ genera un minor version
- __BREAKING CHANGE:__ genera un major version

Sin embargo [existen más](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type).

Al principio puede ser tedioso y una tarea mental hacer commits con este formato, haciendo que no se genere una nueva versión de nuestro proyecto. Para esto existen herramientas que enforzan y facilitan la creación de commits con este formato.

1. Instalemos el commit linter.
`yarn add --dev husky @commitlint/config-conventional @commitlint/cli`

2. Configuremos el [git hook](https://github.com/typicode/husky/blob/master/HOOKS.md) relacionado.

```
{
  "scripts": {
    "commitmsg": "commitlint -e $GIT_PARAMS"
  }
}
```

Y luego, este verificará que el commit tenga el formato necesario para hacer semantic release.

Existen otras herramientas como [Commitizen](https://github.com/commitizen/cz-cli) que tienen el mismo objetivo.

## Entonces...

Crear releases de nuestros proyectos ayudan a poder saber como el proyecto ha evolucionado y el estado del mismo.

Además de proveer una forma común de describir el tipo de cambio que nuestro proyecto tiene durante el tiempo, e informar a los consumidores del mismo.

Automatizando releases en tu proyecto

En Typeform estamos dividos en lo que llamamos "colonies", cada colonia es un equipo multidisciplinario que se enfoca en una parte del producto. Discover era a la que yo pertenecia, y nos dedicabamos a trabajar con las propiedades públicas.

Cuando se creó esta colonia eramos solamente 2 personas (el PO y yo) y en un lapso de unos meses crecimos a ser 11, obviamente la comunicación era algo fundamental y más aún cuando algunos miembros del equipo trabajaban de forma remota, y con un crecimiento tan rápido surgieron inconvenientes en reuniones.

## Typeform es Agile

Agile es una técnica de trabajo que se basa en el desarrollo iterativo e incremental, y tiene con ella un ritual de reuniones que son parte de un período de tiempo llamado __sprint__.

Un sprint, puede tener la duración que el equipo desee; en nuestro caso, y el más común, eran 2 semanas. 

En cada sprint tenemos reuniones de equipo para organizar el trabajo, estas son:
- __Tres amigos:__ En esta reunión revisamos las tareas que no están priorizadas y solitabamos lo necesario para que fueran más claras y conscisas.
- __Backlog refinement:__ Con las tareas que ya están listas para trabajar, las puntuamos  para tener una noción de dificultad e incertidumbre, para luego priorizarlas.
- __Retrospective:__ Después que termina el sprint, antes de hacer el sprint planning, nos tomamos un momento para reflexionar en lo que ha pasado en el sprint, que ha salido bien y que no lo ha hecho y que acciones tomaríamos para mejorar.
- __Sprint planning:__ Es la reunión donde definimos el objetivo del siguiente sprint y elegimos que tareas realizaremos en él.
- __Daily standups:__ Una reunión de equipo que se hacemos al principio del día donde hablamos sobre los avances del día anterior y lo que pensamos hacer ese día.

Cada sprint (2 semanas) tenemos una reunión, el retrospective, que nos da una idea de cómo nos hemos desempañeado. 

Imaginemos que esperamos 2 semanas para hablar con el equipo sobre una decisión tomada o algo que se podría mejorar, en ese tiempo se pierde contexto y detalles, y el mensaje se limita a lo que recordamos en el retrospective.

## Acortando el feedback loop

Hablaba de 11 personas en una reunión, con 5 ya es complicado y pensar que tenemos que alinear y mantener enfocadas al doble de personas por 1 hora, es difícil y más si la reunión pierde rumbo o hay gente usando sus laptops o revisando el teléfono.

Por eso pensamos que esperar 2 semanas para una reunión dedicada a dar feedback era mucho tiempo, como mencioné antes; se pierde contexto y detalles.

¿Cómo podríamos acortar el tiempo de feedback? Que el feedback fuera en el momento indicado y que tuviera el contexto de la conversación... ¿Cómo podríamos enfocar la reunión, y hacerla eficiente? ¿Por qué tardarnos 1 hora cuando podrían ser 35 o 45 minutos?

__¡Puntuar las meetings!__

Dedicimos puntuar las meetings, al terminar, puntuamos de 1 a 5 (entre mayor el número, mejor) como nos pareció la meeting.

Al evaluar la reunión cada uno se preguntaba:
- ¿Mantuvimos la reunión enfocada en el tema?
- ¿Empezamos a tiempo?
- ¿Mi asistencia tuvo razón de ser?
- Y más importante, ¿Conseguimos el objetivo de la reunión?

Empezamos a hacer esto en nuestro daily standup que tardaba hasta 30 minutos y ¡algunas veces no hablabamos de lo que importaba!

Encontrando una mejora increíble en nuestras standup meetings decidimos hacerlo en cada reunión, y funcionó.

Logramos hacer reuniones enfocadas, las cuales eran productivas y terminaban antes de lo esperado.

### Puntuar no lo era todo

También decidimos tener convenios (por no decir reglas) que ayudaron directamente a tener reuniones más productivas:

- Toda reunión debía tener una agenda y outcome.
- Las reuniones debían notificarse al menos con un día completo de antelación (ah! pero es urgente e importante! [bueno...](https://en.wikipedia.org/wiki/Time_management)).
- Damos 5 minutos de tiempo para gente que tenía reunión antes, o simplemente se dio cuenta a último minuto podría llegar sin perderse nada, después de eso empezabamos.
- Sólo trae tu portatil si es necesario para la reunión o la necesitas por que estás haciendo algo tan importante como la reunión.
- Si la reunión necesita preparación, prepárate... estará en la agenda.
- Si en la reunión nos desenfocabamos hacíamos el "[shark sign](https://www.babysignlanguage.com/dictionary/s/shark/?v=42983b05e2f2)" para hacer saber que nos desviabamos y debíamos retomar el tema principal y era una discusión para otro momento.

### Y ahora que...

Fue un buen aprendizaje, y a nuestro equipo de 4 programadores, 2 QA, 1 UI designer, 1 UX designer, 1 PO, 1 Scrum master y 1 engineer manager nos ayudó a ser más eficientes en nuestras reuniones.

Tu puedes tener los convenios que mejor te parezcan, al final es el tiempo de todos y las reuniones de equipo deberían ayudarte a trabajar mejor y no ser el tiempo en que miramos 9gag o que ocultamos los bostezos por que pensamos que es tiempo perdido.

¿Tienes tus tips? ¡Escríbeme y cuéntame!



Cómo creamos reuniones productivas en 1 semana

Nuevo año, nuevo sitio. Pero esta vez no solo he cambiado el diseño sino también el “alma”.

Se dice que los ingenieros tienden a complicar una solución por naturaleza, y esta no fue la excepción. 

Este es el resumen del por qué decidí cambiar de tecnología.

## ¿Cómo era antes?

Mi sitio web funcionó por más de 6 años con WordPress, tuve la oportunidad de vivir la evolución de la plataforma. Desde que era un “sistema para blogs” hasta ser una herramienta que está detrás de muchas aplicaciones y que está en el 29% de todos los sitios web del mundo.

Tiempo antes de pensar en moverme de tecnología trabajé en mejorar mi stack. Usaba GitHub para la manejar los cambios el tema ([Sage](https://roots.io/sage/)), las versiones de WordPress y los plugins ([Bedrock](https://roots.io/bedrock/)).

Cada vez que hacía un cambio en tema, este era actualizado por medio de [Deploybot](https://deploybot.com), quien creaba un nuevo build y escribía los nuevos cambios a [Mediatemple](https://mediatemple.net), mi proveedor de hosting.

Ya con pipepline de deployment funcional, ¿por qué cambiarlo?

## Los inconvenientes de mi stack

### Sincronización de datos
Siendo WordPress una aplicación dependiente de una base de datos, el estado de cada una de ellas era independiente y difícil de replicar*.

Si necesitaba hacer preview de nuevo contenido, podía hacerlo en ambiente de producción usando “preview" dentro de WordPress y al estar seguro publicarlo, fácil. 

De igual forma con un cambio de código, hago el preview en mi local y luego hago un commit y se inicial el pipeline de Continuous Deployment.

Pero que pasaba cuando es un cambio de ambos, contenido y código. Debía hacer el proceso por separado y se volvía un va y ven por algo tan sencillo.

_*Usaba plugins de pago para sincronizar las bases de datos, WP Migrate DB Pro_

### Replicar ambientes

Para replicar un ambiente necesitaba de un servidor en el cual debía tener PHP y MySQL, esto podría solucionarse con Docker, vi tutoriales y me parecieron muy complicados simplemente para poder crear un ambiente de desarrollo portable e independiente, además que necesitaba aprender una tecnología que no utilizo en mi día a día y veía el beneficio en principio.

### Es pesado

Mi sitio es un blog, un sitio web con artículos que se muestran de forma distinta y ya. Por qué debo cargar toda una aplicación en PHP para mostrar contenido que no cambia de forma constante y que es texto e imágenes.

No estoy diciendo nada contra WordPress, simplemente que para lo que necesito es mucho.
 
## Los requerimientos

Entonces, necesitaba una solución para que mi sitio fuera: fácil de sincronizar datos, de replicar y liviano.

Además de eso, quería usar en un proyecto nuevas propuestas de frameworks y herramientas que la comunidad tenía.

### Separación de “concerns"

Mi modelo (contenido) debía estar separado de mi vista. Al ser así, podría modificar el contenido independientemente de donde este proviene.

Además tendría un single source of truth y así podría replicar mi sitio simplemente replicando el frontend (la vista).

### Frontend en javascript

Uno de los trends y propuestas que me convencen es el concepto de “[reactive programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)”, y es tan simple como: la interfaz refleja el estado de la aplicación en todo momento.

Y javascript como lenguaje que corre en el ambos, el cliente y el servidor hacía más fácil el desarrollo.

### Debe ser estático

Un artículo rara vez cambia después que lo publico y las publicaciones de mis experimentos son actualizados cuando tengo una nueva versión y esto no pasa tan a menudo, digamos 1 vez al mes.

Entonces no necesito tener una base de datos todo el tiempo, de la cual leo el contenido y dependo de, en cambio podría tener el contenido en simples html, al final es solo texto e imágenes.

### Debe tener CI y CD

Para los nuevos Continuous Integration (test automáticos que aseguran que mi nuevo código no rompe nada) y Continuous Delivery (todo Pull Request que es merged en master, crea una nueva versión del sitio automáticamente), si aún te confunde puedes leer este artículo.

No me tengo que preocupar de arrastrar y pegar los archivos que cambio (como los viejos tiempos en WordPress) sino que esto lo hace una máquina por mi.

## La propuesta

En el año estuve experimentando con diferentes herramientas, tecnologías, frameworks y librerías.

Y me decidí por las siguientes:
* [Contentful](https://contentful.com) - como manejador de contenidos
* [Next.js](https://github.com/zeit/next.js/) - para manejar mi aplicación en react
* [Styled components](https://styled-components.com) - para estilar mis components
* [Travis](https://travis-ci.org) - para CI & CD
* [Now](https://zeit.co/now) - como servicio de hosting

### Mi nuevo CMS, Contentful

Contentful es un Content Delivery Service, con un API robusta y fácil de utilizar, entre las características que me hicieron decirme por ella están:

* Preview API, puedo configurar un API con los “drafts” simplemente con cambiar el url del API, así tengo en mi ambiente de desarrollo el contenido que "estará en el futuro” sin necesidad de migrar los datos a una nueva base de datos.
* Webhooks, puedo configurar a que servicio notifico cuando hay un nuevo contenido.
* CDN integrada, ya no tengo que pagar más por Cloudfront ni S3 pues en el precio del servicio ya está incluido.
* SaaS, al ser un servicio no me tengo que preocupar por renovar el hosting, o actualizar algún módulo (plugin), o problemas de seguridad
* Headless por defecto, a pesar que WordPress ya tiene un API, sigue siendo muy robusto para tenerlo como un API de contenidos.
* Tiene “custom fields”, los contenidos se “modelan" con campos (como en ACF) y existe una gran variedad de campos, si no existe, puedes crear campos personalizados.
* Cliente de javascript, si bien Contentful tiene un API, también tiene un cliente que hace aún más fácil la integración con el CDA, extrayendo la implementación a una interfaz simple de utilizar.

### Mi aplicación en react, next.js

A pesar que existen muchos frameworks, boilerplates or starters para proyectos en react, next.js tenía básicamente todo lo que necesitaba para mi proyecto.
* Usa react, nextjs está hecho para React, y eso ya es un punto para mi, además tiene una comunidad muy sólida y mucha experiencia en proyectos Open Source.
* SSR, nextjs tiene por defecto Server Side Rending, entonces no me debo de preocupar por el SEO pues las páginas se generarán en el servidor
* Generador de sitios estáticos, un una simple configuración de tener una SPA, a una aplicación común con servidor, puedo crear una aplicación que no depende de un servidor, al final es solo texto e imágenes no?
* Agnóstico, nextjs tiene un footprint muy pequeño y si bien trata que utilices las herramientas creadas por ellos, no te ata a usarlas, y lo que trata es de ser una buena base para aplicaciones hechas en React. 

### Adiós SASS. Hola Styled Components

Utilizamos Styled Components en la nueva documentación para Typeform y nos encantó, tanto que el equipo de ingeniería está moviendo los proyectos de CSS Modules a Styled Components, las razones:
* Es CSS con super poderes, pues sigues utilizando la sintaxis de CSS con más opciones
* Ya no debes emparejar componente con estilo, pues el componente tiene los estilos en si.
* Es compatible con SSR, por lo mismo se puede crear Critical CSS en caso necesitemos optimizar, en mi caso solo necesitaba generar el CSS base para mejorar el performance de mi sitio web.
* Tiene una librería "à la SASS", llamóada Polished, en la cual tienes muchas de las funcionalidades que nos gustan de SASS.

### Hola travis, adiós Deploybot

Travis es una herramienta para CI y CD, a mi parecer mejor que cualquier otra que existe hasta ahora:
* Se integra de maravilla con GitHub, puedes configurar crear preview en PRs, o solo generar nuevos builds en ciertas ramas en tu repo por ejemplo.
* Configuras el comportamiento de tus deploys por medio de un archivo comprensible, .travis.yml .
* Tiene soporte no solo para proyectas en javascript, pero muchas más tecnologías.
* Es gratis en proyectos OS, y mi sitio web lo es.

### Adiós (mt). Hola now

Now es de la misma compañía que Nextjs, y se llama Zeit. Zeit tiene para mi el mejor UX para developers en todos su proyectos.
* Puedes deployar prácticamente cualquier tipo de aplicación, en Docker, node or stático
* Va perfecto con Nextjs
* Tiene un CLI que está perfecto, desde hacer deploys como crear nuevas instancias de tu aplicación desde la consola
* Es gratis para proyectos pequeños y muy barato para proyectos medianos.

## La conclusión

Ahora mi sitio web corre mucho más rápido, es más fácil de actualizar y más estable, pues solo son archivos html con css. Estoy feliz con el cambio y espero que esto resuelva algunas dudas del por qué pienso regresar a los conceptos básicos de la web.

De WordPress a un sitio estático

Como parte del mejoramiento de la web en español, haré una serie de tutoriales de CSS avanzado, con un fín útil. No tengo un número definido, pero si veo que tiene una buena respuesta se puede extender hasta donde las ideas den.  Y empezaré con **hover y posición absoluta**. Pero, ¡Esto ya lo sé! - diras. Vamos a partir de lo más básico y para crear efectos y utilidades muy buenas con css, pasándonos de básico -> avanzado. Solo quiero decir que, todo esto solo es una probadita de lo que viene en [npzine](http://npzine.com)... Así que estén preparados, ya que van 15 colaboradores confirmados en diferentes países de toda América y España. Así que empezamos...

## ¿De qué trata?

En este tutorial vamos  a aprender a utilizar el hover, posición absoluta y el z-index. Jugaremos con estos elementos para crear un efecto de cortina con puro CSS. Para que te des una idea, es muy parecido al efecto que tengo en mi portada, el de las entradas. Al igual que como hacer un ribbon.

### Empezando

![portafolio](http://jepser.com/wp-content/uploads/2009/09/portafolio.jpg "portafolio") Voy a utilizar una imagen de 500px * 250px en este ejemplo y para maquetar 960gs. Pues nos facilitaremos algunas cosas con el framework. Crearemos el markup, para poder contener la imagen y el texto a mostrar. 

```
<div class="contenedor">
    <img src="images/ejemplo1.jpg" alt="foto guatemala" width="500" height="250" />
    <div class="texto">
        <h4>Esto aparece cuando me coloco encima</h4>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu nunc sem. Nullam sed lorem et nibh bibendum faucibus. Suspendisse facilisis mauris eget. Nulla facilisis dictum quam at interdum. Etiam id nisi diam.
    </div>
    <div class="textoh"><a href="#">Ver proyecto</a></div>
</div>
```

Una vez tenemos el esqueleto, nos vamos a crear el css: 

```
.contenedor{ position:relative; width:500px; height:250px; border:#FF6600 5px solid; }
.contenedor img{ position:absolute; top:0; left:0; z-index:2; }
```

`.contenedor` será donde estará todo, y estamos dandole posición absoluta a la imagen que estará de fondo, en nuestro caso para ilustrar el proyecto si fuera para un portafolio.

```
.contenedor .texto{ position:absolute; top:0; left:0; z-index:2; padding:50px 0 10px; }
.contenedor .texto h4{ background:#FF6600; color:#FFFFFF; display:inline; padding:5px; }
.contenedor .texto p{ background:#FF6600; color:#FFFFFF; margin:20px 0; padding:5px; width:90%; }
```

Le damos estilos a el texto naranja, para que se muestre encima de la imagen. EL h4 tiene display in line, para darle el estilo pegado, ya que por default es tratado como un bloque, al igual que el párrafo.

```
.contenedor .textoh{ position:absolute; left:0; top:0; z-index:-1; width:100%; height:100%; text-align:center; background:#333333; color:#FFFFFF; opacity:.9; }
.contenedor .textoh a{ margin-top:115px; display:block; color:#FFFFFF; text-decoration:none; font-size:16px; }
```

Hemos creado ahora el div que será colocado encima cuando hagamos hover en el div.contenedor. Este div ahora está atrás de la imagen debido al `z-index: -1`, nota que he puesto una opacidad que solo será vista en los buenos exploradores.

### La magia

![portafolio-hover](http://jepser.com/wp-content/uploads/2009/09/portafolio-hover.jpg "portafolio-hover")

```
.contenedor:hover .textoh{ z-index:3; }
```

Y listo, lo único que hacemos es que cuando, estes encima del div.contenedor, .texth salga hacia el frente. Simple pero poderoso, este efecto lo podrás usar para darle información extra a tu visitante, o algo que desees mostrar cuando estén encima de un objeto. NOTA: Este selector solo funciona con IE>7 y todos los demás exploradores. Realmente no me interesa hacer cosas que funcionen en IE6 y podrás estar encontra, pero la gente que lo utiliza creo que ya está acostumbrada a ver los sitios mal.

## ¿Cómo hacer un ribbon?

Otra cosa que me han preguntado es la forma que se crean los ribbons (las pestañitas que salen del layout). Eso también es gracias a la posición absoluta. Que te parece si creamos uno para que lo puedas utilizar en una caja de suscripción, para que tal, feedburner. Escribiendo el markup, html:

```
<div id="suscribete">
    <div id="title">
        suscribete<span class="ribbon"></span>
    </div>
    <div class="texto"> a nuestro RSS, tan f&aacute;cil como<br />escribir tu correo eletr&oacute;nico.</div>
    <form id="suscribeform">
        <div>
            <input name="" type="text" class="text" value="yo@midireccion.com" />
            <div id="suscribe-enviar">
                <input name="" type="button" class="button" value="suscribirme" />
                <span class="ribbon"></span>
            </div>
        </div>
        <div class="clear"></div>
    </form>
</div>
```

Esto dará como resultado algo sinflón y sin gracia :) Vamos al protagonista de esta historia, el css. ![ribbon1](http://jepser.com/wp-content/uploads/2009/09/ribbon1.jpg "ribbon1")

### 1\. Estilos al titulo

Crearemos el título celeste ahora, y le vamos a dar posición para poder colocarlo donde queremos, dando el efecto que sale de atras.

```
#suscribete{ position:relative; background:#00c0ff; width:500px; height:150px; }
#title{ position:absolute; top:10px; left:-27px; background:url(images/ribbon-back.gif) bottom repeat-x #074e64; color:#FFFFFF; font-style:italic; font-size:30px; padding:2px 15px 2px 40px; }
#title .ribbon{ position:absolute; background:url(images/ribbon-tail.gif) no-repeat; width:27px; height:27px; left:0; bottom:-27px; }
```

![ribbon2](http://jepser.com/wp-content/uploads/2009/09/ribbon2.jpg "ribbon2")

Le colocamos la posición, una imagen para dar un efecto de degradado y el ribbon. Es una imagen que es posicionada sus dimensiones en negativo. como quiero que se salga para abajo, le doy un `bottom:-27px`. Para que quede exactamente su tamaño hacia abajo. También al propio titulo, lo muevo a la izquierda 27px. Recuerda que el contenedor de cualquier objeto con posición absoluta tiene que tener esa posición o una relativa; para resetear las posiciones como lo [explican en W3C School](http://www.w3schools.com/Css/pr_class_position.asp).

### 2\. Aplicando estilos al formulario

```
#suscribeform{ position:relative; margin-top:20px; padding:0 20px 0; }
```

Colocamos el formulario en una posición relativa para manipular los objetos en posiciones absolutas. Luego lo posicionamos bien. 

```
#suscribeform .text{ border:5px solid #06465a; font-size:20px; color:#999999; position:relative; top:20px; float:left; padding:5px 10px; }
#suscribeform .button{ border:none; color:#FFFFFF; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:20px; background:none; }
```

![ribbon3](http://jepser.com/wp-content/uploads/2009/09/ribbon3.jpg "ribbon3")

Le damos estilos al campo de texto y también al botón. Como puedes ver, el botón tiene un div que lo contiene. Este div será el que le dará el efecto de ribbon al botón.

```
#suscribe-enviar{ position:relative; bottom:-10px; float:right; background:url(images/suscribe-back.gif) repeat-x bottom #fd7e03; padding:20px 10px 30px; *padding:20px 10px 25px; /*tonto IE7*/ }
#suscribe-enviar .ribbon{ position:absolute; bottom:0; left:-10px; background:url(images/suscribe-tail.gif) no-repeat; height:10px; width:10px; }
```

![ribbon4](http://jepser.com/wp-content/uploads/2009/09/ribbon4.jpg "ribbon4")

Por último le damos el margen al formulario y colocamos al texto donde debe estar.

```
#suscribete .texto{ margin-left:190px; padding:15px 0 0; }
```

![ribbon5](http://jepser.com/wp-content/uploads/2009/09/ribbon5.jpg "ribbon5")

Listo, ahora le hemos dado una posición al div, donde lo bajamos 10px para que la colita que hemos colocado (la imagen que le da el efecto en la clase .ribbon). Como podrán ver, hay que colocarle un hack para que se mire bien en IE7\. Esto desvalida el código por lo que lo ideal sería que colocaran esta y otras propiedades dentro de un CSS condicional para IE. Esto se logra con el siguiente código luego de los estilos de CSS.

Puedes encontrar más información, sobre diferentes condicionales en [Quircks Mode](http://www.quirksmode.org/css/condcom.html).

*   [Ver demo](http://demos.jepserbernardino.com/magiacss/capitulo1.html)
*   [Obtener código](/wp-content/uploads/codigo/magiacss-cap1.rar)

Magia CSS, hover y posición absoluta

No se si a muchos les ha sucedido pero, esta es la primera vez a mi. Pues un cliente me pidió que cambiara su dominio después de haber creado y terminado con todas las configuraciones en otro. Es decir, tenía que hacer una migración. Y ese no era el problema, el problema era que Wordpress guarda las direcciones de forma absoluta, entonces eso me perjudicaba a la hora de mover el sitio de www.misiteantiguo.com a www.minuevositio.com. Ahora vas a ver como puedes mover tu sitio de un lado a otro sin tantas vueltas.

## Ante de todo

Recuerda que tienes que tener tu nuevo dominio preparado y con 36 horas de anticipación para que los DNS se propaguen, así te ahorrarás de futuros dolores de cabeza.

## 1\. Backup de tu base de datos

![mudar1](http://jepser.com/wp-content/uploads/2009/08/mudar1.jpg "mudar1") Lo primero y más importante, obtener los datos que tienes en tu wordpress, para poder replicarlos. Una vez ingresamos a nuestro hosting, vamos phpMyAdmin (normalmente se encuentra bajo la sección de Bases de Datos, si utilizas Cpanel está bajo DataBases). Una vez estamos en el phpMyAdmin elegimos la base de datos donde está nuestro sitio. Le damos clic a la pestaña de exportar. ![mudar2](http://jepser.com/wp-content/uploads/2009/08/mudar2.jpg "mudar2") Una vez en la opciones tenemos que exportarlo como SQL, no se te olvide, luego:

*   Structure (darle clic a las siguientes opciones)
    *   Add DROP TABLE/ VIEW/ PROCEDURE/ FUCTION
    *   Add AUTO_INCREMENT value
    *   Enclose table and field names with backquotes
*   Data( chequear simplemente a este y nada más)

![mudar3](http://jepser.com/wp-content/uploads/2009/08/mudar3.jpg "mudar3") Le damos chequeamos Save as file y le damos la compresión que queramos. Ya tenemos nuestra información.

## 2\. Backup de Wordpress

Nada del otro mundo, abres tu cliente FTP y bajas todos los archivos de wordpress a una carpeta. Esto servirá para que los subas de nuevo a tu nuevo dominio. **Actualización**: Cuando bajes el wordpress, abre el archivo wp-config.php (está ubicado no más abres la carpeta), por si la base de datos a donde migras no tiene el mismo nombre, cambiando lo siguiente a los nuevos valores que has configurado en tu nuevo dominio:

        define('DB_NAME', 'aqui el nombre de la db');
        /** MySQL database username */
        define('DB_USER', 'aqui va el user');
        /** MySQL database password */
        define('DB_PASSWORD', 'aqui va el password');

## 3\. Prepara tu nuevo dominio

Como te dije antes, debes de ya tener tu nuevo domino configurado con su hosting con 36 horas de anticipación, si no lo has hecho, ve, tómate un café o durme un poco y regresa cuando se haya cumplido ese tiempo. Tienes que crear tu base de datos en tu servidor. Una vez la tienes funcionando vas a subir los archivos al FTP (los que bajaste en el paso 2) a tu nueva dirección. Tendremos que esperar un poco.

## 4\. Importar archivos

![mudar4](http://jepser.com/wp-content/uploads/2009/08/mudar4.jpg "mudar4") Una vez se subieron todos los archivos de tu Wordpress, vas a importar todos los datos de los cuales hiciste backup en el paso 1\. Para ellos ingresamos otra vez a phpMyAdmin (por supuesto en nuestro nuevo dominio verdad), elegimos la base de datos que ya creamos (la del paso 3) y en las pestañas hay una que dice Importar. Seleccionas el archivo y listo, le damos seguir. Ahora ya casi estas, solo falta un detalle, el que comente al principio. Para que Wordpress sea completamente independiente debes cambiar algunos parámetros en la base, ya que Wordpress guardar las direcciones (como páginas y links internos) de forma absoluta, lo que se dificulta, pero esto es solucionado en 3 pequeños pasos más.

## 5\. La magia

Si te das cuenta, en las opciones donde importaste y exportaste hay una solapa con SQL, elegis esa. Y ahora colocas este código:

        UPDATE wp_options SET option_value = 
        replace(option_value, 'http://www.mi-viejo-dominio.com', 'http://www.mi-nuevo dominio.com') 
        WHERE option_name = 'home' OR option_name = 'siteurl';

Lo que hacemos aquí es remplazar el url del sitio donde estaba alojado al nuevo. Ahora:

        UPDATE wp_posts SET guid = replace(guid, 'http://www.mi-viejo-dominio.com', 'http://www.mi-nuevo dominio.com');

Con este querie vamos a reemplezar todos los url's en los posts y las páginas, de manera que se vuelvan a tu nuevo dominio y por último:

        UPDATE wp_posts SET post_content = 
        replace(post_content, 'http://www.mi-viejo-dominio.com', 'http://www.mi-nuevo dominio.com');

Por último remplazamos todos los links que tenga el contenido, para no tener errores 404\. ¿Fácil no?

### ¡UPDATE! (14 dic 10')

Agrega este código para cambiar las url (si existen) de los custom fields.

    UPDATE wp_postmeta SET meta_value = 
    replace(meta_value, 'http://www.mi-viejo-dominio.com', 'http://www.mi-nuevo-dominio.com')

Ahora puedes utilizar mi generador de script para migración para facilitarte un poco la vida...

*   [Probar el script de migración](http://jepser.com/script-para-migracion/)

## 6\. Ahora sí, lo último

Ingresa al administrador y cambia el nombre del sitio o los correos configurados, date cuenta de que los plugins funcionen a la perfección. Espero que te sea de utilidad, ya que pase unas cuantas horitas viendo información sencilla y en español, pero no, la encontre mezclando varios sitio y en inglés; y no tengo problema con ello, pero es mucho más fácil de comprender las cosas en el idioma materno (o paterno). ¡Éxitos y pilas!

Mudando wordpress de un dominio a otro

Tráfico es sobre atención. Atención conduce a las ventas. Las ventas llenan los bolsillos. Por tanto todos quieren ser populares. ¿Cómo incrementar el tráfico en tu sitio? En la larga carrera, todo es sobre el agregarle valor. Es el contenido de tu sitio suficientemente interesante / valuable / útil para que la gente te contacte? Y más importante, ¿Querrán ellos regresar y recomendarte con sus amigos? Se ha dicho mucho de esto en mis artículos anteriores, [escribiendo el contenido](http://jepser.com/2009/05/como-crear-un-buen-sitio-web-escribiendo-el-contenido/ "Escribiendo el contenido"). Por tanto saltaremos lo básico -- la necesidad de ser interesante, legible, y amistoso con los motores de búsqueda. Hablemos de llamar la atención. ¿Qué cosas puedes hacer sin gastar todo tu dinero?

## ¿Dónde se mantienen tus clientes?

1.  **Vida real.** Antes de planear tu pocicionamiento en la web, piensa que están haciendo tus clientes potenciales en la vida real. Como los anuncios exteriores son muy caros, entonces sé un anuncio tu mismo -- incrementa tu autoridad. Habla en eventos de la industria y brinda lecturas universitarias, conviertete en el chico a quien contactan para comentarios o cualquier cosa que tiene lugar en tu industria.
2.  **Motores de búsqueda.** La gente va a Google por ayuda más seguido que con su mamá. Más veces. Más del 50% del tráfico de un sitio web popular viene de los motores de búsquedda. La gente anda en busca de respuestas, constantemente. En los resultados de búsqueda, el 90% de los clicks van a los primeros 4-5 links gratuitos. Por tanto, tienes que ser la primera respuesta. No hay nada más que decir. El SEO es una parte crucial para incrementar tu tráfico. Hay toneladas de buenos recursos para empezar. Prueba [Copyblogger](http://www.copyblogger.com/increase-web-traffic/) para empezar.
3.  **Sitios específicos de la industria.** Son foros, blogs y sitios de revisión para cada nicho de negocios que puedas pensar. Algunos de ellos son populares. Obtén comentarios o links para tu compañía / producto en las populares -- o conviertete en un comentarista de estos sitios. Puedes ver la popularidad en [Alexa](http://www.alexa.com/) o [Compete](http://www.compete.com/).
4.  **Social media.** En vez de vivir en la vida real, incluso tu viejo y gruñon vecino está conectado [Facebook](http://www.facebook.com/), [LinkedIn](http://www.linkedin.com/) y [Twitter](http://www.twitter.com/). Entre todas las otras cosas, la gente comparte y discute con conocimiento allí, tu industria es un tema. Pero Social media es más que recomendaciones de un amigo a otro amigo que para ti un paso desde cero. Por tanto pon más esfuerzo en los 3 pasos anteriores y social media hará su parte por sí misma.

## ¿Qué ganará su atención?

En adición de estar presente en los medios listados arriba -- **trabajo, honestidad y devoción** por supuesto. Más un larga historia de la compañía y el resto de sólidas virtudes, una no puede ser comprada por el dinero. Pero aquí hay unos pequeños trucos.

1.  **Atrae vínculos.** Escribe un blog con buenos temas, buenas declaraciones, listas de top 10, gráficos ilustrativos y un buen diseño. Con sabor y fácil de digerir, lo que más uno puede querer.
2.  **Escribe boletines.** Como importante es atraer nuevos visitantes es mantener a los que tu ya ganaste. Hazles fácil [que te dejen su dirección de correo](http://sethgodin.typepad.com/seths_blog/2009/02/email-campaign-case-studies-one-good-one-bad.html) por tanto podrás enviarles tu gran boletín de actualizaciones de un tiempo a otro.
3.  **Corre una campaña.** Gasta tu proximo dinero para anuncios comprando 5 iPhones y dalos en twitter. Tu serás recompenzado con [gazillion clicks](http://mashable.com/2009/07/01/moonfruit-macbook/) :) parte de ellos recurren si lo hacen bien.

Y finalmente, no olvides que es terriblemente fácil ir en la vía opuesta y **decrecer** tu tráfico  -- parando o pausando el duro trabajo de captar atención.

Fuente: [Edicy](http://www.edicy.com/blog/how-to-create-a-great-website-pt-6-increasing-traffic)

Como crear un buen sitio web, Incrementando el tráfico

Cada día alguien me contacta para discutir el empezar su proyecto web. Más amenudo ellos han creado una lista de "Yo quisiera" de funcionalidad en vez de tener una vista realista en como actualmente será usado . Entre más "Yo quiesiera" — será menos el que encuentres una herramienta única que pueda hacer lo que desee. ¿Solución? Es inevitable — alguien sugiere una brillante idea, gastar todo el tiempo y dinero de la compañía — configurar un nuevo servidor, instalar alguna solución todo-en-uno y desarrollar todas las partes faltantes desde cero. Después de todo, eso era lo que querias, ¿no lo era? El problema es que terminarás con un mostruo Frankenstein de sitio web que cuesta una fortuna y tiene poco uso práctico. Entonces, ¿Cómo evitar esto?

## ¡No lo hagas!

1.  No construyas desde cero. Un sistema web desarrollado solamente para tí que perfectamente encaje en tus necesidades puede fácilmente convertirse en algo muy costoso. ¿Que pasa si tus necesidades o tú estaban equivocadas de él?
2.  No construyas funcionalidad de muerte. Una de las cosas más feas que puedes encontrar en línea son foros sin discusiones, noteicias que datan del 2001 e intranets con cero usuarios.
3.  No creas en las soluciones todo-en-uno. Una herramienta que resuelve un problema es una herramienta bien enfocada. Una herramienta que soluciona todos tus problemas, se enfoca en y por lo tanto no resuelve nada.
4.  No sobre-automatices. ¿Estás planeando vender 50 productos durante un mese en tu tienda en línea? Entonces, ¿Porqué necesitarías una sincronización con la bodega?

## ¿Entonces, cómo hacerlo?

1.  Solo lanzala. Ser flexible con tus necesidades ahora mucho de tiempo y dinero. Crea tu tienda en línea con [Shopify](http://www.shopify.com/), tu sitio web con [Edicy](http://www.edicy.com/), tu blog con [Wordpress](http://www.wordpress.com/), tu intranet con [Basecamp](http://www.basecamphq.com/). Estas son simples y básicas herramientas que resuelve uno de tus problemas a al vez. Pero ellos lo hacen realmente y y están listos para lanzarlos.
2.  Expándelos. Incluso si el núcleo del sistema no tiene nada incluido, is bastante fácil extenderlo (casí) gratis y etiqueta blanca. Puedes incluir extensas galerías desde [Flickr](http://www.flickr.com/), buscador en el sitio desde [Google](http://www.google.com/sitesearch/), calendario desde [BookFresh](http://www.bookfresh.com/). Utiliza variedad de diferentes herramientas en vez de un todo-nada. Los boletines pueden ser enviados por [CampaignMonitor](http://www.campaignmonitor.com/), los documentos guardados en [GoogleDocs](http://docs.google.com/).
3.  Sigue la vida real, no trates de inventarla. Extiende y desarrolla tu sitio continuamente en vez de a) dejar que se pudra b) intentar construir algo perfecto a la primera. ¿Estás ya recibiendo 30 correos de soporte al día? Bien, tiempo de crear un foro. ¿Tienes algo realmente importante que decir más de una vez al año? Bien, configura una sección de noticias en tu sitio.
4.  Usa gente real. Hasta cierto punto, automatizar es inevitable. Pero empieza, personas reales son mejores. Así es como aprendes como y que automatizar. Por no hablar que, soporte personal y amistoso en vez de un solucionador de problemas automata ayuda a hacer crecer tu base de clientes leales. Automatiza cuando vas a crecer sin fuerza humana pronto.

Fuente: [Amigos de Edicy](http://www.edicy.com/blog/how-to-create-a-great-website-pt-5-building-functionality)

Como crear un buen sitio web - Creando la funcionalidad

Si no eres un diseñador entonces no tienes que molestarte en diseñar tu sitio web por tí mismo. Hay dos formas prudentes y efectivas para hacer el trabajo -- contrata a un buen diseñador o eligen una plantilla prediseñada de algún sitio de recursos.Y sé cauteloso. Un buen diseño no signican efectos especiales, gráficos fumados y un creciente número de diseñadores-wannabe visitando tu sitio.

## ¿Que hace un buen diseño?

**El diseño es bueno cuando te mantiene lejos de pensar.** No, eso no significa que el diseño sea un estupizador. Es solo que tu grupo objetivo debe estar detrás del contenido, no del diseño. El diseño solo debería dar soporte al cotenido, darle una forma. Un buen diseño no necesariamente impresiona. Pero definitivamente no disgusta. Un buen diseño te conduce a lo que estás buscando. La estética es cuestión de gustos. El gusto es un tema de discusión. A algunos nos gustan los ardornos, otros los detestan. Algunos nos gustan las letras góticas, otros dicen que son feas. Me gusta la paleta café, pero a tí te gustan los azúles. No hay una desición a prueba de balas para la estética. Pero el diseño como forma, como un layout para el contenido y funcionalidad es una pregunta para entender, no probar. Para de cuestinar el diseño de tu sitio y has alcanzado un diseño a prueba de balas. Un buen diseño es de ser práctico, no solo de ser “bonito”. [El diseño no es un arte](http://www.edicy.com/blog/design-art-and-usability), es usabilidad. El diseño es el canal entre el que come y la comida. El diseño lleva el contenido y la funcionalidad.

## Autopsia de un gran diseño

Hay un número de reglas para diseñar que tenemos que poner atención al crear un sitio web. Aquí hay una lista de las más generales. El diseño web debe ser: **Intuitivo.** Como dije antes, el diseño no te debe hacer pensar. Los botones tiene que lucir como botones, los vínculos deben de ser fáciles de localizar, los menús deben estar en lugares convencionales. Los textos del menú y los botones también tienen que  estar “diseñados”, deben de ser cortos y entendibles. **Adecuado.** El diseño tiene que adaptar su contenido y tiene que ser creado para funcionar en diferentes pantallas. Sin hoyos en el layout, sin espacios desordenados. Se tiene que sentir como si el diseño está adaptado para tu contenido. **Bienvenido.** Los sitios tienen dos clases de visitantes. Nuevos y que retornan. El primer grupo necesita más “atención en el diseño” que los otros. Los visitantes que retornan ya conocen las especialidades de tu sitio. Los recién llegados en la otra mano necesitan que sean llevados o se perderán. Crea una sección de llegada (de qué trata este sitio), bloques introduciendo las partes más importantes de tu sitio (productos clave, clientes o el equipo de trabajo), un bloque de las últimas noticias, información de contacto. Y después están todas esas palabras comunes que se vienen a la mente cuando hablamos de diseño. Estética, unicidad, impresionante, bonito. Son el punto en la _i_, no la _i_ misma. Estos valores adicionales hacen un diseño, bueno. Pero un diseño puede estar “bueno” o aún “suficiente bueno” sin ellos. Mira a [Craigslist](http://www.craigslist.com/) o [Google](http://www.google.com/) como ejemplos.

## Hazlo "tu mismo": diseño de un repertorio

Entonces lo que hay que hacer si no tienes tiempo o dinero para un diseño especial adaptado únicamente para ti. Hay miles de plantillas de diseño afuera. Solo googlelea “platillas para sitios web”y estarás impresionado. La mayoría de ellos son una basura, cierto. Pero aún hay cientos de opciones usables. Hay ambos, plantillas gratis y esas que cuestan un poco. En herramientas como Edicy y sus numerosos competidores, una variedad de diseños es parte del servicio. Luego hay sitios web que están hechos para ofrecer plantillas, por cientos. Usualmente requiere de la ayuda de un amigo IT para hacerlos funcionar en tu sitio. Pero es un trabajo sencillo para alguien como ellos. La regla del dedo es que, diseños simples con pocas secciones, pocas imágenes, pocos colores son mejores diseños. Le toca a un diseñador quitar los componentes inservibles de una plantilla saturada. En la otra mano, añadiendo un bloque de texto o ilustración faltante a  un diseño simple puede ser realizable -- si te apegas a solo introducir contenidos y no diseñar nada.

## Personalización de plantillas

Un buena alternativa es crear el diseño desde el principio debería ser contratando a un diseñador freelance. El podría encontrar los necesario, encontrar una plantilla apta para tí y personalizarla acorde a tus necesidades.

## Conclusión

Como lo he dicho en artículos previos -- lo que sea que decidas, no intentes ser perfecto. No gaste tiempo y energía afinando los detalles para siempre. Publica tu sitio rápidamente, no importando si es un diseño único, una plantilla estándar o una personalizada.

Fuente: [Edicy](http://www.edicy.com/blog/how-to-create-a-great-website-pt4-creating-design "Creando el diseño (ingles)")

Como crear un buen sitio web, creando el diseño

Érase una vez... En el país de Guatemala, que me decido a ir a telefónica (la compañía que me brinda servicio de telefonía celular) a preguntar sobre el servicios de movistar (yo había tenido Speedy antes, y el servicio no había estado TAN mal). Cuando llegué a movistar, me hablaron que era un gran servicio y que tenían un módem que tenía Wi-Fi incluído y que era muy estable y todo lo demás. Pense que al adquirir el módem con Wi-Fi iba a ser mejor (fueron Q 180 de recargo adicional) y lo hice. Esperé que aceptaran mi solicitud de crédito y al día siguiente me llamaron. Ya tenía mi servicio con velocidades de hasta 512kbps, con una señal estable y un módem con Wi-Fi. Recuerdo que me dijeron que el servicio no eran los 512kbps y claro lo sé, es un servicio inalámbric; sabía que mi velocidad iba a ser [asíncrona](http://es.wikipedia.org/wiki/As%C3%ADncrono). En la realidad...

#### Señal asquerosamente inestable

[caption id="attachment_420" align="aligncenter" width="475" caption="Un dia normal con movistar"]![](http://jepser.com/wp-content/uploads/2009/05/ping2.jpg "ping2")[/caption] [caption id="attachment_421" align="aligncenter" width="475" caption="Otro dia con movistar"]![Otro dia con movistar](http://jepser.com/wp-content/uploads/2009/05/ping_1.jpg "ping_1")[/caption] Han pasado 2 meses y medio desde que adquirí el servicio y me digo "Que estúpido fue el día que adquirí Speedy", realmente es una lata. He tenido tantos inconvenientes con este servicio al punto que me han dado dolores de cabeza ¡increíblemente fuertes! Las personas del servicio técnico no tienen la culpa, pues ellos siguen un protocolo que les han enseñado y los multan si no lo siguen, aunque hay cosas que no vienen al caso. Cuando llamo al servicio técnico, siempre me dicen lo mismo, una vez lo llevé el módem al servicio técnico en Galerías Primma para que lo "arreglaran", esperé 30 minutos y me lo devolvieron; esto empeoró la situación. ¡El módem es una basura! Si lo tengo prendido más de 7 horas, se vuelve loco y tengo que estarlo apagando, espero que se enfríe y luego lo enciendo para ver si "agarra señal". Entre los problemas que tengo con movistar estan los siguientes: No puedo tener una señal estable, no vivo en ningún pueblo lejano o una área sumamente montañosa para tener el inconveniente; normalmente tengo que estar dandole F5 a mis pestañas porqué los sitios se quedan trabados, y no creo que se mi explorador porque no solo utilizo uno; al desarrollar web, necesitas varios para hacer pruebas.

#### Pings altísimos

[caption id="attachment_422" align="aligncenter" width="484" caption="Hey aqui un poco de los hermosos pings"]![Hey aqui un poco de los hermosos pings](http://jepser.com/wp-content/uploads/2009/05/ping-alto.jpg "ping-alto")[/caption] He tenido pings de hasta 4006ms, ¿¡Qué es eso!? Tengo respuesta muy lentas y eso afecta mi FTP, y hablando del FTP; hace unos pocos días llamé (otra vez) porque no tenía servicio (otra vez), y le digo al joven que me atendió que no puedo subir mis archivos. El me responde que sí, que el está verificando mi actividad y por que _bajo_ muchos archivos es que presento lentitud, que el me recomienda que no _baje_ tantos, que solamente sean 5 por día y así se mejorará mi servicio en 4 a 10 días. Le respondí que no bajo archivos, que los subo y no es que todos los días suba un Wordpress completo por el FTP, no utilizo programas P2P o algo por el estilo. Me dicen que también no navegue tanto porque por eso estoy saturando el canal y que el software es el que me hace eso automaticamente... ¡¡Qué está pasando!! Mi internet es "ilimitado" y me limitan a navegar para que se mejore mi servicio. En que mundo estamos, por favor.

#### Lo demás

Ya me bloquearon mi línea porque hacía _llamadas por broma_ a movistar. No entiendo, es acaso que llamar porque no tengo servicio y pedir soporte técnico es llamar por broma... Con el servicio técnico, en donde carajos viven (ya sé en El Salvador) estos jóvenes tienen una grabadora interna o qué. Siempre dicen lo mismo:

*   Apague el módem
*   Enciéndalo, le hemos aplicado un cierre de sesión
*   Entre a 192.168.0.1 borre los campos y escríba bla..bla.. bla... (lo mismo que está actualmente el en módem)
*   Dele Save, luego por favor navegue a Yahoo! (siempre dicen yahoo)
*   Ya le sirve...

Como les digo, no critico en sí a los técnicos, sino el protocolo, no ayudan con eso realmente; una vez me que se dió cuenta que no podía arreglar mi problema con el apague-encienda = ya funciona, empezamos con las vueltas de ahogado. Primero me hizo "configurar el módem", escribiendo lo mismo que está en los campos. Apáguelo, luego reinicie su máquina (que no lo que cambiamos fue la configuración, aunque sea la misma, del módem), en caso sería desactivar y activar el wireless. Luego empezamos con los pings, está bien, pero no cuando te piden que le hagas ping a tu máquina, hagale ping a 127.0.0.1, si sirve es problema de su máquina... ¡WTF! Me dijeron en una ocación que la señal se mejoraría con una antena externa que tenía que comprar (Q.300 que luego movistar absorbería), llamé al encargado para ello y me dijo que no venía hasta mi casa, que nos juntaramos en un lugar más cerca (mi casa está a 25-35 minutos del centro) y luego se la pagaba, el me la entragaba, yo la instalaba y si funcionaba allí quedamos, sino nos juntamos otra vez con el encargado para que le devolviera la antena y el mi dinero... No entiendo porque tengo que hacer tanto, si lo que quiero es simplemente tener un servicio aceptable. Ahora que quiero cancelar contrato, ellos me dicen que no puedo, por el tiempo que llevo con él (casi 3 meses). Pero un contrato se rompe cuando una de las dos partes no cumple, y ese no soy yo. Una señorita de servicio me dice que van a enviar a unos técnicos a mi casa para verificar si realmente no tengo servicio y luego que ayer (30 de mayo) llamo, me dicen que eso no se puede, que ellos no envían a técnicos a mi casa... ¡WTF! Y por último, esto fue el colmo. Movistar siempre tiene fallas y están trabajando arduamente para tener un buen servicio y que se reestablezca, llevo casí 3 meses escuchando la misma cosa. Tenía que entregar una tarea de la universidad ayer, y a movistar se le ocurre que se arruina (de nuevo) con falla general. Y yo que hago, pues llamo a mi cuate [Ixim](http://www.sebastianoliva.com) a las 11.46 pm, porque el tiene Turbonett (y no me importa decir que este es mejor) y pues me salvo de no perder mi materia. Con eso me quedo, simplemente les recomiendo a que piensen en otra opción para tener su servicio de Internet. Movistar no puede ser tan malo para telefonía celular (que es otra historia con los pagos), pero para servicio de internet le falta mucho por hacer; empezando por no ofrecer algo que NO SIRVE. Es simplemente una opinión, nada más. Puede que defiendas a movistar, puede que estés en las mismas que yo. Solo opina, si lo deseas.

Movistar y su servicio de Internet, Slowly

Showcase: Malas practicas web que debemos mejorar

Los sitios web están creados para brindar información a sus visitantes. El contenido es el rey, dicen ellos. Todo lo demás (diseño, sistema) es solo el empaque. El contenido es por lo que normalmente los visitantes andan buscando. _Por eso  la clave para crear un buen sitio web es dar un contenido consciso e interesante -- texto, imágenes, audio o video. Una vez tu contenido está listo, porqué gastar tu talento usándolo solo una vez, ¿Sólo en tu sitio web?_

## Consciso y fácil de digerir

Cuando escribes un texto, **trata de pensar como tus lectores.** Escribe para tus clientes, los visitantes de tu sitio. Usa una redacción conscisa. Textos al grano y descriptivos, titulos pequeños en el menú son mejores. Quita ese paradigma de empresa, habla como tus clientes lo harían. De otra manera ellos no te encontrarán como el primer lugar. Y aunque sigan búscando y navengando en tu sitio, no entenderán nada de lo que hablas. Eso es por lo que ellos no estarían en tu sitio. Las personas no leen los sitios web. Ellos "scannean" la pantalla hasta que encuentran una frase relevante. Si hay mucho texto para scannear o ellos no miran lo que esperan, ellos se van. Escribe tus textos con oraciones cortas y pequeños párrafos. Escoge cuidadosamente los encabezados. Todo encabezado tiene que decir lo necesario y debe de ser lo más corto posible de la página que resume. Otra vez, escoger la forma correcta de expresarse. "¿Cómo hacer flores de papel?" -- para un sitio de origami para niños, pero "Instrucciones de origami: Rosa" -- para personas más e Para ser más precisos, el contenido debe ser **consciso y fácil de digerir,** interesante y memorable, debe funcionar bien para los motores de búsqueda y tiene que ser también fresco y actualizado. Una vez tu específicas. "10 nuevos tipos de letra" -- para los tipógrafos, pero "10 fuentes nuevas" -- para los demás. Usa imágenes relevantes. Una imágen es más que mil palabras. Si es posible, Deja de escribir un párrafo y utiliza en vez de eso una imágen o video apropiado. Organiza tu sitio sabiamente. Utiliza nombres comunes para los elementos del menú (Inicio, Productos, Servicios, Noticias, Nosotros, etc). Limita el menú a 6-8 elementos por nivel. El cerebro de un humano común no retiene más al mismo tiempo. No, no tienes que reorganizar tu negocio solo por eso. Solo agrupa tus 25 productos en cuatro secciones. Sí lo haces por línea de productos, grupo objetivo, año o algo por el estilo, no importa mucho, la idea es que los agrupes.

## Interesante y memorable

Para que otros sitios te enlacen y tengas visitantes que regresen, **el sitio debe tener un valor agregado**. En vez de presionar con tu mensaje de marketing, provee a tus visitantes algo que los haga regresar por más. Un blog donde escribas cosas podría ser un buen comienzo. Catálogos donde describas bien tu producto podría ser otra. Entre más contenido tu escribas, tendrás más oportunidades de que tu información sea útil. Por suspuesto, si esta sigue bien organizada y sea fácil de digerir. Sé memorable. Transforma tu contenido en un slogan, una marca. Algo fácil de recordar, que suene único, corto y claro. "Libros para los poco iluminados" -- para un publicador arrogante de ciencia. "Vida lenta con mozarella" -- para un pequeño restaurante de comida italiana. "Las ranas conocen a los niños" -- para una clase de ciencias naturales. Usa ilustraciones para colorizar tus aburridos bloques de texto, video / audio para tener una mayor audiencia. No a todos les gusta leer en estos días.

## ![traffic-proportions](http://jepser.com/wp-content/uploads/2009/05/traffic-proportions.gif "traffic-proportions")

No hables solo. Reune algunos casos de clientes o testimoniales si tu negocio es de ofrecer servicios. Reune comentarios de productos si vendes pues, productos. Sé cauteloso. Hay una línea muy delgada entre opiniones útiles de los usuarios y elegios estúpidos.

## Funcione para los motores de búsqueda

Como el 40-50% de los visitantes de los sitios bien organizados es conducido por los motores de búsqueda. La otra mitad está hecha de visitas directas y las hechas por sitios que te apuntan. Por lo tanto es crucial para cual quier sitio web aparecer en los resultados de búsqueda y ser lo suficientemente interesante para que otros de enlacen. Los búscadores siguen sin ser buenos indexadores de video, audio y contenido de imágenes.  Aprende de la publicidad pero no vayas tan lejos si no te miras como un redactor.y más importante debes de **tener un contenido textual** que Google mostrará en los resultados de la búsqueda. Necesitas incluir palabras clave apropiadas en tus contenidos, que serán las palabras claves de una búsqueda de tus clientes potenciales. Textos que son interesantes y apropiados para los ojos de tus proximos clientes, funcionan muy parecido para los motores de búsqueda. <span style="font-weight: bold;">Escribe contenido interesante, eso hace que las personas enlacen tu sitio.</span> Hace ambas, incrementa tu tráfico desde los enlaces entrantes y mejoras tu posición en los resultados de Google.

## Fresco y actualizado

Engancha a tus visitantes con el contenido, que los haga regresar -- el contenido no solo tiene que ser interesante, tiene que ser fresco y actualizado. Un buen blog, una sección de productos, links para las nuevas revisiones, etc. **El sitio debe de estar vivo** Tiene que verse como si alguien trabaja en él constantemente y con pasión. Entonces hazlo. Un contenido fresco ayuda a ganar una **mejor posición en los motores de búsqueda**

## ![recycle-logo](http://jepser.com/wp-content/uploads/2009/05/recycle-logo.gif "recycle-logo")

## Reutiliza tu contenido

Si tu contenido cabe en las características de arriba verdaderamente es un buen contenido. ¿Talvez un parte de él es **suficientemente bueno para utilizarlo varias veces**?  Primero en tu sitio, segunda dentro del newletter de tu empresa, tercero como parte de una conferencia que tengas. Porque no como un artículo de periódico o un libro -- si hay una porción de filosofía en él.

Fuente: Mis amigos de [Edicy](http://www.edicy.com/blog/how-to-create-a-great-website-pt3-writing-content "Ir a edicy").

Como crear un buen sitio web, escribiendo el contenido

Todo empezó cuando cambié de computadora (hay que modernizarse) y esta traía Windows Vista Home instalado como sistema operativo (sí, no reuno aún para comprar mi Mac), no vamos a hablar que porqué no lo cambié a XP o algún Sistema Operativo Open Source o por qué no lo hago todo por mi cuenta (falta de tiempo). Cuando hacía las instalaciones respectivas (Adobe, Cliente FTP, Winamp, Browsers, etc) y le tocó el turno al servidor local (primero probé XAMPP y pero lo desinstalé por qué no me sirvió a la primera), bajé el Instalador y luego el famoso siguiente, siguiente, siguiente... al final el servidor se había "instalado correctamente". Lo intenté probar utilizando el común localhost, pero no funcionó; y me dije a buscar porqué no lo hacía. Probé con 127.0.0.1 y listo sí servía pero yo quería localhost. Busqué y me encontre con las siguientes páginas (algunas sin coherencia o soluciones a medias):

*   [http://www.desarrolloweb.com/faq/no-funciona-wamp-server2-vista.html](http://www.desarrolloweb.com/faq/no-funciona-wamp-server2-vista.html "En desarrollo web")
*   [http://www.wampserver.com/phorum/read.php?2,48338](http://www.wampserver.com/phorum/read.php?2,48338 "En la página oficial")
*   [http://es.answers.yahoo.com/question/index?qid=20081031081211AA6GWPb](http://es.answers.yahoo.com/question/index?qid=20081031081211AA6GWPb "En Yahoo anwers")
*   [http://www.phpfreaks.com/forums/index.php?topic=169417.0](http://www.phpfreaks.com/forums/index.php?topic=169417.0 "EN php freaks")
*   y la lista crece...

Pero no es necesario cambiar el puerto al 8080 o al 81 o desintalar WAMP o cambiar de SO (jeje)... Simplemente de saber que está haciendo Vista con nuestro pobre WAMP. **_Nota._**

*   [Decarguemos WAMP](http://www.wampserver.com/en/download.php "Bajar WAMP")
*   No arranques el WAMP antes de hacer lo siguiente, ¡luego lo haremos muchas veces!
*   No tengas el Skype a la hora de iniciar tu servidor (lo del puerto 80 y el conflicto es cierto)
*   Desinstala ISS o deshabilitalo, también hace conflicto por ser un servidor web (de Microsoft)
*   Para que los cambios sean efectivos, cada vez que hagamos uno, debemos reiniciar el WAMP (si lo tenemos corriendo)
*   Estoy utilizando WAMP 2.0 C, la H es la última pero tiene problemas el PHP.

## 1\. Darle permisos a los Usuarios para poder componer el problema

![permisos-usuarios](http://jepser.com/wp-content/uploads/2009/05/permisos-usuarios.jpg "permisos-usuarios") Esto es fácil, simplemente vayamos a _Panel de Control · Cuentas de usuarios · Activar o Desactivar el Control de cuentas de usuario (UAC, en sus siglas en inglés)_ y la desactivamos. Recordemos que tienes que ser administrador para poder hacer esto, de lo contrario no podrás desactivarlo. Con esto ya nos libramos por si tenemos que modificar algunos archivos luego.

## 2\. Localizar el archivo "hosts"

Si luego de probar 127.0.0.1 en tu browser, si muestra la página principal del servidor. Debemos hacer que al escribir localhost también lo haga. Vamos a _Equipo · Disco local · Windows · System 32 · Drivers · etc_ , estando alli abrimos el archivo hosts (yo lo hago con DreamWeaver jeje), hasta abajo vamos a encontrar algo así:

    ::1             localhost

#### Sobre este archivo

Este archivo contiene las direcciones web que Windows asocia con las IP antes de ver en el DNS. En el vamos a escribir la direccion web y la ip que está asociada o a la que nos enviará en caso la escribamos. Este archivo nos será útil al hacer subdominios en localhost (lo veremos después). Ahora lo que haremos será eliminar el ::1 y escribir:

    127.0.0.1       localhost

Esto para que a la hora que escribamos localhost el servidor busque en este archivo y mira la IP (127.0.0.1 corresponde a la dirección local). Si escribieramos amolaweb.com y la agregamos al archivo con la dirección 127.0.0.1 nos aparecería el localhost (pruébenlo).

#### Por si no pueden guardar el archivo y les dice que no tienen permisos aún

Habilitar permisos a la carpeta. Deben de ir a la carpeta donde se ubica el archivo host _(Equipo · Disco local · Windows · System 32 · Drivers · etc)_, dar clic derecho · Propiedades y deshabilitar el modo de lectura, a todos lo archivos y a la caperta misma. Otra, desabilitar el firewall para sitios locales. _Panel de Control · Firewall de Windows · Cambiar la Configuración · Opciones avanzadas_ y deshabilitan Conexión de Área Local. ![cambiar-firewall](http://jepser.com/wp-content/uploads/2009/05/cambiar-firewall.jpg "cambiar-firewall") **Allí estamos por si solo quieres tener un dominio local...**

## 3\. Cambiando mi root en el servidor

Ahora vamos a cambiar la carpeta donde guardaremos los archivos para que el servidor los lea. Esto funciona para no tener que ir a la dirección default de WAMP, _Disco Local · WAMP · www_, sino que tener nuestra propia carpeta, en este caso vamos a crear una que se llame server en el Disco local _(C:/server)_ y allí colocaré cuanta cosa, separada del servidor.

Ahora configuraremos el httpd de Apache, vamos a _Disco Local (o donde hayamos guardado WAMP) · bin · apache · Apache2.2.11 · conf_ y econtraremos el archivo http.conf, nos vamos a la línea 178 (o buscamos DocumentRoot "el directorio base") y 205 (o buscamos <Directory "el directorio base">, ambos tienen la misma dirección. Vamos a cambiar el directorio por la carpeta que querramos, en  C:/server), con esto le digo a WAMP que voy a guardar todos mis archivos en esa carpeta y que lea allí lo que ponga, en vez de ir a su dirección default.

¡Falta aún!

## 4\. Agregando los dominios virtuales

Siempre el en archivo httpd, buscamos en la línea 465:

    # Virtual hosts
    Include conf/extra/httpd-vhosts.conf

Y si está comentada la línea (tiene #) la descomentamos, como está arriba debe de quedar. Aquí habilitamos los dominos virtuales (loqueyoquiera.localhost).

Nos vamos a _Disco Local (o donde hayamos guardado WAMP) · bin · apache · Apache2.2.11 · conf · extra (que cansado)_ y allí encontraremos un archivo llamado httpd-vhosts.conf  (la estrella). Lo abrímos (lo hago de nuevo con DW) y vamos a encontrar algo así:

![vhost-antes](http://jepser.com/wp-content/uploads/2009/05/vhost-antes.jpg "vhost-antes")

Este archivo controla los host virtuales que tenemos, entonces ya tenemos que habilitar, primero, al localhost. Y verán en la imagen que he agregado tambien un subdominio (aquí es donde se mira la versatilidad de esto). Nota, al agregar el bloque para mi subdominio, ya tuve que tener agregado 127.0.0.1      aquamagic.localhost en mi archivo host, es un dominio por linea). Imaginemos que tenemos 5 subominios, entonces habrán 5 bloques en nuestro archivo httpd-vhosts.conf y cinco líneas en nuestro archivos hosts, una para cada subdominio. (lo sé es algo tedioso).

![vhost-despues](http://jepser.com/wp-content/uploads/2009/05/vhost-despues.jpg "vhost-despues")

Con esto ya tenemos nuestro servidor WAMP en Windows Vista, con host virtuales y al 100%. Iniciamos nuestro WAMP, y cada cambio reiniciemos los servicios para poder ver los cambios.

Sí algo no quedó claro, no se preocupen, estamos para ayudarnos entre todos.

![sirver-wamp](http://jepser.com/wp-content/uploads/2009/05/sirver-wamp.jpg "sirver-wamp")

### Actualización 18 marzo 2013

Para los que instalan en Windows 8 y al teclear localhost no les funciona pero si 1270.0.1, modifiquen el httpd.conf busquen

    Listen :80

A

    Listen 0.0.0.0:80

Instalación de WAMP para Windows

Los sitios web están creados en varios pasos. Para el final del día necesitarás de un diseño, contenido (texto e imágenes), promoción y algunas cosas técnicas como un dominio, hosting (alojamiento) y un sistema para manejar los contenidos. Pero más que todo lo que necesitas para tenerlo hecho. Necesitas desiciones, no discusiones. <span style="font-weight: bold;">No contrates un gran grupo</span> solo para quitarte responsabilidad. No pierdas tiempo escribiendo texto por semanas, diseñando por meses. Crea tu sitio rápidamente, no trates de ser perfecto. En nuestros tiempos, no hay necesidad de pulir cada detalle. Solo tenlo hecho. <span style="font-weight: bold;">Publica el sitio en pocos días, aunque siga pequeño e imperfecto</span><span style="font-weight: bold;">.</span> Por lo tanto, tu sitio estará listo para recibir visitas en pocos días. Estarás en el negocio lo antes posible. <span style="font-weight: bold;">Decide solo,</span> no esperes que alguien mágicamente aparezca del cielo con una mejor idea. No desvíes tu clara idea con dudas. La gente nunca está de acuerdo una con otra. Contrata solo a los mejores para que te asesoren. Pero no compartas la toma de decisiones con ellos. La democracia apesta en la creación de sitios web. Los buenos asesores son otra historia. Escúchalos, siéntete seguro de tus bases. Luego dale. Hazlo. Muévete. Como Seth Godin dijo, [despedir al comité es un rompe tratos.](http://sethgodin.typepad.com/seths_blog/2007/10/how-to-create-1.html) Ellos también dicen que el [camello es un caballo diseñado por un comité.](http://en.wikipedia.org/wiki/Design_by_committee)<span style="font-weight: bold;"></span>

## ¿Qué debería tener, un diseño ya hecho o contratar a un diseñador?

<span style="font-weight: bold;">Diseño es clásicamente un lujo.</span> La gente muere cuando llega la factura de la agencia de publicidad. Pero el marketing se ha ido por otro rumbo. Ya no hay necesidad de tener que decidir entre "tener un diseño o no tenerlo". Siempre puedes tener un buen diseño. Los precios pueden oscilar entre diseños totalmente gratuitos (plantillas) o trabajos super caros, hechos exclusivamente para tí por los mejores del mercado. <span style="font-weight: bold;">La pregunta por tanto, depende del tamaño de tu presupuesto.</span> La mayoría de nosotros tenemos un presupuesto muy bajo o no lo tenemos, pero aún queremos tener un diseño único para nuestro sitio. Si realmente no piensas en tener una plantilla y tu presupuesto es realmente bajo, todavía hay chance. Hay un camino de oro en medio-- contrata un freelance que sea bueno tanto en diseño como en código (yo jeje). Deja personalizar ese tema gratuito. Eso estará en pocos días de trabajo.

## ¿Quién debería escribir?

<span style="font-weight: bold;">No puedes tener contenido bajado de una fuente gratuita</span>. Es esta la parte difícil -- necesitas escribir los textos por tí solo o contratar a alguien que lo haga por tí. Las buenas noticias son que textos simples, cortos y al grano son los mejores. Así que muchos de ustedes podrán hacerlo sin mucho problema. Y no olvides las imágenes. Imágenes de tu equipo de trabajo, producto, oficina o cualquier cosas que pueda ilustar tu mensaje.

## ¿Qué hago con los aspectos técnicos?

Unir el diseño con el contenido y lanzar tu sitio web como tal,  normalmente necesita ayuda te los amigos IT. Nombres de dominios, hosting, PHP, CMS y otros acrónimos extraños. En nuestros días esta se ha vuelto la tarea fácil. <span style="font-weight: bold;">Ya no es necesario que ensucies tus manos.</span> Puedes crear tu sitio por tí mismo usando servicios para crear sitios web. No es necesario ir a molestar a tu vecino de 10 años a que te ayude con lo de IT. Hazlo tu mismo, es practicamente simple. Si tienes un diseño personalizado, deja que el diseñador/desarrollador lo integre al servicio.

## Promoción

La pregunta de como poder manejar la promoción de un nuevo sitio web es <span style="font-weight: bold;">más sobre administración de empresas</span> que de como crear un buen sitio web. Hazla fácil -- estudia lo básico del marketing en línea. Es necesario, viene incluido en cada sitio web que al que quieras darle vida. Estudia como posicionarte mejor en las búsquedas de Google, cómo analizar tu tráfico, cómo expandirte en el mundo y como + cuando anunciarte. Un sitio web sin promoción es un error.

## ¡Más de cada tema viene en unas pocas semanas!

*   3 de mayo: **Recopilando el contenido**<span style="font-weight: bold;"></span>
*   11 de mayo: **Creando el diseño**
*   18 de mayo: **Desarrollando la funcionalidad**
*   27 de mayo: **Incrementando el tráfico**

Fuente: [Mis amigos de Edicy](http://www.edicy.com/blog/how-to-create-a-great-website-pt2-gathering-team "In English - Gathering a team")

Como crear un buen sitio web, Reuniendo al Equipo

Acabo de leer un artículo de [Runnel](http://tonu.runnel.ee/ "Runnel's Site") (CEO & diseñador de Edicy), sobre como crear un buen sitio web. El artículo estará dividido en 5 partes. Que traduciré al español. Dividido de la siguiente forma:

*   27 de abril: [](http://jepser.com/como-crear-un-buen-sitio-web-reuniendo-al-equipo/ "Como crear un buen sitio web, Parte 2 - Reuniendo al equipo")<a>Reuniendo al equipo</a>
*   3 de mayo: **Recopilando el contenido**<span style="font-weight: bold;"></span>
*   11 de mayo: **Creando el diseño**
*   18 de mayo: **Desarrollando la funcionalidad**
*   27 de mayo: **Incrementando el tráfico**

### En resumidas cuentas, el crear un sitio web nos lleva a lo siguiente:

*   **Crea tu sitio rapidamente**, los detalles no tienen que ser perfectos. En mundo cambiante como el nuestro, genial es suficiente. Solo tenlo hecho.
*   **Decide solo**, no reunas un gran equipo que posiblemente desviará tu idea principal. Las personas no siempre están de acuerdo unas con otras. Contrata a los mejores para poder guiar, no compartas la toma de decisiones. La democracia en la creación de sitios web no funciona.
*   **El contenido manda.** Piensa como tus clientes, escribe breve y simple. Sé visual. Una imagen habla más que mil palabras.
*   **Promueve.** Una vez hayas terminado, hechalo a andar. Si lo hiciste bien, tendrá éxito y se expandirá. Pero aún tienes mucho trabajo. Sí no lo promueves, nadie sabrá que tan bueno es. Recuerda que habrán muchos más sitios trantando de llamar la atención.
*   **¡Felicitaciones!** tu trabajo ya hecho. O... ¿no lo está? Lo siento si no . Una vez ya no tienes interés en ese sitio, tu sitio muere solo. Un verdadero sitio web se actualiza, desarrollando y mejorando; simpre. Sabes, de hecho; esa es la mejor parte. No puedes olvidarlo.

Referencia: [Blog de Edicy (inglés)](http://www.edicy.com/blog/how-to-create-a-great-website-pt1-introduction "Edicy Post")

Como crear un buen sitio web - Introducción

Grid 960 es un framework de css que facilita la maquetación a un estándar de 960px. En este tutorial vamos a crear un página utilizando este framework.

#### Para empezar, ¿Qué es 960 Grid?

[960 Grid](http://www.960.gs "960 Grid System") es un framework de CSS que nos facilita la vida en un mil por ciento (si lo sabemos utilizar). Este grid se creó por la necesidad de tener un "estándar" en el ancho de los sitios web. En nuestros días ya es sólo un pequeño porcentaje de usuarios que utilizan resolución de 800 x 600 pixeles, mientras la mayoría ya utiliza resoluciones de 1024 x 768 px o mayores. Es por eso que un grupo de personas decidió crear este sistema de maquetado basado en 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestros layout de una forma simple y rápida.

#### Conociendo el grid

Como les mencionaba, podemos utilizar 12 o 16 columnas para crear nuestros layouts, cada una de las columnas tiene un margen izquierdo y derecho de 10px, para crear 20px de separación entre columnas. Sabiendo esto, decimos que si utilizo 12 columnas, cada columna será de 60px cada una y sí utilizo 16 columnas, el ancho de cada una será de 40px. Porque no visitan la [página demo](http://www.960.gs/demo.html "Demo Page"). Podrán observar una gama de combinaciones para darse una idea de como trabaja este framework. Veremos ahora como es que se divide el grid en una configuración de 12 columnas:

1.  60px
2.  140px
3.  220px
4.  300px
5.  380px
6.  460px
7.  540px
8.  620px
9.  700px
10.  780px
11.  860px
12.  940px

Como verán, cada una de las filas lleva un número, que será el identificador; es decir, el ancho de la columna corresponde al número de a la par. Y se forma así: _grid_xx_ donde _"xx"_ es el numero de la lista.  Pero,¿Cómo 960 grid sabe sí utilizo 12 o 16 columnas? Simple, tiene una clase _.container_yy_, donde _"yy"_ es el numero de columnas que voy a utilizar. Basta de palabrería, vamos a crear una página web con utilizando este framework y 12 columnas.

#### Maquetando con 960 Grid

[caption id="attachment_195" align="aligncenter" width="300"][![Grid de 12 columnas](http://jepser.com/wp-content/uploads/2009/03/grid-300x152.png "grid")](http://jepser.com/wp-content/uploads/2009/03/grid.png) Grid de 12 columnas[/caption] La verdad es muy sencillo maquetar así, y al observar la imagen nos damos una idea de como hacerlo. Para los fines de este tutorial, vamos a crear un layout para un sitio ficticio llamado Vos-Voz (no se me ocurría otro nombre). Hay unos puntos importantes antes:

*   IMPORTANTE, debemos saber al menos lo basico en xhtml y css
*   Incluir text, reset y 960 css's en el html
*   Hay que colocar un _<div class="clear"></div>_ despues de cada fila, esto se debe a que cada columna está con un _float:left_
*   Usaremos los id para diferenciar un div de otro

[caption id="attachment_201" align="aligncenter" width="250"][![Así esta dividido nuestro layout en la parte del cotenido](http://jepser.com/wp-content/uploads/2009/03/grids-columnas-250x300.jpg "grids-columnas")](http://jepser.com/wp-content/uploads/2009/03/grids-columnas.jpg) Así esta dividido nuestro layout en la parte del contenido[/caption] Ahora empezaremos haciendo el esqueleto del layout, crearemos los espacios que necesitamos para colocar los artículos. Como podrán darse cuenta, tenemos un mini-menú en la parte superior con dos opciones, luego nuestro logotipo, después el menú principal y por último el contenido que está subdividido en dos columnas; donde la columna izquierda está dividida por dos columnas más. Hasta abajo tenemos nuestro footer y ¡terminamos!

<pre class="brush: html"><div id="top">
    
    <div class="container_12">
        
        <div class="grid_3 prefix_9">
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="container_12" id="bodyMain">
    
    <div class="grid_12" id="header">
        <a id="logo" title="Vos-Vos" href="#"></a>
        <img id="ciudad-logo" alt="VV City" src="images/ciudad-logo.gif"/>
    </div>
    <div class="clear"></div>
    
    <div class="grid_12" id="menu">
    </div>
    
    <div class="grid_12" id="contentMain">
        
    	<div class="grid_8 alpha">
            
            <div class="grid_4 alpha">
            </div>
            
            <div class="grid_4 omega">
            </div>
        </div>
        
        <div class="grid_4 omega">
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    
    <div class="grid_4 prefix_8" id="footer">
    </div>
</div></pre>

Ahora es tiempo de colocarle los estilos a nuestros div con ID, para que podamos empezar a ver las clases. En estos momentos no vamos a lograr tener algo palpable, tranquilos voy a explicar paso por paso. Yo he hecho un css para colocar mis estilos personalizados, _llamado mi-estilo.css_:

<pre class="brush: css">div.spacer{
height: 1em;
}
#top{
width:100%;
background:#29231e;
position:relative;
top:0;
left:0;
}
#top ul{
margin:10px 0 10px 0;
color:#FFFFFF;
}
#top ul li{
display:inline;
}
#bodyMain{
background:url(../images/nubes-background.jpg) top center no-repeat;
}
#rss{
background:url(../images/rss-logo.gif) no-repeat right;
padding:5px 30px 5px 0;
}
a#logo{
background:url(../images/vos-voz.gif) no-repeat;
width:470px;
height:92px;
float:left;
margin-top:150px;
}
img#ciudad-logo{
float:left;
}
#header{
border-bottom:5px solid #29231e;
}</pre>

Ya tenemos la parte superior y el icono de rss en, ahora agregamos los elementos del menú:

<pre class="brush: html"><div class="grid_12" id="menu">
        	<ul>
            	<li>Portada</li>
                <li>Noticias</li>
                <li>Miembros</li>
                <li>Promociones</li>
                <li>Cont&aacute;ctanos</li>
            </ul>
    </div></pre>

Le damos la clase a los items del menú, recordemos que tenemos un fondo celeste en el fondo, por eso, usaremos el grid_12 que ocupa los 940px:

<pre class="brush: css">#menu{
background:#e7f7fb;
}
#menu ul{
padding-top:10px;
margin-bottom:10px;
}
#menu ul li{
display:inline;
font:20px bold Arial, Helvetica, sans-serif;
}</pre>

Es hora de darle estilos al footer,  simplemente haremos que tenga la licencia [Creative Commons,](http://creativecommons.org/ "Creative Commons") un simple texto.

<pre class="brush: html"><div class="grid_4 prefix_8" id="footer">
        <p>www.vos-voz.com. Licencia por Creative Commons.</p>
    </div></pre>

Inspírence ustedes en agregarle el famoso [Lorem](http://lipsum.com "Solo para texto...") para los textos, recuerden que sus imágenes deben de ser del ancho de sus columnas, menos 20px que son los márgenes. Ahora viene lo importante, podemos probar en todos los exploradores y no hay ningún problema :D, y lo creamos en ¡menos de 20 minutos! [caption id="attachment_193" align="aligncenter" width="250"][![Así quedará el layout](http://jepser.com/wp-content/uploads/2009/03/screenshot-250x300.jpg "Vos-Voz ScreenShoot")](http://jepser.com/wp-content/uploads/2009/03/screenshot.jpg) Así quedará el layout[/caption]

#### Conociendo las clases

*   **container_yy :** Donde "yy" puede ser 12 o 16, que son el número de columnas que trabajaremos.
*   **grid_xx:** Donde "xx" será la cantidad de columnas que utilizaremos para algún proposito, la idea es formar 12 columnas en total, Ej. tengo una columna "grid_8" y luego otra "grid_4", entonces ya tengo mis 12 columnas.
*   **prefix_xx:** Este se utiliza para mover "xx" columnas a la derecha es decir (como en la parte del footer en nuestro layout) moví 8 columnas o 640px a la derecha y mi div tiene una anchura de 4 columnas o 320px a los cuales debemos quitar 20px a cada uno; por el gutter o espaciamiento que les mencionaba.
*   **suffix_xx:** Es muy parecido a prefix_xx, simplemente que en este caso el margen es a la derecha. Digamos que necesito una columna hasta la izquierda y que mi segunda columna esté 160px (2 columnas) a la derecha de esta, entonces simplemente le agrego el suffix_2 en este caso.
*   **alpha:** Es el inicio, se utiliza cuando tenemos dos o mas columnas y deseamos que una esté a la par de la otra, entones a la primera se le añade esta clase, que elimina el margen de 10px en el lado izquierdo.
*   **omega:** Es el final, se utiliza como el alpha pero la diferencia es que esta clase se añade a la última columna para eliminar el margen derecho de 10px.

#### Para finalizar

Ya ahora que les he mostrado como utilizar el grid 960 en acción ¡vayan y practiquen! Es lo mejor que pueden hacer para familiarizarse con este framework de CSS (si les llamó la atención). Recoremos que tenemos ciertas limitaciones, las cuales debemos lidiar usando nuestra imaginación. La idea de este sistema de maquetado es ahorrarnos tiempo y dolores de cabeza y NO UTILIZAR TABLAS para crear columnas (error muy común).

*   [Quiero el código](/wp-content/uploads/codigo/960grid_jepserbernardino-com.zip)
*   [Ver demo](http://demos.jepserbernardino.com/960-grid//)

960 Grid, un framework para CSS

Un tema un tanto discutido anteriormente, pero no está demás que lo haga a mi manera. Para poder elegir cuál es la mejor opción; he creado esta lista basado en algunas páginas y en mi criterio. He decidido escribir lo siguiente como punto de partida, para tener en cuenta que una empresa que brinde soluciones web, no es aquella que tenga un buen capital y pueda invertir en mucha publicidad, o aquella que tiene mil servicios y entre ellos "Diseño de Páginas Web". No es de saber utilizar los programas de edición de imágenes y uno que facilite la escritura de las etiquetas html. Es de conocer desde el fondo que se está haciendo y que falta por hacer. Es saber que sí lo estamos haciendo como se debe y no para salir del paso. Es simplemente que te guste hacer algo para hacerlo bien. Y me dejo de filosofía y como bien dijo:

> “las superficies brillantes ganan premios, mejoras reales ganan clientes”, _Ferry McGovern_

1.  Lo barato sale caro, es una ley de vida. No te vayas por el que te hace el trabajo más barato. Puedes consultar con un especialista o conocer mejor su propuesta. Compara detalles antes que el aspecto monetario. Recuerda que lo más barato, siempre es barato por algo; y ese algo no es necesariamente bueno.
2.  Conoce la empresa o el individuo que te está ofreciendo el servicio. Que tal una vista a su portafolio, o a sus bases de trabajo. Sería bueno que le preguntaras a uno de los clientes de tu próximo desarrollador web que tal trabaja. Un buen punto a observar es conocer el sitio web de la empresa o individuo que estará a cargo de tu sitio. Soy partidario de decir que el desarrollador demuestra sus conocimientos y capacidades en su propio sitio web.
3.  Si el encargado de la empresa no te pregunta ¿Por qué desea tener un sitio web? O ¿Cuáles son los objetivos que desea alcanzar con su sitio web? Por favor, da la vuelta y ¡corre! Puede ser que estés a punto de hacer una mala inversión.
4.  La mentira de las mil maravillas, no créas que por que se escucha bonito; es tu deber también investigar que significa cada cosa que te ofrecen.
5.  Escucha que no te digan “página web”, hay una gran diferencia entre un “página web” y una “sitio web”. La diferencia radica en que la primera no es un estudio completo de tu necesidad en la web y la segunda es una SOLUCIÓN en Internet.

Espero poder escribir algunos otros puntos importantes en esta toma de decisión. Que aunque no lo creas, marcan desde un principio si tu podrás tener éxito en la web.

5 cosas que debes saber al adquirir tu sitio web

Una de las cosas que nos diferencia a los humanos es el deseo de aprender más, lo vemos con los avances tecnológicos, en la ciencia, en la forma como vivimos, en fin; todo lo que hacemos. Simplemente con preguntar a nuestros abuelos como vivieron, dirán siempre que fue muy diferente y nos contarán todas las cosas que para ellos cambiaron. Así la siguiente generación nacerá con Internet y teléfonos inteligentes como parte de su vida (recuerdo la primera vez que tuve un celular, tenía 13 años), y así con las siguientes generaciones; tomarán implícitas muchas cosas que nosotros vimos cambiar. El deseo de conocer más se queda, no cambia, es innato para el ser humano. Sin embargo para algunas personas cambia durante los años.

### Cuestionar las cosas es natural

Desde pequeños encontramos placer en cuestionar todo lo que no conocemos, sin miedo a preguntar.

*   Vamos, tienes que comer toda tu comida, los vegetales también.
*   _¿Por qué?_
*   Por que sino tendrás hambre más tarde y no crecerás fuerte.
*   _¿Por qué?_
*   Por que la comida tiene vitaminas que te hacen crecer y ser como tu mamá o tu papá.
*   _¿Por qué?_
*   Por que las vitaminas están en las verduras.
*   _¿Por qué?_
*   Por que las verduras tienen ciertos nutrientes que necesitamos para existir.
*   _... ¿Por qué?_

Y luego llegamos al punto donde no hay regreso, o sigues o simplemente desvías la atención a algo más. Pero, como llegamos hasta aquí, aún cuando el pequeño no entiende muchas de las palabras, estas no tienen sentido para él (vitaminas, nutrientes, la existencia humana). Saber preguntar hará que la respuesta tenga o no sentido, que tenga contexto o simplemente nos lleve a otra pregunta que cada vez más nos aleje de lo que realmente deseamos saber, aún sin saber realmente que es. Una triste historia es conocer personas que han perdido el deseo de descubrir el por qué de las cosas. Y aún más triste que durante los años de madurez desarrollamos nuestro cerebro para poder guiar el por qué, sin embargo dejamos de cuestionar.

### Cuando llega la hora de preguntar

Pasamos el colegio, y mientras crecemos perdemos la habilidad de preguntar y nos volvemos personas más sensitivas que perceptoras. Esa forma adquirir información nos hace abordar nuevos problemas o retos de una forma que intentamos completarla sin antes educarnos sobre el tema, y por ende, nos impide hacer las preguntas correctas. Queremos la información de forma rápida, lo cual es posible gracias a internet, pero no sabemos como preguntar. Creemos saber que deseamos sin realmente conocer el por qué de las cosas. No, no es filosofía; algunos ejemplos ayudarán:

*   Estrenar lavadora y utilizarla sin leer las instrucciones, por experiencias pasadas inducimos el funcionamiento, pero no conocemos a detalle sus característica o cada uno de esos botones.
*   Comprar algo en IKEA y empezar a armarlo sin leer las instrucciones (de nuevo), y luego frustrarte por que no sabes que hiciste mal.
*   Abrir Photoshop (si te veo a ti programador) y pensar que sabes para que sirven todos los botones y empezar a hacer cosas con imágenes (aún a ti diseñador).
*   Y así puedo continuar agregando ejemplos a la lista, pero sigamos.

### No preguntamos lo correcto

Por esa forma sensitiva que desarrollamos a lo largo de los años encontramos aburrido, tedioso o hasta a veces inútil leer instrucciones, documentación, o cualquier forma de guía. Y eso nos lleva a hacer preguntas que pueden evitarse, tiempo perdido en vez de tiempo ahorrado y a veces hacer perder el tiempo de otras personas.

### Cómo preguntar

#### Oportuna

Preguntar en el momento correcto nos ayudará a tener una mejor respuesta o tener reciente la duda a ser resuelta.

#### Clara

Si sabemos lo que no sabemos (lo siento por la palabrería), podremos expresarnos sobre específicamente eso y será más claro encontrar la respuesta. Si ya sabemos algo, demos contexto para descartar respuestas que no tienen que ver con la verdadera incógnita. Además de utilizar el vocabulario correcto, referirse al objecto 0 situación por su nombre. Algo que no puede ser llamado de la misma forma y que exista en la mente de los interlocutores, realmente no existe sino solo para el que la imagina.

#### Descriptiva

Dar ejemplo de lo que intentamos hacer (en el caso de una pregunta técnica), dar detalles y ejemplos si es posible.

### Informarse primero

En el caso especial de los desarrolladores, el pecado que cometemos muchos al preguntar directamente, **es no buscar**. El 99% de las veces que utilizamos una librería, software o servicio encontraremos la documentación de alguna forma y la duda que tenemos (y mas en el caso de los principiantes), es muy probable que alguien la ha hecho y esta ha sido respondida. Existen muchos servicios en los cuales encontraremos la respuesta:

*   Si el proyecto es grande, seguramente está la documentación en [GitHub](https://github.com) y preguntas en los issues del proyecto
*   En el caso de WordPress, existe el [sitio de soporte](https://wordpress.org/support/)
*   Si es un servicio, como Typeform, tenemos un [HelpCenter](https://www.typeform.com/help/), que es nuestra biblioteca con casos comunes y tutoriales que también la mayoría de [SAAS](https://en.wikipedia.org/wiki/Software_as_a_service) tendrán
*   En el caso general técnico existe [Stack Exchange](http://stackexchange.com/) (en su caso [Stack Overflow](http://stackoverflow.com/)) donde las preguntas debe estar bien formuladas para ser respondidas, este sitio hace que el usuario formule de la mejor forma las preguntas, esto por el bien de él y los posibles proveedores de la solución
*   Para preguntas más generales existe [Quora](https://www.quora.com), donde se hacen preguntas que no tienen que ver necesariamente con algo técnico pero más de conocimiento y situaciones

### Malas prácticas y ejemplos

Les mostraré ejemplos de preguntas que llegan a mi blog, y quien lo lea sabrá quien es. Por el bien dejaré en anonimato a quienes las han hecho, pero que mejor forma para explicarlo (modifiqué los comentarios para que no tengan faltas ortográficas):

*   Quiero agregar el Agregar Thumbnails en las búsquedas de WordPress pero no se que hace
*   Tengo un problema, tengo varias programaciones con click, todas funcionan bien a la primera pero en cuanto abro una Todas se deshabilitan.
*   Mas complicado no lo puedes explicar gracias por confundirnos mas (en la entrada [2 Errores comunes programando en Javascript](http://jepser.com/idea/2-errores-comunes-programando-en-javascript/))
*   Hola, estoy interesado en pagar por tu plugin, soy de Nicaragua, no soy programador pero se alguito de php… he probado otras versiones en Drupal, etc… me gustaría saber si en verdad es fidedigno tu plugin o no una estafa… ya que no quiero arriesgarme a seguir perdiendo dinero

Y otras más.

### Entonces.

Normalmente cuando una pregunta está bien hecha, se que la persona se tomó el tiempo de intentar solucionar el problema, y está en un punto donde tanto a mi como el/ella se nos hará más fácil resolver el problema, y por ende atiendo a esas dudas. Y no solo por mí, pero por el bien de la comunidad, **pregunta bien**.

### Y otros ejemplos más de la vida real

El que está fuera de lugar. ![pregunta-1-contexto](http://jepser.com/wp-content/uploads/2016/09/pregunta-1-contexto.jpg) Contexto: Promoción de entradas de cine ![pregunta-1-preguntas](http://jepser.com/wp-content/uploads/2016/09/pregunta-1-preguntas.jpg) Preguntas: Problema con celular y queja La que no es oportuna. ![pregunta-3-contexto](http://jepser.com/wp-content/uploads/2016/09/pregunta-3-contexto.jpg) Contexto: Promoción de CarPooling ![pregunta-3-preguntas](http://jepser.com/wp-content/uploads/2016/09/pregunta-3-preguntas.jpg) Preguntas: Emergencia y una queja

Aprende a preguntar

El 16 de mayo del 2016 me mudé a Barcelona. Dejé atrás 28 años de memorias, un país... una vida. Todo empezó cuando viajé por primera vez a Europa, el típico viaje que debes hacer en tu vida. Y por cuestiones del destino, un poco de suerte y valentía fue el comienzo de algo nuevo. Visité Barcelona y me quedé enamorado, me llamó y por cartas que la vida pone en la baraja visité las oficinas de una startup, no esperando nada más que saber si mis habilidades podrían ser útiles en una startup. Luego de conocer a la gente con la que colaboro ahora y 7 entrevistas, estando en Italia recibí la propuesta de trabajo como Developer en Typeform. Acepté, sin pensar.

## Mi primer error

Acepte. Y no pensé. La emoción de saber que podía hacer algo fuera de mi país llenó algo en mi. Hacer lo que me gusta, crear código, afuera de mi país; Guatemala. No pensé en lo que había construido junto a mis mejores amigos, una empresa que 8 años atrás empecé junto ahora mis mejores amigos: Javier, Chito y Coca. Ni mi familia o amigos sabía. Solo mis compañeros del hostal conocían la noticia; celebramos, comimos y bebimos en las calles de Roma. Mi error, no pensar en mi pasado, todo lo que tenía y con lo que estaba feliz. ¿Cómo diría esto? Un poco, o muy egoísta de mi parte. Dejar la empresa, mi puesto, mis amigos, el trabajo y mi familia. Bueno es mi vida pensé, pero no lo es. Es nuestra vida, la que por 28 años disfrute y ahora me iba. No fue hasta que regresé a Guatemala cuando las aguas de pondrían más turbias.

## Decir lo que no debía (quería)

Al regresar, ya tenía un sí y que nadie sabía en ese momento; nadie más que mi mejor amigo y socio. Fue muy fuerte dar la noticia a mis seres queridos y amigos más cercanos. Yo me iba, no se que pasará pero esperaba que fuera bueno. Porque al final fue mi decisión egoísta, ¿no? Mis padres lo tomaron "bien", mi madre preocupada que su hijo se iba, algo que no era familiar para ella pues era yo era él primero que tomaba una decisión tan "loca". Mi padre por otra parte me invitó a celebrar bebiendo más de lo debíamos, aún cuando yo sabía que el estaba un poco triste pues vernos seguido sería mucho más complicado. Mi hermana menor que fue la más "feliz" aún cuando sabía que me iba (íbamos) a extrañar más que nunca. Mis amigos estaban felices por mí. Y mis socios, entre confusión, frustración y enojo... aceptaron la realidad. Después de reuniones con nuestros abogados llegamos a un acuerdo, seguía siendo socio.

## El momento de irme

Fuimos a mi lugar especial (happy place), el Lago Atitlán. Celebramos. Y eso era, estuve 6 meses trabajando remoto para Typeform y fue una mañana entre la celebración que fui notificado, en una semana me podía ir a España. Celebramos más. Y luego la realidad, 7 días para despedirme, tratar de dejar las cosas en orden y bueno... Despedirme de mi gente, de mi tierra. Fueron 7 días donde traté de dejar mis cosas lo más ordenado posible, donde pasé los momentos más felices y tristes que hasta ahora he tenido. Fiestas por allí y por allá. Pero dentro de mi, bueno... Una nueva vida.

## El nuevo comienzo

16 de marzo 2016, llego a Barcelona, estoy en un AirBnb a un lugar donde lo único que me conecta es la lengua (más o menos). Solo con mis maletas y un nuevo comienzo. Un lugar donde puedo ser el nuevo yo, y tratar de enmendar los errores que por 28 años tuve. Después de trabajar 6 meses remoto con la gente que ahora les pondría cara es un poco emocionante. Preguntas venían a mi mente: ¿Dónde comeré? ¿Cómo será estar aquí? ¡No tengo amigos! ¡No hay tortillas ni frijoles! Llego, la invitación y la gente. Es mucho que digerir, donde viviré después de mi AirBnb, alquilo un piso para mi o comparto piso con gente que no conozco. Todo nuevo al final.

## Como ha sido el año y un poco más

Hacer nuevas amistades. Encontrar piso. Saber moverse. Esas cosas en las que no estás acostumbrado y son nuevas... Esas cosas que nos hacen sentir incomodos, todas esas cosas hacen salirte de lo común y moverte, se siente raro y feo al principio pero luego ves que es la vida. La vida que te da esos golpes que duelen pero te hacen más fuerte. Esos golpes que sobreviví y que me hacen estar aquí, en Barcelona y quedarme más tiempo. Encontré mi lugar en una ciudad utópica, donde todo cambia muy rápido. Más rápido de lo que pensaba y quería. Encontré un piso compartido con 2 personas que han cambiado mi vida para bien y que me han enseñado una nueva forma de vivir. Y no es la cultura solamente sino las personas las que te abren a nuevas formas de pensar, nuevas formas de ver la vida. Hoy, al estar dos semanas en Colombia, después de vivir un mes de Corea de Sur, los viajes a Centro América, un mes en Vietnam y Tailandia, los países que he visitado en Europa: España, Francia, Italia, Grecia, Holanda, Bélgica, Austria, bla bla... me convencen de escribir que _es la mejor decisión de mi vida_.

## Y lo de developer...

Como programador, alguien que estudió Electrónica te digo. El código es la magia de ahora. Aprende, ve por lo que te da miedo, por lo que no conoces y por lo que te gusta. En mi vida pensé estar en el punto donde escribo un artículo de lo que me ha pasado. He aprendido, viajado y comido mucho. Las líneas de código y los proyectos en lo que he colaborado son parte del legado que ahora veo y me hacen feliz.

## El outcome

Ve por la vida. No pienses en lo que tienes, sino en lo que vives, en lo que puedes dar. No tengas miedo de compartir tus ideas, no te las robarán, las enriquecerán. No te quejes por lo que no tienes, y disfruta lo que ahora logras y si no te gusta, ¡Pues cambia! Escucha y luego habla. No le tengas miedo a lo que no conoces. Y solo una cosa más... No pienses solo en ti, sino en lo que puedes regresar, en lo que puedes contribuir. **¡Salud!**