Edosistems

Uso correcto de las etiquetas de cabecera

2013-07-25T19:20:00.002-07:00

Como ya conocemos, en HTML se utilizan las etiquetas desde <h1> hasta <h6> para definir títulos, en caso de que no sepas de que estoy hablando igual puedes revisar el tutorial donde explico el uso de las etiquetas.

Pero uno de los problemas más grandes es que aunque sabemos cómo utilizarlas, no le sabemos dar un uso correcto y apropiado y es lo que busco explicar a continuación.

Al momento de utilizar estas etiquetas olvídate de su tamaño y de que su estilo es negrita, pues si solo quieres utilizarla para resaltar una palabra, siempre puedes utilizar los estilos de CSS y colocar un font-size: 24px y ¡listo! Tendrás una palabra con letras grandes, el uso de la etiqueta H1 va mucho más allá que hacer grande una palabra.

La etiqueta H1 se debe utilizar para darle el título a una página, es decir no el nombre del sitio web, sino la página en la que nos encontramos, esto para facilitar la forma en que los buscadores indexan nuestro sitio web (SEO), es decir si tengo una página web llamada “Mundo Animal” y en una de las paginas hablare sobre “Felinos” entonces es la palabra <h1>felinos</h1> la que debe estar ubicada en esta etiqueta y NO EL NOMBRE DEL SITIO, además de que la etiqueta h1 deberia ser usada solo 1 vez por página.

Entonces si en el ejemplo anterior quiero colocar subsecciones de “felinos” por ejemplo “Leon, tigre, leopardo” lo correcto sería utilizar <h2> para estas subsecciones es decir:

<h1>Felinos</h1>

<h2>Tigre</h2>

<h2>Leopardo</h2>

Y si dentro de estas secciones quieres hablar sobre las características de cada uno entonces ya podrías utilizar otra cabecera como seria <h3>.

Además otro consejo para un mejor SEO es utilizar algunas herramientas para verificar palabras claves “Keywords” google por ejemplo nos da una herramienta muy buena llamada adword, donde podemos comprobar la competencia y la cantidad de búsqueda.

Entonces ya lo sabes la próxima vez que quieras simplemente resaltar una palabra, no uses estas etiquetas ya que le estas dando un uso incorrecto, úsalas con prudencia ya que si abusas de ellas, podrás ser penalizado por los buscadores y tu página bajara en las búsquedas.

Pagina en Mantenimiento

2013-07-05T18:02:00.000-07:00

Buenas noches amigos primero que todo les quiero anunciar de que nuestra pagina (edosistems.com) estará en mantenimiento por tanto a partir del 7 de Julio, la pagina no sera accesible, igualmente podrán comunicarse con nosotros a través de este medio o por las redes sociales por facebook o por mi twitter personal @Edos21.

Otra cosa es que he estado algo ocupado, pero en algunos tiempos libres aprovechare de actualizar el blog.

Ademas les quiero contar que estamos preparando un proyecto que espero que a muchos les guste, en estos momentos estamos en desarrollo, pero tan pronto pasemos a una beta publica les avisare por acá para que entren y ademas dejen sus opiniones sobre esta nueva pagina/comunidad ;)

¿Hacer lo que te gusta o lo que te conviene?

2013-06-12T18:28:00.002-07:00

"Haz lo que te gusta, que el dinero vendrá solo"

He escuchado muchas veces la siguiente frase "Dime un lenguaje de programación en el que se gane mucho dinero" O incluso yéndonos a otras áreas, personas que piensan "seré medico porque ellos ganan mucho dinero" o "mi papa dice que informática es el futuro y que eso da dinero". Desafortunadamente esto es algo que podemos encontrar en cualquier contexto por el simple hecho de que esta dualidad es natural, el “Querer” y el “Deber” son, en mi opinión, dos primos muy sabios que les encanta pelear.

La verdadera pregunta es: ¿A quién elegir?

Esta clase de ideas nunca se queda hasta allí ya que por lo general estas personas terminan siendo un médico mediocre, un mal programador o incluso odiando su carrera porque como no le tienen amor, no buscan actualizarse, mejorar, sino que sólo se quedan con lo que aprendieron en una universidad o algún instituto. Todo por el simple hecho de que realmente no les interesa.

Con respecto a mi carrera, es decir, informática les puedo asegurar que no existe el lenguaje de programación perfecto, aquel que no solo te llene de dinero, sino que te permita crear aplicaciones para todos los dispositivos, que sea totalmente compatible con cualquier sistema operativo, en donde se puedan hacer páginas web, aplicaciones para computadoras de escritorio, para móvil, además funcione en electrónica y además sea tan sencillo que lo puedas dominar en menos de 1 mes o, como dicen algunos libros, “Aprenda a programar en 10 horas”. Créeme, si existiera sería tan común que simplemente el mercado colapsaría y la hora de programación en éste simplemente no costaría nada.

El punto es que la concepción del mundo es diferente para cada persona, por tanto, la concepción de lo que es o no conveniente también lo es. Podemos resumirlo en el siguiente planteamiento: estudiar/trabajar en lo que te gusta y, por tanto, en lo que buscas destacar, versus estudiar/trabajar en algo de lo que sólo has escuchado rumores por el afán de complacer a otros o sólo querer dinero. La primera opción te da la oportunidad de tener la satisfacción de que estás haciendo algo que consideras genial y que no te presiona, además de que te abre la posibilidad de un futuro igual de rico; la segunda opción puede que saque sonrisas pero a otras personas, y quizás te consiga dinero (quizás no, nada es garantía), pero también un sentimiento de frustración porque no estás en el lugar correcto y sientes que has trabajado el triple por una pequeña ganancia.

