Periodic Table of the HTML 5 Elements!

Josh Duck presents some of the HTML5 elements in a single table, visit http://joshduck.com/periodic-table.html!

Note: Move your mouse pointer over the image above to see the visual effect that I have added using CSS3[1].

References:
[1] http://css3.bradshawenterprises.com/flip/

HTML5 Rocks

Τον τελευταίο καιρό έχω αρχίσει να ψάχνω νέες τεχνολογίες οι οποίες μπορούν να βοηθήσουν στην ταχύτερη ανάπτυξη διαδικτυακών εφαρμογών, αλλά παράλληλα να τις κάνει και πιο εύχρηστες!

Μια από αυτές τις τεχνολογίες είναι η HTML5 η οποια πλέον είναι ένα standard με αρκετές δυνατότητες που παλιότερα υλοποιούνταν από διάφορες περίπλο-κες JavaScript βιβλιοθήκες ή δεν υποστηρίζονταν και καθόλου.


Ψάχνοντας να μάθω πως να υλοποιώ web apps σε HTML5 μελέτησα διάφορες πηγές, αλλά θεωρώ ότι η πλέον κατάλληλη είναι ο ιστοχώρος html5rocks.com.

Η καλή ιδέα ειναι η απλή!

Σήμερα διαπίστωσα ότι υπάρχει ένα site το οποίο πολύ απλά εμφανίζει την ώρα!! Το url ειναι πολύ απλα http://www.ωρα.gr/ [1]. Οπότε εαν χρειάζεστε μια τόσο απλή, αλλά χρήσιμη πληροφορία, μπείτε στον εν λόγο ιστοχώρο!


[1] Ναι παίζει παρότι είναι στα ελληνικά!!

Web 1.0, 2.0, 3.0

Το Διαδικτυο έχει ήδη περάσει δύο εποχές και έχει μπει στην τρίτη!

Πηγή: The Virtual Worlds Hype Cycle for 2009

Η πρώτη εποχή (Web 1.0), η αρχή της ευρείας χρήσης του Διαδικτύο, επέτρεπε στον χρήστη μόνον να διαβάζει κείμενο και να βλέπει φωτογραφίες σχετικά χαμηλής ποιότητας. Αυτο συνεβαινε για δυο λόγους, πρωτον τεχνικά δεν υπήρχε η δικτυακή υποδομή για μεταφορά μεγάλου όγκου πληροφορίας, αλλά κατα δεύτερον δεν υπήρχε ακόμα εκπαίδευση των χρηστών γύρω απο τις τεχνολογίες του Διαδικτύου.

Η δεύτερη εποχή (Web 2.0), η εποχή όπου οι χρήστες γίνονται ενεργοί, είναι η σημερινή. Σχεδόν όλοι συμβάλλουν ενεργά στην γιγάντωση του Ιστού (Web), έστω μια γραμμή κείμενο[1]. Πλεόν το Διαδίκτυο "ανήκει" στους "πολίτες" του[2]. Η "φωνή" του μπορεί να διαδοθεί σε όλο το κόσμο, αρκεί να χρησιμοποιήσει τα κατάλληλα εργαλεία, τα οποία ειναι συνήθως δωρεάν κι αρκετα εύχρηστα.

Η τρίτη γενιά ομως (Web 3.0) είναι μια νέα πρόκληση που έρχεται. Πλέον οι χρήστες είναι ακόμα πιο απαιτητικοί. Δεν τους αρκει απλά να διαδίδουν τις ιδέες τους. Θέλουν να το ζούνε. Θέλουν να είναι συνεχώς συνδεδεμένοι ώστε έχουν διάδραση μέσω του Internet με πολλαπλούς τρόπους. Πλέον οδεύουμε σε μια εποχή όπου πολλές συσκευές καθημερινής χρήσης, ξεκινόντας απο τα κινητά τηλέφωνα, θα ειναι συνεχώς συνδεδεμένα και συντονισμένα με απώτερο στόχο τον απόλυτο έλεγχο της πληροφορίας και την δημιουργία γνώσης προκειμένου να βελτιώνεται η ζωή των χρηστών.

