www.netsi.dk » HTML5

YouTube som din video base, en rigtig god idé!

netsi — Tue, 03 Jan 2012 09:16:35 +0000

Kort om video på nettet

Hvis du har nogle videoer som du ønsker at dele med venner eller kunder så er YouTube bestemt et godt bud på et sted at gøre det. Du opnår mange gratis muligheder, og Google er jo bestemt ikke en dårlig “partner” på det felt!

Her er et par af de features som jeg mener er guld værd – og der er flere som ikke er nævnt!

Man kan se og uploade til YouTube på mange måder

Om du sidder med en iPad, en Windows baseret PC eller en Apple iOS computer så kan du uploade dine videoer til YouTube. Du kan navngive, beskrive, tagge og generelt kontrolere hvordan dine videoer skal fremstå på nettet. Dine videoer bliver søgbare, hvis du giver lov til det!, og de bliver relateret til lignende videoer.

Videoer fra YouTube kan afspilles på næsten alle devices, lige fra mobil, over “pads”, moderne TV’er (i stuen hos folk) eller på computere. Du skal ikke gøre noget for at konvertere til forskellige video formater – det sørger YouTube for. Dine venner kan synes om dem, gemme dem som deres favoritter eller dele dem f.eks. på Facebook.

Du kan få din egen video kanal, geotagge dem og se statistik over hvordan dine videoer er blevet anvendt, set eller delt. Hvilke type brugere og hvor kommer de fra? Hvor mange gange er din video blevet set, og så videre…

Du kan nemt dele dine videoer fra din hjemmeside, du kan e-maile den til venner eller kunder, alt sammen på dit eget sprog.

