23 Abr

Como limpiar Floats en CSS

Quien no ha experimentado problemas al iniciar con css y se encuentra con algo como esto:

explain

Pero, qué pasa con el contenedor, si ambos objetos, tanto el contenido general como el contenido del sidebar están dentro del contenedor?

Pues para este problema es cuando nos referimos a limpiar floats, ya que tanto contenido general como  contenido del sidebar tienen propiedad float y debemos hacer un clear. Aquí te mostramos 3 posibles soluciones:

Método 1: colocar un elemento justo antes de cerrar el contenedor (solución «clásica»)

clasicClear

Esta es una solución clásica, o una de las primeras soluciones, consiste en colocar algún elemento, ya sea un <div> o un <br> por ejemplo, con un clear:both:

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 .limpiar{
 clear: both;
 content: "";
 display: block;
 }

Método 2: Overflow Hidden

Captura de pantalla 2014-04-22 a las 23.44.05

Overflow hidden en el contenedor es una mejor solución, no tenemos que crear un div o elemento para limpiar floats, esto se debe a que overflow recalcula el contenido de la caja y nos da una alternativa de limpiar los float.

DESVENTAJA: la única desventaja es que si tenemos algun elemento detro de ·contenedor con posicion absoluta, de manera que se salga del contenedor, se va a cortar la información, ya que overflow hidden actua como si fuese una mascara de la información.

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 overflow:hidden;
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }

Método 3: Clear con pseudoclases (para mi la mejor)

pseudo

Una pseudoclase, en este caso :after o : before actua como si crearamos un elemento pero por css. Es decir no lo vamos a ver en el html, pero CSS si lo va ainterpretar como otro elemento.

En la grafica anterior tenemos el div contendor. Dependiendo de la pseudoclase que usemos nos creara un elemento antes o despues del contenido.

En este caso necesitamos crearlo despues del contenido, justo antes de cerrar el div del #contenedor

#contenedor:after{
clear: both;
content: "";
display: block;
 }

Aca le decimos a ese objeto creado que tenga un contenido vacio (content:»») y claro esta un clear:both. y ya esta!, puedes ver el funcionamiento en este ejemplo:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 #contenedor:after{
 clear: both;
 content: "";
 display: block;
 }
 <div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

DEMO

16 Jun

CSS3 – Image Captions

prevPage

Los «Captions» en imagenes no es mas que una leyenda que describa a grandes rasgos la imagen, en este caso son captions animados gracias al uso de las transormaciones en CSS3.  En este link puedes saber como funcionan las transformaciones, esta página web además te genera el codigo fuente de los css.

Practicando un poco de transformaciones en css3, pude saber varios trucos. Una propiedad que se debe tener muy en cuenta es la propiedad overflow.

Overflow nos define si el área al que lo aplicamos tiene o no un scroll, o lo tiene escondido. Precisamente escondido es como se debe colocar, para los que han trabajado en photoshop, illustrator  o flash se les hará mas familiar el termino de máscaras, pues  al colcar un overflow:hidden a un contenedor, lo que hacemos es crear una mascara y cortar todo lo demas para que no se vea por fuera del area seleccionada.

overflowEjm

 

Descargar CódigoDemo

15 Feb

divs con alto al 100% sin asignarle 100% al elemento padre

Heightal100

Para muchos de nosotros es un dolor de cabeza ajustar un elemento como un «div» al alto de un contenedor,  he visto soluciones a este problema en los que el truco esta en dejar los elementos padre al 100%, algo como esto:

Solucion 1. No aplica en todos los casos

HTML

<body>
  <div id="padre">
    <div id="hijo">
      Cotenedor al 100% de alto
    </div>
  </div>
</body>

CSS

#padre{
  height:100%;
}
#hijo{
  height:100%;
}

Otros recomiendan dejar 100% al html y al body:

html, body{
  height:100%;
}

Solucion 2. Más efectiva!

He trabajado con archivos css demasiado extensos, intente con la tecnica anterior dejar un «sidebar» dentro de un contenedor al 100%, pero ninguno me funcionó, por más que colocaba height:100% al llegar al punto que lo coloque casi a todos los elementos padre. y tenia una solución temporal con jquery (no se debería recurrir a jquery para esto!).

En el siguiente ejemplo usare 3 elementos principales:

  1. #padre: Esel contenedor general o «wrapper» como lo definen algunos.
  2. #sidebar: La barra lateral, la cual tomara el alto al 100%.
  3. #contenido: Es el contenido del texto principal.

#padre

Defino un ancho, lo centro con margin: 0 auto; y no se nos puede pasar: dejar la posición relativa.

#padre{
  background:#CBD1DC;
  margin:0 auto;
  margin-top:10px;
  position:relative;
  width:600px;
}

