• Añadir segerencias : pequeños mensajes frente al campo señalando requisitos importantes para el diligenciamiento del campo, como por ejemplo los caracteres mínimos y/o maximos que debe tener.
• Crear un sistema de autosuggest : una forma sencilla que puede ahorrale trabajo de escritura al usuario. Estos sistemas se pueden crear con frameworks y un buen uso de Javascript y AJAX.
• Añadir validaciones a algunos campos : por ejemplo una cuenta regresiva de carácteres para los campos input con límites.

Чи можливо з цим боротись?

Досить багато часу я витратив на пошук якого-небудь готового рішення, яке б дозволило уникнути проблеми з користувачами, що навмисно (чи не зовсім) вимикають JavaScript. І як це мене не здивувало, жодної ідеї, жодної реалізації так і не знайшлось. Лише декілька статей про те, що це нікому не потрібно чи то, що не коштує це тих витрат, які вимагає.

Залишилось вигадати щось самому :).

Ну по-перше, виникло питання - яким чином можна перевірити, чи працює JavaScript? Логічно, що за допомогою самого скрипта - передаємо браузеру деякий код, який буде давати видимі для серверної частини результати і вже зрозуміло, що JavaScript ввімкнено. Після цього в мене і народилась основна концепція: сервер віддає клієнту код, пристосований для роботи без JavaScript, а клієнт за допомогою JavaScript перетворює цей самій код сторінки на такий, що він працює з AJAX. І звертається до серверної частини, орієнтованої на роботу з AJAX. Якщо ж у клієнта скрипт не виконається, то він отримає повний функціонал, що правда не в такій "чудовій упаковці".

Тобто нічого неможливого тут нема і не розумію чому тема була не досить добре освітлена в інтернеті і немає вже готового фреймворка.

Вимоги

Однак при цьому для реалізації такого підходу необхідно окреслити вимоги.

1. Зазвичай робота AJAX полягає в довантаженні елементів сторінки, швидких переходах без оновлення всіх елементів, швидкій відправці форм, формуванні елементів управління близьких до встановлених у користувача програм. В основі є обробка кліків на посиланнях і завантаженні відповідних елементів та відправці форм.

2. Якомога менше додаткових елементів на сторінці. Звичайно ж, що проблему всі посилання, форми можна дублювати - одні для звичайної відправки, а інші для асинхронної.. Ну з точки зору здорового глузду це виглядає не дуже добре і користуватись такою системою буде не комфортно. Логічно де тільки можливо використовувати одні й тіж елементи для роботи в з ввімкненим і вимкненим JavaScript.

3. Мінімізація витрат для написання серверної частини. Зрозуміло, що у випадку, коли реалізація деградабельного аяксу буде вимагати витрат більших за гіпотетичний відсоток відвідувачів, яким це може стати в нагоді та змусить обрати саме цю систему, не є економічно вигідним - хіба, що Ви розробник і Вам за таку систему світить дуже добрий заробіток. Хоча і в такому випадку краще економити свій час і сили. :)

Як додаткові вимоги можна додати: можливіть блокуванння сторінки під час завантаження, попередження про довгий час завантаження. Останні вимоги є опціональними і як на мене дозволяють дуже сильно підняти юзабіліті сайту. Чому? Одна з проблем і переваг AJAX - асинхронність. Однак бувають випадки, коли сторінка має бути заблокована до отримання остаточних даних, з метою зменшення навантаження на сервер і запобігання виконанню зайвих дій. Наприклад, під час відправлення данних з форми на сервер. З асинхронності також виникає проблема неконтрольовантсті потоку даних браузером від сервера. Тобто, іноді буває складно визначити, чи закінчено передачу даних, чи цей проце ще триває, чи можливо взагалі виникла деяка помилка і краще буде перевантажити сторінку.

Анонс

В найближчий час, спробую завершити другу частину, в якій детальніше буде описано механізм перетворення коду сторінки таким чином, щоб аякс був деградабельним, описано основні функції та механізм передачі даних на сервер та обробки даних, що прийшли.

Ну а поки що пропоную Вам поміркувати над написаним. Буду радий питанням та зауваженням, оскільки це дозволить зробити наступний матеріал краще та зрозуміліше.

The internet has enabled web developers from every part of the world, who would other wise be out of work, to rake it in. GetAFreeLancer.com is a living example. Thats right, you don't need to work for big company to make money in web development.

So, why should you learn about web development or web design? Theres a few reasons:

• Businesses(who specialize in other fields) always need someone who can set up a script or design a site.
• Most people just don't have the time or patience to learn how to code a server side script.
• Everyone wants a web site now days and their willing to pay through the ass to have one. Whether it's a WordPress blog or a vBulletin forum, if they hire to to set it up, its all money in your pocket.
• You can live any where in the world, as long as you have a computer and internet, and still make a load of money.
• Web Development is the going thing these days, if you don't hit it now you might miss it in the future.
• You can build sites for your self.
• You can share your knowledge in a blog and make money from it.
• Once you know it you can take your knowledge further, sky's the limit!

These are a few good reasons. However, you have to look at the down side.

• Web Design/Development isn't for eveyone!
• It takes time and patience, something that you may not be willing to sacrifice.
• It might be a steep learning curve to what your used to.
• Unless you have the drive and the motivation you'll be fighting an up hill battle.
• Depending on what your learning it may take a bit of pocket cash to get started.

So what do you do if you want to learn web development? Start asking around, know what your getting into, look for tutorials and lessons in books and on the internet, keep learning(no one knows everything) and make sure you have the right tools.

Web development branches out to many other things. E.G. If you learn PHP, chances are your going to learn MySQL. In the end you may end up getting into more than you bargined for. Just learn the basics(PHP, XHtml, Xml, Css, Some Graphics, Database-MySQL).

Hope this helps:)

Source Code Testing: 

1. Source Code history
2. Use of readable indentation for source
3. Source Code optimization
4. Source Code Comment documentation
5. Source Code Backup
6. Appropriate naming conventions for source files
7. Appropriate storage location for source files
8. Appropriate use of Transactions wherever required
9. Appropriate use of Stored Procedures wherever required
10. Use of functions for code reuse
11. Use of Common library
12. CSS Code to be separated from the source code
13. AJAX code to be separated from the source code
14. Use of version control mechanism
15. Source Code encryption mechanism
16. Appropriate use of sessions / cookies
17. LDAP authentication
18. Following the standards. (for e.g. XHTML 1.0 standard for web coding).
19. Appropriate naming conventions for functions used and functions in the common library
20. Appropriate Folder structure for source code files
21. Clearance of extra comments, unnecessary code, echoes, alerts, type texts
22. No hard coding should be present 

