tag:blogger.com,1999:blog-55508398919074857822024-03-13T15:32:46.393-04:00Comunidad Multimedia DominicanaComunidad Multimedia DominicanaUsuarios 2.0http://www.blogger.com/profile/10524505399774940140noreply@blogger.comBlogger65125tag:blogger.com,1999:blog-5550839891907485782.post-85419620064117624612011-03-30T11:33:00.004-04:002011-03-30T11:43:04.116-04:00Viva lanza novedoso servicio: Viva MiFi<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-VHZv04y-e9k/TZNPfmG9moI/AAAAAAAAAc0/cuuHstxNpfQ/s1600/leon3.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 258px; height: 320px;" src="http://1.bp.blogspot.com/-VHZv04y-e9k/TZNPfmG9moI/AAAAAAAAAc0/cuuHstxNpfQ/s320/leon3.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5589898966721206914" /></a><br /><br />Santo Domingo.- Con el objetivo de satisfacer las necesidades de sus clientes de internet móvil, la empresa de telecomunicaciones Viva, ha lanzado al mercado el práctico, útil y novedoso servicio Viva MiFi.<br /><br />Viva MiFi es un router WIFI inalámbrico portable, del tamaño de una tarjeta de crédito, que permite la conexión simultánea de hasta 3 equipos WiFi. Ejemplo: Laptops, Tablets, Teléfonos Móviles, etc.<br /><br />Con la introducción de este nuevo router WIFI inalámbrico, los clientes podrán llevar consigo el Internet, ya que es un equipo que despliega una red inalámbrica personal que puede ser compartida con hasta tres (3) usuarios al introducir una contraseña de seguridad en el dispositivo WiFi.<br /><br />El equipo cuenta con una batería recargable de litio de uso continuo de hasta 4 horas, que permite la conexión a Internet móvil sin cables donde quiera que exista cobertura de Internet de Viva, además de poseer un radio de emisión de conexión de 30 metros.<br /><br />Mariam León, Gerente de Telefonía Fija e Internet de Viva, informó “Estamos muy contentos de poder satisfacer la demanda de un equipo que permita compartir la conexión a Internet de una forma práctica que vaya de acuerdo a la premisa del producto – movilidad y portabilidad” “Este es el verdadero hotspot WIFI personal” y está disponible solo en Viva.<br /><br />Viva es una empresa que se caracteriza en ofrecer una inmensa diversidad de planes, servicios innovadores y únicos en el sector de telecomunicaciones para satisfacer las demandas de sus clientes y de los nuevos tiempos.Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com3tag:blogger.com,1999:blog-5550839891907485782.post-80156733465976089072011-01-27T10:10:00.002-04:002011-01-27T10:14:20.007-04:00Orange Dominicana y GCS SYSTEMS Firman acuerdo para ofrecer el servicio tPago<span style="font-weight:bold;">Clientes podrán realizar pagos desde sus equipos móviles GSM</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_GTkHp1bVvFA/TUF9oKW70WI/AAAAAAAAAZk/dsnmMtpwy7w/s1600/orange.jpeg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 214px; height: 320px;" src="http://3.bp.blogspot.com/_GTkHp1bVvFA/TUF9oKW70WI/AAAAAAAAAZk/dsnmMtpwy7w/s320/orange.jpeg" border="0" alt=""id="BLOGGER_PHOTO_ID_5566868743335432546" /></a>Santo Domingo, D. N., enero de 2011. Las empresas <span style="font-weight:bold;">Orange Dominicana</span> y <span style="font-weight:bold;">GCS Systems</span>, LTD firmaron un acuerdo para la interconexión de las redes y plataformas de ambas entidades, que permitirá a los clientes de Orange acceder a los servicios ofertados por GCS a través de la red móvil de la empresa de telecomunicaciones. Este acuerdo fue firmado entre los señores Jean Marc Harion, presidente de Orange Dominicana y Manuel Alejandro Grullón Hernández, presidente de GCS Systems.<br /><br />El convenio establece la realización de transacciones para el manejo de las finanzas personales y los pagos móviles en tiempo real y de tipo comercial a través del producto <span style="font-weight:bold;">tPago</span> desde los equipos móviles GSM de los clientes Orange, sin importar la modalidad de contrato que tengan con la compañía. El producto tPago es un servicio innovador y único en el mercado que ofrece la facilidad de realizar los pagos que el cliente necesite a través de su móvil. <br /><br />Los clientes afiliados a este novedoso servicio podrán acceder a este a partir del mes de febrero y solo tendrán que marcar *150# y desde el menú principal podrán realizar, en tiempo real, recargas de tiempo aire (minutos de llamadas), transferencias de fondos de persona a persona, pagos de facturas de servicios, pagos de compras en comercios, así como consulta de saldo de su cuenta bancaria y del historial de transacciones.<br /><br />Durante el acto de firma del acuerdo, el señor Jean Marc Harion, presidente de Orange Dominicana, señaló que “Este acuerdo con GCS Systems es un paso hacia adelante orientado a facilitar la vida de nuestros clientes. Nuestras redes ofrecerán la seguridad que se necesita para el buen resultado del servicio, con lo cual obtendremos la satisfacción de los clientes”. <br /><br />Por su parte, el presidente del Consejo de Directores de GCS Systems, señor Manuel Alejandro Grullón Hernández, dio las gracias a Orange Dominicana por la confianza depositada en la empresa que preside, al tiempo que expresó cómo la entrada de esta telefónica amplía el segmento poblacional hábil para obtener el servicio de pagos móviles a través de tPago.<br /><br />GCS es un habilitador de pagos móviles, que integra a través de su plataforma a diferentes tipos de empresas, tales como instituciones financieras, compañías de telecomunicaciones, empresas de servicios y redes de adquirientes, con el objetivo de proveer a sus clientes las facilidades de realizar todo tipo de transacciones con estas instituciones desde la comodidad de su teléfono móvil.<br /><br />Este servicio es ofrecido actualmente a través de los bancos Popular, Progreso y BanReservas, luego BHD, y, gradualmente, irán entrando los demás bancos del sistema financiero nacional, para beneficio de su clientela.<br /><br />El objetivo de tPago es proporcionar una amplia variedad de soluciones de pagos móviles que sean asequibles y puedan estar disponibles para las personas que son clientes de estas entidades financieras, a través de una transacción sencilla y desde cualquier lugar donde tengan señal móvil. La red GSM que ofrece la empresa de telecomunicaciones Orange Dominicana, considerada la número uno del país, asegura que los resultados para los clientes sean los mejores.<br /><br />Con esta alianza que ofrece un producto simple, seguro, y rápido, se demuestra una vez más los pasos firmes de ambas empresas para ofrecer valores agregados, confiables y responsables a sus clientes.Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com1tag:blogger.com,1999:blog-5550839891907485782.post-29123533387565964072010-09-02T12:23:00.000-04:002010-09-02T12:23:17.250-04:00Adobe Hispano<span class="Apple-style-span" style="color: #222222; font-family: 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;">Vuelve el evento más importante de Adobe en Español: <strong style="font-weight: 700;">Adobe Hispano</strong>, con 20 conferencias internacionales, reuniendo a 11 países durante 4 días donde solo se hablará dos cosas: Adobe y Español, se parte de este evento y <a href="http://www.adobehispano.com/" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000099; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline; vertical-align: baseline;" target="_blank">regístrate</a> para participar.</span><br />
<span class="Apple-style-span" style="color: #551a8b;"><u><span class="Apple-style-span" style="color: #222222; font-family: 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif; font-size: small;"><span class="Apple-style-span" style="font-size: 12px; line-height: 18px;"><br />
</span></span></u></span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://l4c.me/uploads/ah2010-1283402668_full550.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="640" src="http://l4c.me/uploads/ah2010-1283402668_full550.jpg" width="494" /></a><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: #222222; font-family: 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;"></span></div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"></div><div style="text-align: left;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal;"><a href="http://l4c.me/uploads/ah2010-1283402668_full550.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: #222222; font-family: 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;"><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: inline !important; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Las conferencias serán:</div></span></a></span></div><strong style="font-weight: 700;"><div style="text-align: left;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: black; font-family: 'Times New Roman'; font-size: medium; font-weight: normal; line-height: normal;"><a href="http://l4c.me/uploads/ah2010-1283402668_full550.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: #222222; font-family: 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;"><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: inline !important; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><strong style="font-weight: 700;">Septiembre 13</strong></div></span></a></span></div></strong><br />
<ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; list-style-position: inside; list-style-type: circle; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 1.5em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Datos sin dolor y sin SQL con AIR - <strong style="font-weight: 700;">Daniel Ramos</strong> (México)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Personalizando componentes en Flex 4 - <strong style="font-weight: 700;">Mariano Kiwo Carrizo</strong> (Argentina)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Partículas con ActionScript 3 - <strong style="font-weight: 700;">Rodrigo Duarte </strong>(Chile)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Tracking de Google Analytics con Flash - <strong style="font-weight: 700;">Edgar Parada</strong> (México)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Optimización extrema de SWF 2.0 - <strong style="font-weight: 700;">Elder Vasquez</strong> (Perú)</li>
</ul><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;"><strong style="font-weight: 700;">Septiembre 14</strong></div><ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; list-style-position: inside; list-style-type: circle; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 1.5em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Edición NO destructiva con Photoshop - <strong style="font-weight: 700;">Mariana Cabral </strong>(México)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Documentos interactivos para Web y el iPad con ID - <strong style="font-weight: 700;">Jose M. Ramos</strong> (Puerto Rico)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Usando Lightroom y Photoshop CS5 - <strong style="font-weight: 700;">Rafael Concepcion </strong>(EEUU)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Creación de animaciones Flash con Illustrator - <strong style="font-weight: 700;">Antonio Lirio</strong> (España)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Optimización de trabajo con el nuevo Photoshop - <strong style="font-weight: 700;">Marcelo Monzón</strong> (Argentina)</li>
</ul><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;"><strong style="font-weight: 700;">Septiembre 15</strong></div><ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; list-style-position: inside; list-style-type: circle; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 1.5em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Creación de Widgets con Flash Catalyst -<strong style="font-weight: 700;"> Iván Álvarez</strong> (México)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Cine 3D con After Effects - <strong style="font-weight: 700;">Luis Sosa</strong> (Rep Dominicana)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Flash Catalyst - <strong style="font-weight: 700;">LordAlex León</strong> (Canadá)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Acrobat y la oficina sin papeles - <strong style="font-weight: 700;">Diego Rodríguez</strong> (España)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Workflow, muévete sin pérdidas entre suites - <strong style="font-weight: 700;">Jorge Mochón</strong> (España)</li>
</ul><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;"><strong style="font-weight: 700;">Septiembre 16</strong></div><ul style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; list-style-position: inside; list-style-type: circle; margin-bottom: 1.5em; margin-left: 0px; margin-right: 0px; margin-top: 1.5em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Mobile Web con HTML5, widgets y Dreamweaver - <strong style="font-weight: 700;">Maximiliano Firtman</strong> (Argent)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Aplicaciones multidispositivo - <strong style="font-weight: 700;">Marcos Gonzáles</strong> (España)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">5 situaciones en que ColdFusion te puede salvar la vida - <strong style="font-weight: 700;">Michael Borbor</strong> (Ecuador)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Jugando con datos en Spry - <strong style="font-weight: 700;">Luis Felipe</strong> (Chile)</li>
<li style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; vertical-align: baseline;">Lo que tiene HTML5, lo que le falta a Flash - <strong style="font-weight: 700;">Freddie Vega </strong>(Colombia)</li>
</ul><div style="text-align: left;">Fuente: <a href="http://www.garageflash.org/adobe-hispano-regresa">Garaje Flash</a></div>Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com1tag:blogger.com,1999:blog-5550839891907485782.post-5270848541172223362010-06-25T10:21:00.000-04:002010-06-25T10:21:58.641-04:00Google lanza una página web para desarrolladores de HTML 5<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6O_iyBEvXg3Pdle_ES8XpqoIidsL9uVs_ZV1b7Hs2p2QK8SLUPTPSYXACL5pJLWieX_HYfx8Ga0Y19fyawShAoQmgIuHHBKV_mzbcKIWJjNfQ96LqVTCbrIk08NYGkybUiKE5WB7VUqja/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6O_iyBEvXg3Pdle_ES8XpqoIidsL9uVs_ZV1b7Hs2p2QK8SLUPTPSYXACL5pJLWieX_HYfx8Ga0Y19fyawShAoQmgIuHHBKV_mzbcKIWJjNfQ96LqVTCbrIk08NYGkybUiKE5WB7VUqja/" /></a></div>Para <b>Google</b>, <b>HTML 5</b> finalmente ha entrado en escena. Es lo que debe haber pensado la compañía, que esta misma semana ha lanzado una nueva <a href="http://www.html5rocks.com/">web denominada HTML5rocks</a>, en la que comparte kit de recursos para <b>desarrolladores</b>, así como todo tipo de información relacionada con código y tutoriales para poder compartir conocimientos entre usuarios. <br />
<br />
La compañía pretende que sea un lugar en el que el desarrollador pueda tanto recibir como contribuir con conocimientos y experiencias de <b>programación</b> propias, siempre basadas en el código <b>HTML 5</b>. <br />
<br />
Y es que el término <b>HTML 5</b> abarca temas tan diversos que los desarrolladores suelen tener dificultad para abordar algunos de ellos. De hecho, algunas <b>APIs</b> y características forman parte de las ya aprobadas, mientras que otras forman parte del grupo que todavía no han sido aceptadas. El “site” ha sido dividido en cuatro secciones principales, véase presentación interactiva, donde se muestran las características, zona de juegos <b>HTML</b> para probar sus capacidades, tutoriales, y recursos. <br />
<br />
Entre los nueve tutoriales que ya pueden verse es posible aprender cómo llevar las <b>aplicaciones offline</b>, controlar la localización de los usuarios que acceden asociada a <b>Geolocalización</b>, e incluso leer los ficheros locales desde dentro de <b>JavaScript</b>. En la <b>Web</b> es posible encontrar incluso una serie de <b>APIs</b> que todavía no han sido aprobadas por <b>W3C HTML 5</b>, pero que son indicadas como aplicaciones web de próxima generación. <br />
<br />
En los últimos meses se ha hablado bastante al respecto, debido al apoyo incondicional por parte de <b>Apple</b>, quien ha declarado que la aparición de <b>HTML 5</b> confirma que no es necesario depender del plug-in de <b>Flash</b> para la reproducción de contenidos on-line bajo navegador Web. <br />
<br />
Seguro que con el paso del tiempo y la aportación de todos, la Web va adquiriendo mayores contenidos atractivos. También con anterioridad, informamos que <b>Apple</b> desarrolló una página específica para contenidos <b>HTML 5</b>.<br />
<br />
Por: <a href="http://www.idg.es/pcworldtech/Google-lanza-una-pagina-web-para-desarrolladores-d/doc96596-actualidad.htm">Alfonso Casas</a><br />
<a href="http://www.idg.es/pcworldtech/Google-lanza-una-pagina-web-para-desarrolladores-d/doc96596-actualidad.htm">PCworld.es</a>Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-9246609730164981152010-05-15T18:41:00.011-04:002010-05-17T08:25:27.994-04:00Adobe en Vivo desde Republica Dominicana<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9RD5sTDT-Jgbqi3k3wqL99OqvMHGlIU3Wms2mmNSqoh5Qu9JD_PZzP2WtzluqCGTlpqqahKdYKPLI_jPyjB5Doa4z0AahhNt7FFKcip94ZMW_6T0RK9WyKC1GTgrdhV5Gc2-R0JHt7o2/s1600/aev_logo.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 272px; height: 93px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9RD5sTDT-Jgbqi3k3wqL99OqvMHGlIU3Wms2mmNSqoh5Qu9JD_PZzP2WtzluqCGTlpqqahKdYKPLI_jPyjB5Doa4z0AahhNt7FFKcip94ZMW_6T0RK9WyKC1GTgrdhV5Gc2-R0JHt7o2/s320/aev_logo.png" alt="" id="BLOGGER_PHOTO_ID_5471659890093217170" border="0" /></a><br /><br />Desde hace años <a href="http://www.adobe.com/">Adobe</a> ha sido la empresa que mas inversión e innovación ha dedicado a las herramientas de desarrollo de todas las areas de la Multimedia. Con herramientas versatiles y cada vez mas enfocadas en facilitar nuestro flujo de trabajo como diseñadores, desarrolladores, animadores, editores y productores de piezas para el medio impreso, digital, audiovisual y media interactiva.<br /><br />Teniendo este referente y como apoyo a la capacitacion de quienes usan los diversos programas que produce Adobe, se ha creado <a href="http://adobeenvivo.com/">Adobe en Vivo</a>. Este evento fue creado por <a href="http://garageflash.com/">Garage Flash</a> y auspiciado por Adobe, el mismo agrupa una serie de expositores, gran parte de ellos son expertos Certificados por Adobe.<br /><br />En esta oportunidad le toco a República Dominicana, los días 8 y 9 Mayo 2010, 2 Días de puro <a href="http://www.adobe.com/">Adobe</a> con una excelente selección de temas que abarcaba las areas de Web, Moviles, Impresos y Video. Este formidable evento se realizo en los auditorios de <a href="http://www.funglode.org/">FUNGLODE</a> bajo la organización y coordinación de <a href="http://www.12bitsmediagroup.com/">12 Bits Media Group</a>, empresa representante de Adobe en el país, y el <a href="http://www.globalmediaarts.org/espanol/">Institiuto Global de Multimedia (IGM)</a>.<br /><br />El día 8 inicio con las palabras de Bienvenida de Luis Sosa Manager del Dominican Republic Adobe User Group y Janice Campbell Senior International Group Program Manager at Adobe Systems Incorporated. A seguidas, inicio la descarga de los expertos internacionales invitados hablando de Coldfusion, Flash Catalyst CS5, Integración de Adobe Flex y .Net, CSS, Diseño para la Web, Mobile Web, Flash Player 10.1 y Adobe Air.<br /><br />En este primer día las presentaciones mas destacadas fueron la de Adobe Catalyst que dejo impresionado al auditorio con esta nueva aplicación dentro de la Suite CS5 que permite a diseñadores desarrollar formularios y aplicaciones Flash que antes requerían programación. <a href="http://twitter.com/firt">Maximiliano Firtman</a> experto en desarrollo para Web Moviles nos mostró con mucha profesionalidad todo lo referente a desarrollo web para moviles, este tema merece mucha atención pues el futuro apunta hacia los movíles. Raul Jimenez (<a href="http://twitter.com/elecash/">elecash</a>) hablo sobre todo el potencial de Flash 10.1, las nuevas mejoras de esta versión del player permiten diseñar y desarrollar 3D, hacer impresionante aplicaciones moviles para teléfonos con pantalla touch, uso del acelerometro, conexión directa a través de sockets lo que permite hacer aplicaciones multiusuarios, entre otras hierbas.<br /><br />El segundo día, Domingo 9, se enfoco en impresos y vídeo. El día inicio con Marlon Ceballos quien nos hablo sobre el diseño de E-Books, a continuación <a href="http://twitter.com/marianacabralMX">Mariana Cabral</a> nos hablo sobre las mejoras en el flujo de trabajo que ofrece la Suite CS5 de Adobe, nos impresiono bastante la manera en como se integran todas las aplicaciones a traves de Bridge y las alucinantes funciones que incorpora Photoshop para realizar retoques fotográficos que antes eran imposibles. Esta fue una las presentaciones mas aplaudidas por las novedades presentadas y la excelente exposición de Mariana.<br />Desde Puerto Rico, Jose Ramos, nos hablo sobre Ilustrator e hizo magia con las nuevas herramientas y facilidades que presenta la nueva version del CS5. El nuevo ilustrator simplifica muchas tareas que antes requerian un sin numero de pasos para poderlas realizar. Ilustrator incorpora un potente motor de rasterización que permite realizar ilustraciones casi reales y artisticas con las herramientas que incorpora.<br /><br />Jorge Monchon, ciudadano español aplatanizado, nos hablo sobre after effects y las nuevas posibilidades de animacion que permite realizar, hasta un punto muy cercano al 3D y posibilidades de animacion con Mascaras que antes demoraban días en realizar morenomaticamente ahora After Effects las hace por nosotros en minutos. Ilka Valdez nos hablo sobre las bondades de Adobe Encore para la producción de DVDs y para cerrar Luis Sosa presento algunos trucos con Photoshop y After effects.<br /><br />Puntos relevantes: Elder Vasquez (<a href="http://twitter.com/eldervaz">Eldervaz</a>), coordinador y desarrollador de Actionscript luego de mostrarnos un algoritmo y su <a href="http://www.youtube.com/watch?v=K53Y49lD2o0">código para aprender a Bailar Salsa</a>, reto a los participantes de Dominicana para que escribieran y demostraran un algoritmo similar que le enseñara a Bailar Bachata. Tambien se rifaron licencias de Adobe Flex, suscripciones de <a href="http://www.video2brain.com/">Video2Brain</a> ,Flash Professional y suites completas de Adobe CS5.<br /><br />En resumen, este fue un gran evento, donde por primera vez Adobe se acerca a República Dominicana y muestra a traves de expertos las novedades de su completa suite CS5. Mas de 700 participantes en dos días, transmitido en linea a traves de la web de FUNGLODE, la excelente organización y los temas tratados le dan la categoria de exitoso.<br /><br />La comunidad multimedia y tecnologica dominicana en este año ha tenido importantes eventos, movimientos que surgen, interesantes innovaciones y casos de exito que apuntan a que vamos por buen camino. Siempre que tengas la oportunidad, mantente al tanto, participa, colabora y comparte conocimiento para que nuestra comunidad siga creciendo.<br /><br />UPDATE: Cabe mencionar que el evento tuvo una excelente cobertura via twitter por Jabel Gonzalez (<a href="http://www.twitter.com/jabel">@JabelG</a>), ademas de las tomas fotograficas realizadas por Rodrigo Duarte (<a href="http://www.twitter.com/roduar/">@roduar</a>) que pueden ver aqui: <a href="http://picasaweb.google.com/roduar/AdobeEnVivo#">http://picasaweb.google.com/roduar/AdobeEnVivo#<br /></a><br /><br />PD1: Sigue a Adobe en vivo a traves de twitter con el hashtag <a href="http://twitter.com/search?q=adobeenvivo">#adobeenvivo</a><br />PD2: Gracias Jabel por la corrección.rdanielhttp://www.blogger.com/profile/17949550066115991524noreply@blogger.com3tag:blogger.com,1999:blog-5550839891907485782.post-39075955707983627912010-05-09T17:52:00.001-04:002010-05-10T17:21:17.398-04:00Que es StartDO?<blockquote>Este post pretende resumir el concepto de <b><span class="Apple-style-span" style="color: #45818e;">StartDo</span></b> con el fin de que podamos entender de que se trata este interesante proyecto que recién inicia.</blockquote><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM5pm9Xjrz88Lcq_u03J-XqBw-dWkNSX-iCxgeycPKm1pzI-frSTrtmWWDxRyyYAU5LKrTp1o1QY73dxiDHmRYba4rQsicwf0OJaRUzlOPsaIQhuu01Sg9CMPO3LvIL8fgJuGKByX3J7Io/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM5pm9Xjrz88Lcq_u03J-XqBw-dWkNSX-iCxgeycPKm1pzI-frSTrtmWWDxRyyYAU5LKrTp1o1QY73dxiDHmRYba4rQsicwf0OJaRUzlOPsaIQhuu01Sg9CMPO3LvIL8fgJuGKByX3J7Io/" /></a></div><b><span class="Apple-style-span" style="color: #45818e;">StartDO</span></b> nace producto de una iniciativa en conjunto, del deseo particular pero con objetivos comunes de un grupo de profesionales en distintas áreas con el fin de aunar esfuerzos para ayudar a aquellos emprendedores quienes de una forma u otra tengan una idea de proyecto tecnológico y que por alguna razón, sea de desconocimiento, falta de recursos o capital, vean su idea “morir” al pasar del tiempo.<br />
<br />
Según las palabras de David Tavarez (<span class="Apple-style-span" style="color: #45818e;"><i>@davidtavarez</i></span>) el origen de <b><span class="Apple-style-span" style="color: #45818e;">StartDO</span></b> se podría remontar al reciente <b><a href="http://twitt.do/"><span class="Apple-style-span" style="color: #0b5394;">TwittDO</span></a></b>, en la presentación del Barcamp de <b><span class="Apple-style-span" style="color: #45818e;">Jorge Vargas</span></b> (<span class="Apple-style-span" style="color: #45818e;"><i>@elpargo</i></span>) sobre StartUps en Dominicana. <i>“Se entiende que en el país se cumplen los "requerimientos" básicos para iniciar una StartUp y tenemos que empezar hablar de ello”</i>.<br />
<br />
De todos es sabido que muchas ideas se quedan estancadas y terminan en una frustración para quien pretende emprenderla ya que algunos no tienen la posibilidad o el recurso de gestión de asesoría en cuanto a la planificación, factibilidad, desarrollo del modelo o plan de negocios, o de cuestiones financieras o de patrocinio para llevar a cabo esta idea que muchas veces tiene un gran potencial.<br />
<br />
Es importante mencionar que la idea no es nueva, hace ya aproximadamente se viene cociendo una idea similar que muchos conocemos como <span class="Apple-style-span" style="color: #0b5394;">#apoyalolocal</span> liderada por <i><span class="Apple-style-span" style="color: #45818e;">@davidtavarez</span></i> y <b><span class="Apple-style-span" style="color: #45818e;">William Méndez </span></b>(<i><span class="Apple-style-span" style="color: #45818e;">@wm3ndez</span></i>) y contando con el apoyo de <b><span class="Apple-style-span" style="color: #45818e;">ROCK</span></b> (<i><span class="Apple-style-span" style="color: #45818e;">@ROCKRD</span></i>) y varias personas de la <b><span class="Apple-style-span" style="color: #45818e;">comunidad twittera Dominicana</span></b>.<br />
<br />
Apenas es el comienzo de algo que sin dudas será de mucho provecho para el desarrollo de potenciales negocios tecnológicos o a través de la internet, fomentar y contribuir a mejorar la calidad de la web y sus actores en cuanto a protocolos, estándares, competitividad, reglas de juego y sobre todo a compartir experiencias y conocimientos.<br />
<br />
<b><span class="Apple-style-span" style="color: #45818e;">StartDo es un proyecto libre, sin ningún carácter de exclusividad por lo que todos estamos bienvenidos a participar, todos tenemos algo que aportar.</span></b> El concepto se basa en establecer un networking de apoyo a proyectos locales con alcance nacional o internacional.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsg3RGKnbitRYKsFH9qSVUS-MS3Nh_7-RmbiVdOQhGPkCRfpijhsiRZ8D2IE6M40tI379li1EFc_mkjw-hGF2FU6_dmDXB9anFGHCE-sI7Pky1jC3G5kbwwgT4USRQtEVjPhjZrbWN_eV-/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsg3RGKnbitRYKsFH9qSVUS-MS3Nh_7-RmbiVdOQhGPkCRfpijhsiRZ8D2IE6M40tI379li1EFc_mkjw-hGF2FU6_dmDXB9anFGHCE-sI7Pky1jC3G5kbwwgT4USRQtEVjPhjZrbWN_eV-/" width="374" /></a></div><br />
En la primera reunión realizada en el Foodcourt de Plaza Central el sábado 8 de Mayo de 2010 estuvieron presentes:<br />
<span class="Apple-style-span" style="color: #45818e;"><i><br />
<br />
@McTekk, @alopezvalerio, @himself, @jguerrero, @OmarJavier15, @Warchiefx, @Cor3d, @Junihh, @shady , @Bekace, @DarioMartinezB, @Eridenestrella, @Darcast, @elcuni, @elpargo<br />
</i></span>.<br />
<br />
Puedes seguirnos en <b><span class="Apple-style-span" style="color: #45818e;">@startDO</span></b> o entérate de mas información a través del hashtag <span class="Apple-style-span" style="color: #45818e;">#startDO</span>.Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com2tag:blogger.com,1999:blog-5550839891907485782.post-32108836844826959082010-05-04T12:03:00.000-04:002010-05-04T12:03:13.161-04:00Empezar a Usar CSS quinta Parte<div style="text-align: justify;">En un artículo anterior “<a href="http://comudo.blogspot.com/2010/01/empezar-usar-css-cuarta-parte.html">Empezar a Usar CSS Cuarta Parte</a>” de esta serie de artículos, conocimos las reglas para <b><span class="Apple-style-span" style="color: #45818e;">declarar y escribir las hojas de estilos</span></b> y cómo llamarlas o importarlas desde un enlace.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">En este artículo veremos cómo crear los contenedores principales de un sitio web (head, main body, footer), también conoceremos algunas reglas e <b><span class="Apple-style-span" style="color: #45818e;">estilos de posición</span></b> que nos resultaran de gran provecho. Entender la esencia de estas reglas pueden hacer la diferencia entre volvernos depresivos o no, a la hora de usar las hojas de estilos en cascadas <b><span class="Apple-style-span" style="color: #45818e;">CSS</span></b>.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6OODlfO-3yawVsNEAhrrP5pll_K9RentwEa8fb7jMjWXm0x6hflydrtuCnL81FjgMpM1vM951NJnos6fHh_b0URaexhVbGwlPNd04qw16uPqGsOoEflySgj2NjOBfXvWBflRFsA0gY-gq/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6OODlfO-3yawVsNEAhrrP5pll_K9RentwEa8fb7jMjWXm0x6hflydrtuCnL81FjgMpM1vM951NJnos6fHh_b0URaexhVbGwlPNd04qw16uPqGsOoEflySgj2NjOBfXvWBflRFsA0gY-gq/" /></a></div><br />
</div><div style="text-align: justify;">Voy a empezar con un concepto interesante: “<i>pensar que la cascada empieza desde el área del monitor mismo</i>”.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Explico: Con las hojas de estilos podemos controlar totalmente lo que se muestra en los web browsers (<i>no voy a incluir a nuestra pesadilla: IE</i>), eso lo podemos lograr aplicando estilos desde el mismo TAG “<b><span class="Apple-style-span" style="color: #45818e;">HTML</span></b>” o desde el TAG “<b><span class="Apple-style-span" style="color: #45818e;">BODY</span></b>” teniendo en cuenta que desde el <b><span class="Apple-style-span" style="color: #45818e;">TAG HTML</span></b> tenemos aun mas control de la pagina que se muestra en el web browser, o sea, mientras más arriba de la cascada más control.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUIo5xp5vHW-yAgkWWKzdGq_hdx3yXTfvunjXkPjA7BjddlTmEv6vsWUMV3jXtiPeVN9pvmO6wgN3Ql0MDYMGpxFUDlVqTvBtyCdHpe_lgMit-LB4Gqqtb5AivRrzE0h88Lg-N2Cv3e1w/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUIo5xp5vHW-yAgkWWKzdGq_hdx3yXTfvunjXkPjA7BjddlTmEv6vsWUMV3jXtiPeVN9pvmO6wgN3Ql0MDYMGpxFUDlVqTvBtyCdHpe_lgMit-LB4Gqqtb5AivRrzE0h88Lg-N2Cv3e1w/" width="320" /></a></div>Por lo que no es lo mismo aplicar estilos al TAG “<b><span class="Apple-style-span" style="color: #45818e;">HTML</span></b>” que al TAG “<b><span class="Apple-style-span" style="color: #45818e;">BODY</span></b>”, resalto esto porque lo veremos más adelante y es importante tenerlo en cuenta.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Bueno, basta de <i>bla bla bla</i> y vayamos al punto. Vamos a empezar conociendo la diferencia entre las propiedades <b><span class="Apple-style-span" style="color: #45818e;"><i>padding y margin</i></span></b>.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><b>Margin:</b> es una propiedad CSS que define un espacio dado de forma exterior de cualquier elemento. O sea, si queremos separar de forma exterior o “<i>hacia afuera</i>” a un elemento con relación a otro o con relación al espacio (monitor) le aplicamos la propiedad margin. </div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Esta propiedad nos brinda la posibilidad de especificar los lados hacia donde queremos aplicar el margen, ej.: <span class="Apple-style-span" style="color: #45818e;">margin-top, margin-left</span>, etc., además nos permite acortar la propiedad con un shorthand ej.: <br />
<span class="Apple-style-span" style="color: #45818e;">margin: 10px 6px 0px 6px</span> , esto se lee usando las manecillas del reloj: <br />
<span class="Apple-style-span" style="color: #45818e;">top= 10px / right = 6px / botton= 0px y left= 6px</span>, de manera que no haya necesidad de especificar cada propiedad por separado y por lo tanto se optimiza la hoja de estilos.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmykNX6Cfj9kqjhamTZYmMsPoyt7swiixpAzOsy0TTvMqCLMf63HYEg0d1eN-Iv4nJQAlrNCmIvSzsqzrJ8WiIjxHMOjBJtJ17rM8HBrk11eZ4Iq7R8AIi-ZwxcheX4SRyhRyN5r7oYN-q/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmykNX6Cfj9kqjhamTZYmMsPoyt7swiixpAzOsy0TTvMqCLMf63HYEg0d1eN-Iv4nJQAlrNCmIvSzsqzrJ8WiIjxHMOjBJtJ17rM8HBrk11eZ4Iq7R8AIi-ZwxcheX4SRyhRyN5r7oYN-q/" width="320" /></a></div>Veamos un ejemplo del uso de la propiedad margin:</div><div style="text-align: justify;">Vamos a crear el heading de un sitio web basado en esta maquetación (preferiblemente hecha por un diseñador web, no por un diseñador grafico):</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPRQFABYMIgs88sIH68k2reDI_mksRidCTgeGi_lQAW5Q9Nkmqw1Cjd5jdmBnIX4Pg1N5jqVvXl0oCv1CcWzK_Wlg-uSJHQsdgmXAeQhywRWcIwpLZ8iqz_UKakGi5DAcOB6yW2BpXmLV2/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPRQFABYMIgs88sIH68k2reDI_mksRidCTgeGi_lQAW5Q9Nkmqw1Cjd5jdmBnIX4Pg1N5jqVvXl0oCv1CcWzK_Wlg-uSJHQsdgmXAeQhywRWcIwpLZ8iqz_UKakGi5DAcOB6yW2BpXmLV2/" width="320" /></a></div>Como vemos tenemos que definir:</div><div style="text-align: justify;">1- Un contenedor para el heading, que ocupa 100% del ancho del espacio (monitor).</div><div style="text-align: justify;">2- Un cuerpo de contenido o main container que ocupa 960 pixeles de ancho.</div><div style="text-align: justify;">3- Un contenedor del footer que ocupa 100% del ancho del espacio (monitor).</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Para lograr esto, vamos a empezar dictándole algunas instrucciones al TAG <b>BODY</b> de nuestra página <b>HTML</b></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzq75C0XkbU_RfkqL-HNZ713bVYPUDFLpR9lDeooHUaDQ0LbLzzlNuemnbv6zfAIDVcyHrJpmArYB4VxDrJnG7ZeB3DVUfi8BcXezKf9Evbl_sArCfHTpzyVG1FThzezxOtR3FzUG1lTY/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzq75C0XkbU_RfkqL-HNZ713bVYPUDFLpR9lDeooHUaDQ0LbLzzlNuemnbv6zfAIDVcyHrJpmArYB4VxDrJnG7ZeB3DVUfi8BcXezKf9Evbl_sArCfHTpzyVG1FThzezxOtR3FzUG1lTY/" /></a></div>Luego insertamos un div y le aplicamos un selector tipo id, lo haremos tipo id porque en todo el documento <b>HTML</b> no volveremos a usar esta clase, si fuera necesario re-utilizar estos estilos, pues lo declaramos como una clase.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi456ccItVMnRd-MODnU30yZiIXzXgS21Ldj9oJ3cTH15xgYBVHZ5iGbKLxAwGf1FaOz21Vgtm0onTVhvRJbNmA_CZkfPhXPaGDrXfkk6ON_qvoR8zBpK921xhNvRNwlexZra076GhD9bSd/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi456ccItVMnRd-MODnU30yZiIXzXgS21Ldj9oJ3cTH15xgYBVHZ5iGbKLxAwGf1FaOz21Vgtm0onTVhvRJbNmA_CZkfPhXPaGDrXfkk6ON_qvoR8zBpK921xhNvRNwlexZra076GhD9bSd/" /></a></div>Para el main container haremos algo parecido pero con la diferencia de que aquí especificaremos un ancho en pixeles.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipnYMlUhOrQIYGKS1rDuJlQdWQJDWHH7w74o0YSBYCZwYQQtnGAsuAEWlYsNTv_IpfZ3JLqetJGL4XWiOp9ywarskgsa8F59cUC_Q19GXluPc5eIdnmxw0mz9N3DLH90b2zZ69lqPJ1djM/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipnYMlUhOrQIYGKS1rDuJlQdWQJDWHH7w74o0YSBYCZwYQQtnGAsuAEWlYsNTv_IpfZ3JLqetJGL4XWiOp9ywarskgsa8F59cUC_Q19GXluPc5eIdnmxw0mz9N3DLH90b2zZ69lqPJ1djM/" /></a></div>Para el footer vamos a copiar y pegar la clase del heading y le cambiaremos el nombre y el alto.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PSym2Knu58eMTxncU38ITKjqs3XU0ijcqthNUxENXWPRGyNtDvxrbmqjx6krZ3S9BA4ZQ2aKHBcMRnPCAAfFajVIpknBe2P7gPNMgU5-eJ7KUie0cpoH2Fa1fROao0Yv7AxStsmOXEko/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PSym2Knu58eMTxncU38ITKjqs3XU0ijcqthNUxENXWPRGyNtDvxrbmqjx6krZ3S9BA4ZQ2aKHBcMRnPCAAfFajVIpknBe2P7gPNMgU5-eJ7KUie0cpoH2Fa1fROao0Yv7AxStsmOXEko/" /></a></div>Aquí tenemos ya el layout principal donde colocaremos nuestro contenido. Ahora, veamos la propiedad padding.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Al igual que margin, la propiedad <b><span class="Apple-style-span" style="color: #45818e;">padding</span></b> crea un espacio entre los elementos pero con la particularidad de que lo hace “<i>hacia adentro</i>”, es decir, el padding se utiliza para separar de forma interna los elementos a que se le aplica, a partir de los bordes del contenedor en que se encuentra. Esta propiedad también nos da la posibilidad de especificar los lados hacia donde queremos aplicar el margen interno o padding, ej.: <br />
<span class="Apple-style-span" style="color: #45818e;">padding -top, padding -left</span>, etc., además nos permite acortar la propiedad con un shorthand ej.: <br />
<span class="Apple-style-span" style="color: #45818e;">padding: 10px 6px 0px 6px</span> , que se lee usando las manecillas del reloj: <br />
<span class="Apple-style-span" style="color: #45818e;">top= 10px / right= 6px / botton= 0px y left= 6px</span>.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCuDN9sIED7O0ZxmKx1jNrm9f5f9n92MAP3gSpdpRyToiznPf8sy3sPAu7QH8918g29SycecaIMdEsbMdXjCBbZL-dZzGk2PM59zTtslH0YyhmaBxynEiiIiuz32pdtNAowNcmuZ7Q6Ml/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCuDN9sIED7O0ZxmKx1jNrm9f5f9n92MAP3gSpdpRyToiznPf8sy3sPAu7QH8918g29SycecaIMdEsbMdXjCBbZL-dZzGk2PM59zTtslH0YyhmaBxynEiiIiuz32pdtNAowNcmuZ7Q6Ml/" /></a></div>En caso de que usemos <span class="Apple-style-span" style="color: #45818e;">padding: 10px</span>; se aplicara un padding de <i>10 pixeles</i> a cada uno de los lados del elemento HTML:</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVO5h0n-2kKmAY3CbQUEsmfz0WcCaIdVTGWkqezx1W1s2uP6-1D279tjJNKNqEy0xtcoduSlDVsfqdzeLbMkOufVJzokhBu931m1d4hv9bw9KlzqEtWG4Jb-yk9M1CBRic7lPWvP6GSetm/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVO5h0n-2kKmAY3CbQUEsmfz0WcCaIdVTGWkqezx1W1s2uP6-1D279tjJNKNqEy0xtcoduSlDVsfqdzeLbMkOufVJzokhBu931m1d4hv9bw9KlzqEtWG4Jb-yk9M1CBRic7lPWvP6GSetm/" /></a></div>Un uso muy común de margin y padding es el que se utiliza para controlar el espacio de un TAG “<b><span class="Apple-style-span" style="color: #45818e;">H1</span></b>”. Cuando estamos comenzando a conocer las <b>reglas CSS</b> puede resultarnos un tanto confuso ya que a veces obtenemos resultados inesperados o no deseados.</div><div style="text-align: justify;">Vamos a experimentar con un TAG <b>H1</b>. Personalmente utilizo una técnica de “<i>colorear</i>” el background del elemento <b><span class="Apple-style-span" style="color: #45818e;">HTML</span></b> para comparar los resultados de una forma más visual, entonces tendremos:</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_qVi5dYYjGOqx0MiT8VOKrBQUyDmsOMHUK_88SeNfc8yoI6C0l7ZvG1LB-1vg5jV1YtuZDcY8bbhkKKX0o8BFg3epD8aEXkxj6XgMchUuc4_t5Sg-_qFVDzIY61416XmRu5D05-MrhUN/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_qVi5dYYjGOqx0MiT8VOKrBQUyDmsOMHUK_88SeNfc8yoI6C0l7ZvG1LB-1vg5jV1YtuZDcY8bbhkKKX0o8BFg3epD8aEXkxj6XgMchUuc4_t5Sg-_qFVDzIY61416XmRu5D05-MrhUN/" /></a></div>Si aumentamos el número de pixeles aplicados al padding del elemnto <b><span class="Apple-style-span" style="color: #45818e;">H1</span></b> tendremos como resultado:</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQxew3MoVZ0_PNzbzS94AlYbRrwGYEjwWPV95jLCzTn-5ocFt0gl8-Ky9Qav4OtuyuMhhzNnQ8d60UZwp8ehdXuHtwbRvH2I2iJd8Qsr7zCd8JVY2Yt8C7U9hgrMvLFwAV5M0h9sOxSaD/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQxew3MoVZ0_PNzbzS94AlYbRrwGYEjwWPV95jLCzTn-5ocFt0gl8-Ky9Qav4OtuyuMhhzNnQ8d60UZwp8ehdXuHtwbRvH2I2iJd8Qsr7zCd8JVY2Yt8C7U9hgrMvLFwAV5M0h9sOxSaD/" /></a></div>Si aumentamos el número de pixeles aplicados al margin del elemnto <b><span class="Apple-style-span" style="color: #45818e;">H1</span></b> tendremos como resultado:</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQ7iRsGHi1X3o56Vuf5NvwrLE06b9_9qDNXQvyy8GM0pA2hKLHtoJoHJwny0ahZ5_qdGVremxaqR0FQxkMWAz_JahlYxPpyE__nf89buAgVLgnyJigSVNVinpUXVZTRUDsF0BpPHRJRD5/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQ7iRsGHi1X3o56Vuf5NvwrLE06b9_9qDNXQvyy8GM0pA2hKLHtoJoHJwny0ahZ5_qdGVremxaqR0FQxkMWAz_JahlYxPpyE__nf89buAgVLgnyJigSVNVinpUXVZTRUDsF0BpPHRJRD5/" width="247" /></a></div>Entonces, con este ejemplo podemos tener una idea más clara de qué podemos conseguir con <i><span class="Apple-style-span" style="color: #45818e;">margin y padding</span></i>.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Con los ejemplos vistos hemos conocido las propiedades básicas para crear un layout, es importante saber que existen diferentes tipos (<i><span class="Apple-style-span" style="color: #45818e;">elásticos, fijos, líquidos, centrados, etc</span></i>.) que podríamos ir conociendo o experimentando, lo importante como ya he mencionado, es conocer la esencia de lo que se puede conseguir usando las diferentes propiedades o reglas CSS disponibles. </div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">En el próximo articulo abundaremos sobre las diferentes unidades de medida usadas en <b><span class="Apple-style-span" style="color: #45818e;">CSS</span></b>, los beneficios o desventajas y como y porque usarlas dependiendo del elemento a que le aplicaremos estilos.</div><div style="text-align: justify;">Hasta la próxima.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Articulos Anteriores:</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://comudo.blogspot.com/2010/01/empezar-usar-css-cuarta-parte.html">Empezar a Usar CSS - Cuarta Parte</a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://comudo.blogspot.com/2009/12/empezar-usar-css-tercera-parte.html">Empezar a Usar CSS - Tercera Parte</a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://comudo.blogspot.com/2009/11/empezar-usar-css-segunda-parte.html">Empezar a Usar CSS - Segunda Parte </a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://comudo.blogspot.com/2009/08/empezar-usar-css.html">Empezar a usar CSS</a> (Primera Parte)</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div>Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com3tag:blogger.com,1999:blog-5550839891907485782.post-82322806776087457472010-04-19T16:53:00.003-04:002010-04-19T16:57:59.758-04:00Adobe Flash CS5 permite exportar a HTML 5<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.xssed.com/files/image/News/adobe-flash.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 422px; height: 317px;" src="http://www.xssed.com/files/image/News/adobe-flash.png" border="0" alt="" /></a><br />Adobe admitió oficialmente que tecnologías como HTML 5 implementadas en dispositivos como el <span style="font-weight:bold;">iPhone</span> y el <span style="font-weight:bold;">iPad</span> son un peligro para su negocio, y ahora nos llega esta otra sorpresa: Las herramientas de generación de Flash en el <span style="font-weight:bold;">Adobe CS5</span> que salió ayer al mercado, permiten exportar animaciones básicas de Flash al componente Canvas de <span style="font-weight:bold;">HTML 5</span> (generando todo el Javascript necesario para crear las animaciones correspondientes).<br /><br />Esto, mis amigos desarrolladores de Flash debe servirles como clara señal de que Adobe parece haber entendido el mensaje de la industria: Flash no tiene futuro al largo plazo, y será reemplazado por HTML 5.<br /><br /><br />Basado en este hecho de Flash CS5 exportando a HTML 5, se hace clara la estrategia de Adobe hacia el futuro de Flash: Explotar el talento de desarrolladores de Flash, para permitir que con las habilidades que ya poseen puedan exportar su trabajo a la nueva generación de soluciones basadas en HTML 5.<br /><br />No duden tampoco que Adobe proveerá en el futuro (¿quizás iniciando con Adobe CS6?) herramientas para el desarrollo nativo de contenido para HTML 5, saltando por completo a Flash (aunque dudo que veremos a Flash o sus asociadas herramientas desaparecer por varios años mas, por lo que tampoco es para que entremos todos en pánico al respecto).<br /><br />Fuente: <a href="http://eliax.com">eliax.com</a>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com2tag:blogger.com,1999:blog-5550839891907485782.post-85746564232246136152010-02-23T17:58:00.002-04:002010-02-23T18:04:33.741-04:00Que es el "Reset CSS"?<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_GTkHp1bVvFA/S4RQ1ljSlJI/AAAAAAAAAQU/o5ILoX6gmBY/s1600-h/css_reset.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 214px;" src="http://3.bp.blogspot.com/_GTkHp1bVvFA/S4RQ1ljSlJI/AAAAAAAAAQU/o5ILoX6gmBY/s320/css_reset.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5441563131313820818" /></a><br />Los <span style="font-weight:bold;">Reset CSS</span> son unas hojas de estilo en cascada que se suelen incluir al comienzo de un documento <span style="font-weight:bold;">HTML</span>, y cuya función es la de minimizar, en la medida de lo posible, las múltiples diferencias visuales que se dan a la hora de mostrar una misma página web, en diferentes navegadores, causa de que cada navegador implementa su hoja de estilos propia e interna, con determinados valores por defecto, que no siempre siguen la recomendación de la organización <span style="font-weight:bold;">W3C</span>.<br /><br />El consorcio <a href="http://www.w3.org/">W3C</a>, junto con su especificación de CSS 2.11 del 23 de abril de 2009, publicó en su recomendación, un valor por defecto para cada propiedad de CSS que deberían adoptar los agentes de usuario. Debido a que algunos navegadores hicieron caso omiso a sus indicaciones, los diseñadores web se han visto obligados a recurrir al uso de este tipo de trucos para garantizar la correcta visualización en la mayoría de navegadores.<br /><br /><span class="Apple-style-span" style="color:#FF0000;"><span class="Apple-style-span" style="font-size: large;">* { margin: 0; padding: 0; }</span></span><br /><br />Esa única línea indica, y con el selector universal de CSS representado por un asterisco, que todos los elementos contenidos en el HTML al que se aplique, carecerán de márgenes. De esa manera, el diseñador se verá obligado a declarar después los márgenes necesarios en el diseño de su página web, en cada uno de los lugares donde sea necesario, sin tener que dejar ese aspecto a decisión de ningún navegador, y minimizando por tanto, las diferencias visuales entre los mismos.<br /><br />Los Reset CSS pueden contener esa y otras muchas líneas de código que, en su conjunto, servirán al diseñador web para unificar su visualización entre navegadores.<br /><br />Fuente: <a href="http://es.wikipedia.org/wiki/Reset_CSS">Wikipedia</a>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com3tag:blogger.com,1999:blog-5550839891907485782.post-88222230216437488982010-02-23T14:22:00.001-04:002010-02-23T14:24:44.884-04:00Tetris HumanoVideo creado motivo los 25 años de tetris.<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/G0LtUX_6IXY&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/G0LtUX_6IXY&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="344"></embed></object>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-72649953105776374082010-02-23T11:23:00.002-04:002010-02-23T11:33:50.679-04:00La mejor publicidad del mundo 2009<b>Gran premio Titanium & Integrated</b><br />Obama/Biden Presidential Campaign, Obama for America<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/v2cPKjzXdss&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/v2cPKjzXdss&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><br /><b>Gran Premio: “Carousel”, de Tribal DDB Amsterdam para Philips.<br />Sección de Film</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/C5yhxqkJiAQ&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/C5yhxqkJiAQ&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Pure Water”, de Publicis Mojo Sidney para Lion Nathan (James Boag´s Draught)</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/fS4gPCDDL_U&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/fS4gPCDDL_U&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Love distance”, de GT Tokyo para Sagami Rubber Industries (Condoms)</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/FrgWYl-NPK4&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/FrgWYl-NPK4&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Crash Test Panda”, de Marcel Paris para Fiat Car Range</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/hW02-8cA7MI&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/hW02-8cA7MI&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Dog fish”, de Almap BBDO Sao Paulo Brasil para Volkswagen</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/rvcgAjs6AYQ&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/rvcgAjs6AYQ&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “A day in the life of Chennai”-”The times of India”, de JWT India, Mumbai, para Bennett Coleman and co.</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/fEU_qyiQmYQ&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/fEU_qyiQmYQ&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Hindú”, de Savaglio/TBWA Buenos Aires para Gobierno de Buenos Aires BAFICI Indie Film Festival</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/rxJVxjKEHDI&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/rxJVxjKEHDI&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Gucci Flora”, de Filmmaster Milán para Gucci Frangance</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/fNFcxu6I1_4&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/fNFcxu6I1_4&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro “8 kilometre”, de Mother London para Stella Artois 4%</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/-Uhw9b6SD6w&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/-Uhw9b6SD6w&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Chambers video art piece”, de Barrie D´Rozario Murphy Minneapolis USA para Chambers Hotel</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/nugiVq75GZw&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/nugiVq75GZw&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><b>Oro: “Changed opening credits & Episodes”, de Mortierbrigade Brussels para Radio Station Brussels</b><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/bS54S7cDodc&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/bS54S7cDodc&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br />Hemos extraído esta información de <a href="http:///www.marcocreativo.es">www.marcocreativo.es</a>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-50597207559069980052010-02-22T09:20:00.003-04:002010-02-22T09:29:31.880-04:00SEO en la actualidad<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_GTkHp1bVvFA/S4KGEJtglJI/AAAAAAAAAQM/qJWenl82uro/s1600-h/SEO.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 228px; height: 228px;" src="http://1.bp.blogspot.com/_GTkHp1bVvFA/S4KGEJtglJI/AAAAAAAAAQM/qJWenl82uro/s320/SEO.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441058705701377170" /></a><br />El <b>SEO</b> (Posicionamiento en motores de búsqueda) es un tema complejo. Existen personas y empresas que afirman conocer cómo funciona google, cual es la <b>fórmula del pagerank</b> de google, etc. También existen otros que evangelizan sobre jerarquización de la información, estructura del sitio, entre otros factores. Estos que acabo de mencionar yo también los considero importantes, pero por mi experiencia puedo decir que son solo una parte de la practica que hoy día llamamos SEO.<br /><br />El <b>propósito de google</b> para con nosotros siempre ha sido organizar la mayor cantidad de información posible y traerla a los resultados de nuestras búsquedas, intentando mostrar frente a nosotros los resultados más relevantes de nuestras búsquedas. En la actualidad google está empezando a lograr sus objetivos, lo cual le quita peso a <b>posicionar keywords en google</b> como practica de SEO, porque ahora debemos preocuparnos un poco mas por otros factores que van mas allá de posicionar palabras para <b>aparecer en los resultados de google</b>.<br /><br />Para hablar de SEO en la actualidad hay que hablar de presencia en internet “NO en Google” y la única manera de lograr esto es creando contenidos y teniendo participación en la red.<br /><br />SEO hoy día es hacer la planificación del website, crearlo y optimizarlo (mediante una estructura viable para los motores de búsqueda) crear tu medio ambiente (mediante redes sociales) generando un “word of mouth” entre los usuarios para atraer visitas y hacer que esas visitas conviertan logrando el retorno de nuestra inversión (ROI).<br /><br />El SEO es un trabajo constante que como ya vemos evoluciona y lo seguirá haciendo. En el futuro todos los motores de búsqueda nos traerán resultados sumamente personalizados, lo cual seguirá desmoralizando la práctica de solo enfocarse en posicionar keywords en los motores de búsqueda. Las <b>redes sociales</b> seguirán aumentando su poder y seguiremos viendo en los resultados de google u otros motores de busqyeda, como el perfil de facebook o los tweets de una empresa aparece en primeras posiciones que la pagina misma de la empresa. Todo esto es símbolo de que el SEO evoluciona de manera muy rápido y cada vez lo hará más rápido mientras otros medios “como las redes sociales” que son parte del ecosistema SEO, también lo hagan.Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com2tag:blogger.com,1999:blog-5550839891907485782.post-289614690334129252010-02-19T14:02:00.003-04:002010-02-23T11:09:30.417-04:00La guerra de las camisetas T-Shirt WarOtro video más basado en la técnica de stop motion. El video que verán a continuación es tal vez uno de los videos más interesantes que has visto jamás, espero lo disfrutes e invites a tus amigos a que pasen por <a href="http://comudo.blogspot.com/">COMUDO</a> a verlo.<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/DKWdSCt4jGE&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/DKWdSCt4jGE&color1=0xb1b1b1&color2=0xcfcfcf&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-37826347153638887382010-02-08T16:15:00.004-04:002010-02-23T11:10:10.049-04:00El Arte del Stop Motion [Videos]<div style="text-align: justify;"><b>Stop Motion</b> es una <b>técnica de animación</b> que consiste en aparentar el movimiento de objetos estáticos por medio de una serie de imágenes fijas sucesivas. En general se denomina animaciones de stop motion a las que no entran en la categoría de dibujo animado, ni en la animación por ordenador; esto es, que no fueron dibujadas ni pintadas, sino que fueron creadas tomando imágenes de la realidad.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">La frecuencia de grabación es, igual que en el cine, de <b>24 imágenes por segundo</b>, para que el ojo humano pueda percibir un movimiento continuo. Para 1 minuto de grabación se necesitan 1500 imágenes fijas aproximadamente.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Hay dos grandes grupos de animaciones stop motion: la <b>animación con plastilina</b> o cualquier otro material maleable, llamada en inglés claymation, y las animaciones utilizando objetos rígidos.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">La animación con plastilina puede hacerse al "estilo libre", cuando las figuras se van transformando en el progreso de la animación. Puede también orientarse a personajes, que mantienen una figura consistente en el transcurso de la película.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-size:large;">Ejemplos</span></b></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/BpWM0FNPZSs&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/BpWM0FNPZSs&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/_xUijgqZ-xM&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/_xUijgqZ-xM&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/eQ8ZWMlObGE&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/eQ8ZWMlObGE&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/CLUAbkRUvVQ&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/CLUAbkRUvVQ&color1=0x3a3a3a&color2=0x999999&hl=es_ES&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object><br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/wcUUDyAOkmY&color1=0x0&color2=0x111111&hl=en_US&feature=player_embedded&fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/wcUUDyAOkmY&color1=0x0&color2=0x111111&hl=en_US&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"></embed></object></div>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com2tag:blogger.com,1999:blog-5550839891907485782.post-32487198600235044802010-02-08T10:25:00.004-04:002010-02-08T10:32:55.106-04:00Ola del mercadeo móvil, República Dominicana<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4QASYDmYyEUG5BwLUQyziuwqLEAay_25ZBM1vNTFDkrqWEXFn_Sqx6EZ2O7GdYNUR1IRwrgWUe3x5yyOkDDm8OvCurQeUBqE0dJSVfMVi_A00au-OnwYKxuo4fDSvnu5kr7NTbgm6IoQY/s1600-h/movil_transformer.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4QASYDmYyEUG5BwLUQyziuwqLEAay_25ZBM1vNTFDkrqWEXFn_Sqx6EZ2O7GdYNUR1IRwrgWUe3x5yyOkDDm8OvCurQeUBqE0dJSVfMVi_A00au-OnwYKxuo4fDSvnu5kr7NTbgm6IoQY/s320/movil_transformer.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5435879747090617794" /></a><br />Algunos dicen que se han <a href="http://www.cnnexpansion.com/mi-dinero/2010/01/28/usuarios-buscan-vivir-a-traves-del-movil">"colado en tu vida"</a>, otros le llaman los siguientes <a href="http://fora.tv/2009/09/24/Mobile_Phones_The_Next_4_Billion_with_Tomi_Ahonen">"4 billones!"</a> y en mi país apenas nos rondamos frente a la puerta de la sociedad de la información. En este mes de febrero 2010 alcanzariamos una teledensidad de 100% según el secretario de Estado y presidente del Instituto Dominicano de las Telecomunicaciones (Indotel), doctor <a href="http://www.indotel.gob.do/noticias/noticias/rd-logra-97-teledensidad-telefonica-en-2009-97-de-cada-100-dominicanos-tiene-telefonos.html">José Rafael Vargas</a>.<br /><br />Tal vez mi empeño en que mi país se desarrolle empreña mi optimismo o al ver a un vendedor de tarjetas telefónicas hacer gabelas con el limpiavidrios en cada esquina me revela al gigante durmiente de la República Dominicana. Aun que muchos piensan que estamos muy lejos de alcanzar la sociedad del conocimiento, mucho si desconocen la velocidad en que nos adaptaríamos a esta transición. Si se dan cuenta, la manera mas efectiva en que la República Dominicana pudo demostrar su solidaridad con Haití fue por sus donaciones via sms. Las plataformas existen y el usuario esta listó para explorar lo que le brinda.<br /><br />El ciclo de remplazo de un dispositivo móvil es de 18 meses comparado con una computadora personal que es de 3 años y medio. Esto significa que nos inmigran nuevos dispositivos de alta tecnología constantemente. Nos encontramos en el escenarión donde un limpiabotas está armado con un dispositivo con capacidad para interactuar con un mundo ilimitado. Sin embargo, solo estamos adoptando practicas que son relevantes en países más desarrollados. La integración de los microblogs a nuestros móviles como facebook y twitter los hemos heredado por su apogeo y él role que juega en los medios sociales pero nuestros dispositivos móviles nos brindan diferentes puertas que aún no hemos abierto.<br /><br />No es solo el mejor dispositivo que encaja en nuestra economía, es el mas preciso en cuanto a información del usuario, cuenta con un sistema de pagos integrado, captura el contexto social de consumo y es lo unico que cuenta con un navegador con realidad aumentada(<a href="http://layar.com/">Augmented Reality Browser</a>).<br /><br />Tal vez la simple idea de que dentro de la red de telecomunicación nos actualizaríamos mucho más rápido, para mucho es lo suficiente realidad aumentada pero lo que si es real es que nos movemos en "tiempo móvil". Relativamente reciente estamos integrando los sistemas GPS ya que contamos con nuestro primer <a href="http://www.ola.com.do/index.php">mapa virtual</a>. Esto no extiende a otra sala de <a href="http://www.mapiando.com/">posibilidades</a>.<br /><br />Podríamos empezar tan simple como tener Libros Móvil (M-book) disponible para descarga tal vez con la condición de una mini retroacción o hasta un "examen!".andyjerezhttp://www.blogger.com/profile/18130817863212984184noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-74204289873761645572010-02-03T14:47:00.000-04:002010-02-03T14:47:59.580-04:00Creando gráficos Web 2.0 usando Adobe Fireworks<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mPrzd4oPI/AAAAAAAAAIk/YQ4kiKNWJbU/s1600/img_01.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mPrzd4oPI/AAAAAAAAAIk/YQ4kiKNWJbU/s320/img_01.jpg" /></a></div><br />
<span class="Apple-style-span" style="font-family: Arial; font-size: small;"><span class="Apple-style-span" style="font-size: 13px;"><br />
</span></span><br />
<div style="text-align: justify;"></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">En este tutorial vamos a crear un gráfico para un web site 2.0 usando solo Adobe Fireworks<span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: small;">™<span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: medium;">, aunque ha sido creado en la versión CS3, todos los pasos se pueden hacer perfectamente usando versiones anteriores como la versión 8, CS, o CS2.</span></span></div><div style="text-align: justify;"><br />
<b><span class="Apple-style-span" style="color: #45818e;"><span class="Apple-style-span" style="font-size: small;">Nota: Este tutorial va enfocado para quienes poseen un conocimiento básico sobre el uso de las herramientas de Adobe Fireworks<span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: medium; font-weight: normal;"><span class="Apple-style-span" style="font-size: x-small;"><b><span class="Apple-style-span" style="color: #45818e;">™</span></b></span><span class="Apple-style-span" style="font-family: 'Times New Roman';"><b><span class="Apple-style-span" style="color: #45818e;"><span class="Apple-style-span" style="font-size: small;"> y nociones de diseño web. Nivel: Medio.</span></span></b></span></span></span></span></b></div><div style="text-align: justify;"><br />
Este gráfico, claro está, ya ha sido previamente bocetado en papel y lápiz, esa debe ser siempre una buena costumbre que nos evitará dolores de cabeza o perdida de tiempo y nos permitirá agilizar creando el gráfico e ir al grano. Bueno, manos a la obra.</div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mPsskkSKI/AAAAAAAAAIo/7PF5t7E0I0k/s1600/img_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mPsskkSKI/AAAAAAAAAIo/7PF5t7E0I0k/s400/img_1.jpg" width="400" /></a></div><div style="text-align: justify;">Como vemos, en la conceptualización hemos utilizado un elemento gráfico común que se repite en el diseño, no significa que debemos hacerlo siempre, pero en este caso se sigue la línea gráfica del sitio web.</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP3Xkd5VI/AAAAAAAAAJA/59PnSwoWW5Q/s1600/img_8.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP3Xkd5VI/AAAAAAAAAJA/59PnSwoWW5Q/s200/img_8.gif" width="200" /></a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Bien, vamos entonces a empezar por el layout, creamos un nuevo documento <i>536 X 272 pixeles</i>.</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mPtO9Ci1I/AAAAAAAAAIs/TPWFl3NTkGE/s1600/img_3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mPtO9Ci1I/AAAAAAAAAIs/TPWFl3NTkGE/s320/img_3.gif" width="320" /></a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-size: x-large;"><span class="Apple-style-span" style="color: #45818e;">Los Marcos</span></span></b></div><div style="text-align: justify;">Vamos a empezar creando el primero de los marcos que contienen las imágenes:</div><div style="text-align: justify;"><br />
1- Dibujamos un rectángulo con la herramienta <b>Rectangle Tool</b> de <i>140 X 114 pixele</i>s. </div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mPtQF7kMI/AAAAAAAAAIw/geSLAS0oD-4/s1600/img_4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mPtQF7kMI/AAAAAAAAAIw/geSLAS0oD-4/s320/img_4.gif" /></a></div><div style="text-align: justify;"><br />
2- Redondeamos las esquinas del rectángulo utilizando <b>Rectangle Roundness</b> ingresando un valor de <i>20</i>. </div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mPtTzlh2I/AAAAAAAAAI0/1vIaBx5kfFg/s1600/img_5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mPtTzlh2I/AAAAAAAAAI0/1vIaBx5kfFg/s320/img_5.gif" /></a></div><div style="text-align: justify;"><br />
3- Clonamos el rectángulo mediante el menú <b>Edit + Clone</b> o usando el Shortcut <i>Ctrl + Shift D</i>. (El rectángulo debe estar seleccionado).</div><div style="text-align: justify;"><br />
4- El rectángulo clonado se encuentra ahora encima del primero, procedemos entonces a llevar las esquinas a su estado normal usando <b>Rectangle Roundness</b> lo llevamos a cero. </div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mP2ng_J0I/AAAAAAAAAI4/-JjWkD3IYAg/s1600/img_6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mP2ng_J0I/AAAAAAAAAI4/-JjWkD3IYAg/s320/img_6.gif" /></a></div><div style="text-align: justify;"><br />
5- Tomamos el nuevo rectángulo y lo escalamos reducido a un tamaño proporcional de un cuarto de su tamaño original. </div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mP20zBYXI/AAAAAAAAAI8/1NQC_MNPh20/s1600/img_7.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mP20zBYXI/AAAAAAAAAI8/1NQC_MNPh20/s320/img_7.gif" /></a></div><div style="text-align: justify;"><br />
6- Ahora seleccionamos ambos rectángulos y lo soldamos mediante el menú <b>Modify + Combine paths + Union</b> <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP3Xkd5VI/AAAAAAAAAJA/59PnSwoWW5Q/s1600/img_8.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP3Xkd5VI/AAAAAAAAAJA/59PnSwoWW5Q/s320/img_8.gif" /></a></div><br />
</div><div style="text-align: justify;">Con este elemento gráfico que acabamos de crear ya tenemos una idea aproximada del layout. Procedemos entonces a duplicarlo hasta crear 3 elementos que nos servirán de marco para las imágenes que insertaremos más adelante y lo alineamos de manera que queden equidistantes uno del otro, asegurándonos de aplicarles un grosor de línea de <i>4 pixeles</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP3UwVDvI/AAAAAAAAAJE/oNm08i6N92o/s1600/img_9.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP3UwVDvI/AAAAAAAAAJE/oNm08i6N92o/s320/img_9.gif" /></a></div><br />
</div><div style="text-align: justify;">Desde aquí empezaremos a trabajar con colores que serán identificativos de cada elemento gráfico. Recomiendo siempre definir esos colores en una gama que usaremos para cada uno de los gráficos en matices alto, medio y bajo que nos servirán como color base, luces y sombras, muy importante para conseguir mayor realismo en las ilustraciones. Para esto:</div><div style="text-align: justify;"><br />
1- Definimos tres colores base para cada elemento. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mP3nsPOXI/AAAAAAAAAJI/feutQ63Fj8o/s1600/img_10.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mP3nsPOXI/AAAAAAAAAJI/feutQ63Fj8o/s320/img_10.gif" /></a></div><br />
</div><div style="text-align: justify;">2- Definimos los matices de luz y sombra derivados de este color base.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP8tS4uxI/AAAAAAAAAJM/xF_-PoPEHF0/s1600/img_11.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP8tS4uxI/AAAAAAAAAJM/xF_-PoPEHF0/s320/img_11.gif" /></a></div><br />
</div><div style="text-align: justify;">Ya que hemos definido los colores identificativos de cada elemento le aplicamos el color mas fuerte a cada marco.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mP8m01UQI/AAAAAAAAAJQ/8D4UIxhIz2c/s1600/img_12.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mP8m01UQI/AAAAAAAAAJQ/8D4UIxhIz2c/s320/img_12.gif" /></a></div><br />
</div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-size: x-large;"><span class="Apple-style-span" style="color: #45818e;">Las Flechas</span></span></b></div><div style="text-align: justify;">El siguiente paso será crear la flecha la cual dibujaremos y luego ilustraremos:</div><div style="text-align: justify;"><br />
1- Dibujamos un rectángulo de aproximadamente <i>150 X 70 pixeles</i>.</div><div style="text-align: justify;"><br />
2- Repitiendo el mismo procedimiento usado para crear los marcos vamos a redondear sus esquinas. </div><div style="text-align: justify;"><br />
3- Creamos un polígono usando la herramienta <b>Smart Polygon</b> de la caja de herramientas asignándole 3 lados para dibujar un triangulo. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mP9Ik_6SI/AAAAAAAAAJU/3bES_xmkJPU/s1600/img_13.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mP9Ik_6SI/AAAAAAAAAJU/3bES_xmkJPU/s320/img_13.gif" /></a></div><br />
</div><div style="text-align: justify;">4- Lo rotamos para convertirlo en la punta de la flecha, le modificamos el ancho y le aplicamos <b>Edit + Ungroup</b> para soldarlo al cuerpo de la flecha. En este paso debemos alinear horizontalmente la punta de la flecha al cuerpo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mP9A1oPWI/AAAAAAAAAJY/65jHr3fCcNk/s1600/img_14.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mP9A1oPWI/AAAAAAAAAJY/65jHr3fCcNk/s320/img_14.gif" /></a></div><br />
</div><div style="text-align: justify;">7- Tal como hicimos con el marco, unimos o soldamos los 2 elementos usando <b>Modify + Combine paths + Union</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP915zFfI/AAAAAAAAAJc/tn42stRrCw0/s1600/img_15.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mP915zFfI/AAAAAAAAAJc/tn42stRrCw0/s320/img_15.gif" /></a></div><br />
</div><div style="text-align: justify;">8- Clonamos la flecha creada y la expandimos para obtener una mas ancha. <b>Modify + Alter path + Expand Stroke</b> con un valor de 8.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQKNfRUwI/AAAAAAAAAJg/DEe8tms5CXA/s1600/img_16.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQKNfRUwI/AAAAAAAAAJg/DEe8tms5CXA/s320/img_16.gif" /></a></div><br />
</div><div style="text-align: justify;">9- Le aplicamos un <b>Split</b> para obtener las 2 flechas que ilustraremos.</div><div style="text-align: justify;"><br />
10- Seleccionamos la flecha mas grande y le aplicamos un relleno degradado o <b>Gradient Fill</b> Linear utilizando el color mas fuerte con una degradación al centro del color base. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQKnl1N0I/AAAAAAAAAJk/jp0JJ7YUdfw/s1600/img_17.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQKnl1N0I/AAAAAAAAAJk/jp0JJ7YUdfw/s320/img_17.gif" /></a></div><br />
</div><div style="text-align: justify;">11- Seleccionamos la flecha mas pequeña y dibujamos un rectángulo mas ancho encima colocado a partir de la mitad de su altura, usamos <b>Modify + Combine paths + Punch</b> y cortamos la mitad de la flecha.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQLLNIn-I/AAAAAAAAAJo/QT9VW43nZ2U/s1600/img_18.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQLLNIn-I/AAAAAAAAAJo/QT9VW43nZ2U/s320/img_18.gif" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQLe3hNKI/AAAAAAAAAJs/1kug9zGU8Sk/s1600/img_19.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQLe3hNKI/AAAAAAAAAJs/1kug9zGU8Sk/s320/img_19.gif" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"></div>12- Aplicamos un relleno degradado o <b>Gradient Fill</b> Linear utilizando el color blanco en ambos extremos, en el nivel de opacidad del color superior aplicaremos <i>60%</i> y en el nivel inferior aplicaremos <i>0%</i>.</div><div style="text-align: justify;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQLxjF-qI/AAAAAAAAAJw/Apmy9XBR51M/s1600/img_20.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQLxjF-qI/AAAAAAAAAJw/Apmy9XBR51M/s320/img_20.gif" /></a></div><br />
</div><div style="text-align: justify;">13- Eliminamos las líneas de la flecha mas pequeña y a la flecha mas grande le cambiamos el color de la línea a blanco y la aumentamos a <i>4 pixeles</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQYe0YauI/AAAAAAAAAJ0/pfmubc7CdiY/s1600/img_21.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQYe0YauI/AAAAAAAAAJ0/pfmubc7CdiY/s320/img_21.gif" /></a></div><br />
</div><div style="text-align: justify;">14- Ahora agrupamos las 2 flechas, la reducimos de tamaño y le ajustamos las proporciones para que queden parecidas a la imagen:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQY4CpluI/AAAAAAAAAJ4/bLhHcIYDMYw/s1600/img_22.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQY4CpluI/AAAAAAAAAJ4/bLhHcIYDMYw/s320/img_22.jpg" /></a></div><br />
</div><div style="text-align: justify;">15- Aplicamos una sombra y luego duplicamos para obtener la otra flecha a la que aplicaremos los colores ya definidos previamente. En este paso podemos jugar un poco con el tipo y la posición del <b>Gradient</b> para obtener mejores resultados. En este caso cambie el tipo de Gradient de ambas flechas de <b>Linea</b>r a <b>Radial</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQZZBeJvI/AAAAAAAAAJ8/RSEFfWV3ktE/s1600/img_23.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQZZBeJvI/AAAAAAAAAJ8/RSEFfWV3ktE/s320/img_23.jpg" /></a></div><br />
</div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-size: x-large;"><span class="Apple-style-span" style="color: #45818e;">Las Esferas</span></span></b></div><div style="text-align: justify;">Bien, ahora nos toca crear las esferas, el objetivo es que parezcan que son de cristal:</div><div style="text-align: justify;"><br />
1- Empezamos dibujando un círculo de <i>80 X 80 pixeles</i>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQZs4nm2I/AAAAAAAAAKA/IFMAljmOw_Y/s1600/img_24.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQZs4nm2I/AAAAAAAAAKA/IFMAljmOw_Y/s320/img_24.gif" /></a></div><br />
</div><div style="text-align: justify;">2- Aplicamos un <b>Gradient Fill</b> Linear utilizando los tres colores predefinidos aproximadamente igual que la imágen siguiente:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQaGzjRhI/AAAAAAAAAKE/skROQ8-nnsg/s1600/img_25.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQaGzjRhI/AAAAAAAAAKE/skROQ8-nnsg/s320/img_25.gif" /></a></div><br />
</div><div style="text-align: justify;">3- Aplicamos un efecto de <b>Shadow and Glow + Inner Glow</b> utilizando el color blanco.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQjvK9j_I/AAAAAAAAAKI/cte6IM-OTBM/s1600/img_26.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQjvK9j_I/AAAAAAAAAKI/cte6IM-OTBM/s320/img_26.gif" /></a></div><br />
</div><div style="text-align: justify;">4- Creamos una elipse de color blanco con la que conseguiremos un efecto de brillo en la parte superior de la esfera.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQkM5e9pI/AAAAAAAAAKM/goRvuA_FvTY/s1600/img_27.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQkM5e9pI/AAAAAAAAAKM/goRvuA_FvTY/s320/img_27.gif" /></a></div><br />
</div><div style="text-align: justify;">5- Degradamos la elipse repitiendo el método que usamos para el efecto de brillo de la flecha.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQkC_hkNI/AAAAAAAAAKQ/n42nxGx_wb8/s1600/img_28.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQkC_hkNI/AAAAAAAAAKQ/n42nxGx_wb8/s320/img_28.gif" /></a></div><br />
</div><div style="text-align: justify;">6- Duplicamos el círculo mas grande, le aplicamos un color negro solido y le eliminamos el efecto de <b>Inner Glow</b>. Dibujamos encima una elipse, la alineamos verticalmente y le fundimos con un <b>Join</b>. Finalmente escalamos de forma proporcional a un tamaño de <i>120 X 120 pixeles</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQkTia22I/AAAAAAAAAKU/NlBhNZarnbE/s1600/img_29.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQkTia22I/AAAAAAAAAKU/NlBhNZarnbE/s320/img_29.gif" /></a></div>7- Le aplicamos un efecto de <b>Gaussian Blur</b> (<i>aproximadamente 2.0</i>) y le bajamos la opacidad a un <i>10%</i>.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQk7s1UZI/AAAAAAAAAKY/vrTHCbJC0sA/s1600/img_30.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQk7s1UZI/AAAAAAAAAKY/vrTHCbJC0sA/s320/img_30.gif" /></a></div><br />
8- Para crear la sombra dibujamos una elipse del color mas fuerte, le aplicamos un efecto de <b>Gaussian Blur</b> (<i>aproximadamente 5.8</i>) y le bajamos la opacidad a un <i>45%</i>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQqXxls0I/AAAAAAAAAKc/LbWQezhu8gg/s1600/img_31.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQqXxls0I/AAAAAAAAAKc/LbWQezhu8gg/s320/img_31.gif" /></a></div>9- Escribimos un numero 1 de color blanco, en mi caso usé una tipografía <i>Arial</i> en <i>negrita</i> a <i>60 puntos</i> justificada al centro.</div><div style="text-align: justify;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQq1Rq17I/AAAAAAAAAKg/i4hfHicasto/s1600/img_32.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQq1Rq17I/AAAAAAAAAKg/i4hfHicasto/s400/img_32.gif" width="400" /></a></div><br />
</div><div style="text-align: justify;">10- Duplicamos las esferas y colocamos las flechas encima.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQrTWaUtI/AAAAAAAAAKk/LUwl--b4Y_8/s1600/img_33.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQrTWaUtI/AAAAAAAAAKk/LUwl--b4Y_8/s400/img_33.gif" width="400" /></a></div><br />
</div><div style="text-align: justify;">11- Editamos los colores y los números.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQrtoUuyI/AAAAAAAAAKo/zPqsZbRzZgw/s1600/img_34.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="http://lh4.ggpht.com/_QBkv__MdgNs/S2mQrtoUuyI/AAAAAAAAAKo/zPqsZbRzZgw/s400/img_34.gif" width="400" /></a></div><br />
</div><div style="text-align: justify;">12- Aplicamos el color respectivo a cada sombra de cada esfera.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQrkuhLsI/AAAAAAAAAKs/isbItGUkOmY/s1600/img_35.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQrkuhLsI/AAAAAAAAAKs/isbItGUkOmY/s400/img_35.gif" width="400" /></a></div><br />
</div><div style="text-align: justify;">13- Aplicamos una sombra leve a los 3 números (1,2,3).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQyoXlrTI/AAAAAAAAAKw/I2zqIm0-w_M/s1600/img_36.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQyoXlrTI/AAAAAAAAAKw/I2zqIm0-w_M/s400/img_36.gif" width="400" /></a></div><br />
</div><div style="text-align: justify;"><span class="Apple-style-span" style="font-size: xx-large;"><b><span class="Apple-style-span" style="color: #45818e;">El Reflejo</span></b></span></div><div style="text-align: justify;">En este paso agregaremos el reflejo de las esferas.</div><div style="text-align: justify;"><br />
1- Seleccionamos una esfera junto con su respectivo número, la agrupamos y duplicamos. <br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQyzy4dxI/AAAAAAAAAK0/cjVScOvJ4lg/s1600/img_37.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQyzy4dxI/AAAAAAAAAK0/cjVScOvJ4lg/s320/img_37.gif" /></a></div>2- Al duplicarla seleccionaremos con la herramienta <b>sub select</b> la sombra de cada esfera y la eliminaremos.</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQzLBtVcI/AAAAAAAAAK4/5zDmU1u4iFo/s1600/img_38.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/_QBkv__MdgNs/S2mQzLBtVcI/AAAAAAAAAK4/5zDmU1u4iFo/s320/img_38.gif" /></a></div>3- Convertimos el grupo de objetos en una imagen en <b>Modify + Flatten Selection</b> y la rotamos <i>180 grados</i> verticalmente (<b>Flip Vertical</b>).</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQzARriNI/AAAAAAAAAK8/mBkgiSqdXbM/s1600/img_39.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQzARriNI/AAAAAAAAAK8/mBkgiSqdXbM/s320/img_39.gif" /></a></div>4- Le aplicamos un efecto difuminado mediante el menú <b>Commands + Creative + Fade Image</b> y le bajamos la opacidad a un <i>40%</i>.</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQz6BQZ4I/AAAAAAAAALA/kSS2OI2HB8Y/s1600/img_40.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_QBkv__MdgNs/S2mQz6BQZ4I/AAAAAAAAALA/kSS2OI2HB8Y/s320/img_40.gif" /></a></div>5- Repetimos este proceso a cada una de las esferas.</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQ2yJV8CI/AAAAAAAAALE/RkRyoBWgLKM/s1600/img_41.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh6.ggpht.com/_QBkv__MdgNs/S2mQ2yJV8CI/AAAAAAAAALE/RkRyoBWgLKM/s320/img_41.jpg" /></a></div><br />
</div><div style="text-align: justify;">Listo! Ahora solo resta agregar las imágenes que se insertarán en los marcos, algún texto y si deseamos, algunos detalles que le agregarán mayor realismo.</div><br />
Espero que les sea útil y hasta la próxima.<br />
<br />
<a href="http://docs.google.com/leaf?id=0B8whulxof0QpMzBlMzA1YjYtNTRhZC00OGJlLTgzOGQtMmViYTM3Yzk0OWEx&hl=en"><span class="Apple-style-span" style="color: #0b5394;">Descargar los archivos de este Tutoria</span>l</a>.<br />
<br />
<a href="http://creativecommons.org/licenses/by-nc/3.0/" rel="license"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" /></a><br />
<span href="http://purl.org/dc/dcmitype/StillImage" property="dc:title" rel="dc:type" xmlns:dc="http://purl.org/dc/elements/1.1/"><span class="Apple-style-span" style="font-size: x-small;">Creando gráficos Web 2.0 usando Adobe Fireworks</span></span><span class="Apple-style-span" style="font-size: x-small;"> by </span><a href="http://www.blogger.com/www.bekace.net" property="cc:attributionName" rel="cc:attributionURL" xmlns:cc="http://creativecommons.org/ns#"><span class="Apple-style-span" style="font-size: x-small;">Bismarck Carreras</span></a><span class="Apple-style-span" style="font-size: x-small;"> is licensed under a </span><a href="http://creativecommons.org/licenses/by-nc/3.0/" rel="license"><span class="Apple-style-span" style="font-size: x-small;">Creative Commons Reconocimiento-No comercial 3.0 Unported License</span></a><span class="Apple-style-span" style="font-size: x-small;">.</span><br />
<span class="Apple-style-span" style="font-size: x-small;">Based on a work at </span><a href="http://www.blogger.com/Bismarck%20Carreras" rel="dc:source" xmlns:dc="http://purl.org/dc/elements/1.1/"><span class="Apple-style-span" style="font-size: x-small;">Bismarck Carreras</span></a><span class="Apple-style-span" style="font-size: x-small;">.</span><br />
<span class="Apple-style-span" style="font-size: x-small;">Permissions beyond the scope of this license may be available at </span><a href="http://www.blogger.com/comudo.blogspot.com" rel="cc:morePermissions" xmlns:cc="http://creativecommons.org/ns#"><span class="Apple-style-span" style="font-size: x-small;">comudo.blogspot.com</span></a><span class="Apple-style-span" style="font-size: x-small;">.</span>Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-69236379580591114262010-01-29T16:36:00.002-04:002010-01-29T16:51:11.420-04:00Estas preparado para ir a una entrevista como diseñador web?<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_GTkHp1bVvFA/S2NJyWV_LFI/AAAAAAAAAPE/oDciqZjKxpg/s1600-h/entrevista.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 250px; height: 194px;" src="http://2.bp.blogspot.com/_GTkHp1bVvFA/S2NJyWV_LFI/AAAAAAAAAPE/oDciqZjKxpg/s320/entrevista.jpg" alt="" id="BLOGGER_PHOTO_ID_5432266704879037522" border="0" /></a><br /><div style="text-align: justify;">Si inicias como <span style="font-weight: bold;">diseñador web</span>, es bueno que leas estos 8 pasos que pueden servirte para que tu entrevista sea diferente y satisfactoria. Estos pasos no garantizan que vas a obtener trabajo (claro está), pero te podrían ayudar ya que la entrevista a un diseñador web no es como las de otras profesiones donde te ponen a llenar formularios de 3,4,5 paginas, junto con eso un test, etc.<br /><br /><span style="font-weight: bold;">1. Crea tu portafolio</span><br /><br />Una tarjeta de presentación o el proyecto de graduación de la universidad o colegio no son suficientes para salir a la calle en busca de trabajo como diseñador web…debes mostrar algo más. Si aplicas para un trabajo tan comercial como el diseño web debes demostrar que tienes conocimientos de “web comerciales” o <span style="font-weight: bold;">web orientadas a negocios</span> y no me refiero necesariamente a e-commerce. La mejor manera de ir a esa entrevista es crear un sitio web en donde aparezcan algunos ejemplos de tus trabajos. Puede ser un cd interactivo. Si no tienes muchos trabajos realizados pues la solución es imaginarte algunos clientes para entonces crear unos bocetos donde puedas mostrar cuáles son tus habilidades como diseñador web.<br /><br /><span style="font-weight: bold;">2. Investiga</span><br /><br />Si vas a un sitio en busca de trabajo, lo ideal sería que investigues sobre la empresa, el estilo de trabajo de ese lugar, cuales trabajos han realizado, cuáles son sus clientes etc., eso puede ayudarte, porque puedes ver la calidad de sus trabajos, la tecnología que usan entre otras cosas por lo cual podrás deducir si tus conocimientos podrían ser útiles en ese lugar. Aunque no siempre esto será seguro, es una buena práctica.<br /><br /><span style="font-weight: bold;">3. Entonces prepara algunas ideas</span><br /><br />Después de haber investigado ya tendrás información del estilo y como trabajan en esa empresa. Piensa y sugiérele cosas relevantes que ellos perciban como mejoras. Este punto es importante en especial cuando vas a una empresa en donde ellos están pocos interesados en tu creatividad y más interesados en cómo pueden sacar beneficios de esta, (abre los ojos).<br /><br /><span style="font-weight: bold;">4. Vístete de manera adecuada</span><br /><br />Si, lo sé!, se como es tu estilo, y también estoy de acuerdo contigo, si eres diseñador o publicista y vas a una agencia de publicidad o un estudio de diseño a buscar empleo verán tu portafolio, no tu imagen. Pero imagina que la ocasión sea ir a una empresa diferente, donde el único de tu área serás tú, donde todos tendrán pantalón de tela y camisa hasta las mangas, de seguro te veras diferente y esa gente no nos ve de esa manera…créeme!.<br /><br />No es necesario ir en camisa y pantalones de telas con unos bien lustrados zapatos, pero recordar que no vas para un concierto de rock.<br /><br /><span style="font-weight: bold;">5. Cuando ya estés en la entrevista</span><br /><br />Compórtate como una persona normal, deja los nervios y cada vez que hables demuestra que sientes pasión por lo que haces. Trata de transmitir que tú eres el indicado y que puedes llevar beneficios a la empresa, a fin de cuentas ellos necesitan dinero, por eso necesitan un diseñador. Posiblemente quien te entreviste tenga conocimientos y experiencia en el área, así que no digas mentiras, siempre la verdad.<br /><br /><span style="font-weight: bold;">6. Cuanto voy a cobrar</span><br /><br />Esto es complicado, pero cada quien tiene un valor, tienes que saber valorar tu trabajo y lo que sabes (eso cuesta). Lo ideal sería siempre que te hagan una propuesta y tu examines, pero si te toca decir primero cuanto estas dispuesto a recibir, pide un poco más de lo que realmente quieres, pero no demasiado. El objetivo de ellos como empresa será pagarte por algo que estés satisfecho, pero trataran de pagarte lo menos posible, no te prostituyas, mantén en mente que tu trabajo tiene un valor y exígelo.<br /><br /><span style="font-weight: bold;">7. Haciéndote preguntas</span><br /><br />Es posible como mencione antes que la persona que te entreviste tenga conocimientos en diseño. También es posible que esta persona haga preguntas técnicas a las cuales tengas o no respuesta. Siempre admite cuando no sabes algo, no es ventaja decir que sabes algo cuando no es así.<br /><br /><span style="font-weight: bold;">8. Punto final</span><br /><br />Y sobre todo recuerda que ser diseñador grafico y ser diseñador web “<span style="color: rgb(255, 0, 0);">no es lo mismo</span>”. Ser diseñador web no es conocer al maximo <span style="font-weight: bold;">Photohop</span>, <span style="font-weight: bold;">Illustrator</span>, <span style="font-weight: bold;">Freehand,</span> <span style="font-weight: bold;">Dreamweaver</span>. Recuerda que las empresas que hacen su website, lo hacen con el propósito de vender un producto, idea o servicio, así que el diseño web viene muy envuelto con lo que es usabilidad, marketing, accesibilidad, motores de búsqueda, lenguajes de programación entre otras cosas que se toman en cuenta a la hora de diseñar sitios web.</div>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com6tag:blogger.com,1999:blog-5550839891907485782.post-41488579410894633022010-01-27T21:19:00.003-04:002010-01-27T21:31:31.325-04:00Esta la República Dominicana capacitada???<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3O2eIMUYwS1J6PUIKKhb3mQkeGrtGCAfhAOIs62fR11Ezr6Tzn5Hn1FWSpOZpuYj5J5mq9_lWRHszY4M6o7absdC3byK9ygHVm1GmQyaqS1Zh6ctNuYipp4oPD83Ob8ZEa_MTQrlRQm6M/s1600-h/cellshop.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 198px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3O2eIMUYwS1J6PUIKKhb3mQkeGrtGCAfhAOIs62fR11Ezr6Tzn5Hn1FWSpOZpuYj5J5mq9_lWRHszY4M6o7absdC3byK9ygHVm1GmQyaqS1Zh6ctNuYipp4oPD83Ob8ZEa_MTQrlRQm6M/s320/cellshop.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5431596742068106242" /></a><br />Bajando a Twitter del pedestal y específicamente hablando de como otras compañías no necesariamente las de Telecom, devén de tomar ventajas de todas las redes. Que interesante fuera que desde un minitexto poder chequear o postear los últimos 5 comentarios + 0 – sobre cualquier articulo o producto que tengas en tus manos dentro de un supermercado, librería o hasta el mercado publico. Seria como Wikipedia se encuentra con Twitter pero desde en tu dispositivo móvil mas basico. Lo importante es tener un soporte al tomar una decisión. Tal ves sea irrelevante en nuestro país pero todos los medios conducen hacia esta práctica. Bing? de la Microsoft, nuevos dispositivos móviles y el mercadeo en medios sociales en general se trata de esto, en como manejar las informaciones.<br /><br />Ojalá y a la hora que uno de nuestros ciudadanos se encuentre comprando un medicamento, via sms pueda verificar si es original o no. Podrías recibir hasta información extendida ya que estamos acostumbrado ir a la farmacia y comprar algo parecido a lo que nos recetaron. Esto solo nos costaría alrededor de RD$2. Es rentable? Yo pienso que sí, la salud y la educación de nuestro país tiene que estar por encima de una quiniela. Las plataformas y las redes están hay, solo falta intención o creatividad del lado corporativo y ayudar a crear consciencia al consumidor.<br /><br />Esto también crearía una base de datos paralela a la de las informaciones de los artículos, nos brindaría información del consumidor cuales pueden ser de uso a organizaciones como la <a href="http://www.one.gob.do/">ONE</a> o hasta llegar a sustituir los visitadores medicos ya que conoces directamente el consumidor. Lo ideal para una compañía como Pfizer, Bayer, etc. seria que el consumidor constantemente consultara con su medico si puede usar x medicamento. Insisto en que la República Dominicana ha estado estancada en la transición del mercadeo masivo hacia al 1+1, era de la información.andyjerezhttp://www.blogger.com/profile/18130817863212984184noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-86594311737913917972010-01-22T09:13:00.009-04:002010-01-22T09:46:26.157-04:00República Dominicana intenta actualizarse!!!<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDg20c3zDmXPzTWhyqXh7u3ugyLfJ0c4NN91f6hPYOKzRI2YMCU2tUytd_APxcVXcCTDka8ou87SuwfqjU41dWIzvSXY_R217hs9qRxjstyNC8_yNhPGMvWA5hZMYk4RS5FOaJJtdZ1ZG/s1600-h/rdNetwork.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5429558313027796706" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDg20c3zDmXPzTWhyqXh7u3ugyLfJ0c4NN91f6hPYOKzRI2YMCU2tUytd_APxcVXcCTDka8ou87SuwfqjU41dWIzvSXY_R217hs9qRxjstyNC8_yNhPGMvWA5hZMYk4RS5FOaJJtdZ1ZG/s320/rdNetwork.jpg" style="cursor: hand; cursor: pointer; float: left; height: 266px; margin: 0 10px 10px 0; width: 320px;" /></a><br />
<br />
<br />
Estuve buscando cuales de nuestras compañías en la República Dominicana están usando los medios sociales como facebook y twitter, que estrategias están implementando y que tanto seguimiento le dan. Sentí que aun su presencia esta un poco tímida. Pude encontrar <a href="http://www.facebook.com/plazalama?ref=search&sid=567986561.732425837..1">Plaza Lama</a>, <a href="http://www.facebook.com/search/?q=brugal&init=quick#/brugaltitanium?v=wall&ref=search">Brugal</a>, <a href="http://www.facebook.com/#/pages/Santo-Domingo-Dominican-Republic/Anthonys/105329673865?ref=ts">Anthony's</a> y unas cuantas otras.<br />
<br />
Al parecer las compañías pueden que se sientan un poco limitadas y a la vez desvanecen sus intentos basados en el feedback que reciben. Hasta el día de ayer <a href="http://www.facebook.com/plazalama?ref=search&sid=567986561.732425837..1">Plaza Lama</a> tenia solo 1,300 fanáticos en facebook, <a href="http://www.facebook.com/search/?q=brugal&init=quick#/brugaltitanium?v=wall&ref=search">Brugal</a> 5,740 pero <a href="http://www.facebook.com/search/?q=brugal&init=quick#/pages/Santo-Domingo-Dominican-Republic/Anthonys/105329673865?ref=ts">Anthony's</a> mas de 18,000 seguidores. Esto es obviamente un reflejo según el target de sus consumidores y que plataforma de red es que con mas frecuencia usa este consumidor.<br />
<br />
De los últimos años dentro de las compañías mas admiradas en este país están las de telecomunicación. Esto es simplemente por que son los dueños de las redes mas amplias y usadas por los dominicanos. Años atrás cuando el mercadeo masivo dominaba los medios, la ex-compañía Baninter gozaba del privilegio de ser dueños de casi todos los medios de publicidad, lo cual les permitía escalar imparablemente. Si logramos implementar nuevas maneras de usar los medios de telecomunicaciones estaríamos expuestos a una audiencia mucho mas amplia, tal vez llegar hasta tío Raúl quien juega domino en la esquina y su único medio de comunicación es un teléfono básico y prepago. Creo que la compañía <a href="http://www.viva.com.do/vas/tu-twitt">Viva</a> hace el intento con su nueva campaña "actualízate por solo un peso", Viva TuTwit y 323 MESSENGER. Esto por lo menos educa al consumidor y le abre camino a los agregadores a implementar nuevas campañas.andyjerezhttp://www.blogger.com/profile/18130817863212984184noreply@blogger.com4tag:blogger.com,1999:blog-5550839891907485782.post-75602840126758964542010-01-12T11:35:00.004-04:002010-01-12T11:52:21.175-04:00Adobe Flash en el iPhone<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_GTkHp1bVvFA/S0yaZLM5tqI/AAAAAAAAAO8/VT1gYuefxCc/s1600-h/adf.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 323px; height: 323px;" src="http://4.bp.blogspot.com/_GTkHp1bVvFA/S0yaZLM5tqI/AAAAAAAAAO8/VT1gYuefxCc/s400/adf.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5425881408368916130" /></a><br />Adobe Flash antes conocido como Macromedia Flash ha sido un método o herramienta de mucho uso a la hora de crear websites más interactivos, pero con el avance de las tecnologías han surgido otras alternativas.<br /><br />En la actualidad es muy usual navegar sitios web desde teléfonos móviles, pero existe el problema de que los teléfonos móviles tales como iphone, Blalckberry entre otros, aun no permiten visualizar contenido flash en sus aparatos.<br /><br />Por esa razón, Adobe ha decidido entrar al mercado con su nuevo “Adobe Creative Suite” que incluirá el “Packager for iphone” que permitirá a los desarrolladores en flash acceder al iphone.<br /><br />Fuente: <a href="http://bit.ly/5tidRh">Adobe</a>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-28064104546436994932010-01-12T11:22:00.002-04:002010-01-12T11:30:53.034-04:00Celulares y dispositivos móviles: tiempo de pensar en las mujeres, en los chicos y en los jubilados<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_GTkHp1bVvFA/S0yVmOEdCHI/AAAAAAAAAO0/eKRFNcJPE1s/s1600-h/cells.gif"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 357px; height: 348px;" src="http://4.bp.blogspot.com/_GTkHp1bVvFA/S0yVmOEdCHI/AAAAAAAAAO0/eKRFNcJPE1s/s400/cells.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5425876134918948978" /></a><br />(www.neomundo.com.ar)- Los fabricantes de teléfonos celulares tendrán que empezar a personalizar sus productos si quieren llamar la atención de nuevos grupos demográficos (llámense mujeres y jóvenes nacidos dentro de la cultura de la comunicación permanente), aseguran los analistas de mercado.<br /><br />Y es que según la consultora Gartner, hacia el 2018 el mundo ya estará lleno de jóvenes y mujeres que no demandarán en su trabajo productos pensados exclusivamente para el ámbito empresarial, sino también para el consumidor masivo. Ellos querrán usar en su puesto de trabajo los mismos dispositivos o servicios que los empleados en su casa.<br /><br />El 68% de la población mundial son mujeres y niños que se pueden beneficiar de las ventajas de la tecnología móvil. Sin embargo, y cómo ocurre en otros muchos campos, los dispositivos móviles están pensados por y para los hombres.<br /><br />Los vendedores de telefonía móvil tendrán que afrontar el cambio demográfico que están sufriendo las empresas y personalizar sus productos para dar cabida a ese otro 68%.<br /><br />Hoy día, el perfil más in mente es el del usuario del teléfono móvil es un adulto occidental con una edad comprendida entre los 20 y 64 años. Este perfil representa curiosamente sólo al 32% de la población mundial. Si se extrapola ese dato al ámbito empresarial ocurre exactamente lo mismo.<br /><br />Sin embargo, la realidad de las empresas está cambiando, al ritmo en que varía también el tipo de mano de obra: cada vez más mujeres y grupos étnicos se están incorporando a los puestos laborales y, por supuesto, usan dispositivos móviles para realizar su trabajo.<br /><br />Los productos móviles tendrán que afrontar la diversidad de género y demográfica, haciendo evolucionar y diferenciando los dispositivos a través de una mayor variedad, explica Mónica Basso, vicepresidenta de investigación de Gartner.<br /><br />. Esta tendencia, junto a la progresiva consumerization de las tecnologías de la información (término inglés que describe el proceso por el cual el usuario está demandando utilizar en su entorno de trabajo las mismas herramientas que emplea en su esfera personal: móvil, mensajería instantánea, blogs, telefonía IP, comunidades o redes sociales) y la evolución del mercado laboral hacia los jóvenes y las mujeres, obligará a las empresas a repensar la estructura y lo procesos de su trabajo.<br /><br />En el transcurso de simposium, los analistas de Gartner han discutido tres tendencias demográficas y de género que, a su parecer, influirán en la adopción de la tecnología móvil de aquí a 2018 en las empresas.<br /><br />En primer lugar, las empresas irán dando paso a los baby boomers, en detrimento de los trabajadores que están a las puertas de la jubilación. Este hecho hará que las organizaciones tengan que idear planes de carrera más diversificados.<br /><br />Con esto en mente, las empresas deberán ir desarrollando programas para empleados en diferentes estadios de su carrera profesional o en función de sus edades.<br /><br />A esto se sumarán los hechos de que la diversidad étnica y de género aumentará en paralelo a la mano de obra inmigrante, multiplicando, además, la actividad con países emergentes y la presencia de mujeres.<br /><br />Por otro lado, los nativos digitales (nuevas generaciones nacidas totalmente en la era digital) aportarán a las empresas nuevas culturas, preferencias y capacidades.<br /><br />Su poder dentro de las organizaciones crecerá porque poseen más conocimientos tecnológicos, mayor familiaridad con las redes sociales y con los teléfonos inteligentes, así como con productos de consumo y modelos de negocio más innovadores. Además, su capacidad para recopilar información también es mayor.<br /><br />Una nueva mezcla de usuarios jóvenes reemplazará el perfil menos variado de aquellos que se jubilan. Serán las empresas que mejor entiendan la diversidad de los requerimientos y las expectativas (de estos nuevos usuarios) las que consigan mejores niveles de satisfacción y productividad para sus clientes, comenta Basso.<br /><br />El impacto de la consumerization será más visible debido a la presencia en las empresas de nativos digitales y mujeres. Estos nuevos usuarios van a demandar más opciones en los dispositivos, y preferirán aplicaciones y servicios más dirigidos al usuario normal que específicamente a las empresas.<br /><br />Los analistas de Gartner aseguran que en 2015, la gente personalizará el 90% de la información, las herramientas y los recursos educativos y tecnológicos que usará en el trabajo o en casa.<br /><br />La personalización es la clave para captar la atención de las expectativas de los diferentes tipos de usuarios. Esas expectativas pueden ser colmadas en el software de un móvil, en los servicios o en los accesorios.<br /><br />Pese a que hay cientos de dispositivos móviles y modelos disponibles en el mercado, lo cierto es que la personalización es muy limitada hoy en día. Ésta tiene más que ver con lo estético, lo cosmético (cubiertas con colores y materiales llamativos, temas y tonos de llamada) o con los accesorios, comenta Basso.<br /><br />La personalización, sin embargo, está olvidando aspectos esenciales, como es la funcionalidad y la forma. Ambos factores son asignados, dice Gartner, rígidamente a los dispositivos dependiendo del mercado a los que van dirigidos. Eventualmente -puntualiza Basso- la forma y la función de los dispositivos móviles serán reinventados.<br /><br />Fuente: <a href="http://bit.ly/54PCza">Yahoo Noticias</a>Felix Cruzhttp://www.blogger.com/profile/11740590050693955401noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-49723335174012547262010-01-11T12:15:00.000-04:002010-01-11T12:15:45.635-04:00Empezar a Usar CSS - Cuarta ParteEn la <a href="http://comudo.blogspot.com/2009/12/empezar-usar-css-tercera-parte.html"><span style="color: blue;">Tercera Parte</span></a> de esta serie de artículos “<b><span style="color: #45818e;">Empezar a Usar CSS</span></b>” pudimos a entender, cuándo y porqué utilizar cada uno de los selectores según nos convenga.<br />
<br />
En este Post conoceremos las reglas para declarar y escribir las <b><span style="color: #45818e;">hojas de estilos</span></b>, cuándo es conveniente tenerlas dentro de la misma pagina <b><span style="color: #45818e;">HTML</span></b> o llamarlas e importarlas desde un enlace.<br />
<br />
Declarar las <b><span style="color: #45818e;">hojas de estilos</span></b> dependerá del sitio desde donde queremos incluirlas, atendiendo a esto tendremos 3 formas diferentes de hacerlo:<br />
<br />
<b><span style="color: #45818e;">1-En la misma pagina HTML.</span></b><br />
La hoja de estilo se declara dentro de la misma pagina <b><span style="color: #45818e;">HTML</span></b> incluida en el <span style="color: #0b5394;">TAG HEAD</span>. Para eso utilizaremos el elemento <span style="color: magenta;">CSS STYLE</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUYkyRTwlE0c_DsaD9r3CW6l_3qK4rfRUYQRlW454ePAuNPAMPQ54Tql6aIwqPLoaLQAlPy0EE2no_v0x7bPGHFWJZVQVlEkHYQZddNyjqdL43hIwrYIHlM0rUCn3Bs29PH-tWLCBvFnG/s1600/css_4taparte_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUYkyRTwlE0c_DsaD9r3CW6l_3qK4rfRUYQRlW454ePAuNPAMPQ54Tql6aIwqPLoaLQAlPy0EE2no_v0x7bPGHFWJZVQVlEkHYQZddNyjqdL43hIwrYIHlM0rUCn3Bs29PH-tWLCBvFnG/s640/css_4taparte_1.gif" /></a><br />
</div><span class="Apple-style-span" style="color: #45818e; font-weight: bold;">2-Dentro del mismo elemento o TAG HTML que se de desea estilizar.</span><br />
Se conoce como estilos “<span style="color: #45818e;">in line</span>” o <span style="color: #45818e;">en línea</span>. Le aplica estilos solo a ese elemento, no es recomendable su uso ya que no es reutilizable y si se usa de forma repetida en una pagina <b><span style="color: #45818e;">HTML</span></b> contribuye a que su peso sea mayor en KBs, además de que en caso de corregir o realizar cambios en dichos estilos es mas complicado. Es recomendable solo en casos completamente necesarios.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2yscfY-VLMOEHDH1BGEjNML2uda_oTfulo4F0n0DETJlBHsXszbXURPVLO-xOGgPJp0iJP588hfEiOKFZmHeqllN5KuaIk1FLJ71QwujAA2HwEVjzP-PKHyJt16pnMWehPxuQVksnaQv6/s1600/css_4taparte_2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2yscfY-VLMOEHDH1BGEjNML2uda_oTfulo4F0n0DETJlBHsXszbXURPVLO-xOGgPJp0iJP588hfEiOKFZmHeqllN5KuaIk1FLJ71QwujAA2HwEVjzP-PKHyJt16pnMWehPxuQVksnaQv6/s640/css_4taparte_2.gif" /></a><br />
</div><br />
<span class="Apple-style-span" style="color: #45818e; font-weight: bold;">3-Importado o llamado desde un archivo CSS externo.</span><br />
La hoja de estilos es un archivo <span style="color: magenta;">.css</span> completamente independiente, es la forma mas recomendada. Con esto se cumple 100% la regla de separar la estructura <b><span style="color: #45818e;">HTML</span></b>, el <b><span style="color: #45818e;">contenido</span></b> de la<b><span style="color: #45818e;"> apariencia del siti</span></b><b><span style="color: #45818e;">o</span></b>.<br />
El uso de este tipo de <b><span style="color: #45818e;">hoja de estilos</span></b> es mas <b><span style="color: #45818e;">dinámico</span></b> ya que en caso de que queramos <b><span style="color: #45818e;">cambiar la apariencia de un sitio</span></b> solo modificamos este archivo <span style="color: magenta;">.css</span> sin necesidad de tocar la <b><span style="color: #45818e;">estructura HTML</span></b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUiUsv7a8_lGzi3EPkxtcQVS_0eoVKxzegGz1eRGYHdYTKb3vnvAHjLXCCmkOHVock1jQ646RUKGA5CmOebaOen5gR6y8vUpS13Py1gHLK7PhEQJQfLxSjas8dCMvgMIt08enCNcQ_9I1o/s1600/css_4taparte_3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUiUsv7a8_lGzi3EPkxtcQVS_0eoVKxzegGz1eRGYHdYTKb3vnvAHjLXCCmkOHVock1jQ646RUKGA5CmOebaOen5gR6y8vUpS13Py1gHLK7PhEQJQfLxSjas8dCMvgMIt08enCNcQ_9I1o/s640/css_4taparte_3.gif" /></a><br />
</div><br />
En un próximo Post veremos cómo crear los contenedores principales (<i><span style="color: magenta;">head, main body, footer</span></i>) de un <b><span style="color: #45818e;">sitio web</span></b> conociendo los <b><span style="color: #45818e;">estilos de posición</span></b>, <b><span style="color: #45818e;">sitios elásticos o estático</span></b>s y sus trucos para lograr el efecto deseado, también como evitar algunos dolores de cabeza que suceden a todo quien se inicia en el mundo de <b><span style="color: #45818e;">las hojas de estilos CSS</span></b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7w-k3DYniuAE7tphF82W0_cHozdcH0LXIrX4tA-V9Jo9SrJKDZEPwz2QFwfCVKITkdhXsEi_919bYasvaGQO40eUuFUVb56EtB1Z_MjEBDjWX5efK6IMKxBp0OL_DOvQzij_u-ITq4ID/s1600/css_3raparte_7.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7w-k3DYniuAE7tphF82W0_cHozdcH0LXIrX4tA-V9Jo9SrJKDZEPwz2QFwfCVKITkdhXsEi_919bYasvaGQO40eUuFUVb56EtB1Z_MjEBDjWX5efK6IMKxBp0OL_DOvQzij_u-ITq4ID/s640/css_3raparte_7.gif" /></a><br />
</div><br />
<br />
Hasta la próxima.Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-38905926527455869572009-12-28T14:14:00.000-04:002009-12-28T14:14:00.282-04:00Gráficos Digitales: Vectores vs Bitmaps<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7fn84PWaWrdPtvNlhXLltkj7nu4Ym2GhWbkxsGTvMnlpf3HuMGsl8HXlr3dAFdDvvcf5ljalbUehqU5hCh3yk9A2vc-Pg1x5NZzOL5RvZqe6vWhuQ1q00f3Cn3AYMImhfcY6M0NTRWfWS/s1600/vectoresVSbitmaps_1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7fn84PWaWrdPtvNlhXLltkj7nu4Ym2GhWbkxsGTvMnlpf3HuMGsl8HXlr3dAFdDvvcf5ljalbUehqU5hCh3yk9A2vc-Pg1x5NZzOL5RvZqe6vWhuQ1q00f3Cn3AYMImhfcY6M0NTRWfWS/s320/vectoresVSbitmaps_1.jpg" /></a><br />
</div><br />
Existe una diferencia muy importante que todo <b><span style="color: #45818e;">diseñador grafico</span></b>, <b><span style="color: #45818e;">web</span></b> o <b><span style="color: #45818e;">multimedia</span></b> debe conocer:<br />
En qué se diferencia una <b><span style="color: #45818e;">imagen digital</span></b> en <b><span style="color: #45818e;">vectores</span></b> a una en <b><span style="color: #45818e;">mapas de bits o bitmaps</span></b>?<br />
Para empezar, no podemos pasar por alto que ambos son dependientes de un factor común: <b><span style="color: #45818e;">La Resolución</span></b>.<br />
<br />
Antes de ver qué significa cada uno, vamos a darle un vistazo a lo que es la <b><span style="color: #45818e;">resolución</span></b> y por qué incide en lo que son <b><span style="color: #45818e;">vectores y bitmaps</span></b>.<br />
<br />
La resolución en un <b><span style="color: #45818e;">grafico digital</span></b> es la mayor o menor <b><span style="color: #45818e;">nitidez</span></b> o <b><span style="color: #45818e;">calidad visual</span></b> con que este se ve, puede que sea pobre para los <b><span style="color: #45818e;">mapa de bits</span></b> pero no afecta los <b><span style="color: #45818e;">vectores</span></b>, de aquí la diferencia entre uno y otro. La <b><span style="color: #45818e;">resolución de un grafico digital de mapa de bits</span></b> es afectada por sus dimensiones ya que ésta va de la mano con su unidad mínima: <b><span style="color: #45818e;">el pixel</span></b>. En el día a día nos damos cuenta que al momento de crear un <b><span style="color: #45818e;">grafico en vectores</span></b> usando cualquiera de los software vectoriales como <b><span style="color: #45818e;">Adobe Illustrator, InDesign, Corel DRAW, Flash</span></b> o el difunto <b><span style="color: #45818e;">Freehand</span></b>, en ningún momento nos requiere ingresar la resolución a la que deseamos dicho gráfico, no sucediendo así cuando creamos un <b><span style="color: #45818e;">bitmap</span></b> usando <b><span style="color: #45818e;">Adobe Photoshop, Fireworks, Corel Paint Shop Pro</span></b>, etc. En estos casos <b>sí es totalmente necesario especificar la resolución</b> deseada dependiendo del uso final.<br />
<br />
Existen software que permiten manejar <b><span style="color: #45818e;">imágenes vectoriales</span></b> y de <b><span style="color: #45818e;">bitmaps</span></b> al mismo tiempo como <b><span style="color: #45818e;">Adobe Flash</span></b> que permite mostrar <b><span style="color: #45818e;">gráficos vectoriales</span></b> en una <b><span style="color: #45818e;">pagina web</span></b> pero para ello es necesario que el usuario tenga instalado un plug in que renderiza el grafico vectorial como <b><span style="color: #45818e;">Adobe Flash Player</span></b>, también existe <b><span style="color: #45818e;">Adobe Fireworks</span></b> que conservan las <b><span style="color: #45818e;">imágenes vectoriales editable</span></b><b><span style="color: #45818e;">s</span></b> pero que al final terminan siendo rasterizadas al momento de convertirlas a los formatos mas usados como son P<b><span style="color: #45818e;">NG, GIF y JPEG</span></b>.<br />
<br />
<b><span style="color: #45818e;">Que son Bitmaps o mapa de bits?</span></b><br />
Los <b><span style="color: #45818e;">mapas de bits o bitmap</span></b><b><span style="color: #45818e;">s</span></b> son gráficos digitales compuestos por la unidad mínima de imagen digital: <b><span style="color: #45818e;">el pixel</span></b>. Un pixel es un punto cuadrado el cual guarda <b><span class="Apple-style-span" style="background-color: #45818e;">información de color en las imágenes digitales</span></b> por lo que a mayor cantidad de pixeles contenga una imagen de mapa de bits mayor será su tamaño en kbytes y mayor será su resolución.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3o6YUnmgnmh3IqabEGVZ0wUNScfngLj2ewLN6_sExu2iVO3aEo38t_ntXjtyc4tBAEtRRwyZQ7CPdcGcY5FsfPET1ljh2ALx5RWOOtLJbt-53unjTJhIfHwtSmV_TNGoTiPV0rt-ptMX/s1600/vectoresVSbitmaps_2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3o6YUnmgnmh3IqabEGVZ0wUNScfngLj2ewLN6_sExu2iVO3aEo38t_ntXjtyc4tBAEtRRwyZQ7CPdcGcY5FsfPET1ljh2ALx5RWOOtLJbt-53unjTJhIfHwtSmV_TNGoTiPV0rt-ptMX/s400/vectoresVSbitmaps_2.jpg" /></a><br />
</div><br />
<br />
Cuando decimos que los mapa de bits son dependientes de la resolución nos referimos a que a mayor cantidad de pixeles de una imagen mayor será su resolución y por lo tanto su nivel de detalle. La medida de pixeles en una imagen se calcula por <b><span style="color: #45818e;">la cantidad de pixeles que esta contenga en una pulgada o centímetro cuadrado</span></b> por lo que para imágenes para la web usamos una resolución de <i>72 dpi</i> que significa <b><span style="color: #45818e;">Dot Per Inch</span></b> (punto por pulgada) o <b><span style="color: #45818e;">PPI</span></b> (pixel por pulgada).<br />
<br />
Para imágenes digitales que serán utilizadas en <b><span style="color: #45818e;">prensa offset </span></b>estas deben tener una resolución equivalente al doble de lo que serán impresas. Para <b><span style="color: #45818e;">calcular la resolución necesaria</span></b> en <b><span style="color: #45818e;">imágenes para impresió</span></b><b><span style="color: #45818e;">n</span></b> o <b><span style="color: #45818e;">pre-prensa</span></b> existe una formula que se deriva del calculo de la cantidad de <b><span style="color: #45818e;">líneas por purgada</span></b><b><span style="color: #45818e;">s </span></b>con que se va imprimir multiplicado por 2, o sea, si se va a imprimir un <b><span style="color: #45818e;">arte de prensa</span></b> que se imprime a <b><span style="color: #45818e;">85 líneas</span></b> o <b><span style="color: #45818e;">LPI</span></b> (<b><span style="color: #45818e;">Líneas por Pulgadas</span></b>), el gráfico debe crearse a <b><span style="color: #45818e;">170 DPI</span></b>, que resulta de multiplicar <i>85 X 2</i>. Fíjense que hay una <b><span style="color: #45818e;">diferencia entre DPI y LPI</span></b>, de esto hablaremos mas adelante.<br />
<br />
Si este gráfico se crea con menor resolucion este pierde nitidez en la <b><span style="color: #45818e;">impresión final</span></b>, si se crea con mayor resolución se está creando un <b><span style="color: #45818e;">archivo digital</span></b> de mayor tamaño y de forma innecesaria pero de buena <b><span style="color: #45818e;">calidad visual</span></b>. Aquí aplica el dicho <i>"Para que falte, que sobre"</i>.<br />
<br />
<b><span style="color: #45818e;">Que son gráficos vectoriales?</span></b><br />
Los <b><span style="color: #45818e;">gráficos vectoriales</span></b> son objetos formados por <b><span style="color: #45818e;">vectores</span></b> que son puntos definidos a partir de <b><span style="color: #45818e;">cálculos matemáticos</span></b> que a la vez definen su <b><span style="color: #45818e;">color, posición, tamaño</span></b>, etc. Esto significa que cuando dibujamos un cuadrado <b><span style="color: #45818e;">vectorial</span></b> el <b><span style="color: #45818e;">software</span></b> esta creando una imágen a partir de puntos que siguen una <b><span style="color: #45818e;">coordenada X, Y</span></b> en la pantalla y además de su posición contiene información sobre el <b><span style="color: #45818e;">color de relleno</span></b> (compuesto por <b><span style="color: #45818e;">cálculos matemáticos de colores RGB</span></b>, ver <a href="http://comudo.blogspot.com/2009/12/trabajar-modo-rgb-o-cmyk.html"><span style="color: blue;">Trabajar a modo RGG o CMYK</span></a>) pudiendo ser solido o degradado e información del espacio que ocupa en la pantalla, siendo este proporcional al tamaño físico real. Esto quiere decir que si dibujamos un círculo de <i>60x60</i> <i>pies</i>, si lo imprimimos este saldrá a tamaño real según se vea en el monitor.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO_dqALd_KPlNs9V3ZMNdXuKAuwZMLh7SpkzZKZoy9Vhj_RyaZ3lv0iYJEbuI9Ur29duGa5tCnRf-b8TkTgrpZT9MvR_b7Xdfc7LyomrTP1xYLhrh-5n8BKLiaOr33ONedzzfHaSfrx-VJ/s1600/vectoresVSbitmaps_3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO_dqALd_KPlNs9V3ZMNdXuKAuwZMLh7SpkzZKZoy9Vhj_RyaZ3lv0iYJEbuI9Ur29duGa5tCnRf-b8TkTgrpZT9MvR_b7Xdfc7LyomrTP1xYLhrh-5n8BKLiaOr33ONedzzfHaSfrx-VJ/s400/vectoresVSbitmaps_3.jpg" /></a><br />
</div><br />
<br />
Los <b><span style="color: #45818e;">gráficos vectoriales</span></b> tienen como ventaja que al ser los <b><span style="color: #45818e;">vectores</span></b> el fruto <b><span style="color: #45818e;">cálculos matemáticos</span></b> no ocupan mucho <b><span style="color: #45818e;">espacio de almacenamiento</span></b> con relación a los <b><span style="color: #45818e;">bitmaps</span></b> que ocupan mayor espacio dado a que una imagen contiene información de cada pixel que la contiene.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rqXvD712A_ucZ8dkx2zl3hyE-_3AI2fACXgY6BJDbUi2iWjCiodQpLSCUQV9-qPFPZqBGZT4ai79wDBsmIu7kCWXxD8dUGAqepbXK96JRQdOG_85C79U33lawDZ9ik-v8UoXtnA3sPkl/s1600/vectoresVSbitmaps_4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rqXvD712A_ucZ8dkx2zl3hyE-_3AI2fACXgY6BJDbUi2iWjCiodQpLSCUQV9-qPFPZqBGZT4ai79wDBsmIu7kCWXxD8dUGAqepbXK96JRQdOG_85C79U33lawDZ9ik-v8UoXtnA3sPkl/s400/vectoresVSbitmaps_4.jpg" /></a><br />
</div><br />
<br />
Aplicado al <b><span style="color: #45818e;">diseño gráfico</span></b>, conocer la importancia entre estos dos tipos de <b><span style="color: #45818e;">gráficos digitales</span></b> es vital a la hora de diseñar un <b><span style="color: #45818e;">logotipo</span></b>, nunca deberá hacerse como un <b><span style="color: #45818e;">bitmap</span></b> ya que como mencionamos al ser estos dependientes de la resolución complicarían su reproducción a la hora de imprimir incluyendo el caso de llevarse a formato largo como es el caso de una <b><span style="color: #45818e;">valla</span></b> o un <b><span style="color: #45818e;">bajante</span></b>. Aunque en nuestra idea creativa queramos “botarnos” con algún efecto o ilustración lo recomendable es <b><span style="color: #45818e;">vectorizar</span></b> este grafico para hacerlo parte del logotipo, de esta manera será independiente de la resolución a cualquier tamaño.<br />
<br />
En un próximo Post hablaremos de la importancia de conocer qué resolución debe tener un gráfico dependiendo del uso final: Salida Digital o Física, además de una <b><span style="color: #45818e;">formula matemática para calcular el tamaño y resolución necesaria para hacer un</span></b> <b><span style="color: #45818e;">scanning</span></b>.<br />
<br />
Hasta la próxima.Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com10tag:blogger.com,1999:blog-5550839891907485782.post-13399117494255185772009-12-10T17:37:00.000-04:002009-12-10T17:37:40.925-04:00Navidad 2.0<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHxWYbkHkeR0I2T3zK3jR8rIhMrrnmmA3oSve4lV9jtMH6AnOSdJBW2z7WnvAJKJfmUhkWJ6L4nHcmOmslJNdLYsWx1UHT8OUkJnpOjdThmvmnjM0TG_XPoTPfQZswb8dqEikC444TmHc/s1600/navidad2.0.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHxWYbkHkeR0I2T3zK3jR8rIhMrrnmmA3oSve4lV9jtMH6AnOSdJBW2z7WnvAJKJfmUhkWJ6L4nHcmOmslJNdLYsWx1UHT8OUkJnpOjdThmvmnjM0TG_XPoTPfQZswb8dqEikC444TmHc/s320/navidad2.0.gif" /></a><br />
</div><br />
<b><span style="color: #783f04;">ROCK</span></b>, (Recursos de Conocimiento para Comunidades Abiertas), <b>Numericit</b> y <b>Duarte101</b> nos invitan al Último Evento ROCK del Año: <span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-family: Arial; font-size: 13px; white-space: pre;">Navidad 2.0<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-family: 'Times New Roman'; font-size: medium; white-space: normal;">.<br />
<br />
</span></span><br />
Porque las redes sociales son universales, con ellas rompemos las fronteras, los idiomas, el color y las diferencias. En las redes sociales no pueden existir barreras sociales; todos somos bits y bytes; somos conceptos, ideas, emociones, sentimientos: Un planeta.<br />
<br />
Con el propósito de preguntar: ¿Servirán las redes sociales, si aún no rompemos las "barreras sociales"? ¿Queremos cerrar la brecha digital y olvidarlos de la social?<br />
<br />
Aprovechamos dicha excusa para celebrar la <b><span style="color: #45818e;">última reunión ROCK del año</span></b>, donde disfrutaremos de los logros alcanzados en el 2009 y expongamos nuestras metas del 2010. ¡Puedes estar in-situ, online, mobile, en video, twitter, facebook, como quieras! Únete y rompe barreras.<br />
<br />
El día para la reunión es el <b><span style="color: #45818e;">15 de diciembre 2009</span></b>, a partir de las <b><span style="color: #45818e;">6:30PM</span></b> en <b><span style="color: #45818e;">Quintana Bar & Lounge</span></b> (Calle la Atarazana #13, Zona Colonial). Puedes notificarles tu asistencia mediante el .<a href="http://tinyurl.com/ydgnxuf"><span style="color: blue;"><b>formulario de confirmación</b></span></a><br />
<div><br />
</div><div>Allá nos vemos...</div>Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com0tag:blogger.com,1999:blog-5550839891907485782.post-6065893384367911822009-12-10T17:12:00.000-04:002009-12-10T17:12:37.123-04:00Empezar a Usar CSS - Tercera Parte<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp10Rj_BoPDpvTqW4we3nDxja01i-isZIWv89nQlcFFp6iZ8qJB-gpRcCqRysrmINEz0QWILRas71B9RBZA-n_5f6D3Ej3GKDKZaWK-jLwgXf8QAZfPRX7A09spJwqfjc0ocVdLqOV1K0N/s1600/css_3raparte_8.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp10Rj_BoPDpvTqW4we3nDxja01i-isZIWv89nQlcFFp6iZ8qJB-gpRcCqRysrmINEz0QWILRas71B9RBZA-n_5f6D3Ej3GKDKZaWK-jLwgXf8QAZfPRX7A09spJwqfjc0ocVdLqOV1K0N/s320/css_3raparte_8.gif" /></a><br />
</div><span style="font-family: Arial; font-size: small;"><span class="Apple-style-span" style="font-size: 13px;"><br />
</span></span><br />
En la <a href="http://comudo.blogspot.com/2009/11/empezar-usar-css-segunda-parte.html"><span style="color: blue;">Segunda Parte</span></a> de esta serie de artículos “<a href="http://comudo.blogspot.com/2009/08/empezar-usar-css.html"><b><span style="color: blue;">Empezar a Usar CSS</span></b></a>” vimos una definición de los diferentes tipos de selectores y explicamos brevemente que hace cada uno.<br />
En este Post vamos a entender mejor , cuando utilizar cada uno de estos selectores según nos convenga.<br />
<br />
<b><span class="Apple-style-span" style="background-color: white;"><span style="color: #45818e;">SELECTOR TAG</span></span></b>: Redefine el estilo o look de un <b><span style="color: #45818e;">TAG HTML</span></b>.<br />
Lo utilizaremos cuando queremos definir estilos en general, aplicados a elementos o <b><span style="color: #45818e;">TAGS HTML</span></b>. Ej.:<br />
Si queremos que todos los títulos de nuestra página sean en un <i>font Georgia, tamaño 16 pt, color azul oscuro y tengan un margen inferior de 24px</i>, entonces nuestra hoja de estilos deberá decir:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-Dg05kCXiq754xkUXFdkRBHu2kj-iubimMig8A2dn7sa8xSFZw2ePXm05iMGBA7Acbc7fXAQ05xsCgDEwuT1Z3e7yQL_IIXG-D71qV8bNRf95sj68W6o7VwmScRZ0UZWYcQGSoZ7GB1N/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-Dg05kCXiq754xkUXFdkRBHu2kj-iubimMig8A2dn7sa8xSFZw2ePXm05iMGBA7Acbc7fXAQ05xsCgDEwuT1Z3e7yQL_IIXG-D71qV8bNRf95sj68W6o7VwmScRZ0UZWYcQGSoZ7GB1N/" width="320" /></a><br />
</div>Este seria el <b><span style="color: #45818e;">HTML:</span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxvs_5nawenFUqxheT_HQCHZc_yr7FyP8mtxHqxMX-a_OQtjj-TsyvWgAcR8XgMRG36uAVIQS5qf0g650LT5eQxn7No4YcxLelCN8wYIg7DNkyMKQYT26S-7gycgYlStA7SOzhyphenhyphendc5lau/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxvs_5nawenFUqxheT_HQCHZc_yr7FyP8mtxHqxMX-a_OQtjj-TsyvWgAcR8XgMRG36uAVIQS5qf0g650LT5eQxn7No4YcxLelCN8wYIg7DNkyMKQYT26S-7gycgYlStA7SOzhyphenhyphendc5lau/" /></a><br />
</div>Este seria el resultado:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-gkO2cwkOSX4y3zELd8pj1Cr3Z02EfKroPfxhSxUvFwjJaqv7UOzcL8RIlVm2v4JD79PduB_f2lg3hO26baUFsPj5_BlHfIwOkx0FwFuZc5eb-HtL3yHEX-TUAS7lVqL0fokcZIdTyMz/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-gkO2cwkOSX4y3zELd8pj1Cr3Z02EfKroPfxhSxUvFwjJaqv7UOzcL8RIlVm2v4JD79PduB_f2lg3hO26baUFsPj5_BlHfIwOkx0FwFuZc5eb-HtL3yHEX-TUAS7lVqL0fokcZIdTyMz/" /></a><br />
</div><br />
Nos conviene usar este selector en este caso porque al momento de agregar contenido todos los títulos con un <b><span style="color: #45818e;">TAG H1</span></b> automáticamente obtendrán los estilos ya definidos. Para crear los estilos de un selector TAG simplemente escribimos el nombre del <b><span style="color: #45818e;">TAG HML</span></b> al cual queremos aplicarle estilos. Ej.: <span style="color: blue;">h1 {….</span><br />
<br />
<b><span style="color: #45818e;">SELECTOR CLASS</span></b> o clase: Puede ser aplicado a cualquier TAG HTML.<br />
Lo utilizaremos cuando queremos definir estilos a elementos o <b><span style="color: #45818e;">TAGS HTM</span></b><b><span style="color: #45818e;">L</span></b> específicos. Ej.:<br />
Supongamos que queremos definir solo algunos títulos <b><span style="color: #45818e;">H1</span></b> con un <i>color rojo y con un margen inferior de 10px</i>. Como ya hemos definidos los estilos para todos los <b><span style="color: #45818e;">TAGS H1</span></b> entonces crearemos una <b><span style="color: #45818e;">clase</span></b> para asignarle a cada uno de los títulos que queremos ver de color rojo. Esta clase seria:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFQuyhWhD5TbVtFrkKEo_M7fY3F1nhhos5ocMTsamDSdPH_vbrxa28u6JOomzvcte7mcVLprd5YPt_XLdC9_1cOIk3c57ck4IS5lQUseHanDDNAi4dE_fvATYdd-tAXUnwEHBekQ0Qvkt/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFQuyhWhD5TbVtFrkKEo_M7fY3F1nhhos5ocMTsamDSdPH_vbrxa28u6JOomzvcte7mcVLprd5YPt_XLdC9_1cOIk3c57ck4IS5lQUseHanDDNAi4dE_fvATYdd-tAXUnwEHBekQ0Qvkt/" width="320" /></a><br />
</div>Este seria el resultado:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAst_Rwpt5clcwMzDvoOI_u62o7jWgK9_22AitNGGXSOf9s8qK9uWZtNZNMwI7G7CL6sQB_U1y-JyeH5D4TKN2KZlfP83c0wATYuW6vx9BLfsPAvqCeQdixbPJIXbfE4UlNiSYM3HuP7rn/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAst_Rwpt5clcwMzDvoOI_u62o7jWgK9_22AitNGGXSOf9s8qK9uWZtNZNMwI7G7CL6sQB_U1y-JyeH5D4TKN2KZlfP83c0wATYuW6vx9BLfsPAvqCeQdixbPJIXbfE4UlNiSYM3HuP7rn/" width="193" /></a><br />
</div><br />
La importancia de las <b><span style="color: #45818e;">clases</span></b> es que podemos <b><span style="color: #45818e;">re-utilizarlas </span></b>cuantas veces sea necesario por lo que podemos tener muchos elementos estilizados invocando una sola clase lo que se<span></span> traduce en <b><span style="color: #45818e;">optimización de la pagina</span></b> y <a href="http://comudo.blogspot.com/2009/11/la-velocidad-de-tu-pagina-afectara-el.html"><b><span class="Apple-style-span" style="background-color: white;"><span style="color: blue;">menor tiempo de descarga</span></span></b></a>. Las <b><span style="color: #45818e;">clases</span></b> pueden ser aplicadas conjuntamente con lo estilos de un <span style="color: #45818e;"><b>selector avanzado</b></span>. Para crear los estilos de una clase escribimos el nombre que deseamos precedido por un punto. Ej.: <span class="Apple-style-span" style="background-color: white;"><span style="color: blue;">.nombredelaclase {…</span></span><br />
<br />
<b><span style="color: #45818e;">SELECTOR ADVANCED</span></b> o avanzado: Se utiliza para elementos <b><span style="color: #45818e;">HTML</span></b> que poseen un <b><span style="color: #45818e;">ID</span></b> o que están identificados.<br />
A diferencia de las <b><span style="color: #45818e;">clases o Selector Class</span></b> el Selector tipo Avanced o Avanzado se usa para elementos que son únicos en todo el <b><span style="color: #45818e;">contenido de una pagina</span></b> y por lo tanto no se repiten. Son usados frecuentemente para <b><span style="color: #45818e;">estilos de posición</span></b>. Ej:<br />
En <b><span style="color: #45818e;">el layout de una página</span></b> tendremos el <b><span style="color: #45818e;">header</span></b>, contenido principal y <b><span style="color: #45818e;">footer</span></b>. Los estilos serian:<br />
<div class="separator" style="clear: both; text-align: auto;"><br />
</div><div class="separator" style="clear: both; text-align: auto;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqEBfqwMeJLzl4sregMOrZW_M3_EXhxq2vaxdbuA654VjNS95E7UPiG2aEkEqXcG_RyN8MmRSYgU3cu5u5RI98vhGMZctATxJ_Wu9-QB2R9tur9yYArIQj8cqOIPwXNNpVshB2nqUlHTk/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqEBfqwMeJLzl4sregMOrZW_M3_EXhxq2vaxdbuA654VjNS95E7UPiG2aEkEqXcG_RyN8MmRSYgU3cu5u5RI98vhGMZctATxJ_Wu9-QB2R9tur9yYArIQj8cqOIPwXNNpVshB2nqUlHTk/" width="190" /></a><br />
</div><br />
Este seria el resultado:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7w-k3DYniuAE7tphF82W0_cHozdcH0LXIrX4tA-V9Jo9SrJKDZEPwz2QFwfCVKITkdhXsEi_919bYasvaGQO40eUuFUVb56EtB1Z_MjEBDjWX5efK6IMKxBp0OL_DOvQzij_u-ITq4ID/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7w-k3DYniuAE7tphF82W0_cHozdcH0LXIrX4tA-V9Jo9SrJKDZEPwz2QFwfCVKITkdhXsEi_919bYasvaGQO40eUuFUVb56EtB1Z_MjEBDjWX5efK6IMKxBp0OL_DOvQzij_u-ITq4ID/" /></a><br />
</div><br />
Para crear los <b><span style="color: #45818e;">estilos</span></b> de un <b><span style="color: #45818e;">selector avanzado</span></b> escribimos el nombre del <b><span style="color: #45818e;">ID</span></b> del contenedor <b><span style="color: #45818e;">HTML </span></b>precedido del símbolo #. Ej.: <span style="color: blue;">#divheader {….</span><br />
<br />
En un próximo post conoceremos las reglas para <b><span style="color: #45818e;">declarar y escribir las hojas de estilos</span></b>, cómo tenerlas dentro de la misma pagina o llamarlas desde un enlace y cuándo debemos o no hacerlo.<br />
<br />
Hasta la próxima.Bismarck Carrerashttp://www.blogger.com/profile/11658842700376835591noreply@blogger.com1