A visual history of browser design

03.11.14

Chrome, in user interface jargon is the part of the browser that is not the webpage: title bar, address bar, buttons etc. Ironically Google Chrome was the browser which radically sped up the process of diminishing the usage of chrome in browsers.

Here's a visual history of browser chrome over the years. For screen space and loading time considerations only the header is shown except if there are significant chrome elements elsewhere in the page. The statusbar is most of the times the only chrome element missing from these screenshots and it gradually started to disappear around...

A brief history of web design — part 3: The Age of Flatness

31.10.14

While the ultra-glossy era didn't have a clear origin, the flat UI era had one.

Yes, there was GMail before that but GMail was mostly a case of form follows function. The first system that sported flat design as a conscious design choice, was Windows Phone 7

The other thing that came with Windows Phone 7 and was here to stay was huge, skinny fonts.

.skinnyfonts{height:70px}

The first decade of the new millenium is quickly coming to an end and while flying cars and martian colonies are still nowhere to be found, technology has increasingly invaded our lives. There's now a...

A brief history of web design — part 2.5: mobile

31.10.14

During the nineties and up to the mid zeros, mobile was a whole different beast than desktop web.

PDA's had HTML browsers very early, starting with the Apple Newton in 1994, Windows CE devices and Nokia Communicators. These devices mostly followed the desktop evolution in browsers and display size/color depth apart, I don't count them as "mobile", because their usage required one to be stationary and concentrated, more like today's tablets.

Phones on the other hand, even with their tiny green screens were always available while mobile: standing, walking, even talking to somebody else....

A brief history of web design — part 2: Web 2.0

30.10.14

If you already read Part I, go back, I updated a few things

A google search for "Web 2.0" returns the following snippet

Web 2.0 describes World Wide Web sites that use technology beyond the static pages of earlier Web sites. The term was coined in 1999 by Darcy DiNucci and was popularized by Tim O'Reilly at the O'Reilly Media Web 2.0 conference in late 2004.

I'm not really sure what really Web 2.0 means, whether it actually was something or when it really started, but one thing I do know: web 2.0 had these icons all over the place

CSS is slowly starting now to become...

A brief history of web design — part 1

29.10.14

First let's clarify something. To fully appreciate the experience of an old website you got to go to your attic and unearth an old crt monitor, install the operating system of the time and a browser from back then.

However, since browser vendors have gone to great length to remain backword compatible, you can see right now in your screen a pretty good approximation of the real deal.

To exaggerate the possible difference, here's the rendering of the first webpage as it would look on the line mode browser on a CRT monitor from 1990 vs how it looks right now on the latest Firefox and...

how to build unison on Mac OS 10.10 Yosemite

25.07.14

I'm using unison every day. When it refused to work when I upgraded to 10.10 I freaked out. I didn't want to install homebrew or MacPorts so I tried to build it myself.

I needed to install oCaml 3.12 from here http://ocaml.org/releases/3.12.1.html (never mind it says that =10.4 are not supported) and Xcode

If you compile with later oCaml you will get Fatal error: Internal error: New archives are not identical when syncing with a server instance compiled with older oCaml (like Ubuntu)

I ran this command because make complained it couldn't find xcodebuild

sudo xcode-select -switch...

How to disable backspace navigation on ubuntu nautilus, for nautilus-terminal

24.06.14

Most people want to bring the backspace functionality back to nautilus, but I wanted to disable it in the ubuntu version where it has been re-enabled.

This is because I just added the nautilus-terminal extension, and it is downright annoying if it navigates away every time I press backspace. You can always press shift+backspace to erase and not navigate away, but due to muscle-memory one is bound to press backspace on it's own.

Let's cut to the chase though: go to .config/nautilus/accels find ;(gtk_accel_path "<Actions>/ShellActions/GoUpAccel" "BackSpace") uncomment it and change the...

How to edit saturation levels in gimp

16.05.14

Some times you need to edit the saturation of an image with more fine-grained control than just a slider, for example to keep saturated colors, but remove a tint from the grey table below.

This is our initial picture:

First step is to decompose the image to HSV by going to Colors Components Decompose and choosing HSV from the drop-down.

I wanted to desaturate only the parts of the image that already have low saturation, so that the mobile phone, graphics card and cable stay nice and vibrant. I used the following curve on the saturation layer that I got from the decomposition to...

Chrome does not fire click events while changing text on a button

07.01.14

With the danger of this becoming a chromequirks blog, here's another glitch.

Try changing the text of the input and pressing save.

http://jsfiddle.net/v9rdu/4/

Chrome does not render source sans correctly

21.11.13

