AEXT.NET NET MAGAZINE

HTML5 and Apple Try to Create the New Flash

Shannon Suetos — Fri, 30 Jul 2010 05:14:34 +0000

The Internet is a vast landscape which is quickly changing. Change is the one constant you can count on when it comes to the World Wide Web. This is because there are always new forms of media coming online as well as new ways to present them. Flash from Adobe has been one of the giants in the industry for the longest time. Currently Apple is trying to unseat the champion for their chance to bask in the glory (with the help of HTML5 of course). The problem is, Adobe is fighting back with an even better looking version of their Flash with the ability to do more and run faster. So, which one will be better?

Breakdown on HTML5

HTML5 is the newest form of HTML code which allows developers to embed videos without the use of Flash. There are many different kinds of players which are coming online which are rivaling. They all want to be the video which people will use in order to present their videos on their web pages. The video formats which are currently available for the HTML5 code are Sublime, Kaltura, Projekktor, YUI, OIPlayer, Ogg and more.

Here is an example of the use of Kaltura:

The code used:

The major problem many of these video types are running into is that they are specific to certain web browsers. FireFox, webkit browsers and Internet Explorer 9 (IE9) are the only ones which have the ability to support these inclusions. For many to be able to see the videos, they will still need to download and install a plug-in like Google Chrome Frame which completely defies the purpose of using the new technology.

Even without the video inclusion, HTML5 is set to take the place of HTML4. Those who do use the new HTML technology will be able to include custom buttons to control the video playback by using such script as this:


    
    




    Play |
    Pause |
    Sound On/Off

Source: w3avenue.com

The new Version of Flash

In a response to the fact that Apple and HTML5 are trying to edge out Flash, Adobe is reminding everyone of the new version which is being released soon. The new version of Flash promises to be able to handle everything including 3-D graphical rendering. This makes it possible for Adobe to show content which is similar in nature to all of the video game platforms which are out there.

The biggest problem for Adobe is that they do not have a clear cut view as to when the release of the new Flash will come. This brings back to the whole reason why so many people are fed up with Flash. It seems like the technology is always dragging a bit behind, and even when there is a good development, it takes a while to be released.

The other major problem Adobe is running into is with Mac platforms and smartphones. They are dragging behind waiting for an upgrade which will be powerful enough for their handheld device to work as intended. This is not a problem the HTML5 video coding will run into, because the coding will make it possible for anyone who can run the HTML5 language to watch the videos.

Advantages of HTML5 Video

The biggest advantages HTML5 offers is its seamless buffer and play system. You do not have to wait for the video to fully buffer before you can even watch the first frame. Even better, you will not have to wait until the section of the video you want to watch is buffered. You can simply jump ahead to the portion you would like to watch, and the video will begin to buffer right at the screen it is on. This provides the user with more control over what they are watching.

Another advantage HTML5 video player has is that you don’t have to wait while the system reconfigures the video to a larger screen size. If you change from small screen to full screen, you will be able to do it by pressing control or the Mac button and clicking on enlarge. Before you know it, the video is playing in full screen mode. Changing back to the small screen is just as easy.

Having the ability to control such things as the control buttons, skins, rotation and more for the videos allows the developer to be in much more control. No longer will you have to live with the normal settings which you have grown accustomed to seeing on the screen whenever you see the Flash screen come up. This is a boon to all developers looking to have a completely unique look.

Industrial Applications

Being able to use the functions to customize the look and the availability of the video have huge benefits to those looking to promote their companies. For instance, telemarketing companies will have the ability to show advertising videos to their clients right on their websites, and not have to worry about whether their clients will be able to watch the videos.

Many of the video players which are available that rival Flash will allow people to watch the videos by using different video players as fallbacks. Meaning if the user is looking to watch a video about B2B telemarketing does not have the ability to watch a video using the Sublime video player, they will still be able to watch it. The solution is that the video player will simply revert the video through a different plug-in. In the case of the Sublime video player, if you cannot watch it, you will be able to watch it through the use of an older version of Flash.

While the war rages on for the future of video players, it is certain that the true winners are those who are watching the videos in the first place. It may be a bit more confusing for the web developer to choose the one which will be the best platform to show their videos on. As long as you know your clientele and the systems they use, you will be fine.

Showing Off bit.ly Clicks of Your Posts With jQuery

