wordpresshubs: Started

Affichage des articles dont le libellé est Started. Afficher tous les articles

samedi 12 novembre 2016

Getting Started With HTML5 & CSS3

alt="Getting Started With HTML5 & CSS3" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2011/10/html5-500x500_c.jpg" />

style="font-size: 15px; line-height: 1.5em;">Getting Started With HTML5 & CSS3

Using HTML5 and CSS3 can help you make a spectacular website, but, unfortunately most designers don’t use them because they aren’t supported by all browsers. Most Internet users are still using Internet Explorer, so the code will not display properly for most people. Since over half a website’s traffic is with a browser that does not support these two languages, most designers do not use them for popular websites.

Both HTML5 and CSS3 are still in progress, but it is a good idea to familiarize yourself with them now so you can use them when they are the new standard in web design. Both languages will help you get a clean look for your website using simpler code.

HTML5

id="floatright">src="http://www.webhostingsecretrevealed.net/images/2011/1005-7.jpg" alt="HTML 5" width="220" height="220" />

HTML stands for Hypertext Markup Language, and HTML5 is the latest version. Currently, it is only supported by a few browsers, but is expected to increase in popularity and usage in the next year. The entire language is expected to be fully written sometime in 2014, but some features are available now.

Since Flash is infamous for crashing and bugs, Apple does not allow it on iOS mobile phones and devices. As Apple increases in popularity, this creates a problem for developers who want the features of Flash, but also want their apps and websites viewable on an iOS device. HTML5 offers many of the same features of Flash, but runs with less bugs and more stability.

Google will be releasing a HTML5 version of YouTube soon, so this reaffirms how important this update will be in href="http://www.webhostingsecretrevealed.net/hosting-review/inmotion-hosting/" target="_blank">the future of the Internet. Mozilla’s Firefox, however, is resisting HTML5 and IE does not support it, so developers are hesitant to jump on the bandwagon. To further complicate things, different browsers may support different features of HTML5, and not all browsers will support all features. Designers must find out what features will be supported by different browsers when creating a website.

HTML5 lets you create smaller parts that combine and work together to make up the entire page. It allows the designer to create advanced pages with new features that aren’t always possible to create with older versions of HTML. HTML5 is built on HTML4, so designers can build upon existing code to improve the website. This eliminates the need to code the website from scratch, and new features can be added easily.

HTML5 Features

Cache allows the user to navigate web apps while offline.
Canvas element lets you place 2D images directly within the code.
Editing is easier. Change text quickly by adding contenteditable=“true” to an element.
Video and audio support is greatly improved, and you will be able to add both without using a plugin.
It does require a doctype so a browser can display the page in a standard mode, but the doctype has been simplified. Now it is <!DOCTYPE html>.

Why Use HTML5?

Uses WebSockets, so it loads faster than older versions of HTML.
Smartphone apps from all phone brands and models will be able to read one language.
Greater flexibility.
Video, images and audio are embedded within the code, so users do not need an outside plugin.
The language is getting more popular, so websites that do not use it will soon be outdated.
Is is based on HTML4, so you can added new elements within the code.
HTML5 coupled with CSS3 gives you many features and benefits not possible previously.

CSS3

CSS, which stands for Cascading Style Sheets, gives designers flexibility in presenting a website. It allows you to create better looking websites with unique features. Like HTML5, CSS3 isn’t supported by all browsers yet, but it is gaining popularity. CSS3 lets you add effects to the page without using Javascript or other plugins.

One disadvantage to using CSS is that you need to use filters to alter how things appear on the screen for different browsers. Internet Explorer is most known for being buggy and displaying CSS improperly, but Chrome and Firefox can also have bugs. Designers get around this by creating different codes for different browsers or utilize filters to block CSS completely.

CSS3 Features

Rounded Corners

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-1.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://psdslicer.com/" target="_blank">http://psdslicer.com/

Before, you had to use JavaScript to mask the corner of an image or create a separate image for just the corner. Now, you can round corners with the following code:

div {
border: 5px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 500px;
}

RGBA Colors

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-2.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://vivid-ness.co.uk/" target="_blank">http://vivid-ness.co.uk/

You had to use a PHP script within the CSS code to trick the browser into displaying colors in RGBA. This added unnecessary code in the PHP file. Or, you had to memorize color codes for each color, but now you can specify the amount of each color and their opacity within the code.

Here is the code for CSS3:

background: rgba(150, 25, 150, 0.5);

Text Shadow

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-3.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.foundationsix.com/" target="_blank">http://www.foundationsix.com/

A text shadow adds a drop shadow below text to make it stand out or give it visual interest. Previously, the designer had to create two elements with the same text and give one a different color. The darker color was then offset by a couple of pixels and placed behind the other text. With CSS3, use the following code for text shadow:

h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Opacity Level

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-4.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.teehanlax.com/" target="_blank">http://www.teehanlax.com/

In previous version of CSS, you had to create PNG files with transparency or use filters for Internet Explorer. Now, you can use the following code:

opacity: 0.5;

Box Shadow

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-5.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://glo.id.au/" target="_blank">http://glo.id.au/

Box shadows let content slide under another area, such as the page’s footer. It makes it look like the content is sinking into the bottom of the website. With CSS3, you don’t have to create an image for this effect. You can also make the shadow appear by hovering over the area.

Before CSS3, you had to use a JavaScript plugin for a box shadow or create an image of the shadow. Now, you can use the following code with CSS3 for a box shadow:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

Add Fonts