Es importarte recordar lo siguiente: “Mi trabajo no me define, pero yo defino mi trabajo”. Si estudias o trabajas por conveniencia, la frustración que puedas sentir se reflejaría en mediocridad y eso puede llevarte a menos dinero (que era tu motivo principal); pero si te gusta lo que haces, tus ganas de saber más y destacar en lo que haces te llevarán a grandes resultados.

Por último, te invito a que reflexiones mucho antes de tomar estas decisiones, más allá de cosas como “seguir tu corazón” y “hacer lo que sientas”. No es cuestión de preferir ganar mucho dinero o no, sino de elegir qué clase de vida y decisiones quieres llevar ¿Quieres vivir contento o quieres vivir conforme?

Opera Next

2013-05-28T18:31:00.000-07:00

El dia de hoy vio la luz opera 15 con el motor de webkit, lo he probado y trae algunas ventajas nuevas que me parecieron bastante agradables, como el "estante" y "descubre".

Si como yo te gusta la tecnología o simplemente te gusta vivir actualizado no te puedes perder esta descarga de opera next.

descargar: opera

Duolingo, Una forma Genial de aprender idiomas

2013-05-28T09:14:00.002-07:00

Un amigo me paso hace tiempo esta pagina, y de verdad que no le había prestado atención. Hoy aprovechando que tengo unos días libres me puse a revisar a ver de que se trataba este sistema para aprender idiomas y de verdad que me parece muy interesante y adictivo.

Puedes registrarte usando tu cuenta de Facebook e incluso tiene su versión móvil, y lo mejor es que es totalmente gratis, para que aprender no sea una excusa, ademas aprendes a través de actividades diversas y muy entretenidas, tienen ademas idiomas como Ingles, alemán, francés, portugués, italiano y por supuesto español.

Si ya manejas un poco el idioma, puedes saltarte lecciones usando un examen que te ubica en un nivel mas avanzado.

Hoy en día es muy importante, manejar varios idiomas para no perder ninguna oportunidad que nos ofrezca la vida, así que prueba duolingo, y cuéntanos tu experiencia usando esta plataforma.

Sitio: duolingo

INTERSTELLAR tema Adaptativo de WordPress

2013-05-08T16:56:00.000-07:00

Actualmente me encuentro aprendiendo a utilizar bien WordPress y buscando por Internet me he encontrado con una cantidad grandisima de temas, algunos espectaculares, otros algo obsoletos, buenos y malos, hay de todas las formas y colores, para gustos distintos.

Pero me encontré con uno en particular que me llamo la atención, llamado Interstellar, su diseño es totalmente adaptativo (Responsive Design) ademas me parece muy limpio, profesional y organizado.

Entre las ventajas que nos presenta tenemos, ademas de el diseño adaptativo, 5 colores distintos para el tema, galería de imágenes Slider en la pagina inicial (es algo que últimamente esta de moda), y algo muy importante es que el SEO esta optimizado.

Así que si trabajas con WordPress, deberían probar este tema, ademas de que es gratuito o puedes apoyarlos donando 49$, la única diferencia con la versión paga es que tendrás actualizaciones y soporte de por vida.

Via: ufothemes.com
Demo: interstellar

PlayStation 4 DualShock

2013-04-28T11:07:00.000-07:00

