Paujas

How to login with different user in Sharepoint Designer 2010

paujas — Thu, 19 Jan 2012 23:07:43 +0000

I know this title entry could sound weird and silly but the real thing is that I had this issue a few days ago with one project in Sharepoint Designer 2010. The tool is good but it has a really poor usability design.

Seriously, it took me a complete day of my life to figure where was the login as different user option! So, if you are experiencing the same anxiety I did, this can help you:

In Sharepoint Designer 2010 there is an option at very bottom left corner (copied and pasted wherever they liked I guess) which shows the current logged in user information and options to change user. See below figure:

Shield Cool Web Menu

paujas — Sat, 07 Jan 2012 23:20:05 +0000

I made this funky shield menu for a web site prototype. I wanted to share it as an inspiration resource. Hope you like it:

Implementing a mobile site and slide transition effects in page navigation with jQuery Mobile

paujas — Wed, 14 Dec 2011 00:48:35 +0000

I needed to create a mobile site for mobile devices such blackberry, iphone and android. I really wanted to make this site special and one special thing that came to my mind was the sliding effects between pages to make the navigation fancy and nicer (just like the default transitions in iPhone). But, after looking for a really long time I couldn’t find something better than jQuery Mobile framework (http://jquerymobile.com/). It has cool transition effects and the GUI is already suited for mobile sites.

To apply jQuery Mobile framework to your site, you just have to add some links in your header in order to load jQuery and also add jQuery tags to your main containers. For example, this is the basic structure of my home page:


            Home

            
           
    
               

            
            




            
                
            

            
                        
                        
                                 
                                                Corporate Headlines
                                                Local Headlines
                                                PCMs
                                                Other Option 1
                                                Other Option 2
                                                Other Option 3
                                    
                     
  
            
 
                
                                      Copyright © 2011, United Parcel Service of America, Inc. Log Out

I have four main containers for my home page:

wrap (div)

header (div)

main (div)

menu list (ul)

I had to apply jQuery tags to my main containers in order to activate jQuery Mobile styles and transition effects. These containers look like this:

data-role="page">
data-role="header">
data-role="content">
data-role="listview">

After applying all “data-role” tags my home page looked like this:


            Home

            
           
    
               
                        


data-role="page">
            data-role="header">
                
            

            data-role="content">
                        
                        
                                 data-role="listview">
                                                Corporate Headlines
                                                Local Headlines
                                                PCMs
                                                Other Option 1
                                                Other Option 2
                                                Other Option 3
                                    
                     
 

            
 
                     
                                      Copyright © 2011, United Parcel Service of America, Inc. Log Out

You can find more about jQuery mobile tags and page templates here: http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html

But the things were not just that easy at this point. When I added this framework to my site, all my stylesheets and all my original design were gone! The default jQuery Mobile style had owned my design styles.

Original design:

After applying jQuery Mobile framework:

Shocking, right? I did extensive research and couldn’t find anything that could help, so I just experimented with jQuery tags.

Finally, after ten thousand tests I noticed that some jQuery tags had to be removed in order to disable default jQuery Mobile styles and enable mines:

Now I have my element page containers like this:

data-role="page" >
data-role="header">
data-role="content">
data-role="listview">

I discovered if I removed all “data-role” tags from my containers, my original styles came back but I lost all the transition effects from jQuery. So I removed all “data-role” tags from all containers except in wrap container:

data-role="page" >

And this was the result:

Excellent! But… The background is gray! This was not right and I found this trick of how to disable the default gray background from jQuery. You can create from scratch your own theme but I didn’t have the time (neither the mood), so here it is:

data-theme="f">

Let me explain it a little bit:

By default, jQuery has five style themes: a, b, c, d and e:

And you can choose any theme you like from these five. But, if you add a theme which doesn’t exist inside mobile jQuery framework, automatically all default visual styles disappear and, of course, the freaking gray background:

And voila! No more default theme styles from jQuery! So you can choose any theme name you want but all jQuery default themes: a,b,c,d and e. I chose “f”because was the logical next letter.

Now, talking about the transitions, the jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation (http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html):

slide
slideup
slidedown
pop
fade
flip

By default, the framework applies the right to left slide transition. To set a custom transition effect, add the data-transition attribute to the link:

data-transition="pop">I'll pop

In my case I just wanted the default slide transition effect to my links, so I had to do nothing. Just remember to put the data-role=”page” tag in the wrap container element from all the singles pages and will work like a charm!

Some geeky-nice wallpapers of digital design

paujas — Tue, 11 Oct 2011 22:10:01 +0000

I found these wallpapers in a cool website called quicklycode and I think there is a lot of interesting things and resources regarding web design, graphic design, cheat sheets and creative development.

These were my favs:

Excellent template for web design: 960 Grid System

paujas — Fri, 07 Oct 2011 22:30:51 +0000

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

These are the demo and links to the original page:

http://960.gs/demo.html
http://960.gs/

Retoque básico: Cómo retocar una fotografía para mejorar los colores.

paujas — Sun, 06 Mar 2011 20:36:02 +0000

Retoque básico de colores.

Nivel: Básico/Intermedio

Muchas veces vemos fotos en Internet que tienen colores realmente asombrosos, sombras bien definidas y contrastes perfectos. Muchas de ellas han sido retocadas para obtener estos efectos visuales tan impactantes. En este tutorial les voy a enseñar con pasos y técnicas muy básicas como lograr esto en Photoshop.

1. Para este tutorial, escogí una fotografía que tomé de París, la pueden obtener aquí. O bien, si tienen una foto con las mismas tonalidades (azuladas, frías) la pueden usar.

2. Lo primero que hay que hacer en Photoshop, es abrir la imagen y duplicarla en un layer nuevo. Para hacer esto, seleccionan el layer de la foto Original (Llamado Background) y lo arrastran al icono de “Create new layer” ubicado en la parte inferior del panel de Layers:

3. Una vez duplicado el background, lo podemos nombrar: “luz_sombra”. Para nombar un layer damos doble clci sobre el nombre actual del layer y escribimos el nombre deseado. Ahora, vamos a modificar las luces y sombrar de la imagen.

Hasta este punto la imagen luce pálida, sin profundidad. En mi caso es por que la foto se tomó en un día muy nublado sin las configuraciones adecuadas de iluminación de la cámara. Vamos al menú Imagen, opción Adjustments > Shadows/Highlights.

Esta opción nos da muchas maneras de configurar las luces y sombras de la imagen. Aquí hay que ser muy cuidadosos de no saturar demasiado la imagen con los contrastes muy altos y de no cargarla de mucho brillo. Esta es la configuración que me pareció adecuada:

Es al gusto de cada quién la forma en como luzca la foto, no siempre tendrán que ser estos valores. Repito, depende mucho de cómo luzca la foto y tener mucho cuidado con contrastes y brillos altos

4. Una vez hecho esto, duplicamos nuestro layer “luz_sombra” y lo nombraremos “luz_sombra_mask”. En mi foto, lo más interesnate del paisaje es el cielo. La luz y sombra que configuré anteriormente lo hacen resaltar mucho. Pero la parte del puente y el río luce muy oscura y saturada. Vamos a corregir esto.

5. Teniendo el layer “luz_sombra_mask” seleccionado, le creamos una máscara. Esto se hace seleccionando el ícono de “Add vector mask” de la parte inferior del panel de layers.

6. Para los que ya saben utilizar máscaras en photoshop, ignoren la siguiente explicación.

Las máscaras en photoshop, son una herramienta que nos permite ocultar partes de un layer, pero sin borrar físicamente estas partes; las que podremos recuperar de inmediato tan sólo con deshechar la máscara del layer. Estas partes ocultas funcionan con niveles de transparencia. Esta transparencia funciona en base a dos colores: el negro para desaparecer zonas del layer y el blanco para recuperar esas zonas.

Si quieres saber más de máscaras y como aplicarlas, este es un tutorial muy básico para su entendimiento:

http://www.maestrosdelweb.com/editorial/photomask/

Una vez hecha la máscara, vamos a seleccionar un pincel suave con una opacidad al 60%.

Nota: El color del pincel debe ser negro.

Y ahora vamos a empezar a borrar las zonas oscuras y saturadas de la imagen. En mi caso, estas son las zonas que corregí:

Las zonas en rojo, son el resultado de pintar con el pincel. Puedes ir cambiando la opacidad del pincel para obtener un efecto más natural. Los valores de opacidad que utilicé fueron: 60%, 45%, 15% (para nivelar un poco la saturación de las nubes).

7. Excelente, ahora nuestra imagen debe lucir (más o menos) así:

Antes:

Después:

Ahora hay que crear un layer de ajuste. El layer sería de brillo y contraste (Brightness/Contrast). Esto se hace seleccionando el ícono de “Create new fill or Adjustment layer” y seleccionamos la opción “Brightness/Contrast”.

Los valores de brillo y contraste son:

Nuestra imagen debe verse así:

8. Creamos ahora un nuevo layer de ajuste de niveles (Levels) con los siguientes valores:

Nuestra imagen debe lucir así:

9. Creamos otro layer de ajuste de Viveza (Vibrance) con los siguientes valores:

Nuestra imagen debe lucir así:

10. Y por último, creamos un nuevo layer de ajuste de Balance de color (Color balance) para darle un toque de color con los siguientes valores:

Nuestra imagen debe lucir así:

Eso sería todo. Espero que les haya servido para mejorar sus retoques y sus técnicas en Photoshop. Y recuerden, hay que tener mucha imaginación y paciencia para conseguir y lograr grandes efectos.

Comprimir directorio respetando la estructura jerárquica en UNIX

paujas — Fri, 05 Mar 2010 15:42:43 +0000

Para comprimir un directorio respetando la estructura jerarquica se puede utilizar este comando:

tar -cvf – | gzip -c >

Para extraer:

tar -xvfz

gzip -d

tar -xvf

Arsenal – Lotuk

paujas — Thu, 18 Feb 2010 23:28:55 +0000

Arsenal es un grupo de Bélgica formado desde 1999 por Hendrik Willemyns & John Roan. Su estilo va de lo indie-pop hasta lo electrónico mostrando un particular ajuste auditivo. En lo personal, me gusta mucho ya que es un sonido musical fresco, nuevo sin perder su escencia alternativa. Es por eso, que recomiendo mucho su nuevo lanzamiento: Lotuk:

Artista: Arsenal
Título del Album: Lotuk
Año: 2008
Género: Electronica
Calidad: MP3
Página del grupo: http://www.arsenal-music.com/

http://www.filestube.com/04c2c32849862dca03ea,g/Arsenal-Lotuk-CD-2008-LiR.html

Passion Pit – Manners

paujas — Thu, 18 Feb 2010 19:01:56 +0000

Passion Pit es un banda electropop (soul/big beat/pop) Americana que se formó en el 2007. Sus integrantes son Michael Angelakos, Ian Hultquist, Ayad Al Adhamy, Jeff Apruzzese y Nate Donmoyer.

Sonidos retro-futuristas, coros de escuela primaria al mejor estilo de The Wall, estribillos pegajosos, matices y mezclas bailables, letras encantadoras y tortuosas hacen que Manners sea uno de mis discos favoritos.

Artista: Passion Pit
Título del Album: Manners
Año: 2009
Género: Electronica
Calidad: MP3

http://www.mediafire.com/file/mmol4dztink/Manners.rar

Para abrir y leer un archivo usando utl_file con dbms_output

paujas — Sat, 13 Feb 2010 00:32:32 +0000

La utilería utl_file de oracle sirve para interactuar con archivos. En esta entrada mostraré como abrir y leer un archivo con esta librería:

declare

f utl_file.file_type;

s varchar2(500);

begin

– puede ser ruta del servidor de base de datos o ruta del cliente:

– parametros: ruta, archivo, R-read

f := utl_file.fopen(‘/batch/salidas/prueba’,'paujas.txt’,'R’);

loop

utl_file.get_line(f,s);

dbms_output.put_line(s);

end loop;

EXCEPTION WHEN NO_DATA_FOUND THEN NULL;

utl_file.fclose(f);

end;

/