Previously, websites could only display a font found on the visitor’s computer. Now you can upload a font file to your server and use CSS to call upon that file to display on the page.

Border Images

Now you can use any image as a border rather than using a boring line or dots as a border.

Transform

Lets you code how big you want an area to be when the user hovers over it.

Resizing Elements

Now working in Chrome, Firefox and Safari, this gives users a tool to resize elements. Use the following code:

div {
resize: both;
}

Multiple Backgrounds

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-6.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.hangingupthemoon.com/">http://www.hangingupthemoon.com/

Lets you overlay more than one background on a single page with the following code:

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

Final Thoughts

Although not all browsers currently support HTML5 and CSS3, they will in the future. More and more web users and switching from Internet Explorer to Mozilla Firefox or Google Chrome, so designers need to create web pages that work on these browsers and with the features they support.

Both of these languages used together let you reduce or eliminate the need for third-part plugins, which makes it easier for visitors to use your website. Now you can embed pictures, audio and video directly within the website so pages load faster for users.

The two languages provide you with features that were not available before without having to use multiple programs. Now you can code your page quicker and easier with just two languages rather than using outside plugins that require learning yet another programming or web design language. Pages will not display faster and users do not have to waste time downloading the latest versions of plugins.

Both languages have the flexibility of being used for different browsers. Turn off portions of the code for browsers that do not support that code, and use feature rich code for browsers that do support it. HTML5 and CSS3 will soon be supported by smart phones and mobile devices, so designers can use the same page for both mobile and standard versions.

Page 26 – Web Hosting Secret Revealed

Getting Started on Social Media Marketing

alt="Getting Started on Social Media Marketing" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/04/1103-2-500x751_c.jpg" />

id="floatright">alt="Social Media Marketing" src="http://www.webhostingsecretrevealed.com/images/2010/1103-2.jpg" width="199" height="300" />

I can’t get enough of what the worldwide web can offer. From my academic researches to simple entertainment, it’s all in the web. But another fun and great thing about it is the creation of social media. It paved the way to faster online social communication and sharing of information with people in the online world. However, social media is not used simply for social messages alone. I can utilize social media to market and promote my products and so you can too. With social media marketing, you can generate leads and sales thereby increasing your profits.

Although href="http://www.webhostingsecretrevealed.net/blog/socialmedia-marketing/tips-for-effective-social-media-posting/" target="_blank">social media marketing may seem simple, it is not.

Don’t be like those other social media marketers who failed simply because they lack the understanding on what social media marketing is all about. Thus for beginners, you need to have the right understanding on the different aspects like what social media site to register, what group to join, what and how to post messages and advertisements and many more.

So, to give you a right start on social media marketing, consider the following points.

Determine the benefits or advantages you will get out of social media

If your goal is to publicize your new online company that promotes environment-friendly products, then think about the possible social activities that you will regularly perform and determine the possible benefits or advantages you will get from each activities like when you:

1. Create a blog

If you are fond of writing and sharing your experiences about helping the environment and using ‘green’ products, then you may consider creating a blog. It will allow you to reach out and communicate. You may become a marketing affiliate for another company that complements your business or you may place products ads to other complementary companies. It will increase the traffic in your blog site that could eventually result to increase in sales, yet you should also be an expert in your field.

2. Create a micro-blog

Micro-blogging could be your venue to create noise or drum roll about a certain product, company or idea. You can post links to your micro-blogging and this will direct your prospective clienteles to your product Web site.

3. Join forums

One way to establish yourself as an expert in your field is by creating a venue for forums that could show your expertise in a particular brand, company or topic.

4. Photo sharing of your products

Post online images or photos of your services or products. Doing this will help your company come up in the ‘universal search’ using any search engine, thus making it easy for customers to locate your Web site.

5. Create a video sharing

Showing a video excerpt on what you can offer or what your product can do is a good way to make your message cut across your targeted market. Remember that video presentation is an effective medium even before it was confined in the boobtube.

6. Create a compelling profile about you and your business

Registering for a social network account that could serve your purpose is easy. But you also need to take time in creating and completing a compelling profile. This is simply for the basic and obvious reason that your profile is what your readers or your prospective networks will first see and read. So, it is better to create a credible profile since ‘first impression lasts’ and this often holds true.

Understand your social network community

It is not enough that you joined a group, but your regular visibility and active participation in the group will help you create a name within your community. This will help you make known your expertise about a particular field or product and in turn, you can use this to your advantage by directing the other members of the social site to your product Web site.

But aside from this, knowing and understanding the Terms of Service will save you the inconvenience of getting booted out of the social network site.

Enjoy your social network community

Joining a social media network is a great fun. You can connect with your social network fast and with ease. You can receive immediate feedback too, lest to say that it is somehow addicting. But business-wise, it can be your most powerful tool in publicizing your product or company.

So, explore different social media sites that can cater to your needs and wants.Most sites even incorporate three or more features like you can post blogs or you can do micro-blogging. You can also post photos, videos or it can also be a venue for forums. More so, social networking sites are not only venues wherein you can connect with friends and family. Social media marketing can help you generate traffic that could covert to sales and better income.

Conclusions and More Readings On Social Media Marketing Strategy

I hope this post drew your attention on the latest web marketing trend – the social media. And, if you still think social media sites are only for kids with too much time to spend, think again! style="text-decoration: underline;">Social media is bigger than porn already.

class="border" alt="Social Media vs Porn" src="http://www.webhostingsecretrevealed.net/images/2010/1103-3.jpg" width="750" />

Further Related Readings