Mike More — Thu, 29 Jul 2010 08:24:04 +0000

While showing off number of retweets you get on a post is very common, showing number of clicks -that is relatively higher- can be a very interesting measure of how popular your post is. Since, sharing your short URL is not limited to Twitter but also it can be shared anywhere like Facebook, email and others..

bit.ly -the most common URL shortener- provides a simple RESTfull API to lookup short URL’s and their clicks count.. bit.ly has recently released version 3 which added simpler, more efficient methods to query multiple URL’s in one request that we are going to apply in this tutorial.

You can check the demo first here:

Demo

First, Place HTML link for each post

Next to each post, add anchor tag with class "bitly-clicks" that links to "http://twitter.com", so It would degrade gracefully to a Twitter link when Javascript is disabled.

Assuming that you like separation of concerns, we will store post URL in "rel" attribute and post title in “title” attribute!


   Retweet

Second, including jQuery

Include jQuery javascript file once in your page at section or by the end of the page

* Note that this code was also tested to run with jQuery v1.3.2, you can just replace the jQuery URL with “http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”

Finally, Include This script

Code is placed in a function that will be called when document is ready. Code sequence is divided into 6 steps and defined in internal functions.

Looping links with class "bitly-clicks" to collect all URL's in "urls" array then make AJAX call to bit.ly lookup method and pass the array as a parameter.
When lookup call is loaded; we save the returned JSON results in "lookup" array that will contain the short URL's.
Collect short URL's from "lookup" array then make AJAX call to bit.ly clicks method and pass these short URL's as a parameter.
When clicks call is loaded; we loop the returned JSON results to find global clicks count for each URL in the lookup array.
For each anchor we loop the "lookup" array to get the corresponding short URL and clicks count and pass these info to "createAnchor" function. If one or more of the URL's we got have never been shortened on bit.ly; then lookup call would not return their short URL. So, for each one of these URL's we make AJAX call to bit.ly shorten method. And when call returns the short URL we pass it to "createAnchor".
Finally, we point anchor "href" to tweet-this link and add the clicks count after the anchor inside a link to bit.ly stats page of the short link.

* Note, that bit.ly API methods like lookup and clicks can handle up to 15 urls -which is good enough in most cases.

*Code starts by defining a bit.ly login and API key for this demo. You can replace with your credentials after registering on bit.ly.

* If you are looking for a complete solution to show clicks count of your posts; you may check my jQuery plugin “bit.ly Button“.

// When DOM is fully loaded
$(document).ready( getBitlyClicks);

function getBitlyClicks(){
   // your bit.ly login and API key
   var bitly_login = 'bitlydemo', bitly_key = 'R_bb2bf1337e8440debd525ec84242a9a5';
   // init urls array
   var urls = [];   
   // init lookup table that will hold short links and clicks count
   var lookup = [];
   // Get all links with class "bitly-clicks"
   var tags = $('a.bitly-clicks');
   
   // 1: Collect urls and lookup them
   var lookupCall = function() {
      tags.each(function(){ 
         // URL is saved in rel attribute of each A link
         var url = $(this).attr('rel');
         // Add URL to array if not there
         if( $.inArray(url, urls)==-1) urls[urls.length]= url;
      });
   
      // 2: Call bit.ly lookup once for all URLS
      $.ajax({url:'http://api.bit.ly/v3/lookup'
         ,data:{ url:urls, login:bitly_login, apiKey:bitly_key, format:'json' }
         ,dataType:'jsonp'
         ,traditional:true
         ,success:lookupCalled
      });
   };
   
   // 2: Lookup info is loaded
   var lookupCalled = function(json){
      // Error : exit
      if(json.status_code!=200) return;
      // save lookup JSON in lookup array
      lookup = json.data.lookup;
      // Lookup done: get clicks info
      clickCall();
   };
   
   // 3: Call bit.ly clicks for all urls
   var clickCall = function(){
      // collect short urls in this array
      var shortUrls = [];
      for(var i=0, c=lookup.length; i0) info.clicks=0;
      // tweet text made of post title and short url
      var tweet = a.attr('title') +' '+ info.short_url;
      // encode tweet text to be used as parameter in tweet-this link
      var tweet_url = 'http://twitter.com/?status='+ encodeURIComponent(tweet);
      
      // add number of clicks after the anchor and links to bit.ly stats page
      a.after(' ('+ info.clicks +' clicks)');
      // Set anchor href to the tweet-this link
      a.attr('href',tweet_url);
   };
   
   // Call step #1 to start the sequence
   lookupCall();
}