El nuevo control de la consola PS4 en verdad pareciera que va a cambiar la forma de jugar en varios aspectos, a primera vista vemos que la forma del clásico DualShock se ha respetado, lo cual es excelente para la jugabilidad. Pero como podemos ver en el vídeo (Al final de la publicación le han agregado algunas nuevas funcionalidades.

Lo primero que veo es que ahora justo arriba de los stick analógicos nos encontramos con un panel táctil a simple vista creo que esto ayudara mucho en la jugabilidad de varios juegos, esperemos que sepan explotar esto, ya que podría tener potencial. Ademas abajo de este panel podemos notar una pequeña corneta, lo cual hace que los sonidos sean mucho mas personales (esto en verdad si me parece algo de la wii, sin embargo en los juegos de primera persona ira de maravilla).

Ademas cuenta también con un sensor de movimiento en la parte de adelante, según indica el vídeo su función principal es saber la posición de los jugadores en la sala y por tanto poder distribuir mejor la pantalla, lo cual evitaría el clásico (¿Cual soy yo?).

Y bueno no podía faltar en botón compartir, estamos viviendo en una era en la que todos los dispositivos electrónicos nos permiten compartir lo que vemos o hacemos y por supuesto sony no podía quedarse atrás la idea es que puedas compartir en vídeo o imágenes lo que estas jugando, sin necesidad de tener que grabar la pantalla y luego editarla, es decir que podrás compartir algunas de tus mejores jugadas, o realizar un "paso a paso" para explicarles a tus amigos como superar algunos desafíos o claro también podrás grabar el gol que le metiste a tu amigo y pasar días y días enseñándoselo hasta que te odie.

Te dejo el vídeo y espero tus opiniones sobre este nuevo control.

jQuery Zoom

2013-04-22T15:42:00.002-07:00

Buenas noches lectores y disculpen que he tenido el blog algo abandonado en lo que va de mes, estaba trabajando en unos proyectos para unos clientes y estaba bastante ocupado, hoy ya los he enviado y espero poder seguir escribiendo para todos ustedes con regularidad.

Pero en fin, esos son detalles personales, les quería mostrar esta herramienta que me encontré mientras trabajaba en un proyecto, se trata de jQuery Zoom.
Supongo que en ocasiones debes hacer una galería pero también necesitas que al momento en que el usuario haga click, las imágenes automáticamente se acerquen para que así la puedan apreciar mejor.

Si has trabajado con jQuery antes, entonces esto se te hará muy sencillo ya que solo es necesario una cuantas lineas de código y voilà tendrás ya tu imagen con zoom.

Fuente (Ingles): jacklmoore.com
Descargar: github.com/jackmoore

Google Nose Beta (Oler es Creer)

2013-03-31T17:26:00.000-07:00

Google como siempre sorprendiéndonos con su tecnología nos asombra hoy con su nuevo proyecto el cual han nombrado "Google Nose" si bien esta en fase Beta, ya lo he probado y me he llevado una sorpresa bien agradable y por eso lo he querido compartir con ustedes, la pagina esta en ingles, pero es muy intuitivo por tanto podrás usarlo sin ningún problema.

Les dejo el vídeo para que puedan ver como funciona

Funciona perfectamente con tecnología nueva y ya existente, y desde tus dispositivos Android puedes captar los olores y transmitirlos para que google realice la búsqueda según el olor que capte.

Quieres saber como huele un ¿auto nuevo? o ¿algún perfume antes de comprarlo? entonces no dejes de probar Google Nose.

Probarlo: Google Nose

Ser Freelancer y no morir en el intento(Señales de un cliente "problemático")

2013-03-22T20:24:00.002-07:00

Si trabajas como freelancer o si estas pensando en hacerlo debes saber que hay ocasiones en las que es mejor hacer un cliente a un lado, en un principio puedes pensar "esto es un error, ¿como conseguiré entonces mas clientes?" pero créeme en ocasiones trabajar con un cliente problemático solamente llevara a perder el tiempo, recursos y dejar de trabajar con mejores clientes. Ademas si decides trabajar con un cliente problemático ten en cuenta que no te recomendara, no te pagara a tiempo y nunca estará feliz con tu trabajo.

Algunas señales para detectar un posible cliente problemático son las siguientes:

No le gustan tus trabajos anteriores

En ocasiones nos encontraremos con clientes que no confían en nosotros o en nuestros trabajos anteriores, puedes notarlos ya que te harán preguntas como "¿Estas seguro que puedes hacerlo?" o "En este trabajo necesito perfección" en conclusión demostraran que no confían en ti y lo mas importante es trabajar con un cliente que confié en ti, que te trate como a un profesional y no como a un empleado.

Expectativas poco realistas

Siempre los clientes van a querer trabajos muy buenos e incluso excelentes y para eso contratan profesionales, buscando excelencia y eso debemos venderles, pero en ocasiones exageran esas expectativas y nos piden proyectos imposibles como por ejemplo "un logo que atraiga a todas las personas, incluyendo niñas menores de 12 y a Gamers", si lo notan son gustos totalmente distintos y por tanto sera muy difícil encontrar una solución para este problema que nos plantea.

Hablar mal de freelancers anteriores

Este caso esta muy relacionado con el anterior, ya que es posible que sus expectativas sean tan irrealistas que nadie ha logrado alcanzarlas, en estos casos lo que deberías hacer es hacer algunas preguntas como "Específicamente ¿Que cosa no le gusto de los freelancers anteriores?" y "¿Que discutieron en un principio y en que difiere esto con el proyecto obtenido?".

Dependiendo en como responda podrás tomar una decisión ya que en ocasiones tendrán razón, es posible que hayan contratado algún freelancer muy malo, pero si su respuesta no es clara entonces, posiblemente el problema sea el cliente.

Perfeccionista en Exceso

Si en algún momento te encuentras con un cliente con el que sin haber empezado el proyecto te remarca cada error y detalle incluso sin aun tener un contrato por delante, solo con alguna propuesta, es posible que te estés enfrentando a este caso, debes tener cuidado, ya que esta bien que te señale los errores, pero cuando exageran y todo lo remarcan en rojo indicándote errores y problemas, la relación no mejorara y al contrario solo podrá empeorar.

¡Leeeeeeeeentos!

Existen algunos clientes que aparecerán 1 vez cada 15 días o incluso mas tiempo, y esto en ocasiones puede ser muy frustrante ya que si estas atascado, tienes alguna duda, estas esperando que te envíen algún logo o formulario pero se demoran mucho tiempo, esto puede llevar a proyectos muy lentos, los cuales dependerá de ti si aceptarlos o no, ya que no es recomendable durar en un proyecto mas tiempo del verdaderamente necesario.

Clientes que no participan

Normalmente cuando iniciamos un proyecto es recomendable hacer muchas preguntas, para que el proyecto se acerque mas a las necesidades del cliente, y solventar dudas que puedan surgir mientras surge el proyecto, si en algún momento te encuentras con un cliente que te diga "¿Por que me haces tantas preguntas? Yo te contrate para resolverlas" Pero sin la guía del cliente solamente puedes ir a un fracaso seguro.

Finalmente, confía en tus instintos, en ocasiones simplemente sentirás que algo no va bien con un cliente, lo mejor que puedes hacer es confiar en tus instintos y no forzar esa relación que no sera para nada agradable.

Pero no te preocupes si estas empezando a trabajar de esta manera. También encontraras clientes que están dispuestos a apoyarte, a enviarte diseños, a resolver tus inquietudes y por lo general estos trabajos se terminaran de forma muy rápida y ellos terminaran muy felices por tanto te pagaran a tiempo y algo muy importante, te referirán con sus conocidos.

Relacionados
Ser freelancer y no morir en el intento (tu entorno)
Ser freelancer y no morir en el intento (El cliente)
Ser freelancer y no morir en el intento(Descansos)

Menú vertical con iconos

2013-03-12T17:50:00.000-07:00

Les quiero mostrar hoy un menú sencillo, bonito y minimalista para todos aquellos proyectos en los que necesitemos tener el menú siempre a la vista, ademas esta diseñado en HTML y CSS y con un efecto de hover que lo hace muy dinámico e interesante.

Ademas en la documentación de la pagina pueden ver como cambiar el tamaño del menú y los iconos para adaptarlo a distintos dispositivos, según sea nuestra necesidad.

Demo: tympanus.net
Descargar: tympanus.net
Fuente: tympanus.net

Aprende jQuery Muy Facil

2013-03-06T17:11:00.004-08:00

jQuery es una librería de JavaScript que nos facilita mucho el trabajo a la hora de crear nuestras paginas web. su eslogan es "Write Less, Do More" (Escribe Menos, Haz Mas) y eso es totalmente cierto, ya que usando jQuery nos ahorraremos muchas horas de código a diferencia de usar JavaScript directamente. Por jQuery podrás, crear animaciones, manejar eventos e incluso podrás utilizar Ajax.

Si quieres aprenderlo a utilizar puedes utilizar la documentación que encontraras en la pagina, pues esta muy completa, además en varios foros encontraras ayuda fácilmente.

También existe un tutorial practico muy bueno llamado tryjquery en el podrás ver vídeos realizar ejercicios, e incluso te va dando puntos por cada uno de los ejercicios bien realizados, para motivarte a seguir. En este tutorial encontraras desde selecciones básicas del DOM hasta manejo de eventos o cambios en HTML.

Así que si quieres aprender jQuery esta es una forma muy fácil, efectiva y dinámica de hacerlo

Enlace: try.jquery.com

Do The Harlem Shake

2013-03-01T15:38:00.001-08:00

El Harlem Shake es simplemente otro vídeo viral que esta recorriendo el Internet desde finales de enero aproximadamente, el vídeo es bastante simple una persona aparece bailando los primeros segundos del vídeo por lo general esta disfrazada, mientras los demás permanecen impasibles, luego se escucha la frase "Do the Harlem Shake" y todos comienzan a bailar de manera descontrolada y finalmente termina en un slow motion.

Se que no suelo realizar entradas sobre este tipo de contenido pero hoy mientras navegaba encontré algo que simplemente no he podido dejar pasar, se trata de un easter egg realizado por youtube donde podemos ver como toda la pagina se aloca con la música del ya mencionado harlem shake.

Si quieres ver este Easter Egg es muy sencillo simplemente entra en youtube y escribe "do the harlem shake" (o dale clic al enlace que dejo al final) y veras como el logo de YouTube empieza a bailar y luego lo sigue toda la pagina.

Enlace: youtube.com

Lo que la mayoría de escuelas no enseñan

2013-02-26T16:07:00.001-08:00

"Todos en este país deberían aprender como programar una computadora ... ya que te enseña a pensar". - Steve Jobs

Con esta frase inicia el documental creado por la ONG llamada code.org cuya finalidad es fomentar la informática y la programación. El documental cuenta con la aparición de varias personalidades como:

Mark Zuckerberg de Facebook
Bill Gates de Microsoft
Will.I.Am del grupo Black Eyed Peas
Cris Bosch jugador de la NBA
Jack Dorsey de Twitter
Drew Houston de Dropbox
Gace Newell de Valve
Elena Silenok de Clothia
Entre otros.

Les dejo por acá el vídeo para que puedan verlo ustedes mismos.

Como vemos el vídeo habla de como en las escuelas de Estados Unidos hace falta mas educación sobre la programación y como cada día son mas personas las que se interesan en la programación y como incluso se pierden muchos trabajos a causa de la falta de programadores. Pienso que no solo en USA hace falta educación sobre programación sino en todo el mundo, el pensum educativo debería actualizarse y darle mayor importancia a la programación.

Igualmente el vídeo es bastante Fantástico ya que nos comparan a los programadores con Magos e incluso como si fueran superpoderes.

Descargar y otras versiones del vídeo en : code.org/teach
Pagina: code.org

Fuentes gratis para la cabecera

2013-02-24T10:34:00.000-08:00

En ocasiones uno de los momentos mas difícil para alguien que desarrolla paginas web es el diseño, notamos en que las letras son muy comunes, que los colores no se ven como nos imaginábamos y sencillamente nada nos cuadra, y aunque nuestro sistema sea una perfecta obra de arte, simplemente no atrae publico, ya que tenemos que reconocer que en gran parte lo que mas vende es el diseño, ya que llama mas la atención de los usuarios.

Es por esto que hoy quiero compartir con ustedes esta pagina que encontré con 35 fuentes gratis para títulos para las cabeceras de la pagina.

Y es que por supuesto la fuente es muy importante para llamar la atención de los usuarios, la manera en que los ojos de los lectores escanean la pagina en busca de información e incluso como presentemos la información juega un papel muy importante en el impacto que tendrá nuestra pagina.

Información y Descarga: smashinghub.com

Hackers & Developers Magazine

2013-02-12T10:57:00.004-08:00

Hace unos días un amigo me paso esta pagina, es una revista digital y gratuita que pueden descargar en formato pdf, esta iniciando y apenas están en el Año 0 y en la revista N° 3, me ha parecido que la información que trae es bastante interesante y por eso he querido compartirla por acá.

Los principales temas de esta revista son Software Libre, Hacking y Programación ademas inicia con una frase de Richard Stallman que me gusto mucho

“... Hacker es alguien que disfruta jugando con la inteligencia...”

Los articulos de este mes son:

Twitter Bootstrap: un elegante, intuitivo y poderoso framework
Web Scraping: excavando en la red
¿Cómo empiezo con JavaScript?
Conociendo a DOM: Parte I
Manual de MVC: (3) Los objetos View
Mis primeros pasos con MongoDB
Introducción a Perl (Parte I)
Introducción al desarrollo dirigido por pruebas
IPv6, el presente
Pásate a GNU/Linux con Arch: Gestores de ventanas y escritorios
PayPal o Tarjeta de Crédito a través Invitación al proyecto GcalcTool: GNOME Calculator
Ubuntu Rookie: Toma 3

Pagina: hdmagazine.org/
Descargar N°3: Revista 3

Flight de Twitter (Framework de JavaScript)

2013-02-10T10:55:00.001-08:00

Twitter anteriormente ya ha creado una herramientas para el desarrollo web, como es bootstrap y ahora han desarrollado un framework de JavaScript el cual han bautizado como Flight.

Actualmente Twitter utiliza Flight para sus propias aplicaciones web, pueden ver un Demo es un componente liviano el cual se centra en el comportamiento de los nodos del DOM.

Flight es distinto de los Frameworks existentes en que no prescriben o proporcionar un enfoque particular a la prestación o el suministro de datos a una aplicación web. Es agnóstico como se realizan las solicitudes, en qué idioma utilizan las plantillas o incluso de como hacemos el código HTML. Mientras que algunos frameworks web animan a los desarrolladores a organizar su código en torno a una capa del modelo prescrito, Flight se organiza en torno al actual modelo DOM la funcionalidad se asigna directamente a los nodos DOM.

Cuando un componente recibe un evento, tan solo tiene que realizar la acción asociada sin necesidad de depender de otros.

También permite que un elemento tenga múltiples mixins aplicados a el mismo, cuando normalmente los patrones soportan una sola herencia.

Solo necesitamos jQuery para la manipulación del DOM y es5-shim, así que no queda mas sino probarlo y comentar como te fue o que te parece esta nueva herramienta que nos ofrecen.

Fuente: engineering.twitter.com
Github: github.com/twitter
Codigo del Demo: Demo

Maquetar Usando Twitter Bootstrap (Diseño Adaptativo)

2013-02-05T09:30:00.000-08:00

Hace unos días uno de los lectores del blog me pidió que le ayudara a maquetar usando Twitter Bootstrap, así que en lugar de darle una explicación larga y tediosa como respuesta he decidido hacer una entrada con imágenes y paso por paso para que sea mas fácil de aprender.

Les mostrare con un diseño sencillo y fácil de usar además aprovecharemos el diseño adaptativo que nos ofrece Bootstrap.

1. Debemos Descargar primero que todo este framework

2. Una vez descargado el framework creamos nuestro proyecto con la siguiente estructura, lo hice en un proyecto de PHP y copiamos los archivos bootstrap-responsive.css y bootstrap.css a la carpeta css y creamos un archivo CSS llamado estilogeneral.css en la misma carpeta, y también copiamos el archivo boostrap.js en la carpeta js

3. Una vez que hemos creado la estructura como la imagen anterior , procedemos primero a programar la hoja de estilo estilogeneral.css

estilogeneral.css

body{

font-family: verdana, arial;

background-color: #F2F2F2;

}

#general{

margin-top:20px;

background-color: #FFF;

border-radius:10px;

padding: 5px;

}

