!Web Magazine

<!WEB>

<Magazine> Make our own cloud service !

Walkthougth how to create your own cloud server.

Tips webapps or responsive What is the difference and detailed guideline and tips.

Webfont made very simple Why you should use webfonts and more about google fonts.

Cille explains video background

Coming in this edition Webfont Made-Simple 3 The best google fonts to use 4 Cloud service solution 8 Meta understanding Viewport 9 Doctypes 12 Responsive or Webapp 14 Metadata explained 19 Cille Explains: Video Background 20

D o y o u w a nt t o , co m e o u t a l i t t l e ? Meeti ng ne w p e o p l e ? F i nd i ng a go od f r i e nd ? E x p l o r i ng a ne w w o rld?

S ha r e t r a v e l s a nd e x p e r ience s ? B o nd i ng f o r l i f e ? Rea d a nd w r i t e m e s s a ge s ? Findi ng a p a r t ne r ? D i s co ver?

M a k e ne w f r i e nd s ? Ha v e f u n? S co r e ? C ha t ? S m ile?

C o s y i ng? L a u gh? F l i r ting?

C u d d l e ? G o i ng o n a da t e?

F i nd t ha t s p e ci a l s o m eone?

Datesence.dk

Your way to free dating 2

Webfont made simple What Fonts Are Best for the Web? Back in the day, you were limited to just a handful of fonts when designing for the web

F

or the sake of usability across numerous browsers and the often clunky transitions between them, you were stuck using good old standbys like Times New Roman, Arial, and Helvetica, while there’s still nothing wrong with using these fonts, you do have a little bit more leeway nowadays thanks to CSS and Google Fonts. To get started selecting the right font for your blog, you need to know a few things, according to Smashing Magazine, there are 5 basic groups of typefaces you need to know about.

They include: Geometric Sans: These fonts are minimalistic and modern. They are geometric and feature strokes with the same width.

Popular examples include Helvetica and Futura, writing in their makeup, even if they’re very clean and structured, Stroke weights vary and offer a more personal touch.

Get google fonts on your website First of all, just because web fonts can be creatively customized doesn’t always mean they should. Your body copy should be easily readable, which is what makes fonts like Helvetica or Arial so popular, Instead, employ creative and innovative fonts in your titles or headers to bring some personality to your copy, using a new web font also requires a little coding before you’re up and running. But don’t let digging into the backend of your site intimidate you.

A tool like Google Fonts holds your hand throughout the process from font selection to instructions on inserting the code into your website. And best of all, it’s free to use!

Here’s how to get started:

Step #4 Build your Google web font Once you find the perfect font style, hit the blue “Add to Collection” button. You can also customize more font options and build up a collection of different options that are ready for use. Just be careful about the number you select.

Step #5 Use your new font Once you’re ready to go, select your Font Collection and click on “Use” in the lower right-hand corner of your screen to read through the available options.

Step #6 Add to Website Ready to integrate your new Google Web Font into your website? Scroll about halfway down the page until you see the option for, “Add this code to your website.”

Step #7 Integrate to your CSS Don’t worry about how the fonts will look in different browsers. Google Fonts’ API will go ahead and generate browser-specific CSS to use your new fonts. That said, you still need to add the font name to your CSS styles to make it all work.

Step #1 Backup your website Before you touch your current fonts, back-up a copy of your website according to your local hosting provider’s instructions. You never know when you might hit a bump or a wrong key and need that latest version.

Step #2 Getting Started To choose the font that’s right for your site, visit Google. com/fonts for a collection of 629 (and counting) font families.

Step #3 Filter your results The left-hand side of Google Fonts offers a “Filters” section.

Click on the “All Categories” drop-down and choose between serif, sans serif, display or handwriting and hit “Okay” to see your new preview. You can also select your font thickness, slant, width and script to customize your results to find the exact kind of typeface you’re looking for.

3

The best google fonts to use Source: http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html

