You Sleep Emails

web-design | |

By Zeus Perez ::) | May 01, 2012

you sleep emails
http://blog.zeusdidit.com/files/index.html

Completely Fluid Design

articles | |

By Zeus Perez ::) | Apr 18, 2012

Step 1. HTML

http://blog.zeusdidit.com/files/font-size-test.html

Step 2. FIX HTML OVER AND OVER

http://blog.zeusdidit.com/files/font-size-test.html

Step 2. TIGHTEN SPECS
http://blog.zeusdidit.com/files/font-size-test.html

Today's Hot Links #17: Picozu

articles | |

By Zeus Perez ::) | Apr 18, 2012


http://www.picozu.com/editor online HTML5, CSS3, JQuery Photo Editor

Decent

comics | |

By Zeus Perez ::) | Apr 13, 2012


Facebook Cover Photos

web-design | |

By Zeus Perez ::) | Mar 29, 2012

facebook cover photos
facebook cover photos

Just Leggs Logo Design

web-design | |

By Zeus Perez ::) | Mar 06, 2012

Sepia Land

comics | |

By Zeus Perez ::) | Feb 27, 2012

wordpress htaccess

articles | |

By Zeus Perez ::) | Feb 24, 2012

moved site from cpanel to whm for better remote access and control and still have ips left but when i did this the site worked but some folders and directory weren’t showing up. Did it twice to double check but no go. The great guys at HostGator rule. Here’s how we solved it.

next up -amazon cloud server :)
think i’m gonna take it up a couple thousand notches.

(1:18:04am)Caley G.:This is what was added to your wordpress .htaccess to help it behave properly. I simply commented out the offending directory, and added the following:
(1:18:04am)Caley G.:
(1:18:04am)Caley G.:# BEGIN WordPress
(1:18:04am)Caley G.:
(1:18:04am)Caley G.:
(1:18:04am)Caley G.:RewriteEngine On
(1:18:04am)Caley G.:RewriteBase /
(1:18:04am)Caley G.:RewriteCond %{REQUEST_FILENAME} !-f
(1:18:04am)Caley G.:RewriteCond %{REQUEST_FILENAME} !-d
(1:18:04am)Caley G.:RewriteRule . /index.php [L]
(1:18:04am)Caley G.:

(1:18:04am)Caley G.:
(1:18:04am)Caley G.:# END WordPress

there now i really talked in code

Gradient CSS3 for Design

articles | |

By Zeus Perez ::) | Feb 23, 2012

This code can be used in a stylesheet to render CSS3 for gradients so rather than having to design a gradient, cropping and making a 1 pixel image to repeat using CSS, this will allow you to swap colors and have a simple one.
background-image:-ms-linear-gradient(bottom,#3a3a3a,#222);background-image:-moz-linear-gradient(bottom,#3a3a3a,#222);background-image:-o-linear-gradient(bottom,#3a3a3a,#222);background-image:-webkit-gradient(linear,left bottom,left top,from(#3a3a3a),to(#222));background-image:-webkit-linear-gradient(bottom,#3a3a3a,#222);background-image:linear-gradient(bottom,#3a3a3a,#222);

JQuery Full Screen Images

articles | |

By Zeus Perez ::) | Jan 26, 2012



This script will allow you to use full cover background images on your website. You can use it with z-index to lay it all the way to the back of the content so you can also stack items! You can get really creative with building fullscreen ready content for tablets, mobile devices or full screen websites. I'm using it on a variety of blogs so I'll explain some of the principles below.


head tag:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

<script type="text/javascript">

jQuery(function() {

var theWindow = jQuery(window),

$bg = jQuery("#bg_img"),

aspectRatio = $bg.width() / $bg.height() ;


function resizeBg() {

if ( (theWindow.width() / theWindow.height() ) < aspectRatio ) {

$bg

.removeClass()

.addClass('bgheight');

} else {

$bg

.removeClass()

.addClass('bgwidth');

}

}


theWindow.resize(function() {

resizeBg();

}).trigger("resize");

});

</script>


<!--You need to include the code above into the head of your HTML document. This will set the resize feature for the image-->


////////////////////////////////////////////////////////////////////////////////////

style tag:

#bg_img {

background-position: center center;

top: 0;

left: 0;

position: fixed;

z-index: -1;margin:0px;padding:0px;