Demo

Remember to share this tutorial if you like it!

A Short Story of HTML

Daniel Pintilie — Wed, 28 Jul 2010 09:00:53 +0000

This post is a custom theme design post, please visit the post for the best appearance

The history of HTML is a tumultuous series of teaches-in, many disputes and hard work of the specialists…The results? Sounds maybe too great, but I afraid it is true, HTML has a great role in the evolution of the Homo sapiens sapiens to Homo digitalis.

First of all, what does “HTML” stand for and what is its role?

HTML is the acronym for HyperText Markup Language and it is the main language used for creating websites. It impresses with its short but tumultuous history which is linked with the evolution of the Internet. Nowadays the subject “HTML” is very commented upon due to the implementation of new standards, in fact a normal evolution of this language which has reached its fifth version- HTML5.

Who invented HTML and what was the initial purpose?

We all know that Switzerland, more precisely Geneva is the home of CERN –the European Laboratory for Particle Physics (Conseil Européen pour la Recherche Nucléaire, in French) and it’s there that the “Experiment of the Millennium” took place, an impressive event that attracted a lot of people, a large part of them seeing the experiment and the place as the beginning of the apocalypse. Anyway, I do not want to comment on that, what’s relevant is that this is the birthplace of HTML.

Tim Berners-Lee is the father of HTML even if in he had some precursors that stressed the large possibilities of the hypertext (Wikipedia says that hypertext is “text displayed on a computer or other electronic device with references to other text that the reader can immediately access, usually by a mouse click or key press sequence”). In 1989 he invented the HTML as an easy way of changing information between scientists and the success of it was still moderate. Tim initially came up with a list of only 20 tags, inspired from SGML but what stands out and impresses is that thirteen of them are still present in HTML 4.

HTML 1 (many designers/programmers didn’t see it as being a version)

It didn’t allow a complicated page structure, but was enough to create one. As all the beginnings the thing moved very hard with many efforts on the part of the developer and his associates. The initial concept was released at the end of 1990 and its specifications almost a year later. In 1993 HTML standards became the base of Mosaic- the first browser.

Editorial comment: Should we use the term “HTML designer” or “HTML programmer”? It it possible for to call “HTML designer” because it’s a markup language and we create and modify HTML documents which is displayed for end-users. It is also possible to call “HTML programmer” because HTML comes along with many of tags, elements, attributes… and the data types such as script and stylesheet. We all know that not all web designers can work well with HTML.

HTML 2

Many large companies underestimated the power of hypertext but slowly HTML standards became widespread. Because there wasn’t a group to take the reins of HTML and methodically submit future tags, everything degenerated into a Tower of Babel. In July 1994 HTML2 was released, an improved version of HTML which was created with great efforts with the help of worldwide contributors. The collective that developed the language undertook a titanic effort to pay attention to all suggestions from all around the world. In response to this unnerving situation, in the same year the World Wide Web Consortium was founded being headed by Tim Berners-Lee. In 1995 new tags as “bgcolor” or “font face” were implemented; I chose these tags on purpose to emphasize the level reached…we can say that the difference between the initial version and the situation in 1995 was huge.

HTML 3

The Internet evolved and that implies an evolution of the HTML. W3C allowed new improved versions of HTML with new tags and new possibilities. Dave Ragget brought an interesting version with a lot of cool tags and good improvements but because of the slowness with which browsers rendered these, it was abandoned. The HTML 3.2 is the most powerful version of this series and before its release it was reviewed by the W3C but also by the most important browser vendors -Netscape and Microsoft.

HTML 4

The entire year of 1997 was dedicated to the new version HTML4, a major evolution from the previous editions. HTML4 has another valuable tool that brings many new opportunities to designers: CSS- initially wasn’t considered so important but nowadays is as important as HTML itself. Another interesting event is the evolution of browsers: Microsoft implements almost all the tags and Internet Explorer became the users preferred browser overshadowing Netscape which was brought to its knees. In April 1998 HTML 4 was certified by W3C and the future was bright.HTML has an “enemy” called XHTML (Extensible HyperText Markup Language) and from ’98 till nowadays the fight was grim but with benefic effects for Internet users.

