www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Category Archives: jquery

The perfect tool for reference search and snippets?

Development involves using a lot of tools, apis, methods and documentation for such items is often found using your friend Google Search. Today I have seen a very cool tool for Mac OSX. Its called Dash, and its a free app found in the App store.

The cute logo of the Dash app

The cute logo of the Dash app

You can install the Dash app from the App store.
It is free but has a “Full version” which cost around
$ 5,- which I think is a very fair price!
You may also download it from the developer website.

What is it that Dash offers?

I must admit that my experience with Dash is sparse, and this blog post is only an introduction to the app. It does search in a lot of the wide spread apis from anywhere in your Mac OSX. It has – to mention a few – 5, ,  javascript, , UI, , XSLT, Perl, Ruby, NodeJS…

In the image below I have opened a document in my preferred editor “Sublime Text 2“. I want more information about the tag “section”, and as I have set up the short-cut “Shift+Cmd+$” in the OSX global short cut settings I simply mark the tag and press that key combination. Voila! Dash opens and have found some nice HTML5 documentation for the section tag, cool!

Dash offers integration to any Mac OSX app

Dash offers integration to any Mac OSX app

Snippets – cross app too!

It also offers snippets, which I have tried only a little. It seems very cool as it works anywhere allowing you to add “abbreviations”  for each snippet. So say you have a HTML5 boilerplate which you use a lot, simply paste the boilerplate into Dash, add some variables or an date place field (which will automatically insert current date when executed) and define say “html5bp. Every time you type that abbreviation it will be replaced with the snippet!

If you have any comments or experiences related to Dash please through a comment here on this blog post.

My small notes – updates

  • I would love to get “fuzzy search” like in
  • Seems that you cannot easily share found directly to say twitter, pity

Related information

Share

Wish for 2013: Let there be more HTML5 apps

One the things I hope for 2013 is to see more 5 based apps. As 5 evolves I hope that the features found in 5 based apps will make the developers prefer 5 more than native apps.

A little history – the epoch

I have never been a fan of Flash but I acknowledge that many very innovative and functional apps were created using Flash. Flash made it easy to develop cross platform apps which would run here there and everywhere. As I have not really developed in Flash I can only my thoughts about why it “suddenly” turned into something not fancy.

Apple did not let Flash into its IOS for mobile devices must have been one of the major reasons. I guess that Apple did not like that powerful applications could be build on there app store based devices. Apple is receiving a lot of money through the percentage they get when people sell apps through the app store. If developers could develop apps which were as powerful as native IOS apps it would be a thread towards their business model for IOS, I guess… Also they would have no control over how apps were distributed (sold).

Another angle is that the only way to develop apps in Flash would be using the tool from one company: Adobe. It would be a closed system controlled by one company – not good.

Native apps

Today we are seeing a lot of native apps which are coded to run on a specific OS. You can develop them using many development tools and also cross compile them so that they run on more than one OS, but often it is a relative low level language like C++ or JAVA. You will have to register and pay to gain access to get your app distributed for each OS. I think that it is okay that people have to pay for the handling and distribution of apps, as it involves some work doing that. Of cause you can discuss if the percent the distributer (Apple, Google and Microsoft) are charging could pay for this work, but I think that it is okay.

When you buy an app

Talking about smaller apps like those you can run on a mobile device like at phone or a tablet you normally can only use the bought app on that device. Like when I bought an iPad – I bought some apps which I really liked. At a later state I bought an Apple Mac Mini computer and discovered that the apps for the small mobile iPad were not available for my much stronger OSX based device! Why? Because the apps were written in a low level language for the mobile iOS! What? Can it be true?

, javascript and 3 apps, now!

That is why I hope to see developers go for modern HTML5, javascript and CSS3 based apps! Easy to develop, thousand of tools, millions of people know about those “languages” and it is cross device, cross platform apps! They run on smart phones, computers, modern TVs, tablets and many other places.

