Code & Technology Cocktail
Uncategorized
25
May
I just finished a technical demo for a customer when I got a very pleasant phone call to inform me that I would be on the Eurostar to London the next day for EPiServer training. The next day Nele, François and I arrived at The Office where we were introduced to our teacher Bevan Souster. We took some coffee and chatted a bit with the other participants from all over the world: our trainer used to live in New Zeeland, there were students from Scotland and Poland and there was also a colleague from LBi London. It seemed like this training would also be the perfect opportunity to work on our English accents. I really liked the international touch. I had just visited LBi New York during my holidays and now I met a colleague from our office in London. It’s always nice to exchange ideas in this global environment. After all students introduced themselves we kicked off with the EPiServer basics. Before this training I actually didn’t know that much about EPiServer so it was interesting to see what end users and editors could achieve with it. The last version of EPiServer also includes wysiwyg editing on the site, a great feature that editors see as a must have in modern CMS. Later we dived deeper into the core of the system. The team behind EPiServer made it easy to get started and gives developers a lot of tools, templates and a high level API to quickly build a basic dynamic website (with news items, google maps, …). The nice thing is that you get a lot of controls out of the box which take care of binding and other repetitive tasks. If you want to create more complex stuff the API will help you out. It’s also good to know that there has been already developed a lot by the community at epicode
From next week on I will be working on a real project at LBi London (can you feel the exitement!), so stay tuned for more EPiServer talk next weeks.
28
Apr
Creating a facebook share button is not that difficult but you can loose some time figuring out why an incorrect title, description or image is displayed facebook. There are a couple of tags that can describe your page. All those tags are listed on the Open Graph protocol page.
When you share an url, facebook will “download” that page and look for those tags.
There are a couple of ways to find out how facebook interpretes those tags (and how the share information will look on facebook).
- Paste the link in your status, you don’t even need to post it, the facebook linter will parse your link immediately.
- You can also send the link in a facebook message.
- Facebook Linter: http://developers.facebook.com/tools/lint/ (this tool will also clear the cache)
The Facebook Linter is very useful to see if facebook reads your meta tags correctly. If you get an unexpected result there can be a couple of reasons:
- You share a page that cannot be reached by facebook because it is protected (users can reach the page because they had to login first). Facebook will probably be redirected to an error page on your site or the login page. Solution: Do not share pages for which users should be authenticated.
- There is a typo in your meta tags. Solution: Correct the mistakes and use http://developers.facebook.com/docs/opengraph/ as a reference.
- You recently changed something but facebook still uses the cached version. Solution: Use the Facebook Lint tool http://developers.facebook.com/tools/lint/ this will clear the facebook cache for your page.
11
Apr
Adapt or suffer forever A big change in slicing these days is definatly the way we deal with rounded corners. Since CSS3 introduced the border-radius property, any block element (p, h1-h6, a, div, …) can be rounded down. Take a look at a recent project we’ve done at Belgacom. http://www.mijnbelgacomtvfilms.be/ How we did this? Not too complicated though … we need basic HTML, CSS and jQuery to make it all cross-browser compatible. Forget about background-images! Don’t even think about adding an extra div for top and bottom. It is getting old and we need to get rid of it right now.
Set up the HTML The navigation layer is a nice example of how we keep things simple, yet achieve a good result with rounded corners in the links and on the navigation panel.
In the index.html
Set up the CSS Note the class “.round10″ here since this is our magic one. The prefixes are used to target several browsers. Because not every browser supports “border-radius”, we need to make sure that we can target as many browsers possible with CSS. So some browsers chose to support it with their own prefix, while waiting for the standard to be approved. In the meantime we target these several browser-supports differently.
- -moz-border-radius (Mozilla aka FireFox)
- -webkit-border-radius (Safari, Chrome, Opera)
- -khtml-border-radius (Konqueror)
- -o-border-radius (Opera)
The -o- prefix might be obsolete but know it excists.
.round10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
.shadow {-moz-box-shadow: 1px 1px 3px #999999; -webkit-box-shadow: 1px 1px 3px #999999; box-shadow: 1px 1px 3px #999999;}
/* navigation */
#navigation {background-color: #000000; clear: both; display: inline-block; list-style-type: none; margin: 0; padding: 5px; width: 770px;}
#navigation li {display: block;float: left;}
#navigation li a:link, #navigation li a:visited {background-color: #67B4CF; color: #FFFFFF; display: block; float: left; font: bold 14px/120% 'Orbitron',arial,serif; margin: 0 2px; padding: 5px 15px; text-decoration: none; text-shadow: -1px -1px 0 #000000; -moz-box-shadow: 0 0 3px 0 #FFFFFF; -webkit-box-shadow: 0px 0px 3px #FFFFFF; box-shadow: 0px 0px 3px #FFFFFF;}
#navigation li a:active, #navigation li a:hover {background-color: #87CEEB;}
In the default.css
Cross-browser solution with jQuery This script works perfectly for rounding down block elements. It will calculate the necessary amount of pixels and background-color and append it to our DOM.
<head>
...
<script type="text/javascript" src="design/js/scripts.js"></script>
<script type="text/javascript" src="design/js/functions.js"></script>
<script type="text/javascript" src="design/js/jquery.corner.js"></script>
<link type="text/css" href="design/css/default.css" rel="stylesheet" />
...
</head>
In the index.html
If you keep all corners at the same pixel radius, you can target the classes in jQuery and the script will do most of the work. Else I advice to play with it a little bit. I’ll post a more advanced way later on.
//Once the DOM is ready
$(function(){
$(".round10").corner("10px");
});
In the scripts.js
Conclusion The benefit of slicing like this is huge. Since you don’t need to cut background-images anymore, you’ll be saving tremendous amounts of time. Also your code will be a lot cleaner. Less spacer layers for the backgrounds and the option of choice. Choice in this matter of supporting old browsers or let it all degrade nicefully. If you go down the road of cross-browser support, the easier your corners are, the better the result.