The Speakers have made it a point that realistically, Palestine being under the Israeli occupation it will hamper the development of the economy. However, attracting multinational companies such as Microsoft and CISCO to invest in Palestine is a business and an economic decision where Palestine’s government and private sector have to develop its business case.

We heard a formula from the distinguished Speakers that the recipe for developing the business case starts internally. A holistic approach towards developing government regulation such as an independent telecommunication regulator, digital signature, catering for venture capital industry as part of the company registration and investment laws, also regulation for free zone culminating in Technoparks projects should drive an enabling and friendly environment as a first measurement for multinationals to consider investing in Palestine. As a first step to globalizing the ICT sector, the government has to invest in developing the infrastructure such as telecommunication, regulations, physical premises, human capital and in promoting innovation as well as entrepreneurship.

Furthermore, the industry has to improve its record on delivering quality services at competitive costing rates across the board such as telecommunication services, outsourcing services, and other information technology and business process outsourcing services. This means that skills capacity for Palestinian human capital is key. A multinational speaker advised that they follow where engineers want to be and for that the educational institution is a supply for quality engineers and developers.

Developing a cluster for technology is not a one person or one organization act. It is a collective effort and a partnership between the private and public sector. The private sector made a breakthrough in developing a direct relationship with the multinationals. Its role now is to leverage this relationship to grow the investment impact of multinational in Palestine where the government role is in complementing an enabling and friendly environment. Perhaps the biggest opportunity is where to position Palestine as a platform for the multinationals for providing various solutions to the Arabic speaking markets where the audience learnt that there is a market for the mobile applications. The modality of engagement is to provide the multinationals with required human talent to support their growing business operations in the emerging markets in the region.

In essence, Palestine needs to internationalize and globalize its information technology market. It has to improve it track on credibility and perception to develop the business case. The speakers made the final point that beyond the business case, there are unique non-economic but rather social factors to Palestine that are just as important why the ICT sector deserves the attention of the multinationals mainly to provide knowledge based job opportunities in the private sector and release the pressure on public employment.

Session II
Competing in Global IT Outsourcing - Palestine’s Advantages & Challenges
The moderator for the session was Mr. Omar Al-Sahili, Business Development Director, DAI and the distinguished speakers included Mr. Ghassan Anabtawi, CEO Reach, Mr. Ihab Jabari, ICT Consultant CARANA, Mr. Murad Tahboub, CEO Asaltech, Mr. Tarek Esleem, Member of the Board of Director PITA and CEO Al-Tariq Systems and Mr. Tareq Maayah, CEO Exalt.

This session has shed lights on the current seed efforts to create an information technology outsourcing industry in Palestine. The session has demonstrated current success stories in existing businesses in the West Bank and Gaza in providing outsourcing services regionally. In comparison to Jordan, Palestine is nowhere close to the Tier 4 of countries targeted for the outsourcing as a destination. Nevertheless, the session highlighted the competitive advantages and value proposition for conducting outsourcing in Palestine as an offshore software development destination, software offshoring, business process outsourcing and call centers operations.

Furthermore, the Speakers believe that the quality of service outweighs cost structures in this business, but a niche market has to be developed. For example, Ireland is generating US$12 billion in annual revenues but their outsourcing cost structures are 7 times higher than those in India. So, the value proposition is not entirely based on cost structures. Speakers agreed that Palestinians have English and Arabic language skills, its geographical location and time zone would make outsourcing to serve the Arab speaking region as well as Europe and the USA feasible proposition. For sure, Palestinians can fit in a western corporate culture to align the outsourcing project with the strategic business interest of the international clients.

The main challenge is whether the outsourcing industry can meet a growing demand from the international business community. Is there really a local capacity of available human capital that are highly skilled in the various structures of this industry to support scaling the outsourcing operations.

All speakers agreed that Palestine does have ongoing and existing commercially viable outsourcing activities (not industry yet). Palestine companies have left positive impression on their international clients including CISCO. Some of the Palestinian companies have found niches in media and hardware design and some companies have established an international image that they’re starting to get new business by references from their loyal clients.
Special announcements by development agencies were presented at the Conference. Mr. Ghassan Al - Jamal, Development Specialist Private Enterprise Office briefed the audience on the USAID strategy to assist the growth of the ICT sector in order to build an e-economy. In the first instance, the USAID has highlighted its interest to have the IT sector interact more with the regional and global markets to create business opportunities. The USAID will also be working closely with the Palestine IT Association of companies (PITA) and the Palestine ICT Incubator (PICTI) towards accomplishing its strategies. This is demonstrated in the organization of participation in regional and international exhibitions as well as in the preparation of business delegations. The USAID will be investing in supporting an ICT policy program in cooperation with the Ministry of Telecommunications and IT, in branding and promoting the sector internationally including the outsourcing capabilities, in conducting market research in viable markets to promote the exports of Palestinian products and solutions. The USAID will be supporting an incubation program with PICTI in an attempt to further promote innovation and technology entrepreneurship. The USAID will be working towards the improvement of the workforce development and in promoting the ICT diffusion program.

Mr. Ziad Jacer from Mercy Corps presented how his organization is Contributing to the transformation and growth of the Palestinian economy through knowledge based interventions in market mapping, capacity building, networking, business creation such as supporting PICTI with the TeamStart program and the apprenticeship program.

The final presentation by a development agency at the Conference was presented by Mr. Laith Kassis the CEO of PITA and PICTI on behalf of the Mohammed bin Rashid Al - Maktoum Foundation. Mr. Kassis announced The Sawaed Programme, which seeks to support and develop the capabilities of talented Arab entrepreneurs by awarding non-refundable grants to regional projects that make a positive contribution to Arab World development. The Sawaed Programme is a new and innovative opportunity for businesses to develop commercially sustainable enterprises, whilst addressing development challenges in the Arab World. The current two challenges are Development of Online Arabic Content and Child Education. The Mohammed bin Rashid Al Maktoum Foundation invited the private sector to develop innovative products and ideas that help in the development of the Arab World through Information and Communication Technology (ICT) by creating and providing access to high quality online Arabic content and ICT resources that support education and learning and which promote Arab culture. The Sawaed Programme offers grants to eligible applicants ranging from AED 100,000 to AED 1,000,000.

Session III
Building a Knowledge-Based Economy
This session was Moderator: Ms. Sarah Beran, Economic Officer US Consulate General and the Speakers included Dr. Yahya Salqan, CEO Jaffa Net, Mr. Ahmad Al-Farra, Member of the Board of Director PITA and CEO PALINVEST, Mr. Bernard O’Sullivan, FNMD Project, DAI, Mr. Mustafa Hasan, CEO Hulul Business Solutions, Mr. Naseem Tuffaha, Regional Director of Microsoft’s Developer and Platform Group for Middle East & Africa

In her opening remarks, Ms. Beran emphasized the US government commitment towards the development of the Palestinian ICT sector and noted President Obama’s commitment in his Cairo speech to education, innovation, and development of the entrepreneurial spirit in this region. She added that US assistance in the Palestinian Territories helps to integrate technology into elementary and higher education, funds feasibility studies for ICT projects, provides technical assistance to fledgling Palestinian companies, and sends businessmen to the US and international trade shows for B2B meetings.
Speakers stressed the importance of high quality education, job opportunities, and the participation of multinational companies to the development of a solid foundation for a knowledge-based economy. Many speakers noted that technology is just a tool - not the goal - of a knowledge-based economy, but that it can assist in producing economic benefits where capital, labor and markets work together. The speakers also agreed that a knowledge-based economy is about solving problems, business, economic and social ones alike by exploiting technologies. In this process of providing solutions there has to be a marriage between talent and technology in a social communicative interaction.

Speakers also suggested formally tapping into the Palestinian Diaspora to help the Palestinian economy connect with what is broadly happening in the global industry. Speakers agreed that both the government and the private sector must play a role in promoting the development of a knowledge-based economy - the government can do so by providing incentives to start-ups and improving education, and the private sector by focusing on encouraging innovation and training young graduates, among other things.

The session also highlighted how Microsoft is helping entrepreneurs in jumpstarting their innovation and other regional programs assisting the development and growth of successful international research and technology cluster as a platform to launch new projects. Furthermore, for the first time last year, there was a Palestinian team participating in the Microsoft ImagineCup program. This program often acts as a launching pad for start-ups and entrepreneurs.

The session highlighted how PITA and PICTI are promoting Technoparks, outsourcing, innovation and technology entrepreneurship with international partners to develop a technology cluster towards supporting knowledge based eco-system.

Session IV
Entrepreneurial Venture Capital
Starting and Growing Your Technology Business through Venture Capital Financing
This session was moderator: Mr. Laith Kassis, CEO Palestine IT Association and Palestine ICT Incubator. The distinguished speakers included Dr. Mohammed Mustafa, Chairman and CEO of the Palestine Investment Fund, Mr. Debu Purkayastha, Principal - Corporate Development, Google, Mr. Samir Hulileh, CEO PADICO, and Mr. Victor Hwang, Co-founder and Managing Director, T2 Venture Capital, Kauffman Fellows Venture Corps.

Dr. Mustafa has taken the opportunity to announce a new equity-based investment vehicle capitalized at US$50Million where the Palestine Investment Fund will be committing US$10Million. Dr. Mustafa also announced that this Fund will be investing in the information technology sector.