#encabezado{

height: 90px;

padding: 5px;

}

#logo{

color:#FF4000;

text-shadow: 0.1em 0.1em 0.05em #333;

}

#menu{

margin-top:20px;

float:right;

}

#izquierda{

color:#fff;

min-height: 300px;

background: #fff url(../images/bghead.PNG) repeat-x;

border-radius:5px;

border: 1px solid #848484;

}

#izquierda h3{

text-align: center;

color:#fff;

}

#derecha h3{

text-align: center;

color:#fff;

}

#derecha{

color:#000;

min-height: 300px;

background: #fff url(../images/bghead.PNG) repeat-x;

border-radius:5px;

border: 1px solid #848484;

padding: 10px

}

#footer{

background: #0489B1;

height: 50px;

text-align: center;

margin-top: 10px;

color:#fff;

}

4. Ahora procedemos con nuestro archivo index, agregamos las referencias a los archivos que utilizaremos

<link rel=”stylesheet” href=”css/bootstrap.css” media=”all”>

<link rel=”stylesheet” href=”css/bootstrap-responsive.css” media=”all”>

<link rel=”stylesheet” href=”css/estilogeneral.css” media=”all”>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

<script src=”js/bootstrap.js”></script>

5. Luego agregamos la función que nos permite diseñar un menú desplegable de bootstrap