As mentioned, this blogpost is only for beginners and you will need a lot more readings before mastering these media tools. For more readings, check out:

title="Permanent Link to Building Social Bookmarking Networks 101" href="http://www.searchenginejournal.com/building-social-bookmarking-networks-101/16154/" target="_blank" rel="bookmark">Building Social Bookmarking Networks 101
href="http://www.kunocreative.com/blog/bid/23506/What-is-Social-Media-Optimization-and-Why-Should-I-Care" target="_blank">What is Social Media Optimization and Why Should I Care?
href="http://www.webhostingsecretrevealed.net/blog/socialmedia-marketing/49-data-proven-tips-on-how-to-get-more-retweets/" target="_blank">How to get more retweets and friends on Twitter?
href="http://mashable.com/2009/10/28/small-business-marketing/" target="_blank">10 Small Business Social Media Marketing Tips
title="Permanent Link to Can Social Media Can Help My Company?" href="http://blog.crowdspring.com/2009/04/can-social-media-can-help-my-company/" target="_blank" rel="bookmark">Can Social Media Can Help My Company?
href="http://www.seomoz.org/article/social-media-marketing-tactics" target="_blank">101 Social Media Sites to Help Market Your Business or Yourself Online
title="Permanent Link to Social Media Marketing Strategies" href="http://sparxoo.com/2010/08/16/social-media-marketing-strategies/" target="_blank" rel="bookmark">Social Media Marketing Strategies
href="http://www.fastcompany.com/1579162/neat-cheat-sheet-to-help-your-marketing-heads-conquer-social-media" target="_blank"> A Cheat Sheet to Help You Conquer Social Media
href="http://www.cultivatingyourcustomers.com/2010/02/27/are-you-reaching-your-best-customers-through-social-media/" target="_blank">Are you reaching your Best Customers through social media?

Have fun reading! Cheers. :D

Page 28 – Web Hosting Secret Revealed

Blogger Tutorial (1/6): Introduction & Getting Started

alt="Blogger Tutorial (1/6): Introduction & Getting Started" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

I know some of you guys are keen about blogging but unwilling to spend extra on web hosting and domain. The good news is there are tons of great blogging platform around and they are absolutely free. One of the top rated blog platform is of course Blogger.com manged by Google. For the next few weeks (or months), I’m glad to have experienced blogger E-Quan on board to share his experience and knowledge in operating a Blogger blog. I’m sure his tutorials bring great joy and valuable information, so stay tuned and have fun learning!

Blogger: Introduction & Getting Started

So you’ve decided to start a blog, great! I bet you have plenty of thoughts, ideas, or even wonderful photos to share with close ones and the world. What better way of doing that than writing them down, publishing them easily, and at the end, archiving them systematically using Blogger (href="http://www.blogger.com">www.blogger.com)?

A little history about Blogger

Blogger is one of the earliest blog publishing systems and was created by the nice people over at a small company called href="http://en.wikipedia.org/wiki/Pyra_Labs">Pyra Labs in San Francisco back in August 1999. To make the great story short, Google eventually saw the potential that was hidden in this blog publishing tool together with its many great features that it formally acquired Pyra Labs in February 2003. Blogger has now emerged as one of the most successful blog hosting providers offering many wonderful features with a user-friendly interface — for FREE!

Blogger when it was first launched

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/0824-3.jpg" alt="Blogger when it first launched" />

Blogger now

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/0824-2.jpg" alt="Blogger nowadays" />

The basics of Blogger (and some example)

Basically, your blog will be hosted by Google at subdomains of blogspot.com.

What this means is that you could choose a unique name that is meaningful to you and your readers and publish your posts at that address (provided that the name is not taken up already!). Like this author, he also uses Blogger service and his blog is available at confirmcekap.blogspot.com. Many people use their own name/nickname as the URL and one famous blogger whose blog is being hosted on blogspot that I can think of right away is XiaXue (href="http://xiaxue.blogspot.com" rel="nofollow">xiaxue.blogspot.com).

class="border aligncenter" src="http://www.webhostingsecretrevealed.com/images/2009/0824-4.jpg" alt="Xia Xue" width="560" height="413" />

Pros and cons of Blogger

Besides Blogger, there are actually many blog hosting providers out there in the wild: href="http://www.wordpress.com/">WordPress, href="http://www.livejournal.com/">Livejournal, href="http://www.live.com/">Windows Live Spaces, to name a few. Before registering at Blogger.com, you might want to know the pros and cons from my own personal experience:

Pros:

FREE!
Fast and simple registration/setup. Even more so if you already have a Google account (Gmail for example).
User-friendly interface (referred to as the Dashboard) — easy to navigate between Editing, Settings, and Layout. Even a drag-and-drop feature to arrange your blog’s layout!
Labels option for your posts — meaning that you could categorize each post for example: travel, food, rants, etc.
Easy to add photos/videos to your posts.
Comments system is also available for you to gather feedback from your readers.

Cons:

You don’t own nor can you control the site because it is free and being hosted by Google. Your blog can be blocked/deleted by Blogger if they judge your content being in violation of its Terms of Service.
Multiple pages are not supported by Blogger currently. Your Blogger blog is not like a website where every page created has a new link/URL. You create posts instead. In short, it is not possible to create yourblog.blogspot.com/location where this page will contain your address with a nice hand-drawn map.
The basic layout templates offered when you first register are pretty dull and if you’d like a more sophisticated layout, some research is definitely required.

Should you go with Blogger?

