The syntax

You can see links to pages containing more info, but the syntax is “user-select” with vendor prefixes. The values are “none | text | toggle | element | elements | all | inherit” according to a draft specifications on w3c. I am not sure if Opera actually has implementer this feature.

Example

This block you can select (default action).

This block you cannot select as it has the class “unselectable” applied.

You can select the text but not the image, it has “textOnlySelectable”

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

The code

.unselectable {
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none; 

        -ms-user-select: none;
        user-select: none;
}

.textOnlySelectable {
        -moz-user-select: text;
        -khtml-user-select: text;
        -webkit-user-select: text;
        -o-user-select: text; 

        -ms-user-select: text;
        user-select: text;
}

Links

• css-info.net
• stackoverflow: A question about this feature is answered
• user-select at Mozilla Developer Network 
• IEBlog writes about “Controling selection with CSS user-select”

The front page – landing page at dribbble.com

Landing on dribbble.com you view the most popular websites – I am not sure if it makes sence as a prime filter, cause what kind of search angle is that? Ofcause you get a view of (in theory) great websites, even if you probertly will have other preferences like “Give me somthing blue”, not “just” “give me something popular”.

The colored angle  – sort by color

Each company has its own color (s) – what is more natural than to take inspiration based on the same color? If you’re an open person and want to travel with colored glasses, socan it dribbble.com.

Buckets – you may call it “categorized”

Websites sharing the same categorize, for instance “UI” have been collected in “Buckets”. Even within buckets you can see the tags found in the bucket.

Other filtering options

Other that the filtering options described above some other ways of filtering the content also exists:

• Everyone
• Debuts
• Playoffs
• And many tags, like: Live and iOS

From Frontenders DK – other inspirotainal sites for you to explore

This blog post has its root in a facebook group “Frontenders DK” which roots in Denmark. I am active in this group and participate in the activies happening in the Aarhus branch of Frontenders DK. It is a group of active frontend developers sharing knowledge and meeting up from time to time.

This blog post was created using a post by “Kristoffer Kjelde” send as part of a thread in the group created by Brian Christensen.

• Onepagelove.com (subtitle: “The ultimate showcase of one page websites”) suggested by Brian Christensen
• Books “webdesign index” suggested by Henrik Oldenborg
• www.webdesignserved.com (subtitle: “Curated work from leading creatives on Behance”) suggested by Kim Dolleris
• http://box.mepholio.com/ (subsite: “Websites & collections”) suggested by Nikki R.D. Strømsnes

I have found and testet a jQuery 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”

Part of example layout template:

<div id="left" class="dwcontent" title="Left content" settings="paragraph:left.html">We do not want module content here, for some strange reason</div>

<div id="main" class="dwcontent" title="Main content" settings="paragraph:main.html"></div>

<div id="right" class="dwcontent" title="Right content" settings="paragraph:right.html"></div>

This will create a three column page. Imagine that in the left col we do not want the user to be able to add paragraphs which renders module output. We can do that by adding tests for the ParagraphContainer value in the paragraph templates like this:

Part of example paragraph template

<!--@If(ParagraphContainer!="left")-->

output your content here

<!--@EndIf-->

The above test will ensure that no content will be returned if you use the paragraph in the left coloum. Combined with a selected default paragraphtemplate (settings="paragraph:left.html") as you can see in the layout file above, will help ensuring that editors will

a) Get a head start with choise of template (a default will be selected for them, related to which content area they add content to

b) No paragraph templates outputing module content can be added to the left coloum

A wish for improvement to the Dynamicweb template system

This leads to my wish for an improvement in the Dynamicweb template system: Please add two tags from the paragraphlevel template to the module template:

a) ParagraphContainer – so that the module template will be aware of in which layout placeholder it is rendered

b) ParagraphName – Which paragraph template is used? Allows the module content to be controled by the paragraph used for it. This would actually also be relevant to add to the paragraph template too.

Jeg har fundet et godt program der findes i en gratis version: “Tversity” som du finder på http://tversity.com/ er nemt at downloade og installere.

Det kan streame indhold fra din computer til dit TV, så billeder, musik og videoer er nemt at vise på dit TV. Ud over det kan den også streame indhold fra internettet. Som du ser ovenfor er der en række online video kanaler. Hvis du bliver glad for den gratis udgave og bliver træt af at blive mindet om at “det kan du hvis du køber pro udgaven” så kan du købe $ 39,95 – som i skrivende stund ifølge google er 220,47 kr. Det er jo efter min mening ikke et skræmmende beløb.

Find Tversity serveren via din fjernbetjening

.For at dit TV kan afspille streamet indhold fra din computer skal de være på samme netværk. På mit Samsung TV klikker jeg på “Media P.” og skifter så over til “Tversity” som kilde. Når jeg først har gjort det er der næsten uanede muligheder for at streame indhold! Lige fra YouTube til musik eller egne billeder på min PC. Mit TV er pludselig ikke længere begrænset af hvad YouSee sender eller det indhold jeg kan se gennem Samsungs apps. Det er sejt!

Mere om emnet når jeg får testet den… (og opgraderet)

Links

• http://tversity.com/
• Læs mere om dlna

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

About Google Picasa Templates

Google Picasa have support for exporting selected images or image folders to HTML (well actually you can export it into what you like, XML, CSV or….). It is a simple offline template system where you are given some simple tools like template tags, includes and loops. Read more here: Picasa Web Templating System (a copy of the domentation included in the Google Picasa application). Previously I have shared a flash based slideshow Google Picasa template, which you might also want to install: Netsi Cycle Template for Google Picasa

Example implementation

The above iframe shows example output from the Camera Picasa template. It should be viewed in its own window as only there you will se the very powerfull “responsive webdesign” which is one of the very cool features of HTML slideshows generated using Camera Picasa Template.

First step: You can download the raw version

Dowload and install the Camera Picasa Template

or on github:
https://github.com/netsi1964/Google-Picasa-Camera-template

Next step…

This is the first release of my latest Google Picasa template – Camera Picasa Template, downloading the zip file and following the instructions found in the read-me.txt file inside the zip file will make it possibel to get the same cool slideshow of your favourite pictures. I will return at a later stage with more information and perhaps a webapp which will let you configure all the many settings that the Camera slideshow offers. If you cant wait, take a look at the “settings.js” file, simple comments found in the javascript settings file will help you.

Links

• Netsi Cycle Template for Google Picasa
• Update information about the latest version of Picasa (3.9 at the time of writing).
• Google Picasa
• The slideshow which the template is based on: “Camera” from Manuel Masia from Pixedelic
• Publish your pictures directly to twitter from google picasa using tvivo button
• Face detection in Google Picasa 3.6
• Finally! Flickr reads geolocation from your images!
• Merging the information about friends on facebook to your Picasa contact database

<link rel="alternate" type="application/rss+xml" title="Your RSS title" href="The RSS URL" />

Thats all there is to it!

Other usefull information related to RSS

• If you create the feed remember til set the ContentType to “application/xml”
• You can also add an XSLT to transform you output on the client (see for instance here: http://www.dr.dk/nyheder/service/feeds/allenyheder) If you view the feed in Chrome it will be a transformed output, but it seems that Firefox will not transform the feed.

See the location of the people you follow on Twitter.

This page is a cool webapp which using Google Maps will show you where the people you are following on Twitter are located. Try it!

www.madkulturen.dk fra fødevareministeriet.

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 jQuery slider plug-in.

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.