Open Sans abcdefghijklmnopqrstuvwxyzæøå abcdefghijklmnopqrstuvwxyzæøå Josefin Slab abcdefghijklmnopqrstuvwxyzæøå abcdefghijklmnopqrstuvwxyzæøå Arvo abcdefghijklmnopqrstuvwxyzæøå abcdefghijklmnopqrstuvwxyzæøå

Lato ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå

Vollkorn ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 4

Abril Fatface ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå

Ubuntu ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå

PT Sans ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå

PT Serif ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå

Old Standard TT ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 5

99,9% Uptime and no worries

6

Gabemedia

We take care of everything

Relax and we do the hosting

7

Cloud service solution Cloud computing is the next stage in the Internet’s evolution, providing the means through which everything

F

rom computing power to computing infrastructure, applications, business processes to personal collaboration can be delivered to you as a service wherever and whenever you need. The “cloud” in cloud computing can be defined as the set of hardware, networks, storage, services, and interfaces that combine to deliver aspects of computing as a service. Cloud services include the delivery of software, infrastructure, and storage over the Internet (either as separate components or a complete platform) based on user demand.

Cloud computing has four essential characteristics: elasticity and the ability to scale up and down, self-service provisioning and automatic deprovisioning, application programming interfaces (APIs), billing and metering of service usage in a pay-as-you-go model. This flexibility is what is attracting individuals and businesses to move to the cloud.

Cloud computing can completely change the way companies use technology to service customers, partners, and suppliers. Some businesses, such as Google and Amazon, already have most of their IT resources in the cloud. They have found that it can eliminate many of the complex constraints from the traditional computing environment, including space, time, power, and cost.

What is this kind of cloud solution This is not a cloud service and the folder don´t sync, cloud is like an online folder, and it is. You upload and you download your needed files directly to any kind of device that support´s it. I will be showing it through a pc with windows, we start with openning Computer from the start menu.

At the top of the windows you can find “Map Network drive” We click on it and a window apear. In this window we will click on “Connect to a Web site that you can use to store your documents and pictures” and yes you will need your own websolution with FTP access to do this.

After we have clicked on it a Wizard pops up and we will click next all the way until location of your website apears, here we need to contact the server in order to make an connection. We need to write ftp://ftp.yourdomain.com/ your-folder then select next after you have selected your location. We can choose to log on anonymosly but just in case we just write our username to our normal ftp client,

so deselect the “Log on anonymously” and write your username click next and you are done. The folder to your folder on your server is under Network Location inside Computer from the start menu, the first time you try to log on a password will be required to enter, depending on your hosts settings you only have to enter the password one time only.

You can redo these steps on your other computers, mac´s, tablets and every other device that supports Network drives in the system, now you have your own cloud without any payment needed and only with use of your ftp server.

“

DID YOU KNOW

The most recent and popular approach seems to be Responsive Web Design. This paper explains the difference between Mobile Web App and Responsive Web Design, and provides a framework for resolving some of the key questions decision makers have. These include what factors to consider when choosing between Responsive Web Design and Mobile Web App, and what type of industry Responsive Web Design is most suitable for.

Modested.dk Find new friends • Make new friends • Focus on good mood 8

Understand viewport the unique way to Mobile websites and webapps

A

little Background Mobile browsers like Fennec render pages in a virtual “window” (the viewport), usually wider than the screen Mobile browsers like Fennec render pages in a virtual “window” the viewport, usually wider than the screen, so they don’t need to squeeze every page layout into a tiny window which would break many non-mobile-optimized sites. Users can pan and zoom to see different areas of the page. Mobile Safari introduced the “viewport meta tag” to let web developers control the viewport’s size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard.

Apple’s documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari’s documentation says the content is a “comma-delimited list,” but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

Viewport basics The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.

like the iPad and Android tablets, some phones like the new windows phone also have a special code to let us make use of the viewport tag in the HTML, or the internet explorer will be a pain to work with, but not like we didnt know that.