The session focused on the role of venture capital financial instruments in growing the information and communications technology industry in Palestine. As we have seen in advanced economies, successful startup companies are the bedrock of economic growth and job creation.

Speakers have shared their experiences in growing new businesses with Seed and Venture Capital as a national strategy for expanding the knowledge of seed and venture investing; promote the visibility of entrepreneurs to investors and of investors to entrepreneurs; create investment capital to fill a gap or grow a sector; and create investment capital to build a seed and venture capital industry. Entrepreneurial growth comes from a complex venture ecosystem that Palestine has to complete its own by establishing a venture capital fund.

The Speakers advised that the best venture capital programs recognize that the challenge of capital formation is not so much about money as it is about the business and social transformational impact on the knowledge - how the business community understands seed and venture capital, what steps are involved, what are the do’s and don’ts, tolerance for failure and what it looks and feels like to build a world-class company. Its value goes beyond a simple dollar figure. Venture capital spurs growth at the critical early stages of growing companies’ development. Moreover, venture capitalists become involved as board members and management advisors, suggesting strategic partnerships, access to markets and helping to refine business strategies.

Developing a venture capital industry is a long term in perspective; nevertheless, the Speakers agreed that venture capital is critical to growing the new businesses that will drive the “new economy.” Speakers also agreed that supporting the venture capital industry would entail finding ways to nurture the culture of entrepreneurs, involve more of the Palestinian Diaspora and develop the capital that feeds them, and to provide for exit strategies on the capital market through merger and acquisitions.

Google has shared it corporate strategies in technologies related to communication platforms and content creation, geo-business and navigation and the telephony areas

Closing Session

Documented by Mr. Laith Kassis, CEO PITA and PICTI

ShareThis

Google confirmed that they will be directing “users based on their ISPs, so users of Palestinian ISPs will automatically be redirected to google.ps. However, any user can type in any Google domain they prefer to go.”

Mr. Marwan Radwan, the General Director of the Palestinian National Internet Naming Authority (PNINA) which is the organization registered google.ps said that “Google.ps was one of the earliest international domains registered under the .ps ccTLD, according to PNINA registration database, the domain was registered in 19/5/2004, and only 4 months after PNINA officially opened the .ps for registration”. He also added that “By this registration and the inclusion of Palestine in the strategic plan for Google, this emphasizes the importance of the Palestinian Internet market and the global recognition of the Palestinian presence on the Internet”. He also expressed his hopes that the more than 1000 international companies that have already registered domain names under the .ps and have active sites pointing to their .ps domains will strengthen the international ties and trust on the Palestinian ICT sector and contribute effectively to alleviate the current obstacles and hardships imposed by the Israeli occupation.
Google explained that ” Up until today, Arabic-speaking users in the Palestinian Territories have had to visit foreign domains (e.g.google.eg in Egypt) in order to search in Arabic. Starting today, Arabic-speaking users in the Palestinian Territories who use Palestinian ISPs will be given direct access to Google in Arabic via google.ps
With AdWords, you can target your ads to countries or territories, or to specific regions and cities. The Adwords system uses several factors to determine whether to show your ad including the Google domain being used (.fr, .de, .kr, etc.), the actual search terms the user submits and when possible, we determine the user’s general physical location based upon their computer’s Internet Protocol (IP) address.”
According to internet users in Palestine, Google.ps works fine in Gaza Strip and the Bank.

ShareThis

www.Yourdomain.ps

• SEARCH
• RESERVE
• PAY

For a long time, Palestine did not have its own country-code Top-Level-Domain (ccTLD). However, and after three years of hard work with IANA, International Standards Organization (ISO) and the UN Offices in New York, Palestine was able to obtain its own ccTLD, namely, “.PS”. This was done through the sincere and relentless efforts of many governmental institutions, individuals and Palestinian experts inside and outside Palestine who were involved in the issue. To realize the Palestinian presence in the information age.

YourDomainDotPs is a new project of Sadaf Technology Development, a Palestinian web development company based in Gaza.

ShareThis

AJAX Client-Server Communication Tutorials

1. Alternate Ajax Techniques, Part 1 - This tutorial tackles other Ajax techniques aside from XMLHttp as the means to describe the client-server communication.
2. Dynamic HTML and XML: The XMLHttpRequest Object - This tutorial tackles the steps of retrieving and submitting XML data directly through XMLHttpRequest object in the background.
3. Guide to Using XMLHttpRequest - This tutorial provides the steps in using XMLHttpRequest with php and nysql.
4. Make Asynchronous Requests with JavaScript and Ajax - This tutorial tackles the most fundamental and the basic of all Ajax-related objects and programming approaches, the XMLHttpRequest object.
5. Instant Tutorial - This tutorial shows how Ajax allows you to make a call to an http server get its content and load them into your existing page without having to refresh the whole page.
6. Advanced Requests and Response in AJAXR - This tutorial will show you the different status codes and demonstrate how browsers handle each and showcase the lesser used HTTP requests that you can make with Ajax.

AJAX Drag and Drop Tutorials

1. Drag and Drop Sortable Lists with JavaScript and CSS - This tutorial shows the ways to rearrange items in a list in Web applications.
2. Building a Drag & Drop Shopping Cart with Ajax - This tutorial shows how to create an interactive shopping experience allowing us to add items to the shopping basket by dragging and dropping them into an icon of a shopping cart.

AJAX Form Tutorials

1. Accessible Forms and Unobtrusive JavaScript - This tutorial shows how to separate the backend logic from the user interface logic when creating new PHP applications.
2. Submit a Form with Ajax - This tutorial deals with the new release of CakePHP (RC2) that comes with a completely written AjaxHelper::form() function.

AJAX File Uploader Tutorial

1. Better File Uploads with AJAX and JavaServer Faces - This tutorial takes a fresh approach and outlines the steps on how to implement an AJAX-powered component that will not only upload the file to the server, but also monitor the actual progress of a file upload request in real time.

AJAX Framework and Toolkit Tutorials

1. AJAX Tutorial with Prototype - This tutorial outlines the steps in building a zip code verifier as an example of how to use AJAX.
2. Developer Notes for Prototype.js - This tutorial tackles some important points in using Prototype.js.

AJAX Getting Started Tutorial

1. AJAX:Getting Started - This tutorial guides you through the basics of AJAX and gives two simple hands-on examples to get you started.

AJAX Keyword Suggest Tutorial

1. How To Create Google Suggest Feature with ASP.NET 2.0 - This tutorial tackles the steps in creating the Google Suggest feature in the website or blog.
2. Creating an Autosuggest Textbox with JavaScript, Part 1 - This tutorial outlines the steps in creating the autosuggest Textbox using JavaScript.

AJAX Live Search Tutorials

1. HOWTO: Animated Live Search/Ordered List - This tutorial covers important aspects of the animated live search and ordered list.
2. Live Search Explained - This tutorial will tackle everything about Live Search, which will gradually replace traditional search in web applications.

AJAX Rounded Corners Tutorial

1. Rico Rounded Corners without All of Rico - This tutorial have made minimal changes to Rico’s rounded corner implementation resulting to its use without needing all of Rico.

AJAX Sorting Tutorial

1. Make all Your Tables Sortable - This tutorial provides a step-by-step guide at how to make all your tables sortable.

AJAX Tabbed Pages Tutorials

1. Make an AJAX Website in Less Than Ten Minutes - This tutorial provide the steps in using AJAX apps and XMLHttpRequest and put up a site that loads all of its content asynchronously.
2. Very Dynamic Web Interfaces - This tutorial shows the use of JavaScript and XMLHttpRequest object to resolve the problem of a web application interface that results to server connection being severed once the page has been downloaded.
3. Beautiful JavaScript-Powered Pages - This tutorial delves into the world of Javascript-powered interfaces.

AJAX Bookmarklets Tutorial

1. Creating Huge Bookmarklets - This tutorial shows how this special piece of JavaScript code can be dragged into a user’s link toolbar and later can be clicked on to implement a cross-site behavior.

AJAX Chat Tutorials

1. AJAX Chat Sources Code for Download - This provides the source for the Ajax Chat sources code for download.
2. Lace - Ajax Chat - This tutorial tackles everything about Lace. This lightweight Ajaxian communications engine is suitable for shoutbox, chatroom or similar version.
3. Most Simple Ajax Chat Ever - This is a demo of the very easy to use Ajax Chat.

AJAX Client-Server Communications Tutorials

1. Implementing Simple AJAX Interaction in your Web Application - This tutorial tackles the implementation of simple Ajax Interaction in the Web application using XMLHttpRequest object.
2. AJAX - This is an introductory tutorial on AJAX, a technology that allows you to send these requests through small JavaScript calls.
3. All Request, All The Time - This tutorials builds a simple application that accepts input from the user, passes it to some PHP on the server that checksit against a database and returns the result to the browser.

AJAX Drag & Drop Tutorial

1. Drag & Drop Tutorial (with video) - This tutorial shows how AJAX allows to get closer to the cart Metaphor by enabling the drag-and-drop interactions and giving immediate visual feedback, without leaving the shop.

AJAX Dynamically Content Loading Tutorials