Υποσημειώσεις:

[1] Οι περισσότεροι απο εσάς θα έχετε χρησιμοποιήσει κάποια απο τις υπηρεσίες Facebook, Blogger, Wordpress, Twitter, Flickr, Picasa ή οτιδήποτε που σας προτρέπει να διαθέσετε στον Ιστο (web) δικό σας υλικο.

[2] Ή απλά έχει δημιουργηθεί αυτή η αίσθηση ώστε ο χρήστης να διαθέτει απο μόνος του πληρφορίες που ειναι πολύ χρήσιμες για τις μεγάλες εταιρείες αλλά και τις κυβερνήσεις.

Extract HTML table's data in a new window

The question:

How could I extract the data that already rendered as a HTML Table in my web site, as a new Table that will be easily copied-pasted in an Excel spreadsheet?

The answer:

In case that our Table element has 'data' as id then we could use the following javascript function:

function showDataInNewWindow(){

try{

var tmp = '<table border="1"><thead><tr>';

$("#data th").each(function () { // iterate tr

tmp= tmp+'<th>'+$(this).text()+'</th>';

});

tmp=tmp+'</tr></thead><tbody>';

$('#data tr').each(function () { // iterate tr

tmp = tmp+' <tr>';

$(this).find('td').each(function () { // iterate td

tmp =tmp+ '<td>'+$(this).text()+'</td>';

});

tmp=tmp+'</tr>';

});

tmp=tmp+'</tbody></table>'

myWindow=window.open('','Data','width=800,height=600,left=0,top=0');

myWindow.document.write(tmp);

myWindow.document.close();

myWindow.focus();

}catch(e){

alert(e);

}

}

Notes:

1) jQuery library has been used

2) For more information leave a comment and I will reply as soon as possible!

How to fine tune your CSS Corners!

Every web developer would like to create fancy sites, but you usually do not know how to do web design staff! One of the most requested effect is that of the rounded corners and the usage of gradient color for the background. A tool to easily do so is http://csscorners.com/.

Απεργίες.gr

Στις μέρες μας μάς δημιουργείται ένας διαρκής προβληματισμός:Έχει ΜΜΜ αύριο;Πρέπει να κατέβω στο κέντρο,θα υπάρχει πορεία;Χρειάζεται να επισκεφθώ κάποια δημόσια υπηρεσία,θα είναι ανοιχτή; Όλους αυτούς τους προβληματισμούς τους λύνει η νέα ιστοσελίδα apergies.gr! Συγκεντρώνει όλες τις απεργίες,τις πορείες και τις στάσεις εργασίας από πολλούς κλάδους και τις παρουσιάζει απλά σε ένα μεγάλο ημερολόγιο!Ένα πολύ απλό site,και πάρα πολύ χρήσιμο επίσης!

QR Codes

QR Codes is the evolution of bar codes. It is a visual and encoded representation of textual information that can be easily decoded by modern devices, like Android powered ones and iPhone. So if you want to encode some piece of textual information, then you can generate some QR Code using the http://qrcode.kaywa.com/

Αλλη μια έξυπνη ιδέα-blog

Σήμερα εντόπισα ενα πολύ ενδιαφέρον blog, το http://history140.wordpress.com/. Πρόκειται για έναν ιστοχώρο όπου συγκεντρώνονται μηνύματα από το twitter που αφορούν διάφορα κατα καιρούς hot θέματα! Για παραδειγμα σήμερα έβαλαν ένα post για το τι "λέχθηκε" αναφορικά με το πρώτο επεισόδιο του 1821 στο twitter. Περισσότερα στο http://history140.wordpress.com/2011/01/26/1821-skai-1/

Replace flash with HTML 5, CSS and Javascript

Flash is a powerful tool for implementation of multimedia applications. It has been used for several year for implementation of animated content for web sites, but it is still not embedded in any operating system or web browser. It is always installed separately. This fact makes it difficult for novice users to navigate in flash sites.