<script type=”text/javascript” >

$(document).ready(function(){

$(‘.dropdown-toggle’).dropdown();

});

</script>

6. Ahora en el mismo archivo agregamos el siguiente código que estructura nuestra pagina

<div class=”container” id=”general”>

<div id=”encabezado”class=”row”>

<div class=”span4″ id=”logo”><h3>LOGO DE MI EMPRESA</h3></div>

<div id=”menu” class=”span8″>

<ul class=”nav nav-pills”>

<li class=”active” style=”width:150px”><a href=”#”>Inicio</a></li>

<li class=”dropdown” id=”menu1″>

<a style=”background:#CEECF5″class=”dropdown-toggle” data-toggle=”#fat” href=”#menu1″>

Nosotros

<b class=”caret”></b>

</a>

<ul class=”dropdown-menu”>

<li><a href=”#”>Misión</a></li>

<li><a href=”#”>Visión</a></li>

<li class=”divider”></li>

<li><a href=”#”>Staff</a></li>

</ul>

</li>

<li class=”"><a style=”background:#CEECF5″href=”#”>Portafolio</a></li>

<li class=”" ><a href=”#” style=”background:#CEECF5″>Contacto</a></li>

</ul>

</div>

<div id=”cuerpo” class=”row”>

<div id=”izquierda” class=”span4″>