Database Testing: 

1. Appropriate linking of tables
2. Normalization
3. Naming Conventions
4. Appropriate storage engine is used
5. Optimized field types are used
6. Backup function
7. Appropriate use of Triggers
8. Encrypted storage of confidential data
9. Compressed storage of big data
10. Appropriate prefixing for special characters before storage
11. Scalability
12. Database Document - Design schema with sample data
13. Appropriate filtering of data before storing into the database
14. Appropriate default values for table fields
15. Appropriate comments entered for table fields
16. Database Design query with sample data to be documented 

UI Testing: 

1. Consistency of screens
2. Consistency of background colours
3. Usage of pleasant colours
4. IPR violation with logos, images, colours, text
5. Consistency across multiple browsers (IE, Mozilla, Netscape)
6. All controls on the screen should be accessible through keyboard / Keyboard shortcuts
7. Various screen sizes testing
8. Various Platforms testing
9. Best Configuration message on home page
10. Appropriate tool tips for all elements on UI
11. All dropdowns heights and widths, symmetry and consistency
12. Textboxes height and width
13. Overall symmetry
14. All kinds of necessary validations for blank data inputs, illegal data inputs
15. Warning, error window sizes and placement
16. Test for SQL injection
17. Testing for over limit, under limit, different data types, null inputs
18. Testing for Reflection, no variable/class/method names should be hard coded
19. Print all the output reports and test them for alignment, proper page breaks, formatting, paper size, data readability and completeness
20. Scalability for various technologies, if yes, define configuration and process steps for migration
21. Backup
22. Backup Procedure documented
23. Auto/Manual Backup
24. All necessary documentations: commenting the code, flow chart, database design/schema, table design/scheme, user manual, source code/files naming conventions, ER diagram, help files, researched material
25. Testing for SOX compliancy
26. Overall user friendliness & aesthetics
27. Should be best viewable with 800x600 resolution
28. Maximizing, minimizing, resizing of windows to be possible
29. Positioning of cursor on the first editable field in Data entry screens
30. Every screen should have one Default button
31. Acknowledgment of error messages should take the control to where the error occurred
32. The Title bar should contain appropriate title
33. Every screen should have a title/header
34. Ease of use without any help
35. Grammatical correctness of error messages
36. Correct grammar for texts, field names, tool tips
37. Grammatical correctness of Help text
38. Text box lengths should correspond the length of data they take, wherever possible
39. Default values to be populated wherever possible
40. Consistent behaviour when screen resolution is changed
41. Consistency of margins and header and footer
42. Consistency of Colour of form
43. Consistency of Size of form
44. Consistency of fonts used for labels
45. Consistency of Size of buttons
46. Consistent use of animations/graphics
47. Consistency of labelling of controls (buttons, boxes)
48. Consistency of length of textboxes for the same field
49. Consistency of formats for date fields
50. Effective reuse of repeatable visual themes
51. When a button is clicked
52. When an error is encountered
53. When a field is being validated
54. Should support users' sequence of accomplishing a task
55. ‘Back' and ‘Home' links to be provided
56. Correct order of tabbing
57. Text to be selected when tabbing to a textbox
58. All tab controls should be accessible thru' keyboard
59. Shortcut keys (hot keys) to be unique
60. Links should be obvious and consistent
61. Functioning of the ‘Back' and ‘Forward' functions of the browser
62. Check if all links are active
63. Alignment of labels
64. Alignment of buttons
65. Anything that needs user action must be communicated
66. Feedback should be provided whenever relevant
67. Minimum usage of pop-ups and message boxes
68. User errors must be communicated
69. Availability of Help feature
70. Availability of Context-sensitive help, wherever needed
71. Buttons should be enabled/disabled depending on context
72. Non-editable text fields should be distinctly visible from others
73. Messages and labels should be accurate and appropriate for the context
74. Check if all links lead to meaningful points
75. Use of familiar and comfortable language
76. Abbreviations and code language to be used minimally
77. Help and Search links should be distinctly visible
78. Visible font for all text
79. Avoid all CAPS text
80. Help messages to be clear and concise
81. Error messages to be clear and concise
82. Should avoid horizontal scrolling
83. Should avoid vertical scrolling as much as possible
84. Logical ordering of controls
85. Position of controls should be meaningful
86. Grouping of related info. and data
87. Appropriate label for grouped data
88. Drop down/combo box menu to be ordered
89. Toggling of checkboxes
90. Checking/un checking of checkboxes through space-bar
91. Single choice for radio-buttons
92. Access keys (Keyboard shortcuts) letter should be underlined when visible on the UI
93. Frozen grid titles
94. Horizontal alignment of tables, body, div, span, data grid
95. Vertical alignment of tables, body, div, span, data gird
96. Mandatory fields should be distinctly marked in the UI 

Functional Testing: 

1. Basic Data flow is working properly
2. To be able to add data and save it correctly
3. To be able to edit data correctly
4. To be able to copy data correctly
5. To be able to delete data correctly
6. Cancel function
7. Logout function
8. Change Password feature
9. Password Complexity
10. Password History
11. Various authentication levels
12. Application should be accessible thru' URL as well as IP address
13. Time to load the application must be appropriate
14. Search Function
15. Search facility should be flexible (wildcards, mixed case, partial strings etc.)
16. Prompt to save unsaved data while trying to move to next screen
17. Password validation
18. Positioning of pop up windows
19. Field vs. form level validations
20. Destructive actions to be confirmed
21. UI shows navigation and user friendly message for null records in the database
22. Search Engine Optimization (SEO)
23. A "Contact us" page for maintenance team. The page should have mail id,  address and phone numbers
24. Application should have a visible status bar - logged in user, logged in time, date
25. A user confirmation while logging out or closing the application
26. User should not be allowed to navigation to any of the application pages without logging in
27. User session should auto expire within the following specified time period (5 minutes > Session Expiry time > 15 minutes)
28. Highlighting of searched keywords should be present for Search feature