The old time classic solution for this issue is to create two versions of the web site. One that uses the power of flash in order to provide a more fancy user interface and another that uses plain html. But today we have a better version of HTML (ver 5), CSS and JavaScript! The new versions let us make fancy sites without using flash!

For instance if we would like to create a slide show, then we can use the jQuery Circle Plug-in. If you need auto-complete fields for forms then you can use a component that you can find at jQuery Autocomplete Plugin. Or you can add validation to your forms using the jQuery AjaxForm Plugin... and much much more that you can find in jQuery.

If you need any help then leave a comment or send me an email [g.anagnostaros@gmail.com] and I will answer as soon as possible!

References:

1. jQuery Circle Plug-in
2. jQuery Autocomplete Plugin
3. jQuery AjaxForm Plugin
4. jQuery

WICKET: Auto sliding panels

Do you have content but you don't have space? Would you like to make a fancy slideshow of Wicket components? I have the solution!

You can download the source code from here. Note that it is implemented using Wicket 1.4 and WiQuery 1.

PS: The solution is based on the implementation of "mb.scrollable" (site, demo).

Refrences:

1. mb.scrollable [http://pupunzi.open-lab.com/mb-jquery-components/mb-scrollable/]
2. Wicket 1.4 [http://wicket.apache.org/]
3. WiQuery [http://code.google.com/p/wiquery/]

Τι είναι podcast;

Πιθανόν να μην γνωρίζετε ήδη τι είναι podcast. Αλλωστε κανείς δεν ήξερε πριν να μάθει! Podcast λοιπόν είναι μια ηχογραφημένη εκπομπή που μπορείτε να κατεβάσετε από το Δίκτυο και να την ακούσετε όποτε εσείς επιθυμείτε. Κατ' ουσίαν είναι μια εξέλιξη της ιδέας του ραδιοφώνου. Για να παράξει κάποιος τέτοιου είδους εκπομπή δεν χρειάζετε ούτε άδεια ούτε κάποιον ιδιαίτερο εξοπλισμό.

Κάθε εκπομπή είναι ένα αρχείο mp3, το οποίο πλέον μπορεί να καταγράψει σχεδόν οποιοσδήποτε με έναν απλό προσωπικό υπολογιστή και κάποιο από τα διάφορα δωρέαν ή εμπορικά προγράμματα που κυκλοφορούν. Ένα δημοφηλές πρόγραμμα ηχογράφησης σε μορφή mp3 είναι το Audacity. Να σημειωθεί όμως το ότι δεν χρειάζετε άδεια η μετάδοση Podcast δεν σημαίνει ότι μπορεί να γινει χρήση υλικού που προστατεύεται από πνευματική ιδιοκτησία ή γενικότερα να μεταδίδεται κάτι που παραβιάζει την νομοθεσία.

Εν συνεχεία πρέπει να δημιουργηθεί ένα rss που να έχει τις πληροφορίες για τα mp3 αρχεία των εκπομπών. Ποια είναι και περιγραφή τους με τίτλο και περιγραφή.

Τέλος το rss με τα mp3 πρέπει να δημοσιευθούν σε διάφορα Podcast directories ώστε οι ακροατές να μπορούν να τα εντοπίζουν και να τα κατεβάζουν για να τα ακούνε. Κάποια από αυτά τα directories.

Βίντεο

Podcast Directories:

1) Submit podcast

2) Submit podcast to iTunes

Παραπομπές:

1) PodCasting (Wikipedia)

2) Τι είναι το PodCasting; (Grenglish Talk)

3) Tips for Podcast fans (Apple)

4) Podcasting Tools: 70+ Podcasting Tools and Resources (Mashable)

Wicket Tooltip

Do you need to add tooltips to your web application?
Do you use Wicket and want a "behavior" that adds tooltip functionality to any Component?
If you answered yes to both questions the I have the solution! I used code from the article "Create a Nice, Lightweight JavaScript Tooltip" and I generated a behavior like class that uses the javavascript and style sheet in order to add tooltip functionality to any Component. The code of the behavior like class looks like the following:

public class TooltipPlugin implements Serializable{
private final Component component;

public TooltipPlugin(Component component, String tooltip) {
this.component = component;
component.add(HeaderContributor.forJavaScript(getClass(), "TooltipBehavior.Script.js"));
component.add(HeaderContributor.forCss(getClass(), "TooltipBehavior.Style.css"));
setTooltip(tooltip);
}

public void setTooltip(String tooltip) {
if (tooltip == null || tooltip.length() == 0) {
component.add(new AttributeModifier("onmouseover", true, new Model("")));
component.add(new AttributeModifier("onmouseout", true, new Model("")));
} else {
component.add(new AttributeModifier("onmouseover", true, new Model("tooltip.show('" + tooltip + "');")));
component.add(new AttributeModifier("onmouseout", true, new Model("tooltip.hide();")));
}
}
}

Where the "TooltipBehavior.Script.js" and "TooltipBehavior.Style.css" are the script and the style sheet files from the article "Create a Nice, Lightweight JavaScript Tooltip".

References:
1) Create a Nice, Lightweight JavaScript Tooltip

Downloads:
1) Original code of article "Create a Nice, Lightweight JavaScript Tooltip"
2) Full source code

Wicket Autocomplete - Show suggestions on focus

There are some cases that an autocomplete field is used for a limited number of option. For instance it can be used for selection of a Country. So we should show to the user all the available options when he focus on the field. The solution is to extends the DefaultCssAutocompleteTextField of wicket and override the "newAutoCompleteBehavior(IAutoCompleteRenderer, AutoCompleteSettings)" method as follows

@Override
protected AutoCompleteBehavior newAutoCompleteBehavior(IAutoCompleteRenderer renderer, AutoCompleteSettings settings) {
settings.setShowListOnFocusGain(true);
settings.setShowListOnEmptyInput(true);
settings.setShowCompleteListOnFocusGain(true);
return super.newAutoCompleteBehavior(renderer, settings);
}

If you need even more details leave a comment and I will give you even more information..

How to render the content of an HTML without using iFrame

As a web developer I was asked to render the HTML code of a static HTML file in a div of dynamically generated HTML page. So I found out several alternative solutions.

Solution#1 Parse the static HTML file in the server-side and render only the content that is between "<body>" and "</body>". This solution would cost time to access the file, memory to keep the files content, process to parse the file's content, memory to keep the process result and finally time to send the result to the client.

Solution#2 Keep only the content of the HTML that is between "<body>" and "</body>" in the file in order to avoid process. Again time to access, memory to keep and time to send the result was needed. And additionally we had to edit the static HTML in each update. Cost of maintenance is the first that we try to reduce. We aren't developing a small and static web site but a dynamic web application that may include several static HTML files.

Solution#3 Do whatever is described in Solution#1 but do it in the client's side using ajax. Response is sent including only the javascript call which will retrieve the HTML file and will parse and render it in the right place. No memory needed. Web server handler static HTML file transfer as any other file's.

Solution#4 Do whatever is described in Solution#3 but additionally retrieve which are the included style sheet and javascript files and include them. So the web designer gives you the whole set of HTML Code, Style Sheet files [CSS], JavaScript code [JS] and other resources [images, flash and whatever] and you simple add a small ajax call that retrieved the HTML and renders it in a given div.

NOTE: I combined code from two sources "Dynamic Ajax Content [Dynamic Drive DHTML Script]" and "XUL Ajax" and I also added a piece of code to make it possible to retrieve which .js and .css files are included in the static file in order to add them in the container HTML via ajax.

In order to use the javascript you should add in the container HTML the following:

<div id="storage" style="display:none;"></div>

<div id="displayed"></div>

<script type="text/javascript">

document.onload=ajaxpage('YOU_STATIC_PAGE.html','displayed');

</script>

and you should also include the "AjaxPage.js" in the header of the container.

In case you have any problem using the javascript simply leave a comment and I will help you as soon as possible.

Sources:

1) Dynamic Ajax Content [Dynamic Drive DHTML Script]

2) XUL Ajax