<h3>Izquierda</h3>

<!–<ul class=”nav nav-tabs nav-stacked”>

<li class=”active”>

<a href=”#”>Inicio</a>

</li>

<li><a href=”#”>Nosotros</a></li>

<li><a href=”#”>Portafolio</a></li>

<li><a href=”#”>Contacto</a></li>

</ul>–>

<ul class=”nav nav-list”><br/>

<li class=”nav-header”>

Menu vertical

</li>

<li class=”active”>

<a href=”#”>Inicio</a>

</li>

<li><a href=”#”>Nosotros</a></li>

<li>

<li> <a href=”#”><li class=”icon-book”></li>Mision</a></li>

<li> <a href=”#”><li class=”icon-book”></li>Vision</a></li>

<li> <a href=”#”><li class=”icon-book”></li>Staff</a></li>

<li><a href=”#”>Portafolio</a></li>

<li><a href=”#”>Contacto</a></li>

</ul>

</div>

<div id=”derecha”class=”span7″>

<h3>Contenido</h3>

<br/>

<h1>Bienvenidos a nuestra pagina!</h1>

<p>

Esta Pagina ha sido maquetada con twitter bootstrap

</p>

<p><a class=”btn btn-primary btn-large”>Mas información</a></p>

</div>

<div id=”"class=”row”>

<div id=”footer” class=”span12″>

<span>Todos los derechos reservados</span><br/><b>Sitio maquetado con Twitter Bootstrap</b>

</div>

7. Ahora si todo lo hemos hecho bien nuestra pagina en la ventana de tamaño maximizado, es decir una pantalla resolución promedio de 1024 * 768 debería verse así

8. Si reducimos el tamaño de la ventana de nuestro navegador, nuestro diseño debería adaptarse a la resolución nueva, esto quiere decir que nuestro diseño podría adaptarse a las pantallas de dispositivos móviles, es decir que hemos hecho un diseño web adaptativo sin hacer mucho esfuerzo y todo más fácil gracias a bootstrap-responsive.

Y listo, así de sencillo es realizar una maquetación usando Bootstrap, así que si tienen dudas, no entendieron alguna parte del ejemplo no duden en preguntar.

Iconos Minimalistas

2013-02-01T09:37:00.002-08:00

En ocasiones necesitamos iconos para nuestra Página Web y si nos gusta el diseño minimalista entonces te encantara este set de iconos, que además quedan muy bien en paginas web con fondos oscuros y si además le colocamos un .hover para un color blanco, queda de verdad excelente.

Y es que en lo personal me gustan mas los diseños sencillos y minimalistas en donde el protagonismo se centra en el contenido, además da un toque de elegancia y profesionalismo a nuestro sitio Web, te dejo el link para que lo descargues y lo utilices en tu sitio.

Descargar: socialiconstudio.com

Reduce el estrés mientras conduces

2013-01-28T12:45:00.000-08:00

Siempre pensar en el transporte del mañana era algo muy fácil, cualquiera hubiera apostado por autos voladores, pues es lo que las películas siempre nos han mostrado, y como todos sabemos las películas nunca nos mienten. Pero ese mañana ya llego y no vemos autos voladores por ninguna parte, así que muchos estamos decepcionados de ese mañana, sin embargo aun tenemos computadoras que caben en la palma de la mano.

Pero solo porque los autos voladores no han sido fabricados para producción en masa, no significa que algunas personas no continúen conceptualizando ideas (algunas muy extrañas) para autos, como por ejemplo cápsulas que te catapultan de Nueva York a Beijing al estilo Futurama.

"Imagina un mundo en el que el transporte no sea una experiencia enloquecedora, sino un periodo de relajación"

Es esa la propuesta que nos trae Haitao Qi, un medio de transporte en el que puedas adelantar trabajo mientras vas camino al trabajo, revisar tu email, hacer algunas llamadas importantes, realizar alguna reunión, jugar con los niños o simplemente relajarnos ¿Por que no?.

Es solo un concepto pero en realidad soñar con esta idea no es nada mal, a mi me parece muy atractivo el hecho de aprovechar esas largas colas para reclinarte ver una película, o incluso seguir durmiendo en la mañana mientras vas al trabajo.

Vía: yankodesign.com

Lista para Desarrolladores Web

2013-01-25T08:17:00.001-08:00

Cuando estamos haciendo un proyecto son muchos los detalles de los que tenemos que estar pendiente y bueno, somos humanos y por supuesto que se nos pasa por alto algunos detalles (y mucho mas en caso de que decidas copiar y pegar el código), el problema es que muchas veces esos pequeños detalles son los que logran el éxito o fracaso de nuestro proyecto.