All in all, I still recommend that you try and start your blog at Blogger because as you can see above, the advantages are still quite significant. Click the Blogger’s logo below to start your blogging journey right away!

p/s: In the next session, we’ll be discussing about setting up your first Blogger blog and configuring it to fit your requirements.

About the author
id="floatright">class="alignright" src="http://www.webhostingsecretrevealed.com/images/2009/0824-5.jpg" alt="Blogger Signup" width="100" height="97" />

E-quan graduated from Technological University of Malaysia as an Electrical and Electronics Engineer.

He is now attached with an MNC specializing in power and automation technologies. In his blog (confirmcekap.blogspot.com), he describes himself as a full-time procrastinator although in reality, he is “not”. He likes 80’s music especially Cantonese pop songs. He plays the Electone and wishes to own a grand piano (amongst the many things he would like to own) soon.

Page 30 – Web Hosting Secret Revealed

Get Started With HTML5/CSS3: Tips, Showcases, And Coding Samples

alt="Get Started With HTML5/CSS3: Tips, Showcases, And Coding Samples" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-500x186_c.jpg" />

HTML5 is gaining more popularity and starting to evolutionise the entire web interface. Even some web developers quoted that HTM5 elements and visual effects are comparable to Flash. The new scripting style is easy to understand and capabilities to enhance the web interface is limitless. So how interesting is this HTML5 anyway?

This article is intended to give readers an insight on what you should know about the HTML5 and most importantly some tips & tricks on creating lightweight, attractive, and interactive HTML5 pages.

1. Basic in HTML5

alt="HTML5" src="http://www.webhostingsecretrevealed.net/images/2012/0115-1.jpg" width="750px" border="0" />

Before we begin any further of this topic in HTML5, it will be good to check your current browser first. As many of the browsers are still in the development mode (enhancement to accomodate the HTML5), some features mentioned here may not be supportable.

Here’s a quick tips to check your href="http://html5test.com" target="_blank">browser compatibility.

To understand further the limitation of certain browser, you may refer to href="http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/" target="_blank">here.

2. Text Effects – Adding shadow and advance text effect in HTML5

alt="Text effects in HTML5" src="http://www.webhostingsecretrevealed.net/images/2012/0115-3.jpg" width="750px" border="0" />

Basic shadow effect on text

This is the simplest one string code that transform your ordinary headline into a cool-looking text. Never underestimate the shadow effect. To create this similar looking effect requires web designer to go through multiple steps of image editing in Photoshop. And now all it takes is just one line of code. The shadow distance, color can be changed to your heart content.

Coding sample
#shadow h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Text on advance fire-like effect

The next tip is to show you on how the HTML5 coding can be tweaked into a even cooler-looking text. If you experiment enough, or find other examples, the possibilities of customizing the effects are endless. Note: this example is not created by any image editing software. Just plain codes in HTML5.

Coding sample
#fire h1 {
text-align: center;
margin: 200px auto;
font-family: “League-Gothic”, Courier;
font-size: 200px; text-transform: uppercase;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}

Other great example: href="http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage" target="_blank">http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Rounded corner in HTML5

alt="Rounded Corner in HTML5" src="http://www.webhostingsecretrevealed.net/images/2012/0115-6.jpg" width="750px" border="0" />

Styling the webpage layout in HTML5 has never been so easy since the introduction of css. And now you can even have a rounded corners of your layout elements! Imagine this; no more slicing background image, no more messy picture fragments. This will bring many cheers to the web designers out there.

Coding sample
div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;
}
Note: Moz means Mozilla, and webkit is for Safari and Chrome.

Other great example: href="http://fjd1.com/roundcorner.html" target="_blank">http://fjd1.com/roundcorner.html

4. Scalable Vector Graphic (SVG) in HTML5

alt="HTML 5 tutorials, guide, and samples" src="http://www.webhostingsecretrevealed.net/images/2012/0115-4.jpg" width="750px" border="0" />

Scalable Vector Graphic or commonly known as (SVG) is a 2-Dimension vector graphics which is defined in XML text files. In another words, because their DNA is based on XML text file, they can be created or editable on the web platform. Which also means, there can be scale easily, and search engines are able to read and understand the image.

Sample code
<svg id=”svg-area” width=”838″ height=”140″ viewBox=”0 0 2000 380″>
<rect x=”100″ y=”20″ rx=”25″ width=”100″ height=”335″ fill=”#FAEBD7″ stroke=”purple” stroke-width=”2″ />
<rect x=”-50″ y=”300″ width=”300″ height=”75″ fill=”none” stroke=”#4B0082″ stro ke-width=”4″ transform=”rotate(-30)” />
<path d=”M 950,200 h -150 a 150,150 0 1,0 150,-150 z” fill=”red” stroke=”blue” stroke-width=”5″ />
<path d=”M 925,175 v -150 a 150,150 0 0,0 -150,150 z” fill=”yellow” stroke=”blue” stroke-width=”5″ />
<path d=”M 1450,350 l 50,-25
a 25,25 -30 0,1 50,-25 l 50,-25
a 25,50 -30 0,1 50,-25 l 50,-25
a 25,75 -30 0,1 50,-25 l 50,-25
a 25,100 -30 0,1 50,-25 l 50,-25″
fill=”none” stroke=”red” stroke-width=”5″ />
</svg>

Other great examples:

href="http://codinginparadise.org/projects/svgweb/samples/demo.html?name=photos&svg.render.forceflash=false" target="_blank">http://codinginparadise.org/projects/svgweb/samples/demo.html?name=photos&svg.render.forceflash=false
href="http://playground.html5rocks.com/#inline_svg" target="_blank">http://playground.html5rocks.com/#inline_svg