Files:

1) AjaxPage.js

Τι και πόσο έψαχνε και ψάχνει ο κόσμος;

Μια νέα, σχετικά, μόδα είναι αυτή του Search Engine Optimization (SEO). Πολλοί θεωρούν ότι είναι κάτι μαγικό ή πονηρό. Στην πραγματικότητα δεν είναι τίποτα περισσότερο από το να έχεις αρκετό και ποιοτικό υλικό στον ιστοχώρο σου (website) ώστε αυτός που ψάχνει κάτι να σε βρει. Η απορία όμως που δημιουργείται είναι "τι πρέπει να βάλω;". Ενα εργαλείο που μπορεί να απαντήσει σε αυτή την απορία είναι το "Google Insights for Search". Πρόκειται για μια νέα εφαρμογή της Google η οποία είναι σε Beta version. Η εφαρμογή αυτή μπορεί να μας δώσει πληροφορίες για τις αναζητήσεις που κάνουν οι χρήστες του Google. Με αυτό τον τρόπο διευκολύνεται ο αρθρογράφος στο τι να επιλέξει για θεματολογια αλλά και λέξεις κλειδια. Μπορεί να δοκιμάζει διάφορους όρους και να επιλέξει αυτούς που αναζητούνται πιο συχνά. Επουδενί όμως δεν πρέπει να καταλήξει σε συγγραφή ακαταλαβίστικου κειμένου, διότι μετά θα χάσει τον αναγνώστη που με τοση προσπάθεια απέκτησε!

Γενικότερα όταν μιλάμε για SEO πρέπει να βάζουμε πρώτο στόχο την ποιότητα ώστε οι αναγνώστες μας να μας διαφημίσουν και να δείξουν στο Google ότι έχουμε την καλύτερη σελίδα κι όχι απλά να μας βγάζει στα αποτελέσματα των αναζητήσεων αλλά να μας βγάζει από τους πρώτους! Για περισσότερες συμβουλές και πληροφορίες μπορείτε να επικοινωνήσετε μαζί μου στο g.anagnostaros@gmail.com

Παραπομπές:

1) Search Engine Optimization (Wikipedia)

2) Website Grader - SEO

Thin Client, μια λύση για οικονομικότερα και πιο συντηρίσιμα Δίκτυα

Τα τελευταία χρόνια η εξέλιξη του Διαδικτύου (Internet) έχει οδηγήσει σε ανάπτυξη εφαρμογών που "τρέχουν" μέσω του φυλομετρητή ιστοσελίδων (Web Browser). Αυτό ουσιαστικά υλοποιεί την ιδέα του Thin Client, όπου υπάρχει ένας κεντρικός υπολογιστής (Server) ο οποίος εκτελεί την εφαρμογή, ενώ από την άλλη μεριά υπάρχουν οι Thin Clients που την χρησιμοποιούν. Με αυτή την προσέγγιση οι clients δεν χρειάζεται να έχουν εγκατεστημένο κανένα επιπλέον λογισμικό πέραν του web browser. Αυτή η προσέγγιση μειώνει δραματικά το κόστος εγκατάστασης νέου client καθώς αφενός δεν χρειάζεται να έχει ιδιαίτερη επεξεργαστική ισχύ και μνήμη αλλά ούτε χρειάζεται διαδικασία εγκατάστασης λογισμικου.

Χαρακτηριστικά παράδείγματα web εφαρμογών αποτελούν τα GMAIL, Google Documents, Google Reader και άλλες αντίστοιχες εφαρμογές. Το κόστος κατασκευής μιας τέτοιας εφαρμογής δεν είναι μεγαλύτερο από την κατασκευή μιας stand alone ή client/server, ενώ το κέρδος από το μειωμένο κόστος συντήρισης και αγοράς εξοπλισμού είναι ιδιαιτέρος μεγάλο.

Παραπομπές:
http://en.wikipedia.org/wiki/Thin_client#History

Χρησιμοποιώντας Wicket..