#sidebar

Coloco la posición absoluta, para que pueda colocar por posiciones libremente dentro del contenedor #padre, gracias a que este ultimo tiene posición relativa. Le doy un ancho, y para que el contenedor se «adhiera» tanto arriba como abajo y de el 100%, coloco un top y bottom definido.

Este es el truco!:  bottom y top en 0px.

#sidebar{
  background:#FE5B2C;
  bottom:0px;
  color:#FFF;
  font-size:35px;
  font-weight:bold;
  padding:25px;
  position:absolute;
  text-align:center;
  text-shadow:-1px -1px #A62C02;
  top:0px;
  width:150px;
}

#contenido

El contenido va al lado opuesto del sidebar, por lo que coloco un float right (a la derecha).

#contenido{
  background:#E7EBF1;
  color:#42474F;
  float:right;
  padding:25px;
  text-align:justify;
  width:350px;
}

HTML

Importante!:  hacer un clear debido al float right del contenido, esto se hace antes de cerrar el ultimo div

<br style=»clear:both»/>

<body>
<div id="padre">
<div id="sidebar">
<p>Height al 100%!</p>
</div>
 <div id="contenido">
 <h2>Sidebar crece con el contenido!</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at turpis nulla. Aliquam velit nisi, consectetur eget auctor nec, luctus non neque. Ut sit amet justo nisi. Suspendisse nec neque libero. In gravida eros libero, ut sagittis elit. Aenean est sem, suscipit vitae vulputate et, euismod lacinia odio. Ut pretium leo ut enim dignissim ullamcorper scelerisque justo eleifend. Aliquam sodales enim sed felis volutpat ac vestibulum tellus scelerisque. Vestibulum eu turpis ut erat hendrerit euismod. Proin velit eros, varius eu aliquet sit amet, fermentum ut nisi. Maecenas eu turpis tellus. Quisque nec neque turpis. Nulla facilisi.</p>
 <p>Vivamus nisi lectus, commodo et dapibus a, tempor sit amet ipsum. Quisque lobortis, leo vitae placerat aliquam, dolor nibh interdum lectus, non dapibus lorem risus in elit. In gravida lobortis nibh, quis suscipit nunc aliquam sed. Proin faucibus, purus id ornare vestibulum, libero quam commodo magna, eget posuere ante leo id nulla. Nullam tortor est, cursus vitae bibendum a, feugiat et neque. Aenean sed lacus ac sem varius faucibus ut ut lectus. Quisque a diam eu risus tempus faucibus. Morbi neque est, laoreet sed imperdiet id, bibendum nec enim.</p>
 <p>Curabitur quis ornare orci. Nam lacinia, nibh quis elementum blandit, purus eros bibendum augue, a lobortis eros elit at libero. Pellentesque rutrum tellus sit amet ligula sodales bibendum. Cras posuere mauris in enim mollis convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in lacus felis, in tempus mauris. Nunc sollicitudin interdum dolor, porta consectetur dolor lobortis eu. Phasellus quis nibh vel erat lacinia aliquam. Maecenas aliquam interdum purus, ac suscipit ante condimentum varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie tellus at est vulputate a porta massa pretium.</p>
 </div>
 <br style="clear:both"/>
</div>

 
 

Descargar CódigoDemo

 
 

28 Ago

Recursos y webs para aprender Jquery, CSS y HTML5

Code Academy

Codeacademy es una web que ofrece una manera diferente a lo que estamos acostumbrados ver en internet, en cuanto a webs de aprendizaje o tutoriales, pues ofrece variedad de cursos online en donde puedes ir aprendiendo paso a paso, ideal para los que quieren comenzar a avanzar en el mundo del desarrollo web.

La gran diferencia de esa web es que puedes ir practicando y escribiendo código en la misma página, la web se encarga de revisar que este bien desarrollada la lección.

http://www.codecademy.com

Libros Web

Excelentes manuales de CSS, AJAX, Javascript, y Symphony, la primera vez que visite esta web los libros se iban actualizando, ya que algunos no estaban terminados del todo, pero hoy en día ofrece manuales completos y los puedes descargar en pdf ompletamente gratis.

lenguaje es bastante comprensible, si eres principiante veras que son muy fácil de entender, y también para usuarios avanzados.

http://librosweb.es/

Guía completa de CSS3

Tal cual lo dice el titulo, una guía completa de CSS3, muy bien explicada, con ejemplos. Esta guía la puedes descargar gratuitamente de la pagina del autor, lo único que debes hacer es colocar un tweet para que descargues el pdf.

Esta web también la recomiendo ya que contiene articulos de diseño y tutoriales, como lo dice en su web Antonio Navajas :» director artístico, desarrollador web y diseñador de experiencias de usuario. Se puede decir que soy de la generación que vive intensamente internet y estoy 24/7 conectado. Busco el mejor resultado, por lo que siempre entrego una parte de mi alma en cada proyecto.»