On 240-dpi screens, pages with initial-scale=1 will effectively be zoomed to 150% by both Fennec and Android WebKit. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at 150% of their final size (or 200%, to support 320dpi devices such as a retina display iPhone) and then scale them down using CSS or viewport properties.

Viewport width and screen width Many sites set their viewport to “width=320, initial-scale=1” to fit precisely onto the iPhone display in portrait mode. As mentioned above, this caused problems when Fennec 1.0 rendered these sites, especially in landscape mode. To fix this, Fennec 1.1 will expand the viewport width if necessary to fill the screen at the requested scale. This matches the behavior of Android and Mobile Safari, and is especially useful on large-screen devices like the iPad.

A pixel is not a pixel The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320-480 pixels (~160 dpi).

Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi).

Because of this, the last version of Fennec displayed many pages about one third smaller (in actual, physical size) than iPhone or Android. This caused usability and readability problems on many touch-optimized web sites.

For web developers, this means that 320px be full width in portrait mode at scale=1, on all of the above-mentioned handheld devices, and they may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should also make sure that your pages work well in landscape mode, and on larger devices

9

The importants about Doctypes Definition and Usage the <!DOCTYPE> declaration must be the very first thing in your HTML document

T

he Definition and Usage the <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect. Differences Between HTML 4.01 and HTML5 There are three different <!DOCTYPE> declarations in HTML 4.01. In HTML5 there is only one:

HTML 5 <!DOCTYPE html> This doctype is the newest to date, an give us a lot of new features and endless possibilities to make website we never had dreamt about before, and the best of all it is easy to remember and HTML5 includes the features like <video> <audio> <section> and much more, you can really get to work, and think out of the box, also remember that CSS3 is out and that gives you even more features and new codes, most of browsers already supports HTML5 and CSS3

HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/ TR/html4/strict.dtd”>

HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www. w3.org/TR/html4/loose.dtd”>

HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content. <!DOCTYPE HTML PUBLIC “-// W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/ TR/html4/frameset.dtd”>

10

XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www. w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Skiing in Canada Powder Hunting 9 days incl. lift passes

From $2599

Costa del Sol in Spain Incl. flight & hotel for 7 nights

From $799

11

Responsive or mobile website T he New Design Trend Is influencing many compa nies to shift towards a “Mobile First, Desktop Second” strategy for their business. However, the shift from desktop to mobile requires web designers to refocus not completely away from desktop design, but certainly with an inclination towards mobile. There are several ways to approach a mobile web presence, such as implementing a separate mobile site or a mobile web app.

The most recent and popular approach seems to be Responsive Web Design. This paper explains the difference between Mobile Web App and Responsive Web Design, and provides a framework for resolving some of the key questions decision makers have. These include what factors to consider when choosing between Responsive Web Design and Mobile Web App, and what type of industry Responsive Web Design is most suitable for. The paper examines the pros and cons of each approach, and presents a sample scenario from the retail industry as well as a case study.

As the paper guides you in how to make the right choice.

Device-Specific Approach When a developer creates a website, they often design for large screens and lose sight of how it will look when a user browses the same website from their mobile device. When users click links within the site via their mobile phones, reading and navigating become difficult, requiring zooming and resizing to read or click.

This is when you need to think developing a device-specific site. The most common option for companies looking for a mobile version of their website is to build a mobile site. This is a separate version of your website that users are redirected to when they access your website via a mobile phone or tablet.

The main benefit of implementing a mobile version of a website is that it provides an optimized view across mobiles and tablets. And what is Mobile Web App? This is an increasingly popular type of mobile development in which the application is built to run over the internet from a central server, from where it can be accessed by any device with a web browser. The web technologies used to develop the app are HTML5, Sencha, jQuery and others The underlying technologies are JavaScript, HTML and CSS. A mobile web app combines the versatility of the web with the functionality of touch-enabled devices. Therefore the application across browsers and a wide range. Mobile Web App and Responsive Web Design, and provides a framework for resolving some of the key questions decision makers have. These include what factors to consider when choosing between Responsive Web Design and Mobile Web App, and what type of industry Responsive Web Design optimized view across mobiles and tablets. And what is Mobile Web App?