1. Dynamically Loaded Articles - This tutorial features a basic example showing how to use AJAX to request the content of the article from an external file and show it in the main DIV.
2. AJAX - Dynamic Content - This tutorial shows you how this small generic script makes it easy for you to load content of external files into HTML elements on your page.

AJAX Forms and Autocomplete Tutorials

1. Scriptaculous Lists with PHP - This tutorial tackles the drag & drop ffects most notably the sortables which are much nicer than the standard listbox with up and down arrows that we see in most applications today.
2. Alter Data with Ajax Forms - This tutorial shows how a registered user can ask a new question while another user answers and existing one.
3. Dynamic Client Lookup - This tutorial shows how this script uses AJAX to autofill a form.

AJAX Framework and Toolkit Tutorials

1. New Echo2 Tutorial Series - This is part 1 of a multi-part tutorial series on Ajax with Echo2 and Eclipse.
2. AJAX Design Patterns - This tutorial shows how to design and build a complete site.
3. Using Dojo and JSON to Build Ajax Applications - This tutorial will show how to build Ajax-enabled applications using Dojo and JSON.

AJAX General Tutorials

1. AJAX From Scratch: Implementing Mutual Exclusion in JavaScript - This tutorial on AJAX From Scratch series describes the fundamental techniques needed to develop AJAX Rich Internet Applications in JavaScript starting from scratch.
2. Saving Session Across Page Loads Without Cookies: On the Client Side -This is a tutorial that tackles the saving state across page loads on the client side.
3. AjaxWorld Special: What is AJAX? - This tutorial presents step by step technique in learning about AJAX and ColdFusion.
4. Simple AJAX Functions - Snippets - This tutorial is a collection of the very common JavaScript functions for Ajax. It can be used for quick reference and does not contain any fancy stuff.
5. AJAX Using ASP.NET 1.1 - This tutorial tackles the basics of AJAX and goes into some sample code to try its applications.
6. Speed Up Your AJAX-Based Webapps - This tutorial provides the technique on how to set the expiryof the JavaScript to years and not days. Once the JavaScript file is downloaded, it is never downloaded again.
7. Kick-Start Your Java Apps, Part 2 - This tutorial provides the technique in the development of a small human-resource application by using conventional JavaServer Pages - based technology and by migrating it to a highly interactive solution using AJAX.
8. Create Your Own AJAX Effects - This tutorial teaches us how to start building our own Ajax-driven effects today.

AJAX Getting Started Tutorials

1. Nitty Gritty Ajax - This tutorial is all about what AJAX can do. It will also show how to use JavaScript class to simplify the first steps towards the interactivity.
2. A List Apart-Articles: Getting Started - This is a comprehensive tutorial that tackles the fundamentals for starting on using AJAX.
3. Introduction to AJAX - This tutorial tackles the basics but also goes beyond to cover other different technologies.
4. AJAX Toolbox/XMLHttpRequest AjaxRequest Library Examples - This tutorial has a rich collection of great examples.
5. Rasmus’ 30-Second AJAX Tutorial - This is a tutorial on AJAX made easy.
6. An AJAX Hello World Project for Starters - This tutorial provides you with the essential to build a thorough understanding of the mechanics.
7. AJAX Beginner’s Tutorial - This tutorial tackles the basic principles of remote scripting using AJAX, and discusses a combination of javascript and XML to allow web pages to be updated with new information from the server without having to do a page refresh.AJAX Sorting Tutorial
8. Sortable: Make All Your Tables Sortable - This tutorial guides you through the steps in making all your tables sortable.

Useful AJAX Tutorials

1. Creation of an AJAX-Powered Shopping Cart - NETTUTS has created a tutorial that shows the way to built an Ajax-powered shopping cart using, jQuery, PHP and some plug-ins.
2. AJAX Username Availability Checker Through MooTools 1.2 - This tutorial shows how to use AJAX with MooTools to let user check the availability of the username being submitted.
3. Introduction to AJAX Calls Using jQuery and PHP - This is a tutorial is a good starting point for those who are not familiar with the use of AJAX calls with jQuery and PHP.
4. Creating a Dynamic Poll with PHP and jQuery - This tutorial provides the step to create a poll with XHTML, PHP and jQuery. Ajax effects are used to eliminate the need for a page refresh when the poll is submitted.
5. RSS AJAX JavaScript Ticker - This tutorial shows the way to use JavaScript ticker for displaying news headlines or similar contents to visitors.
6. Building Your First AJAX Application with PHP - This is a tutorial for beginners that show the ways in getting started with PHP.
7. Taking AJAX Further with PHP - This is a follow-up tutorial to the preceding Ajax Tutorial.
8. One Form-Many Uses - Server Side jQuery with Jaxer - This tutorial shows how AJAX can help to get more use out of one form rather than create multiple forms.
9. How to Call Server-Side Function from Client-Side Using PageMethods in ASP.NET AJAX - This tutorial shows a workaround for calling server-side function from the client side.
10. Developing Portlets Using AJAX, JSF and Seam, Part 1, 2, and 3 - This is a 3-part tutorial that shows the in-depth way in creating portals.
11. AJAX Forms with jQuery - This tutorial shows the way to create a form that will check an email address for validity, makes sure that there are no blank fields and shows an error report if something is not right of incomplete.
12. Easily Build Powerful Client-Side AJAX Paging Using jQuery - This is an important tutorial in improving pagination with AJAX.
13. Use jQuery and ASP.NET AJAX to Build a Client-Side Repeater - This tutorial outlines how to improve user-experience and reduce server load by using client-side repeater.
14. PHP Components: Autosuggest - This tutorial shows how you can add an autosuggest feature to search box using PHP and AJAX.
15. AutoCompleter Tutorial - This tutorial also produces the same result as the preceding tutorial.
16. Dynamic AJAX Table Example Using Dojo and RESTful Web Services on Glassfish - This tutorial provides the entire process of creating a dynamic table as you would see on a travel-booking website.
17. Auto-Populating Select Boxes Using jQuery and AJAX - This tutorials shows how users will select a top-level category in a select box that will trigger the sub-category box to auto-populate.
18. Using AJAX to Validate Forms - This tutorial shows how to use PHP and jQuery with some AJAX to create a form that validates data that are entered.
19. Easy AJAX with jQuery - This tutorial outlines some basic information on jQuery and AJAX which will help you get started.
20. Quick and Dirty AJAX - This is a short video-tutorial that shows some of the ways to improve the functionality of a Website with AJAX and jQuery.
21. Load Content While Scrolling with jQuery - This tutorial shows how to create a scrolling effect which is similar to DZone’s.
22. Wicket - Updating ListViews Using an AjaxLink - This tutorial shows how to create a table that will update without a full-page refresh when a link is clicked.
23. AJAX For Evil: Spyjax - This tutorial provide a view of the dark side of Ajax- viewing browsing habits.
24. How To Integrate Google Calendar in Website Using AJAX - This tutorials shows how to integrate a Google Calendar which have great use in a number of Websites.
25. Edit in Place with AJAX Using jQuery JavaScript Library - This tutorial shows the steps to allow visitors to edit HTML of a page they are visiting.
26. Creating an AJAX Rating Widget - This tutorial shows how to create a rating widget that allows visitors to rate an item with stars or some other measurement.
27. Use AJAX and PHP to Build Your Mailing List - This tutorial shows the steps to allow visitors to subscribe to a mailing list without the page refresh.
28. Nice AJAX Effects for Message Box Using MooTools - This tutorial shows how to use Ajax effects to give visitors a message based on some action.
29. Making AJAX Work with Screen Readers - This tutorial shows how AJAX effects can affect users of screen readers.
30. Continuous Pagination - This is another tutorial on pagination which shows continuous pagination where users keeps scrolling down rather than going to another page.
31. Making Element Selection and AJAX simple with DOMAssistant - This tutorial helps you get started with the DOMAssistant JavaScript library.
32. Slider Using PHP, JavaScript and AJAX - This tutorial shows how to create a nice slider using AJAX, JavaScript and PHP.
33. ASP.NET AJAX Calendar Extender - This tutorial show seven different tricks and tips in working with the Calendar extender.
34. Log-In/Sign-Up Screen Using AJAX modal Pop-Up Extender - This tutorial shows how to create a sign-in and log-in forms.
35. Dealing with Large Data in AJAX - This tutorial shows how to get the AJAX application to meet the data requirements.
36. Creating an AJAX-Enabled Calendar Control - This is another tutorial that focuses on enhancing calendar using AJAX effects.
37. JavaScript Error Publishing using ASP.NET AJAX - This tutorial shows the steps in using AJAX to display errors in codes.

AJAX Framework and JavaScript Libraries List(124+)

