Thursday, May 8, 2014

Firefox 29: What's New

For quite some time, Microsoft's Internet Explorer dominated the browser market since now-popular browsers such as Mozilla Firefox, Google Chrome, and Apple Safari were just being released.

Now, the browser industry has changed dramatically. The browsers that initially challenged IE have overtaken it by a very wide margin; Internet Explorer, due to its late adoption of new web technologies (the recently-discovered IE bug that could allow hackers to compromise the user's computer isn't helping either) as well as other browsers being loaded with new, cutting edge features. Chrome, being the most popular browser, is noted the most for being the fastest and lightest browser of the competition, but now it has a worthy rival. Why? Firefox 29 was released last Tuesday.

What makes Mozilla's browser different from before? Well, lots of things. For starters, if you have ever used earlier versions of Firefox before, you'll notice that the interface is completely different. The orange "Firefox" button that opened up a list including some of the basic tools of the browser, such as bookmarks, history, and opening a new tab, is gone. Instead, there is a menu button (similar to ones on mobile-optimized websites and applications) that does the same thing but in a more graphical, touch-friendly manner. It's also faster, more customizable, and is more out of the way when you just want to see the web. Here's the official video about it.


Saturday, May 18, 2013

How to Create an Overlay

Have you ever wanted to display something on your website but not on the page or in a popup window? Use an overlay. An overlay is basically a cover over a page that allows you to also display something over a page. In this tutorial, HTML, JavaScript, and CSS will be used to create a professional-looking overlay.

First, create the HTML structure of the overlay and the content you want to display.

<div id="overlay"></div>
<div id="overlayContent" style="">
<p>Overlay content goes here...</p>
</div>

The overlay, which is the dark screen that covers the entire page, is a div with the id overlay. The overlayContent div is the box that displays the content. The IDs will be needed for the CSS and JavaScript.

Next, define the CSS of the overlay by putting this in your CSS style sheet.

div#overlay {
display: none; /* Until the JavaScript toggles it to display */
z-index: 2; /* Display the overlay over the page; if other page elements have a higher z-index, increase this one. */
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#overlayContent {
display: none;
position: relative; /* You can place the overlay content anywhere with the CSS top, bottom, left, and right attributes. */
z-index: 4;
margin: 150px auto 0px auto;
width: 770px; 
height: 620px;
color: #000;
background: #B3B3B3;
border-radius: 3px;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}

This makes the overlay black and appear over the page. You can also customize these to match your site's look and feel.

Then, put this JavaScript in your site's <head> tag.

<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var overlayContent = document.getElementById('overlayContent');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
overlayContent.style.display = "none";
} else {
overlay.style.display = "block";
overlayContent.style.display = "block";
}
}
</script>

This gives further styles to the overlay and the content, and fetches the ID of both elements.

Finally, put this link on your site, so when visitors click on it, the overlay will appear.

<a onmousedown="toggleOverlay()">Click here!</a>

And make sure to put a "Close" button somewhere in the overlayContent:

<a onmousedown="toggleOverlay()">Close</a>

Now you know how to create an overlay for your site. This can be used for a variety of content, including videos, games, images, or just text. Enjoy!

Monday, October 29, 2012

Exploring Advanced CSS

Now that you know the basics of CSS in one of my other posts, Exploring CSS, there are many more advanced CSS properties that you'll need to know if you want to make your website look more advanced as well. Here are a few of these advanced properties.

CSS3

Before I get on to some advanced CSS3 tricks, it's necessary for you to know what CSS3 actually is. 

CSS stands for cascading style sheets, which let you style virtually anything with CSS alone (except for check boxes and some other elements). CSS3 is the third revision of CSS, which adds more properties that allow webmasters to style their websites like never before. CSS3's new properties are supported in Firefox, Chrome, Safari, maybe the new Yahoo! Axis browser, and possibly Opera. But Internet Explorer 8 and below do not support CSS3.

Border-radius

CSS3's border-radius property is probably my favorite. It lets webmasters take their sites to the next level in design: Curved corners on elements.

Using this property on elements is easy. Just come up with the pixel value of how curved the corners should be, and use this code in your site: 
{-moz-border-radius: (x)px; -webkit-border-radius: (x)px; border-radius: (x)px;}

With the border-radius property added, this is what a normal text box should look like:



Box Shadow

Box-shadow is a CSS3 property that lets webmasters put natural-looking shadows in or around various elements on the page. It also gives elements dimension. Two examples of the code for box shadow (minus the -moz and -webkit prefixes) are below.
{box-shadow: 0 1px 2px (color)} or {box-shadow: inset 0 1px 2px (color)}

These examples put a little bit of box shadow on the bottom or inside (with the inset property) of an element.

You have a few different options for the color of the box shadow. If you want it to look more like a border, use hexadecimal or RGB (red, green, blue). If you want it to look like a real shadow (in IE9+ and all modern browsers), I highly recommend using RGBA, a CSS3 color selector. Try using rgba(0,0,0,0.2) as the color. This is what a box looks like using it.