12

One Size Fits All In simple terms, Responsive Web Design is the methodology that recommends the design and implementation of a website that responds to user behavior and environment based on the screen size, orientation and operating system of their device.

From a technology standpoint, the framework consists of a combination of flexible grids, flexible layouts, images and intelligent use of CSS media queries. As the user switches from one device to another (for example, desktop to iPhone), the website automatically adapts to accommodate for resolution, image size and scripting abilities. This eliminates the need for resizing, panning and scrolling by the user in order to view the website on the new device.

When Is It Most Appropriate?

Typically, Responsive Web Design is suitable for informational web pages, with information on the right side of the screen in desktop applications brought to the bottom of the page in mobile applications. Some of the advantages of using Responsive Web Design are.

Single code base build once, run across all devices Renders across any screen size – one can view the internet on, 20 monitors, 15 laptops, 10 netbooks, 7 tablets, 3 smartphones and every size between. It also considers the huge difference in widths and heights, whether the screen is landscape or portrait, and screen resolution.

Improves SEO a single version of the website improves page ranking. Issues have arisen in which having two versions of a site (website and mobile site) impact page ranking Reduces maintenance cost and effort. Provides control and flexibility .

Location-based Services Maps and direction finder services are generally image heavy. In these types of services, to view the routes closely and to get better clarity zooming and re-sizing the screen with fingers become necessary.

Auto-adjustment becomes essential, which is supported in Responsive Web Design.Their mobile responsive Web Design works well These sites are more text-heavy, and sections such as breaking news require real-time content updates which add to users are more accustomed to scrolling using their mobile. Responsive Web Design works well here and sections such as breaking news require real-time content updates which add to maintenance cost.

When a developer creates a website, they often design for large screens and lose sight of how it will look when a user browses the same website from their mobile

device. When users click links within the site via their mobile phones, reading and navigating become difficult, requiring zooming and resizing to read or click. This is when you need to think developing a device-specific site.

The most common option for companies looking for a mobile version of their website is to build a mobile site. This is a separate version of your website that users are redirected to when they access your website via a mobile phone or tablet, that it provides an optimized view across mobiles and tablets. And what is Mobile Web App?

Customize everyting In simple terms, Responsive Web Design is the methodology that recommends the design and implementation of a website that responds to user behavior andw environment based on the screen size, orientation and operating system of their device. From a technology standpoint, the framework consists of a combination of flexible grids, flexible layouts, images and intelligent use of CSS media queries. As the user switches from one device to another (for example, desktop to iPhone), the website automatically adapts to accommodate for resolution, image size and scripting abilities. This eliminates the need for resizing, panning and scrolling by the user in order to view the website on the new device.

Manualy or Automatic?

Typically, Responsive Web Design is suitable for informational web pages, with information on the right side of the screen in desktop applications brought to the bottom of the page in mobile applications. Some of the advantages of using Responsive Web Design are.

Single code base build once, run across all devices Renders across any screen size – one can view the internet on, 20 monitors, 15 laptops, 10 netbooks, 7 tablets, 3 smartphones and every size between. It also considers the huge difference in widths and heights, whether the screen is landscape or portrait, and screen resolution.

Improves SEO a single version of the website improves page ranking. Issues have arisen in which having two versions of a site (mobile site) impact page ranking Reduces maintenance cost and effort.

essential, which is supported in Responsive Web Design.

Their mobile responsive Web Design works well These sites are more text-heavy, and sections such as breaking news require real-time content updates which add to , users are more accustomed to scrolling from top to bottom using their mobile. Responsive Web Design works well here and sections such as breaking news require real-time content updates which add to maintenance cost.