HTML 5

In January 2008 W3C released the working draft of HTML 5 and the fight HTML and XHTML seems to be won. The majority of us know the possibilities of HTML 4.01- the latest version but what are the new features of the fifth version?

My opinion is that this version will bring many improvements and we should expect probably a few years of implementing until we’ll see how designers handle the new possibilities. One of the most intriguing tags will be that allows the viewing of videos without any plugin or flash; the discussions aren’t finished but surely is a novelty of the next version.

Other interesting tags are the ones which allow you an easier handling of documents:

article
aside
nav
section
header
footer
… and so on.

The names of the tags are self-explicatory for their actions; these will be the guns of the future developer. The number of tags in this edition is probably greater than previous even if many tags will disappear as: basefont, big, font, s, strike, small, b, I and so on.

The HTML5 came with more tags but there are a lot of problems and it is very hard to make a decisive affirmation because tomorrow can bring about a whole new situation. A single fact is sure: that this version is studied by all the companies and developers and the result can only be an impressive leap in the continuous evolution of the web, Internet and design. In the complete standardization of HTML another factor will have a great contribution and will have its role: CSS3.

Incase you missed:

The good news is that the new version of CSS comes together with HTML 5 and for designers this is a great chance to put their creativity to work. Hope the implementation won’t take much time and that we will see the new HTML5 websites shortly.

Photoshop Tutorial: Create a Stormy Harry Potter Environment Effect

Richie Thimmaiah — Mon, 26 Jul 2010 11:30:51 +0000

In this tutorial, we will learn how to create a similar effect we see in the Introduction clip of Harry Potter Series. We will learn how to effectively use the Layer Effects (Bevel) and apply a pattern overlay to get the desired stony feel. We will do add some cloud elements; play with the background layer and the cloud filter to bring forth a stormy environment. Finally we will use the photo filter adjustment layer to add a finishing touch to the image.

We will learn to use the Level Adjustment tool and create fake rain using the right blend modes. This is quite an extensive tutorial but the end result is impressive and bold!

Preview Download

Tutorial Requirements:

Tools used: Photoshop CS4
Duration: 45 minutes (approx.)
Difficulty: Intermediate (Basic commands must be known)

Step 1

