<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jepser Bernardino &#187; web</title>
	<atom:link href="http://jepserbernardino.com/tag/desarrollo-web/feed/" rel="self" type="application/rss+xml" />
	<link>http://jepserbernardino.com</link>
	<description>diseño y desarrollo negocios en internet</description>
	<lastBuildDate>Tue, 08 May 2012 05:35:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Movistar y su servicio de Internet, Slowly</title>
		<link>http://jepserbernardino.com/vida/movistar-y-su-servicio-de-internet-slowly/</link>
		<comments>http://jepserbernardino.com/vida/movistar-y-su-servicio-de-internet-slowly/#comments</comments>
		<pubDate>Sun, 31 May 2009 17:43:11 +0000</pubDate>
		<dc:creator>Jepser</dc:creator>
				<category><![CDATA[vida]]></category>
		<category><![CDATA[internet]]></category>
		<category><![CDATA[queja]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://jepserbernardino.com/?p=418</guid>
		<description><![CDATA[Este artículo está dedicado a la empresa que me brinda servicio de Teléfono Celular e Internet. Siendo tan grande y con tanto dinero moviendose en esta compañía, no entiendo por qué no pueden tener un buen servicio.]]></description>
			<content:encoded><![CDATA[<p>Érase una vez&#8230; 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).<span id="more-418"></span></p>
<p>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.</p>
<p>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.</p>
<p>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 <a href="http://es.wikipedia.org/wiki/As%C3%ADncrono">asíncrona</a>.</p>
<p>En la realidad&#8230;</p>
<h4>Señal asquerosamente inestable</h4>
<div id="attachment_420" class="wp-caption aligncenter" style="width: 485px"><img class="size-full wp-image-420" title="ping2" src="http://jepserbernardino.com/wp-content/uploads/2009/05/ping2.jpg" alt="" width="475" height="256" /><p class="wp-caption-text">Un dia normal con movistar</p></div>
<div id="attachment_421" class="wp-caption aligncenter" style="width: 485px"><img class="size-full wp-image-421" title="ping_1" src="http://jepserbernardino.com/wp-content/uploads/2009/05/ping_1.jpg" alt="Otro dia con movistar" width="475" height="256" /><p class="wp-caption-text">Otro dia con movistar</p></div>
<p>Han pasado 2 meses y medio desde que adquirí el servicio y me digo &#8220;Que estúpido fue el día que adquirí Speedy&#8221;, realmente es una lata.</p>
<p>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.</p>
<p>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 &#8220;arreglaran&#8221;, esperé 30 minutos y me lo devolvieron; esto empeoró la situación.</p>
<p>¡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 &#8220;agarra señal&#8221;.</p>
<p>Entre los problemas que tengo con movistar estan los siguientes:</p>
<p>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.</p>
<h4>Pings altísimos</h4>
<div id="attachment_422" class="wp-caption aligncenter" style="width: 494px"><img class="size-full wp-image-422" title="ping-alto" src="http://jepserbernardino.com/wp-content/uploads/2009/05/ping-alto.jpg" alt="Hey aqui un poco de los hermosos pings" width="484" height="79" /><p class="wp-caption-text">Hey aqui un poco de los hermosos pings</p></div>
<p>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 <em>bajo</em> muchos archivos es que presento lentitud, que el me recomienda que no<em> baje</em> 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.</p>
<p>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&#8230; ¡¡Qué está pasando!! Mi internet es &#8220;ilimitado&#8221; y me limitan a navegar para que se mejore mi servicio. En que mundo estamos, por favor.</p>
<h4>Lo demás</h4>
<p>Ya me bloquearon mi línea porque hacía <em>llamadas por broma</em> a movistar. No entiendo, es acaso que llamar porque no tengo servicio y pedir soporte técnico es llamar por broma&#8230;</p>
<p>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:</p>
<ul>
<li>Apague el módem</li>
<li>Enciéndalo, le hemos aplicado un cierre de sesión</li>
<li>Entre a 192.168.0.1 borre los campos y escríba bla..bla.. bla&#8230; (lo mismo que está actualmente el en módem)</li>
<li>Dele Save, luego por favor navegue a Yahoo! (siempre dicen yahoo)</li>
<li>Ya le sirve&#8230;</li>
</ul>
<p>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.</p>
<p>Primero me hizo &#8220;configurar el módem&#8221;, 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&#8230; ¡WTF!</p>
<p>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&#8230;</p>
<p>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&#8230; ¡WTF!</p>
<p>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 <a href="http://www.sebastianoliva.com">Ixim</a> 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.</p>
<p>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.</p>
<p>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.</p>
]]></content:encoded>
			<wfw:commentRss>http://jepserbernardino.com/vida/movistar-y-su-servicio-de-internet-slowly/feed/</wfw:commentRss>
		<slash:comments>50</slash:comments>
		</item>
		<item>
		<title>Instalación de WAMP para Windows Vista</title>
		<link>http://jepserbernardino.com/idea/instalacion-de-wamp-para-windows-vista/</link>
		<comments>http://jepserbernardino.com/idea/instalacion-de-wamp-para-windows-vista/#comments</comments>
		<pubDate>Sat, 02 May 2009 02:17:13 +0000</pubDate>
		<dc:creator>Jepser</dc:creator>
				<category><![CDATA[idea]]></category>
		<category><![CDATA[wamp]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://jepserbernardino.com/?p=253</guid>
		<description><![CDATA[Ahora instalaremos WAMP (Windows + Apache + MySQL + PHP) en Windows Vista, agregaremos subdominios para poder trabajar en varios proyectos a la vez.]]></description>
			<content:encoded><![CDATA[<p>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).<span id="more-253"></span></p>
<p>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&#8230; al final el servidor se había &#8220;instalado correctamente&#8221;.</p>
<p>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):</p>
<ul>
<li><a title="En desarrollo web" href="http://www.desarrolloweb.com/faq/no-funciona-wamp-server2-vista.html">http://www.desarrolloweb.com/faq/no-funciona-wamp-server2-vista.html</a></li>
<li><a title="En la página oficial" href="http://www.wampserver.com/phorum/read.php?2,48338">http://www.wampserver.com/phorum/read.php?2,48338</a></li>
<li><a title="En Yahoo anwers" href="http://es.answers.yahoo.com/question/index?qid=20081031081211AA6GWPb">http://es.answers.yahoo.com/question/index?qid=20081031081211AA6GWPb</a></li>
<li><a title="EN php freaks" href="http://www.phpfreaks.com/forums/index.php?topic=169417.0">http://www.phpfreaks.com/forums/index.php?topic=169417.0</a></li>
<li>y la lista crece&#8230;</li>
</ul>
<p>Pero no es necesario cambiar el puerto al 8080 o al 81 o desintalar WAMP o cambiar de SO (jeje)&#8230; Simplemente de saber que está haciendo Vista con nuestro pobre WAMP.<!--more--></p>
<p><strong><em>Nota. </em></strong></p>
<ul>
<li><a title="Bajar WAMP" href="http://www.wampserver.com/en/download.php"><strong>Decarguemos WAMP</strong></a></li>
<li><strong><em>No arranques el WAMP antes de hacer lo siguiente, ¡luego lo haremos muchas veces!</em></strong></li>
<li><strong>No tengas el Skype a la hora de iniciar tu servidor (lo del puerto 80 y el conflicto es cierto)</strong></li>
<li><strong>Desinstala ISS o deshabilitalo, también hace conflicto por ser un servidor web (de Microsoft)</strong></li>
<li><strong>Para que los cambios sean efectivos, cada vez que hagamos uno, debemos reiniciar el WAMP (si lo tenemos corriendo)</strong></li>
<li><strong>Estoy utilizando WAMP 2.0 C, la H es la última pero tiene problemas el PHP.<br />
</strong></li>
</ul>
<h2>1. Darle permisos a los Usuarios para poder componer el problema</h2>
<p><img class="aligncenter size-full wp-image-254" title="permisos-usuarios" src="http://jepserbernardino.com/wp-content/uploads/2009/05/permisos-usuarios.jpg" alt="permisos-usuarios" width="500" height="193" /></p>
<p>Esto es fácil, simplemente vayamos a <em>Panel de Control · Cuentas de usuarios · Activar o Desactivar el Control de cuentas de usuario (UAC, en sus siglas en inglés)</em> y la desactivamos.</p>
<p>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.</p>
<h2>2. Localizar el archivo &#8220;hosts&#8221;</h2>
<p>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.</p>
<p>Vamos a <em>Equipo · Disco local · Windows · System 32 · Drivers · etc</em> , estando alli abrimos el archivo hosts (yo lo hago con DreamWeaver jeje), hasta abajo vamos a encontrar algo así:</p>
<pre>::1             localhost</pre>
<h4>Sobre este archivo</h4>
<p>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).</p>
<p>Ahora lo que haremos será eliminar el ::1 y escribir:</p>
<pre>127.0.0.1       localhost</pre>
<p>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).</p>
<h4>Por si no pueden guardar el archivo y les dice que no tienen permisos aún</h4>
<p>Habilitar permisos a la carpeta. Deben de ir a la carpeta donde se ubica el archivo host <em>(Equipo · Disco local · Windows · System 32 · Drivers · etc)</em>, dar clic derecho · Propiedades y deshabilitar el modo de lectura, a todos lo archivos y a la caperta misma.</p>
<p>Otra, desabilitar el firewall para sitios locales. <em>Panel de Control · Firewall de Windows · Cambiar la Configuración · Opciones avanzadas</em> y deshabilitan Conexión de Área Local.</p>
<p><img class="aligncenter size-full wp-image-258" title="cambiar-firewall" src="http://jepserbernardino.com/wp-content/uploads/2009/05/cambiar-firewall.jpg" alt="cambiar-firewall" width="500" height="310" /></p>
<p><strong>Allí estamos por si solo quieres tener un dominio local&#8230;</strong></p>
<h2 style="text-align: left;">3. Cambiando mi root en el servidor</h2>
<p style="text-align: left;">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, <em>Disco Local · WAMP · www</em>, sino que tener nuestra propia carpeta, en este caso vamos a crear una que se llame server en el Disco local <em>(C:/server)</em> y allí colocaré cuanta cosa, separada del servidor.</p>
<p style="text-align: left;">Ahora configuraremos el httpd de Apache, vamos a <em>Disco Local (o donde hayamos guardado WAMP) · bin · apache · Apache2.2.11 · conf</em> y econtraremos el archivo http.conf, nos vamos a la línea 178 (o buscamos DocumentRoot &#8220;el directorio base&#8221;) y 205 (o buscamos &lt;Directory &#8220;el directorio base&#8221;&gt;, 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.</p>
<p style="text-align: left;">¡Falta aún!</p>
<h2 style="text-align: left;">4. Agregando los dominios virtuales</h2>
<p style="text-align: left;">Siempre el en archivo httpd, buscamos en la línea 465:</p>
<pre style="text-align: left;"># Virtual hosts
Include conf/extra/httpd-vhosts.conf</pre>
<p style="text-align: left;">Y si está comentada la línea (tiene #) la descomentamos, como está arriba debe de quedar. Aquí habilitamos los dominos virtuales (loqueyoquiera.localhost).</p>
<p style="text-align: left;">Nos vamos a <em>Disco Local (o donde hayamos guardado WAMP) · bin · apache · Apache2.2.11 · conf · extra (que cansado)</em> 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í:</p>
<p style="text-align: left;"><img class="aligncenter size-full wp-image-260" title="vhost-antes" src="http://jepserbernardino.com/wp-content/uploads/2009/05/vhost-antes.jpg" alt="vhost-antes" width="500" height="272" /></p>
<p style="text-align: left;">
<p style="text-align: left;">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).</p>
<p style="text-align: left;"><img class="aligncenter size-full wp-image-261" title="vhost-despues" src="http://jepserbernardino.com/wp-content/uploads/2009/05/vhost-despues.jpg" alt="vhost-despues" width="500" height="387" /></p>
<p style="text-align: left;">
<p style="text-align: left;">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.</p>
<p style="text-align: left;">Sí algo no quedó claro, no se preocupen, estamos para ayudarnos entre todos.</p>
<p style="text-align: left;"><img class="aligncenter size-full wp-image-262" title="sirver-wamp" src="http://jepserbernardino.com/wp-content/uploads/2009/05/sirver-wamp.jpg" alt="sirver-wamp" width="500" height="145" /></p>
]]></content:encoded>
			<wfw:commentRss>http://jepserbernardino.com/idea/instalacion-de-wamp-para-windows-vista/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>960 Grid, un framework para CSS</title>
		<link>http://jepserbernardino.com/idea/960-grid-un-framework-para-css/</link>
		<comments>http://jepserbernardino.com/idea/960-grid-un-framework-para-css/#comments</comments>
		<pubDate>Sun, 29 Mar 2009 06:42:34 +0000</pubDate>
		<dc:creator>Jepser</dc:creator>
				<category><![CDATA[idea]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[diseño web]]></category>
		<category><![CDATA[grid 960]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://jepserbernardino.com/?p=188</guid>
		<description><![CDATA[Quiero el código Ver demo 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 es un framework de CSS que nos facilita la vida en un mil por ciento [...]]]></description>
			<content:encoded><![CDATA[<ul class="code">
<li><a href="/wp-content/uploads/codigo/960grid_jepserbernardino-com.zip">Quiero el código</a>
<li>
<li><a href="http://demos.jepserbernardino.com/960-grid//">Ver demo</a>
<li>
</ul>
<p>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.<span id="more-188"></span></p>
<h4>Para empezar, ¿Qué es 960 Grid?</h4>
<p><a title="960 Grid System" href="http://www.960.gs">960 Grid</a> 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 &#8220;estándar&#8221; 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.</p>
<h4>Conociendo el grid</h4>
<p>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 <a title="Demo Page" href="http://www.960.gs/demo.html">página demo</a>. Podrán observar una gama de combinaciones para darse una idea de como trabaja este framework.</p>
<p>Veremos ahora como es que se divide el grid en una configuración de 12 columnas:</p>
<ol>
<li>60px</li>
<li>140px</li>
<li>220px</li>
<li>300px</li>
<li>380px</li>
<li>460px</li>
<li>540px</li>
<li>620px</li>
<li>700px</li>
<li>780px</li>
<li>860px</li>
<li>940px</li>
</ol>
<p>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í:<em> grid_xx</em> donde<em> &#8220;xx&#8221;</em> es el numero de la lista.  Pero,¿Cómo 960 grid sabe sí utilizo 12 o 16 columnas? Simple, tiene una clase <em>.container_yy</em>, donde <em>&#8220;yy&#8221;</em> es el numero de columnas que voy a utilizar.</p>
<p>Basta de palabrería, vamos a crear una página web con utilizando este framework y 12 columnas.</p>
<h4>Maquetando con 960 Grid</h4>
<div id="attachment_195" class="wp-caption aligncenter" style="width: 310px"><a class="thickbox" href="http://jepserbernardino.com/wp-content/uploads/2009/03/grid.png"><img class="size-medium wp-image-195" title="grid" src="http://jepserbernardino.com/wp-content/uploads/2009/03/grid-300x152.png" alt="Grid de 12 columnas" width="300" height="152" /></a><p class="wp-caption-text">Grid de 12 columnas</p></div>
<p>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).</p>
<p>Hay unos puntos importantes antes:</p>
<ul>
<li>IMPORTANTE, debemos saber al menos lo basico en xhtml y css</li>
<li>Incluir text, reset y 960 css&#8217;s en el html</li>
<li>Hay que colocar un <em>&lt;div class=&#8221;clear&#8221;&gt;&lt;/div&gt;</em> despues de cada fila, esto se debe a que cada columna está con un<em> float:left</em></li>
<li>Usaremos los id para diferenciar un div de otro</li>
</ul>
<div id="attachment_201" class="wp-caption aligncenter" style="width: 260px"><a class="thickbox" href="http://jepserbernardino.com/wp-content/uploads/2009/03/grids-columnas.jpg"><img class="size-medium wp-image-201" title="grids-columnas" src="http://jepserbernardino.com/wp-content/uploads/2009/03/grids-columnas-250x300.jpg" alt="Así esta dividido nuestro layout en la parte del cotenido" width="250" height="300" /></a><p class="wp-caption-text">Así esta dividido nuestro layout en la parte del contenido</p></div>
<p>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!</p>
<pre class="brush: html">&lt;div id="top"&gt;
    &lt;!--empiezo con mi contenedor de 12 columnas--&gt;
    &lt;div class="container_12"&gt;
        &lt;!--agrego un div que va ha estar ubicado 720px a la derecha y va tener un ancho de 220px--&gt;
        &lt;div class="grid_3 prefix_9"&gt;
        &lt;/div&gt;&lt;!--grid_3--&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;!--container_12--&gt;
&lt;/div&gt;&lt;!--top--&gt;
&lt;!--luego creo otro contenedor de 960px--&gt;
&lt;div class="container_12" id="bodyMain"&gt;
    &lt;!--agrego un div de 960px, recordemos que son 940px los que podemos utilizar, por los márgenes--&gt;
    &lt;div class="grid_12" id="header"&gt;
        &lt;a id="logo" title="Vos-Vos" href="#"&gt;&lt;/a&gt;
        &lt;img id="ciudad-logo" alt="VV City" src="images/ciudad-logo.gif"/&gt;
    &lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;!--hago lo mismo para el menu, ya que se despliega por todo el layout--&gt;
    &lt;div class="grid_12" id="menu"&gt;
    &lt;/div&gt;&lt;!--menu--&gt;
    &lt;!--lo mismo ... observen que cada uno de los grid_12 tienen un ID que les da su estilo--&gt;
    &lt;div class="grid_12" id="contentMain"&gt;
        &lt;!--separo en una columna de 620px y le agrego el alpha porque es la primera columna--&gt;
    	&lt;div class="grid_8 alpha"&gt;
            &lt;!--divido en 2, como se dan cuenta la primera tiene alpha--&gt;
            &lt;div class="grid_4 alpha"&gt;
            &lt;/div&gt;
            &lt;!--la ultima tiene el omega--&gt;
            &lt;div class="grid_4 omega"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--tenia una columna de 620px, esta es de los restantes 940px--&gt;
        &lt;div class="grid_4 omega"&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;!--contentMain--&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;!--como se dan cuenta, aquí muevo mi div de 300px o grid_4 ocho columnas a la derecha (640px)--&gt;
    &lt;div class="grid_4 prefix_8" id="footer"&gt;
    &lt;/div&gt;&lt;!--footer--&gt;
&lt;/div&gt;&lt;!--bodyMain--&gt;</pre>
<p>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, <em>llamado mi-estilo.css</em>:</p>
<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>
<p>Ya tenemos la parte superior y el icono de rss en, ahora agregamos los elementos del menú:</p>
<pre class="brush: html">&lt;div class="grid_12" id="menu"&gt;
        	&lt;ul&gt;
            	&lt;li&gt;Portada&lt;/li&gt;
                &lt;li&gt;Noticias&lt;/li&gt;
                &lt;li&gt;Miembros&lt;/li&gt;
                &lt;li&gt;Promociones&lt;/li&gt;
                &lt;li&gt;Cont&amp;aacute;ctanos&lt;/li&gt;
            &lt;/ul&gt;
    &lt;/div&gt;&lt;!--menu--&gt;</pre>
<p>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:</p>
<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>
<p>Es hora de darle estilos al footer,  simplemente haremos que tenga la licencia <a title="Creative Commons" href="http://creativecommons.org/" target="_blank">Creative Commons,</a> un simple texto.</p>
<pre class="brush: html">&lt;div class="grid_4 prefix_8" id="footer"&gt;
        &lt;p&gt;www.vos-voz.com. Licencia por Creative Commons.&lt;/p&gt;
    &lt;/div&gt;&lt;!--footer--&gt;</pre>
<p>Inspírence ustedes en agregarle el famoso <a title="Solo para texto..." href="http://lipsum.com" target="_blank">Lorem</a> 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!</p>
<div id="attachment_193" class="wp-caption aligncenter" style="width: 260px"><a class="thickbox" href="http://jepserbernardino.com/wp-content/uploads/2009/03/screenshot.jpg"><img class="size-medium wp-image-193" title="Vos-Voz ScreenShoot" src="http://jepserbernardino.com/wp-content/uploads/2009/03/screenshot-250x300.jpg" alt="Así quedará el layout" width="250" height="300" /></a><p class="wp-caption-text">Así quedará el layout</p></div>
<h4>Conociendo las clases</h4>
<ul>
<li><strong>container_yy :</strong> Donde &#8220;yy&#8221; puede ser 12 o 16, que son el número de columnas que trabajaremos.</li>
<li><strong>grid_xx:</strong> Donde &#8220;xx&#8221; será la cantidad de columnas que utilizaremos para algún proposito, la idea es formar 12 columnas en total, Ej. tengo una columna &#8220;grid_8&#8243; y luego otra &#8220;grid_4&#8243;, entonces ya tengo mis 12 columnas.</li>
<li><strong>prefix_xx:</strong> Este se utiliza para mover &#8220;xx&#8221; 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.</li>
<li><strong>suffix_xx:</strong> 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.</li>
<li><strong>alpha:</strong> 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.</li>
<li><strong>omega:</strong> 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.</li>
</ul>
<h4>Para finalizar</h4>
<p>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).</p>
<ul class="code">
<li><a href="/wp-content/uploads/codigo/960grid_jepserbernardino-com.zip">Quiero el código</a>
<li>
<li><a href="http://demos.jepserbernardino.com/960-grid//">Ver demo</a>
<li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://jepserbernardino.com/idea/960-grid-un-framework-para-css/feed/</wfw:commentRss>
		<slash:comments>48</slash:comments>
		</item>
		<item>
		<title>Empezamos!!!</title>
		<link>http://jepserbernardino.com/idea/empezamos/</link>
		<comments>http://jepserbernardino.com/idea/empezamos/#comments</comments>
		<pubDate>Sun, 08 Mar 2009 04:15:59 +0000</pubDate>
		<dc:creator>Jepser</dc:creator>
				<category><![CDATA[idea]]></category>
		<category><![CDATA[inicio]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://jepserbernardino.com/?p=157</guid>
		<description><![CDATA[Aquí se resume todo... Este es mi nuevo sitio web y espero con ayuda de Dios romper un paradigma... ¿Cúal? Guatemala puede... yo puedo.]]></description>
			<content:encoded><![CDATA[<p>Tenía un post antes; pero por errores allí, lo borré :S</p>
<p>Este es mi nuevo sitio, espero que les guste y se sientan a gusto en él. Trabajé en una navegación intuitiva y un diseño simple pero fresco. Que fuera liviano para el servidor como para el cliente (browser).</p>
<h4>En pocas palabras tenemos</h4>
<ul>
<li><em>Que Hago</em>, en esta sección describo los servicios que ofrezco. Explico a grandes rasgos que es lo que abarco en cuanto a soluciones en internet.</li>
<li><em>Portafolio</em>, trabaje en esta parte para que brindara un panorama de mi trabajo en el proyecto y mostrara un thumbnail. Que brindara la opción de poder conocer el caso completo y si existiera el caso de estudio.</li>
<li><em>Mi blog!</em>, esta sección tendrá la mayor parte de información&#8230; Como todo blog tendrá sus artículos, lo utilizaré para escribir sobre mi vida, mi trabajo y por supuesto; artículos web. Pienso que sería bueno compartir lo poco que sé, y juntos progresemos.</li>
<li><em>Faq&#8217;s</em>, Creo en que brindarle información clara y tratando de solucionar las preguntas que mi futuro cliente pueda tener es bueno. Por eso trato de responder las dudas que puedan surgir en el camino, así podremos adelantar el proceso y tener un resultado más eficiente y dudas más específicas&#8230; ¿Qué tal?</li>
<li><em>Contacto</em>, creo que aquí solo diré&#8230; <a title="Contactame!" href="http://jepserbernardino.com/contacto">¡ESCRIBEME!</a> Trato de responder lo antes posible y también respondo los correos que me mandes.</li>
</ul>
<h4>Algo más</h4>
<p>Mi sitio está creado en <a title="Wordpress" href="http://wordpress.org">WordPress</a> en la versión más actualizada, con un tema diseñado y desarrollado desde cero. Los efectos están creados con el framework <a title="Jquery" href="http://jquery.com">Jquery</a>. Es así como nacen los sitios que creo. Espero que frecuentes mi sitio, éxitos y siempre a emprender!</p>
]]></content:encoded>
			<wfw:commentRss>http://jepserbernardino.com/idea/empezamos/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