http://www.antonionavajas.com/

Cristalab

Web dedicada al aprendizaje, contiene numerosos tutoriales de diferentes temas enfocados a la web, si quieres aportar con tus conocimientos puedes registrarte y tener un rankin dependiendo tus post.

John Fredy Vega (@freddier) es el fundador, tambien es conocido por ofrecer numerosos cursos presenciales, yo he asistido a un par de ellos, y la verdad aprenderas muchas cosas, ya que tiene una metodologia que se basa en» lo que se esta manejando» actualmente,  con tips y situaciones del mundo real.

«Cristalab es una comunidad de entusiastas, novatos, expertos y emprendedores de Internet. Enseñamos, aprendemos y compartimos el conocimiento de todos» -Cristalab.

Bueno, como punto aparte, y que no se note la «publicidad»;la caricatura mostrada fue cortesia de nosotros (http://www.iguazoft.com), la cual tiene un origen que puedes ver en nuestro post: Caricatura de @freddier.

http://www.cristalab.com/

Maestros del Web

Maestros del Web (creada por @cvander) junto con Cristalab son unas de las comunidades web reconocidas, que se han preocupado por temas acerca del desarrollo de la web y sus estándares, para llevar todo de la mejor manera.

Estos dos «pesados» de la web tienen un «programa» en vivo que es mejorando la Web en donde se hablan de diferentes temas, novedades, nuevas tecnologias y sobre todo nos ayudan a manejar y conocer los estándares.

Acá puedes encontrar pdfs gratuitos.

http://www.maestrosdelweb.com/

Jquery Essentials

Es una presentación de 115 slides en donde e enseñan desde lo básico y hacen una comparativa con la sintaxis de javascript nativo, en donde te podrás dar cuenta que es más sencillo trabajar con jquery. Muy recomendado

http://marcgrabanski.com/articles/jquery-essentials-slideshow

Tutoriales de diseño y maquetacíon Web

RAYMI es una maquetadora web, me entere de ella gracias a Cristalab (http://www.cristalab.com), ella ofrece variados tutoriales desde su web referentes a la maquetación, incluyendo diseño. Incluye tambien maqueación para wordpress.

Tiene una manera muy didáctica de explicar, de manera que es apropiado para las personas que estén comenzando en maquetación.

http://raymicha.com/

23 Jul

Checks y radio buttons personalizados con jquery

Checks y Radios en jquery.

Llevo un tiempo practicando con jquery, y  me vi en la necesidad de colocar unos forms personalizados, algunos de los que hay en la nube no soportan eventos como los «onClick», pero estos si soportan cualquier tipo de evento.  Son compatibles en todos los navegadores, pueden personalizarlos con la imagen que gusten, es un sprite de 36×36 con los 4 estados de los botones.
Leer más

23 Jul

Maquetar con divs como si fuese una tabla

Muchos de los que comenzamos maquetando, comenzamos a extrañar los comportamientos que tenian las tablas, y que era algo facil de acomodar los elementos.

Pero recordemos que ahora las tablas no se usan para maquetacion, en cuanto al diseño se refiere. Las tablas se deberían usar para tabular datos, como un listado de varios elementos.

Lo bueno del caso es que existe una manera de «imitar» el comportamiento de las tablas con capas, gracias a la propiedad display.

Muchos de los que comenzamos a maquetar conocemos las básicas que son:

display:

block

Inline

None

pero además existen:

display:

table

table-row

table-cell

Las anteriores propiedades son las necesarias para poder imitar el comportamiento de una tabla ya que tendriamos el elemento <table>, <tr> y <td>

Aca la demostración:

Partamos con un ejemplo de una tabla, que tiene 3 columnas:

Es una estructura sencilla para representar una tabla de 1 fila y 3 columnas. Ahora llevando este mismo concepto a divs tendriamos un resultado como el siguiente:

Teniendo en cuenta la grafica anterior:

Tendríamos nuestros equivalentes:

<table> sería equivalente a <div class=»contenedor-tabla«>

<tr> sería equivalente a <div class=»contenedor-fila«>

<td> sería equivalente a<div class=»contenedor-columna«>

Yo creo que ya esta entendida la idea. Nuestro codigo html sería:

HTML

<div class=»contenedor-tabla»>
    <div class=»contenedor-fila»>
        <div class=»contenedor-columna»>
Columna 1
         </div>

        <div class=»contenedor-columna»>
             Columna 2
        </div>

        <div class=»contenedor-columna»>
Columna 3
        </div>
    </div>
</div>

CSS

.contenedor-tabla{

display: table;

}

.contenedor-fila{

display: table-row;

}

.contenedor-columna{

display: table-cell;

}

08 Dic

CEO cristalab Cartoon by IMAGEAC

Freddier Cartoon

 


En uno de esos días que uno anda «webiando», o mejor aun, «googleando», algo de anime, mientras veia mejorando la web, note algo muy curioso o raro, @freddier por un lapso de tiempo se había quedado callado, cosa que no suele suceder muy a menudo. Me dije a mi mismo: -freddier se quedo callado, debe ser de buena suerte!, la expresion de freddier no era normal, no se había callado porque no tenia nada que decir, sino que al contrario yo creía que estaba pensando que era lo que iba a decir cuando le dieran la palabra… o mejor aun, cuando interrumpiera al que hablaba.

Retomando mi «googleada» de anime encontre algunos rasgos bastante parecidos a los de @freddier callado.  En algun momento mi socio @dannyrios81 le habia comentado, que se parecia o a Yayirobe o a Crilin de dragon ball, en fin le comentamos a @tifis en un twitt, y pues con la carcajada nos confirmo el parecido.

Fue entonces en un rato de ocio que dije:- Ya que estoy practicando dibujo en una tableta, que mejor que practicar con esa idea que tenia en mente!

Si señores. @freddier tiene los mismos ojos de crilin!.

por @memo_ac

29 Nov

iTunes – Reproducción sin cortes entre canciones

 

Normalmente tengo iTunes configurado con la opción Fundir canciones con un valor de 2 segundos. Lo que hace esta opción es colocarle un ligero desvanecimiento (Fade out / Fade In) al cambiar la canción.

Es ideal si quieres reproducir canciones aleatoriamente de tu lista de reproducción, pero si tienes canciones de un concierto, no es muy bueno escuchar el corte entre canciones.

La solución es:

1. Selecciona las canciones en vivo, o el concierto y das Clic derecho->Obtener información:

2.En la pestaña Opciones, marcamos la opción álbum sin pausas y ya esta!, ahora si a escuchar sin interrupciones.

:@memo_ac   :imageac

24 Nov

Centrar una tabla dentro de un DIV

Hace poco me paso, no suelo manejar muchas tablas  con divs, solo para lo necesario.

Coloque un div , dentro una tabla que tenia la propiedad de centrado, y no centraba!

intente colocarle text.align: center; al DIV.. y nada pasaba!

 

Aca la solución, muy simple:

<div class=’centerTable’>

 

<table>
//Acá el contenido de la tabla….
</table>

 

</div>

 

Nuestros CSS quedarían de la siguiente manera:

 

div.centerTable{
        text-align: center;
}

 

div.centerTable table {
       margin: 0 auto;
       text-align: left;
}

 

Eso era todo!

:@memo_ac   :imageac

02 Nov

Textura de Metal Cepillado en Photoshop

Paso 1.

Creamos un archivo con las dimensiones deseadas, yo use un área de 400px X 400px. Ahora seleccionamos la herramienta degradado (G) y seleccionamos un patrón o podemos personalizarlo y arrastramos en diagonal:

 

Paso 2

Filtro->Ruido->Añadir Ruido

Paso 3

Filtro->Desenfocar->Desenfoque de movimiento

Paso 4

Para finalizar, dbemos buscar el color adecuado para una textura de metal cepillado. Para esto vamos a Imagen->Ajustes->Tono y Saturacion pueden probar diferentes combinaciones. En mi caso coloque estos valores:


:@memo_ac   :imageac

10 Oct

Efecto brillo en Photoshop

Photoshop

El efecto deseado es algo parecido a lo que llamamos la web 2.0. Botones y texto con efecto «Glossy»

Con una forma irregular o figura

  1. Creo un nuevo archivo: Archivo->Nuevo, en mi caso coloque el área de trabajo de 400px X400px, y coloco un degradado de fondo. Para ello selecciono la herramienta degradado . En las herramientas de degradado en la parte superior,  podemos personalizar nuestro tipo de degradado (radial, lineal, de ángulo, reflejado y diamante), colocamos radial y editamos los colores del degradado:Una vez le damos OK a nuestro degradado, arrastramos  de arriba hacia abajo en nuestro área de trabajo. Si todo va bien deberíamos tener algo como esto:
  2. Ahora voy a dibujar una figura, simplemente voy a combinar 3 figuras: un circulo y dos rectángulos con borde redondeado, y los combino con la técnica de unir o combinar varias imagenes.
  3. Ahora vamos a la capa que tiene la cruz: Clic derecho->Opciones de fusión y marcamos los siguientes efectos:Nos debe quedar algo asi:
  4. Ahora apliquemos el efecto de brillo, para ello vamos a crear una capa nueva:
  5. Vamos a la capa «Cruz» y teniendo Ctrl presionado (Command en MAC) damos un clic sobre la miniatura de la capa y nos quedara seleccionado el contorno de nuestra cruz
  6. Como ya tenemos el area seleccionada, podemos aplicar un degradado lineal en nuestra capa nueva. Para esto, damos un clic en nuestra nueva capa que llame «Brillo» y aplicamos un degradado lineal , pero esta vez vamos a personalizarlo de la siguiente manera: vamos a seleccionar ambos extremos de color blanco, y en la parte de arriba opacidad 100% y al otro costado opacidad 0%. Es decir, nos quedaria una transicion de blanco a transparente:Ahora arrastramos de abajo hacia arriba para aplicar nuestro degradado y presionamos Ctrl+D para deseleccionar, o Cmd+D(MAC). Ahora en esa misma capa (Brillo) vamos a seleccionar la herramienta de seleccion marco eliptico , y dibujamos una elipse como la mostrada a continuación:
  7. Para finalizar presionamos Suprimir o delete(Mac). y Ctrl + D ó Cmd+D Para quitar la selección.

:@memo_ac   :imageac

31 Ago

Skin para TunesArt

Para aquellos melómanos que no dejan pasar algun detalle a la hora de escuchar sus canciones preferidas, TunesArt, es una buena alternativa para que puedan colocar un aspecto de Cover art en su escritorio.

Les traigo un Skin original imitando los covers o empaques de los vinilos. Este tipo de covers al menos yo ls veia cuando lanzaban los singles.

Para los que quieren saber de la aplicacion, tunesArt es un plugin para iTunes que te deja mostrar tus covers o carátulas de tu musica en el escritorio. Es personalizable y viene con algunos skins o tmeas predefinidos.

Lo mejor es que para los aficionados a las notificaciones, tiene la posibilidad de integrarse con Growl

 

Este skin lo elabore, y les dejo el link de mis trabajos realizados: link Descarga/Download

Mi usuario en Twitter:

 @memo_ac

 

:@memo_ac   :imageac

23 Ago

Como unir 2 objetos o más en Photoshop

Photoshop

A veces necesitamos crear una forma compuesta ya sea de 2 o más formas, y en Photoshop, cada vez que creamos una forma, esta queda en una capa independiente.

Supongamos que quiero lograr esta figura con un efecto de sombra:

Unir ObjetosAhora vamos a crear las figuras:

En la primera capa nos va a quedar un rectángulo con bordes redondeados. Para esto selecciona la herramienta elipse. Si mantienes presionado te aparecera un menu con las diferentes formas. Escogemos la Herramienta rectángulo redondeado.

En la parte de arriba aparecerá un menú donde aparece el radio, el redondeado del rectangulo. En este ejemplo ingrese 10px.

Herramienta rectangulo redondeado

En la segunda capa seleccionaremos la herramienta poligono:

En la tercera capa dibujamos una elipse

Acá al parecer las figuras están unidas pero no podremos aplicarle un filtro a toda esta figura ya que esta en capas independientes.

SI intentamos aplicar algún efecto solo podríamos seleccionar una capa:

Para Unir las 3 formas en una capa se puede de 2 maneras:

1.Mediante combinación de capas:

Teniendo la tecla shift presionada vamos seleccionando las capas que deseamos, las capas nos quedaran resaltadas una vez las seleccionamos:

Ahora en alguna del as 3 capas, damos clic derecho->Combinar capas.

2.Mediante filtros inteligentes.

Seleccionamos las 3 capas como en el paso anterior, una vez seleccionada, vamos al menu filtro y seleccionamos filtros inteligentes:

Ahora si tenemos las 3 figuras unificadas, y podemos aplicar el filtro de sombra. Para esto, doble clic en la capa y nos aparece la ventana Estilo de Capa.

Marcamos la casilla de sombra paralela, click en OK. En esta ventana pueden jugar con los efectos hay gran cantidad.

 

 

:@memo_ac   :imageac

22 Ago

Como alinear Objetos en Photoshop estilo Fireworks o Illustrator

Photoshop

Para aquellas personas que estén iniciando en el uso de Photoshop (Ps), y hayan utilizado fireworks(Fw) o illustrator(Il), puede que tengan algunos inconvenientes para adaptarse a Ps. De hecho yo también estoy aprendiendo a usar esta herramienta, y a medida que vaya «descubriendo» la manera de adaptarme, iré publicando tutoriales básicos para Ps.

En Fireworks/Illustrator

Muchos deben estar acostumbrados a utilizar este Menu en Fw, y Il:

Alinear FireworksSabemos que es muy sencillo el uso, tan solo le daos clic en el botón «Posición», y ya podemos alinear el objeto como deseemos.

En Photoshop

Es muy sencillo. Lo primero es dibujar algun objeto. Yo use la herramienta rectángulo (U), creandolo en cualquier parte del documento.

Lo que tienen que hacer es seleccionar la capa que deseen alinear en este caso le di clic a la capa «Forma1». Ahora que estamos ubicados en la capa  correcta vamos a seleccionar todo: Vamos a Selección->Todo.  Windows (Ctrl+ A),  Mac (Cmd+A).

Seleccion de Capa

Una vez lo tengamos seleccionado vamos al menu Capa->Alinear capas con la selección y nos aparece al menú al que estabamos acostumbrados y ya podemos centrar el objeto con los centros verticales y horizontales.Alinear Capa Photoshop

 

Listo!
:@memo_ac   :imageac

24 Jun

FIF7Y: Recursos para personalizar tu MAC/iPhone

Para aquellos que les guste tener un aspecto único en su desktop, iconos diferentes, e incluso temas completos para personalizar la interfaz gráfica de sus Mac, les traigo una interesante web: FIF7Y.

En esta Web van a encontrar cosas interesantes para personalizar apariencias.

Esta Web Ofrece Aplicaciones como:

  • Screen Me – Para crear tus propios screensavers.
  • Theme it – Personaliza el tema completo de tu Mac Os
  • Link Lite – Aplicacion que lleva estadisticas de tu sitio Web.

Además ofrece Iconos para Mac, iPhone y algunos Extras como wallpapers.

09 May

Beneficios de la tarjeta Profesional

«Las situaciones, nombres y lugares mencionados en este artículo son producto de la ficción, cualquier parecido con la realidad es pura coincidencia.»

Esto va dedicado para todos aquellos malagradecidos que son poseedores de una tarjeta profesional, quisiera generalizar pero creo que por parte de ingenierías andan más ofendidos…perdón,  mal agradecidos, dicen… dicen, que son los que le toca pagar un poquito más.

En fin, estamos hablando de esa pequeña pieza de plastico, que tiene un gran valor para nosotros (no crean que por que es una pieza de plastico no vale nada…y entonces las tarjetas de crédito?).

Al llegar al dia de nuestro grado pensamos que ya teniamos el mundo en nuestras manos, que nuestros padres van a estar orgullosos de nosotros hablando con sus amigos: Mi hijo ya es todo un profesional. ¿Profesional?, pero en que?,  con que años de experiencia laboral?,  yo creo que salímos profesionales en búsquedas en google, que es el único que nos acompaña en nuestro sufrimiento por terminar una carrera.

Pero como decía un amigo: » No se emocionen de a mucho que la graduación es el puente entre el colegio y el desempleo». Si, ahora venia lo más berraco.. el trabajo… de buscar trabajo…, si a todos nos toca, en esas aparece el compañero que se la lleva bien con todos diciendo:

-Oigan ustedes ya sacaron la tarjeta profesional?

Nooo, y eso como es? o pa que es?

-Es que se supone que ustedes no ejercen su profesion si no la tienen!, además la piden en las empresas.

Solo era ir, averiguar y sacarla no era más, «hermanito averiguese en internet como es la vuelta», efectivamente toca llevar diploma, foto (pero de las de estudio y que tales), y ya… cuando le dicen a uno el precio uno queda con la cabeza ladiada, como perro sorprendido.

Y que beneficios trae?, aparte de que te dan la oportinudad de tener un trabajo y ejercer, (eso si es una ventaja, o es lo que toco?), a continuación le diremos para que le sirve y no sea malagradecido:

Situacion 1: Si usted es de los que todavia les gusta llevar un diario, o le gusta escibir basura en hojas reciclables, de una manera ordenada. Es la oportunidad para que use la tarjeta para hacerle las margencitas.

Situacion 2: Llego la hora del almuerzo, usted saca su portacomidas, su juguito de caja, o el botilito con plastico en la tapa pa q no se le escape, y…Changos! no le echaron la cuchara!, fresquiese mijo saque la tarjeta y comase el arrocito tranquilo.

Situacion 3: Llego con una urgencia a su casa y resulta que alguien de chistoso le echo seguro, cerro y se fue?, entonces proceda a sacar su tarjeta, y tuerzale en la cerradura, y..Clic!, abrio!

Situacion 4:Tiene usted una entrevista para el trabajo de su vida, se va peinadito, bien presentado, hoja de vida impecable, llega, se sienta y un apreton de manos a su futuro jefe, en esas ud se mira las manos y..se le olvido cortarse las garras, y se le metio todo el mugre que recogio en el transmilenio!. Fresco su tarjeta  le cabe por las uñas y arrasa hasta con la ultima lagaña que le quede en la uña.

Situacion 5: Usted la esta pasando bueno con sus amigos jugando billar, o a lo mejor en una panaderia tomandose unas cervecitas, llega la hora de pagar, y se le acabo la plata. No crea que tambien es una tarjeta debito o algo por el estilo, que hace usted?, «Vecino le dejo mi tarjeta profesional, ya mas tarde vuelvo y le pago». Desbarado!

Las situaciones son infinitas entonces antes de ponerse a alegar o a echar vainazos, deje de pensar que no le trae  ningun beneficio, y mas bien sáquele jugo para justificar la platica, o al menos le servirá de excusa para cuando lo detenga un mal llamado «chupa» y le diga, ¡Ay!,  señor agente que pena perdoneme la vida que no tenga mi pase, lo confundí con mi tarjeta profesional esta mañana, es que como es tan parecida (que diseño tan original),  y seguro el señor agente le perdonará esa falla, porque usted es un profesional.

Esperemos que no se les ocurra una tarjeta Laboral, que sea requerida para que le consignen a uno las quincenitas.

05 May

Cargador para Magic Mouse «The Magic Charger»

comprar Magic charger

 

comprar Magic charger

A veces es muy engorroso estar cambiando las baterias de nuestro Magic Mouse, por un par nuevo, o en la mayoría de los casos comprar baterias recargables.

De todas maneras si son baterias recargables toca usar otro par provisional mientras se cargan,  aproximadamente de 6 a 12 horas. Claro, si tienes una tableta o un track pad no hay problema.

Ya esto no será necesario, con este accesorio para el Magic Mouse: «The Magic Charger».

Se trata de una base en la que se coloca el mouse e inmediatamente comienza a cargarse, esta hecho con materiales similares a los del Magic Mouse. El cargador viene con su propio pack de baterias las cuales reemplazan las comunes, y se conecta por usb.

Cuando veas el estado de batería muy bajo, tan solo colocalo sobre la base, o cuando no estes usandolo, con la batería al 100% dispondremos de 144 horas de autonomía para usar el Magic Mouse sin recarga.

 

 

03 May

Generador al estilo Lorem Ipsum. Para imágenes

Como todos sabemos existen sitios que nos ofrecen generadores de texto para crear plantillas de nuestros sitios Web o nuestros diseños. Dichos textos la mayoría de nosotros los conocemos como «Lorem Ipsum».

Tambien sabemos lo engorroso que es buscar imagenes gratuitas, o descargarlas de istock Photo, quedando con una molesta marca de agua por parte de istock photo, es por eso que el siguiente sitio web los puede ayudar.

Se trata de Lorempixum, un sitio que nos genera imagenes de acuerdo a nuestros requerimiento, con las medidas y las tematicas que deseemos, y lo mejor..Gratis.

 

Enlace: http://www.lorempixum.com/

03 May

Skin para R4i gold (Os x Aurora)

R4 skin Os X Aurora by imageac

Para aquellos poseedores de una flascard R4, les traigo un tema basado en el sistema operativo de apple: Mac Os X Snow Leopard.

R4 skin Os X Aurora by imageac

Para su instalación o copia del skin deben entrar a la siguiente ruta en sus R4:

\_SYSTEM_\themes.

En algunas R4 existen 12 carpetas que tienen el mismo tema cada una. Esto es porque la flshcard asigna cada una de las carpetas para el respectivo mes. Me explico:

la carpeta theme01 aplicaria para Enero

theme02…..Feb

theme03….Mar

y asi sucesivamente.

Para finalizar lo unico que deben hacer es reemplazar los temas de cada carpeta, o bien alguno en especial, como ustedes prefieran.

En mi caso, reemplace los temas de todas las carpetas.

DESCARGA/DOWNLOAD: Descarga R4i gold Osx AuroraTheme for R4.

 

Sacado de deviantart.

Autor: imageac (Guillermo Andrés Aguilar)

url: http://imageac.deviantart.com/gallery

:@memo_ac   :imageac

20 Mar

Selectores Condicionales en CSS y XPath

selectores condicionales

Primero que todo, XPath (XML Path Language) es un lenguaje que permite construir expresiones que recorren y procesan un documento XML. La idea es parecida a las expresiones regulares para seleccionar partes de un texto sin atributos (plain text). XPath permite buscar y seleccionar teniendo en cuenta la estructura jerárquica del XML. XPath fue creado para su uso en el estándar XSLT, en el que se usa para seleccionar y examinar la estructura del documento de entrada de la transformación.[Sacado de wikipedia].

Tanto los selectores para XPath como para aplicarlos con css son muy similares, ya que estos selectores se basan en la seleccion de etiquetas y atributos de HTML/XML.

Esto quiere decir que podremos seleccionar etiquetas especificas incluso con un atributo especifico y asi poder aplicarle un estilo.

Por ejemplo, utilicemos los enlaces. Para nosotros podria ser muy util colocar un estilo a los enlaces de descarga, otro estilo a enlaces que contengan URLs, o que contengan algun tipo de palabra en alguna parte.

Lo primero que debemos aprender son las siguientes notaciones o identificadores:

^ = Se utiliza cuando queremos referirnos a principio de un string.

$ =Se utiliza cuando nos referimos al final de un string.

* =Utilizado para referirnos a cualquier parte de un string.

La estructura general: <etiqueta>[atributo][identificador]=’Valor de atributo’

Comencemos con los enlaces de descarga, o mejor aún con algun tipo de archivo.

Tenemos el siguiente código:

<a href=«documento.pdf»>Enlace Descarga PDF</a>

<a href=«mailto:correo@mail.com»>Enlace de Correo Mailto</a>

<a href=«http://www.iguazoft.com/index.php»>Enlace a una URL</a>

Para referirnos a todos los enlaces que sean un link a una extension cualquiera, en este caso un PDF, nuestra definición CSS quedaría de la siguiente manera:

a[href $=’.pdf’]{

color:#F00;

}

Con un enlace que nos lleve a redactar un correo como lo es MAILTO:

a[href ^=’mailto:’]{

background:#FFC;

}

Con una URL que lleve el string iguazoft.com:

a[href *=’iguazoft.com’]{

border:#066 2px dotted;

}

Cabe resaltar que no solo sirve para los enlaces, sirve para parrafos, listas, o cualquier etiqueta que podamos colocarle un atributo. digamos si tuviesemos un parrafo con el atributo title tambien aplicaria de la siguiente manera:

<p title=»Idea Principal»>Contendido de Párrafo</p>

 

El estilo quedaría de la siguiente forma:

09 Mar

Efecto de bajo relieve en pixelmator

Lamina corcho


Actualmente es normal ver efectos de bajo relieve o «inset», A continuación vamos a realizar ese efecto en una lámina de corcho para que quede más notable el resultado.

  1. Lo primero definimos el área o las dimensiones de nuestra imagen, en mi caso voy a usar las siguientes dimensiones:

    Luego selecciono un color para mi fondo. El color que voy a seleccionar es #996633, y este color es el que me definirá el color que tiene la lámina de

    corcho:

    El color que me define el fondo es el color de segundo plano, o el segundo, como ven en la imagen.

    Selecciono la herramienta bote de pintura y relleno e fondo.

  2. Para cmenzar a darle aspecto de corcho, vamos a Filtro -> Estilizar ->Ruido. seleccionamos la casilla monocromo y lo cuadramos para que le de la textura. En micaso lo coloque en 5:
  3. Ajustamos saturacion para darle un tono más oscuro al corcho. Vamos a Imagen ->Matiz/Saturación, aca pueden probar con diferentes tonos:
    Ahora ya tenemos la textura de lámina de corcho, lo siguiente es escoger alguna fuente del gusto de cada uno, para escribir algun texto.
  4. Clic en la herramienta Texto (T), y luego introducimos el texto deseado. En este ejemplo uso la fuente Lucida Caligraphy en Italic. Y selecciono un color parecido a la textura, en mi caso seleccione #9c6d3d.
  5. Para poder editar el texto en cuanto a efectos, tenemos que rasterizar la capa, vamos al menú Capa->rasterizar Capa texto.
  6. Ahora teniendo seleccionada la capa del texto vamos a Filtros->Estilizar->Ruido y cuadramos la textura de corcho como lo hicimos anteriormente.
    Si lo desean oculten la capa de fondo para que puedan ver mejor y no se les refunda el texto.
  7. Una vez hecho lo anterior, vamos a oscurecer un poco este texto para que se destaque del fondo. Vamos aImagen->Matiz/Saturación y ajustamos un tono mas oscuro, desplacen un poco el circulo amarillo del grafico Matiz saturacion hasta lograr el efecto deseado. En mi caso ajuste Saturación en 18 y Luminosidad en -30.Asi deberia estar quedando.
  8. Lo siguiente es seleccionar la capa de texto, dar clic secundario->Duplicar
  9. Ahora vamos a Imagen->Brillo Y Contraste y le quitamos un poco de brillo para que quede más oscuro que el primer texto.
  10. El siguiente paso es colocar esa ultima capa de texto debajo de la anterior, Nos quedaria la más oscura debajo:
    Para finalizar toca desplazar hacia arriba un poco la imagen más oscura (texto oscuro), con las flechas del teclado pueden desplazarla, no mucho, hasta que logren el efecto.
  11. Si desean suavizar más esta capa, pueden difuminarla ligeramente con Filtro->Difuminado->Difuminado Gaussiano.
  12. Listo!.


Lamina corcho