<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>noth</title>
	
	<link>http://www.noth.es</link>
	<description>........... Pronto sabremos más .............</description>
	<pubDate>Sat, 05 Sep 2009 13:51:38 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<creativeCommons:license>http://creativecommons.org/licenses/by/2.0/</creativeCommons:license><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/nothnk" type="application/rss+xml" /><feedburner:browserFriendly>This is an XML content feed. It is intended to be viewed in a newsreader or syndicated to another site, subject to copyright and fair use.</feedburner:browserFriendly><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com" /><item>
		<title>mis plugins en github.com</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/hwGsUh1_N_8/</link>
		<comments>http://www.noth.es/2009/09/05/mis-plugins-en-githubcom/#comments</comments>
		<pubDate>Sat, 05 Sep 2009 13:51:38 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[control versiones]]></category>

		<category><![CDATA[jquery]]></category>

		<category><![CDATA[plugin]]></category>

		<category><![CDATA[plugins]]></category>

		<category><![CDATA[proyecto]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=543</guid>
		<description><![CDATA[github.com es un servicio online donde puedes crear tus propios repositorios de archivos para tus aplicaciones, modulos, plugins etc. De esta forma puedes mantener tus plugins muy fácilmente,  además de ahorrarte en ancho de banda en tu hosting.

Pues bien, hoy  me he registrado (nothnk) y he subido los dos plugins que tenía publicados en este [...]]]></description>
			<content:encoded><![CDATA[<p><a href="https://github.com/">github.com</a> es un servicio online donde puedes crear tus propios repositorios de archivos para tus aplicaciones, modulos, plugins etc. De esta forma puedes mantener tus plugins muy fácilmente,  además de ahorrarte en ancho de banda en tu hosting.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/09/github-nothnk.png"><img class="size-full wp-image-544 aligncenter" title="github-nothnk" src="http://www.noth.es/wp-content/uploads/2009/09/github-nothnk.png" alt="github-nothnk" width="261" height="221" /></a></p>
<p>Pues bien, hoy  me he registrado (<a href="http://github.com/nothnk">nothnk</a>) y he subido los dos plugins que tenía publicados en este blog, tengo unos cuantos más no sólo de Jquery, que con la facilidad que ofrece este servicio publicaré y mantendré.</p>
<p>De momento sólo están disponibles el<a href="http://www.noth.es/2007/11/24/actualizacion-del-jquery-link-version-03/"> jquery-links </a>y el <a href="http://www.noth.es/2007/11/25/actualizacion-del-jquery-gallery-v-0-2/">jquery-gallery</a> y sin las modificaciones pendientes.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=hwGsUh1_N_8:swOVUXoBrgA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=hwGsUh1_N_8:swOVUXoBrgA:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/hwGsUh1_N_8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/09/05/mis-plugins-en-githubcom/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/09/05/mis-plugins-en-githubcom/</feedburner:origLink></item>
		<item>
		<title>CSS Hack sólo para Chrome</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/m9tT5F1hrkM/</link>
		<comments>http://www.noth.es/2009/09/05/css-hack-solo-para-chrome/#comments</comments>
		<pubDate>Sat, 05 Sep 2009 08:00:11 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[css]]></category>

		<category><![CDATA[hack]]></category>

		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=536</guid>
		<description><![CDATA[A veces nos es inevitable tener que recurrir a estos hacks, por alguna razón  los navegadores se empeñan en no cumplir con un mismo standard  y lo que podemos estar viendo correctamente en unos, en otros se ve fatal. No estoy hablando de los Internet explorer, me refiero ya a navegadores decentes como Firefox, Opera, [...]]]></description>
			<content:encoded><![CDATA[<p>A veces nos es inevitable tener que recurrir a estos hacks, por alguna razón  los navegadores se empeñan en no cumplir con un mismo standard  y lo que podemos estar viendo correctamente en unos, en otros se ve fatal. No estoy hablando de los Internet explorer, me refiero ya a navegadores decentes como Firefox, Opera, Safari, Chrome.</p>
<p>Pues Bien, esta semana me he encontrado en el trabajo con un problema de maquetación en google chrome (sólo se descolocaba unos controles en un slider) y buscando dí con la siguiente solución, que aunque es un poco enrevesada funciona perfectamente.</p>
<blockquote><p>@media screen and (-webkit-min-device-pixel-ratio:0)</p>
<p>{<br />
//colocamos las reglas css</p>
<p>.next a { margin-top: 15px;}<br />
.back a { margin-top: 15px;}<br />
}</p></blockquote>
<p>Lo encontré en el blog de <a href="http://acidmartin.wordpress.com/2009/07/30/hack-for-safari-and-google-chrome-redux/">Martin Ivanov</a> que me ha sorprendido gratamente y ya está en mi Reader. Este hack viene a sustituir al viejo <strong>body:nth-of-type(1) Selector</strong> que si bien antes sólo lo interpretaba el Chrome, ahora ya lo consiguen interpretar el Firefox 3.5 y el Opera9.2+, lo que nos hace ver el peligro de usar estas técnicas, así que  el consejo es:<strong> intentar evitar el uso de CSS hacks todo lo que podamos.</strong></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=m9tT5F1hrkM:4HOY-zo-nFI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=m9tT5F1hrkM:4HOY-zo-nFI:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/m9tT5F1hrkM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/09/05/css-hack-solo-para-chrome/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/09/05/css-hack-solo-para-chrome/</feedburner:origLink></item>
		<item>
		<title>Tutorial Magento - Entendiendo su estructura</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/jLON7j0jbrg/</link>
		<comments>http://www.noth.es/2009/08/29/tutorial-magento-entendiendo-su-estructura/#comments</comments>
		<pubDate>Sat, 29 Aug 2009 11:00:35 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[e-comerce]]></category>

		<category><![CDATA[magento]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=500</guid>
		<description><![CDATA[Que es Magento y para que nos puede servir
Magento  es un CMS para la creación de tiendas virtuales, está escrito con ZEND FAMEWORK de base y uno de sus puntos fuertes es que tiene la posibilidad de manejar varias tiendas a la vez con una única instalación, de manera que entre sus distintas tiendas puedan [...]]]></description>
			<content:encoded><![CDATA[<h3>Que es Magento y para que nos puede servir</h3>
<p>Magento  es un CMS para la creación de tiendas virtuales, está escrito con ZEND FAMEWORK de base y uno de sus puntos fuertes es que tiene la posibilidad de manejar varias tiendas a la vez con una única instalación, de manera que entre sus distintas tiendas puedan compartir la información de sus clientes. Un ejemplo puede ser una multinacional de Opticas, esto hace verdaderamente potente a Magento.</p>
<h3>Estructura en Magento</h3>
<p>La estructura de Magento se basa en dos grupos importantes:</p>
<ol>
<li>Website</li>
<li>Tienda (store)  con sus vistas de tienda ( store views)</li>
</ol>
<h4>Website</h4>
<p>El website para Magento lo podríamos definir como una compañía o empresa que a su vez esta tiene tiendas repartidas o simplemente es una Compañía que tiene una única tienda.</p>
<h4>Tienda</h4>
<p>Las tiendas para Magento (store) son una colección de vistas de tienda (store views) al menos siempre tiene que tener una vista de tienda, digamos un público objetivo por idioma.</p>
<p>Ejemplo un tienda que solo venda productos para un publico objetivo de habla Inglesa, con lo cual sólo tendrá un  store view y será en Inglés.</p>
<p>Magento puede ser multi-compañía, por lo cual dentro de una misma instalación podemos tener muchos Websites y estos a su vez tener muchas tiendas (stores) que tengan distinto publico objetivo ( store views) idiomas.</p>
<p>Por lo tanto Magento permite tres escenarios</p>
<ol>
<li>Un empresa con sus múltiples tiendas<img class="alignnone size-full wp-image-501" title="es_terminology-scenario1" src="http://www.noth.es/wp-content/uploads/2009/08/es_terminology-scenario1.gif" alt="es_terminology-scenario1" width="580" height="150" /></li>
<li>Varias empresas con 1 o mas tiendas y con 1 o más vistas de tienda ( idiomas)<img class="alignnone size-full wp-image-504" title="es_terminology-scenario21" src="http://www.noth.es/wp-content/uploads/2009/08/es_terminology-scenario21.gif" alt="es_terminology-scenario21" width="580" height="150" /></li>
<li>Un empresa con una única tienda<img class="alignnone size-full wp-image-505" title="es_terminology-scenario31" src="http://www.noth.es/wp-content/uploads/2009/08/es_terminology-scenario31.gif" alt="es_terminology-scenario31" width="580" height="150" /></li>
</ol>
<h3>Interface</h3>
<p>Tanto los websites como las tiendas pueden llevar sus  temas personalizados, Magento incorpora el aspecto de interfaz, que es una colección de temas que determinan el aspecto visual y funcionalidades del frontend de tu tienda. Una interfaz puede ser asignada tanto en el nivel de Website y/o en el nivel de Vista de Tienda por medio del panel de administración.</p>
<h3>Temas</h3>
<p>Un tema es un conjunto de archivos de organizacion visual (Layouts), plantillas (Templates) y/o estilos (Skins) que dan la apariencia a nuestra tienda. Magento tiene dos grandes tipos:</p>
<h3><a id="tema_predeterminado_default_theme" name="tema_predeterminado_default_theme">Tema predeterminado (Default Theme)</a></h3>
<p>Cada interfaz viene con un tema predeterminado (por defecto) llamado “default”, el cual es el tema principal de una interfaz. Cuando asignas una interfaz a una tienda, la aplicación automáticamente busca el tema con el nombre “default” y lo carga en el front-end. Para personalizar el diseño de tu tienda, puedes modificar este tema o crear un tema no predeterminado (Non-default Theme) adicional y cargarlo junto con el default. El tema “default” debe contener todos los “layouts” requeridos, “templates” y “skins” para funcionar sin errores y, por lo tanto, es el tema más bajo en la jerarquía de temas.</p>
<h3><a id="tema_no_predeterminado_non-default_theme" name="tema_no_predeterminado_non-default_theme">Tema no predeterminado (Non-default Theme)</a></h3>
<p>Un tema no predeterminado o non-default puede contener tantos o tan pocos archivos como necesites. Este tipo de tema está pensado para darle un diseño de temporada a una tienda sin tener que recrear todos los archivos por completo. Creando unas pocas imágenes y actualizando algún archivo de estilo en <acronym title="Cascading Style Sheets">CSS</acronym>, puedes hacer que tu tienda deje verse como siempre, para convertirse, por ejemplo, en una tienda adornada para la temporada de Navidad.</p>
<h3>Estructura de un tema</h3>
<h4><a id="layouts_estructuras" name="layouts_estructuras">Layouts (estructuras):</a></h4>
<div class="level4">
<p>Ubicado en <code>“app/design/frontend/your_interface/your_theme/layout/”</code>. Estos son archivos <acronym title="Extensible Markup Language">XML</acronym> que definen la estructura de bloques para diferentes páginas así como controlan la información META y la codificación de páginas.</p>
<h4>Templates (plantillas)</h4>
</div>
<div class="level4">
<p>Ubicados en <code>“app/design/frontend/your_interface/your_theme/template/”</code>. Son archivos PHTML que contienen marcas <acronym title="Extensible HyperText Markup Language">XHTML</acronym> y cualquier código <acronym title="Hypertext Preprocessor">PHP</acronym> necesario para crear la lógica de la presentación visual.</p>
<h4>Skins (máscaras)</h4>
</div>
<div class="level4">
<p>Ubicados en <code>“skin/frontend/your_interface/your_theme/”</code>. Son imágenes, estilos en <acronym title="Cascading Style Sheets">CSS</acronym> y archivos de Javascript para bloques específicos que complementan tus <acronym title="Extensible HyperText Markup Language">XHTML</acronym>.</p>
<h3>Bloques</h3>
<p>Magento distingue entre dos tipos de bloque los estructurales (para el layout) y los bloques de contenido (datos)</p>
<p><img class="alignnone size-full wp-image-509" title="magento-bloques" src="http://www.noth.es/wp-content/uploads/2009/08/magento-bloques.jpg" alt="magento-bloques" width="570" height="427" /></p>
<p>Más información <a href="http://www.magentocommerce.com/wiki/groups/201/traduccion._guia_de_diseno_para_magento">http://www.magentocommerce.com/wiki/groups/201/traduccion._guia_de_diseno_para_magento</a></div>
<h3>Arquitectura de Magento</h3>
<p>Magento es un CMS que se puede adaptar a todo tipo de tiendas, esta flexibilidad hace que cada desarrollo pueda necesitar hacer cambios en determinados componentes. El problema de hacer estos cambios es que si posteriormente saliese una actualización deberíamos adaptar ese componente a nuestros cambios y así progresivamente. Magento tiene una estructura para solucionar este problema.</p>
<p>En el directorio app/code ( codigo de la aplicación) Magento muestra 3 carpetas que son:</p>
<ol>
<li><strong>core -</strong> es el nucleo de Magento <strong>( esto nunca se debería de tocar)</strong></li>
<li><strong>comunnity</strong> - contiene todos los componentes que nos bajamos de terceras persona o del Magento Connect</li>
<li><strong>local</strong> - Son nuestros propios componentes y es aquí donde debemos modificar cualquier elemento que necesitemos, al estar basado en Zend tenemos a nuestra disposición la herencia de clases,  mediante extensiones podremos modificar lo que necesitemos.</li>
</ol>
<h3>Creando nuestra primer proyecto en Magento</h3>
<p>Como ya habíamos explicado tenemos diferentes escenarios, vamos a crear el ejemplo más común el <strong>escenario 3</strong>. Crear una compañia que tiene una tienda para un publico objetivo ( español).  Lo primero será crear nuestra compañia ( website). Para realizar esto debemos crear los tres componentes mínimos, website , store y store view. Por defecto Magento tiene un website ya creado (Main Website) pero nosotros en este ejemplo vamos a crear uno nuevo.</p>
<h4>1 Creando nuestro website</h4>
<p>Nos dirigimos al panel de administración a la siguiente ruta.  <em><strong>Sistema &gt; gestionar tiendas &gt; crear un sitio web. </strong></em>Nos aparecerá el siguiente formulario con dos campos obligatorios:</p>
<ol>
<li>Nombre: del sitio web ( empresa) en mi caso Opticas Nervión.</li>
<li>Código: El código del sitio web debe contener sólo letras (a-z), números (0-9) o guiones bajos(_), el primer carácter debe ser una letra</li>
</ol>
<h4>2 Creando nuestra tienda ( store)</h4>
<p>Una vez guardado el website nos de vuelve a la pantalla donde podemos pulsar ahora en <em><strong>crear nueva tienda.</strong></em> Veremos el siguiente formulario</p>
<p><img class="alignnone size-full wp-image-513" title="magento-tienda" src="http://www.noth.es/wp-content/uploads/2009/08/magento-tienda.jpg" alt="magento-tienda" width="511" height="217" /></p>
<p>Debemos seleccionar a que sitio pertenece en este caso seleccionaremos el que estamos creando y le damos un nombre a nuestra tienda. En mi caso el mismo que el del website ya que no va a tener múltiples tiendas . <em>Opticas Nervión</em>. Por último, debemos escoger una categoría por defecto ya hablaremos de esto más adelante.</p>
<h4>3 Creando nuestra vista para la tienda ( store view)</h4>
<p>El último paso es indicar el público objetivo que magento lo divide por idiomas, por lo que debemos de crear una vista de tienda por cada idioma que se necesite. En nuestro caso vamos a crear una vista para el idioma español. pulsamos en <em><strong>crear nueva vista de tienda</strong></em> y veremos el siguiente formulario.</p>
<p><img class="alignnone size-full wp-image-514" title="magento-tienda-2" src="http://www.noth.es/wp-content/uploads/2009/08/magento-tienda-2.jpg" alt="magento-tienda-2" width="494" height="254" /></p>
<ul>
<li>En el select de tienda escogemos a cual de ellas será asociada la vista que estamos creando</li>
<li>En nombre , podemos colocar el nombre de la tienda</li>
<li>En código que es de uso interno lo normal es colocar el idioma que va usar esa tienda</li>
<li>En estado lo tenemos que dejar habilitado</li>
<li>Y por último colocamos el orden</li>
</ul>
<p>Ahora sólo hace falta indicarle a esta vista de tienda ( store view) el idioma que queremos que use, en nuestro caso el español, para ello nos vamos a <em><strong>Sistema &gt; configuración &gt; general </strong></em>y en el select de arriba a la izquierda tenemos que seleccionar nuestra vista de tienda.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-tienda-3.jpg"><img class="size-medium wp-image-517 aligncenter" title="magento-tienda-3" src="http://www.noth.es/wp-content/uploads/2009/08/magento-tienda-3-300x149.jpg" alt="magento-tienda-3" width="320" height="205" /></a></p>
<p>Una vez seleccionado a la derecha ya podemos escoger el locale ( el idioma) . Para cambiar los valores basta con pulsar sobre el checkox de usar sitio web y de esta forma podemos sobrescribir esos valores.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=jLON7j0jbrg:5BO4Piw3jCM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=jLON7j0jbrg:5BO4Piw3jCM:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/jLON7j0jbrg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/08/29/tutorial-magento-entendiendo-su-estructura/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/08/29/tutorial-magento-entendiendo-su-estructura/</feedburner:origLink></item>
		<item>
		<title>Instalacion de Magento  + primeros pasos</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/56RtdiAfzgM/</link>
		<comments>http://www.noth.es/2009/08/23/instalacion-de-magento-primeros-pasos/#comments</comments>
		<pubDate>Sun, 23 Aug 2009 11:00:11 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[e-comerce]]></category>

		<category><![CDATA[magento]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=478</guid>
		<description><![CDATA[En este post dejaré unos pequeños apuntes de como instalar este CMS para montarnos una tienda online.
Pre-instalación - consiguiendo los archivos fuentes y preparando el servidor
Lo primero será conseguir la ultima versión estable, para ello vamos a usar la opción versionada (svn) que Magento nos proporciona.
svn checkout http://svn.magentocommerce.com/source/branches/1.3
Cuando termine veremos la siguiente estructura de carpetas [...]]]></description>
			<content:encoded><![CDATA[<p>En este post dejaré unos pequeños apuntes de como instalar este CMS para montarnos una tienda online.</p>
<h3>Pre-instalación - consiguiendo los archivos fuentes y preparando el servidor</h3>
<p>Lo primero será conseguir la ultima versión estable, para ello vamos a usar la opción versionada (svn) que <a title="mageno svn" href="http://www.magentocommerce.com/svn">Magento </a>nos proporciona.</p>
<blockquote><p><code>svn checkout http://svn.magentocommerce.com/source/branches/1.3</code></p></blockquote>
<p>Cuando termine veremos la siguiente estructura de carpetas y ficheros.</p>
<p style="text-align: center;"><img class="size-full wp-image-479 aligncenter" title="imagen-magento" src="http://www.noth.es/wp-content/uploads/2009/08/imagen-magento.jpg" alt="imagen-magento" width="490" height="438" /></p>
<p>El siguiente paso será crearnos una Base de datos en nuestro servidor y configurar el apache para que apunte al directorio donde hemos hecho el checkout. En mi caso he creado un virtualhost con la siguiente configuración:</p>
<blockquote><p>&lt;VirtualHost *:80&gt;<br />
ServerAdmin quelicmATgmail.com<br />
DocumentRoot &#8220;D:\tiendas-online\magento&#8221;<br />
ServerName magento.qc<br />
ErrorLog  logs/magento.qc-error_log<br />
CustomLog logs/magento.qc-access_log common</p>
<p>&lt;Directory &#8220;D:\tiendas-online\magento&#8221;&gt;<br />
Options Indexes MultiViews<br />
AllowOverride All<br />
Order allow,deny<br />
Allow from all<br />
&lt;/Directory&gt;</p>
<p>&lt;/VirtualHost&gt;</p></blockquote>
<h3>Instalación de Magento</h3>
<p>Una vez configurado el servidor, si todo está correcto lanzamos el proyecto, en mi caso la dirección es <strong>http://magento.qc/</strong> que automáticamente redirige a <strong>http://magento.qc/index.php/install/</strong> veremos la siguiente pantalla.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/imagen-install-1.jpg"><img class="size-medium wp-image-481 aligncenter" title="imagen-install-1" src="http://www.noth.es/wp-content/uploads/2009/08/imagen-install-1-300x175.jpg" alt="imagen-install-1" width="300" height="175" /></a></p>
<p>La siguiente fase es la localización. Ponemos nuestro país, la franja horaria,  nuestra moneda y pasamos a la configuración.</p>
<p>En la configuración colocaremos el nombre de la base de datos para el proyecto, así como los datos del usuario para manejarla. Por último creamos nuestar cuenta de usuario administador para Magento y si todo ha ido bien nos mostrará la siguiente pantalla.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/imagen-install-2.jpg"><img class="size-medium wp-image-483 aligncenter" title="imagen-install-2" src="http://www.noth.es/wp-content/uploads/2009/08/imagen-install-2-300x128.jpg" alt="imagen-install-2" width="300" height="128" /></a></p>
<p>Es muy importante anotar el código que nos muestra, ya que Magento lo utiliza para cifrar las contraseñas, tarjetas de crédito etc. En este ejemplo mi código es <strong><big>bd4e077b7a816b601c736b2fe0e0a764</big></strong></p>
<p>Ahora, ya estamos listos para volver a nuestra tienda en su parte pública ( frontend), tendremos que ver la siguiente pantalla. En esta captura se muesta una instalación limpia de Magento, podemos instalarle una BD de prueba que nos ofrece Magento pero en este tutorial vamos a partir desde cero.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-limpio.jpg"><img class="size-medium wp-image-485 aligncenter" title="magento-limpio" src="http://www.noth.es/wp-content/uploads/2009/08/magento-limpio-300x185.jpg" alt="magento-limpio" width="300" height="185" /></a></p>
<h3>Completar la instalación</h3>
<p>Una vez hemos configurado e instalado nuestra copia de Magento, necesitamos hacer unos pasos para completar la instalación estos pasos son los siguientes:</p>
<ul>
<li>Magento Connect</li>
<li>Instalar el idioma español</li>
<li>Crear el tema</li>
</ul>
<h4>Magento Connect</h4>
<p>Magento Connect sirve para instalar módulos, extensiones, themes que pueden ser de gran utilidad y también para actualizar Magento, cada vez que existe una nueva versión de una forma realmente fácil e intuitiva. Para entrar a Magento Connect  debemos acceder al Administrador de nuestra tienda que será /admin  en mi caso <strong>http://magento.qc/admin</strong></p>
<p>Veremos el siguiente formulario y entraremos con la cuenta del usuario administrador que hemos creado en la instalación.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-admin.jpg"><img class="size-medium wp-image-487   aligncenter" title="magento-admin" src="http://www.noth.es/wp-content/uploads/2009/08/magento-admin-300x116.jpg" alt="magento-admin" width="300" height="116" /></a></p>
<p>Una vez dentro del panel de administración nos vamos a:  <strong>system &gt; Magento Connect &gt; Magento Connect Manager.</strong> Nos mostrará la siguiente pantalla, donde deberemos introducir la cuenta del administrador ( de nuevo), ya que únicamente este usuario es el que podrá acceder a gestionar las extensiones.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-connect.jpg"><img class="size-medium wp-image-488 aligncenter" title="magento-connect" src="http://www.noth.es/wp-content/uploads/2009/08/magento-connect-300x206.jpg" alt="magento-connect" width="300" height="206" /></a></p>
<p>Una vez logueados podemos instalar los módulos que necesitemos. Veremos la siguiente pantalla.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-connect-2.jpg"><img class="size-medium wp-image-489 aligncenter" title="magento-connect-2" src="http://www.noth.es/wp-content/uploads/2009/08/magento-connect-2-300x127.jpg" alt="magento-connect-2" width="300" height="127" /></a></p>
<p style="text-align: left;">El sistema de instalación de módulos, themes en Magento es muy sencillo, basta con mirar la web <a href="http://www.magentocommerce.com/magento-connect">http://www.magentocommerce.com/magento-connect</a> buscar lo que nos interesa y coger la key que debemos usar. Después en el cuadro de texto                <strong><em><label for="uri">Paste extension key to install</label></em></strong> la introducimos. De esta forma es todo mucho más seguro y fácil de instalar.</p>
<p style="text-align: left;">Los primeros módulos a instalar y casi obligatorios en cualquier instalación de magento son los del core, la clave es la siguiente.</p>
<blockquote>
<p style="text-align: left;">magento-core/Mage_All_Latest</p>
</blockquote>
<p style="text-align: left;">Esto hará que saque una ventana de comandos en la página y podremos ver que está realizando, tardará un poco ya que va a instalar unas cuantas cosas. Cuando termine, podremos ver la lista de modulos que nos ha instalado y que tendremos disponibles en nuestro Magento.</p>
<p style="text-align: left;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-connect-3.jpg"><img class="size-medium wp-image-490 aligncenter" title="magento-connect-3" src="http://www.noth.es/wp-content/uploads/2009/08/magento-connect-3-300x192.jpg" alt="magento-connect-3" width="300" height="192" /></a></p>
<h4 style="text-align: left;">Instalar el idioma español</h4>
<p style="text-align: left;">Para la instalación del idioma ( ojo sólo para el backend, los theme tienen su propia traducción) seguiremos estando en el Magento Connect , para instalar esto debemos primero irnos a la pestaña settings y marcar el estado preferido de los modulos a <strong>BETA</strong>, una vez esto volvemos a la pantalla anterior. Para instalar este idioma debemos usar la siguiente clave.</p>
<blockquote>
<p style="text-align: left;">magento-community/Locale_Mage_community_es_ES</p>
</blockquote>
<p style="text-align: left;">Ahora podemos volver a la administración y comprobar que tenemos el idioma español instalado.</p>
<h4 style="text-align: left;">Crear el tema</h4>
<p>Este paso es importante, por defecto Magento trae un thema (default blue skin) pero este no deberíamos de usarlo ya que si actualizamos nuestra instalación, es posible que podamos perder algún cambio, la recomendación es siempre crear un nuevo tema (basta con copiar el default) o instalar un theme nuevo desde el Manager Connect.</p>
<p>Nosotros vamos a optar por instalar el theme blank por lo que volvemos a nuestro Manager Connect y usamos su clave. <em><strong>Con esto, estaría instalado pero no seleccionado.</strong></em></p>
<blockquote><p>magento-core/Interface_Frontend_Default_Blank</p></blockquote>
<h4>Como Cambiar de theme en Magento</h4>
<p>Para seleccionar un nuevo tema para nuestro frontend. debemos volver al panel de administración y seguir la siguiente ruta <strong>Sistema -&gt; configuración -&gt; General -&gt; diseño -&gt; temas</strong> veremos el siguiente formulario.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-theme.jpg"><img class="size-medium wp-image-493 aligncenter" title="magento-theme" src="http://www.noth.es/wp-content/uploads/2009/08/magento-theme-300x214.jpg" alt="magento-theme" width="300" height="214" /></a></p>
<p>Tenemos que rellenar con el nombre del theme elegido, que no es otro que la carpeta padre del theme ( por si los instalamos a  mano o creamos nosotros uno , en lugar de por el Magento Connect).</p>
<p>Los theme se guardan en la siguiente carpeta:</p>
<blockquote><p>app\design\frontend\default\</p></blockquote>
<p>En esta ruta podemos ver <strong>nuestra carpeta blank</strong>, que es la que hemos fijado por defecto. Para guardar los cambios pulsamos el botón de guardar configuración que aparece arriba a la derecha.  Una captura de nuestro nuevo tema.</p>
<p style="text-align: center;"><a href="http://www.noth.es/wp-content/uploads/2009/08/magento-theme-blank.jpg"><img class="size-medium wp-image-497 aligncenter" title="magento-theme-blank" src="http://www.noth.es/wp-content/uploads/2009/08/magento-theme-blank-300x163.jpg" alt="magento-theme-blank" width="300" height="163" /></a></p>
<h3>Temas oficiales de Magento</h3>
<p>Los desarrolladores de Magento han creado varios temas oficiales  y que se pueden descargar desde Magento Connect, son los siguientes:</p>
<ul>
<li><a title="Blue Skin magento theme" href="http://www.magentocommerce.com/extension/519/blue-skin">Blue Skin (defecto)<br />
</a></li>
<li><a title="Modern magento theme" href="http://www.magentocommerce.com/extension/146/modern-theme-for-magento-frontend-interface">Modern</a></li>
<li><a title="Blank theme" href="http://www.magentocommerce.com/extension/518/blank-theme">blank-theme</a></li>
</ul>
<p>Otros themes que podemos encontrar en Magento Connect son:</p>
<ul>
<li><a title="magento-classic-theme" href="http://www.magentocommerce.com/extension/928/magento-classic-theme">magento-classic-theme</a></li>
<li><a title="hm-modern-theme-white-skin-" href="http://www.magentocommerce.com/extension/1758/hm-modern-theme-white-skin-">hm-modern-theme-white-skin-</a></li>
<li><a title="free-magento-theme" href="http://www.magentocommerce.com/extension/1403/free-magento-theme">free-magento-theme</a></li>
</ul>
<h3>Extensiones y módulos realmente útiles en Magento</h3>
<p>A parte de los que ya hemos explicado y que son <strong>necesarios</strong> existen muchísimos más, algunos muy recomendables son:</p>
<ul>
<li><a href="http://www.magentocommerce.com/extension/464/metodo-de-pago-servired">Pack de plataforma de pago servired</a> - Como su nombre índica es un  módulo para facilitar la implatación de esta pasarela de pago.</li>
<li><a href="http://www.magentocommerce.com/extension/586/fontis-wysiwyg-editor">fontis-wysiwyg-editor </a>- Nos añade a los formularios del backend la posibilidad de añadirle un wysiwyg como Tinymce o Fckeditor.</li>
<li><a href="http://www.magentocommerce.com/extension/670/advanced-cash-on-delivery">advanced-cash-on-delivery</a> - Contra reembolso personalizado  permite configurar los reembolsos de todos los metodos de envio que tengamos instalados en nuestra tienda Magento.</li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=56RtdiAfzgM:z7n7qdsP8RQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=56RtdiAfzgM:z7n7qdsP8RQ:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/56RtdiAfzgM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/08/23/instalacion-de-magento-primeros-pasos/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/08/23/instalacion-de-magento-primeros-pasos/</feedburner:origLink></item>
		<item>
		<title>Tutorial 3 - Básicos illustrator - Creando formas simples 2</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/wJMZl_ILGIs/</link>
		<comments>http://www.noth.es/2009/05/24/tutorial-3-basicos-illustrator-creando-formas-simples-2/#comments</comments>
		<pubDate>Sun, 24 May 2009 07:54:59 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[diseño]]></category>

		<category><![CDATA[illustrator]]></category>

		<category><![CDATA[imagenes]]></category>

		<category><![CDATA[tips]]></category>

		<category><![CDATA[tutorial]]></category>

		<category><![CDATA[illustrator formas basicas diseño]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=465</guid>
		<description><![CDATA[Seguimos con las herramientas de formas simples en illustrator, en el anterior tutorial ya vinos como crear un cuadrado, circulo, triángulo y una cruz. En este veremos algún consejillo o truco para seguir creando formas simples.
Empezamos por la herramienta Polígono ( Polygon Tool) basta con seleccionarla en el cuadro de mando y pulsar sobre nuestra [...]]]></description>
			<content:encoded><![CDATA[<p>Seguimos con las herramientas de formas simples en illustrator, en el anterior tutorial ya vinos como crear un cuadrado, circulo, triángulo y una cruz. En este veremos algún consejillo o truco para seguir creando formas simples.</p>
<p>Empezamos por la herramienta <strong>Polígono ( Polygon Tool) </strong>basta con seleccionarla en el cuadro de mando y pulsar sobre nuestra mesa de trabajo, esto hará que nos salga una ventana preguntandonos por las dimensiones  del radio del objeto a dibujar y lo más importante los lados.</p>
<p style="text-align: center;"><img class="size-full wp-image-466 aligncenter" title="polygon-tool" src="http://www.noth.es/wp-content/uploads/2009/05/polygon-tool.jpg" alt="polygon-tool" width="292" height="132" /></p>
<p style="text-align: left;">Una vez seleccionado los datos que queremos usar ya podremos terminar de dibujar nuestro objeto y como podéis observar, el truco para dibujar un triángulo es escoger 3 lados, sencillo  eh, con la de vueltas que dimos en el anterior tutorial.</p>
<p>Un segundo truco es que mientras estamos dibujando podemos cambiar los lados seleccionados pulsando las teclas arriba y abajo del teclado numérico.</p>
<p style="text-align: center;"><img class="size-medium wp-image-467 aligncenter" title="dibujos-herramientas-poligono-y-estrella" src="http://www.noth.es/wp-content/uploads/2009/05/dibujos-herramientas-poligono-y-estrella-300x225.jpg" alt="dibujos-herramientas-poligono-y-estrella" width="300" height="225" /></p>
<p style="text-align: left;">Un ejemplo de diversas formas creadas con las herramientas polygon tool y star tool con un relleno en blanco y un trazo magenta de 13pt.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=wJMZl_ILGIs:ferLff6pbdw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=wJMZl_ILGIs:ferLff6pbdw:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/wJMZl_ILGIs" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/05/24/tutorial-3-basicos-illustrator-creando-formas-simples-2/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/05/24/tutorial-3-basicos-illustrator-creando-formas-simples-2/</feedburner:origLink></item>
		<item>
		<title>Como renovar el certificado digital desde Firefox</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/qajptZj0OaA/</link>
		<comments>http://www.noth.es/2009/05/23/como-renovar-el-certificado-digital-desde-firefox/#comments</comments>
		<pubDate>Sat, 23 May 2009 13:31:39 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[firefox]]></category>

		<category><![CDATA[social]]></category>

		<category><![CDATA[social firefox configuración]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=452</guid>
		<description><![CDATA[En España, supongo que en otros países también, para poder realizar diferentes &#8220;papeleos&#8221; debes de conseguir un certificado digital, yo lo suelo usar para ver la vida laboral, la declaración de la renta e incluso lo he usado una vez para cancelar mi prestación por desempleo.

Estos tramites es muy cómodo hacerlos desde Internet, las colas [...]]]></description>
			<content:encoded><![CDATA[<p>En España, supongo que en otros países también, para poder realizar diferentes &#8220;papeleos&#8221; debes de conseguir un certificado digital, yo lo suelo usar para ver la vida laboral, la declaración de la renta e incluso lo he usado una vez para cancelar mi prestación por desempleo.</p>
<p style="text-align: center;"><img class="size-full wp-image-462 aligncenter" title="cer" src="http://www.noth.es/wp-content/uploads/2009/05/cer.jpg" alt="cer" width="412" height="147" /></p>
<p>Estos tramites es muy cómodo hacerlos desde Internet, las colas y perdidas de tiempo en las administraciones pueden ser larguísimas y muchas veces dejas de hacer una gestión por esto. Conseguir el certificado es fácil, tenemos que ir a la página web de <a href="http://www.cert.fnmt.es">La Fábrica Nacional de Moneda y Timbre</a> , en su menú principal iremos a ciudadanos y obtener certificado, pero esto no es lo que voy a contar en este post, sino que contaré el proceso de renovación del certificado.</p>
<p>Soy usuario de este certificado desde hace más de 6 años, una vez que consigues el primero este tiene un periodo de validez de 3 años y después debes renovarlo.</p>
<p>La primera vez  me caducó, sinceramente no sabía que tenía un periodo de validez y tampoco sabía cuando se terminaba. En esta ocasión ha sido distinto me llegaron varios correos informándome que mi certificado estaba próximo a caducar y me remetían a la dirección donde debería efectuar dicha renovación, y aquí llega los problemas.</p>
<p>Mi navegador habitual es Firefox y es donde tengo instalado el certificado, pues seguía los pasos que indican y me salia una pantalla modal, explicándome que debo introducir una master password, suponía que era alguna password que no recordaba, pero puse un twitt un poco a modo de cabreo o enfado y sin embargo el amigo @chemychemy <a href="http://twitter.com/chemychemy/status/1868673980">me contestó</a> y me orientó un poco sobre lo que era la master password, para que después digan que el twitter no vale para nada.</p>
<p>Bien, utilizo la <a href="http://www.difundefirefox.com/contrasena-maestra">master password o contraseña maestra </a>dependiendo en que idioma tengamos instalado nuestro firefox) y lastima seguíamos sin poder renovar el certificado.</p>
<blockquote><p>La contraseña maestra, es una utilidad de firefox, que encapsulará todas nuestras configuraciones y password, para poder usar estas debemos introducir la nuestra.</p></blockquote>
<p>Ahora la pantalla me mostraba un simpatico mensaje que decía.</p>
<blockquote><p>Su navegador no ha podido generar una firma valida.</p></blockquote>
<p>Revisé las faqs y no dí con ese error, seguramente esté orientado a usar el navegador explorer, así que recurro a San Google y doy con la <a href="http://www.dailycosas.net/2007/03/16/firma-digital-fnmt-desde-firefox/">respuesta </a>, necesitaba configurar el firefox para poder firmar digitalmente.</p>
<p>Repito los pasos que se necesitan realizar.</p>
<ol>
<li>En la barra de direcciones, teclearemos <strong>about:config </strong> , que nos sacará opciones avanzadas de configuración de nuestro firefox.  Debemos dejar a true la preferencia <strong>signed.applets.codebase_principal_suppor</strong>t, basta con hacer doble click sobre su nombre.</li>
<li>Ahora nos vamos al menú herramientas -&gt; opciones -&gt; avanzadas -&gt; ver certificados y esto nos abrirá la siguiente pantalla:</li>
<p style="text-align: center;"><img class="alignnone size-full wp-image-454" title="cert-fmmt" src="http://www.noth.es/wp-content/uploads/2009/05/cert-fmmt.jpg" alt="cert-fmmt" width="546" height="367" /></p>
<li>Tendremos que irnos a la pestaña autoridades  y buscar el certificado de FNMT y pulsar el botón editar, nos saldrá la siguiente pestaña, donde nos pregunta que puede firmar nuestro certificado, si webs, correos o aplicaciones, yo he marcado las tres aunque creo que con dar permisos a webs y aplicaciones (1 y 3 opción) valdría.</li>
<p style="text-align: center;"><img class="alignnone size-full wp-image-458" title="cert-fmmt-2" src="http://www.noth.es/wp-content/uploads/2009/05/cert-fmmt-2.jpg" alt="cert-fmmt-2" width="542" height="371" /></p>
<li>Por último cerraremos el firefox y volvemos a ejecutar la renovación de nuestro certificado</li>
</ol>
<p>Y eso es todo, ya tengo el certificado renovado, ahora me tendré que acordar de este post en el 2012.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=qajptZj0OaA:oa-UnCgbsW8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=qajptZj0OaA:oa-UnCgbsW8:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/qajptZj0OaA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/05/23/como-renovar-el-certificado-digital-desde-firefox/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/05/23/como-renovar-el-certificado-digital-desde-firefox/</feedburner:origLink></item>
		<item>
		<title>Tutorial 2 básico illustrator - Creando formas simples</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/84D7v3paf4w/</link>
		<comments>http://www.noth.es/2009/05/10/tutorial-2-basico-illustrator-creando-formas-simples/#comments</comments>
		<pubDate>Sun, 10 May 2009 09:24:25 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[diseño]]></category>

		<category><![CDATA[illustrator]]></category>

		<category><![CDATA[vectores]]></category>

		<category><![CDATA[diseño ilustrator formas simples basico]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=435</guid>
		<description><![CDATA[Vamos a seguir con esta serie de artículos, esta semana toca un breve tutorial sobre las formas que podemos crear en illustrator. Como sabéis yo no soy ningún diseñador ni pretendo serlo, pero me gusta aprender de todo un poco y siempre me he preguntado porque los programas de diseño no venían con varias formas [...]]]></description>
			<content:encoded><![CDATA[<p>Vamos a seguir con esta serie de artículos, esta semana toca un breve tutorial sobre las formas que podemos crear en illustrator. Como sabéis yo no soy ningún diseñador ni pretendo serlo, pero me gusta aprender de todo un poco y siempre me he preguntado porque los programas de diseño no venían con varias formas predefinidas, como por ejemplo un triángulo.</p>
<p>La razón es simple, para que disponer de todas esas formas predefinidas si las puedes ir creando al gusto, digamos que nos dan los alimentos y tu te preparas la comida.</p>
<p>Comenzaremos a crear dos formas básicas que si disponemos.</p>
<p><strong>Cuadrado </strong></p>
<p>Para ello nos basta con utilizar la herramienta <strong>rectangle tool (M)</strong>, con esta herramienta  no sólo podemos  crear rectángulos, sí mantenemos pulsada la tecla <strong>shift </strong>nos mantendrá la proporción y con ello crearemos un cuadrado.</p>
<p>En el <a href="http://www.noth.es/2009/04/26/tutorial-1-basico-ilustrator-creando-una-estrella/">anterior tutorial</a> aprendimos a jugar con el relleno y el trazo, a este cuadrado le he dado un trazo de 10pt con color #00AEEF y le he eliminado el relleno, quedaría así.</p>
<p><img class="alignnone size-full wp-image-437" title="cuadrado" src="http://www.noth.es/wp-content/uploads/2009/05/cuadrado.jpg" alt="cuadrado" width="104" height="97" /></p>
<p><strong>Circulo</strong></p>
<p>Usaremos la herramienta <strong>ellipse tool (L)</strong> y como hicimos con el cuadrado, mantendremos la tecla <strong>shift </strong>para mantener la proporción y conseguir un circulo perfecto,  para este ejemplo dejaremos un trazo de 10pt de color #EC008C</p>
<p><img class="alignnone size-full wp-image-438" title="circulo" src="http://www.noth.es/wp-content/uploads/2009/05/circulo.jpg" alt="circulo" width="111" height="100" /></p>
<p><strong>Triángulo</strong></p>
<p>Esta es una forma que yo considero básica y nunca he encontrado en los programas de diseño, entre ellos el illustrator, pero es muy fácil de crear.</p>
<p>Lo primero será crear un cuadrado, una vez creado lo vamos a seleccionar con la herramienta<strong> selection tool (V) </strong>de forma que podamos apreciar los distintos puntos que lo forman.</p>
<p><img class="alignnone size-full wp-image-439" title="triangulo-1" src="http://www.noth.es/wp-content/uploads/2009/05/triangulo-1.jpg" alt="triangulo-1" width="154" height="149" /></p>
<p>Es importante darnos cuenta de los diferentes elementos que se nos muestra al seleccionar un objeto.</p>
<ol>
<li>Tenemos un punto en el centro  con el fondo rellenado, este es el centro de nuestro objeto.</li>
<li>Tenemos una serie de puntos, con el fondo en blanco, estos son los denominados anchors (anclas) y definen cada punto del objeto que podemos modificar.</li>
<li>Las lineas que unen estos anchors, se les denomina path (camino) ya veremos para que se usa.</li>
</ol>
<p>Para poder crear un triángulo lo que vamos a hacer es eliminar uno los anchors que está colocado en cualquiera de las esquinas, para hacer esto utilizaremos la herramienta <strong>delete anchor point tool (-)</strong> , para encontrarla pulsaremos en la esquina inferior derecha de la herramienta <strong>Pen tool (p).</strong></p>
<p><img class="alignnone size-full wp-image-440" title="tool-delete-anchor-point" src="http://www.noth.es/wp-content/uploads/2009/05/tool-delete-anchor-point.jpg" alt="tool-delete-anchor-point" width="266" height="93" /></p>
<p>Nos situamos encima del anchor que queremos eliminar y pulsando sobre él, notaremos el cambio en el objeto.</p>
<p><img class="alignnone size-full wp-image-442" title="triangulo-2" src="http://www.noth.es/wp-content/uploads/2009/05/triangulo-2.jpg" alt="triangulo-2" width="230" height="349" /></p>
<p>Bien ya casi tenemos el triángulo,  tendremos que rotarlo, para ello volvemos a seleccionar el objeto y nos situamos en uno de los anchor, automáticamente nos saldrá una nueva opción en el cursor indicando que podemos rotar este objeto desde ese punto.</p>
<blockquote><p><strong><em>nota</em></strong>: si mantenemos pulsado la tecla <strong>shift</strong>, nos mantendrá la proporción del giro.</p></blockquote>
<p><img class="alignnone size-full wp-image-443" title="triangulo-3" src="http://www.noth.es/wp-content/uploads/2009/05/triangulo-3.jpg" alt="triangulo-3" width="235" height="211" /></p>
<p>Ya tenemos una forma de un triángulo, pero si nos fijamos cuando lo estamos seleccionando, sigue mostrando los anchor points como si de un cuadrado se tratase, para que se ajuste a la nueva forma tendremos que resetear esto, nos vamos a <strong>object -&gt; tranform -&gt; reset bounding box.</strong></p>
<p><img class="alignnone size-full wp-image-444" title="triangulo-4" src="http://www.noth.es/wp-content/uploads/2009/05/triangulo-4.jpg" alt="triangulo-4" width="253" height="150" /></p>
<p>Ahora podremos estirar el triangulo, cambiarle trazo, relleno lo que queramos, yo he usado un trazo de 10pt color #8DC63F y sin relleno.</p>
<p><strong>Aspa  o Cruz</strong></p>
<p>Para crear esta forma usaremos la misma técnica que con el triángulo, partiremos desde el cuadrado y eliminando y rotando conseguiremos un pequeño bloque, también podemos partir desde un rectángulo con una altura reducida, lo que debemos conseguir es algo así.</p>
<p><img class="alignnone size-full wp-image-445" title="cross-1" src="http://www.noth.es/wp-content/uploads/2009/05/cross-1.jpg" alt="cross-1" width="259" height="134" /></p>
<p>Lo que vamos a hacer ahora es duplicar este objeto, lo más sencillo es usar copiar y pegar  de forma que ya tengamos dos objetos iguales, uno de ellos los rotamos y lo colocamos en vertical al otro.</p>
<p>Nos vamos <strong>object -&gt; transform -&gt; rotate</strong> y con 90%  ya conseguiremos colocar el objeto en vertical, después lo desplazamos y los juntamos por su punto central.</p>
<p><img class="alignnone size-full wp-image-446" title="cross-2" src="http://www.noth.es/wp-content/uploads/2009/05/cross-2.jpg" alt="cross-2" width="251" height="204" /></p>
<p>Bien, ya casi lo tenemos el problema es que en realidad esto son dos objetos y nosotros sólo queremos uno, para ello vamos a agruparlos, con la herramienta de <strong>seleccion (V)</strong> y manteniendo pulsada la tecla <strong>shift</strong>, vamos a pulsar los dos objetos aumentando de esta forma la selección.</p>
<p><img class="alignnone size-full wp-image-447" title="cross-3" src="http://www.noth.es/wp-content/uploads/2009/05/cross-3.jpg" alt="cross-3" width="216" height="213" /></p>
<p>Para agruparlos vamos a<strong> object -&gt; group</strong> ( control + g ) y ya tenemos nuestra cruz o aspa si la rotamos.</p>
<p><img class="alignnone size-full wp-image-448" title="cross-4" src="http://www.noth.es/wp-content/uploads/2009/05/cross-4.jpg" alt="cross-4" width="158" height="156" /></p>
<p>Seguro que hay muchas formas de crear estas formas y quedo abierto a cualquier sugerencia de como mejorar.</p>
<p><img class="alignnone size-medium wp-image-449" title="formas-final" src="http://www.noth.es/wp-content/uploads/2009/05/formas-final-300x209.jpg" alt="formas-final" width="300" height="209" /></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=84D7v3paf4w:yUX4D3ewZBQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=84D7v3paf4w:yUX4D3ewZBQ:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/84D7v3paf4w" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/05/10/tutorial-2-basico-illustrator-creando-formas-simples/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/05/10/tutorial-2-basico-illustrator-creando-formas-simples/</feedburner:origLink></item>
		<item>
		<title>Tutorial 1 básico Illustrator - Creando una estrella</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/8PmnuaoUvMY/</link>
		<comments>http://www.noth.es/2009/04/26/tutorial-1-basico-ilustrator-creando-una-estrella/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 16:28:48 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[diseño]]></category>

		<category><![CDATA[vectores]]></category>

		<category><![CDATA[diseño illustrador vecorial iconos estrella]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=425</guid>
		<description><![CDATA[Bien, aquí empiezo a mostrar mis avances o desastres con los programas de diseño, comenzaré con el Illustrator y el uso de el trazo y el relleno.
Illustrator es un programa para crear objetos vectoriales, por lo que todo se tiene que llevar a un objeto ( como en POO), si tenemos esto claro es más [...]]]></description>
			<content:encoded><![CDATA[<p>Bien, aquí empiezo a mostrar mis avances o desastres con los programas de diseño, comenzaré con el Illustrator y el uso de el trazo y el relleno.</p>
<p>Illustrator es un programa para crear objetos vectoriales, por lo que todo se tiene que llevar a un objeto ( como en POO), si tenemos esto claro es más fácil de entender, por lo menos para los que tengamos la mente más enfocada a programación.</p>
<p>Lo primero que haremos será crear un nuevo documento  y seleccionar la herramienta estrella,  la colocaremos en nuestro lienzo.</p>
<p style="text-align: center;"><img class="size-full wp-image-426 aligncenter" title="star-tool" src="http://www.noth.es/wp-content/uploads/2009/04/star-tool.jpg" alt="star-tool" width="284" height="193" /></p>
<p>Una vez creada  tendremos un objeto en forma de estrella, para el cual tenemos dos estados básicos, el relleno y el trazo, para ver su estado podemos ir a<strong> window -&gt;  appearance o shift +F6.</strong></p>
<p><strong>Importante, se necesita seleccionar un objeto con la herramienta  de selección (V)</strong>, podemos darnos cuenta si el objeto queda marcado con una especie de contorno con varios puntos para seleccionar.</p>
<p>Se muestra en la captura.</p>
<p style="text-align: center;"><img class="size-medium wp-image-427 aligncenter" title="apariencia" src="http://www.noth.es/wp-content/uploads/2009/04/apariencia-300x222.jpg" alt="apariencia" width="300" height="222" /></p>
<p style="text-align: left;">Llegado a este punto vamos a darle valores a esos atributos, colocaremos un amarillo para el relleno y un negro para el trazo. En Ilustrator CS4 ( desconozco en otro) en la misma pantalla anterior ya podemos escoger tanto el color como el tamaño del trazo.</p>
<p style="text-align: left;">Para este ejemplo yo he escogido lo siguiente:</p>
<p style="text-align: left;">Trazo:  #000000 con un tamaño de 8</p>
<p style="text-align: left;">Relleno: #FFF100</p>
<p style="text-align: left;">Quedando de la siguiente forma:</p>
<p style="text-align: center;"><img class="size-full wp-image-428 aligncenter" title="start1" src="http://www.noth.es/wp-content/uploads/2009/04/start1.jpg" alt="start1" width="174" height="166" /></p>
<p style="text-align: left;">Simple verdad, si esperabais mucho más nivel lo siento, este no es un blog donde podrás aprender diseño, tan sólo, son mis pequeños avances con estas herramientas, de las que espero que dentro de un tiempo yo también pueda decir, pero si eso es muy fácil <img src='http://www.noth.es/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p style="text-align: left;">Pero bueno no lo iba a dejar ahí, podemos hacer alguna cosilla más. Los trazos y rellenos dan mucho juego, podemos crear por cada objeto ( en este caso la estrella), todos los trazos y rellenos que queramos, vamos a probarlo.</p>
<p style="text-align: left;">Crearemos un nuevo trazo, ojo en el panel de apariencia debemos colocarlos en orden de visualización, si el trazo de arriba es más grande que los de abajo estos no se verán.</p>
<p style="text-align: left;">Para este ejemplo he creado:</p>
<p style="text-align: left;">Trazo: 2pt de color blanco ( #ffffff)</p>
<p style="text-align: left;">Después he creado un nuevo relleno, pero esta vez con un degradado, al cual como opción de modo le he puesto un multiply de 30%, dejo la captura con las capas.</p>
<p style="text-align: center;"><img class="size-full wp-image-429 aligncenter" title="start2" src="http://www.noth.es/wp-content/uploads/2009/04/start2.png" alt="start2" width="400" height="297" /></p>
<p style="text-align: left;">Estas dos propiedades nos dan mucho juego, a cada trazo o filtro le podemos aplicar efectos, suavizados o lo que queramos, de momento con esta forma ya podemos crear nuestros propios iconos de estrella.</p>
<p style="text-align: left;">Por ejemplo, podemos  usarlos con el módulo <a href="http://drupal.org/project/fivestar">fivestar </a>de drupal o con cualquier otro sistema.</p>
<p style="text-align: left;">
<p style="text-align: center;"><img class="size-full wp-image-430 aligncenter" title="sample-start" src="http://www.noth.es/wp-content/uploads/2009/04/sample-start.png" alt="sample-start" width="350" height="350" /></p>
<p style="text-align: left;">Más sencillo imposible, hasta un programador puede hacerlo jeje.</p>
<p style="text-align: left;">
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=8PmnuaoUvMY:q1eLxpmr_aQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=8PmnuaoUvMY:q1eLxpmr_aQ:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/8PmnuaoUvMY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/04/26/tutorial-1-basico-ilustrator-creando-una-estrella/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/04/26/tutorial-1-basico-ilustrator-creando-una-estrella/</feedburner:origLink></item>
		<item>
		<title>Inocentes inocentes!! opps he llegado tarde.</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/86YLBjjWYpY/</link>
		<comments>http://www.noth.es/2009/04/26/inocentes-inocentes-opps-he-llegado-tarde/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 11:30:35 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=422</guid>
		<description><![CDATA[Vaya, lo que se iba a convertir en la típica broma del día de los inocentes, al final casi se convierte en realidad, pero nada más lejos de la misma.
He estado muy liado con el trabajo,  con unos cursos que hemos realizado, el de webs accesibles de la universidad de Murcia y el de Zend [...]]]></description>
			<content:encoded><![CDATA[<p>Vaya, lo que se iba a convertir en la típica broma del día de los inocentes, al final casi se convierte en realidad, pero nada más lejos de la misma.</p>
<p>He estado muy liado con el trabajo,  con unos cursos que hemos realizado, el de webs accesibles de la universidad de Murcia y el de Zend Framework el cual me queda sólo una semanita. Este año me estoy formando mucho en accesibilidad desde que han salido las WCAG 2.0 y sobre todo en usabilidad, estoy deseando coger un proyecto en el que pueda demostrar y poner en práctica todos estos conocimientos.</p>
<p>Sigo en mis treces en este año mejorar mi punto débil como desarrollador web, que no es otro que el diseño. Como vereis he creado un nuevo theme para este blog, en el cual lo  he unido con mi web personal <a title="Web personal Queli Coto  - desarrollador web" href="http://quelicoto.es">quelicoto.es</a>, de forma que ambas tengan el mismo estilo y se puedan identificar como una sola.</p>
<p>Hace tiempo que salte al &#8220;mundo social&#8221; y descubrí que era noth y quien estaba detrás de el, podría eliminar noth y seguir en mi dominio personal, pero que queréis que os diga, le tengo mucho cariño a este dominio y es mi  nick en internet con alguna variación, como nothnk, nothnkes&#8230; etc.</p>
<p>Bueno este mini post, es para deciros que vuelvo, este año trataré temas sobre lo que estoy aprendiendo, mis pequeños avances en el diseño web, con algún intento de hacer algo con programas como photoshop, ilustrator incluso after effects que siempre me encanto el mundo de la edición de video.</p>
<p>Nos vemos y espero que sea antes del próximo 28 de diciembre.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=86YLBjjWYpY:PMI94957gJE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=86YLBjjWYpY:PMI94957gJE:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/86YLBjjWYpY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2009/04/26/inocentes-inocentes-opps-he-llegado-tarde/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2009/04/26/inocentes-inocentes-opps-he-llegado-tarde/</feedburner:origLink></item>
		<item>
		<title>Toda historia tiene un final</title>
		<link>http://feedproxy.google.com/~r/nothnk/~3/wyC7O9d5gFE/</link>
		<comments>http://www.noth.es/2008/12/28/toda-historia-tiene-un-final/#comments</comments>
		<pubDate>Sun, 28 Dec 2008 08:25:22 +0000</pubDate>
		<dc:creator>noth</dc:creator>
		
		<category><![CDATA[social]]></category>

		<guid isPermaLink="false">http://www.noth.es/?p=420</guid>
		<description><![CDATA[La de este humilde blog, ha sido extraña pero como todas las hitorias supongo. Todo comenzó hace casi 3 años, una tarde gris de invierno donde las gaviotas volaban al ras del mar&#8230;.. espera hombre que me estoy liando de historia. He aprendido mucho con este blog y a decir verdad me ha servido mucho [...]]]></description>
			<content:encoded><![CDATA[<p>La de este humilde blog, ha sido extraña pero como todas las hitorias supongo. Todo comenzó hace casi 3 años, una tarde gris de invierno donde las gaviotas volaban al ras del mar&#8230;.. espera hombre que me estoy liando de historia. He aprendido mucho con este blog y a decir verdad me ha servido mucho para afianzar mi carrera profesional pero como sabéis no actualizo con frecuencia, es más no actualizo por lo tanto esta decisión creo que es la más acertada, tengo otros proyectos en los que invierto mi poco tiempo libre y ya no consigo sacar más tiempo para noth.es.</p>
<p>Descanse en paz</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/nothnk?a=wyC7O9d5gFE:1wocuD27piI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/nothnk?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/nothnk?a=wyC7O9d5gFE:1wocuD27piI:YwkR-u9nhCs"><img src="http://feeds.feedburner.com/~ff/nothnk?d=YwkR-u9nhCs" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/nothnk/~4/wyC7O9d5gFE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.noth.es/2008/12/28/toda-historia-tiene-un-final/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.noth.es/2008/12/28/toda-historia-tiene-un-final/</feedburner:origLink></item>
	</channel>
</rss>
