Google Chrome 11.0.696.68

Opera 11.11

Safari 5.0.5

Internet Explorer 9

© copyright 2011 www.vandf.gr all rights reserved

Firefox 4.0.1





V and F

update



Building a More Beautiful Web…

As HTML and CSS standards evolve, they offer a web designer more resources; more possibilities to use simple, efficient code for visual effects that would otherwise have to be achieved with images. V and F is working to implement these advances and benefit from new potentials in CSS2 and CSS3. This is especially significant in light of our commitment to not using Java, Flash, or other potentially exploitable code.
One of the practical problems with coding a website is that it should be viewable in all modern browsers. Our original code, similar to example 3 here, produced the visual result displayed in the screenshots on the right. As you can see, Firefox, Chrome, and Opera render almost exactly the same result, with Safari also rendering well, except for a small glitch in the spacing – not serious.
But wait, Microsoft’s Internet Explorer 9 (as all previous versions) does not seem to understand shadows or rounded corners, despite much hype regarding CSS3 and HTML5, and apparently cannot be made to render them. Moreover, there are unsightly spacing errors in the blue transparent box if combined with the second (background) box.
Microsoft says: “HTML5 is at the center of Internet Explorer 9, with extensive support for web standards like HTML5, CSS3, Canvas, SVG, and more, you've got more tools to build a more beautiful web.” - but sadly these assertions appear inaccurate, the text shadow property in fact, being part of a much older CSS2 standard.
So, for V and F, we’ve reluctantly used only a part of this code for the time being, and an image in place of our CSS3 rounded rectangle, resolving ourselves to the fact that IE will only display simple text without shadows. Not elegant, but it works. We are hoping for better luck with Internet Explorer 10.
If any able web coders have advice or suggestions for us, we more than welcome your feedback.

Κτίζοντας έναν καλαίσθητο ιστό…


Η εξέλιξη των προτύπων HTML και των διαδοχικών φύλλων τεχνοτροπίας (CSS), προσφέρει στους σχεδιαστές ιστών περισσότερους πόρους και δυνατότητες χρήσης απλού και αποδοτικού κώδικα για οπτικά εφέ που διαφορετικά θα έπρεπε να επιτευχθούν με εικόνες. Στο V and F επιδιώκουμε την υλοποίηση αυτών των εξελίξεων και προσπαθούμε να επωφεληθούμε από τις νέες αυτές δυνατότητες των CSS2 και CSS3. Αυτό είναι ιδιαίτερα σημαντικό έχοντας κατά νου ότι έχουμε δεσμευθεί να μην χρησιμοποιούμε Java, Flash ή άλλον κώδικα ο οποίος μπορεί εν δυνάμει να υπονομευθεί.
Ένα από τα συνηθέστερα πρακτικά προβλήματα κωδικοποίησης ιστότοπων είναι ότι το αποτέλεσμα πρέπει να έχει δυνατότητα προβολής σε όλους τους σύγχρονους φυλλομετρητές. Ο αρχικός μας κώδικας, παρεμφερής με το παράδειγμα 3 εδώ, έδωσε το οπτικό αποτέλεσμα που φαίνεται στα στιγμιότυπα οθόνης δεξιά. Όπως βλέπετε, οι Firefox, Chrome και Opera παρουσιάζουν σχεδόν το ίδιο οπτικό αποτέλεσμα. Η απόδοση παρουσίασης του Safari είναι επίσης καλή, εκτός από ένα μικρό αλλά όχι σοβαρό πρόβλημα αποστάσεων.
Μισό λεπτό όμως! Ο Internet Explorer 9 της Microsoft, (καθώς και σε προγενέστερες εκδόσεις), δεν φαίνεται να κατανοεί σκίαση, αλλά ούτε και στρογγυλεμένες γωνίες, παρά τη διαφημιστική εκστρατεία περί CSS3 και HTML5 και προφανώς δεν είναι σε θέση να τους αποδώσει. Επιπλέον, υπάρχουν ακαλαίσθητα σφάλματα απόστασης στο διαφανές πλαίσιο όταν συνδυάζεται με το δεύτερο πλαίσιο (φόντου).
Η Microsoft ισχυρίζεται ότι: «Η HTML5 βρίσκεται στο επίκεντρο του Internet Explorer 9, με εκτεταμένη υποστήριξη για πρότυπα ιστού όπως HTML5, CSS3, Canvas, SVG και άλλα. Έχετε περισσότερα εργαλεία για το κτίσιμο ενός πιο όμορφου ιστού» - αλλά δυστυχώς, αυτές οι δηλώσεις δεν στέκουν. Η ιδιότητα της σκίασης κειμένου αποτελεί μέρος ενός σαφώς προγενέστερου προτύπου του CSS2.
Προς το παρόν, στο V and F χρησιμοποιήσαμε μέρος του κώδικα, με μια εικόνα στη θέση του CSS3 στρογγυλεμένου ορθογώνιου φόντου μας, συμβιβαζόμενοι στο γεγονός ότι ο Internet Explorer μπορεί μόνο να εμφανίζει απλό κείμενο χωρίς σκίαση. Καθόλου κομψό, αλλά λειτουργεί. Ευχόμαστε να είμαστε πιο τυχεροί με τον Internet Explorer 10.
Εάν κάποιοι πιο έμπειροι κωδικογράφοι ιστού έχουν συμβουλές ή προτάσεις για μάς, καλοδεχόμαστε τα σχόλιά σας.

