by Eric Rowell (cofounder of www.adollo.com)
Treefrog Post (www.treefrogpost.com) is a new web industry blog who is a part of the Adollo network. You should definitely check them out! They’re a great source of web industry news for Adollo, and we’re happy to be partnered with them.
by Eric Rowell (cofounder of www.adollo.com)
What does Google have against client apps? Simple. They can’t make money from them with advertisements. The more time people spend on the web, the more opportunities Google has to make money from search advertising and display advertising. That being said, what could Google possibly do to make people start using the web more and use client applications less? Or for that matter, what could Google do to completely rub out client applications all together so that all users are on the web 100% of the time? That’s simple too: create a new standard of HTML for rich internet applications (RIAs) and create a new operating system that only runs web applications. And that’s exactly what they are doing. It’s called HTML5 and Google Chrome OS.
HTML5
HTML5 is the next version of HTML that is currently being developed by Google. Just like Flash 4 and Silverlight, its purpose is to give web applications the same rich user experiences that a client application can deliver. But unlike Flash which has to run in Adobe’s player, and Silverlight which has to run in Microsoft’s player, HTML5 will run in any browser without a plugin. The open source version of HTML5 was released this last month (October 2009), and the official version is supposed to be released in 2012. You can read more about HTML5 here:
http://www.cmswire.com/cms/web-content/html-5-new-elements-new-draft-update-report-002819.php
Google Chrome OS
Google Chrome OS is Google’s new operating system, which is scheduled for release at the end of 2010. It will be a free operating system bundled with netbooks (the notebooks that are used only to connect to the web.) I think it is no coincidence that Google has recently released the Google Chrome browser because I suspect that the browser may actually be a sort of beta for the new operating system. After all, the Google Chrome OS is basically just a fancy browser.
Google’s Vision of the Future
So let’s put this all together:
This looks like a very well coordinated set of releases if you ask me. By 2012, Google will have a free, solid operating system and its own version of HTML which everyone will be using. Google is obviously trying to eliminate the client application world. (Windows, Apple… be careful!)
Good luck, Google. We are rooting for you!
by Eric Rowell (cofounder of www.adollo.com)
So What’s a Locking Column Grid Anyways?
A locking column grid is a grid that you can scoll vertically and horizontally, while the headers and certain columns stay in place. This is very handy if you are displaying a large amount of data that requires scrolling when you dont want to lose sight of your headers or certain columns of data.
Here’s what a locking column grid looks like:
The locking column grid is made up of four quandrants: the upper left, upper right, bottom left, and bottom right quandrants. The headers for the data grid are in the upper left and upper right quadrant. The columns that you want to always show are in the upper left and bottom left quadrant. The rest of scrollable data is in the bottom right quandrant. As you scroll to the right, the upper right quadrant also scrolls to the right so the columns match up, while the bottom left quadrant stays stationary. Likewise, as the bottom right quandrant is scrolled vertically, the bottom left quadrant also scrolls vertically while the top right quadrant stays stationary.
So how is a locking column grid made with HTML?
Easy! First, create the following html:
<table>
<tr>
<td>
<div id=”topLeftQuad”></div>
</td>
<td>
<div id=”topRightQuad” style=”overflow:hidden;”></div>
</td>
</tr>
<tr>
<td>
<div id=”bottomLeftQuad” style=”overflow:hidden;”></div>
</td>
<td>
<div id=”bottomRightQuad” onscroll=”scrollGrid()”></div>
</td>
</tr>
</table>
Next, you need to insert your grid headers into the top left and top right quadrants using tables, and then insert your grid data into the bottom left and bottom right quadrants again using tables. Essentially, the locking column grid is composed of four different tables, each within a cell of a 2×2 table.
Finally, you will need to create the “scrollGrid()” function. When the bottom right quadrant is scrolled, this function will get the x and y scroll position of the bottom right quad. It will then set the x scroll position of the top right quad, and then set the y scroll position of the bottom left quad.
That’s it! Good Luck!
by Eric Rowell (cofounder of www.adollo.com)
Some of you may have heard about JQuery but aren’t sure exactly what it is or when it’s good to be used, so I would like to take a moment to explain!
What is JQuery?
JQuery is a really cool open source Javascript library that makes Javascript development slightly easier and provides tools to create hover effects and animations very easily. You can download the source here:
When should JQuery be used?
I’ve asked several people what they think of JQuery, and most of them refer to its easy notation of accessing html elements via an id using:
$(“#id”)
instead of
document.getElementById(“id”)
It makes sense! It’s so annoying coding “document.getElementById(“id”)” everywhere in your javascript scripts. The second thing people mention is that it’s great for creating image galleries or slide shows with Javascript code if you don’t want to mess with using Flash.
For more information and good tutorials on JQuery, check out:
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
by Eric Rowell (cofounder of www.adollo.com)
For those of you hearing about Flex for the first time, you may be asking “what’s so special about Flex, and why should I use it instead of the Flash IDE?” Well I can help with that.
So what’s Flex anyways?
Flex is a framework developed by Adobe that enables developers to more easily develop RIA’s (Rich Internet Applications). The Flash IDE is great for creating animations and spiffy visual effects for web applications, but often times it is very tedious to create simple web forms and charts. The world is beginning to realize that web users want more and more flashy web interfaces, which has caused a lot of web developers to spend a ton of time in the Flash IDE (hence the creation of Flex).
When should you use Flex?
If you are creating web applications that use heavy flash, and you also want to use form components like text boxes and radio buttons, or you want to use other advanced web elements like data grids or charting, you definitely need to try out Flex. The Flex SDK is free to download, but you have to pay for Flex Builder 3 ($249 for the Standard edition and $699 for the professional edition). If you are serious about Flash development, I highly recommend purchasing at least the Standard edition. The Professional edition comes with alot of extra graphing and charting components. You can download the Flex Builder 3 free trial here:
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3
Good Luck!
by Eric Rowell (cofounder of www.adollo.com)
As you might know, there’s a lot of buzz going around about new RIA (Rich Internet Application) technology, in particular with regards to Adobe Flex, Microsoft Silverlight, and Google’s HTML 5. What’s the difference between each one?
What’s the difference between Flex, Silverlight, and HTML 5?
Well, Adobe Flex has been out for awhile. It’s an alternative markup language that uses MXML instead of HTML and uses actionscript as its scripting language (very very similar to JavaScript). Unlike HTML, Adobe Flex has a lot of built in components like advanced data grids and charts, while providing other advanced style options for fundamental components like text areas and select boxes.
Microsoft Silverlight has recently come out as a response to Adobe Flex (Yea, they copied the idea), and it’s pretty much the same thing except that it’s a Microsoft product that uses the .NET framework. Both Flex and Silverlight can be embedded into HTML pages (meaning they run inside the browser).
HTML5 on the other hand is something completely different than Flex or Silverlight. It will be the new standard of HTML, which is currently being documented and developed as we speak by Google. You can see the evolving documentation here:
http://dev.w3.org/html5/spec/Overview.html
HTML 5 will revolutionize web design as we know it, and may possibly make multi-media browser plug-ins like Flash obsolete. HTML 5 will include a whole new set of tags like <audio>, <video>, and <progress> that give developers access to very complex web elements without needing to use plug-ins.
For more information about HTML 5, check out:
http://www.cmswire.com/cms/web-content/html-5-new-elements-new-draft-update-report-002819.php
by Eric Rowell (cofounder of www.adollo.com)
I was working on Adollo today and realized that I was having problems centering a div element inside of another div where it was necessary to use the ”float:left” attribute, and having it look the same in IE7 and FireFox. What a hassle! After about half an hour of trying different things, I finally realized that I’d have to turn to Google, which wasn’t very much help either. I even got out a web design book and starting reading about CSS! If any of you have had this same problem, I thought I’d share the solution with you.
The problem with centering a div element is that you can only work with percents, and fixed values, and not a mix of both. For example, if you wanted to center your web page which is inside a div tag of width 700 pixels, you would want to find the middle of the screen, and then position the div element to the left by 350 pixels. Theoretically, it would look something like this:
margin-left: 50% – 350px;
Unfortunately, this isn’t possible with traditional CSS layout methods! Luckily, there’s a slight-of-hand work around for this. If we use absolute positioning, we can use the “left” attribute, and the margin-left attribute to represent both components of the theoretical margin-left. This can be coded as follows:
position: absolute;
left: 50%;
margin-left: -350px;
And you’re done! Hope this is helpful to someone!
by Eric Rowell (cofounder of www.adollo.com)
Many of you developers out there, including myself, may have been hearing about people developing their HTML layouts purely with CSS, instead of table structures, and asked yourself “Why? What’s the big deal?” You might even insist that table structures are just as good, and tell yourself that relearning HTML design with CSS is a waste of time. The truth is, it’s time to switch to CSS. Your pages will load faster, your html code will be about fivetimes shorter, the code itself will be more elegant, it’s easier to modify and manipulate HTML elements, AND your new pages will comply with W3C standards. Sound important now?
So you might be asking “OK, so when exactly do I use CSS, and when do I use tables?” Generally, you want to use CSS for everything including positioning and styling, except when you are displaying data, like charts, or if you have grid-like web elements, such as forms.
I know alot of you might be hesitant to relearn HTML design, but it’s worth it. If you want to stay in the front of web technology, it’s time to throw away the tables, and start using CSS.