1. qooxdoo - This is an innovative Ajax application framework that includes a platform-independent tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer.
2. TIBET - This is the oldest Ajax project and the Clint/SOA using AJAX, JSON and the virtual machine you call a Web browser as the driving force behind it.
3. Flash/JavaScript Integration Kit - This toolkit provides developers to get the best of the Flash and the HTML worlds by enabling JavaScript to invoke ActionScript functions, and vice versa.
4. Google AJAXSLT - This is an implementation of XSL-T in JavaScript which is intended for use in fat Web pages.
5. libXmlRequest - This is a very simple wrapper around XHR. This library contains two public request functions, getXml and postXml, that can be used to send synchronous and asynchronous XML Http requests from IE and Mozilla.
6. RSlite - It is an extremely lightweight implementation of remote scripting which uses cookies.
7. SACK - it is a simple set of codes that allow you to put AJAX into your webpages with none of the trouble or overhead of other packages.
8. Sarissa - It is an ECMAScript library acting as a cross-browser wrapper for native XML APIs.
9. XHConn - It is a small JavaScript library that displays a data object with a single method.
10. CPAINT - It is a multi-language toolkit that helps developers in designing and implementing AJAX web applications with flexibility and ease.
11. DWR, Direct Web Remoting - It is an engine that exposes methods of server-side Java objects to JavaScript code.
12. Swato - This is an open-source framework that helps you to develop webapps easier.
13. Java BluePrints - This is Sun Microsystems’ best practices for Enterprise Java development.
14. Ruby on Rails - It is a full-stack framework used for developing database-backed web applications according to the Model-View-Control pattern.
15. .AFLAX - It is a JavaScript library for Macromedia’s Flash Platform.
16. AJAXExtended - It is a JavaScript library that improves the standard XMLHttpRequest features. This is considered as the most important enhancement.
17. AJAX.NET Professional - It is one of the first AJAX frameworks available for Microsoft ASP.NET and works with .NET 1.1 and 2.0.
18. AjaxRequest Library - It is a layer over the XMLHttpRequest functionality which makes the communication between JavaScript and the server easier for web developers.
19. AHAH: Asynchronous HTML and HTTP - It is a simple technique used in dynamically updating web pages using JavaScript.
20. Bajax - It is a very small and simple JavaScript library to use Ajax on your pages which is independent of programming language.
21. Code Snippets - It is a public source code repository which enables you to easily build up your personal collection of code snippets, categorize those using tags and share them with the world.
22. Cross-Browser.com - This site contains X- a cross-browser DHTML JavaScript library, and many demos, applications and articles.
23. DHTML API, Drag and Drop for Images and Layers - It is a cross-browser JavaScript DHTML library that adds Drag and Drop functionality and extended DHTML capabilities to layers and to any desired images, even for those that are integrated into the text.
24. DHTMLgoodies.com - It is a library of DHTML and AJAX scripts.
25. DHTML Kitchen - It is the resource for ready-made or custom-built DHTML scripts and it also specializes in front-end Java solutions and JSP.
26. Dynamic Drive - This is a DHTML and JavaScript code library.
27. DynAPI 3 - It is an open source project by Dan Steinman which was created to make cross-browser Dynamic HTML possible.
28. Ext JS - it is an open source JavaScript library used for building richly interactive web applications using techniques that include DHTML, AJAX and DOM scripting.
29. Engine for Web Applications - It is an application network for client-side development and Web applications.
30. FACE - It provides a great way to bring life and interactivity to websites without having to use Flash. It is completely accessible with easy plug-and-play implementation.
31. JSL, JavaScript Standard Library - It is a single and small file with some JavaScript 1.6 standard methods of functions that are not present on some browsers.
32. JavaScript ToolBox - This site was created to be a repository of code and reusable libraries which address common needs that many web developers encounter.
33. JSAN, JavaScript Archive Network - It is a comprehensive resource for open-source JavaScript libraries and software.
34. JSFBGL, Javascript Framebuffer Graphics Library - It is considered as a fun project in producing graphics with javascript.
35. Kabuki AJAX Toolkit - It is a client developer library which is similar in style to traditional object-oriented widget libraries.
36. LINB, Lazy INternet and Browser - It is designed to allow developers coding in a more targetable, clear and efficient way.
37. moo.ajax - It is a simple Ajax class to be used with prototype.lite from moo.fx.
38. moo.fx - It is a superlightweight, super-small javascript effects library, written with prototype.js.48.moo.ajax.
39. overLIB - It is a JavaScript library created to enhance websites with small popup information boxes to help visitors around your website.
40. overlibmws DHTML Popup Library - It is a Download and Test directory for the overlibmws Popup Library.
41. Spry Framework for Ajax - It is a JavaScript library for web designers that provide functionality which allows them to build pages that provide a richer experience for their users.
42. The Solvent - It is a cross-browser Ajax application toolkit written in JavaScript.
43. ThyApi - It is an API that allow the development of better user interfaces for web applications using javascript and Ajax.
44. Yahoo! User Interface Library - It is a set of utilities and controls, written in JavaScript for building richly interactive web applications using techniques that include DHTML, DOM Scripting and AJAX
45. Zapatec Ajax Suite - It is used to jumpstart the Ajax deployment. It includes six widgets, three modules and a library.
46. Zephyr - it is an Ajax-based framework for php5 developers, where you can easily develop business applications using this robust framework.
47. Backbase - It is an enterprise Ajax framework
48. Clean AJAX - It is an open-source engine for AJAX that provides a high level of interface to work with the AJAX technology
49. Wt - It is web toolkit that allows programmers to write code in C++, generating content-rich AJAX GUI.
50. Google Web Toolkit - it is an open-source Java software development framework that allows web developers to create Ajax applications in Java.
51. ThinWire - It is an open-source java based web application framework that utilizes Ajax techniques to give Web applications the lookand feel of traditional GUI applications.
52. Tigermouse - It is a modern Ajax-driven MVC framework for web applications development.
53. AjaxAnywhere - It is a simple way to enhance an existing JSP/Struts/JSF/Spring application with AJAX.
54. AjaxTags Components of Java Web Parts - It was originally an extended version of the Struts HTML taglib but was made into a generic taglib and brought under the Java Web parts library.
55. Anaa, An AJAX API - it is a simple but complete framework built around XMLHttpRequest. It supports GET and POST methods.
56. DotNetRemoting Rich Web Client SDK for ASP.NET - It is a platform for developing rich internet applications, including AJAX.
57. JsHttpRequest - It is excellent cross-browser compatibility and works with IE 5.0 with disabled ActiveX. It supports and transparent work with any character encoding including AJAX file uploads from a user browser to the serer without page reloading.
58. SmartClient from Isomorphic Software - It is a cross-platform AJAX GUI system chosen by top commercial software vendors, on demand service providers and enterprise IT developers for thousands of deployments.

ShareThis

It’s slim and lighter than typical paperback and it fits perfectly in your hand and enhanced with wireless which allow to download from it any where any time and get the books in less than 60 minuets and you don’t have to recharge it for days.

It’s simple to use, no computer required ,with the new text-to-speech feature help you to ask any question , kindle 2 can read every newspaper, magazine, blog, and book out loud to you.

ShareThis

The GPals day was spread across two days. The first day focused on pushing the boundaries of web applications using Google developer technologies. The day was also about bringing brilliant developers together to share their own ideas. Whereas day two was focused on a full review of Google product demonstrations for small or medium sized businesses to help spur innovation and entrepreneurship in the region which included a discussion on  how to create Arabic content using online tools, and how to use free Google applications (such as Google Docs) to better manage businesses.

“Entrepreneurs and NGO leaders in the Palestinian Territories are young, well educated and tenacious,” said UPP co-chair and Case Foundation CEO Jean Case. “Everyday they overcome challenges that seem insurmountable. Working with Google’s team and sharing their expertise gives these leaders an opportunity to engage in new ideas, which will hopefully serve to spur economic development and local innovation.”

Supporting the developer community around the world is vital for the future of the internet: an active developer community means constant innovation and growth of the web. Google is committed long-term to providing tools and platforms that make web development easier and more powerful.

Google has been providing similar trainings with local partners around the world. In addition to its acclaimed search engine, Google provides numerous free online applications that allow organization of online groups, shared spreadsheets, presentations and documents and application development. Google has created specialized portals that organize and promote its tools specifically for small businesses, non-profits and governments. And, it provides Google Ad Words grants to non-profits and training on how to advertise online successfully.

The collaboration with Google is the latest in the U.S.-Palestinian Partnership’s efforts to bring investment and opportunity to the West Bank. Since its founding in December of 2007, the Partnership has secured private sector contributions in the West Bank from leading companies and organizations such as Google, Cisco, Intel, Microsoft, Boys & Girls Clubs of America and National Geographic. Through the support of youth centers, job creation, tourism and business delegations, UPP is working to create the economic conditions for peace and demonstrating that the West Bank is open for business.

About the U.S.-Palestinian Partnership
Launched by the President of United States, Secretary of State and U.S. business leaders following the Annapolis peace talks in December 2007, the Partnership promotes economic and educational opportunities for the Palestinian people. UPP is a critical component in facilitating progress toward a two-state solution, wherein Israel and Palestine can live side by side, in peace, security and prosperity. For more information about the U.S.-Palestinian Partnership, please visit www.uspalestinianpartnership.org.

About the Case Foundation
The Case Foundation, created by Steve and Jean Case in 1997, invests in people and ideas that can change the world.  The Foundation champions initiatives that connect people, increase giving, and catalyze civic action.  For more information, visit www.casefoundation.org.

Some of the photos, more to follow
DAY 1 PHOTOS DAY 2 PHOTOS

FROM : http://www.uspalestinianpartnership.org

ShareThis

In this tutorial I will be showing you how to create a style switcher using jQuery and PHP. The end result

will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

Step 1: The HTML

First, we need to create our basic HTML file and save it as index.php:

view plaincopy to clipboardprint?