5. Embedding movie file in HTML5

alt="Video in HTML5" src="http://www.webhostingsecretrevealed.net/images/2012/0115-2.jpg" width="750px" border="0" />

Here’s another interesting part to showcase the capabilities of HTML5. Many of the video online are usually presented to webuser in the form of Flash. Until recently, embedding video in HTML5 slowly gaining momentum (YouTube is good example) and Flash is slowly losing its attractiveness. Why is that so? Mobile users. If you want your video to be able to play in both iPhone and Android phones, HTML5 is the way to move forward.

To embed the video, you’ll need to know there currently 3 formats supported by different browsers; .mp4 (H.264+AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Sample code
<video width=”560″ height=”340″ controls>
<source src=”path/to/myvideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”path/to/myvideo.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
</video>

Other great example : href="http://studio.html5rocks.com/#PiP" target="_blank">http://studio.html5rocks.com/#PiP

6. Slide Presentation in HTML5

alt="HTML 5 tutorials, guide, and samples" src="http://www.webhostingsecretrevealed.net/images/2012/0115-5.jpg" width="750px" border="0" />

Powerpoint has been a synonym name associate with slide presentation. But why confine yourself with a offline presentation where you can create slides meant for web audience? HTML5 has come to the rescue in creating much powerful presentation slides, complete with transition and navigation menu. The best part is, you can even apply 3D transform to your presentation.

Sample code
pre {
transition: all 1s ease-inout;
}
pre:hover {
background-color: #F2F5FE;
border-color: black;
}
div {
transform: rotate3d(1,1,0, 45deg);
}

Other great examples:

href="http://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/" target="_blank">http://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/
href="http://www.html5rocks.com/en/features/presentation" target="_blank">http://www.html5rocks.com/en/features/presentation

7. Editable Content in HTML5

alt="HTML 5 tutorials, guide, and samples" src="http://www.webhostingsecretrevealed.net/images/2012/0115-7.jpg" width="750px" border="0" />

Static text is so old-school in the age where flexibility and dynamic rule the world. In HTML5, you can define a text area made it editable by the web user without text editor.

Sample code
<p contenteditable=”true”>This content is editable!</p>

Other great example: href="http://html5demos.com/contenteditable" target="_blank">http://html5demos.com/contenteditable

8. Interactive Web Canvas in HTML5

alt="HTML 5 tutorials, guide, and samples" src="http://www.webhostingsecretrevealed.net/images/2012/0115-10.jpg" width="750px" border="0" />

Besides SVG in HTML5, canvas is the next best thing that ever happened to the web. Canvas allows rendering of 2 dimension shapes that bring interactivity to a whole level without the help from Flash.

Nevertheless, the simple coding in HTML5 that creates amazing animation interaction is worth to mentioned in here.

Other great examples:

href="http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html" target="_blank">http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html
href="http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/" target="_blank">http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/

9. Drag and Drop in HTML5

alt="HTML 5 tutorials, guide, and samples" src="http://www.webhostingsecretrevealed.net/images/2012/0115-8.jpg" width="750px" border="0" />

Drag and drop (sometimes known as DnD) is another cool feature that available to HTML5. A great example would be implementation by Google in their Gmail. If you’re using any of the HTML5 supportable browsers, you can simply drag a file from your computer and drop onto the compose message window. It will be automatically add in as an attachment. How cool is that?

Sample code (native DnD)
document.addEventListener(‘dragstart’, function(event) {
event.dataTransfer.setData(‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, false);

Other great example: href="http://www.html5rocks.com/en/tutorials/dnd/basics/">http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Pure CSS Data Chart in HTML5

alt="HTML 5 tutorials, guide, and samples" src="http://www.webhostingsecretrevealed.net/images/2012/0115-9.jpg" width="750px" border="0" />

Before HTML5, it is also impossible to create a presentable chart by just using coding in HTML. Furthermore, changing the data value and to reflect in the chart is no simple task. Again, HTML5 to the rescue. Together with CSS, you can create an absolutely beautiful chart which put Microsoft Excel to shame. The codes are simple, and all you need to do is spending time to customize the perfect color and effect for your chart.

Other great example : href="http://cssglobe.com/post/1272/pure-css-data-chart" target="_blank">http://cssglobe.com/post/1272/pure-css-data-chart

Tutorial on creating the HTML5 chart using jQuery plugin, go to: href="http://www.catswhocode.com/blog/how-to-easily-create-charts-using-jquery-and-html5" target="_blank">http://www.catswhocode.com/blog/how-to-easily-create-charts-using-jquery-and-html5

Can’t get enough of HTML 5?

So do we! Here’s more on the topic, go check them out./>class="nostyle special icon-list">

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/30-cool-examples-of-html5-websites/">30 Very Cool Examples of HTML 5 Websites

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-design/getting-started-with-html5-css3/">Getting Started with HTML 5

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/top-30-html5-tutorials/">Must Read HTML 5 Tutorials in 2012

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/learn-html5-10-must-read-lessons/">Learn HTML 5: 10 Must Read Lessons

Also, check out href="http://www.webhostingsecretrevealed.net/go/udemy" target="_blank">this HTML 5 crash course by Robin Nixon. Robin Nixon is the author of href="http://ecx.images-amazon.com/images/I/411zmvViM4L._SS500_.jpg" target="_blank">Learning PHP, MySQL, and JavaScript; the course covers pretty much everything a newbie need to know in HTML5 – including basic HTML coding, HTML5 canvas for drawing, geolocation, local storage, as well as HTML5 audio and video.

Page 25 – Web Hosting Secret Revealed

Getting Started With Klout

alt="Getting Started With Klout" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

For the past few years businesses and individuals have been gradually adopting social media practices in faith that they will positively affect their online presence. The biggest question surrounding this topic, however, is evaluation. How can businesses or individuals be sure the investment of resources into social media is actually helping them? The means of measurement (followers, fans, likes, diggs, comments, shares etc.) are new and unfamiliar. This lack of understanding has hindered real adoption of and investment into the channel.

With an increase in social media adoption and the ever increasing buzz regarding the channel, more and more ancillary tools are being developed. The bulk of these tools aim to put metrics behind the new channels and assist users to analyze the effectiveness of social media efforts.

One of the most popular tools to measure effectiveness of social media efforts, Klout, has developed a user base of over 100 million individuals. If you are ready to measure the influence of your social media efforts, Klout may be just the tool you are looking for. Let me break down what Klout is and how to best use the tool for you.

What is Klout?

href="http://klout.com/home" target="_blank">Klout is an online social media reputation tool that is based on calculating social influence. In other words, it puts a number 1-100 behind popularity and impact (your ability to incite others to act). The higher your Klout Score, the higher the influence.

Klout bases their scoring on three factors: true reach, amplifications, and network impact. As described on their website:

True Reach: How many people you influence (and how many people the people you influence are connected to)

Amplification: How much you influence them (does your network respond to your messages)

Network Impact: The influence of your network (the influence of the people in your network)

How do I use Klout?

While Klout’s interface looks clean and fairly simply, the tool is very robust and offers you a lot of evaluation tools to measure your social influence.

Let’s start with the dashboard. This page is really a summary of what’s been going on in your network lately. At the top of the page you will see the networks you have linked with your Klout account as well as how your score has fluctuated.

src="http://www.webhostingsecretrevealed.com/images/2012/0523-1.jpg" alt="Klout Screenshot" class='border' />

Scroll down and you will see how your network has influenced you. Further down yet you can catch up on the buzz regarding the topics in which you are influential.

The bulk of the information you have to gain from Klout is found on your profile.

src="http://www.webhostingsecretrevealed.com/images/2012/0523-2.jpg" alt="Klout Screenshot" class='border' />

To make sure you do not miss it, your score is extra big and displayed in a bright orange call-out bubble. To the right you will see another quick summary of your account (which accounts you have linked to, your picture, and your bio). You will also see a summary of who you are influenced by and what topics in which you are influential. For example, on the picture above shows the top five people/organizations I’m influenced by: Mark Batterson, Chris August, Focus Leadership, Simone Ramler, and EQUIP Conference. I’m influential about 3 topics: video, money, and YouTube.

Below the orange break line, you will see a menu on the left side of the screen: score analysis, topics, influencers, lists, klout style, perks, and achievements. These elements will shed more light onto your level of influence.

Score Analysis

Under score analysis you will first see a chart visually displaying how your Klout score has shifted over the past month. Just below the graph, your activity that has contributed to your score is summarized. Next, three graphs outline your history on the three main metrics of they system: true reach, amplification, and network impact.

src="http://www.webhostingsecretrevealed.com/images/2012/0523-3.jpg" alt="Klout Screenshot" class='border' />

src="http://www.webhostingsecretrevealed.com/images/2012/0523-4.jpg" alt="Klout Screenshot" class='border' />

src="http://www.webhostingsecretrevealed.com/images/2012/0523-5.jpg" alt="Klout Screenshot" class='border' />

src="http://www.webhostingsecretrevealed.com/images/2012/0523-6.jpg" alt="Klout Screenshot" class='border' />

Topics

src="http://www.webhostingsecretrevealed.com/images/2012/0523-7.jpg" alt="Klout Screenshot" class='border' />

The topics section lists the areas in which you have an influential voice. Klout will automatically generate topics for you. If you feel they are missing some of the topics you are most influential in, you can add a topic with your +K’s (which we will cover later).

Influencers

src="http://www.webhostingsecretrevealed.com/images/2012/0523-8.jpg" alt="Klout Screenshot" class='border' />

This section expands on the details of those you influence and those that influence you. See how you are connected to them (Twitter, Facebook, etc.), what their Klout score is, and how they influence their networks.

Lists

src="http://www.webhostingsecretrevealed.com/images/2012/0523-9.jpg" alt="Klout Screenshot" class='border' />

You can create lists (similar to Twitter lists) based on specific topics (web development, business, marketing, finance, sports, entertainment, etc.) and track the influence of the individuals in your list.

Klout Style

src="http://www.webhostingsecretrevealed.com/images/2012/0523-10.jpg" alt="Klout Screenshot" class='border' />

Klout style is one of my favorite features of Klout. It descriptively describes your interaction on social media. Based on an 4 x 4 matrix, the tool assigns you a style and displays how you are in comparison to the individuals that influence you. Mine, for example, is currently a networker.

A networker is explained as: “You know how to connect to the right people and share what’s important to your audience. You generously share your network to help your followers. you have a high level of engagement and an influential audience.”

Perks

src="http://www.webhostingsecretrevealed.com/images/2012/0523-11.jpg" alt="Klout Screenshot" class='border' />

Perks are a simple concept. Businesses want influential people to use their products in hopes that they will rave about them to their social network. Of course you aren’t required to rave, unless you want to. You could even complain if you want to. Being influential has its benefits; if you are influential, you will be offered special products or experiences.

Achievements

src="http://www.webhostingsecretrevealed.com/images/2012/0523-12.jpg" alt="Klout Screenshot" class='border' />

Following suit of the majority of other social networks and tools online, Klout offers achievements. Keep track of notable achievements in your Klout experience from connecting certain social networks to reaching high Klout scores.

What is a +K?

A +K is like a vote for the influential people you are connected to. When you give someone a +K (you will see an icon next to names that easily allow you to give them away), you are saying “outloud” that that person is influential.

Ok, so that’s the basic features describing the technical way to use Klout. But how do you reallyuse it, how does it benefit you.

Find Influencers

If you didn’t want to influence a specific community, you wouldn’t be involved in social media. Connecting, influencing, teaming up with, and aligning yourself with trusted, prominent figures in the community you want to reach will greatly increase your influence. So how do you do this? Easily.

You will notice in a few different sections on Klout, topics that there are red-colored words – they are indicating “topics” on Klout. These topics vary from money to Christianity to entertainment. By clicking on these topics you will be directed to page full of information regarding that topic. The image below displays the “Marketing” topic.

src="http://www.webhostingsecretrevealed.com/images/2012/0523-13.jpg" alt="Klout Screenshot" class='border' />

The benefit of this information is that you have all the top marketing influencers all in one place. Connect with them on the network of your choice and learn why they are as influential as they are, talk with them, connect with them, and most importantly, be associated with them. Remember your mom telling you in high school that you become who your friends are? Well, she was right, sort of.

If you associate yourself with the big dogs in the topic you want to influence, others will look to you as influential as well (of course it’s not all based on your connection with others, you have to be able to hold your own regarding the topic).

Klout Perks

Free magazines, gift cards, food, trips and more just for engaging on social media? I think the benefit speaks for itself for individual users.

If you are business owner, investing on the other side of Klout perks can help your company/products gain “free” PR from giving away a few products to influential people.

Klout Brand Pages

src="http://www.webhostingsecretrevealed.com/images/2012/0523-14.jpg" alt="Klout Screenshot" class='border' />

Following the trend of major social networks, Klout recently introduced brand pages. While they are still in a Beta version, the benefits are apparent. The biggest benefit of brand page is that it displays the top 10 influencers for the brand – what marketer doesn’t want that information? These people are influential AND loyal to your brand, and now you know who they are, how to connect with them, and have the ability to keep them happy (thus leveraging their loyalty and influence). This tool takes social media management to a new level.

Still have questions about Klout? Let me know in the comments and let’s talk about it!

Page 24 – Web Hosting Secret Revealed

What a Newsletter Can Do for Your Site (and Free Software to Get Started)

alt="What a Newsletter Can Do for Your Site (and Free Software to Get Started)" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

What a Newsletter Can Do for Your Site and Free Software to Get Started

If you’ve been on the Internet for more than a few minutes, you’ve likely signed up for at least one website newsletter. Those website owners who offer a newsletter are taking advantage of a savvy marketing tool that helps them gain new customers, educate current customers and communicate quickly and effectively. If you don’t already use this powerful tool in your marketing efforts, you should consider adding one today.

Educate and Reach Current Customers

According to href="http://www.internetworldstats.com/stats.htm">Internet World Stats, as of 2011, there were nearly 7 billion people using the Internet. Online tasks are becoming more and more a part of everyday living. What better way to reach your customers than with a newsletter that appears in their e-mail box every so often? The newsletter is only limited to your imagination.

Sales and Coupons Some companies use a newsletter to inform customers about sales and offer a coupon. Hobby Lobby offers a good example of using a newsletter for this purpose. Each week, Hobby Lobby sends out a newsletter showing what is on sale and offering a percentage off coupon that can be printed and taken into a brick and mortar store.

Education An online newsletter can also be used to educate the consumer about a new product or other developments in an industry. Utility companies often utilize their newsletters for this purpose, teaching consumers about energy-efficient new equipment or how to save money on utility bills.

Just for Fun People love to be entertained, so most newsletters also contained interesting articles, amusing anecdotes and perhaps a recipe or two.

Reach New Customers

An electronic newsletter is an interesting way to reach new customers and costs you only the time it takes to put the newsletter together and e-mail it to your list. Encourage your current subscribers to share the newsletter in whole by forwarding it to others. Be sure to include information within the newsletter on how new readers can subscribe to receive the copy in their own e-mail inbox.

Another idea is to use the newsletter to offer exclusive items that the reader cannot get by visiting your site. For example, offer a free e-book here and there, articles that are not posted publicly, or recent news before it is announced elsewhere.

How Often Should You Send a Newsletter?

No two website owners seem to agree about how often you should send out your e-news. There must be a balance between sending so often that the reader gets tired of hearing from you and sending so seldom that the reader forgets she is even subscribed to your newsletter. For website owners just starting out in the newsletter game, once a month is a good place to start. If your website generates a lot of news or offers weekly sales, you can always go to a weekly or bi-weekly newsletter later on. More than weekly is probably too much.

Newsletter Software

A plain text newsletter offers information, but it not visually appealing or attention grabbing. HTML is the most efficient type of newsletter these days, although some companies also offer their newsletters in PDF format. Keep in mind that some people will not have Adobe reader installed, so HTML is most likely to reach the most readers.

Fortunately, you don’t have to spend time coding HTML to send out a formatted newsletter. There are several free and inexpensive software options that can do everything from tracking a small list to providing a template for your HTML news.

Mail Chimp

src="http://www.webhostingsecretrevealed.com/images/2012/mail-chimp.jpg" class="border" alt="Newsletter Free Tools" />

If you have up to 2,000 subscribers and send mail about once a month, Mail Chimp is free for you to use. Everything is kept on their website, so you won’t need to store anything on your computer, although you should always keep a backup list of your newsletter subscribers no matter how you are sending out your newsletter. Mail Chimp also allows you to share the newsletter on social networking sites and make it compatible for mobile surfers. An added bonus is that you can manage multiple newsletter lists from one account. If you plan to send mail more often, then pricing starts at /month for up to 500 subscribers and unlimited sending and goes up based upon how many subscribers you have.

src="http://www.webhostingsecretrevealed.com/wp-content/themes/WHSR/images/icon1.gif"> href="http://www.mailchimp.com" target="_blank">Visit http://www.mailchimp.com

Constant Contact

src="http://www.webhostingsecretrevealed.com/images/2012/constant-contact.jpg" class="border" alt="Newsletter Free Tools" />

This site offers an all-in-one solution for marketing. Not only can you use their newsletter creation and distribution services, but you can also use Constant Contact for event planning, online surveys and social campaigns. You can create a custom template or use one of the dozens already created. Constant Contact offers a free 60-day trial if you have under 100 subscribers. After the trial period, prices start at a month and go up based on the number of subscribers you have.

src="http://www.webhostingsecretrevealed.com/wp-content/themes/WHSR/images/icon1.gif"> href="http://www.constantcontact.com" target="_blank">Visit http://www.constantcontact.com

Google Groups

src="http://www.webhostingsecretrevealed.com/images/2012/google-groups.jpg" class="border" alt="Newsletter Free Tools" />

Another free solution for website owners who are on a budget is Google Groups. Google Groups offers the ability to create a list that is for mailing purposes only. This means that other people in the group cannot post. Only the administrator of the group is able to post. Place your newsletter within a group that matches your business industry. Those who are seeking out a group on this topic can locate your newsletter and subscribe. This can be another way to reach new customers.

src="http://www.webhostingsecretrevealed.com/wp-content/themes/WHSR/images/icon1.gif"> href="http://groups.google.com" target="_blank">Visit http://groups.google.com

iContact

src="http://www.webhostingsecretrevealed.com/images/2012/icontact.jpg" class="border" alt="Newsletter Free Tools" />

iContact offers hundreds of templates. It is similar to some of the other e-mail solution providers, but allows you to schedule items in advance such as social media posts. Start with a 30-day free trial, which will not require a credit card or other obligation. If you like iContact, prices start at .00/month for up to 500 subscribers and are only .00/month for up to 5,000 subscribers. They do have packages for even larger newsletter lists, but do not publicly list those prices.

src="http://www.webhostingsecretrevealed.com/wp-content/themes/WHSR/images/icon1.gif"> href="http://www.icontact.com" target="_blank">Visit http://www.icontact.com

PHPList

src="http://www.webhostingsecretrevealed.com/images/2012/phplist.jpg" class="border" alt="Newsletter Free Tools" />

If you’re looking for an open source solution that you can run on your site, PHPList offers you the ability to create an opt-in mailing list. Simply sign into the PHP-based control panel and type out the newsletter you’d like to send. You can utilize basic HTML commands and also subscribers can opt for a text-only newsletter. PHPList does require some set-up, but once you create a template and get everything in place, it is a free solution for sending out a monthly e-mailer to a list with more than a few hundred names.

src="http://www.webhostingsecretrevealed.com/wp-content/themes/WHSR/images/icon1.gif"> href="http://www.phplist.com" target="_blank">Visit http://www.phplist.com

Contactology

src="http://www.webhostingsecretrevealed.com/images/2012/contactology.jpg" class="border" alt="Newsletter Free Tools" />

If you don’t like the tell-tale sign that your newsletter is being sent from a mailing management provider, then you’ll appreciate the custom features of Contactology. Upload your logo and choose your own color scheme to create a one-of-a-kind template. This platform offers some unique features, like scheduled auto responders and the ability to become a reseller and tell others about the product.

src="http://www.webhostingsecretrevealed.com/wp-content/themes/WHSR/images/icon1.gif"> href="http://www.contactology.com" target="_blank">Visit http://www.contactology.com

Imnica

src="http://www.webhostingsecretrevealed.com/images/2012/imnica.jpg" class="border" alt="Newsletter Free Tools" />

You may not have heard of this mail campaign company, but it offers some interesting features. For example, you can see which campaigns are most successful for you by doing split sampling. You can also set up auto responders, personalize with subscribers’ names or other details, and integrate with your website. Even better, you can get a free subscription for up to 1,000 members and up to 6,000 e-mails. Send unlimited to those same 1,000 people for only .00 per month. Even if you gain 10,000 subscribers, your rate will only hit .00 a month.

src="http://www.webhostingsecretrevealed.com/wp-content/themes/WHSR/images/icon1.gif"> href="http://www.imnica.com" target="_blank">Visit http://www.imnica.com

Wrapping Up…

Of course, there is always the old fashioned method of writing your own e-mail, adding in a few pictures and zipping it out to your mailing list. For very small lists, this might work, but as your list grows, your e-mail provider may balk at the massive list. Whichever service you ultimately choose, remember that offering content your newsletter subscribers feel they simply must receive is the key to a successful e-newsletter.

Page 24 – Web Hosting Secret Revealed