Packaging Design

[Dutch] Presentation: PechaKucha – "Siri, start presentation ‘HomeKit’"

WWDC 2015 took place already a couple of weeks ago, and during the keynote a couple of slides were dedicated to HomeKit. It was already announced during WWDC 2014, so I was wondering where it would be today. This presentation dives into the programming model of HomeKit, as well as how it works and how it can help you.

PechaKucha - Siri, start presentation HomeKit

I was pleasantly surprised with the whole HomeKit model, especially that Apple added WatchKit support. Simply unlock your house with your watch, how cool is that! Event Triggers are extremely useful, adding IFTTT functionality to HomeKit. Sadly, not many hardware is available that is compatible with HomeKit, but the numbers are growing.

The presentation is given in a PechaKucha format. This simply means it’s a short presentation (total of 20 slides, who are each 20 seconds visible) giving it a total of 6 minutes and 40 seconds. The presentation was held at InfoSupport, with loads of other PechaKucha presentations about IoT. Take note the presentation itself is in Dutch, the slides are English.

Read more…

Marcofolio.net ()

CSS animated profile cards

Whoah, been a while since I’ve posted something! Yet, I wanted to mess around with some fun CSS3 stuff and wanted to share the results with you. Today, we’re going to create CSS animated profile cards. Although there are four different kind or animations (Push, Slide, 3D Flip and Explode), they all share the same kind of HTML structure. Simply hover over the images to see the contact details.

CSS animated profile cards

The pictures used are created by Belovodchenko Anton, but their profile data is fake. -prefix-free has been used to remove the vendor prefixes in CSS. All animations are done with the help of the transition property.

Demo CSS animated profile cards   Download CSS animated profile cards

So, how can you create this effect for yourself? Let’s dive into the code, explaining the parts one at the time.

Read more…

Marcofolio.net ()

Put your HTML development on steroids using Yeoman

Last year, Addy Osmani told me about a "tool" called Yeoman. Although it was a great tip back than, I didn’t directly feel the need to make use of the tool. Until a couple of weeks ago.

While starting another web project, I started downloading the always used framewoks like jQuery and the HTML5 Boilerplate (or making my own boilerplate which holds everything already). This is actually pretty boring, while I really want to start developing! That’s where Yeoman can help out.

Yeoman

At first glance, Yeoman is just a tool that can help you to build web application with ease. But saying so wouldn’t give Yeoman enough credits. As stated on their website, Yeoman 1.0 is more than just a tool. It’s a workflow; a collection of tools and best practices working in harmony to make developing for the web even better. In this article, I’ll try to explain in my words how to work with Yeoman and why it’s so awesome. It can help you become a better allround webdeveloper!

Read more…

Marcofolio.net ()

Delivering responsive images with Drupal

For most web developers, delivering the images to the low-bandwidth mobile devices could not be less than any brain teaser, where they feel like they have been stuck in a complex task, just like searching a needle in the dry haystack!

Well, it could screw-up the brain! Even the developers, who are well-acquainted with responsive web design techniques, know that by setting the max-width of the images up to 100%, can’t resolve this issue as the server will still render big size image to the user’s phone. The mobile optimized web applications are designed to run smoothly for the low bandwidth connection with formatting according to the screen of the device.

Delivering responsive images with Drupal

So with this blog, I intend to alleviate your pain involved in the job of providing responsive images with Drupal CMS. The blog offers sheer guidance for devs, where they can obtain the detailed information of the procedures explained with the help of useful images. Read the blog as it provides a solution for having Drupal website for bandwidth starved mobile devices.

Read more…

Marcofolio.net ()

Introduction into Augmented Reality with Vuforia

Something totally different here today. To help my girlfriend with her study, I needed to create an app that displays an augmented reality world. Although I love working with HTML and technologies around it, something like AR with it is possible, but doesn’t reach the level of a native app. During my day job, I’m working with (mobile) C# technologies like Xamarin. I was looking for something that’s easy for me to learn and use, in order to create an awesome AR application.

Vuforia

In this tutorial, I’ll be showing you how to create a simple augmented reality world using Vuforia. The reason I choose the framework, was because it looked easy, is free and – most importantly – relies on the same technology Xamarin uses. Let’s get started!

Read more…

Marcofolio.net ()

Virtual buttons in Augmented Reality with Vuforia

For this tutorial, we’ll add something neat to my previous tutorial about augmented reality. In my opinion, AR itself is already pretty awesome, but this time we’ll add some more interaction between the real world and the AR world. We’ll achieve this by adding virtual buttons to the scene, which simply means that we add buttons to the AR world, which can be touched in the real world. How cool is that!

Vuforia

Since we’re building on top of the previous tutorial, we’ll be using the same technology from Vuforia. They make it pretty easy for us to achieve this effect. Let’s get started!

Read more…

Marcofolio.net ()

Fronteers 2012 – Notes and more

If you are following me on Twitter, you might have been spammed seen loads of Tweets last week with the #fronteers12 hashtag. This was because of the fact I was attending the Fronteers Conference, where loads of interesting talks were held.

Places like these are also great for meeting and talking to people. I talked to a couple of them (like @mathias, @mikevhoenselaar, @leaverou, @eising and @smashingmag) who I only knew from "the online world", but it can be pretty inspirational to talk to them in person as well.

Fronteers 2012

With this post, I wanted to share a couple of interesting tweets, ideas, notes etc. from the conference. If you find these interesting, I do recommend you to watch the video recordings taken at the event, which will be published somewhere next week already.

I want to thank Info Support (my employer) to let me attend the event, but especially Fronteers for hosting it. Also, a big up for Christian Heilmann who was the "MC" during the conference and did a great job (especially at the Q&A).

Read more…

Marcofolio.net ()

[Dutch] Presentation: Evolve 2014: What’s new in the world of Xamarin

A couple of weeks ago, my colleagues Youp, Mark and myself gave a presentation at InfoSupport about Xamarin Evolve 2014. During the second week of October, Xamarin organised the yearly "Evolve" conference in Atlanta. During this conference, Xamarin unveiled their latest set of tools to make the life of a mobile software developer a lot easier. Examples are Xamarin.Insights to monitor apps, Sketches to do live-coding and the Profiler to profile apps.

Presentation: Evolve 2014: What's new in the world of Xamarin

During this presentation, we dive into the conference, but mainly focus on the tools that have been released. Take note the presentation itself is in Dutch, the slides are English.

Read more…

Marcofolio.net ()

Xamarin Studio Launcher

Since I’ve been using Xamarin for mobile development, I’ve been using the awesome Xamarin Studio Launcher from @redth. By default, only one instance of Xamarin Studio can be started on a Mac. However, by using the Xamarin Studio Launcher, you’ll be able to open up multiple instances of Xamarin Studio with the click of a button.

Xamarin Studio got a total new redesign since the release of Xamarin 3. This included a new application icon for Xamarin Studio, while Xamarin Studio Launcher hasn’t got an update with the new icon yet. I went ahead and created it, so it fits in your dock nicely!

Xamarin Studio Launcher

Now your Xamarin Studio Launcher will be fully up to date with the latest icon pack that came together with the latest Xamarin Studio Release.

Download Xamarin Studio Launcher

Of course, all credits go to @redth for the original idea. I just applied a new icon for the Xamarin Studio 5 release. I hope you like it and put it to good use!

Read more…

Marcofolio.net ()