Create a new document. Set the dimensions as 1920 x 1200 or whichever fits your screen size. It is always wise to choose a bigger dimension. Once you’ve created your document, fill the background with Black color (#000000) by using the Paint Bucket Tool(G). This tool can be found on the left toolbar as shown below.

Press D to set the default background/foreground color.

Click to enlarge.

Step 2

Download the “free” Harry P font from Dafont. (make sure you read the license before attempting to use it). Unzip the Package and double click on the .ttf file to install the font in the Windows folder. (I’m not sure how to install fonts on a MAC).

Write any text you desire. In this tutorial, we shall use the text ‘Harry Potter and the AEXT Magazine’ for obvious reasons

Set the text color to White(#FFFFFF) and adjust the font size proportionally as shown in the image below.

Click to enlarge.

Note: Make sure the individual words are in different Text layers. This helps you to adjust and position them independently.

Now select the 4 text layers and Press ‘CTRL + G’ to group them and name this group as ‘TEXT’ in the layers palette.

Step 3

Next, we will add a few effects to one of the texts. In this case, I have chosen ‘HARRY POTTER’. Double click on that layer in the ‘TEXT’ Group to open the effects option. Click on the ‘BEVEL & EMBOSS’ to apply a bevel effect to the text. For giving a chisel (carved effect) feel to the text, we need to use a high degree of bevelling. Use the parameters shown below. You can adjust it by experimenting with the appearance and set to those values which suit you best.

Uncheck ‘Use Global Light’ to make other effects (lighting and shadows) independent of the light source used in this effect.

Check Anti-aliasing to reduce the pixelated distortion effect at higher resolutions.

Use a Gaussian Gloss contour graph from the list.

Click on ‘CONTOUR’ to apply shiny chrome feel thus adding an element of reflection to the type. Use the anti-alias filter here again.

Click to enlarge.

Step 4

Let’s add a stone like appearance to the text. If you have seen the movies, you must have noticed the stone-built castles and schools. Such an appearance gives a medieval type look which is what we are intending to achieve.

Select ‘PATTERN OVERLAY’ to add a pattern over the text. Click on the tiny arrow beside the thumbnail to select other patterns from the drop-down menu. Choose ‘FIBERS 1’ from the available list. Set the opacity levels to around 60%.

Click to enlarge.

Step 5

Now, We continue to apply this effect to the other text layers in the group. To do this simply follow this procedure:
Select the text layer which we modified just now and right click on it and select ‘COPY LAYER STYLE’. This will copy all the effects/style previously applied on the text layer (in this case, the text we chose is ‘HARRY POTTER’).
Now, select the remaining text layers by holding CTRL and right click and select ‘PASTE LAYER STYLE’ to apply the same effect onto them. You can see the image below and follow the steps.

Click to enlarge.

You can see the change in appearance of the other texts too. This is a very handy tool if you have so many similar effects to apply and in case you forgot the parameters.

Step 6

Now, add a stormy background with just the default features available in Photoshop. Create a new layer above the ‘TEXT’ group and name it “CLOUDS’. The key to getting a stormy effect is to choose the right background and foreground color combination. Let’s set the foreground color to #2b3536 and the background color to #8d9396.

Now add a Cloud filter by going to Filter>Render>Clouds.

Set the blending mode of the ‘CLOUDS’ layer to ‘OVERLAY’ and also make the ‘background’ layer invisible by clicking on the tiny eye in the layers palette. Take a look at the image below for reference.

Click to enlarge.

You may also notice the text layer got a bit darker and added a little bit more depth to the image.

Step 7

As you may notice, the clouds are a bit bright (or dull in this case). So let’s adjust the Levels of the ‘CLOUDS’ layer by going to Layer>Adjustments>Levels. This will allow you to independently adjust the bright and dark areas of the image. So, move the input level sliders to match the one shown below. You can also fill in the values directly in the spaces shown.

As you move the sliders, you will notice the gradual change in the levels of the image.

Click to enlarge.

Step 8

The words other than ‘HARRY POTTER’ seem a bit overdone. So, you can go back those text layers and adjust the bevel and contour to fit as per your satisfaction. I did some adjustment with the lighting as well.

Click to enlarge.

Step 9

In this step, we will add some rain to the environment. Create a new layer (CTRL+SHIFT+N) and fill it with #000709. Add a noise filter by going to FILTER>NOISE>ADD NOISE. Set the distribution to ‘Gaussian’ and a ‘Monochromatic’ coloration. Add the amount of noise to around 12%.

Click to enlarge.

Step 10

Now, add a Motion Blur effect by going to Filter ->Blur ->Motion Blur and a add set an 18px blur at an angle of 55 degree.

Click to enlarge.

Step 11

Set the blending mode to ‘Screen’. This will make the parts (pixels) of the layer covered in black to become invisible. So, now we have a nice rainy effect. You can play around with the levels of this layer to get a darker appearance.

Click to enlarge.

Step 12

Now, it is time to add some more distinct clouds. Download these cloud brushes from Qbrushes and unzip them in a folder. Create a new layer underneath the ‘TEXT’ Group and name it ‘clouds’ and put the layer in a group as we will adding several clouds in different layers. It is always better to group similar layers. This way, you can keep things organized.

Click on the newly created clouds layer and select the Brush Tool by pressing ‘B’ on your keyboard. You need to add the downloaded brushes to the default set. So, click on the tiny arrow to reveal the drop down menu and select ‘Load brushes’ and add the ones you just downloaded.

Select a few of the brushes and add them around. Play with the opacities a little. Create more layers, add a few more clouds (different ones, obviously) and vary the opacities. Finally, you must end something similar to this:

Click to enlarge.

Step 13

Now to add the shiny lens flare effect. This is really one of the easiest ways to add shine to any element. Start off by creating a new layer above the ‘CLOUDS’ layer (the one created earlier) and using the Rectangular Marquee Tool, select an area and fill it with BLACK.

Click to enlarge.

Step 14

Go to Filter -> Render -> Lens Flare and add a 105mm Prime lens flare with a brightness of around 80%. The direction doesn’t matter as we will need only the central area of the lens flare.

Click to enlarge.

Now, set the blending mode to ‘Screen‘ and position the lens flare on the top of the letter P using the Move Tool. Bring down the opacity of the lens flare to around 30%. Select the ‘Eraser Tool‘ and set the hardness to 0% and erase the boundaries of the lens flare, leaving only the central light source.

Step 15

Put the lens flare layer in a group as we will be creating a couple more.

Click to enlarge.

Step 16

Duplicate the Lens Flare layer and throw them around the other letters. Position the lens flares at a relatively higher level as the shine appears wherever the light hits first on a 3-dimensional object. The final result must look similar to the image shown below.

Click to enlarge.

Step 17

Let us make the sky even more dramatic. Duplicate the ‘CLOUDS’ layer (the one with the clouds filter) and set the blending mode to ‘Color Dodge‘. This will illuminate the brighter parts of the image such as the white ones. The end result is a more dramatic version of the sky.

Also, I made the background layer visible by clicking on the eye and set the opacity 30%. This gave it an even darker look.

Click to enlarge.

One of the most useful features in Photoshop is the ability to add Adjustment layers. These layers are nothing but pre-defined filters which are applied on to the image but will cause no harm to the pixels of the image. The underlying image remains undisturbed but the filtered output is modified. Click on the tiny circle (half black/half white) which is underneath the layers palette to open up the Adjustment Layers.

Step 18

Add a Photo Filter with Deep Yellow coloration. Let the density stay at a default 25%. You can try the other Photo Filters too. Each one gives a different look based on a specific type of environment.

Click to enlarge.

You can stop at this point as we have created the effect we initially aimed for. I thought of adding a Vignette effect to the whole image to give an added lighting condition. If you feel the need to add it, and then go forth with this tutorial else you can stop at this point.

Step 19

Create a new document with the same dimensions of the previous one. Create a new layer and fill it with WHITE. Go to Filter -> Distort -> Lens Correction and apply a lens correction filter with the values shown below. You may experiment around with the Vignette amount by moving the slider back and forth. This allows you to add a depth to the effect.

Click to enlarge.

Now, copy the layer and come back the older document (HARRY POTTER) and paste the vignette layer above all the other layers and set the Blending mode to MULTIPLY. This blending mode makes the lighter parts of the vignette layer to become invisible. You can read more about the science behind the Photoshop Blending modes here.

Click to enlarge.

I also tried to create the original GOLD bevel which is used by the HARRY POTTER movies. There is not much to worry here but to play around with the GRADIENT LAYER. Double Click on the TEXT Layers and apply these Gradients. You can also download the gold gradients to make your job easier.

Click to enlarge.

The final image with the golden gradient will look something like this below.

Click to enlarge.

That’s it! We have learnt to create a stony BEVEL text effect and add a stormy environment to give a dramatic feeling to the eyes. You can also add a few lightning brushes to make it look even more realistic. It’s all up to you to experiment!

Promote Your Portfolio and Get 3000+ Graphic Elements from Trendypacks

Lam Nguyen — Thu, 22 Jul 2010 22:32:51 +0000

Our friends at Trendypacks are offering more than 3000 graphic elements for our readers. Trendypacks is a graphic design company which offer design elements such as: vector packs, photoshop brushes and psd files that helps you to create your awesome designs in minutes! By entering the contest, you will have a chance to be a winner who can download special design elements pack, called Infinity Design Pack. You would have a second chance to be one of 10 readers to download their single packs at your choice.

How to enter the contest:

Infinity Design Pack is a collection of vector graphics, photoshop brushes and psd files. With Infinity Design Pack, you will get access to ALL products listed on TrendyPacks.com (more than 3000 graphic elements), you will be able to download the entire collection of vector packs, brushes packs and psd files + bonus free updates with their products for a period of 6 months.

It’s easy as 1 comment and 1 link

Drop a comment here included a link to your portfolio.

Enter the contest to receive thousand of design elements and it’s also a great way to promote your design works. The contest is not based on how good your portfolio is, so just enter it at your enjoinment.

Entries will be accepted up until August 5, 2010, a winner who win Infinity Design Pack included 3000+ Graphic Elements will be announced the August 7, 2010.

In case you are not lucky enough, we have up to 10 single design element packs for 10 other readers. Your winning packs will be your own choice: one of Vector Packs, Brushes Packs or PSD Files.

Here you go!