HTML | Web development blog, news and tutorials - Developer Drive

Home > Tags > HTML

Page 6

Creating Inline SVGs with HTML5

HTML5 XML May 30, 2012 one comment

With HTML5 you can embed SVG (Scalable Vector Graphics) markup directly into your pages. In this tutorial we go through the process of including a simple SVG element in an HTML page. We will also run through the technique for altering SVGs in JavaScript in cases where this is preferable to using the HTML5 canvas element.

With HTML5, developers have a choice between the canvas element and inline SVGs. Which one is preferable really depends on the details of a project. In general, SVG brings the advantage that the resulting images are extremely scalable to different user environments, with no loss of quality. SVGs can also form part of interactive and animated components, since the SVG elements are part of the HTML page markup, any part of which can be manipulated using DOM scripting.

Create an HTML5 Page

Create the outline of your HTML5 page using the following structure:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

The page has a section for JavaScript functions so that we can demonstrate altering the SVG by manipulating the DOM.

Add the SVG Element

You can add an SVG directly into your page body section, using the same markup you would use for a separate SVG file. Add the following between the opening and closing body tags:

This SVG creates a simple ellipse element. The attributes of the ellipse define “cx” and “cy” for the central points on the X and Y axes. The element also defines “rx” and “ry” attributes for the radius on each axis. Finally, the element is styled using a fill color.

You can use the element as it is for the rest of the tutorial, however if you want to make the SVG a little more complex, for example if you are new to SVG markup, add a gradient by altering your code as follows:

The “defs” section at the top defines a radial gradient, with an ID that is matched in the ellipse style attribute for the shape fill. The gradient section defines each color, as well as what parts of the ellipse each one should occupy.

View your page in a browser to see the SVG image.

Capture User Input

Let’s make the page interactive by capturing user input. Add the following to your page body, below the SVG element:

<br/> Enter the...

Diti says: Why not use XHTML instead (made to work with SVG, MathML, etc.)?

A Simple Way to Add Free News Content to Your Website Part 2

CSS Miscellaneous May 24, 2012 4 comments

In the first part of this tutorial, detailed information was provided on utilizing RSS (Really Simple Syndication) coding to incorporate free news content and links into any web page.

It is recommended that you review Pt. 1, because it explains more about RSS and reveals how to integrate a basic newsfeed module using Google Feed API.

The goal of this tutorial is to furnish instructions on adding a larger news content module, a horizontal newsfeed, and a list-format style feed.

Let’s get started. The idea of incorporating free news content links into your website, blog, or online newsletter may sound intriguing, but you might want it to occupy a larger designated area than required for a small, four-link module. Also, rather than manually changing the RSS coding to accommodate different news sources, you’d prefer to list a number of them all at once. The perfect solution is a multiple-source newsfeed.

Vertical Newsfeed Module

To set the feed up, copy the coding below into the Head section of any web page. The entire set of lines should be slotted beneath the Title and Meta Tag areas, and just in front of the closing Head tag:

Querier says: Thank you for the helpful script. Would you please advise, how to change font size and font color for the first vertical RSS...

Plugin Development for WordPress

WordPress May 22, 2012 one comment

The WordPress platform allows you to modify, customize and enhance your existing website easily. You don’t need to change the core program but rather you can create or modify existing plugins to add the extra functionality that you need. This flexibility in customizing your WordPress installation is provided by the WordPress Plugin API.

There are already hundreds of WordPress Plugins on various WordPress Plugin repositories on the Web where you can download and install. If you cannot find a plugin of your choice, this article will introduce the basics of developing your own plugin for WordPress.

Know the Environment

The first thing you want to do is get familiar with the WordPress environment. This includes how files and folders are organized and arranged and how they are referenced from the WordPress interface. Since PHP is the language used for Plugin development, having PHP programming experience is a prerequisite. Plugins in WordPress are located inside the folder below:

wp-content/plugins

Create a folder for your plugin. We shall name it “Author”. This is where your plugin PHP and JavaScript code will reside as well as the CSS and images that renders the code to make it user-friendly.