They are easy distributed, easy updated and with open source browser engines like webkit (which is implemented to run even in your TV) they run on so many devices.

As a front-end developer it also extends the areas where I can make a difference. The audience of my code is broadened and I can work developing on many other places than “just” websites. I could develop a TV app for the local community (which would also run any other place which understands HTML5, javascript and CSS3).

For now I have “invested” in a developer license for the Windows 8 market. Cause they accept HTML based apps! The apps will run on any device which runs Windows 8. That is actually also something I hope that the other players, Google and Apple will go for: Cross device thinking – no more: Just iPad or just OSX! Please!

Share

Test: jQSlickWrap jQuery plugin–wrapping text around irregular shapes

I think that it can look great if text flows around irregular shapes. Something which have been possibel for years on DTP (Desktop Publishing). We are getting the same effect here on the internet soon when 3 regions will be ready for release.

 

Testing SlickWrap jQuery plugin

I have found and testet a plugin which in a simple way adds such “knocking out” features to your webpages.

To the left you can see a test/demo page in which I have written about how you can use it and how I found the plugin.

 

 

 

Read and see the plugin in action here: “Testing SlickWrap jQuery plugin”

Share

jQuery quick start snippets

When you want to include in your webpage there is no need to type it in every time, the best practice should be reused. So here is a litle help for you: Two quick start snippets: One for and one for Visual Studio. You can find download links at the bottom, but first a few words and the code.

 

You should put your javascript APIs at the bottom just above the body end tag

If you put the code to include javascript APIs at the bottom of your webpage just above </body> your page will first load the DOM elements, aka the content of your page before any (timeconsuming) javascripts. This will make your page appear to load faster. Also the DOM tree will be ready and you can skip for instance wrapping your jQuery code in some “ready()” code. The DOM is ready for manipulating when your code is reached!

 

This is the basic javascript for loading jQuery from Google CDN. Using such Content Delivering Networks as Google has many advantages, amoung other that the API can be cached on the client across webpages. However if the CDN fails, you may want to have a fallback version locally (on the server). The snippets have this fallback, so you should download a version  of jQuery and put it locally. I have choosen not to use the “protocol relative-URL”. If you want to, you should just remove the “http:” before the line where jQuery is fetched from Google.

 

Here is the code outputted by the two snippets:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script src="jquery.1.7.1.min.js">\x3C/script>');
</script>
<script type="text/javascript">
    (function($, window, undefined) {
      // Your code here, put just above </body>
      // $ = jQuery
    })(jQuery, window)
</script>

 

I learned from the tutorial at net tuts+ Learn jQuery in 30 days about this way to include jQuery – I can higly reccomend that tutorial (its free!). The teacher Jeffrey Way is so cool!

Download

Sublime Text snippet “jQuery”: Download

Visual studio snippet: Download

Share

CV–cases: www.madkulturen.dk

Dette er det første indlæg hvor jeg kort beskriver noget jeg har været involveret i. Grunden er at jeg generelt glemmer at få kommunikeret hvad jeg egentlig går og laver i mit professionelle hverv. Jeg håber at kunne poste løbende eksempler på hvad jeg har gået og lavet.

www.madkulturen.dk fra fødevareministeriet.

 

madkulturen.dk

Slider i top af siden

Slideren i toppen lagde jeg også en hånd på. Der var tale om implementering ved hjælp af et standard slider .

YouTube kanal viser

Kunden ønskede mulighed for at indsætte en visning af videoer. Der forelå et design og et ønske om at bruge YouTube. Jeg var med i dialog om hvordan det kunne implementeres og det endte med et backend modul til Dynamicweb CMS så det blev meget nemt for ikke tekniske redaktører at indsætte videoer på hjemmesiden.

Min rolle handlede primært om frontend implementering af video visningen. Det gjorde jeg gennem XSLT transformering af de filtrerede data fra YouTube.

Kunden ønskede en op/ned funktionalitet som jeg udviklede et jQuery plug-in til at håndtere.

 

Se den live løsning.

Share

