Archive for the ‘Web’ Category
Apple’s HTML5 and Web Standards Page
Posted in Web, on June 4th, 2010 by Carlos.
Apple has posted a smorgasbord of HTML5/CSS3/JavaScript samples that show off the capabilities of browsers supporting these web standards (i.e. Safari). Check it out – just don’t use any browser but Safari (whether it supports these standards or not). [Apple]
Free the Foxes Gives Your Website Visitors Browser Choices
Posted in Web, on May 11th, 2010 by Carlos.
File this one under “things I wanted to do, but never got around to, and then someone beat me to it”. Free The Foxes is a lightweight script that detects the browser that your web visitors are using and gives them a popup if they are using a sub-standard browser. I’ve loaded the script onto the Keys That Click site, so users running IE6 and IE7 will be prompted with a window like the one above telling them that they should upgrade their browser for the best user experience. Really IE7 works fine on this site, but trying to get everyone to upgrade, even if it’s just to IE8, should be every web designer’s mission!
Installation takes seconds, and customization options include being able to choose which browsers will trigger the popup window. It would be nice to see a less intrusive approach such as a bar at the top of the window that slides down when clicked. I do wish the name was a little less FireFox oriented, but it’s not that big of a deal. Go check it out! [Free The Foxes via Web Resources Depot]
My Advice to Adobe – Make Flash Open Source
Steve Jobs threw some wood on the fire with an open letter to Adobe regarding Apple’s position on Flash. El Jobso refers to open platform technologies, such as Webkit and HTML5, as being the future of the web in the mobile space. Meanwhile, Flash, being a closed and proprietary platform, is the wrong the direction for a truly open and free interwebs.
But what if Flash was open source? I know I have the benefit of being an outside blogger with an opinion, and not someone that truly understands the full legal, business/revenue, implications of such a comment, but it seems to make sense doesn’t it? Adobe would be showing Apple, developers and bloggers with opinions that they are serious about the future of Flash as a platform for the web. With the support of the open source community, I think you would see that Flash could run, and run well, on mobile devices. Sure, Flash as we know it today still needs to adapt to the touchscreen and mobile world, but i think it is possible to get there. Opening it up could be the way to make it happen. I think Adobe can either keep going on their current course and possibly spell the end of Flash as we know it, or shock us all and take a different stance. Go on Adobe, take Flash open source, and show the world you’re serious about Flash as a sustainable platform for the future. Otherwise, I think you’re just digging your own grave.
[Update: Just so you know... I'm not exactly a super supporter of open source. I mean I'm not against it, but I'm not one to think that it will create a world full of peace, harmony and kittens.]
Full-screen Browsing with Webkit on a Secondary Display
Posted in Web, on April 26th, 2010 by Carlos.
When I was working on my Status Board, I knew I had to find a full-screen browser that would open on my secondary display to make the whole thing work. Surprisingly enough, it was a lot easier said than done. Can you say niche problem? I know it is, but it’s the kind of information I wish I had found when I was researching browsers, so hopefully this comes in handy for some people. And if, you’re looking at building your own status board, this really may come in handy!
For starters, I knew I wanted to base my Status Board app on Webkit, and not Mozilla, or anything else for that matter. My second criteria was that I couldn’t use Safari. For one, it doesn’t support full-screen browsing, but also, I open and close Safari multiple times an hour, so I know I would unintentionally close my status board even when I didn’t intend to.
My first attempt was with Fluid. Being able to run the browser as it’s own process would allow me to prevent the unintentional closing of the browser window. I currently use it for Google Reader, and even my posts to Keys That Click and love having these windows be independent of my Safari browser. I was happy to see Fluid had a full-screen option. I was disappointed, however to see that it didn’t work properly with a secondary display. If you throw your Fluid browser window onto your secondary display, and enable the full screen mode, it throws the browser back to your primary display with the window/toolbars/etc. hidden. It just doesn’t quite work right. I tried various ways of opening and positioning the browser to see if I can make it work, but I eventually had to give up.
I then turned to Chrome which was the next logical choice. I’ll skip details on this one until later in the article, as I’d like to cover off a couple other browsers I tried.
My hunt was on for other webkit-based browsers for the Mac. Next I tried Shiira, an open-source webkit browser. It to has a full-screen mode. Unfortunately, when I opened my status board in full-screen on my secondary display, the screen went completely white. Looks like theirs some bugs there that need to be figured out. In fact, as I’m writing this article, and am trying to replicate the issues I ran into, the full-screen mode isn’t working properly on my primary display either. It tries to open up the window on my secondary display, but it shows up positioned many hundreds of pixels off center. It also didn’t seem to allow launching in full-screen mode, which would be ideal.
My search continued and I stumbled upon Plainview, by the Barbarian Group. On their FAQs, they quite simply claim Plainview to be a full-screen web browser. Thinking I found the holy grail of full-screen webkit browsers, I gave it a shot. Given that it is meant to be run solely as a full-screen browser, it obviously has the ability to launch in full-screen mode. But once again, having dual displays created a problem for the app. After moving the window to my secondary display, and trying to start it up, it goes to full-screen on my primary display. I did bring this point up to the developers, and it is a known bug that they are working to fix. Apparently it is a much trickier issue than it sounds. I’ll be checking back with them to see if they fix this feature in future builds.
After all that, I figured I’d have no other choice but to turn to Chrome. So what’s so bad about Chrome? Well to be honest, it’s not bad. It’s a decent browser and renders things well, and is stable enough (even in Beta). For starters, it’s full-screen browsing mode works on my secondary display. Given that the development team for Chrome must be sizeable-enough, I would have been surprised that this wouldn’t work properly. There is one thing that I wish it had though, and that is the ability to launch the application in full-screen mode. I currently have my status board set to the homepage, and have Chrome launch on system startup. I, however, have to manually enable full-screen mode. Given that I have to do it typically only once a day, it’s not that much of a problem. But still, it would be nice to have it launch in that mode automatically. Another plus, that it has even has over Safari, is that it supports inset CSS3 shadows, where, it seems that Safari currently doesn’t! As I used a couple of inset shadows, this was a welcome feature.
So there you have it, a quick run down on full-screen browsing with webkit browsers on a secondary display.
Panic-Inspired Status Board Live Preview using HTML5 contentEditable and localStorage
Posted in Status Board How-to, Web, on April 26th, 2010 by Carlos.
Ok folks, ahead of me trying to explain how I built this thing, which might take some time to get to, I figured I might as well share a live preview of my Panic-inspired Status Board with the masses.
Credit goes to the following sites for the different components that I grabbed from various tutorials or resources to make this all happen:
contentEditable with localStorage: http://html5demos.com/contenteditable
I modified it so to save several different chunks, rather than just one list. Admittedly, I’m not a script coding pro, so I’m pretty sure I took a long-way of doing things, but ultimately it worked! If you have suggestions on how to make it better, please let me know!
jDigiClock – jQuery Clock with Weather: http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock
This little plugin is actually much more full-featured than what I used, so check it out for what it can do. I modified to include only the information I wanted (time, weather icon, temperature). I either hid, or deleted the rest of the items that I did not use. I used some CSS to position the items how I wanted them, and used a bit of transform capabilities of CSS3 to scale the plugin to my wanted size. This saved me from having to open all the different graphics that come packaged with the plugin and resize them each.
Juitter – Live jQuery Twitter Feed: http://www.juitter.com
I created some of my own styling, but used the jQuery based Juitter plugin to have a live view of a customizable Twitter feed. Although not perfect, it was one of the best Twitter integration options I could find at the time.
A few things to know, before clicking through to the live preview:
- You should be able to click on the lists and start typing, deleting, etc. Refreshing, and even closing/opening the browser should leave all your content intact. I’ve even tried clearing browser history/cache/etc. and suprisingly the content stayed there. Read my word of warning below for more on this.
- Given that this uses localStorage, you will not see your changes on a different machine, as it only shows what is stored on the machine you are using at the time. My hope is to eventually turn this thing into something that PHP based with MySQL integration so that it can be accessible from different machines to show the same information, as well having a database you can easily backup in case of disaster to prevent losing the to-do’s. If someone is interested in helping me do that, drop me a note.
- I recommend you use Google Chrome in Full-screen mode on a monitor resolution of 1920×1200. This was specifically designed to be run this way, so it will not appear correctly in other resolutions, and perhaps even other browsers, especially non-webkit based browsers.
- You will see that depending on the size of the individual lists, the lists may actually wind up going completely off screen. I haven’t created a fix for that (it’d be nice to be able to drag-drop the lists to different positions). For now it’s my way to stay on top of my to-do list so it never gets out of hand!
- The weather does not seem to be working at the moment. I believe it is my host that isn’t allowing it to work, as it works running locally on my machine, as well on the plugin page that is mentioned above.
- The default font for the lists themselves is American Typewriter, which should be loaded up on Mac’s by default. For non-Mac viewers, it should default back to Times.
- Twitter feed is currently only displaying tweets about/from Keys That Click
- A word of warning. If you want to use this LivePreview as your own actual to-do list, please know that it experimental, and I cannot by any means guarantee that your to-do list will not just one day disappear! I myself don’t know what to expect when using localStorage.
Well without further ado… click the button below to launch the live preview:
Look at what you can do with CSS3
Posted in Web, on March 31st, 2010 by Carlos.
This image created over at Neography was actually generated in a web browser using @font-face and text-transform techniques that are available in CSS3. If you’re using a modern browser (i.e. not IE), than you can take a look at the page yourself. I wonder if we’ll one day code our posters rather than use software like InDesign to lay them out? [Neography via Smashing Magazine Tweet]
Testing Your Websites in IE Just a Got a Little Simpler with SuperPreview
Posted in Web, on March 30th, 2010 by Carlos.
Testing your website layouts in Internet Explorer 6 and 7 have always been and continue to be the bane of any web designers existence, especially if you as a Mac user. I personally run Windows through Parallels so that I can test for Internet Explorer. I actually had 3 versions of Windows installed at one point – one for IE 6, one for IE 7 and another for IE 8 – I wanted to be sure that I was getting as accurate of a representation of my site in the various browsers as possible. That didn’t last long, and I sought out other solutions which did get me down to running one installation of Windows 7 with IE 8 installed, accompanied by IETester that let me test against legacy IE versions. But even that wasn’t all that great, and IETester seemed to be buggy.
Microsoft has come to the rescue (can you call it a true rescue if they’re the ones that created the mess in the first place?) with Expression Web’s SuperPreview, now downloadable as a free version. Yes, it is still a Windows app, but it gives you side by side views of your site in different versions of IE and even identifies the different tags and elements on your page so you can do some easier debugging. It looks like if you actually by Expression Web from Microsoft you can also have the ability to compare with FireFox. I hope this makes IE testing slightly less painful. [Microsoft via IT Shala via Make Design]
How Microsoft Can Get Web Designers (that usually hate IE) to Promote IE9
Posted in Web, on March 17th, 2010 by Carlos.
Yesterday, Microsoft posted some new information about Internet Explorer 9 on their IEBlog. Tidbits from the posting include the support for hardware accelerated HTML5, as well as CSS3. Although they are making strides to reach the level of standards compliance that other browsers already have, they still have a way to go. My hope is that they get there by the time they launch.
Why not just hope IE dies and everyone can live happy lives with Firefox, Safari or Chrome? First, IE won’t die. Second, after working with many a client that only ever uses IE, I found that it’s often difficult to convince them to use a new browser. And frankly, I don’t push the subject much anymore unless they are still using IE6. But imagine that you could recommend to a client – just upgrade to IE9 (assuming IE9 works) and know your site will look/behave the way you had originally intended. It wouldn’t be a tough sell really (except for those IT department governed corporate clients). Microsoft could then use the very legion of individuals that could not stand them (web designers/developers), to work for them. Sure we’d still have to test for antiquated browsers like IE6 and IE7, but I think we’d be more willing to recommend an IE product that works, because the sell would be that much easier.
Will a standards compliant IE make developers switch back to IE? Probably not. But if they are OK with their clients using IE9 because, at the end of the day their site looks/behaves the same way that it does in other browsers, then all the better. It would make our lives easier, and for that, I would be more than happy to recommend Microsoft.
Update: Damn. Well… what I missed to mention as I just found this out, is that IE9 won’t run on Windows XP. I guess that easy sell just got a lot harder. You’ll now need to recommend a new OS, just to get the new browser. Damn you Microsoft… Although I agree with letting old software die to encourage upgrades to newer software, I know that won’t happen easily. Sunnava.
Margins, Padding & The Box Model
Posted in Web, on March 16th, 2010 by Carlos.
Here’s a good article from spyrestudios explaining the roles margins and padding plays in CSS layout development and their effect on the box model. Recommended read for CSS beginners! [spyrestudios via Chris Spooner]
No Comments »