Source sans pro in google fonts in Chrome and Firefox, as you see in the screenshot below.

Update: I understand why this is. Chrome uses the stupid Windows convention for local() font face declarations, that each weight is a different family (probably due to the restriction of only two weights per family) and thus the bug is only present on Linux (and I suppose Mac)

Κατασκευή ιστοσελίδων

14.03.13

Η πείρα μας στον τομέα του web design, το σχεδιασμό και την κατασκευή ιστοσελίδων είναι στη διάθεσή σας για να σας παρέχει τα καλύτερα εργαλεία για την ανάπτυξη της επιχείρησής σας στο διαδίκτυο. Η κατασκευή μιας ιστοσελίδας φαίνεται να είναι μια απαραίτητη επιλογή για τις επιχειρήσεις που θέλουν να παραμείνουν ανταγωνιστικές...

Facebook share Blogger wrong image-thumbnail

13.03.13

Facebook share Blogger wrong image-thumbnail

Πρόσφατα χρειάστηκε να φτιάξουμε ένα μικρό addon για να λύσουμε το πρόβλημα που παρουσιάστηκε όταν κάνουμε κλικ στο κουμπί share του facebook  μίας ανάρτησης στο blogger. Το facebook επιλέγει μια τυχαία φωτογραφία και όχι την πρώτη της ανάρτησης! Το πρόβλημα ήταν το εξής: Το facebook άλλαξε την πολιτική του και πλέον...

iphone update 6

27.09.12

Ήρθε η νέα έκδοση 6 του iphone.

Η πιο ωραία δυνατότητα είναι η νέα έκδοση των χαρτών. Έχει τις επιχειρήσεις πάνω στο χάρτη. Μπορείτε να βλέπετε την κίνηση στους δρόμους. Νέα 3D δυνατότητα για μεγάλες πόλεις. Φυσικά και δεν θα παραλείψουμε την εξελιγμένη πλοήγηση που ενημερώνεται live για ατυχήματα που μπορεί να έχουν συμβεί στο...

Αναβάλλεται και πάλι η δράση digi-mobile για την αττική

27.09.12

Σύμφωνα με την επίσημη ιστοσελίδα της Ψηφιακές Ενισχύσεις Α.Ε. η ημερομηνία υποβολής της δράσης digi-mobile για την περιφέρεια αττικής που ήταν καθορισμένη για σήμερα, 27/09/2012 αναβάλλεται και πάλι για λίγες μέρες. Το κείμενο αυτολεξεί: ΑΝΑΚΟΙΝΩΣΗ 

Αναβολή της υποβολής ηλεκτρονικών αιτήσεων στη δράση digi-mobile για τις επιχειρήσεις...

Κατασκευή eshop

13.09.12

Με μεγάλη μας χαρά σας ανακοινώνουμε ότι έχουμε δημιουργήσει το δικό μας eshop (oobstore).

Υπάρχουν πολλά cms για τη δημιουργία eshop. Κάποια από τα πιο γνωστά είναι το Magento, το Prestashop, το Cs cart και άλλα. Αφού λοιπόν κάποια από αυτά είναι δωρεάν γιατί να μην τα χρησιμοποιήσετε?

1) Η outofbounds θα σχεδιάσει το template και θα το προσαρμόσει στο eshop σας...

Εγκατάσταση webmin/virtualmin σε vps με Ubuntu 10.04

20.06.12

Πρώτα απ'όλα θα πρέπει να εγκαταστήσουμε το nano

sudo apt-get install nano

Κατ' αρχάς ξεκινήσαμε με την αναβάθμιση του ubuntu 10.04 στην τελευταία LTS έκδοση. Αυτό απαιτεί την εγκατάσταση του ubuntu updater, και την αναβάθμιση του παλιού συστήματος στην τελευταία ενημέρωση, πριν προχωρήσουμε στην αναβάθμιση έκδοσης.

apt-get update #ενημέρωση της λίστας...

Open Journal Systems(OJS) add editor decision

09.05.12

I was seaching the web trying to figure out how to add a decision at the list available to the editor. Since i couldn't find any solution i had to dive into the code and found out the steps to accomplish it

So to add a new editor decision option follow these  steps

hint : OJS is the root directory of ojs installation

1) Edit OJS/classes/submission/common/Action.inc.php.

Add a constant with your new option at the "decision codes" section

2) Edit OJS/pages/SectionEditor/SubmissionEditJHandler.inc.php.

at function recordDecision() add a case to the switch($decision) to match/catch...

convert image in clipboard to data URI

14.02.12