1. >
5. Style Switchertitle>
6. php
7. // Checks for, and assigns cookie to local variable:
8. if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
9. // If no cookie is present then set style as ”day” (default):
10. else $style = ‘day’;
11. ?>
22. head>

25. Style-Switcher Exampleh1>

26. • Homea>li>
    • Abouta>li>
    • Servicesa>li>
    • Productsa>li>
    • Linksa>li>
    • Contacta>li>
    • ul>
    • div>
    • 
      

      NETTUTS Tutorial Exampleh2>

    • Page content…p>
    • div>
    • Footer stuff…p>
    • div>
    • 
      

      Choose your style:h4>

    • • Daya>li>
      • Nighta>li>
      • ul>
      • div>
      • div>
      • $(’#style-switcher a’).styleSwitcher(); // Calling the plugin…
      • script>
      • body>
      • html>

		Style Switcher

Style-Switcher Example

Home
About
Services
Products
Links
Contact

NETTUTS Tutorial Example

Page content…

Footer stuff…
Choose your style:

Day
Night

You’ll see that there is some PHP up there just below the title attribute in the head. It’s very simple - all it does is check for a cookie called “style” - if it exists then it assigns it to the local variable (also called “style”) and if the cookie doesn’t exist, it assigns the default theme (”day”) to the $style variable. This variable is then echoed out within the href attribute of the link element (href="css/.css"). You’ll see that the style-switcher div is included above in our HTML. There is no need to add this using JavaScript because the method we’re using will allow the style-switcher to work when JavaScript is disabled. The two links (night & day) take the user to a file called style-switcher.php with an appended query string specifying the corresponding theme (e.g. href="style-switcher.php?style=day"). I’ve also called the a jQuery plugin called styleSwitcher. This has not been developed yet (well, it will have by the time you read this), so hold on! … We will be writing this plugin in step 4 of this tutorial.

Step 2: The CSS

Now, we need to create a couple of CSS StyleSheets for our HTML. I’ve decided to create just two StyleSheets - one will have the theme of “Day” and the other will have the theme of “Night” and I’ve named them appropriately. (day.css & night.css)

The Day theme:

The Night theme:

It’s best to start with one style and then copy across all the selectors to the alternative StyleSheet - and then all that needs changing are the various CSS rules and declarations. Obviously you can have as many StyleSheets as you want but in this tutorial we’re using two for illustrative purposes. Plus night and day go well together as a duo!

day.css:

view plaincopy to clipboardprint?

1. #dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
3. /* Quick Reset */
4. body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
5. margin: 0;
6. padding: 0;
7. border: none;
8. list-style: none;
9. font-weight: normal;
10. }
12. /* General / Header */
13. body {background: #98beeb url(../img/day-body-bg.jpg) repeat-x; }
14. #container {
15. width: 60%;
16. margin: 0 auto;
17. min-width: 400px;
18. max-width: 800px;
19. position: relative;
20. }
21. h1 {
22. text-align: left;
23. text-transform: uppercase;
24. color: white;
25. font-size: 1.4em;
26. padding: 45px 30px 10px 30px;
27. }
29. /* Navigation */
30. #nav {
31. padding: 5px 5px 0 0;
32. overflow: hidden;
33. }
34. #nav li {display: inline;}
35. #nav a {
36. float: left;
37. color: #6195ce;
38. font-weight: bold;
39. text-decoration: none;
40. padding: 3px 6px;
41. margin-left: 5px;
42. background: white;
43. }
44. #nav a:hover {color: #2c5a8c;}
46. /* Banner */
47. #banner {
48. height: 125px;
49. background: url(../img/day-banner.jpg) center;
50. border: 5px solid white;
51. clear: both;
52. }
54. /* Content Area */
55. #content {
56. border: 10px solid white;
57. background: white;
58. color: #2c5a8c;
59. margin: 5px 0;
60. }
61. #content a {font-weight: bold;}
62. #content a:hover {text-decoration: underline;}
63. h2 {
64. padding: 0.3em 0;
65. font-size: 1.4em;
66. }
67. p {padding: 0.3em 0;}
69. /* Footer */
70. #foot {
71. background: white;
72. color: #1f3a57;
73. text-align: center;
74. border: 10px solid white;
75. clear: both;
76. }
77. #foot a {
78. text-decoration: none;
79. font-weight: bold;
80. color: #2c5a8c;
81. }
82. #foot a:hover {text-decoration: underline;}
84. /* Style-Switcher */
85. #style-switcher {
86. position: absolute;
87. width: 100%;
88. top: 0;
89. left: 0;
90. rightright: 0;
91. height: 34px;
92. background: #79a3cc url(../img/day-ss-bg.jpg);
93. border-bottom: 1px solid white;
94. }
95. #style-switcher ul {
96. border-right: 1px solid white;
97. float: rightright;
98. }
99. #style-switcher h4 {
100. display: inline;
101. color: #153c67;
102. font-weight: bold;
103. line-height: 34px;
104. padding: 0 10px;
105. float: left;
106. border-left: 1px solid white;
107. }
108. #style-switcher li {display: inline;}
109. #style-switcher li a {
110. float: left;
111. line-height: 26px;
112. color: white;
113. background: #90a6bb;
114. text-decoration: none;
115. padding: 0 13px;
116. display: inline;
117. margin: 4px 4px 4px 0;
118. }
119. #style-switcher li a:hover {background: #3a5a7c;}

#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */

/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	font-weight: normal;
}

/* General / Header */
body {background: #98beeb url(../img/day-body-bg.jpg) repeat-x; }
#container {
	width: 60%;
	margin: 0 auto;
	min-width: 400px;
	max-width: 800px;
	position: relative;
}
h1 {
	text-align: left;
	text-transform: uppercase;
	color: white;
	font-size: 1.4em;
	padding: 45px 30px 10px 30px;
}

/* Navigation */
#nav {
	padding: 5px 5px 0 0;
	overflow: hidden;
}
#nav li {display: inline;}
#nav a {
	float: left;
	color: #6195ce;
	font-weight: bold;
	text-decoration: none;
	padding: 3px 6px;
	margin-left: 5px;
	background: white;
}
#nav a:hover {color: #2c5a8c;}

/* Banner */
#banner {
	height: 125px;
	background: url(../img/day-banner.jpg) center;
	border: 5px solid white;
	clear: both;
}

/* Content Area */
#content {
	border: 10px solid white;
	background: white;
	color: #2c5a8c;
	margin: 5px 0;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
	padding: 0.3em 0;
	font-size: 1.4em;
}
p {padding: 0.3em 0;}

/* Footer */
#foot {
	background: white;
	color: #1f3a57;
	text-align: center;
	border: 10px solid white;
	clear: both;
}
#foot a {
	text-decoration: none;
	font-weight: bold;
	color: #2c5a8c;
}
#foot a:hover {text-decoration: underline;}

/* Style-Switcher */
#style-switcher {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	background: #79a3cc url(../img/day-ss-bg.jpg);
	border-bottom: 1px solid white;
}
#style-switcher ul {
	border-right: 1px solid white;
	float: right;
}
#style-switcher h4 {
	display: inline;
	color: #153c67;
	font-weight: bold;
	line-height: 34px;
	padding: 0 10px;
	float: left;
	border-left: 1px solid white;
}
#style-switcher li {display: inline;}
#style-switcher li a {
	float: left;
	line-height: 26px;
	color: white;
	background: #90a6bb;
	text-decoration: none;
	padding: 0 13px;
	display: inline;
	margin: 4px 4px 4px 0;
}
#style-switcher li a:hover {background: #3a5a7c;}

night.css:

view plaincopy to clipboardprint?

1. #dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
3. /* Quick Reset */
4. body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
5. margin: 0;
6. padding: 0;
7. border: none;
8. list-style: none;
9. font-weight: normal;
10. }
12. /* General / Header */
13. body {
14. font-family: Calibri,”Arial Narrow”,Arial,Sans-Serif;
15. background: #072952 url(../img/night-body-bg.jpg) repeat-x;
16. }
17. #container {
18. width: 60%;
19. margin: 0 auto;
20. min-width: 400px;
21. max-width: 800px;
22. position: relative;
23. }
24. h1 {
25. text-align: left;
26. text-transform: uppercase;
27. color: white;
28. font-size: 1.4em;
29. padding: 45px 30px 10px 30px;
30. font-family: “Times New Roman”, Times, serif;
31. }
33. /* Navigation */
34. #nav {
35. padding: 5px 5px 0 0;
36. overflow: hidden;
37. }
38. #nav li {display: inline;}
39. #nav a {
40. float: left;
41. color: #010e2e;
42. font-weight: bold;
43. text-decoration: none;
44. padding: 8px 6px 3px 6px;
45. font-size: 0.8em;
46. text-transform: uppercase;
47. font-weight: 700;
48. margin-left: 5px;
49. background: white url(../img/night-nav-bg2.jpg) repeat-x;
50. }
51. #nav a:hover {color: #2c5a8c;}
53. /* Banner */
54. #banner {
55. height: 125px;
56. background: url(../img/night-banner.jpg) center;
57. border: 5px solid white;
58. clear: both;
59. }
61. /* Content Area */
62. #content {
63. color: white;
64. margin: 20px 0;
65. padding: 5px 0;
66. border-top: 4px double white;
67. border-bottom: 4px double white;
68. font-family: “Times New Roman”, Times, serif;
69. }
70. #content a {font-weight: bold;}
71. #content a:hover {text-decoration: underline;}
72. h2 {
73. padding: 0.3em 0;
74. font-size: 1.4em;
75. }
76. p {padding: 0.3em 0;}
78. /* Footer */
79. #foot {
80. color: white;
81. font-size: 0.8em;
82. clear: both;
83. }
84. #foot p {
85. text-align: center;
86. padding: 0;
87. }
88. #foot a {
89. text-decoration: none;
90. font-weight: bold;
91. color: white;
92. }
93. #foot a:hover {text-decoration: underline;}
95. /* Style-Switcher */
96. #style-switcher {
97. position: absolute;
98. width: 100%;
99. top: 0;
100. left: 0;
101. rightright: 0;
102. height: 34px;
103. }
104. #style-switcher ul {float: left;}
105. #style-switcher h4 {
106. display: inline;
107. color: white;
108. font-weight: bold;
109. line-height: 34px;
110. padding: 0 10px;
111. float: left;
112. }
113. #style-switcher li {display: inline;}
114. #style-switcher li a {
115. float: left;
116. line-height: 34px;
117. color: white;
118. text-decoration: none;
119. padding: 0 4px;
120. margin-left: 5px;
121. display: inline;
122. }
123. #style-switcher li a:hover {
124. background: white;
125. color: #13181c;
126. background: white url(../img/night-ss-bg.jpg) repeat-x left bottombottom;
127. }