Single code base build once, run across all devices Renders across any screen size – one can view the internet on, 20 monitors, 15 laptops, 10 netbooks, 7 tablets, 3 smartphones and every size between. It also considers the huge difference in widths and heights, whether the screen is landscape or portrait, and screen resolution.

Improves SEO a single version of the website improves page ranking. Issues have arisen in which having two versions of a site (mobile site) impact page ranking Reduces maintenance cost and effort.

Works with apps In simple terms, Responsive Web Design is the methodology that recommends the design and implementation of a website that responds to user behavior and environment based on the screen size, orientation and operating system of their device. From a technology standpoint, the framework consists of a combination of flexible grids, flexible layouts, images and intelligent use of CSS media queries.

As the user switches from one device to another (for example, desktop to iPhone), the website automatically adapts to accommodate for resolution, image size and scripting abilities. This eliminates the need for resizing, panning and scrolling by the user in order to view the website on the new device.

Use of phone functions Maps and direction finder services are generally image heavy. In these types of services, to view the routes closely and to get better clarity zooming and re-sizing the screen with fingers become necessary. Auto-adjustment becomes

13

Ask Cille on Tuesdays

14

Programmings future is here

Gabemedia 15

16

Metadata explained Meta elements Are the HTML or XHTML meta element used to provide structured metadata about a Web page

M

ultiple Meta elements with different attributes are often used on the same page. Meta ele- ments can be used to specify page description, keywords and any other metadata not provided through the other head elements and attributes.

The meta element has two uses: either to emulate the use of an HTTP response header, or to embed additional metadata within the HTML document. With HTML up to and including HTML 4.01 and XHTML, there were four valid attributes: content, http-equiv, name and scheme.

Under HTML 5 there are now five valid attributes, charset having been added. http-equiv is used to emulate an HTTP header, and name to embed metadata. The value of the statement, in either case, is contained in the content attribute, which is the only required attribute unless charset is given. charset is used to indicate the character set of the document, and is available in HTML5.

Consistency of definitions Metadata contains information about data that helps reconcile the difference in terminology such as “clients” and “customers,” “revenue” and “sales,” etc. Clarity of relationships Metadata helps resolve ambiguity and inconsistencies when determining the associations between entities stored throughout data environment. For example, if a customer declares a “beneficiary” in one application, and this beneficiary is called a “participant” in another application, metadata definitions would help clarify the situation.

Clarity of data lineage Metadata contains information about the origins of a particular data set and can be granular enough to define information at the attribute level; metadata may maintain allowed values for a data attribute, its proper format, location, owner, and steward. Operationally, metadata may maintain auditable information about users, applications, and processes that create, delete, or change data, the exact timestamp of the change, and the authorization that was used to perform these actions.

Technical metadata is the most common form of metadata. This type of metadata is created and used by the tools and applications that create, manage, and use data. For example, some best-inclass ETL tools maintain internal metadata definitions used to create ETL directives or scripts.

Technical metadata is a key metadata type used to build and maintain the enterprise data environment. Technical metadata typically includes database system names, table and column names and sizes, data types and allowed values, and structural information such as primary and foreign key attributes and indices.

How Many Keywords to Include The best use of meta keywords is for your own use. So the length isn’t terribly important. I use the meta keywords to remind myself of the keyword phrase I’m targetting in the article as well as any (1-3) alternate phrases I might target.

You should note, however, that I only use keywords in my About.com articles, and I only use them because their CMS requires them. In every other page I write, I don’t spend any time on keywords. I’d rather have a sharp opening paragraph and good use of my target phrase in the document than spend any time on meta keywords.

Business metadata includes definitions of data files and attributes in business terms. It may also contain definitions of business rules that apply to these attributes, data owners and stewards, data quality metrics, and similar information that helps business users to navigate the “information ocean.” Some reporting and business intelligence tools provide and maintain an internal repository of business-level metadata definitions used by these tools.