There are many times that I just want to paste an image in a webpage. So I wrote this script that gets the image from the clipboard, converts it to a data URI and copies it again. The problem is, on ubuntu, when python quits it takes the clipboard with it to oblivion. So I had to open a window so that the clipboard doesn't empty. It's not pretty, but it works, and as a bonus you have the window with the data there to reuse. (triple click the window contents to select all)

#! /usr/bin/python

import pygtk
import gtk
import os
import sys
import base64
import cStringIO
import time


window...

Toolbar που "κολλάει" στο πάνω μέρος όταν κάνεις scroll το παράθυρο πιο κάτω από αυτό

09.02.12

Αυτό το εφέ είναι αρκετά χρήσιμο όταν έχουμε ένα toolbar σε κάποια θέση της σελίδας (όχι πάνω πάνω) που δένει αισθητικά με το περιβάλλον, και έχει νόημα μόνο από εκεί και κάτω, αλλά το μεγάλο μέγεθος της σελίδας απαιτεί να είναι ορατό συνεχώς. Έτσι όταν αρχίζουμε να κατεβαίνουμε σιγά σιγά κάτω κάτω θέλουμε να "κολλήσει στην...

Απενεργοποίηση σχολίων στο wordpress

08.02.12

To wordpress γενικά έχει αρκετά εύχρηστο user interface παρά την εκτεταμένη λειτουργικότητα. Η απενεργοποίηση των σχολίων στα άρθρα όμως δεν είναι κάτι που είναι προφανές. Στα παρακάτω screenshots υπάρχουν τα 5 (!) βήματα για να κόψετε τα σχόλια από τα παλιά άρθρα σας, καθώς επίσης και η διαδικασία για να μην επιτρέπονται ούτε στα νέα άρθρα.

convert .doc to .pdf after adding line numbers

19.01.12

One of our latest projects involves the conversion of a document to pdf after adding line numbers. After some research I decided that the fastest way to do it while keeping formatiing is through a LibreOffice (formerly OpenOffice.org) headless invocation.

I started by writing a macro for LibreOffice in Basic to open the document, insert the line numbers and save to pdf. I modified the code given here and this is the result REM ***** BASIC *****

Sub addLineNumbers(cFile) cURL = ConvertToURL(cFile) ' Open the document. ' Just blindly assume that the document is of a type that OOo will '...

Disturb the market with an old trick. QWERTY keyboards

16.01.12

The best selling smartphones of 2011 are not QWERTY keyboard phones. Yet, everyone who has used such a device finds it difficult to go back. People who never used one though think that they don't need it, that they can type perfectly with soft keyboards and that hardware keyboards add unnecessary bulk and weight. I think that some things that happened that invalidate these thoughts 1. Screen sizes have increased in area (a 4.3" screen has about 1.5 times the area of a 3.5" screen) , so the available space has increased significantly allowing for more spacious and easy to use hardware...

fixed positioning και δεξιά στοίχιση

22.11.11

Είχα ένα μενού στοιχισμένο δεξια, και ήθελα να γίνει fixed (δηλαδή να μένει στο ίδιο μέρος καθώς η σελίδα θα κάνει scroll), χωρίς να χρειάζεται να του αλλάζω θέση κάθε φορά που προσθέτω ένα καινούριο αντικείμενο. Αυτό είναι εύκολο να το κάνεις στο δεξί άκρο της σελίδας, η σε κάποιο σημείο μετρημένο με pixels από την άκρη της σελίδας. Σε...

Wordpress Plugin Basics

31.10.11

Οδηγός Δημιουργίας Plugin Στο Wordpress

Πριν από λίγο καιρό, στα πλαίσια της εργασίας μου στην outofbounds, κλήθηκα να κατασκευάσω ένα πρόσθετο για το wordpress που να χειρίζεται διαγωνισμούς και κληρώσεις. Με βάση λοιπόν αυτήν την εμπειρία αποφάσισα να γράψω έναν μικρό οδηγό προγραμματισμού ενός plugin χωρίς όμως να εμβαθύνω στον τρόπο...

Οθόνες amoled. Πλεονεκτήματα και διαφορές στην υλοποίηση.

23.10.11

Οι οθόνες τύπου AMOLED (active matrix organic light emission diodes) είναι μια τεχνολογία η οποία ξεκίνησε πριν μερικά χρόνια κυρίως για τη δημιουργία οθονών χαμηλής κατανάλωσης ενέργειας. H Samsung είναι αυτή που οδηγεί την τεχνολογία στο εν λόγω τμήμα της αγοράς και παράγει σήμερα το 98% των οθονών amoled παγκοσμίως. Η εκπληκτική οθόνη που βλέπετε...