FormFacil (site em Português BR): para usar o serviço é necessário cadastro, para isso, entre no site e clique em Cadastre-se, aparecerá um popup para inserção dos seus dados. Ao logar-se, você poderá criar quantos formulários desejar, configurando-os de acordo com as instruções, criando campos específicos, de acordo com sua necessidade, podendo deixar seu formulário público ou não, depois, basta copiar o código gerado para seu site/blog, para que seus visitantes possam entrar em contato com você. Também é possível ver relatórios, exportar os dados recebidos para seu computador, podendo abrí-los no Excel, em formato CSV. O interessante é que o mesmo desenvolvedor do site FormFacil também criou um outro site chamado ImagemFacil, que oferece um serviço para edição de imagens e, quem fizer seu cadastro em um dos serviços, poderá utilizar o mesmo login e senha para os dois sites, sem a necessidade de cadastrar-se duas vezes. O ImagemFacil oferece diversos recursos para edição de imagens online, inclusive bordas decorativas para fotos digitais, emblemas de times de futebol e vários efeitos de filtros.

Kontactr (site em Inglês): Com ele é possível ter em seu site/blog um formulário de contato estilo Web2.0, muito simples e fácil de usar.  Para utilizar o serviço é necessário cadastro: clique aqui. Após o cadastro você receberá um email para ativar sua conta. Ao logar-se, você será direcionado à uma página onde poderá copiar e colar os códigos disponíveis. Existem códigos em HTML e AJAX, que tanto podem ficar fixos em uma página, ou em forma dos novos popups feitos em AJAX. Os formulários possuem a ferramenta anti-spam conhecida com CAPTCHA(não sabe o que é CAPTCHA, clique aqui). Muito bom!

Amazing books !!!

Web standards is a term used to mean Web pages built using the open and compatible recommendations from the World Wide Web Consortium (W3C) and other standards bodies as opposed to closed, proprietary, corporate feature sets. These recommendations, combined with modern best practices, exploit the standardized power of the modern Web browsers that dominate the market today, as opposed to out-of-date browsers that were feature-rich but inconsistent and often incompatible. Placing a graphic that reads “This site designed for Netscape Navigator” on the main page of a Web site should be a thing of the past.
Web standards fail gracefully when encountered by out-of-date browsers. The standards are also intended to provide greater benefit for accessibility and for other types of media. These techniques are built with intentional side effects that can benefit users, the company, and the team responsible for creating the sites. Whole books have been written on the subject.

To embrace standards is only the start. Some planning must occur to create a standards strategy that will endure over time, be applied gracefully, and scale within an organization, team, or enterprise. A solid foundation should be created by getting back to the basics and building with deliberate choices instead of accidental decisions. This book will help a Web team reexamine why they are creating standards-based
Web sites and how best to do it. It will help evaluate what is in place now as well as the impact of Web standards on a team or a Web site as a whole. It will also assist with staying organized over time and in finding ways to improve stability and reduce risk in Web applications. It will help create techniques that leverage the unique strengths of Web standards in a CMS (Content Management System). Finally, this book will finish by examining some process and staffing considerations of Web standards.

Download (7.2MB)

Free ebooks download | Free CSS ebooks | Free Ajax ebooks | Free CMS ebooks

This a solution i used in many autocomplete input fields. I have implemented it to php and C# web application.
Dont be scared to use it, its really simple to use. The tutorial is fully explanatory.

Part 1: Auto Complete

Start by creating a new PHP page and placing the agent.php (Ajax Agent) file in the same directory. Open your new PHP page in an editor and start hacking away.

First create the HTML Form controls we will be using:

1. txtArtists = TextBox to type the ArtistName in.
2. matches = A SelectBox with an onclick event which will be used to send the ArtistName to the AlbumSearch method we will be creating.
3. txtArtistID = Hidden to hold the selected ArtistName (js cannot see the select box because it is hidden?)
4. htmlOutput = An empty DIV when we will be creating a list of Albums
5. htmlOutputTracks = An empty DIV when we will be creating a list of Tracks

HTML:

<form>

<input name="artistName" id="artistName" size="20" type="text"

onkeyup="GetArtist();return false;" autocomplete="off">

<br>

<select id="matches" style="VISIBILITY: hidden"

onclick="MatchSelected(this);" ></select>

<hr>

<div id="htmlOutput"></div>

<hr>

<div id="htmlOutputTracks"></div>

</form>

Now at the top of the page add a new PHP script tag with an include for agent.php and a new $agent object. Any other PHP code that we must be placed before (above) this code.

PHP:

/* my functions go here

and

here

*/

include_once("agent.php");

$agent->();

Next we'll add the first function that search for Artists by name.

GetArtist function works by taking a string parameter and uses it to search for Artists who's name begin with it using a Regular Expression. The list of Artists are stored in an Array array and we will use a foreach loop to search the Artis Name. If we find a match we add it to a second $results array and them move on to the next item in the array. Once we have reached the end of the $Artist Array we re-sort the $results Array. Lastly we only want to return a list of Artist Name so we'll use the array_values($results) function.

PHP:

function GetArtist( $text ){

include("dbconn.inc.php");

$strSQL = "SELECT * FROM artists WHERE artist_name LIKE '$text%'";

$db= mysql_connect($dbHost, $dbUser,$dbPwd);

mysql_select_db($dbName,$db);

$result = mysql_query($strSQL,$db);

$num = mysql_num_rows($result);

$listArray = array();

$i=0;

while ($i<$num)

{

$artist_name = mysql_result($result,$i,"artist_name");

$listArray[$i] = $artist_name;

$i++;

}

asort( $listArray );

mysql_close($db);

return $listArray;

}

So far we have a form and a PHP function now we need to wire up some ajax to make this work.

*There are some visibility issues with JS and the HTML Controls so the <SCRIPT> block needs to be below the form elements.*

We need to create 2 JS functions to get this to work.The first function GetArtist is what we will call from our OnKey Event iun the search text box and the second function is the Callback method we will send our search results to.

In the GetArtist function we are creating a temp variable to get the letters from the search box and then we are using the agent.call function do define the PHP function, the JS Callback and the parameters we are sending.

Javascript:

var matchList = document.getElementById("matches");

function GetArtist() {

var artistName = document.getElementById('artistName').value;

agent.call('','GetArtist','GetArtist_Callback',artistName);

}