jQuery trigger() will not always fire naturally-occurring event

If you want to trigger (fire) an event on say a link with id=test from you can use the

jQuery(‘#test’).trigger('click')

which will simulate that a click event has occured and will execute any jQuery attached events. This is fine, but what if you have not assigned an jQuery event handler? You can simply call the native click() method on the element like this:

jQuery('#test').each(function() {
  this.click();
})

Share

Function: loadscripts(aScripts, callWhenFinished) – Loading scripts syncron

Sometimes you need to load some javascripts in a syncron way and then when they have loaded do something. This is exactly what I try to address with this function. It requires . It will take an array of URLs to the scripts (aScripts) you want to load-and-execute. After it has finished with that it will call an optional function “callWhenFinished”.

The code has XML comments which works with Microsoft .

function loadScripts(aScripts, callWhenFinished) {  ///
Requires jQuery. Will load the scripts specified in the Array aScripts one after the      other (syncron). After that has been done it will optional       call the callWhenFinishedFunction  ///
An array of script URLs which will be loaded an executed using jQuery.getScript  ///
After all scripts has been loaded and executed this function will be called  jQuery.getScript( aScripts[0], function(data, textStatus) {    aScripts = aScripts.splice(1,2);    if (aScripts.length>0) {      loadScripts(aScripts, callWhenFinished)    } else {      if (typeof callWhenFinished!='undefined') {        callWhenFinished.call(this)      }    };  });}
Share

Printing HTML pages, make screen and print appear the same.

When using external stylesheets on a webpage you can specify which “media” it should apply to. For instance see these lines:

<link rel="" href="Blueprint/screen." type="text/css" media="screen, projection" />
<link rel="stylesheet" href="Blueprint/.css" type="text/css" media="print" />

As you might allready have guessed the screen.css will be choosen for screen (read: browser) and projection mode. When printing the print.css will be choosen if you print the webpage. So far so good.

Some times you will have a specific page for print, which say will render only a stripped down version of your content and prompt the user with a print dialogue (using a javascript window.print() line of code). But when you see the page in the browser you are in “screen” media, and the style shown will be as defined in the screen.css. You may confuse the user as he gets a screen version ready for print – and printing it wil result in a version based on the print.css. I have made a based fix for this situation.

The page before and after the fix

The jQuery fix

The fix will disable any external stylesheets related to screen and make the print.css work on media types “all”. It is coded so that it will check for a “#print” added to the URL. So you should simply make the URL of the printversion have a “#print” in it. Here is the fix:

   1:  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
   2:  <script type="text/javascript">
   3:  /* STH: 2011-07-07 Make any stylesheets target for "print" media active on "all" media types (including screen)
   4:      Also disable any layouts for screen
   5:  */
   6:  jQuery(function() {
   7:    var bPrint = (window.location.toString().indexOf('#print')!=-1);  
   8:    if (bPrint) {
   9:      // The user wants to print this page
  10:      jQuery('link[media*="print"]').attr('media', 'all'); // Enable the print styling for all media types, including screen.
  11:      jQuery('link[media*="screen"]').remove(); // remove any styling related to screen
  12:    }
  13:  })
  14:  </script>

 

The fix above has a link to jQuery, you do not have to include it if you allready have jQuery on your webpage.

Share

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

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 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, , 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 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

See an example of the HTML that Xara Designer Pro 7 can generate

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 aligment lines makes it very easy to align elements

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.

The girl to the left have been ereased using Photo magic erease

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.

Xara Designer Pro 7 actually just adds a sliced vector element on top of the original photo to create the magic erease effect

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:

Many great examples can be downloaded - be inspired by them!

An example is this extreme drawing, all vectors:

Find this example vector drawing and try to zoom deep (around 28000%) to view what is hiding in the drawing

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 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:

The Navigation Bar tool

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 in action

The Magix PanoramaStudio 2 can even generate an interactive panorama using 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 and the powerful features of 3, 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 3 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!

 

Links
Share