Jeg vil derfor anbefale at man får sig en konto på YouTube og bruger det til at gemme sine videoer – det er jo også en god måde at have backup i “skyen” af ens videoer. Se disse screenshoots fra min youtube konto (http://www.youtube.com/netsi64).

Screenshoots fra min konto

Når folk ser videoen

Her er et eksempel på en video jeg har lavet ved hjælp af min mobiltelefon og en app som kan optage “time-lapse” video. Time-lapse er hvor man tager et billede med et givet interval (f.eks. 1 sekund) og så afspiller det med 25 billeder i sekundet. Det giver en morsom effekt, her er det f.eks. en køretur til Aarhus fra Løgten – det tager så 0:21 minutter!!

Rediger oplysninger

Det er så simpelt som at klikke “Rediger oplysninger” og man er igang med at kunne redigere de oplysninger som hører til videoen. Det betyder f.eks. at du kan uploade først og tilføje relevante information senere.

Folk kan iøvrigt kommentere og rate dine videoer. Noget som ja, selvfølgelig er gratis.

Statistik/analytics

Der er ret professionelle statistiske oplysninger som kan være ret interessante at se. Google har styr på det og man føler sig rigtig godt dækket ind på det felt.

Mange andre muligheder

YouTube er udbredt og kendt af mange, selv TV-stationer viser klip derfra. Hvis du bruger YouTube professionelt er der også den fordel at mange CMS systemer integrerer godt til det, der er mange webudviklere som kan hjælpe dig og nettet bugner med gode vejledninger og råd til denne state of the art video tjenste.

Så jeg kan kun anbefale at du bruger denne fantastiske gratis service fra YouTube.

Iøvrigt…

Skulle du nu sidde og have fået lyst til at se ovennævnte video eksempel så kan du se den her – for Windows Live Writer, som jeg bruger til at blogge med, kan selvfølgelig indlejre videoer fra YouTube gennem et par klik!

Min Time-lapse video–indsat nemt og smertefrit via Windows Live Writer…

Relateret indhold

Video for everybody generator
Et rigtig godt gratis video konvertering program: Free Video Converter
Google YouTube player demo – hjælp til udviklere der ønsker at indsætte YouTube videoer i deres HTML.

Color palette generator

netsi — Tue, 15 Nov 2011 14:24:19 +0000

http://www.cssdrive.com/imagepalette/index.php

This is a cool webapp where you upload an image and the colors from the image is converted into a number of colors.

That way you can extract tones and colors to use on a webdesign.

Snippet: Javascript – Extend Object with toParams()

netsi — Tue, 15 Nov 2011 08:25:44 +0000

Often you need to do AJAX XHR calls, where you send information to a webserver to get information back. This snippet will extend Object with a method toParams() which will return a string ready for sending to a webserver.

   1:  Object.prototype.toParams=function () {

   2:    var sParams='';

   3:    for(a in this) {

   4:      var val=this[a];

   5:      if(typeof val!=='function') {

   6:        sParams+=((sParams!='')?'&':'')+a+'='+encodeURIComponent(val);

   7:      };

   8:    }

   9:    return sParams;

  10:  };

11:

  12:  // Example of use

  13:  var test={ 'a': 1,'b': 'hello værden  ' };

  14:  test.toParams();

  15:  // Return valud from test:

  16:  // a=1&b=hello%20v%C3%A6rden%20%3A-)

Introducing “Xara Designer Pro 7”, all you need to work with graphics!

netsi — Sun, 26 Jun 2011 14:47:58 +0000

Xara is the name of a British company which has been living in the shadow of Adobe for many years with its all-in-one graphics application. This version has been around since ARM was a custom chip running a desktop computer called Acorn Risc PC. Perhaps this is a good thing to relate to, as ARM now is properly the most successful chipset around in the world, taking every from Google Cromebooks over Apple iPads, Android “pads”, TV sets and even windows 8 by storm. The same should happen to this graphics application called Xara Designer Pro 7 ! It’s fast, rich featured, easy to use, compatible with other main graphics packages like Adobe Photoshop, it produces SVG, webpages and I could go on! You should at least go and download a free trial from: www.xara.com!

Vector, pixel, HTML, presentation, video, 3D and DTP…

The program has many basic things build into one application, I like that. Everything you create in it is vector based, except of cause if you work with pixel based elements like photos. At my work where I implement websites in CMS systems I use Xara for many types of graphics operations. I might design buttons where I get automated scaled versions which also have mouse hovering and selected states. They are vector based, so scaling them up and down is very easy. I can use theme colors which makes it possible to reuse them on other websites. I can add popup layers to them and links. I simply export it, and Xara Designer Pro 7 produces a HTML page in seconds containing exactly what I need in the CMS system.

At a later state when I need to document the use of the website I can create a manual with working buttons inside it, the same buttons as I just used on the website. I can even export the pages to PDF, giving the customer both an offline manual (PDF) and a full featured HTML website with the documentation.

A webpage with some of the enhancements

I have collected some of the features on two webpages. They of cause have been created in Xara Designer Pro 7!

Some of the new enhancements

Xara Designer Pro 7 has been packed with a lot of enhancements to the way that you use the program. Many of them relate to the program trying to a more “mainstream” Windows 7 application. For instance the tabbed document windows and the fly-out and docking option for the gallery system. Those enhancements are nice to new users but for me not essential, because I know my way around the application with or without such standard windows 7 UI.

Xara Designer Pro 7 offers new paste options allowing you to paste different properties to objects. If you for instance need one object to have same size as another you simply select the first object which is placed where you want to position both object, press Ctll+C. Now a lot of information from that object is on the clipboard and you can select any other to copy various properties from it onto other objects. In this case, the position. Some of the many paste options which Xara Designer Pro 7 now offers are:

Paste replacing selection
Paste format/attributes. This will apply relevant attributes from object on clipboard to selected object. For instance color, shadow or opacity.
Paste opacity mask. You can use any object as an opacity mask. This for instance allows you to have Text appear as a mask on a photo. Opacity masks in Xara Designer Pro 7 will mask out the object is placed on – black colors will give 100% masking, and white no masking.
Paste position; change the position of the selected object to that of that of the object on the clipboard. If however you have several objects on clipboard it gets a little tricky. I experienced that it just moved the object outside the canvas – not logical.

Another great enhancement is the ability to edit groups in a separate window, allowing you to focus on the elements in the group. You simply double click on the group and a new “inside editing window” is opened. I like that feature.

Some of the existing functions have been arranged differently or made easier/quickly to access. For instance the alignment function can now be accessed directly by right clicking on your mouse. Small changes, but I guess that it all adds to Xara Designer Pro 7 being even faster to use.

New features

Live copies – you can have objects where changes to the properties of each copy will apply to all the live copies of the element. Size, rotation, opacity and other properties however will be local to each copy. An interesting new feature which I for one am looking forward to use.

Magic snap – visual help and snapping when aligning objects allows you to create good looking designs much easier. Take a look at this example:

The alignment of the text above was easily done, as Xara Designer Pro 7 showed lines indicating where I could align two objects. This makes a design better in balance. What the illustration also shows is that I add a mouse over effect with a popup layer fading in. Xara Designer Pro 7 can save anything which you produce as webpages and in the HTML you can easily add things like mouse over, links, menus, and popups. Xara Designer Pro 7 has added transition effects and other nice things.

Photo magic erase allows you to easily remove elements of a photo in a way which makes look like the element was never there. This is an example of the pixel related editing of Xara Designer Pro 7. It appears to work like similar features in other pixel based application like for instance Adobe Photoshop, but actually it is not working on the original image and you can work with it as if it was vector based changes.

As you can see below the way that Xara Designer Pro 7 created the magic erase effect was in fact to slice out part of the photo and fill it with pixels making the element disappear. I have selected the slice, added a glow shadow (which can be added to any element in Xara Designer Pro 7! and is editable at any time) and applied opacity. You can then see through the sliced element and the diapered part of the original picture is again visible.

And a lot more…

Many other things have been added especially to the HTML part of Xara Designer Pro 7. I suggest that you see the videos and press F1 (Yes, windows help – it’s okay to use it!). Locate the “What’s new in Xara Designer Pro 7?” and spend some time reading it and seeing the examples. I simply could not find the time here to mention all of them. But a short list of new features I can offer:

More widgets. Facebook, Google maps,

New to Xara Designer Pro? Some advices for you…

If you have not tried previous versions of Xara Designer Pro you have a lot to look forward to! Of cause there will be a learning curve, but just visit some of the many online resources – I have listed some of them below. Actually this is one of the areas where I find that Xara is taking good care of its customers – take this statement for instance:

From e-mail: “Information about Xara Designer Pro 7” which you receive when you have registered your Xara product.

“Don’t miss the intro movies on our website (or click the Movies option in the Help menu). There are over 100 movies covering features and techniques and they are a great place to start learning about Designer Pro.”

Do not hesitate to ask “stupid” questions on the various talkgraphics.com forums – we were all beginners at one time

Open and take a look at all the examples included in the gallery:

An example is this extreme drawing, all vectors:

Remember that any drawing you do can contain pages, layers, objects which can all be exported to various formats, including complete HTML pages, PDF files, Adobe PSD files, SVG. You can publish directly to an FTP site. You have unlimited undo/redo, auto save (backup). The undo/redo history is saved together with your document. Xara is extremely good at packing its files – I have tried to load a JPEG (from Adobe) into Xara Designer Pro and save it, leading to file size much smaller than the original JPEG file!

You also get a lot of “free” fonts and clipart, website templates and ready-to-use elements like buttons and navigation elements. Xara supports many color modes, from HEX to CMYK and Pantone. You can create serious print related output including color separation handling. You can easily use Xara Design Pro 7 as a DTP program! The advanced way you can let text flow from textboxes to textboxes and around object is so cool. And yes it works fine if you export your work into a webpage! Xara produces valid HTML and will not change your text into graphics! Oh and for us website developers: Ctrl+Shift+L will give you instant Lorem Ipsum text I love it!

I know it’s nerded: but build in Lorem Ipsum is a feature well worth mentions:

Ad veniam ad minim aliquip, voluptate cupidatat. Sint ex velit in. Sunt enim pariatur sit non, dolore, ut occaecat consequat non ad non aute ullamco sed aute excepteur. Enim dolore exercitation ex nisi cupidatat culpa.

Navigation bar builder making it very easy to construct navigations bars:

Two panorama creating tools – the build simple and the advanced Magix PanoramaStudio 2. Here is a simple example from Aarhus, Denmark. Only 4 images were used.

The Magix PanoramaStudio 2 can even generate an interactive panorama using Flash and HTML. The above view can be seen online here: Aarhus, Denmark

I could go on… But visit the links below to see good tutorials!

Conclusion

With the release of Xara Designer Pro 7 the world’s best one-in-one graphic package have just gotten closer to being perfect! As we all know nothing is perfect, so I can’t call it perfect. There is still room for improvements, but the history tells that Xara is listening to its users, and follow trends in the world surrounding the Xara world. With internet being a very powerful media to communicate and emerging technologies like the CANVAS element of HTML5 and the powerful features of CSS3, my guess is that Xara Designer Pro 8 when it comes will be much more focused on bringing content to the new taking into account things like CSS3 based gradients, round corners, custom fonts and transitions. The current version Xara Designer Pro 7 have put a lot of effort into this, and to Xara Designer Pro 7 super users who understand this application and all it offers like Wizards for internet the sky is the limit.

Every time – actually ever since my first version of Xara Designer called Artworks – I have shown people this application to my friends they have been blown away and impressed by its abilities, features, ease of use and speed. Nothing has changed there in Xara Designer Pro 7 – everything has just gotten even more smart and nice to use!

I think that Xara Designer Pro 7 deserves even more attention, and I would like to end where I started: I hope that Xara Designer Pro 7 like the ARM chip will get the deserved success in the years to come! I am looking forward to seeing the Xara Designer Pro run on an ARM based Windows 8, bringing the old palls together again!

New HTML5 testing section on my website

netsi — Mon, 31 Jan 2011 22:51:43 +0000

I started up a new HTML5 testing area on my website today. It will be an area where I will show/test some features of HTML5. I will try to cross post a small post here on my blog, allowing you to keep track from here when I post new demoes. Also you are welcome to post your comments here on my blog for each example I upload.

The first one: a simpel animated pie-countdown

Google Chrome Frame – a quick path to HTML5?

netsi — Sat, 17 Oct 2009 13:39:34 +0000

HTML5 offers so many interesting new features – like the CANVAS tag which is a area on your page where you can draw something. I have always liked graphics and would love to be able to draw directly on the client – something which not really was possibel throuh SVG. SVG was a great idea, but generally did not get wide spread (for many reasons).

Google Chrome and other browsers allready support (part of) the HTML5 standard, and now Google has made something called “Google Chrome Frame” for Microsoft Internet Explorer (MSIE) . In short it will allow you to use your MSIE browser but through a plug-in get access to HTML5 elements/features inside you MSIE browser.

I will try to download it, and then comment here as I go along. You can too – find the plug-in here: http://code.google.com/intl/da/chrome/chromeframe/

Feel free to comment here on your experiences with this plug-in!