Ayer estaba revisando una pagina que ayuda con todas las fases de un proyecto, en especial al final cuando ya estamos probando y necesitamos que todo este bien y debemos revisar parte por parte para que todo funcione.

La pagina se llama webdevchecklist y es precisamente eso una lista para el desarrollador web, donde podemos ir tachando las fases que ya hemos terminado. Algo que me parece excelente además de esto, es que la pagina trae en la mayoría de artículos unos hipervinculos a otras paginas que te pueden ayudar a solventar posibles problemas.

Te recuerda desde revisar los errores gramaticales y reparar hipervinculos rotos, hasta sobre la seguridad en tu sitio o la creación del archivo humans.txt

Sitio: webdevchecklist.com

Widget: Conteo Regresivo en nuestro Sitio Web

2013-01-21T15:09:00.003-08:00

En ocasiones necesitamos mostrar a una comunidad algún evento que vamos a realizar y aunque hoy en día podemos crear eventos en las distintas redes sociales, otra idea bastante genial es colocar un Widget en nuestra pagina web, blog o donde lo necesitemos.

Hoy les quiero mostrar este Widget bastante sencillo de usar y que además nos dará el código HTML para que podamos agregarlo en nuestro sitio web y poder mostrárselo a toda la comunidad.

El sitio se llama Countdown Calendar (algo como Calendario con conteo regresivo) y puedes diseñar tu propio evento indicar el nombre, la fecha, una imagen que quieras colocar y colocar detalles específicos como donde se realizara, algún link o información extra.

Algo que me parece agradable es que en el panel de la derecha puedes cambiarle los colores y el tamaño para que de esta forma se adapte mejor a nuestro sitio para evitar problemas con el diseño que ya tengas en tu pagina.

La pagina esta en ingles, pero es bastante intuitiva y fácil de usar.

Sitio: countdowncalendar.net

¡EUREKA! Respuestas Ante Tus Ojos

2013-01-18T08:28:00.000-08:00

¡Eureka! Fue la palabra que gritaba con alegría un hombre desnudo y mojado que corría por las calles de una ciudad de Sicilia hace cientos y cientos de años, escandalizando y divirtiendo a todos aquellos lugareños. La palabra Eureka significa “Lo he encontrado” y representó la celebración de un gran momento para Arquímedes pues finalmente, después de tanto pensar, había podido resolver un gran problema que el Rey le había confiado. A partir de este hecho también se le acredita una serie de importantes nociones en el campo de la matemática, física y geometría.

Hace unos cuantos siglos menos, cuenta la leyenda que Isaac Newton estaba sentado a la orilla de un manzano, pensando en los mecanismos de la física, cuando por fortuna una fragante manzana cayó sobre su cabeza y, al pensar en ello, se desencadenaron en la mente de Newton una serie de conclusiones que lo llevaron a escribir y manejar los principios de Gravitación Universal que conocemos hoy en día.

Unos cuantos meses atrás el Dr. Sheldon Cooper de la popula serie “The Big Bang Theory” pasó tres noches sin dormir tratando de resolver un importante problema de Física cuando se le ocurre seguir el ejemplo de Einstein (quien descubrió la Relatividad mientras trabajaba en una oficina) y trabajar como camarero en un restaurante. Unas horas después la respuesta había finalmente llegado a su mente.

¿Qué tienes tú en común con Arquímedes, Newton y Sheldon Cooper? Que a veces, la respuesta puede caer ante tus ojos y en el momento menos esperado. ¿Sabes por qué sucede esto? Aprender cómo aumentar la probabilidad de que esto suceda.

¿Cuántos de nosotros no nos hemos topado con un problema, ya sea en nuestro trabajo o nuestra vida personal, que resulta sumamente difícil de resolver? Esto definitivamente es algo de lo que nadie escapa y se relaciona mucho con lo que hablábamos anteriormente sobre La Visión Túnel.
Cuando las personas tienen que resolver algún problema o tarea, generalmente tratan de volcar toda tu atención en ello y, muchas veces, cuando resolverlo es más difícil de lo que esperan, tienden también a frustrarse y comienzan ese círculo vicioso. Sin embargo, cuando finalmente ese momento de claridad llega a nosotros (denominado en el campo de la Psicología como "Insight"), este alivia nuestra carga inmensamente.

Cuando te enfocas de esta manera y elijes emplear sólo el método analítico y lógico, entonces estás usando el pensamiento vertical el cual sin duda es fundamental y sumamente efectivo, sin embargo, como seres pensantes de mentes complejas, debemos recordar que esto no es todo y que tener otras perspectivas también es importante. El pensamiento lateral, por otro lado, se enfoca no sólo en lógico y en lo que tenemos en frente, sino también en los detalles y en lo externo.

Hoy en día este último tema ha sido investigado y se han ideado importantes teoría acerca de ello, y el Físico y pensador creativo Edward Bono en su libro “El Uso del Pensamiento Lateral” plantea una técnica, similar a la de Sheldon, llamada Pausa Creativa en la que, en vez de enfocarte enteramente en la resolución del problema, te liberas del compromiso de “tener que pensar” en esa tarea, y te dedicas a hacer alguna otra que requiera un mínimo de tu atención (como tomar una ducha, sentarte bajo un árbol o servir mesas) para que así tu mente se oriente al pensamiento lateral. Esto no significa que debamos tratar de usar el pensamiento lateral en todos los casos, pero si usarlo más a menudo y dependiendo del caso que se nos presente.