Plugin Header Code

Create a PHP file inside the “Author” folder and name it “author.php”. Add the following code to the file:

<?php /* Plugin Name: Author Plugin URI: http://www.davgit.com Version: 1.0 Description: A Plugin that displays author info for each post. Author: David Gitonga Author UI: http://www.davgit.com */

This is standard plugin information header that must be present if WordPress is to recognize the plugin. This plugin info will be displayed when you visit the “Installed Plugins” page.

Adding Functionality

Functions are hard-coded into the plugin files using PHP. In our case, we are going to define one function that calls a section holding the author info. We will also add HTML and WordPress template tags that will be used to build the author info section.

Start by defining the function below:

function author_info() { ?>

Add the HTML needed to build the page as shown below:

<div class = “author_info”> <?php if (function_exists (‘get_avatar’)) { echo get_avatar(get_author_email(), ‘70’); } ?> <?php author_meta (‘description’); ?> </div> <?php

Note the template tags used tell you their functionality. For example, the “get_author_email” tag gets the author email from his profile page.

Add the CSS styles that control the HTML page appearance by adding the code below:

<?php function stylesheet() { echo" <style> .avatar { float:left;background-color: #9A9B9B;padding: 4px;margin: 0 4px 0 0;display: inline; } .author_info { color: #666;background: #DDDDDD;padding: 8px;margin:0 0 6px 0; } </style> "; }

CSS styles that control the HTML page appearance can also be added by creating a separate file called “styles.css” and then adding the above code to it.

Load the function that will be executed when the plugin loads below:

function display_author_info() { if (is_single()) return author_info().stylesheet(); }

Create a file “single.php” and add the code below to it:

<?php...

Guest says: dfgsgsde

Giving Users Offline Access with HTML5 Application Cache

HTML5 May 17, 2012 3 comments

Offline storage is one of the most anticipated features of HTML5. With users browsing to your pages and accessing your Web apps on various devices, often with limited connectivity, the Application Cache utility could prove to be a serious advantage. With HTML5 App Cache, you can instruct supporting browsers to cache copies of certain files. Once these files have been downloaded they will then be accessible offline. In this tutorial we will work through a simple example of caching a page, including an image and external JavaScript file.

Create an HTML5 Page

Create your HTML5 page using the following initial outline:

<!DOCTYPE html> <html> <head> </head> <body> <h1>Lovely Picture</h1> <canvas id="picCanvas" width="450" height="350"></canvas> </body> </html>

The page is going to include a drawing within the canvas element, which will in turn include an image. The canvas element at the moment simply specifies dimensions, we will use JavaScript in a separate file to draw within it, referencing it through the ID attribute.

Create a JavaScript File

So that we can test the App Cache function, let’s create a separate JavaScript file to work with the page. Create a new file and save it “picdraw_functions.js”.

Enter the following function:

function drawPic(picSRC, canvasElem) { //get the canvas using passed element ID var canv = document.getElementById(canvasElem); //get the context var cont = canv.getContext("2d"); //define a gradient to spread across the canvas diagonally var grad = cont.createLinearGradient(0, 0, 450, 350); //define two colors grad.addColorStop(0, "#000033"); grad.addColorStop(1, "#003300"); //set the gradient fill cont.fillStyle = grad; //fill the entire canvas with the gradient cont.fillRect(0, 0, 450, 350); //create the image var picImg = new Image(); //draw the image so that it is centered...

Mangesh says: how to store dynamic images in cache and retrieve the images offline?

Hot deals

See all deals →

20 One-Page Responsive Templates with Parallax Effect - only $19!

Magnolia: 150+ Professional Infographic Elements - only $9!

3,000 Items! MEGA Design Bundle (worth over $1,000) - only $49!

Beautiful Solomon Font Family (12 fonts) - only $9!

Clever Problem Solving Techniques for CSS

CSS May 15, 2012 6 comments

With the launch of HTML5 and CSS3 came new ways and techniques of using these advanced tools to resolve development challenges in clever ways. CSS3 can be implemented on websites to improve the browsing experience for users as well as help in quickly creating effects or functionality that for a long time required hours of labor for web developers.

Below are clever ways to leverage CSS3 for Web developers:

Responsive Images

Responsive web design allows a design to scale perfectly based on the context. Responsive images function in a similar way where images are sized based on whether they are rendered on a handheld or a desktop interface. This scaling takes into consideration that the HTML, CSS and JavaScript used is light enough to be rendered reasonably fast across these platforms. Any images that need to be loaded responsively are referenced from the mobile-friendly version of the image size by adding a “.r” prefix to the file extension and using the “data-fullsrc” HTML5 custom attribute to determine the image screen resolution.

Progress Bar

Did you know that you can create a fancy progress bar without using flash or even images? To achieve this stunning effect, you will need an HTML file that contains your markup, a CSS file for your styles and a JavaScript library file called “progress.js” that will contain the needed JQuery animations to animate the progress bar. Inside the CSS file are 2 classes; the .ui-progress-bar which acts as the container and the .ui-progress class which contains the green progress bar. The CSS file can be downloaded from this link: http://ivanvanderbyl.com/

Image Transitions

Very elegant transitions can be applied to images using JQuery plugins such as Nivo Slider. While most of these plugins use JavaScript, it is possible to implement image transitions using CSS3 animations. CSS3 transitions have the advantage of producing new effects like rotations which JavaScript plugins like Nivo Slider cannot. Whether you are implementing bars, blocks, warps or concentric image effects, CSS3 can be used for these kinds of animations.

Cool Text Effects

By playing around with colors, offset and blurring effects in CSS3, it is possible to create some stunning and clever text effects. Some cool text effects that can be produced using CSS3 include retro or vintage, inset, neon, fire and anaglyphic among others. The neon effect, for example, works by creating up to 8 shading levels where each of the 8 shadow values are increased progressively while getting them darker. The white fill text base and the darker effect blend to produce the neon aura.

Shapes in CSS

Almost any shape can be drawn using CSS and a single HTML element. After defining the shape in your CSS, you can then define the dimensions and other attributes such as the transparency, color and border options. The code below draws up a red triangle facing up:

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

Folded Corner Effect

This technique does not need any extra markup and is implemented using these few lines below:

.note:before { Content:””; Position:absolute; Top:0; Right:0; Border-width:0 16px 16px 0; Border-style:solid; Border-color:#658E15 #fff; }

As HTML5 and CSS3 continue to gain traction on the Web, we can expect to see developers coming up with more creative and clever ways of implementing these relatively new techniques in their work.

...

The Fireworks Police says: Responsive images typically are created using width: 100%; and the size controlled by a container. So the browser is not...

Rotating Web Page Elements Using The CSS3 Rotate Transform

CSS May 14, 2012 one comment

With CSS3, you can rotate Web page elements by a specified number of degrees, clockwise or anti-clockwise. With a small amount of HTML and JavaScript code in conjunction with CSS declarations, you can also animate these rotations. In this tutorial we will work through the process of rotating an image element by varying amounts as well as animating the function, initiating the rotation on user interaction with the page.

Create a Page

Save a new HTML file in your chosen editor, using the following outline code for HTML5:

<!DOCTYPE HTML> <html> <head> <style type="text/css"> /*style declarations*/ </style> </head> <body>  </body> </html>

We will add the page elements in the body and the rotation style declarations within the dedicated CSS section in the page head.

Add Images to the Page

Add one or more images to your page. To demonstrate multiple amounts of rotation in CSS3, we can include the same image element multiple times, as follows:

Alter the image source attributes to suit an image file of your choice. The first image will be displayed as normal, with the remaining three displaying varying degrees of rotation. Notice that each image to be rotated has a unique ID attribute, so that the CSS code can identify it in order to apply the transform effect.

Style the Elements

Within your style section, add the following default styling declarations:

img { float:left; margin:50px; } .pics { clear:both; }

This styling will apply to all of the relevant page elements independently of any transform effects. Depending on the dimensions of your own image elements, you may need to alter the margin declaration so that the full image is still visible within the page after rotation.

Rotate the Image Elements

Add the following declaration to apply a rotate transform to the image element in your page with “rotate30″ as its ID:

/*rotate 30 degrees*/ #rotate30 { /*General*/ transform: rotate(30deg); /*Firefox*/ -moz-transform: rotate(30deg); /*Microsoft Internet Explorer*/ -ms-transform: rotate(30deg); /*Chrome, Safari*/ -webkit-transform: rotate(30deg); /*Opera*/ -o-transform: rotate(30deg);...

Daniel Thompson says: This is fantastic! And exactly something I've been searching for. I do have a question though, how would you allow it to be...

Creating Bulletproof Email Buttons

CSS HTML May 1, 2012 19 comments

Regardless of the social media networks that are popular at the time, email marketing will always be the number one way for a company or organization to connect with customers or clients. But, the average internet user has 2.3 email addresses and sends and receives an average of 112 emails a day.

So what does that mean?

That means your emails need to be clean, lean and quick to digest. With that in mind, I’m going to show you a great button replacement technique that will limit the number of images your email uses, and provide great calls to action regardless of whether images are downloaded.

Let’s Back Up and Talk About Images

By default, nearly every email client blocks images when a user opens an email. The only ones that don’t block images include Apple’s Mail and iOS Mail client. But a large majority of internet users use web based clients such as Gmail, Hotmail, Yahoo! Mail or AOL, or they use desktop clients such as Outlook (00, 03, 07, 10), Lotus Notes, or others. One of the most difficult aspects of coding HTML emails is the variance in support for basic HTML and CSS properties across a multitude of email clients.

As of February 24, 2012, Litmus shows that 43% of users use some version Outlook, while no other client even came close. Hotmail came in second at 17% followed by Yahoo! Mail (13%) and Gmail (8%). Apple products came in with a total of 8% split between iOS (4%) and Apple Mail (4%).

So if a large majority of your customers or clients are using email clients other than iOS (and let’s be honest – they are), you’ll need to make sure that you can provide a clear cut call to action regardless of whether or not the user chooses to download images.

That’s where our bulletproof buttons come in.

The concept behind bulletproof buttons in emails is to provide the user with a compelling, attractive and inticing call to action without the use of images. Granted, this might not be possible with your particular design, but I’d highly recommend looking into it if you can.

The Code

If you’ve done any work in HTML emails, you know that you should break out your old HTML book circa 2003 and brush up on your tables code. Tables are one of the most simplistic and structured code in the world, and with the unpredictability of HTML and CSS support (don’t even think about JavaScript) in email clients, tables are the way to go.

Another concept to keep in mind as we look at the code for our button is you won’t want to use padding and margin. Support varies widely and you’ll get a lot of funky looking results. Stick with nested tables. Just try and keep them straight – it can get complicated quickly.

Our bullet proof buttons are a nested table with one table row and one table cell. The CSS is declared inline for a lot of reasons, but mainly for web based browsers that strip out embedded styles, and I utilize some CSS3 effects that will render in some clients, but will degrade gracefully in other clients.

Take a look at the code, try and break it down, then we’ll go through each part.

Simple, right? Yeah, I know that is a lot of code in the <td> tag, but let’s break it down.

First off, you will most likely want the text of the button centered within the button, so we add the align=”center” to the <td> to kick things off. Next we add in a width for the <td> and a solid background color. This creates the appearance of a button, using the table cell as the box. Then we jump into our inline style tag and make some magic happen.

All styles for HTML emails should be done inline, so thus, you get a long, not very clean line of code there. But for the most part it’s self explanatory. I’ll clean it up and show you how it looks non-inline below:

background: #cf142b; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; font-weight: bold; text-decoration: none; font-family: Helvetica, Arial, sans-serif; display: block;...