17

Cille Explains: Video Background F

irst and foremost when planning on adding a video to your website as a background you must first have a video. This video should be at least 720P resolution and shouldn’t exceed 30 seconds in length as we’re going to just loop the video for the effect. So, you need to produce your own video for this to work. And you might actually have to “produce your video” in the sense that you may want to edit or trim it to a specific length.

In my case, I used Imovie (for Apple) to strip the video of any volume because I find that annoying on websites when video’s autoplay on a website and there is volume added.

That being said, put some thought into the video you want to use and try to keep in mind that the actual video on the web page will only show a narrow window of the total video size. This is not a page background video tutorial, this one is for div background video.

Two of which I am extremely unfamiliar with (webm/ogv) but that fancy Miro Video Converter handled converting my .MOV file to the above mentioned filetypes. If the video file you’re working with is currently .mp4, I would suggest running it through the Miro program anyway.

Next step Let’s go ahead and upload the THREE video filetypes to your server at a destination of your choice. For my example, I will be using the /img folder for storing my video files.

You can name your folder anything you want, just remember the name for later implementation. Now we need to do some HTML coding and CSS styling to make this happen. The following examples are based on the header of this page. I have a full width header that scales down with the page width but maintains a fixed height.

If you want your div to re-size with the page, this tutorial will not work for you. Although, I think you will learn enough about what’s going on to figure it out on your own after getting this working. The KEY to keeping the video contained within my “.header-unit” div is the “overflow: hidden;” attribute of the “#video-container” div id.

Try removing that attribute and see what happens to the size of your video. It goes over the borders of the containing div. Some other important attributes of the above CSS are the “absolute” positioning used on the “#video-container” ID and “video” element.

These ensure that the video placement has an “absolute” value which does not change. Also, the “z-index” attribute of the video element may have to be adjusted according to your containing div’s current attributes (IE: a background image or logo you would want to place above the video).

Be extremely careful using the “z-index” because it can

18

drastically affect your entire site by layering divs incorrectly.

If all else fails, set the “z-index” back to “0″ and your page should return to normal.

Lets add the CSS .header-unit { height: 150px; border: 2px solid #000; border-right:none; border-left: none; position: relative; padding: 20px; } #video-container {

position: absolute; } #video-container {

top:0%;

left:0%;

height:100%;

width:100%;

overflow: hidden; } video {

position:absolute;

z-index:0; } video.fillWidth {

width: 100%; } It will show up again when we get down to the HTML part.

Anyhow, you could be applying this.

Please note the class “.header-unit” is only there for the purpose of showing you the div class in which I wish to contain the video. It will show up again when we get down to the HTML part. Anyhow, you could be applying this to a completely different div element with different variables but the main point of attention regarding the “.header-unit” is the fact that it’s 150px high… fixed height.

The HTML The following HTML will need to be customized to fit your filenames and path’s. But, it’s really pretty simple. <video autoplay loop class=”fillWidth”> <source src=”http://yourwebsite.com/your-video-file. mp4” type=”video/mp4”/> <source src=”http://yourwebsite.com/your-video-file. ogg” type=”video/ogg”/> <source src=”http://yourwebsite.com/your-video-file. webm” type=”video/webm”/> Your browser does not support the video tag.<br/> I suggest you upgrade your browser. </video> The HTML5 aspect of the above code is the “video” tag. If you notice, within the opening video tag, I have added “autoplay” and “loop” before the class declaration.

These are native HTML5 video commands. Autoplay will start the video automatically, without the need for a play button. Loop will keep the video on an infinite loop while the website is loaded. There are more options that you can find by searching for “HTML5 video options”.

Conclusion That’s really about all there is to make this work. Although if you’re going to just copy and paste my code, I would suggest trying this on a test page rather than your current live website. Remember, its full width in this example and that may not be what you want.

19

Next time

20

Windows vs. Mac OS