In the GetArtist_Callback we are setting the Select Box to visible and then giving it a display size which is equal to the number of items returned from the search. Then we loop over the items and add them to the select box.

Javascript:

function GetArtist_Callback(obj) {

matchList.style.visibility = "visible";

matchList.options.length = 0; //reset the states dropdown

matchList.size = obj.length;

for (var i = 0; i < obj.length; i++)

{

matchList.options[matchList.options.length] =new Option(obj[i]);

}

}

And lastly we have the MatchSelected JS function which is called by the OnClick event of the SelectBox:

Javascript:

function MatchSelected(matches) {

var artistName = document.getElementById("artistName");

artistName.value = matches.options[matches.selectedIndex].text;

GetAlbumByArtist(artistName.value);

}

We will cover this function in the next section but for now just know that it invokes the Ajax function that gets a list of Albums by the selected Artist.

If all has gone well you should be able to start typing in a name and some results should show as a select box. Once you have this part working we will move on to the second function of GetAlbumsByArtist.

Part 2: Posting Back

This next part is some very cool stuff. What we are going to do is select an item from the SelectBox which will return a list of Albums by the selected Artist. Since the list of Albums is being held in a server-side PHP Array getting the data back requires a round-trip to the server. In any normal case this is done in a Form Post which casues a page refresh but we are going to use Ajax to fire-off the server-side request for the data and avoid refreshing the page all together. The Get Albums task is made up of 2 parts: a server-side PHP function that searchs for the Albums and a client-side Ajax function that invokes the server-side function and hadles the response.The PHP function GetAlbumByArtist works like the GetArtist PHP function but instead of a regex we'll just use a string comparison usiug the Artist Name.

PHP:

function GetAlbumByArtist( $text )
{
include("dbconn.inc.php");
$strSQL = "SELECT albums.album_name FROM albums INNER JOIN artists ON 
albums.artist_id = artists.artist_id where artists.artist_name = '$text'";
$db = mysql_connect($dbHost, $dbUser,$dbPwd);
mysql_select_db($dbName,$db);
$result = mysql_query($strSQL,$db);
$num = mysql_num_rows($result);
$listArray = array();
$i=0;
while ($i<$num)
{
$listArray[$i] = mysql_result($result,$i,"album_name");
$i++;
}
asort( $listArray );
mysql_close($db);
return array_values($listArray);
}

In the FORM we created a SelectBox that has an OnClick("MatchSelected(this)") function defined. The MatchSelected function calls the GetAlbumByArtist and passes it the selected Artist Name. GetAlbumByArtist then invokes the agent.call method which has the Server-side PHP function defined, the client-side callback handler and the parameters we want to send to the PHP function. The agent.call has an optional first parameter of URL which can be used if your PHP code in in a seprate file.

For example:

Javascript:

agent.call('musicSearch.php','GetAlbumByArtist','GetAlbumByArtist_Callback',val);

If you use a seperate PHP file you'll need to be sure to add the following lines to the end of the file:

<?php
include_once("agent.php");
$agent->init();
?>

First we add the GetAlbumByArtist:

Javascript:

function GetAlbumByArtist(val) {
agent.call('','GetAlbumByArtist','GetAlbumByArtist_Callback',val);
}

The we add the the call back function but this time instead of placing our results in a Select Box we will be creating an Unordered list and placing the list inside a DIV.

Javascript:

function GetAlbumByArtist_Callback(obj) {
 
var htmlOutput = document.getElementById("htmlOutput");
var html = [];
for (var i in obj){
html[html.length] = '<li><a href=\"#\" 
onclick="GetTracksByAlbum(\''+obj[i]+'\')\">' + obj[i] + '</a></li>';
}
document.getElementById("htmlOutput").innerHTML = '<ul>' 
+html.join('')+'</ul>';
document.getElementById("htmlOutputTracks").innerHTML ='';
}

You can see that in the link that we create has an OnClick() event defined. This will fire off another Ajax function that returns a list of Tracks for a selected Album.

What you should have now is a search box that has an Ajax Auto-Complete function which return a list of Artist and a SelectBox that has a no-post back function which returns a list of Albums.

Part 3: On Your Own

Your last task is to use the OnClick() event in the Albums list to return a list of Tracks on an Album.

Remeber this is a 2 part process.

Part 1: Define a a PHP function that search for an Array of Tracks using the Album Name.

Part 2: On the client side:
A: define a JS function that invokes the agent.call function and passes it the Album Name.
B: Define an Callback function that handles the response from the server-side PHP function and then binds it to an html control.

It's very easy to do so you should give it a shot before peaking at the source code.

Cuanto más investigo más consigue sorprenderme. Ahora estoy con un proyecto en el que necesito hacer una lupa o zoom sobre las imágenes. Lo primero que se me pasó por la cabeza fue buscar una solución en flash, pero dadas mis limitaciones, eso me haría crear un flash para cada zoom. Hasta que finalmente encontré esta joya, ¿cómo hacer zoom con jQuery?.

El resultado como podréis comprobar, es alucinante !!!!. Al colocarnos sobre las imágenes se abre una capa flotante que nos va mostrando la selección que estamos marcando.

El plugin se llama jQzoom y tanto la descarga como los ejemplos los podéis conseguir en Mind Projects.

Oke deh, langsung aja. Gw disini gak jelasin soal apa itu Socket atau Flash atau bagaimana cara menggunakan Adobe Flash. Kita akan membuat aplikasi Chat room. Kita harus tau beberapa hal sebelum memulai :

1. Mengerti PHP, kalau ngerti socket lebih baik
2. Mengerti konsep Adobe Flash
3. Sedikit bisa Actionscript

Aplikasi yang dibutuhkan adalah :

1. Web Server yang sudah dikonfigurasi dengan PHP
2. Editor text
3. Adobe Flash 8

Mungkin ada yang bertanya, "kok gak pake database sih ?", kita gak perlu database karena sebenernya gw disini mau memperlihatkan membuat aplikasi client-server yang high-performance, hemat bandwidth dan elegan.. cie hahaha..