Construisant un plus joli Web…

Les standards HTML et CSS sont en évolution constante offrant au designer du web de plus en plus de possibilités d’utilisation d’un code simple et efficace pour la réalisation d’effets visuels qui autrement devraient être obtenus par images. V and F travaille à utiliser ces progrès de façon à bénéficier des ressources potentielles de CSS2 et CSS3. Ceci est particulièrement important puisque nous avons décidé de ne pas utiliser Java, Flash, ou tout autre code paraissant vulnérable.
Un des problèmes pratiques de la codification d’un site est d’assurer sa capacité d’être visionné par tous les navigateurs contemporains. Notre code initial, semblable à exemple 3 ici, a produit le résultat visuel que nous donnons dans les captures d'écran à votre droite. Comme vous pouvez le constater, Firefox, Chrome, et Opera reproduisent presqu’exactement le même résultat. Safari rend bien également, à part de légères erreurs plutôt insignifiantes dans les espaces.
Mais attention, les choses se gâtent avec Internet Explorer 9 de Microsoft (comme toutes les versions précédentes). Il ne semple pas percevoir les ombres ni les angles arrondis et malgré tout le tam-tam publicitaire autour de CSS3 et HTML5, il ne peut apparemment pas les reproduire. De plus, on découvre d’inesthétiques erreurs d’espaces dans la boite transparente bleue si elle est associée à la seconde boite d’arrière plan.
Au dire de Microsoft, « HTML5 est au centre d'Internet Explorer 9, avec une prise en charge complète des normes Web telles que HTML5, CSS3, Canvas, SVG et d'autres. Vous disposez de davantage d'outils pour créer un plus joli Web ». Malheureusement ces assertions s’avèrent inexactes, la propriété des ombrages de texte fait partie d’un standard CSS2 beaucoup plus ancien.
Ainsi, chez V and F, nous n’avons utilisé, à contrecœur, qu’une partie de ce code pour le moment et une image à la place de notre rectangle arrondi CSS3 en arrière-plan. Nous nous sommes résignés à admettre qu’IE n’affichera qu’un texte simple sans ombres. Pas élégant mais ça marche. Nos espoirs se reportent sur Internet Explorer 10.
Si un ami codeur web peut nous faire part de ses conseils ou suggestions à ce propos nous serions très heureux d’en profiter.