Marcofolio.net - Marco's online portfolio and digital playground on the net http://www.marcofolio.net 2012-02-10T01:51:43+01:00 http://www.marcofolio.net http://www.marcofolio.net/images/M_images/marcofolio.png text/html 2012-02-08T06:49:39+01:00 http://www.marcofolio.net http://www.marcofolio.net/reviews/giveaway_contest_mightydeals_deal.html A great resource for all kind of webdevelopers and -designers has to be MightyDeals. They provide some great (daily) deals for webprofessionals, which simply means that you can get that font, brush or program for a way cheaper price so can finally get it. Today, we're giving away five of these amazingly useful deals to all the readers! And the best part is: You're able to decide which deal you want to have. Read the rules below to find out how you can join this contest: it's pretty simple! Make sure you join this contest quick, since it ends on February 15th. You'll automatically receive information if you have won a prize. Good luck to everyone! Also, make sure you subscribe to the RSS feed (http://feeds2.feedburner.com/marcofolio) or follow me on Twitter (http://twitter.com/marcofolio) to get updates on more future giveaways. text/html 2012-01-23T18:52:28+01:00 http://www.marcofolio.net http://www.marcofolio.net/css/recreating_the_ibm_lotusphere_logo_in_css3.html A while ago, I visited the IBM Lotusphere 2012 (http://www-01.ibm.com/software/lotus/events/conference/) conference page. One thing that I noticed immediately, was their beautiful logo on the background. Although it's design is very minimal and simple, the logo just looks very good. I wanted to recreate this logo using only HTML and CSS3. The main key to this effect is using the border-radius and overflow:hidden properties. I've created two versions: One that uses extra HTML elements, the second one uses CSS3 pseudo elements. Check out the demo to see how the logo looks like in your browser. Keep in mind, no images are used at all. Feel free to dig in the source code as well and maybe learn a couple of things. Let's take a look under the hood to see how you can create something like this yourself. It's actually easier that it might look! text/html 2012-01-09T20:10:34+01:00 http://www.marcofolio.net http://www.marcofolio.net/reviews/giveaway_contest_stickers_by_sticker_mule.html Since it was my 23rd birthday last weekend, and I wanted to start off the new year (http://www.marcofolio.net/features/looking_back_at_2011.html) with some great goodies, I've got a great giveaway for everyone. Today, we're giving away store credit for all kinds of stickers by Sticker Mule (http://www.stickermule.com/)! They could be useful for anything! Design your custom sticker, create die cut stickers or even create custom skins for your iPhone, laptop, Kindle or iPad. Read the rules below to find out how you can join this contest: it's pretty simple! Make sure you join this contest quick, since it ends on January 16th. You'll automatically receive information if you have won a prize. Good luck to everyone! Also, make sure you subscribe to the RSS feed (http://feeds2.feedburner.com/marcofolio) or follow me on Twitter (http://twitter.com/marcofolio) to get updates on more future giveaways. text/html 2012-01-02T19:15:26+01:00 http://www.marcofolio.net http://www.marcofolio.net/features/looking_back_at_2011.html Welcome to 2012 everybody! I hope you had a great Christmas time and enjoyed New Year's eve. Just like last year (http://www.marcofolio.net/features/looking_back_at_2010.html), I wanted to look back at my own blog to see what took place. Sadly, I wasn't able to post a lot this year due to personal circumstances. Yet, I'm pretty sure that all the posts that I did place are true, high quality unique articles that you might be able to use for your next web project since they were mainly about jQuery (http://www.google.com/#q=site:marcofolio.net jquery), CSS3 (http://www.google.com/#q=site:marcofolio.net css3) or HTML5 (http://www.google.com/#q=site:marcofolio.net html5). I really hope you liked reading the articles on Marcofolio.net for the last year! As for 2012, I hope to write more articles than past year. I might write more Quick Tips; Shorter articles, but those that contain extremely useful tips/code snippets that you might use. And in case you haven't seen it on Twitter (http://twitter.com/marcofolio) yet, this was the Christmas card my girlfriend and I made for this year (http://www.flickr.com/photos/marcofolio_net/6614285847/). I wish you all the best for 2012 and let's check some articles placed here last year. text/html 2011-12-12T20:42:28+01:00 http://www.marcofolio.net http://www.marcofolio.net/webdesign/build_native-looking_apps_for_ios.html Lately, I've been messing around (http://www.marcofolio.net/webdesign/html5_data-_attributes_are_great_and_you_know_it.html) with cool (http://www.marcofolio.net/webdesign/working_with_websockets.html) HTML5 stuff (http://www.marcofolio.net/webdesign/lights_off_a_puzzle_game_using_html5_canvas.html) a lot. One of the things that HTML5 is trying to reach, is the market of mobile devices. A long time ago (when I got my first iPhone), I wrote an article on how to add a webclip (http://www.marcofolio.net/webdesign/add_a_webclip_icon_for_easy_iphone_access.html) for easy access to your website. But since then, I've learned a couple of more things on how to build native-looking apps for iOS using only HTML. I've created a template/boilerplate that you can use for your next project to create native looking apps for iOS (http://www.apple.com/ios/) (more specifically: Mobile Safari (http://en.wikipedia.org/wiki/Safari_%28web_browser%29)) using nothing but HTML. Simply build your website starting with this template, bookmark it and you're done. View or download the source code and read the comments (http://www.marcofolio.net/tips/making_comments_in_your_source_code.html) carefully to see what's needed to create a native looking app using only HTML. If you don't feel like fully digging into the source, but learn the pieces bit by bit, feel free to read on further. Take note that this will only work when the user bookmarks your webpage. The changes to any existing projects can be made easily, just make... text/html 2011-11-28T20:17:14+01:00 http://www.marcofolio.net http://www.marcofolio.net/webdesign/working_with_websockets.html HTML5 (http://en.wikipedia.org/wiki/HTML5) has some extremely cool features, and a couple of weeks ago I took a deep dive into Websockets. This protocol, which you can recognize by the ws:// and wss:// (secure websockets) URL prefix, enables Server side push events . During my deep dive, I learned a couple of things that are pretty interesting. If you're into/learning HTML5, you really should try out Websockets! In my opinion, it's one of the coolest technologies they've added. Are you ready to dive and learn more about Websockets? Here are a couple of things to keep in mind when working with Websockets. text/html 2011-10-24T06:04:05+01:00 http://www.marcofolio.net http://www.marcofolio.net/reviews/giveaway_contest_50_christmas_cards_by_moo.html Today is the day for another great contest on Marcofolio.net. This one especially goes out to all people that want to win some Christmas Cards to send during the holidays. Three lucky readers will be able to win 50 Christmas Cards by MOO (http://uk.moo.com/products/christmas-cards.html). That's surely worth a shot entering this contest! Read the rules below to find out how you can join this contest: it's pretty simple! Make sure you join this contest quick, since it ends on October 31st. You'll automatically receive information if you have won a prize. Good luck to everyone! Also, make sure you subscribe to the RSS feed (http://feeds2.feedburner.com/marcofolio) or follow me on Twitter (http://twitter.com/marcofolio) to get updates on more future giveaways. text/html 2011-09-26T05:41:52+01:00 http://www.marcofolio.net http://www.marcofolio.net/reviews/jquery_mobile_first_look_book_review_and_giveaway.html There is no doubt that mobile currently is hot. The team behind the favourite JavaScript framework of many (jQuery (http://jquery.com/)) answered the need of a touch-optimized web framework, and decided to create jQuery Mobile (http://jquerymobile.com/). The development focuses on creating a framework compatible with a wide variety of smartphones and tablets. Although the framework was released almost one year ago, not many people know about it. Luckily, Giulio Bai (https://www.packtpub.com/authors/profiles/giulio-bai) wrote a book about the first steps into jQuery Mobile. Thanks to Packt Publishing, I was able to read the book and wrote a review about it that you can read below. At the start, I was already really looking forward to it, since I never played around with the framework before. Now, you have a chance to win this book (almost 200 pages) and read it yourself! jQuery Mobile (http://jquerymobile.com/) is a better choice compared to other frameworks Create and style pages and dialogs Use toolbars, theme en enhance them and subscribe to the RSS feed (http://feeds2.feedburner.com/marcofolio) or follow me on Twitter (http://twitter.com/marcofolio) to get updates on more future giveaways. text/html 2011-07-23T08:31:33+01:00 http://www.marcofolio.net http://www.marcofolio.net/webdesign/generating_the_pixellogo_from_techcrunch_in_html.html A while ago, the popular tech blog TechCrunch (http://techcrunch.com/) launched a new design for their website. Along with this design, they released a new logo. I wanted to generate this logo in HTML using jQuery (http://jquery.com/). This logo looked like the perfect candidate to do so, since it uses huge pixels and only a couple of colours (4 shades of green). With only little HTML, CSS and jQuery, I was able to generate this logo with not much effort. Did you check out the demo to see what we're going to do? This is how you can generate this pixellogo yourself! text/html 2011-05-30T16:23:56+01:00 http://www.marcofolio.net http://www.marcofolio.net/css/the_apple.com_navigation_menu_created_using_only_css3.html A while ago (I think it was around the release of the iPad (http://www.apple.com/ipad/)), the Apple.com (http://www.apple.com/) website got a new navigation menu on the top of the page. This menu bar was a lot darker than the previous, grey version, but looks just as great. One thing which I noticed about the navigation, is that the buttons are created out of images. That's the moment I thought we could do better, using some nifty CSS3 techniques. So today, I present you the Apple.com navigation menu created using only CSS3. Since this demo heavily relies on CSS3, make sure you view it using a CSS3 compatible browser. The Webkit browsers (Safari and Chrome) display the effect the best, followed by the latest version of Firefox. Opera and IE don't display everything correct, but the menu seems to be working. their search suggestion (http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html), which hasn't been implemented in this demo (yet), but I might create that later. For now, let's check out all the CSS3 you'll need to be able to create this fancy looking navigation menu.