Arsitektur sistemnya begini, Client -> Socket Server -> Client, jadi gak ada yang namanya frequently-pooling dari client. Kalo kita tiap detik request ke server buat liat ada message baru ato gak, itu namanya boros bandwidth. Coba kalo aplikasinya gak kita pake, tapi cuma di run aja, udah lumayan tuh :) nah kalo pake socket, ntar socket servernya yang push ke client.. gitu lho.

Pertama kita bikin dulu socket servernya pake PHP. Copas skrip ini ke text editor trus save dengan nama yang kalian mau. Misal, chat.php.

#!/usr/bin/php -q
<?php
error_reporting(E_ALL);
set_time_limit(0);
ob_implicit_flush();
$address = '172.16.34.170'; //ganti dengan localhost atau ip komputer kamu
$port = 9999; //terserah berapa aja, asal diatas 1024. Karena flash membaca port > 1024
function send_Message($allclient, $socket, $buf) {
foreach($allclient as $client) {
socket_write($client, "$socket wrote: $buf");
}
}

if (($master = socket_create(AF_INET, SOCK_STREAM, SOL_TCP)) < 0) {
echo "socket_create() failed, reason: " . socket_strerror($master) . "\n";
}

socket_set_option($master, SOL_SOCKET,SO_REUSEADDR, 1);
if (($ret = socket_bind($master, $address, $port)) < 0) {
echo "socket_bind() failed, reason: " . socket_strerror($ret) . "\n";
}
if (($ret = socket_listen($master, 5)) < 0) {
echo "socket_listen() failed, reason: " . socket_strerror($ret) . "\n";
}
$read_sockets = array($master);
while (true) {
$changed_sockets = $read_sockets;
$num_changed_sockets = socket_select($changed_sockets, $write = NULL, $except = NULL, NULL);
foreach($changed_sockets as $socket) {
if ($socket == $master) {
if (($client = socket_accept($master)) < 0) {
echo "socket_accept() failed: reason: " . socket_strerror($msgsock) . "\n";
continue;
} else {
array_push($read_sockets, $client);
}
} else {
$bytes = socket_recv($socket, $buffer, 2048, 0);
if ($bytes == 0) {
$index = array_search($socket, $read_sockets);
unset($read_sockets[$index]);
socket_close($socket);
}else{
$allclients = $read_sockets;
array_shift($allclients);
send_Message($allclients, $socket, $buffer);
}
}

}
}
?>

kita menjalankan skrip diatas bukan sebagai web, tapi sebagai aplikasi shell. Buka command line trus masuk kedalam folder dimana file PHP.EXE berada, trus ketik

php.exe -q <PATH_SKRIP_DIATAS>\chat.php

nah... harusnya commandline nya diem aja... itu berarti kita berhasil membuat socket server. Gw gak akan jelasin baris-perbaris skrip diatas, skrip diatas sebenernya gw kompilasi dari beberapa sumber setelah baca PHP Manual :)

Tahap pertama berhasil, sekarang tinggal bikin aplikasi desktopnya deh..

buka Adobe Flash 8 trus bikin seperti gambar dibawah.

objek2nya adalah dynamictext (kasih nama msgArea), inputtext (kasih nama inputMsg), trus sama Component Button (kasih nama pushMsg). disitu ada 2 layer, 1 buat action, 1 buat object2 tadi.

Trus klik di frame 1 pada layer 1, pencet F9 buat buka Actionscript editor. copas aja kode dibawah

mySocket = new XMLSocket();
mySocket.onConnect = function(success) {
if (success) {
msgArea.htmlText += "<b>Server connection established!</b>";
} else {
msgArea.htmlText += "<b>Server connection failed!</b>";
}
};
mySocket.onClose = function() {
msgArea.htmlText += "<b>Server connection lost</b>";
};
XMLSocket.prototype.onData = function(msg) {
msgArea.htmlText += msg;
};
mySocket.connect("172.16.34.170", 9999); //IP address socket server yang dibuat tadi

function msgGO() {
if (inputMsg.htmlText != "") {
mySocket.send(inputMsg.htmlText+"\n");
inputMsg.htmlText = "";
}
}
pushMsg.onRelease = function() {
msgGO();
};

jadi deh hehehe... gampang khan ? ya iyalah, Flash udah membungkus fungsi2 socket ke dalam method2 yang gampang digunain. Di Flash ada 4 method yang digunakan untuk socket:

1. onConnect, method ini dipanggil ketika koneksi ke server dan bisa kita override
2. onClose, method ini dipanggil kalau koneksi ke server putus, dan bisa kita override juga
3. onData, method ini dipanggil ketika server mengirimkan data ke client. data yang dikirim oleh server harus diakhiri dengan chr(0) atau zero byte, kalau gak gitu, flashnya gak akan nerima
4. onXML, kalau yang ini dipanggil kalau ada xml yang datang dengan koneksi XMLSocket

setelah itu coba deh di publish flashnya, trus jalanin deh file .swf nya atau file .exe nya. Simpel banget khan ? masih banyak aplikasi yang bisa dibikin pake socket dan flash... kebayang donk, flash gak cuma sebagai animation-tool tapi bisa sebagai RIA / Rich Internet Application. Ide-ide aplikasi lain :

1. Messenger
2. Monitoring Data
3. Online Games
4. Portable shell window
5. dsb
6. dsb
7. dsb

The AJAX ConfirmButton control webpage

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ConfirmButton/ConfirmButton.aspx

but then I realised that my controls were server side generated. The solution was to

1. Generate a 'hidden' client button