margin:0px;

}


.bgwidth {

width: 100%;height:auto;}

.bgheight {

height: 100%;width:auto;}


// I've set the z-index but using inline styles you can rewrite this.


////////////////////////////////////////////////////////////////////////////////////


img tag:

use 1:

img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" class="bgwidth"

<!-- this is standard use where the image fits to the width-->


use 2:

img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" style="height:100%;width:auto;

<!-- here i start to use inline to control the photos, in this case I want the photo to fit to the height of the page, which messes up the width, but whatever-->


use 3:

img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" style="height:100%;width:100%;

<!--here i just tell the picture to fit however it can on the screen


use 4:

<div id="bg_img" style="width:50%;height:100%">

<iframe width="100%" height="100%" src="http://www.youtube.com/embed/Gw09tAcNB0Q" frameborder="0" allowfullscreen></iframe>

</div>

<!-- this is where I had some fun, see, you can use the bg_img ID on ANYTHING so I added it to a DIV and then I added a youtube embedded iframe set to 100% so it just fills the screen, but it's being controlled by the DIV with the inline style! If I added z-index I'd have things hovering over or behind but I'll show some examples later.-->

Here’s a short list of items your next user experience design for comments should contain in order of priority. This will allow for sites to capture more relative analytics per site without needing to go through Google Analytics, even though you could use their transparent pixel capturing to send data to them as well per post.

So let’s start the list:

1. First Name, Last Name, Thumbnail (readers love icons)
2. Link to a users site
3. Global Location
4. Date commented.
5. Comments, delimited to 566 characters which is about 2 paragraphs
6. An Expand button for comments so websites can capture using AJAX or JQuery how often user’s are interacting or reading comments but not posting.
7. Nested comments for responses, and even chained comments. Users love to comment on one another.
7. A Sharing or Recommend Facebook button or text
8. Filtering mechanism that compute Most Shared, Most Commented and Latest posts.

Here’s some important aspects to remember for commenting. I’m going to use the New York Times as my example due their popularity and level of commenting. The Times has the ability to sort or just show top most shared comments. But they are missing some simple elements. The UI for Esquire’s online edition already does some the nesting, though they don’t have the sorting I’d like.

Today's Hot Links #16: Soul Reaper

articles | |

By Zeus Perez ::) | Jan 11, 2012


http://www.soul-reaper.com/ Reaper HTML5 meets comic books

Today's Hot Links #15: Fotoshop by Adobé

articles | |

By Zeus Perez ::) | Jan 11, 2012

http://vimeo.com/34813864

Fotoshop by Adobé from Jesse Rosten on Vimeo.

With a bit of humor this artist blows wide open what it takes to make anyone, regardless of race or age, to be ‘magazine’ or ‘movie’ quality. Please note, you may really laugh really hard as wrinkles are removed easily with this product. Reapplication is necessary.

Today's Hot Links #14: Cut The Rope

articles | |

By Zeus Perez ::) | Jan 11, 2012

http://www.cuttherope.ie/

Talk about HTML5 taking over. This simple site works in all browsers and mobile devices seamlessly. Keep an eye out for http://www.zeptolab.com/ I see wonderful games and experiences coming from them since they think outside the complex box and leap into a fun simple box kids and adults love.

I’ve been using Google Analytics for a while but wanted to use a way to track email open or deliver rates. Enter this page regarding email tracking:
http://code.google.com/apis/analytics/docs/tracking/gaTrackingTroubleshooting.html#GIFVars Tracking

Then of course I find
http://code.google.com/apis/analytics/docs/mobile/mobileWebsites.html Analytics for Mobile
Where Turadg says on Stack Overflow:
“As others have pointed out, you can’t use Javascript in email. The actual tracking is done by a request for __utm.gif though and the Javascript just constructs the GET parameters.

Google supports non-Javascript uses of Google Analytics per their Mobile web docs: http://code.google.com/mobile/analytics/docs/web/

They document the full list of parameters, but the only necessary parameters are:

Parameter Description
utmac       Google Analytics account ID
utmn       Random ID to prevent the browser from caching the returned image
utmp       Relative path of the page to be tracked
utmr       Complete referral URL

So let’s create an example email, send it via MailChimp or WordPress or other item, or hell, all mail servers I can find to make sure I get some analytics back!

Older  

Real Time Web Analytics