Henrik Carlsson posted this
on
and tagged it with Links This is great article from Interuserface on the usage of very simple geometric shapes (focused on mobile computer devices) as part of the branding.
Henrik Carlsson posted this
on
and tagged it with Apple IMHO iOS Today I will be flying to Poland with the folkrock band ”Hedningarna” for a gig in Warsaw. I’m going to be their FOH engineer. (The guy that controls the sound that the audience hears). This post will not be about sound engineering or about Hedningarna though. It will be about the fact that this little adventure will involve a plane flight from Stockholm to Warsaw. During this flight I will really try out my iPad (and iPhone) as travel companion.
I liked my iPhone from the second I bought it, however I think that my love for it started when I took a long train ride from Arvika to Falun two years ago. I had an Apple keynote video loaded into it and I’d just started using Instapaper. That long boring train ride with poor Internet coverage had never felt fater and less boring.
Now I’m hoping that the iPad will do the same for the plane ride. It’s loaded with a lot of articles in Instapaper, a few comics and some videos from Webstock ’11.
I will revisit this topic (although in a new post) once I’m back from the trip.
Henrik Carlsson posted this
on
and tagged it with Facebook Google Social Media Google +Circles: share what matters, with the people who matter most
(and with Google).
Apparently Google is about to launch a full scale attack on Facebook with their own social media community. I’m not a Facebook user so I don’t know whether there are any aspects of it that Google obviously would do better. However I can guess that they will have one thing in common, and that’s one of the mail reasons I don’t use Facebook.
The user is not the customer, the user is the product. I always prefer to be the customer.
Here a link to a video and an about page for Google+.
Henrik Carlsson posted this
on
and tagged it with Code HTML5/CSS3 So called ”Social Media Icons”, links to Twitter, Facebook, RSS-feeds, linkedin etc., are everywhere. You can’t possibly have missed them. They are definitely a big buzz and something that a lot of people want to have on their web sites. A while ago I designed and developed a site called Prinsessans Rockband that among other things needed some social media icons.
At first this seemed like a problem, all though a small one, since I’m first and foremost a developer. I prefer to leave the pixel-craft to others. Sure, I could find some sort of free or semi-free icons online and use them, but I really wanted another solution. I stumbled upon two great things that led me to an idea. The first great thing was Dan Cederholm’s article ”An all CSS button”. It’s a write-up on how to style links to look like real world buttons and is well worth a read.
This got me thinking, maybe I could use CSS3’s @font-face and find the original fonts for some of the social media logos. Especially Twitter, Vimeo and Facebook often use a letter (T, V and F respectively) for their icons. I had previously found the font that Vimeo used, so I started googling. In the process I found the second great thing; The SocialIcons font by ptocheia. It’s a font that replace the letters with the look of popular social media and web company’s logos. It was almost to good to be true.
I combined the ideas from Dan Cederholm’s article with the font and got my social media icons for Prinsessans Rockband. It worked great, but they were removed in a small re-imagining of the layout. However the idea is still useful and I will likely use it more in the future.
One problem with this is the degradation. For some icons is works just fine when the letters shows up in another font. A t in a light blue box is easily identified as a Twitter-logo etc. However, some of them (and a instead of the RSS/Atom-logo for instance) degrades less graceful. So for this article I re-wrote some of the code in order to make it degrade better. For this I used some jQuery-based Javascript and the font-face-function in Modernizr.
Let’s start with the basic html.
|
1 |
<a href="http://feeds.feedburner.com/mrhenko" data-social-letter="a" class="socialicon rss">Subscribe to RSS/Atom</a> |
The thing worth noting here is the data-attribute for social letter. The data-attribute is one of the many new great things in HTML5. You can read more about it at HTML5 Doctor. The content between <a> och </a> is then replaced by jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script> <script type="text/javascript"> (function ($) { $(document).ready(function() { $('.fontface body').children('[data-social-letter]').each(function() { var letter = $(this).attr('data-social-letter'); $(this).text(letter); }); }); })(jQuery) </script> |
So what this does is it finds every element that has a ”data-social-letter”-attribute, if it is the child of an element with the class ”fontface”. That class is set by Modernizr to indicate that the browser supports CSS @font-face. That means that if my browser doesn’t support this, the original ”Subscribe to RSS/Atom” text will remain and the degradation is thereby sort of graceful. Now all we got to do is set the font and do some styling in css.
|
1 2 3 4 5 |
/* Import the font. */ @font-face { font-family: "SocialIcons"; src: url("SocialIcons.otf"); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Make it look like an icon */ a.socialicon { display: block; width: 40px; height: 40px; padding: 5px; line-height: 40px; font-size: 35px; border-radius: 5px; box-shadow: 2px 2px 8px rgba(0,0,0,0.9), -2px -2px 12px rgba(0, 0, 0, 0.2); color: #fff; text-decoration: none; text-align: center; font-family: "SocialIcons"; text-shadow: 0 -1px 1px rgba(19,65,88,.8); } |
|
1 2 3 4 5 6 7 8 9 |
/* Use <a href="http://www.colorzilla.com/gradient-editor/">http://www.colorzilla.com/gradient-editor/</a> to generate great-looking gradients */ .rss { background: #e34d14; /* Old browsers */ background: -moz-linear-gradient(top, #e34d14 0%, #f2780c 50%, #e34d14 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e34d14), color-stop(50%,#f2780c), color-stop(100%,#e34d14)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e34d14 0%,#f2780c 50%,#e34d14 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e34d14 0%,#f2780c 50%,#e34d14 100%); /* Opera11.10+ */ background: linear-gradient(top, #e34d14 0%,#f2780c 50%,#e34d14 100%); /* W3C */ } |
The result will look something like this:
So that’s the basic idea and a starting point. I hope it will be useful for you.
Henrik Carlsson posted this
on
and tagged it with Apple A few days ago I wrote about a patent application from Apple regarding a use of IR to augment the iPhone’s camera. Mikael Jorhult (@mikaeljorhult) then gave me this link to a very comprehensive overview. Please note the large number of possible uses that isn’t about obsessive control.
Henrik Carlsson posted this
on
and tagged it with Apple IMHO A news-story about Apple attempting to patent a technology that will prevent you from filming certain live-events has been floating around for a few days now. Yesterday it started to filter into the swedish press as well. (You can read more about it in swedish at MacFeber and in english at MicroBlogBuzz). Needless to say the haters hate, the tin-foil hats go crazy and the press gets a few ad-clicks more.
So what’s my take on this? First of all, I think a patent and a real world implementation are two totally different things. For all I know this might be a move to mess with another hardware-vendor rather then us customers. I don’t think it can be exactly what the press predicts since the backlash on Apple would be far to big.
Second, interestingly enough I haven’t seen anything about this in neither Macworld nor Daring Fireball, even though these are generally the best sources of Apple news. Sure, the tin-foil hat might say. That’s because the Macworld staff and John Gruber (then man behind Daring Fireball) are Apple fan-boys who wants to cover it up! Anyone with half a brain will off-course realize how stupid that sounds.
And third, Apple is not the devil! (Neither is Google, Microsoft, Facebook or any other large corporation.) It’s a technology company interested in making money by selling hardware and software to people. The things they do aren’t motivated by some evil plan to rule the world. It’s simple business decisions. Stop seeing every move by a big company as something inherently evil.
Henrik Carlsson posted this
on
and tagged it with Podcasts synvila Web Design and Development In this blogs very first post I mentioned how I tried to differentiate the various projects I’ve got going. This blog should be my main blogging platform for tech related stuff, with the occasional guest appearance of my other interests. The part of my old web site that was dedicated to my small one-man business was to be moved to another location. Also my music [would] find it’s own place
. The time for this place-finding is now.
A few days ago I purchased a few domains. One of them was synvila.se, the new home for my music. Synvila has been my monicker in music-making for the past two or three years (during which time I haven’t written much music). It’s a tongue-in-cheek misspell of the swedish word synvilla which means mirage. The music is melancholic pop/rock songs. For the past couple of years I’ve been writing all my lyrics in swedish, however I think that is about to change now.
That said, now it is time to actually make a web site to put up at synvila.se. Right now it’s just a temporary page with links to my SoundCloud-account.
Inspired by the recently launched second season of the Boagworld.com podcast I’ve decided to use this blog as a public eye into my design and development process. In order to have some sort of structure in my work (working for myself is usually very sporadic and messy) I’m planning to loosely follow the work-flow that’s presented in that podcast. Hence I will start with the purpose of synvila.se, the so called Business objective, Success criteria and Calls to action. (If any of these words seems strange or unknown to you and you are curious about them I’d advice you to listen to the boagworld podcast and read as much as you can from that blog. It’s really great stuff for anyone who designs, develops or runs web sites.)
This is always hard to admit when it comes to any kind of personal web page. Off-course it’s mainly rooted in some sort of egomania. I make music because it makes me feel good and I spread it via the web because I want people to take notice of my work. If I could earn some money on it that would be just great, because things I get paid for I can consider work and therefore spend more time doing. If not, thats fine too because I want listeners, that is really the main objective, the money-part is just a possible (but improbable) bonus.
In order to at least enable myself to make a few dimes on the music (and also expose myself to a bigger audience) I plan to put some of my music up on iTunes Music Store and Spotify.
So here’s the why as a list of business objectives, in order of prioritization.
Setting up these objectives would be pointless if there where no way to measure whether they’re successful or not, so here’s a list of ways to do that.
Most of these will be hard to measure because my music has been spread in so many places and I’ve been bad at collecting the statistics. The number of iTunes-purchases and Spotify-streamings can of course only go up since they are zero now. To get some kind of statistics to compare the results of the new site with I will look at my number of listeners on last.fm and MySpace, my number of downloads from the same services and from my old podcast-feed.
Right now @synvila is my catch-all twitter-account. There I write about anything and everything from my life and link to a lot of other content. I will have to make a choice whether to continue like that or to start a new account for the music.
As of this blog post I have decided to consider MySpace dead. My old MySpace-page will be kept, but its sole purpose will be to link to synvila.se.
In order for the visitor to accomplish my success criteria and my objectives to be met I need to provide some sort of calls to action. This is a prioritized list of what they will likely be:
The reason I put subscriptions and followings at the top two spot is that I want people who listens/downloads/purchase more than one song. This also helps fulfilling the first objective; Increase the reach of my music/build my personal brand
.
The design process of the site will mostly be done in the browser. I’m not primarily a designer and my Photoshop/Fireworks skills are virtually none existent. As a matter of fact, I don’t even have a copy of Photoshop.
The site will probably be based around either WordPress or Perch as CMS, though I will try to do as much integration with other services, primarily SoundCloud, as possible. The bulk of the code that I will produce in this process will likely be available on github (MrHenko).
That’s all folks. With this as ground-work I will start working on synvila.se. The process will continue to be documented here in the blog. I don’t know whether it will be a quick or slow process. Right now I feel very inspired and want to get to it, but life have a tendency to come up with other things that needs attending.
Henrik Carlsson posted this
on
and tagged it with Linux Status I’ve just installed Ubuntu Linux in my Fusion powered Virtual Machine. Initial reaction:
It’s fast!
My Windows 7 VM screws up my computer and sucks the life out of it. Ubuntu doesn’t.
Henrik Carlsson posted this
on
and tagged it with Code HTML5/CSS3 I’ve just fixed the font-rendering for this site in Chrome and Firefox for Windows. I believe the problem had something to do with the @font-face-implementation in the various browsers and/or various font formats in different operating systems. The @font-face-code that I know use is from Andy Clarke’s book Hardboiled Web Design and from en article by Paul Irish called @font-face gotchas. I will likely write a longer blog post about this later but for now, here is the code I used.
@font-face {
font-family : "Regular";
src : url("fonts/Bergamo/BergamoStd-Regular-webfont.eot");
src : local("☺"),
url("fonts/Bergamo/BergamoStd-Regular-webfont.svg#Regular") format("svg"),
url("fonts/Bergamo/BergamoStd-Regular-webfont.ttf") format("truetype"),
url("fonts/Bergamo/BergamoStd-Regular-webfont.woff") format("woff");}
Henrik Carlsson posted this
on
and tagged it with App Tips iOS Podcasts I spend a big part of my life with my iPhone headset on. For the last six months or so most of that time has not been about listening to music, it’s been about podcasts.
My podcast craze started last summer when I discovered Boagworld.com, just as it took a break from regular production. The addiction was furthered as 5by5.tv came into my life. I could write a whole post about why Boagworld and various 5by5-shows are awesome, but I won’t. Not now anyway.
In the beginning of my podcast listening i was perfectly happy with the podcast feature in iTunes. When I browsed through Boagworld’s extensive back catalogue it was easy to just download huge chunks of episodes on my Mac and sync it to the iPhone. However as I started listening to more and more new podcasts the tethering of the iPhone to the computer started to feel more and more annoying. Enter Podcaster for iPhone.
Everything that iTunes does, Podcaster does better. It also does a whole lot of stuff that iTunes doesn’t, primarily keeping good track of my subscriptions, let’s me chose whether I wan’t to limit my downloads to WiFi connections only or not (regardless of file size) etc. It also keeps a handy archive of podcasts to browse through. (Yes, off course you can add any podcast to your list simply by entering the RSS-feed URL of the podcast.) And it also gives you push notifications whenever a podcast you’re subscribing to has been updated (highly customizable).
Do you listen to podcasts and own an iPhone? Then it’s a no-brainer in my book. Visit Podcaster.fm or head straight to the App Store and buy Podcaster!
©
Replies and comments
Henrik Carlsson's Blog
8 juli, 2011 00:32[…] week I wrote a blog post about my upcoming trip to Warsaw with the band Hedningarna and the fact that I would use my iPad as my main digital entertainment […]