La próxima vez que te encuentres en una de esas situaciones difícil intenta seguir esta técnica y hacer uso de tu pensamiento lateral porque es muy posible que la respuesta esté ante tus ojos o quizás esperando por ti.

¿Qué tal tú? Supongo que no has corrido desnudo por las calles pero ¿Alguna vez has tenido algún momento “Eureka” donde después de mucho pensar la respuesta esta finalmente te haya golpeado en la cara?

Agrega comentarios en Blogger solo con tu perfil de Facebook

2013-01-15T17:59:00.001-08:00

En otra entrada similar explicaba como compartir tu contenido mas fácil y rápido en distintas redes sociales otro plugin que quería agregarle a mi blog pero no aparece en la barra de plugins es el de hacer comentarios directamente desde facebook.

Y es que tenemos que admitirlo para muchas personas es mas fácil comentar con la misma cuenta de facebook en lugar de registrarse o iniciar sesión en su cuenta de Gmail.

Se que en algunos sitios aparece esta información, pero ya que la plantilla a cambiado hay que utilizar código de HTML5.

Primero que todo entra en PLANTILLAS y luego en EDICIÓN HTML, marca la opción EXPANDIR PLANTILLAS DE ARTILUGIOS y BUSCA la linea

<body>

Si usas una plantilla de diseñador la encontraras como

<body expr:class='"loading" + data:blog.mobileClass'>

Y justo DEBAJO agrega

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Después de que la agregues BUSCA lo siguiente

<b:includable id='comment-form' var='post'>

Nueva mente DEBAJO coloca lo siguiente

<div id='comentariosFacebook'>
<div class='fb-comments' data-num-posts='5' data-width='500' data-colorscheme='light' expr:href='data:post.canonicalUrl'/>
</div>

Y si tienes comentarios anidados BUSCA esta linea

</b:includable>
<b:includable id='status-message'>

Pero esta vez copia ARRIBA esto

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>

Y listo, ahora al entrar a cualquier entrada veras la caja de texto de facebook para permitir a los usuarios comentar desde sus cuentas en facebook.

Información: ciudadblogger.com

Visión Túnel

2013-01-09T09:37:00.001-08:00

Imágen de: www.demipropiainspiración.blogspot.com

Cuando estás manejando normalmente disfrutas de una imágen normal en la que puedes considerar todas las opciones y obstáculos. Ahora imagina que estas manejando y sólo puedes ver un cierto punto (como la imágen de arriba) sería muy peligroso ¿Cierto? Podrías ver hacia el frente (lo cual es muy importante) pero con el peligro de atropellar a alguien que provenga de un lado.

Estas imágenes representan la realidad de las personas que padecen de Glaucoma, y si te pregunto ¿Alguna vez en tu vida has caminado de esta forma? Probablemente me dirías que no pero te sorprendería saber que lo más seguro es que si lo hayas hecho y que incluso tal vez aun lo hagas.

¿Alguna vez has buscado incesantemente tus llaves o tu celular para luego darte cuenta de que estaba en mano? ¿Has estado tan concentrado leyendo o viendo algo que ni siquiera notaste que había alguien hablándote a tu lado? La visión túnel es un fenómeno más común de lo que muchos se imaginan y leer esto te ayudará con el primer paso para resolverlo.

La psicología establece que este curioso fenómeno de la Visión Túnel consiste en centrar la visión en un solo punto (mediante atención selectiva) y perder la visión periférica (lo que quizás conozcamos como vista panorámica). Debido a que la atención se focaliza a cierto punto que consideramos muy importante, el efecto de la visión túnel puede pasar desapercibido, sin embargo no cabe duda de que puede afectarnos de múltiples y variadas formas, por ejemplo:

- “Si estamos a la mitad de un complicado videojuego, es muy posible que no notemos a la persona a nuestra lado”
- “Hay buzos que se concentran tanto en salir a la superficie que olvidan soltar los lastres de plomo que los sostienen bajo el agua”
- “En ocasiones, personas que huyen de un incendio empujan una puerta, cada vez con más fuerza, sin darse cuenta de que en realidad necesitan halarla”

Como podemos notar este efecto generalmente aumenta en situaciones de gran concentración o en las que la persona está sometida a estrés. Buscando otro contexto podríamos pensar otros ejemplos más comunes como llevar horas tratando de resolver un problema en el trabajo y no escuchar a otros mientras te hablan, o finalmente resolverlo y darte cuenta que la respuesta era más fácil de lo que pensabas.

Al leerlo y pensarlo puede que nos parezca gracioso (generalmente lo es) pero también puede ser peligroso porque lo mismo tiende a suceder cuando tenemos un problema. Nos concentramos tanto en ello que se convierte en lo único que hablamos y lo único que vemos, sin si quiera darnos cuenta que hay otras cosas valiosas en nuestras vidas que pueden compensar ese problema o que incluso pueden ayudarnos a resolverlo.

El día de hoy podemos afirmar que gozamos de la fortuna de vivir en un mundo de hermosos paisajes ¿Por qué cerrarnos a ello? Si ver hacia delante representa observar la meta, ver hacia los lados significa disfrutar del camino.

Ahora te pregunto nuevamente: ¿Alguna vez en tu vida has caminado de esta forma? Casi estoy segura de que tu respuesta puede haber cambiado. Cuando sientas que esto puede estar sucediéndote, ten cuidado de lo que pasas por alto.