web Archives - Joe Tech

How To Black Out Your Site In Three Easy Steps

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

Warning: Division by zero in /var/www/sites/jtnew/wp-content/themes/twentysixteen/functions.php on line 16

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.

sopadark

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;">  <img src="/images/sopa.png" />  </div>

Here’s the background and content images I used.

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.

How To Create An Interactive Web Background With CSS

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:

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.

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.

uCoz – A Website That Builds Websites

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.