Earlier this week, thousands of sites, including JoeTech.com, blocked or hid their content as a symbolic gesture to protest the impending SOPA/PIPA legislation that threatened the integrity of free-flowing information on the Internet. While some sites displayed a pop-up message allowing users to move on to content by clicking a button and Google simply changed their logo to appear censored, sites like Wikipedia and Joe Tech completely blocked all content from users to truly emphasize the impact such legislation could cause. An example is seen below. This post will show you how we did it in just a few very easy steps.
Black Out Your Site Like Wikipedia
This site and Wikipedia both used a pretty harmless method to block our content for the protest. The method we used involved simply covering up the normal content with a layer of HTML that hides it and shows something else in its place. To accomplish this in an elegant way, you will need an image and/or content to display, the HTML shown below, and a small change to your site’s CSS. Here’s how it’s done:
1. Create your image and content. In my case, I made a couple very simple changes to a large version of my logo image to make it more protest-y.
2. Add the overlay code. In your site’s template (or your theme’s footer.php in WordPress), copy the code below and paste it right above the /body tag. Modify it as indicated to include your own image or message.
<div style="position:absolute;left:0px;top:0px;
width:100%;height:100%;
background:url(/images/darken.png);text-align:center;">
<!-- Add your image and message below this line -->
<img src="/images/sopa.png" />
<!-- Add your image and message above this line -->
</div>
3. Stop the scroll. Update your site’s CSS file to stop the original content from being larger than the new overlay content. This may not always be necessary, but will be pretty obvious when it is. Just add the following code anywhere to the bottom of the CSS:
body{overflow:hidden;}
That’s it! Follow the three steps above and you’ll have your protest/maintenance/special message up in no time on every page on the site.
There are a lot of flat, boring web sites out there, but there are also a lot that are interactive and sometimes even include fun little surprises. Today, I’m going to show you one way to create a fun little interactive surprise in your web page design. David, a regular reader, pointed me to this page and asked how they accomplished the effect with the footer image that changes (click the link and watch the bottom of the page while scrolling down slowly). The effect is what I tried to illustrate below.
Pretty cool, right? The best part is that this is super easy to achieve. Below, I’ll walk you through a few easy steps I completed to create my own interactive background.
Step 1: Create your images
To make this trick really work you want at least two images. The first is a two-toned image that represents the before and after imagery. For my example, I used grey on top and black on bottom. The second image is the gradient that creates the illusion. The gradient should fade in from the same top color to the same bottom color as your before/after image. Try to make both images close to the same height, but experiment with the positions of your artwork. Also, this works better if the two pieces of artwork don’t overlap each other. Just as important is the format. GIF files may work, but generally, PNG images are best.
Step 2: Create HTML
The HTML is really very simple. Inside your body tag, you want a div element with a class of “wrapper” and inside this, another div element with a class of “push”. Below those, you need a div element with a class of “footer”. You can use different names, as long as they match the CSS when you’re done. Be sure to fill up the “wrapper” div with enough content to make the visitor scroll.
Here’s my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="404143" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div class="wrapper">
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<div class="push"></div>
</div>
<div class="footer">
<br><br><br><br><br><br><br>
</div>
</body>
</html>
Step 3: Create your CSS
The final step is to create your CSS. This can be inside your HTML page or in its own .css file that the page loads. Either way, set up the CSS for the body and each div element you created as seen below. Of course, the height and margin values may be different for your usage.
body {
background-image: url(./twotone.png), url(./bottom.png);
background-repeat: no-repeat, repeat-x;
background-position: center bottom, center bottom;
background-attachment: fixed, scroll;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -152px; /* the bottom margin is the negative value of the footer's height */
}
.push {
height: 50px;
}
.footer {
height: 320px;
clear: both;
link: #ffffff;
background-image: url(./footer-skulls.png)
}
With the third step done, the only thing left to do is check it in a browser and adjust as needed. Here’s the rough example I threw together here . I didn’t spend a lot of time on it, but for my example, I created a before/after image using a circuit diagram I found online and a one-color version of my logo. I also kept the skulls image for my demo because I liked it.
Quick Start Kit
I breezed through the steps a little, but it shouldn’t be too hard to accomplish if you have some knowledge of web page development. In any case, the easiest way to try this out is to create a new before/after image and play with what I’ve already done. For this reason, I packaged up the code, images, and a layerd PSD of my before/after image to get you started. Try it out for yourself and if you put it online, link to it in the comments so we can see.
Although the following is a sponsored review, as always I strive to provide an honest opinion of the product reviewed.
One of the most complicated things to do for the first time is build a web site. Most people don’t even know what the HTML acronym stands for, much less how to turn hundreds or thousands of lines of HTML into a web site. And let’s be honest. Your first web site is usually hideous just like mine was. One way around this is to hire a website developer to create your site. An alternative for those without a huge web development budget is a site like the free website maker reviewed here.
(viewing a photo in my new site’s photo gallery)
How uCoz.com Works
The idea behind uCoz is pretty simple. They provide a web site that helps you create your own website online. From choosing a site name and design template to installing and configuring even the small details of what they call site modules, the whole process is done without the need for any real skill, an HTML book, Photoshop, or even a paid hosting account because uCoz hosts the site for free.
(one of the many configuration panels)
When you build a website, you’ll get a control panel, and this is where all the magic happens. From the control panel, you can change basic site settings, languages and wording, and add, edit, and remove pages as well as view stats on individual pages. Becoming familiar with how everything works in the control panel is the first order of business that you should attend to. This was pretty easy with help along the way, but there were a couple areas that took a little longer to comprehend. In general, most processes were easy to follow and accomplish, but there is a lot to play with.
The uCoz.com Web Top
The part that surprised me a little was the uCoz Web Top. The Web Top is a web interface that looks and acts remarkably like Windows. With everything from background configuration and even its own programs, the Web Top is your gateway to your websites. This is because they let you have more than just one free site. At first glance, the Web Top looked like a very over-done way of providing simple access to your multiple sites, but after playing, I realized that it offers a lot more than that. It has games, which I think is fun but counter-productive. More importantly, it has applications built right in. Beyond the simple Calculator and Task Manager are much more useful applications like the code development program and Pixlr, the image editor with lots of great features.
(creating images is easy with the Pixlr image editor)
I develop complex websites all day long in PHP and the tools I use the most are Photoshop for design and Zend for code editing. The offering of similar tools from within the Web Top makes this a much more viable web development and hosting platform for those with a little more skill and creativity.
Features and Modules
After you’ve created a basic web site you can add and configure a number of site sections or modules such as forums, photo galleries, a guest book, online games, a blog, polls, classified ads, and files. Each module is pretty configurable and most of them include user interaction like being able to give a photo anywhere from one to five stars. The sites also allow for user registration so that users can log in to interact. Behind the scenes, as an admin, you can block users, set up groups and permissions, and the list really does go on.
One of the cooler features I came across was the use of content tokens. A simple token I used was for an image. I uploaded an image to use with content and the system generated a token $IMAGE1$ for displaying the image. I copied that token to the spot in content where I wanted the image to appear and it showed up there. A more useful example was the widget token that was created when I generated a Twitter widget. I then just used the token in the same way I had used the image token and the Twitter feed widget appeared in the site.
Conclusions
uCoz.com looks great, but hides some really cool features behind your user login. I had no idea about Web Top until I was already using it. Other than the occasional broken image in the interface, everything was very intuitive and I had a basic site with some fun features up pretty quickly. The only area I felt needed some attention is the selection of templates. There’s a few nice templates to choose from (and you can modify any of them or make your own), but the selection is pretty slim. The non-commercial limitation is the only thing that should scare away those looking for a site on a shoe-string budget, but for a personal site, I don’t know of a better free solution. If you need a personal site, this should be your first stop.
If you’ve ever built a web site, you’ve probably done your best to make sure people know about it. It’s no surprise, then that there’s no shortage of sites out there ranking the popularity of all the sites on the internet. We’re all familiar with Google’s Page Rank where the bigger number from 0 to 10 is better and Alexa’s ranking system in which your site’s ranking is out of all sites on the internet, making a ranking of 1 the best. Today, AllTop linked out to Nmap.org’s visualization of the 300,000 most popular web sites on the internet, and JoeTech.com made it in the image, right next to Mashable, as did Lnk.gd (my URL shortening site).
As you may be able to tell from the image, Nmap grabbed the favicon image from all of these sites and used it to represent the site in the visualization.
The area of each icon is proportional to the sum of the reach of all sites using that icon. When both a bare domain name and its “www.” counterpart used the same icon, only one of them was counted. The smallest icons–those corresponding to sites with approximately 0.0001% reach–are scaled to 16×16 pixels. The largest icon (Google) is 11,936 x 11,936 pixels, and the whole diagram is 37,440 x 37,440.
Here’s a breakdown of how JoeTech.com and Lnk.gd compare (in this visualization) to some sites you may recognize. In parenthesis are the dimensions of the site’s image relative to the complete image.
JoeTech.com (416 x 416):
It’s worth noting that the image they grabbed (from some time ago, I would think) was the OLD chat bubble favicon while the current one is the head part of my logo.
While I think JoeTech.com should definitely be in the image (based on my Alexa ranking), I have to question where it stands proportionate to the likes of Mashable and The White House. I haven’t taken a look at the algorithm used by Nmap, though, so perhaps there’s a secret sauce I don’t know about.
In any case, it’s nice to make the cut and even nicer to see the visualization of all the web’s traffic. I have a poster from 1999 that visualizes the web’s traffic in a similar way and a quick comparison of the two shows some striking changes in how the web is viewed today. What was your favorite site to visit back in 1999 (if you were online then) and what are your favorites now? I think it was Google and Ebay for me in 1999 and today it’s Google and Facebook.