Το τελευταίο καιρό έχω αρχίσει να ασχολούμαι με ένα ακόμα web framework, το wicket. Το wicket είναι ένα framework για Java που ανήκει στην μεγάλη οικογένεια του Apache Foundation. Το ιδιαίτερο χαρακτηριστικό που έχει, σε σχέση με άλλα παρόμοια, είναι ότι διαχωρίζει την εμφάνιση από την λογική. Αυτό επιτυγχάνεται με το να απαιτείται για κάθε τι που εμφανίζεται αφενός ένα στοιχείο HTML σε κάποια σελίδα και αφεταίρου αντίστοιχο Wicket Component's instance που να δημιουργείται στον Constructor κάποιας ομώνυμης με την σελίδα κλάσης. Επίσης διαθέτει δυνατότητα χρήσης Ajax αλλα παράλληλα και κλασικού submit/refresh.

Εαν θέλετε να μάθετε περισσότερα μπείτε στην επίσημη ιστοσελίδα του project: http://wicket.apache.org/

ή ζητήστε μου να γράψω περισσότερα.

Πρώτη επαφή με το Grails

Σε παλιότερη άναρτηση είχα αναφερθεί στο framework Ruby On Rails. Ένα πακέτο που με χρήση scripts δημιουργεί την βασική δομή του προγράμματος και με την προσθήκη διαφόρων οδηγιών και εντολών ολοκληρώνεται η κατασκευή μιας πλήρως λειτουργικής εφαρμογής.
Ένα αντίστοιχο πακέτο είναι το Grails. Το Grails είναι ουσιαστικά η μεταφορά της λογικής του RoR σε ένα περιβάλλον όπου ο κώδικας γράφεται σε Groovy.
Η Groovy είναι μια γλώσσα βασισμένη στην Java αλλά με ελευθερία αντίστοιχη αυτής της Ruby. Οπως και στο RoR έτσι και στο Grails στοχος είναι η αποφυγη χρήσης περίπλοκων αρχείων ρυθμίσεων και η μη επανάλληψη κώδικα. Εφαρμοζεί το μοντέλο MVC (Model View Controller) στο ακέραιο και οδηγεί τον προγραμματιστή με τέτοιο τρόπο ώστε να παραμείνει στην λογική του αποδεδειγμένα καλού αυτού μοντέλου.
Ελπίζω σύντομα να μου δωθεί η ευκαιρία να αναπτύξω κάποιο ιστοχώρο με χρήση αυτής της τεχνολογίας ώστε να σας πω τις απόψεις μου σε επίπεδο εφαρμογής.

Τι είναι web robot;

Το web robot είναι κάποιο πρόγραμμα που εκτελεί, συνήθως, μια απλή διαδικασία στο Διαδίκτυο που είναι δύσκολο να επιτευχθεί από έναν άνθρωπο. Η πλέον συνηθησμένη χρήση είναι για διαδικασίες που θα έπρεπε να εκτελεστούν αρκετές φορές και θα ήταν χρονοβόρο να γίνουν απο άνθρωπο.
Χαρακτηριστικό παράδειγμα είναι οι crawlers, οι οποίοι "έρπονται" σε ολόκληρο το Δίκτυο αναζητώντας σελίδες και συνδέσεις με άλλες σελίδες κ.ο.κ. Οι crawler χρησιμοποιούνται από τις μηχανές αναζήτησης ώστε να εντοπίζονται τυχόν καινούριες σελίδες και να καταγράφονται στις βάσεις δεδομένων τους ανάλογα με το περιεχόμενο που διαθέτουν, ώστε να εντοπίζονται εύκολα.
Δυστυχώς βέβαια, όπως σχεδόν με όλες τις τεχνολογίες, υπάρχουν και κακές χρήσεις. Χαρακτηριστικό παράδειγμα κακής χρήσης αποτελούν τα spambots, που σαρώνουν πάλι το Δίκτυο όπως οι crawlers, αλλά με στόχο να εντοπίζουν email που θα χρησιμοποιηθούν για spam!

Αναλυτικότερες πληροφορίες θα βρείτε στην wikipedia.