Διεπαφή Ανθρώπου-Υπολογιστή

13.10.11

Πλέον έχουμε καταλήξει όλοι στο πόσο σημαντικό είναι μια εφαρμογή να έχει καλό interface. Υπάρχουν αρκετοί κανόνες για να επιτευχθεί αυτό, οι οποίοι όμως είναι γενικού χαρακτήρα. Έτσι αποφασίσαμε να δημιουργήσουμε ένα δικό μας κανόνα σε ένα site με προσφορές ( Dealike ) που πρόσφατα υλοποιήσαμε. Στο site αυτό υπάρχουν πολλά φίλτρα...

Pure css star rating bar

06.09.11

Σε πολλές ιστοσελίδες είναι απαραίτητο ένα σύστημα που να επιτρέπει στους χρήστες να βαθμολογήσουν ένα άρθρο, πρόγραμμα, ταινία κλπ

Σχεδιάζοντας ένα site που χρειαζόταν ένα τέτοιο σύστημα σκέφτηκα πως θα μπορούσε να γίνει μόνο με css. Μια αναζήτηση στο google αποκάλυψε διάφορες λύσεις που περιλάμβαναν δεκάδες γραμμές κώδικα...

Γιατί πρέπει τα windows 8 να ΜΗΝ παίζουν τις παλιές εφαρμογές

22.07.11

Τον τελευταίο καιρό έχω αλλάξει συνήθειες και χρησιμοποιώ στο μεγαλύτερο ποσοστό του χρόνου υπολογιστές με linux, κυρίως ubuntu. Μερικές φορές που έρχομαι σε επαφή πάλι με τα windows, κυρίως σε υπολογιστές καινούριους ή φίλων, η εμπειρία είναι σχεδόν επώδυνη. Οι καθυστερήσεις στην εκκίνηση, ακόμα και σε ολοκαίνουριους υπολογιστές,...

refresh γρήγορα!

14.07.11

Όταν κανείς σχεδιάζει ιστοσελίδες θέλει να βλέπει τις αλλαγές που κάνει στον Browser κάθε λίγο και λιγάκι. Μια λύση είναι το ReloadEvery (extension στον Firefox, standard feature στον Opera) όμως αυτό χαλάει τη λειτουργία του firebug, κάνει την οθόνη να τρεμοπαίζει και πρέπει να περιμένεις έστω ένα-δυο δευτερόλεπτα πριν δεις όποια αλλαγή. Επίσης ο browser...

Downloads in a tab - firefox trick

09.07.11

Bαρέθηκα να ψάχνω συνεχώς το download manager του firefox και ήθελα να βρω έναν εύκολο τρόπο να έχω τα κατεβασμένα αρχεία σε μια καρτέλα, όπως γίνεται στον opera. Oι διάφορες σχετικές επεκτάσεις δεν ήταν αυτό ακριβώς που ήθελα και έτσι σκέφτηκα το εξής τρικ. Aνοίγουμε μια νέα καρτέλα, γράφουμε chrome://mozapps/content/downloads/downloads.xul και πατάμε enter. Mετά...

Απεικόνιση: μέγεθος οθόνης

24.05.11

Αυτό το post είναι το πρώτο μιας σειράς καταχωρήσεων με θέμα την απεικόνιση σε οθόνες υπολογιστή. Θα ασχοληθούμε με την σταθερή και μεταβλητή απεικόνιση, με τις αναλογίες πλευρών και με την ευκρίνεια. Ξεκινάω από το πιο πασιφανές, το μέγεθος της οθόνης.

Σήμερα υπάρχουν γύρω μας χιλιάδες, εκατομμύρια οθόνες, για κάθε χρήση, Η...

[SOLVED] Canon iP3300 και Ubuntu

29.04.11

Χθές προσπαθούσα επί ώρες να κάνω έναν Canon PIXMA iP3300 να δουλέψει στα ολόφρεσκα Ubuntu 11.04 Στις επιλογές υπάρχουν όλων των ειδών οι εκτυπωτές. Μοιάζει σαν να έλειπε μονάχα αυτός. Δοκίμασα iP3000, iP3100, iP4000 και άλλους αλλά κανένας δεν εκτύπωνε σωστα. Επίσης δοκίμασα να εγκαταστήσω τον driver της canon για fedora, μετατρέποντας με το alien το rpm σε deb,...

Πρώτος στο Google

23.03.11

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

διακρίσεις

03.03.11