Selection

Selection is a new favorite CSS3 property of mine. It lets you control how selected (or highlighted) text looks. Instead of having the usual background color appear, you can make it so that just the text turns red. Here's an example of it.
(element)::selection {color: red;} (element)::-moz-selection {color: red;}

Notice how there's a regular selection property and one with the -moz prefix. This is necessary so that it appears in Firefox.

Try selecting/highlighting this text.

That's all for now. Enjoy CSS3!

Sunday, December 25, 2011

Exploring JavaScript

Happy holidays! For all of you beginning web designers, I'm giving you a little gift: the gift of JavaScript. This, along with Exploring CSS and Exploring HTML, is a tutorial so you can learn about JavaScript and how it relates to HTML.


What is JavaScript, anyway? As you have learned, HTML is the structural part of the site, and CSS is the styling part of it. JavaScript, which is used basically everywhere, adds functionality to your website. It's like programming, on the internet. (I'm learning JavaScript with you; that's how I understood CSS!)

One of the most basic elements of JavaScript is the var attribute. It stands for "variable" just like the variables in math. Do you get tired of typing the same thing, if it's a URL or some text, on a website? Well, var is your solution. Here's an example:

<script type="text/JavaScript">
var TheEClub
TheEClub = "The E Club."
document.write("I want to go on " + TheEClub)
</script>

In HTML, you have to include the <script> and </script> tags and put the JavaScript in between. The line below the JavaScript declaration, or the first line of the example, declares that the variable is named TheEClub. The next line defines what text (or it could be images, videos, etc.) is displayed when put into the document.write area. The next line is the real text printed on the computer screen. The + TheEClub "strings" along the variable TheEClub into the text, actually displaying the "definition" of the variable, "The E Club."

In basic HTML (since blog posts do not support JavaScript very well), here's what it should look like. (There's also the text, "WebAspire is a division of The E Club" in the sidebar, also written using JavaScript variables.)

I want to go on The E Club.

There's also another way in which JavaScript can be incorporated into HTML. Click on the buttons below.

This button uses the JavaScript onclick="alert()" function to create a pop-up window, with an "alert" about how awesome The E Club Family Websites are.

This button uses the JavaScript onclick="prompt()" function to do the same thing as onclick="alert()", but the pop-up now has an input area where you can type in. The answer is already there thanks to putting a ",'14'" after the real question in the JavaScript code.

Monday, October 31, 2011

Exploring CSS

In the last post, which I am working on now, you will be learning about HTML, or HyperText Markup Language.
Besides HTML, there are a few scripting languages besides just HTML that can improve your website's design and functions. The one that I will be talking about now is CSS.

Websites don't always look like sites you would usually visit, with different colors, font faces, and backgrounds. Without CSS, or Cascading Style Sheets, a website would look completely white and boring.

If you wanted to style headings (h1 and h2 for example), this is what some example code would look like:


h1, h2 {color: #000000; font-family: 'Open Sans', sans-serif; font-weight: normal;}

So, if you actually put this example into your site's CSS stylesheet, this is what it will look like.

This is Heading 1 with CSS applied.

This is Heading 2 with CSS applied.

This is normal text with CSS applied.

The example above also shows the output of the style, which is now used on WebAspire. Instead being the default Arial and bold, WebAspire's headings are now not bold and in the web font Open Sans. Pretty cool, huh? Luckily, for all of you HTML-savvies out there, good news. If you know HTML (and read this part of the guide), you can learn CSS very quickly.

CSS is just the programming of what HTML elements look like. For example, with CSS, you can edit how text appears. CSS is laid out in brackets, { }, instead of HTML's angle brackets, < >. If you know the name of the HTML element you want to style, Heading 1 being H1, for example, you're almost done with creating a basic CSS style.

The name of the HTML element ALWAYS goes before the brackets. It should look like this, if you're styling an h1:
h1 {CSS functions go here}

Next, you figure out what color, font, etc. you want the text to have, if you're styling text with CSS. If you want to change the color of the text, your CSS should look like this, if you're styling an h1:
h1 {color: #009900;}
If you want to use hexadecimal colors, RGB, or just words, such as "red", any one of these is fine.

If you want to embed your CSS styles in an HTML page in your site, just use the <style type="text/css">, and the matching </style> attribute.

If you want to write a stylesheet as a .css file extension, make sure that you put the following code in your site's <head> tag, after you write the CSS codes: <link rel="stylesheet" type="text/css" href="http://yourwebsite.com/stylesheet.css"> Make sure you replace the "http://yourwebsite.com..." stylesheet URL with your website's CSS stylesheet. (Did you notice that the codes are purple? That's CSS in action, too!)

So, that's the basics of CSS. I, too, am still learning it. With some more experience, and some more advanced CSS, you can create fancy-looking, well-designed websites in just an HTML editor. Enjoy!