#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */

/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	font-weight: normal;
}

/* General / Header */
body {
	font-family: Calibri,"Arial Narrow",Arial,Sans-Serif;
	background: #072952 url(../img/night-body-bg.jpg) repeat-x;
}
#container {
	width: 60%;
	margin: 0 auto;
	min-width: 400px;
	max-width: 800px;
	position: relative;
}
h1 {
	text-align: left;
	text-transform: uppercase;
	color: white;
	font-size: 1.4em;
	padding: 45px 30px 10px 30px;
	font-family: "Times New Roman", Times, serif;
}

/* Navigation */
#nav {
	padding: 5px 5px 0 0;
	overflow: hidden;
}
#nav li {display: inline;}
#nav a {
	float: left;
	color: #010e2e;
	font-weight: bold;
	text-decoration: none;
	padding: 8px 6px 3px 6px;
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: 700;
	margin-left: 5px;
	background: white url(../img/night-nav-bg2.jpg) repeat-x;
}
#nav a:hover {color: #2c5a8c;}

/* Banner */
#banner {
	height: 125px;
	background: url(../img/night-banner.jpg) center;
	border: 5px solid white;
	clear: both;
}

/* Content Area */
#content {
	color: white;
	margin: 20px 0;
	padding: 5px 0;
	border-top: 4px double white;
	border-bottom: 4px double white;
	font-family: "Times New Roman", Times, serif;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
	padding: 0.3em 0;
	font-size: 1.4em;
}
p {padding: 0.3em 0;}

/* Footer */
#foot {
	color: white;
	font-size: 0.8em;
	clear: both;
}
#foot p {
	text-align: center;
	padding: 0;
}
#foot a {
	text-decoration: none;
	font-weight: bold;
	color: white;
}
#foot a:hover {text-decoration: underline;}

/* Style-Switcher */
#style-switcher {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
}
#style-switcher ul {float: left;}
#style-switcher h4 {
	display: inline;
	color: white;
	font-weight: bold;
	line-height: 34px;
	padding: 0 10px;
	float: left;
}
#style-switcher li {display: inline;}
#style-switcher li a {
	float: left;
	line-height: 34px;
	color: white;
	text-decoration: none;
	padding: 0 4px;
	margin-left: 5px;
	display: inline;
}
#style-switcher li a:hover {
	background: white;
	color: #13181c;
	background: white url(../img/night-ss-bg.jpg) repeat-x left bottom;
}

This is not really a CSS tutorial so I won’t be delving into any of the above, but if you have any questions then please feel free to ask them in the comments section. And yes, I know that min-width is not supported in older browsers!

Step 3: style-switcher.php

This is where we write the core functionality of the style switcher. It is actually just a few lines of very basic PHP code. You should create a new file called “style-switcher.php” and copy the following into it:

view plaincopy to clipboardprint?

2. $style = $_GET['style'];
3. setcookie(”style”, $style, time()+604800); // 604800 = amount of seconds in one week
4. if(isset($_GET['js'])) {
5. echo $style;
6. } else {
7. header(”Location: ”.$_SERVER['HTTP_REFERER']);
8. }
9. ?>

So, what the above code does is assign the “style” GET variable to a local $style variable. In other words it will take the value of the style property within the query string (style-switcher.php?style=day). It then sets a cookie (for one week) called “style” - we will be able to retrieve this cookie on our main index.php with the code shown in step 1 (remember that little chunk of PHP in the head?). Next, it checks to see if “js” is appended to the query string. If it is then we know that JavaScript (which we have yet to write) has requested this PHP script. The else condition occurs when a user does not have JavaScript enabled and redirects the user to the referrer (i.e. the page they just came from) - this will become clearer once we’ve written the jQuery stuff!

Step 4: The jQuery stuff

You can, if you want, stop right here!… The solution thus far will work perfectly, but as I stated in the intro we are going to make it even cooler with some jQuery awesomeness! Not only are we going to allow the user to change their theme without refreshing the page but we are also going to add a really cool fading effect… I mean, what type of jQuery tutorial would this be if there was no fading!?!? Obviously this is all possible without having to create a plugin but I thought it would be a good learning experience for all you, plus it allows us to adapt or transfer the code quickly and easily. First off, let’s create a file called “styleswitcher.jquery.js”. Making a new plugin in jQuery is extremely simple; all it takes is the following code:

view plaincopy to clipboardprint?

1. jQuery.fn.styleSwitcher = function(){
2. // The code goes here…
3. }

jQuery.fn.styleSwitcher = function(){
	// The code goes here...
}