Πριν από μερικούς μήνες παρακολούθησα την παρουσίαση της Microsoft στους προγραμματιστές για τα Windows Phone 7, και ένα από τα πράγματα που μου έκαναν εντύπωση ήταν πως σε ένα ακροατήριο 50 περίπου ανθρώπων οι γυναίκες δεν ξεπερνούσαν τις 5. Από τότε παρατηρώ το φαινόμενο περισσότερο και βλέπω πως και στους συνεργάτες μας αλλά και στα...

oobcss, ένας μικρός προεπεξεργαστής στυλ

01.03.11

Το css έχει κλείσει πια πάνω από 10 χρόνια ζωής αλλά ακόμη υπάρχουν προβλήματα με παλαιότερους browsers, και απλές λογικές όπως η χρήση μεταβλητών δεν έχουν υλοποιηθεί. Υπάρχουν διάφοροι προεπεξεργαστές CSS που κάνουν θαύματα όπως LessCSS, SASS κλπ. Όσοι δοκίμασα όμως δεν κάλυπταν τις δικές μου βασικές ανάγκες και έτσι έφτιαξα έναν για...

περι εποχης.

22.11.10

Κανω μια αναζητηση στο Google (γνωστη μηχανη αναζητησης κατα microsoft), στα keywords "κατασκευη ιστοσελιδων", "web design", και μελεταω τα αποτελεσματα που εμφανιζονται στις πρωτες 2 σελιδες.

Να ξεκαθαρισω κατι πριν συνεχισω, η γνωμη που θα εκφερω δεν εχει καμια σχεση με την ποιοτητα παροχης υπηρεσιων των εταιρειων αυτων, οποιων κ αν ειναι,...

drag and drop upload – version 1.2

15.04.10

Η εφαρμογή για αποστολή αρχείων με drag and drop που περιγράφω εδώ αναβαθμίστηκε και απέκτησε το δικό της site. Η ιστοσελίδα είναι στα αγγλικά. Το πρόγραμμα πλέον αναγνωρίζει τα αρχεία με το ίδιο όνομα και δίνει στο χρήστη τη δυνατότητα να αντικαταστήσει το παλιό αρχείο με το νέο.

Περισσότερα στη νέα διεύθυνση http://dragdropupload.sourceforge.net/.

...

ανέβασμα αρχείων με drag & drop στο παράθυρο του φυλλομετρητή

26.03.10

Ο firefox από την έκδοση 3.6 και μετά υποστηρίζει το νέο File API της javascript το οποίο επιτρέπει την μεταφορά και απόθεση αρχείων απευθείας στο παράθυρο του φυλλομετρητή για μεταφόρτωση στο server. Αυτό επιτρέπει την εύκολη και γρήγορη μεταφορά πολλών αρχείων. Το API είναι της javascript και εκτός απροόπτου θα υποστηριχθεί και από τους...

προστατέψτε το φλασάκι σας

15.03.10

Έχω συνήθως μαζί μου ένα φλασάκι - κιτ πρώτων βοηθειών για υπολογιστές

Μεταξύ άλλων περιέχει τα εξής: -- Ccleaner -- Wise Cleaner -- AVG free AntiVirus -- TightVNC -- MagicDisc -- PartitionRecovery Enterprise -- NTFS Undelete -- Clamwin AntiVirus

Όλα δωρεάν προγράμματα που μπορεί να σε βγάλουν από δύσκολες καταστάσεις Το πρόβλημα είναι ότι βάζοντας το φλασάκι στον ύποπτο υπολογιστή...

wallpapers out of bounds

12.03.10

Κατεβάστε από εδώ wallpapers και δώστε μια out of bounds όψη στον υπολογιστή σας.

υποστήριξη φυλλομετρητών

25.02.10

Η υποστήριξη πολλών φυλλομετρητών έχει γίνει πλέον πονοκέφαλος για τους web developers. Ευτυχώς το μαύρο πρόβατο της συμβατότητας Microsoft Internet Explorer έχει βελτιωθεί σημαντικά στην τελευταία έκδοση, και η MS υπόσχεται ακόμα καλύτερη συμβατότητα με τα πρότυπα του W3C – του αρμόδιου οργάνου για την προτυποποίηση στο Internet – στην...

php/css

25.02.10

Ο php είναι ένας προεπεξεργαστής. Προετοιμάζει τις σελίδες, δημιουργεί δυναμικά τo περιεχόμενό τους από τη μεριά του διακομιστή, και τις σερβίρει έτοιμες στον φυλλομετρητή του χρήστη. Συνήθως η php προετοιμάζει html. Όταν ο χρήστης ζητήσει ένα αρχείο php, προλαβαίνει ο προεπεξεργαστής, το εκτελεί, και το αποτέλεσμα σερβίρεται ως...

βαβέλ

12.01.10

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