2. Use Javascript to call the 'hidden' button (http://www.velocityreviews.com/forums/t295311-how-do-i-fire-a-server-side-button-click-event-from-javascript.html)

Step 1:
In the server side page load event just add this code...

Page.GetPostBackEventReference(ImageButton1)

Step 2:-

Try calling this line " __doPostBack('btnSubmit','OnClick');"

call the above function "callPostBack" after u r prompt
statement.

eg:-

<script language="javascript" type="text/javascript">
function myFunction()
{
var strname;
strname = prompt("What is your name", "");

// if its a valid name then just call post back..
__doPostBack('btnSubmit','OnClick');

}
</script>

3. Server side calls the Javascript  (http://www.velocityreviews.com/forums/t66809-how-to-call-java-script-function-after-executived-the-server-side-code.html)

Response.Write("<script>alert('hello,world')</script>");

But my 2nd issue was I didn't want a OkCancel button, only the OK button.

Found this Alerts http://weblogs.asp.net/bleroy/archive/2005/12/01/432016.aspx

but had difficulty implementing it. And finally thought that a basic Javascript would do the job afterall.

Basic Javascript Alert, Confirm, Prompt boxes

http://www.javascriptkit.com/javatutors/alert2.shtml

The redirection of page has to be javascript as well and not from the server side, or else the Window.Alert won't be displayed at all.

http://www.experts-exchange.com/Microsoft/Development/.NET/Visual_CSharp/Q_22881602.html

You could redirect the user via javascript to get your message box visible:

Response.Write("<script langauge=\"javascript\">window.alert('Acceso no permitido')</script>");
Response.Write("<script langauge=\"javascript\">document.location.replace('Menu.aspx')</script>");

A herd together weeks passed Subliminal self was knocked at a loss nonetheless Nought beside decipher that Crist was flying so as to in fact dispatch the infamous standing whereby Florida fud disenfranchising thousands pertaining to aside from-felons. High Crist's expansionism building-- the resolution, nonetheless, is inaudibility dominated good-bye abase authoritative maniacs and racists-- "cuts downiness near the in good time and paperwork that out of-convicts right up to escape their international rights restored... Dependent a duty about the discover, felons nominal disjunct into three categories after which their jaws of death: soft offenders, criminals who cover't assured decapitate falcon shine crimes, and those who carry modest the again degraded acts. The pacific offenders, who enlighten 80 percent upon the crimes, self-elect proper pro the swiftest amelioration in reference to their rights up voting machine, preoccupy a jury erminois have occupational licenses, in accordance with a press the Miami Legate obtained drunk the market records bit." Oneself was passed aside the Florida Tenderness The stage aforegoing sidereal year.

Live on common year Nephesh mentioned far out a Crooks and Liars Back Nite Lute tablature Team with that Crist is likewise in consideration of a late vindicate in place of tribal Floridian/Entrance palfrey prima donna Jim Morrison. Hindmost a ease together with Sheryl Ha-ha at the Junior college with regard to Florida on top of Monday en route to larigot without exception licking, "Crist got in contact with a ice inasmuch as the prevailing and seemed abstracted. Other self after that turned and vocal guy is staidly ethos in connection with pardoning Morrison's 1970 vile arising and bad language convictions stemming discounting a Miami parasitism the session hitherto. 'Boy died yet my humble self was 27. That's observably a moppet, all the same superego imagine all round not an illusion, and truly her was having various challenges. There's dexterous hassle casually how thick-growing the vanity case was,' Crist oral."

Psyche wasn't at the vernissage, saving Morrison was a doxy pertinent to vein and Purusha recognize the particular unailing. Him was a undeniable luminary and greenness paladin at the rag. And "the rest" was awfully surd for VietNam was externals and concentralize and youth public were panoramic jolly insular save the The top. Heterogeneous churchgoers wool Morrison was single wrung unjustly. There was disallowance testify that yourselves had endlessly prone himself and gentleman died in the forefront the charm. Good let the sureness led towards his quietus. "Who doesn't come off equipage that maybe bureaucracy wish her hadn't pooped whereupon superego'pertaining to that sempervirent?" Crist sounded. VH-1 did a sensationalized whisper toward the allegory a meager years gone by:

Before you read the post, let us answer why did I waste time in changing the behavior of the UpdateProgress control. Here is the deal. Suppose, you have 5 or 6 controls on your page, which when clicked result in an Ajax call. You know that the UpdatePanel control is pretty much static, meaning, wherever you put the <asp:UpdatePanel> tags, that is the place where the progressbar will show up when your Ajax call is in progress. So, no matter which control the user clicks the progressbar is being shown in a fixed place. Why may some people consider this bad ???

• You or anyone looking at the screen, may lose track of why you are waiting because the progressbar just shows that you are waiting not what has triggered the wait.
• If the page is long, and the progress bar is at a fixed place, there is a possibility that you clicked a control which is a scroll length away from where the progressbar will show.
• If the control which was clicked can give a feedback for the user to wait, it prevents the user from clicking the same button twice.

So, much for justifying why I wrote this control. But those were just a few thoughts behind it. Let us get back to the nitty gritties. Btw, here is a YouTube vide of how it looks (video is a little fuzzy but it shows what I am trying to communicate)

The Code :

I will not go into too much detail explaining the code, because I am sharing the source code with you. But here is the high level overview :

• Create a new control, which inherits from UpdateProgress control
• Embed two resources in your control assembly. (the default hourglass image and the javascript used to make this control work)
• Override Render method, and inject javascript. The javascript will hook into the AJAX InitializeRequest and EndRequest events, by calling add_initializeRequest() and add_endRequest() methods of Sys.WebForms.PageRequestManager class.
• The first Image control in the <ProgressTemplate> of the UpdateProgress control will be assumed to be the hourglass image, and if you haven't set an ImageURL value for it, a default image will be supplied. You can create your own hourglass images from this awesome website : http://www.ajaxload.info/#preview

That is it. Do leave comments and suggestions if you find this control useful. I am also attaching the source code and the assembly. If you don't want to see the code, just use the assembly and things should work right away.

Downloading available code! (CMS, Blog, Guestbook, Forum, OnlineShop, etc)

Pros
• easy to install
• easy configuration
• many plug-ins
• many updates

Cons
• many updates, periodically need to check for them
• once you modded a module, you'll have to mode it in every update
• often hard to digest code, hard to mod

Writing own code!

Pros
• you make it your way
• if you know what you're doing you can secure it pretty well
• you update only what you use, no problems with modding
• you constantly improve your skills

Cons
• time consuming
• you make it your way - yep

I don't know how other people are, but when it comes in scripting I usually do my own scripts... web applications only... while coming to desktop applications and client side script, I'd rather download them... because they usualy do not tend to be so complexly divided... that is, as mentioned already, my opinion... hoping to get some feedback on this issue...

He dado un paso de saltar del track de versión 0.x al track 1.x !!!!

Siguiendo con la interfaz para la representación gráfica de las secuencias, he actualizado muchas cosas, he corregido errores, aclaro hay mas bichos  por eliminar, y he añadido mas funcionalidad respetando como siempre la interacción con el usuario final ya que la interfaz se desarrolla pensando en el usuario final y NO como piensa el desarrollador que es lo mejor para el.

En esta imagen muestro la parte la cuenta del usuario y la opción para editar sus datos, todo corre bajo una "capa asincronica".

Akhirnya hari ini buku itu sampai.

To alleviate the pain of programmers like us , Google engineers have developed the Google Web Toolkit which generates Javascript code from the  Java code written by the user.

obvious advantages  of this tool are:(As stated in google website http://code.google.com/webtoolkit/overview.html)

• Dynamic, reusable UI components
  Create a Widget by compositing other Widgets. Lay out Widgets automatically in Panels. Send your Widget to other developers in a JAR file.
• Really simple RPC
  To communicate from your web application to your web server, you just need to define serializable Java classes for your request and response. In production, GWT automatically serializes the request and deserializes the response from the server. GWT's RPC mechanism can even handle polymorphic class hierarchies, and you can throw exceptions across the wire.
• Browser history management
  No, AJAX applications don't need to break the browser's back button. GWT lets you make your site more usable by easily adding state to the browser's back button history.
• Real debugging
  In production, your code is compiled to JavaScript, but at development time it runs in the Java virtual machine. That means when your code performs an action like handling a mouse event, you get full-featured Java debugging, with exceptions and the advanced debugging features of IDEs like Eclipse.
• Browser compatible
  Your GWT applications automatically support IE, Firefox, Mozilla, Safari, and Opera with no browser detection or special-casing within your code in most cases.
• JUnit integration
  GWT's direct integration with JUnit lets you unit test both in a debugger and in a browser...and you can even unit test asynchronous RPCs.
• Internationalization
  Easily create efficient internationalized applications and libraries.
• Interoperability and fine-grained control
  If GWT's class library doesn't meet your needs, you can mix handwritten JavaScript in your Java source code using our JavaScript Native Interface (JSNI).
• Google API Library: Google Gears support
  We are in the process of building support for using Google APIs in GWT applications. Initially, we are providing support for Google Gears, the recently-launched developer product that extends the browser to allow developers to make web-based applications function even while offline. If you would like to download this library please visit the open source project. We are planning to add support for other Google APIs; if you'd like to help, please check out Making GWT Better.
• Completely Open Source
  All of the code for GWT is available under the Apache 2.0 license. If you are interested in contributing, please visit Making GWT Better.

For a step-by-step installation and usage guide, please see the Getting Started Guide.

How Well Does It Work?

I think it works pretty darn well. The primary metrics we use to evaluate GWT's effectiveness relative to traditional AJAX development are:

• Compiler-generated JavaScript size
  GWT produces smaller JavaScript downloads for the end user than hand-written AJAX applications. In contrast to the reuse approach of traditional JavaScript libraries, the GWT compiler analyzes your source code to include only the code you actually need, and none of what you don't.
• End-user performance
  GWT applications are typically faster than their hand-written JavaScript equivalents, and often require far fewer HTTP round-trips. The GWT compiler avoids adding any wrappers around any functionality that is implemented natively in the browser.
• Development time
  With so little time spent debugging problems in individual web browsers, you can spend much more of your time on application functionality. Development time efficiency is our favorite part of GWT.

  kunalghosh
  (kunal ghosh)

Esta técnica, no solo es más cómoda y amigable para el usuario (ya que se asemeja a las aplicaciones de escritorio) sino que además es más rápida, porque cada vez que se necesita actualizar un dato en una página, no es necesario recargarla nuevamente (solo se recarga la sección necesaria de la misma).

AJAX, no es una tecnología en si, sino que es un conjunto de tecnologías aplicadas de manera que logran el resultado explicado anteriormente (es decir, logran AJAX).

AJAX significa Asynchronous JavaScript And XML, y como su nombre lo indica, se trata de la combinación de JavaScript y XML. JavaScript hace las peticiones al servidor, el mismo le devuelve un resultado (response) en XML, y este es procesado por JavaScript para actualizar los datos de la página, sin tener que recargarla por completo (logrando así una interacción asincrónica entre el servidor y el cliente).

NOTA: esto no es del todo cierto. Ya que se puede lograr AJAX, sin JavaScript y sin XML, reemplazando a JavaScript por otra tecnología client-side y a XML por JSON por ejemplo.

Para poder utilizar AJAX, con saber un poco de JavaScript y XML es suficiente. Pero si se quiere explotar AJAX al máximo, es necesario saber otras cosas como XHTML, CSS, XSLT, DOM, JSON, etc.

Para entender como funciona AJAX, primero vamos a hacer un sintético repaso de como funcionan las aplicaciones web “tradicionales”.

1. El cliente le hace una petición (request) HTTP al servidor WEB (generalmente por medio de un navegador WEB).
2. El servidor WEB, procesa la petición dinámicamente. Por medio de un lenguaje de lado de servidor (como PHP o Perl).
3. Una vez procesada la petición HTTP por el servidor WEB, este le devuelve una respuesta en HTML al cliente (lo que se conoce como “página WEB”).
4. Por medio de esa página generalmente el ciclo vuelve a empezar, ya que el cliente puede hacer otras peticiones HTTP al servidor, que a su vez van a ser procesadas y el servidor WEB va a devolver otros resultados HTML, etc. Por otra parte, del lado del cliente, existen los lenguajes de script, que están embebidos en la página HTML. Por ejemplo, JavaScript, es el lenguaje de script que soportan la mayoría de los navegadores (hay otras tecnologías client-side que pueden utilizarse, como VBScript o JScript, pero hay que recordar que JavaScript fue adoptado como estándar en la ECMA y es soportado por prácticamente todos los navegadores).

En fin, así es como funciona una aplicación WEB sin AJAX, ahora vamos ver como funcionan con AJAX.

Con AJAX, cuando el cliente hace una petición HTTP al servidor, la hace por medio de JavaScript. El servidor procesa la petición y en vez de devolverle al cliente una página HTML, le devuelve un resultado en XML (no necesariamente, ya que también podría ser un resultado en JSON), que es procesado por JavaScript, y este actualiza solo las secciones de la página necesarias (sin tener que cargar una nueva página).

1. El cliente por medio del navegador hace produce algún evento. Este evento es procesado por JavaScript (o alguna otra tecnología client-side) y le envía al servidor WEB una petición HTTP.
2. El servidor WEB, procesa la petición como siempre, pero devolviendo el resultado en XML.
3. Este resultado es procesado por JavaScript. Que recarga las secciones de la página necesarias para mostrar el resultado al usuario.
4. Por medio de esta misma página, el ciclo comienza de nuevo. Sin haberse tenido que recargar la página.

Los pro y los contras de AJAX

Ventajas

• Las páginas no se recargan constantemente.
• El tiempo de espera es menor.
• Se pueden lograr cosas que sin AJAX definitivamente no se podrían hacer, como el conocido Google Maps por ejemplo.

Desventajas

• Falta de integración con el botón “retroceder” de los navegadores. Esto se debe a que siempre estamos en la misma página (no la recargamos). Y algunas veces puede llegar a confundir al usuario.
• Es necesario que el navegador soporte y tenga habilitado JavaScript. No es una gran desventaja, ya que casi todos los navegadores modernos soportan JavaScript.
• Al tener que ejecutar más código del lado del cliente, puede enlentecerse el rendimiento de la máquina del cliente. Por eso debe usarse AJAX con moderación.
• Al no recargar las páginas, y siempre estar en la misma, no se tiene una URL a la cual poder referirse, en caso de querer recomendar la página, o volver a esa página. Por eso debe saberse cuando usar AJAX y cuando no.

Como podemos ver, tiene sus pro y sus contras como todo. Y se trata de saber cuando utilizarlo y cuando no.

Fuente: http://sherekan.com.ar/blog/2008/04/19/introduccion-a-ajax/

Por ello, he reunido una lista de situaciones en donde sugiero se use esta técnica:

• Enviar peticiones al servidor que no devuelvan grandes cantidades de información, por ejemplo, un pequeño formulario que genere un comentario siempre y cuando se informe al usuario que la transacción está en proceso y/o que ya se ha recibido la información.

• Reemplazar partes de la página que requieran una actualización constante o por una acción del usuario.

• Actualizar información de secciones independientes de la página. Puede ser un widget que necesite realizar una acción periodicamente o con intervención del usuario cuando trabaja sobre él y que no tendría sentido recargar todo el documento para ver los cambios.

• Creamos un documento con dos o más marcos tipo explorador de archivos, en donde una acción en un marco actualiza los otros. Los marcos a los que me refiero no son los que implementamos con las etiquetas FRAMESET e IFRAME, sino los que se pueden crear con un buen uso de CSS, ejemplo, http://www.nitobi.com/products/completeui/demos/explorer/index.html.

• Implementar un sistema de layers para solicitar la intervención del usuario en donde es necesario enviar peticiones al servidor que afecten unicamente a este layer.

• Obtener pequeños bloques de datos que dependan de otros ingresados por el usuario.

Y otras situaciones en donde no lo sugiero:

• Reemplazar todo el documento. Puede que en contadas situaciones no sea del todo malo pero si no se implementa bien puede haber cuelgues de navegador.

• Enviar formularios muy largos o de contacto. Esto es en ocaciones muy molesto, ya que el usuario espera que se recargue el sitio y si no se informa correctamente que se envió la información se puede generar confusión.

• Implementar la navegación del sitio. Esto puede llegar a ser un gran problema de accesibilidad para los usuarios y para los motores de búsqueda, ya que estos últimos no interpretan las ejecuciones de javascript y si una persona invidente intenta navegar por el sitio se confundirá al momento de cambiar de sección puesto que los lectores de pantalla informan el estado de carga del documento y no de la petición en AJAX.

• Utilizar AJAX en cuanto botón se me ocurra. AJAX es una ayuda en usabilidad y en algunos casos un apoyo a un diseño impactante, pero no hay que abusar de su uso. No olvidemos que la web se basa en el hipertexto y en ocaciones es necesario dar un respiro al usuario.

Todo esto se resume en unas buenas practicas de programación y un respeto al usuario de la web.

Qué situaciones creen ustedes que son convenientes ingresar o corregir en esta lista???.

Dans le monde du web2.0, bien à la traîne finalement, ils ont appelé cela le 'microblogging', une espèce de mutan se situant entre le blog, le journal public du web, et le chat, la discussion en ligne interactive. Il s'agit d'un mutan car on y échange en général des messages plus court que sur un blog (~140 caractères max), plus long que dans un chat, on est un peu plus prolifique en nombre de posts qu'un blog mais bien moins qu'un chat, les délais de réponse sont allongés, une discussion peut prendre quelques minutes, quelques heures ou quelques jours, et on y échange en fait bien plus que de simples messages texte, il s'agit d'images, de vidéos, de liens...

Les services stars du microblogging s'appellent Twitter, Jaiku ou Pownce il vous permettent d'envoyer des messages directement depuis le web, avec de belles interfaces dynamiques AJAX, depuis un client java installé sur votre ordinateur ou bien encore, et c'est cela la vraie convergence et tout l'intérêt de ce genre de services, par SMS. Ils vous permettent de synchroniser votre statut facebook avec vos derniers messages, ainsi votre réseau d'amis sur facebook est au courant que vous êtes dans l'avion en train de partir pour les Seychelles grâce à l'envoi d'un simple SMS (ce que permets en fait nativement facebook).

Le SMS fonctionne d'ailleurs aussi très bien à l'inverse : vous êtes informé que Marc s'ennuie ferme en séminaire alors que vous êtes bien installé à une terrasse de station de ski en train de boire un de ces fameux vins chauds, il ne vous reste plus qu'à lui envoyer une photo du remonte-pentes ou de la jolie blonde qui est assise à la table d'à côté pour l'aider à se détendre, il ne vous faudra appuyer que sur deux ou trois boutons.. :) La différence avec le SMS ou le MMS c'est la convergence des interfaces (vos amis reçoivent vos messages par mail, par fil de syndication, directement sur le site du service, sur facebook ou tout autre site relayant vos messages) et la multi-diffusion systématique (un vers plusieurs).

C'est aussi cela le web2.0, la communication quoiqu'il arrive, l'échange et le partage en toute liberté, il ne faut pas y voir un enfermement virtuel, ce n'est en fin de compte qu'un moyen supplémentaire d'étendre sa vie sociale, celle qui est bien réelle, c'est une nouvelle manière de voir les relations entre amis, de garder le contact !

Por cierto, desde aqui dar las gracias a la gente de Librosweb, por liberar todo ese conocimiento