So, first we want to specify what happens when one of the StyleSheet links are clicked on (those within div#style-switcher):

view plaincopy to clipboardprint?

1. /* ”this” refers to each instance of the selected element,
2. * So, if you were to call the plugin like this:
3. * $(’a').styleSwitcher(); then the following would occur
4. * when clicking on any anchor within the document:
5. */
7. $(this).click(function(){
8. // We’re passing this element object through to the
9. // loadStyleSheet function.
10. loadStyleSheet(this);
11. // And then we’re returning false.
12. return false;
13. });

/* "this" refers to each instance of the selected element,
 * So, if you were to call the plugin like this:
 * $('a').styleSwitcher(); then the following would occur
 * when clicking on any anchor within the document:
 */

$(this).click(function(){
	// We're passing this element object through to the
	// loadStyleSheet function.
	loadStyleSheet(this);
	// And then we're returning false.
	return false;
});

loadStyleSheet:

Now we need to write the loadStyleSheet function:

view plaincopy to clipboardprint?

1. function loadStyleSheet(obj) {
3. // Append new div to body:
4. $(’body’).append(”);
6. // Give body a height of 100% (to fix IE6 issue):
7. $(’body’).css({height:’100%’});
9. // Select newly created div and apply some styles:
10. $(’#overlay’)
11. .css({
12. display: ’none’,
13. position: ’absolute’,
14. top:0,
15. left: 0,
16. width: ’100%’,
17. height: ’100%’,
18. zIndex: 1000,
19. background: ’black url(img/loading.gif) no-repeat center’
20. })
22. // Now fade in the div (#overlay):
23. .fadeIn(500,function(){
25. // The following will happen when the div has finished fading in:
27. // Request PHP script (obj.href) with appended ”js” query string item:
28. $.get( obj.href+’&js’,function(data){
30. // Select link element in HEAD of document (#stylesheet) and change href attribute:
31. $(’#stylesheet’).attr(’href’,'css/’ + data + ‘.css’);
33. // Check if new CSS StyleSheet has loaded:
34. cssDummy.check(function(){
36. // When StyleSheet has loaded, fade out and remove the #overlay div:
37. $(’#overlay’).fadeOut(500,function(){
38. $(this).remove();
39. });
40. });
41. });
42. });
43. }

function loadStyleSheet(obj) {

	// Append new div to body:
	$('body').append('');

	// Give body a height of 100% (to fix IE6 issue):
	$('body').css({height:'100%'});

	// Select newly created div and apply some styles:
	$('#overlay')
		.css({
			display: 'none',
			position: 'absolute',
			top:0,
			left: 0,
			width: '100%',
			height: '100%',
			zIndex: 1000,
			background: 'black url(img/loading.gif) no-repeat center'
		})

		// Now fade in the div (#overlay):
		.fadeIn(500,function(){

			// The following will happen when the div has finished fading in:

			// Request PHP script (obj.href) with appended "js" query string item:
			$.get( obj.href+'&js',function(data){

				// Select link element in HEAD of document (#stylesheet) and change href attribute:
				$('#stylesheet').attr('href','css/' + data + '.css');

				// Check if new CSS StyleSheet has loaded:
				cssDummy.check(function(){

					// When StyleSheet has loaded, fade out and remove the #overlay div:
					$('#overlay').fadeOut(500,function(){
						$(this).remove();
					});
				});
			});
		});
}

I hope the comments explained it sufficiently. The more attentive of you will have noticed that we are calling a currently undefined function (cssDummy.check()). Don’t worry because that is the next step…

cssDummy:

We need a way of testing whether a StyleSheet has loaded. If it has loaded then we can make the overlay div disappear, but if it hasn’t we have to keep on checking until it does load. I did a bit of searching around the net and found a reliable way of testing such a thing. It involves testing for the computed width of a dummy element. The width of this element will be defined in the CSS - and so the computed width of the element will only equal the width defined in the CSS when the StyleSheet has loaded. I hope you now understand why we had to include that “#dummy-element” rule in each CSS file… So, here it is:

view plaincopy to clipboardprint?

1. var cssDummy = {
2. init: function(){
3. // Appends ”dummy-element” div to body:
4. $(”).appendTo(’body’);
5. },
6. check: function(callback) {
8. // Checks if computed with equals that which is defined in the StyleSheets (2px):
9. if ($(’#dummy-element’).width()==2) callback();
11. // If it has not loaded yet then simple re-initiate this
12. // function every 200 milliseconds until it had loaded:
13. else setTimeout(function(){cssDummy.check(callback)}, 200);
14. }
15. }

var cssDummy = {
	init: function(){
		// Appends "dummy-element" div to body:
		$('').appendTo('body');
	},
	check: function(callback) {

		// Checks if computed with equals that which is defined in the StyleSheets (2px):
		if ($('#dummy-element').width()==2) callback();

		// If it has not loaded yet then simple re-initiate this
		// function every 200 milliseconds until it had loaded:
		else setTimeout(function(){cssDummy.check(callback)}, 200);
	}
}

And, right at the end of our plugin we’re going to call the cssDummy.init function:

cssDummy.init();

We’re done! The entire plugin now looks like this:

view plaincopy to clipboardprint?

1. jQuery.fn.styleSwitcher = function(){
2. $(this).click(function(){
3. loadStyleSheet(this);
4. return false;
5. });
6. function loadStyleSheet(obj) {
7. $(’body’).append(”);
8. $(’body’).css({height:’100%’});
9. $(’#overlay’)
10. .css({
11. display: ’none’,
12. position: ’absolute’,
13. top:0,
14. left: 0,
15. width: ’100%’,
16. height: ’100%’,
17. zIndex: 1000,
18. background: ’black url(img/loading.gif) no-repeat center’
19. })
20. .fadeIn(500,function(){
21. $.get( obj.href+’&js’,function(data){
22. $(’#stylesheet’).attr(’href’,'css/’ + data + ‘.css’);
23. cssDummy.check(function(){
24. $(’#overlay’).fadeOut(500,function(){
25. $(this).remove();
26. });
27. });
28. });
29. });
30. }
31. var cssDummy = {
32. init: function(){
33. $(”).appendTo(’body’);
34. },
35. check: function(callback) {
36. if ($(’#dummy-element’).width()==2) callback();
37. else setTimeout(function(){cssDummy.check(callback)}, 200);
38. }
39. }
40. cssDummy.init();
41. }

jQuery.fn.styleSwitcher = function(){
	$(this).click(function(){
		loadStyleSheet(this);
		return false;
	});
	function loadStyleSheet(obj) {
		$('body').append('');
		$('body').css({height:'100%'});
		$('#overlay')
			.css({
				display: 'none',
				position: 'absolute',
				top:0,
				left: 0,
				width: '100%',
				height: '100%',
				zIndex: 1000,
				background: 'black url(img/loading.gif) no-repeat center'
			})
			.fadeIn(500,function(){
				$.get( obj.href+'&js',function(data){
					$('#stylesheet').attr('href','css/' + data + '.css');
					cssDummy.check(function(){
						$('#overlay').fadeOut(500,function(){
							$(this).remove();
						});
					});
				});
			});
	}
	var cssDummy = {
		init: function(){
			$('').appendTo('body');
		},
		check: function(callback) {
			if ($('#dummy-element').width()==2) callback();
			else setTimeout(function(){cssDummy.check(callback)}, 200);
		}
	}
	cssDummy.init();
}

We can now call the jQuery plugin like this:

$('#style-switcher a').styleSwitcher();

From :http://net.tutsplus.com/javascript-ajax/jquery-style-switcher/

ShareThis

In next few days Sadaf Technology Development Company will lunch a new unique internet project in Palestine and meddle east called ZAAD.

The hole meaning of ZAAD in the Arabic language that thing help the traveler and he need during the trip.

So if a one of us need to search for some information like “how to cook Mjadara” he may use Google search engine or msn to found any information related with “Mjaddra” and he will found many result about that ,the life became easy.

Therefore My Team in Sadaf Technology Development develops new solutions to help people to find specific information that not implement in search information like Google.

For example when any one needs to search about technology company in Palestine he will use Google or any search engine or directory but I sour he will can’t find good information.

But if you use ZAAD and just type “tech” in search box you will found not only many information but specific information like company name ,logo, contact numbers ,address’s ,emails, website and contact person and his title.

From this point we develop ZAAD and work hard on this project for five month to release it soon.

ZAAD team not normal team,All of us have a job in ZAAD and we complete each other.

ShareThis

These web programming techniques (now, of course, known collectively as AJAX) have become incredibly popular, especially among Web 2.0 startups and their early adopters.

The developers of Ruby on Rails recognized early on that allowing RoR developers to easily AJAX-ify their webapps would be a great addition to the framework.

With the addition of RJS Templates to Rails core, the AJAX bar was lowered even further.

Simple AJAX requests like incrementing the number of diggs a story has received, or splicing a comment into a blog, are remarkably fast, not to mention user friendly.

What we’ll be addressing today, though, is optimizing ever more complex AJAX requests that might involve a multitude of SQL calls and JavaScript rendering techniques.

Not all of the techniques are strictly JavaScript/browser-oriented. The list was actually derived from the steps that we took to optimize Mailroom, the first app in the Sproutit suite for small businesses.

Mailroom is built for use with small teams; it can be used to manage shared email accounts such as support@ and sales@. It combines an ajax-rich front end with features like tagging, saved replies (for later reuse) and shared internal conversation notes.

When we first launched Mailroom, the service was reasonably fast. As we grew and our server got busier, however, some customers started to complain about how long it took for some of our AJAX functions to complete.

The following optimization techniques, though not complete by any means, were just a few of the methods we used over the course of several weeks to bring Mailroom, literally, up to speed.

Following the performance boost, Mailroom’s response times for a Load Conversation call (via AJAX), went from 2-8 seconds to averaging less than half a second. Once we added pre-caching (technique #5) on the client side via JavaScript, clicking on a message resulted in a near-instantaneous load; sometimes faster than Outlook or Apple Mail.

Possible Sources of Latency

When building out your AJAX application, it’s a good idea to keep in mind the different sources of latency that can slow down the user experience. These include:

1. The Database (both in memory and filesystem swap)
2. App Server Execution & Rendering
3. The Webserver
4. The Network
5. The Browser (only in really complex AJAX apps)

There are others, but we hope this broadly covers them all. We’ll only be taking a look at a few of these sources, but it’s useful to keep them all in mind as you build out your app.

5 Ways You Can Optimize Your Ruby on Rails/AJAX Application

1. Optimal Database Indexing
2. Eliminate Redundant SQL Queries
3. Fragment Caching
4. Response Text Compression/Minimization
5. Pre-rendering and Client-side JavaScript Caching

1. Optimal Database Indexing

For many applications, database indexing will be the biggest performance booster of them all.

Sample output from a Rails log file:

  Completed in 8.29523 (0 reqs/sec) | Rendering: 2.68176 (32%) | DB: 5.38202 (64%) | 200 OK [http://railsapp.org/action]

This action would be an ideal candidate for database optimization. If, however, you see something like DB: 0.05 (5%), the action is already spending most of it’s time rendering and there’s probably not a lot you can do in the way of database indexing.

It used to be somewhat difficult to pinpoint the exact function call in your Rails app that was generating an SQL query. But with last year’s release of Nathaniel Talbot’s QueryTrace plugin for Rails, this query back tracing process got a whole lot simpler.

After you install the QueryTrace plugin your Rails app (in the ‘development’ environment) will give you output like this in your log/development.log:

 Conversation Load (0.001538)   SELECT * FROM conversations WHERE (conversations.id = 23453) LIMIT 1
    app/models/feed_observer.rb:14:in `after_create'
    app/controllers/conversation_controller.rb:162:in `send_to'
    script/server:3

As you can see, it’s now trivial to find the exact call that’s generating the SQL database hit.

Adding Indexes via Migrations

The following is a migration’s self.up method to both create an articles table and add a few indices:

def self.up     # brings db schema to the next version
  create_table :articles do |t|
    t.column :title,      :string
    t.column :author_id,  :integer
    t.column :body,       :text
    t.column :is_live,    :boolean, :default => false
  end
  add_index :articles, :author_id
  add_index :articles, [ :author_id, :is_live ], :name => ‘author_live_idx’
end

This would create both a single-column index on the author_id, as well as a multi-column index on author_id and is_live.

When in doubt, use a tool like railsbench or the Ruby Performance Validator to see where the bottlenecks are in your Rails app.

2. Eliminate Redundant SQL Queries

Note: this one is more of a “gotcha” applicable to those of us who are new to Ruby on Rails. (Since I’ve fallen victim to this mistake several times, I thought it was worth mentioning here.)

It’s always a good idea to keep a ‘tail -f log/development.log’ open when you are developing your Rails apps. (Win32 users can get tail, etc. here or use Cygwin )

You might be surprised at what you find if you are not in the habit of checking your query logs.

Ever written a quick hack like this?

  class ApplicationController < ActionController::Base
    def current_member
      return Member.find(@session[:member])
    end
    helper_method :current_member
  end

Only to discover that you’re actually calling current_member more than once in a particular controller/view combination? (thus generating multiple SQL calls for the same unchanged ActiveRecord object)

Here’s how to cache the variable in a per-request instance variable so that the Member.find(session[:member_id]) database query only gets called once per request:

  class ApplicationController < ActionController::Base
    protected
      def current_member

        @current_member ||= Member.find(session[:member_id])
      end

      helper_method :current_member
    end
  end

3. Response Text Compression/Minimization

Before attempting the below technique, the simplest way to reduce the number of bits sent across the wire is to enable gzip compression in your web server.

Some links on gzip compress: mod_deflate (apache 2.2), thread on config’ing lighty with gzip, apache 2.2 mod_deflate tutorial.

In the initial version of Mailroom, we were loading the tag conversation HTML module via AJAX for every load conversation request.

There was quite a bit of superfluous HTML that was being returned, when all we really needed was the specific tags that this particular conversation had been tagged with.

By the way, this kind of optimization is helpful when you have one master page load (where it’s OK to take 1-2 seconds longer), followed by many successive AJAX requests that you want to be rendered as quickly as possible.

We’re also targeting the size of the AJAX response text sent back by the server. A 4k response text is of course more preferable to a 16k one.

Initially, this was the HTML snippet being returned for every load conversation AJAX call:

Choose from the tags below:


         … lots of tags  …


or enter some new tags:


 …
    

Instead of returning this whole chunk of HTML each call, we are going to load a static, hidden HTML div once on the initial page load, and return (via AJAX, each call) just the bare essential tag data needed to render this static HTML into a per-conversation tag editor.

First we create a simple Tags object in javascript (with a little help from Prototype):

  Tags = Class.create();
  Tags.prototype =  {
    initialize: function(conversation_id, tag_str, tag_ids) {
      this.conversation_id  = conversation_id;
      this.tag_str          = tag_str;
      this.tag_ids          = tag_ids;
    }
  }

In your main page load, we render a static version of the tag editor template that stays in a hidden div.

The static HTML in a hidden div:

        Tags: #TAGS# 
      … a lot more static HTML.  this olds a static list of tags   checkboxes for this organization  …

When a conversation is loaded, the contents of the hidden div will be read in via JavaScript. Regular expressions are performed against it on the fly to replace elements like #TAGS# with actual per-conversation data returned via the AJAX request.

Here we create a simple JavaScript function that pulls in the contents of the hidden div, performs regex replacements on it, and completes with a Prototype Insertion call of the newly rendered HTML.

  loadTagEditor: function(tags) {
    var tags_static = $('tag-editor-static').innerHTML;
    var regex = /-static/g;
    tags_static = tags_static.replace(regex, '');  # Strip out the "-static" portion of the ids

    var tags_regex = /#TAGS#/;
    tags_static = tags_static.replace(tags_regex, tags.tag_str);
    ...
    new Insertion.After('the-widget-before-tag-editor', tags_static);
  }

Now whenever a conversation is selected, we just need to make sure the “loadTagEditor(tags)” method is called.

There are a few gotchas you’ll want to watch out for with this technique, such as not ending up with duplicate ids in your HTML.

In the hidden, static divs, one way to avoid duplicate ids is to append all your id names with ”-static” and then strip out the ”-static” when you load in your hidden div HTML. (that’s what we do above with the Regular Expression)

Now, our original chunk of HTML (which can really add up if you have 20 – 50 tags) that was previously being returned back with each Load Conversation AJAX request—is now replaced with a few simple lines of JavaScript:

  tags = new Tags(460857, 'home Marketing Development', new Array(1251, 1252, 1460));
  loadTagEditor(tags);

This is the Rails RJS (inside show_conversation.rjs, perhaps) that would be used to generate the above JavaScript:

  page << "tags = new Tags(#{@conversation.id}, '#{@conversation_tags * ' '}', new
Array(#{@conversation_tag_ids.inspect_raw}));"
  page << "ch.loadTagEditor(tags);"

4. Fragment Caching

Here we’ll use the ever so Web 2.0 example here of the tag cloud. These little beauties can be expensive to calculate in SQL. Once you’re site has been TechCrunched, you’ll want to make sure that your tag cloud (especially miniature versions loaded on heavily-trafficked pages, or via AJAX) gets cached as a Rails HTML fragment.

  class TagController < ApplicationController

    def tag_cloud
      fragment = read_fragment("myrailsapp.com/tagcloud")
      if not fragment
        setup_tag_cloud
        fragment = render :template => “tag/tag_cloud”
        write_fragment(”myrailsapp.com/tagcloud”, fragment)
      else
        #logger.info “Fragment cache read: #{fragment}”
        render :text => fragment and return
      end
    end

    private
      def setup_tag_cloud
        # Expensive SQL queries here …
      end
  end

Uncomment the logger.info call to verify that your fragment really is being read from the cache!

Admittedly, fragment caching in Rails can make your code less maintainable. It’s a technique that should really only be used for expensive-to-compute, fairly static portions of your site.

There are several helpful rails caching plugins on the Plugins page on the RoR wiki.

One simple but effective plugin is the Timed File Store which allows you to set an expiration (e.g. 15 minutes) on your cached fragments.

5. Client-side JavaScript Caching and Pre-rendering

If you really want to wow your users, pre-cache commonly called AJAX components into hidden divs so that the only time necessary to load them is the time it takes their browser to execute (eval) the pre-rendered JavaScript.

In the following example, we’ll cache conversations into hidden divs so that whenever a user clicks on a conversation, it’ll load almost instantaneously.

The pre-caching functions will all access a single global JavaScript variable that holds an array. That array will be populated on the first page load with the conversation IDs that should be cached.

Here’s the inline JavaScript (placed at the bottom of the main rendered HTML page):

Here are the JavaScript functions that do the preloading/caching:

  // Uses JavaScript's "setTimeout" function to call the "loadFirst" method (once per id).
  //    This method handles the logic of delaying the first load (to give the parent HTML page
  //    time to load) and putting a delay between each AJAX load so as to not overwhelm
  //    the browser & server.
  function preLoader() {
    var cnt = 0;
    var offset = 250;              # Milliseconds to delay the initial load
    var delay_per_load = 500;      # Milliseconds between each load
    ids.each(
      function (id) {
        setTimeout("loadFirst()", (offset   (cnt * delay_per_load)));
        if (id > 0) {
          cnt  = 1;
        }
      }
    );
  }
  // Pops off the first element in the 'load_ids' array and loads it
  function loadFirst() {
    var id = load_ids.pop();
    if (id > 0) {
      preloadConversation(id);
    }
  }
  // Preloads the conversation specified by creating a new AJAX request -- Note the use of Prototype's
  //   "onComplete" method to specify that "cacheConversation" should be called when the AJAX request
  //   has been completed and its data returned.
  preloadConversation = function(conversation_id) {
    new Ajax.Request('/mailroom/conversation/'   conversation_id   '?preload=true', {asynchronous:true, evalScripts:false, onComplete: cacheConversation});
  }
  cacheConversation = function(originalRequest) {
    // ... omitting some "clever" hacks used to get the conversation id ('conv_id' variable) ...
    var hidden_div_id = 'pre-'   conv_id;
    // Set the Inner HTML of a hidden div to the JavaScript passed back that was generated by Rails RJS templates:
    $(hidden_div_id).innerHTML = encode(originalRequest.responseText);
  }

The following is the JavaScript function used to either A) load the cached conversation, or B) if the cache is not present, load the conversation directly off the server:

  loadConversation: function(id) {
    if ($('pre-'   id).innerHTML != '') {
      var decoded = decode($('pre-'   id).innerHTML);
      eval(decoded);
    } else {
      // Load the conversation via a new Ajax call (eval'ing the result by setting "evalScripts:true",
      //    then caching it via the onComplete parameter).
      new Ajax.Request('/mailroom/conversation/'   id, {asynchronous:true, evalScripts:true, onComplete: cacheConversation});
    }
  }

Phew. Well, there you have it. JavaScript, long the domain of cut n’ paste HTML jockeys, has proven in recent years to be a formidable challenger to Flash (and Applets, remember those), once hailed as the future of interactive web applications. Of course, each has their place and own unique advantages and disadvantages.

While most applications wouldn’t need the kind of firepower described in this technique, hopefully you’ve learned a little bit about JavaScript, Rails and RJS along the way.

Footnote

The inspect_raw method used in technique #5 is a custom method we added to the Array class. Go here to learn more about this method and how we implemented it.

from :http://thinkvitamin.com/features/ajax/5-ways-to-optimize-ajax-in-ruby-on-rails/

ShareThis

And superior service to many of Google’s translation services provided by ajeeb and the number of Arabic sites and that is supposed to be high on the first rank in this area.

ShareThis