Archive for the ‘web-development’ Category

preamble

We have lived with HTML5 drafts for 4 years, last draft was published on 27 September 2008.
HTML5 has big number of features and probably will be major change of HTML for all history of Web.

Most prominent features are: Scripting API additionally to regular markup, and number of new APIs: Timed media playback, Storage, Offline work support, Drag and drop, Messaging/Networking, Back button management.
You can look at article on wikipedia [http://en.wikipedia.org/wiki/HTML_5] and at current draft [http://www.whatwg.org/specs/web-apps/current-work/] for more details about HTML5.

Come along

Many different words about HTML5 were already told, and we know that seeing is believing.
So today we have possibility to watch some of already implemented features of HTML5 thanks to Ian Hickson, Google employee that “heavily involved in Google’s work with the W3C, representing Google on the CSS working group and reviewing specifications of other working groups (SVG, CDF, etc)” according to Ian site [http://ian.hixie.ch/]

Following video include subsequent features:
* <video> (00:35)
* postMessage() (05:40)
* localStorage (15:20)
* sessionStorage (21:00)
* Drag and Drop API (29:05)
* onhashchange (37:30)
* Form Controls (40:50)
* <canvas> (56:55)
* Validation (1:07:20)

You can find detailed notes on: [http://www.whatwg.org/demos/2008-sept/]

preamble

We have enough browsers today: IE, Firefox, Opera, Konqueror, Safari.
There is a question: do we need another one?
We have a lot of problems with compatibility, and almost any web-developer spends time on tuning pages for IE/Firefox.

Google Chrome

Chrome developers made a special page describing why they started new browser.

“What we really needed was not just a browser, but also a modern platform for web pages and applications, and that’s what we set out to build.”

“On the surface, we designed a browser window that is streamlined and simple. Under the hood, we were able to build the foundation of a browser that runs today’s complex web applications much better. We improved speed and responsiveness across the board. We also built V8, a more powerful JavaScript engine, to power the next generation of web applications that aren’t even possible in today’s browsers.”

“We’ve used components from Apple’s WebKit and Mozilla’s Firefox, among others - and in that spirit, we are making all of our code open source as well.”
A fresh take on the browser [http://www.google.com/chrome/intl/en/why.html?hl=en#]

And made comics to describe features: [http://www.google.com/googlebooks/chrome/]

As you see we should have browser with improved speed that will be modern platform for web-applications.
Unfortunately I can’t test it now due to we use GNU/Linux in our company and developers presented only version for Windows.
If you are Windows user maybe it worth a look, and make own opinion.
Go on: [http://www.google.com/chrome/intl/en/features.html]

funny note: people already found 2 bugs in Google Chrome, so be prepared..
You can find proof of concept page, and description here: [http://lists.grok.org.uk/pipermail/full-disclosure/2008-September/064203.html]

preamble

We need special software to make prototypes of user-interface everyday, and it doesn’t mater if we do new system or redesign of old one. Also we don’t have dedicated person for every task due to we use Agile approach [http://en.wikipedia.org/wiki/Agile_software_development] to development.

Certainly someone say that: they don’t need to prototype, they can use just pencil and paper, or even they have designer for such tasks. Don’t believe them, it’s task of developers as well as writing tests.

If you still think differently about test: check Test-Driven Development (TDD) [http://en.wikipedia.org/wiki/Test-driven_development],
if about prototyping read famous book of Alan Kuper “The Inmates Are Running the Asylum”. [http://www.amazon.com/Inmates-Are-Running-Asylum/dp/0672316498]

rapid prototyping

If you still reading.. then we just need to select some software to do it fast, pretty, and surely with Open-Source software. [http://en.wikipedia.org/wiki/Open_source]

On Interaction Design Association (IxDA) [http://www.ixda.org/] discussion forum we can find that  people use almost any tool to do prototyping: ACD Canvas, Microsoft Word, Microsoft Excel, Snapz Pro X, Eight Media, GUI Design Studio, LucidSpec,
Multimedia Fusion, SmartDraw, Inspiration, MockupScreens, Microsoft Power Point, Oversite, …

First of all forget about software for grapic manipulations like: adobe photoshop or corell draw, then  about software that don’t have any connection to prototyping at all. With such software you will lose your time, and will think that it is work for designers.

There are different special software to prototype software user-interfaces, and most of them are commercial.

As famous commercial I can note:
Axure [http://www.axure.com/],
Adobe inDesign [http://www.adobe.com/products/indesign/],
MS Visio [http://office.microsoft.com/en-us/visio/FX100487861033.aspx]

Sure we have open-source ones, I have checked several and unfortunately most of them are ugly.
But still we have wonderful rising star. It has basic amount of functionality at this time. But has all possibilities to became wonderful open-source project.
Here it is: Pencil project. [http://www.evolus.vn/Pencil/]

Top features:
* Built-in stencils for diagramming and prototyping
* Multi-page document with background page
* On-screen text editing with rich-text supports
* Installing user-defined stencils
* Standard drawing operations: aligning, z-ordering, scaling, rotating…
* Adding external objects
* Cross-platforms

I hope you will find yourself in UI prototyping, as well as architecture prototyping with Unified Modeling Language(UML) [http://en.wikipedia.org/wiki/Unified_Modeling_Language]

related links:
# http://Interaction-Design.org — an open-content encyclopedia about usability
# http://jthom.best.vwh.net/usability —Online guide to usability methods
# http://Usabilitybok.org
# http://usabilityfirst.com — Online guide to usability methods resource

“The nice thing about standards is that there are so many to choose from.”
Andrew Tannenbaum

preamble

Web 2.0 became a buzz word nowadays and many people has different understanding of it.
It seems we can just use World Wide Web consortium(W3C) [http://www.w3c.org] and find final definition,
but there is no any standard definition. We have many different definitions from different companies or people.

Let’s make short sum-up:
Web2.0 is a architecture of interconnectivity and social interactions on the Web.
With such architecture we can create web-sites where users can produce content of his network using distributed content of other networks or independent developers.

Common mis-association here is that AJAX[http://en.wikipedia.org/wiki/AJAX] is a main feature of Web2.0, it is became so popular because many Web2.0 sites heavily use Ajax. In real we can create Web2.0 web-site with described features of Web2.0 without Ajax.

Web2.0 websites typically use some of the following features:
* CSS: separation of presentation and content
* REST or JSON-based APIs: system inegration and separation
* Rich Internet application techniques: Ajax, Flex, Flash
* Syndication, and aggregation: RSS or Atom feeds
* Weblog-publishing tools, and social networking tools: chat, forum, wiki, ..

Now as you have rough understanding of Web2.0 main question is what is:
Semantic Web (Web3.0)?

Another useful standard

Unlike Web2.0 Semantic Web is a W3C standard[http://www.w3.org/2001/sw/] and so we can find final definition of it.

“The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. It is based on the Resource Description Framework (RDF).”
According to Semantic Web home page

Talking common language:
Semantic Web is a way to store all data in such way to provide easy way for any application to use it.
It provide special formats for storing and querying of data.

“The big picture: imagine having one query language, one client, and one data access protocol which let you arbitrarily slice the data of Flickr, delicious, Google, and your favorite Web 2.0 sites, FOAF files, RSS 1.0 feeds — plus anything that can be mapped into RDF. This is data integration the Web 2.0 and the Semantic Web way.”
Good general description from “Talking Points for Semantic Web vs. Web2.0″ [http://www.w3.org/2006/05/SW_Web2.html]

Nevertheless potential useful points of Semantic Web and even some use-cases [http://www.w3.org/2001/sw/sweo/public/UseCases/]
we still very far from any production use of it.

In real life we can still use XML[http://en.wikipedia.org/wiki/XML], RDBMS [http://en.wikipedia.org/wiki/RDBMS], and SOA [http://en.wikipedia.org/wiki/Service-oriented_architecture] to get similar behavior today.

preamble

Nowadays social networks on Internet take a lot of popularity. Your neighbor is probably already has social network about home shopping or nuclear reactors.
It is no wonder that more possibilities appear to create fast and easily your social network like:
Ning [http://www.ning.com/], KickApps[http://www.kickapps.com/], CrowdVine[http://www.crowdvine.com/], GoingOn[http://www.goingon.com/], ONEsite [http://www.onesite.com/], etc..

Our company had a chance to estimate some of them.
As most advanced and popular (> 230.000 networks) platform I can name: Ning.

Ning platform

After rapid registration process you get social full-featured network: instant messaging, blogs, music, video, photos, and so on..

One feature is a possibility is to change a number of parameters from administrator panel. That gives opportunity without any special software development education create and maintain social network.

Another feature is a possibility for software developers to create additional widgets, change behavior of system, and query and modify data thru RESTful API [http://en.wikipedia.org/wiki/Restful]. At this moment for widgets development only php is supported but Ning developers promise support for all popular languages.
Look on this “hello world” application to understand how you can drive it: [http://developer.ning.com/tutorials/Hello_World]

Extensions development for Ning platform looks like development for CMS systems [http://en.wikipedia.org/wiki/Content_management_system] and based on MVC paradigm [http://en.wikipedia.org/wiki/Model-view-controller].

As unusual approach I can note using of Ning content store[http://developer.ning.com/wiki/The_Ning_Content_Store:_A_Primer]. It is non relative database that looks like ORM systems[http://en.wikipedia.org/wiki/Object-relational_mapping]. I think that using of it is a disputable idea but for novice developers it is easy to understand it.

At the end I want to note main advantages and disadvantages of Ning plarform:

Advantages:

1.Simple an rapid creation of social networks;
2.Free basic access to the system(full abilities but you can’t turn off ads);
3.Big possibilities for modernization and relatively simple API for developers;
4.Quite good documentation;

Disadvantages:

1.Closed platform: we can’t deploy it at any place, we can’t look to source code when we have lack of documentation, we can’t redesign it, it prevent from simultaneous work of developers
2.Commercial platform: if you want to use your own domain name, or remove ads from Ning you should pay;
3.Database approach to store and handle data in DB.;

Conclusion:

This system is a wonderful start for new social networks, or old social networks without big amount of specific functionality.

ONE IMPORTANT note:
we faced disgustful relations of Ning to customers:
making some internal procedures they revoke access to source code from all user, and we lost many time waiting for an access when we have responsibilities against our customers to develop project by some fixed date. Closed platform is an evil !!

preamble

There is set of plug-ins that really simplify development process and glance will help you select something for your daily work.

golden list

name: firebug
functions: edit, debug, and monitor CSS, HTML, and JavaScript live
hints: page loading analysis, live working with CSS styles, JavaScript debugger
add-on page: [https://addons.mozilla.org/en-US/firefox/addon/1843]

name: user agent switcher
functions: switch the user agent of the browser
hints: cool but IE, and Firefox still interpret code differently and anyway for interpretation tests you need ‘ies4linux’ [http://www.tatanka.com.br/ies4linux/page/Main_Page]
add-on page: [https://addons.mozilla.org/en-US/firefox/addon/59]

name: firesizer
functions: resize of firefox the window to specific dimensions
hints: it helps to test site in required resolutions
add-on page: [https://addons.mozilla.org/en-US/firefox/addon/5792]

name: SQLite manager
functions: manage SQLite databases
hints: I think you know why it is better to use SQLite DB on workplaces
add-on page: [https://addons.mozilla.org/en-US/firefox/addon/5817]

name: add N edit cookies
functions: allows you add and edit session and saved cookies in live
add-on page: [https://addons.mozilla.org/en-US/firefox/addon/573]