Target audience for an artgallery website

Posted on by

In marketing and advertising, a target audience, or target group is the primary group of people that something, usually an advertising campaign, is aimed at appealing to. The same rules apply for a website. The target audience for the website of an artgallery are art collectors, artists and art lovers.

To design a new website tailored to the preferences of this target audience, you have to identify the profile of these people, which is not an easy task. A first approach is to analyse the profile of the visitors of the old website, assuming that it reflects the typical profile of the target audience.

The following data sources can be explored to get useful informations :

  • Google Analytics (if installed on the website)
  • Alexa (web traffic metrics)
  • Quantcast

The Google Analytics report for an artgallery website, operational since more than 3 years, provides data from more than 4 million pageviews, 3 million visits and 2.3 million unique visitors, which is quite impressive and representative.

The  results from the analysis for the browser capabilities are the following:

Browser types:

  • IE : 75,6%
  • Firefox : 18,2%
  • Safari : 5,1%
  • others: 1,1%

Operating Systems:

  • Windows : 91,8%
  • MacIntosh: 7,5%
  • Linux: 0,5%
  • others: 0,2%

Screen Resolutions:

  • lower or equal 800 pixel horizontal: 7,2%
  • 1024 x 768 pixel: 43,5%
  • higher or equal 1152 pixel horizontal: 49,3%

Flash support:

  • Flash 10: 20% (augmenté à 40% les trois derniers mois)
  • Flash 9: 64,4%
  • Flash 8 or less: 15,6%

Java support:

  • yes: 98,3%
  • no: 1,7%

Traffic sources :

  • Direct traffic : 58,2%
  • Refering sites : 40,1%
  • Search Engines : 1,1%

Key search terms : women in art, artgallery, digital art

Number of recurring visitors (more than 9 visits in 3 years): 31.326

Number of very loyal visitors (more than 200 visits in 3 years) : 2.891

The Web Information Company Alexa provides the following metrics (Demographics) for the website:

  • Age : Relative to the general internet population, 55-64 year olds are greatly over-represente
  • Gender : Relative to the general internet population, Females are over-represente
  • Education : Relative to the general internet population, people who went to graduate school are over-represented
  • Location :  Relative to the general internet population, people browsing from home are over-represented
  • Key search terms :  video,  alice, women in art, digital art

Quantcast provides following informations : This site reaches approximately 12,614 U.S. monthly people. The site attracts a 50+, somewhat wealthy, rather female, more educated group.

Web Design : layout’s with rounded corners

Posted on by

last update : 18 August 2011

In the past it was impossible to create any kind of curved shapes using pure HTML. There were three methods to generate layouts with rounded corners :

  • CSS
  • Javascript
  • Images

There were a lot of tutorials available on the net how to create rounded corners with CSS. A simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript was the online tool Spiffy Corners from Greg Johnson.

One of the first creators of CSS layouts with rounded corners was Alessandro Fulciniti. He improved his Nifty Corners technique by adding Javascript.

Both methods didn’t work as expected on elements with fixed height, even if a external wrapper was applied. For this reason I preferred the image method with four corner images. Douglas Livingston‘s demo-page show a simple way how to do it (creative commons license). Another useful tutorial about rounded corners has been published by Trenton Moss, complete overviews of techniques are available at CSSjuice and Smileycat.

With HTML 5 and CSS3, the described techniques have become obsolete. CSS3 supports native rounded corners.

Flexible Web Design: web-page width

Posted on by

Last update : June 24, 2014

Web-page layouts can be grouped into four categories based on how their width is set: fixed-width, fluid (or liquid), elastic and hybrid. Creating web pages without fixed-width is considered as flexible web design.

The width of the overall layout of a fixed-width design is set to a value in pixels that’s decided by the designer, based on common screen resolutions, such as 800 by 600 or 1024 by 768. A recommended page width for 1024 by 768 pixel screens is 960, which is divisible by many numbers (2, 3, 4, 5, 6 and multiples). Fixed-width designs are rigid: they don’t change size based on any variations in the user’s setup. Because some people don’t browse with their browser window maximized, the screen resolution doesn’t match the browser window width all the time. Fixed-width designs are always going to result in some segment of the audience seeing a design that is either too wide for their windows (necessitating the dreaded horizontal scrolling) or too narrow (leaving oceans of space on one or both sides of the layout). Many people get almost as distressed about “wasted space” in their browser as they do about horizontal scrolling.

Fluid layouts, also known as liquid layouts, change in width based on the size of the user’s viewport (the viewable area of a page in the user’s device). If fluid layouts don’t have a width assigned with CSS, they will fill up the user’s viewport no matter how big or small it is. If a designer does assign a width to a fluid layout, it will be measured in percentages, not in pixels. The percentage refers to the portion of the viewport it takes up. When a fluid layout changes in size, all of the content within it has to shift around on the page to fill up the space. Horizontal scrollbars are the sworn enemy of readability. After all, scrolling continually back and forth to read across several lines of text does not make for the most enjoyable reading experience. With a liquid layout, horizontal scrollbars almost never happen, because users can size the window however they like to produce lines of text that they find the most comfortable to read and understand.

Elastic layouts change in width based on the text size set in the user’s browsing device. A user who has set a larger default text size will see a page where not only is the text bigger, but the entire layout is bigger proportionally than that seen by people with the default text size. Like fixed-width layouts, elastic layouts always have a width assigned to them, but that width is set in a unit of measurement called an em. One em is equal to the font height, which in turn equals roughly two characters in width, since most characters aren’t nearly as wide as they are tall. Elastic layouts are the rarest type of layout because before CSS became usable for page layout, they were simply impossible to create with tables. In many browsers, you can use the zoom feature to make all pages act like elastic layouts, which reduce the interest to use real elastic layouts.

Most web layouts are built using the idea of columns, whether or not the columns are explicitly visible in the design. Each column can have its own unit of measurement and be thought of individually as fixed-width, fluid or elastic. Mix them together, and you’ve got a hybrid layout. For example, a common type of hybrid layout has a fixed-width sidebar with a liquid main content area.

A resolution-dependent layout is a page that uses JavaScript to switch the CSS and thus the layout of the elements on the page by detecting browser window size. The CSS properties min-width and max-width allow you to set limits on how far a flexible layout will expand or contract.

More informations are available at the Peachpit website and at baekdal.com.

Newsletter analysis with spam check tools

Posted on by

To be sure that a newsletter with innocent words and formatting get not trapped in people’s or ISP’s spam filters, it’s useful to check it with an appropriated tool. Site Build It offers a free SpamCheck tool by form on the web or by e-mail.

I use the free MailingCheck software (version 104) from eDisplay to analyse my newsletters before sending them to the recipients. The test-email file has to be in .eml or .htm format. MailingCheck, as most spam check tools, use the open-source Apache SpamAssassin Project.

Another tool used by ISP’s to prevent spam  are blacklists. A useful guide about this topic is available at the SpamLinks website. Blacklists or blocklists are lists of IP addresses, domain names, email addresses or content of the headers or the body, or some combination of these different types, that can be used to help identify spam. A special subset of IP address and domain name lists exist which can be queried using DNS, which are called DNS Blackhole Lists or DNSBLs. Blacklists can be unverified and cause “collateral damage”; their criteria for listing may not be clear.

I use the free Anti-Spam Blacklist Thing software from BlacklistPatrol/SpamButcher.

Antispam

Blacklist Patrol offers also a paid service to proactively monitor major anti-spam blacklists to see if an email server has been listed on any of them.

More informations about spam and blacklists can be found on wikipedia.

GWT-Ext

Posted on by

GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext. GWT-Ext has a LGPL license option.

NetBeans : another IDE

Posted on by

“What IDE is the best : Eclipse or NetBeans ?” is an often discussed topic among developpers.

NetBeans is a free, open-source Integrated Development Environment for software developers with all the tools you need to create professional desktop, enterprise, web, and mobile applications with the Java language, C/C++, and even dynamic languages such as PHP, JavaScript, Groovy, and Ruby. The actual version of NetBeans is 6.5.

Twitter Applications and API

Posted on by

Twitter has received a lot of attention from developpers. A very useful list of all available applications, bots, scripts, programs and other informations related to Twitter is published on the Twitter Fan Wiki.

The Twitter API wiki documentation currently divides the API into two categories: the REST API Documentation and the Search API Documentation. The Search API uses a slightly different syntax and is documented separately because it was developed independently at Summize, a company that Twitter has since acquired; while the Search API is still pretty straightforward and RESTful, plans are underway to make it more consistent with Twitter’s other REST API methods. More informations are available on the DevX.com website.

For most popular programming languages, there exist a Twitter API library that lets you send and receive tweets and other Twitter-related information using the syntax and data structures of those programming languages. Libraries for the Twitter Api for different programming languages are listed on the Twitter Development Google Groups website and on the Twitter website.

There are six Java projects kwown related to the Twitter Api :

Small Java Web Server

Posted on by

Paul Mutton, who graduated at the University of Kent at Canterbury in 2001 with first class honours in Computer Science (BSc Hons), created  a very small standalone web server written in Java (less than 4 KByte). A more advanced version has less than 10 KByte and is called Jibble Web Server.

The softwares are OSI Certified Open Source Software, available under the GNU General Public License (GPL). Commercial licences are also available.

Other useful Java projects from Paul Mutton are :

Nabaztag choreographies

Posted on by

updated: 2.8.2010

Nabaztag choreographies contains led control and ear control. Each of the five leds can be controlled to have RGB values from 0-255. Ears can be moved to certain positions from 0x0 to 0x12 forwards or backwards. Also there is a possibility to move an ear forwards a certain step count. These files are made from three parts. First there is a header which contains the length of bytes and in middle there is the data and at the end four zero bytes.

00 00 00 08 00 07 02 255 00 00 00 00 00 00 00 00

Choreography files are timed and this reflects also to the command bytes. First byte of command bytes tells how long to wait before playing a new command from the beginning of last command (ts = timesteps). Second byte tells the type of command. After these two bytes there can be any amount of bytes relative to the command.

The different commands (orange data) are :

  • TEMPO command (code 01, default tempo = 10;  tempo = 1 > timestep = 10 ms;  tempo = 100 > timestep = 1s) :
    ts 01 10
  • LED command (code 07, LED-id, red, green, blue, two zero bytes) :
    ts 07 02 FF FF 00 00 00
  • EAR command (code 08, right=0 or left=1 ear, ear position 0-18, forward=0 or backward=1) :
    ts 08 00 05 01
  • EAR STEP command (code 0B, right=0 or left=1 ear, steps forward) :
    ts 11 01 0A
  • MIDI command (code 0A, play random note) :
    ts 10
  • CHOR command (code 0E, LED-id, code F0): set LED to Palette-color  (PL commande in message) or to Preset-color (CL command in message)
    ts 0E 01 F0
  • IFNE command ( synchronizes choreography to sound; details unknown) :
Nabaztag Flash

Nabaztag Flash

There are different choreography editors available (none with support of MIDI or CHOR command) :

Choreography Maker

Bunny Messenger

jNabServer for Nabaztag

Posted on by

Last update : March 1, 2017

JNabServer is an open-source server software which handles communication with Nabaztag/tags, Wi-Fi enabled robotic rabbits that can be used as physical user-agents in human-computer interaction.

JNabServer is a part of a project by SPI -Research Group from University of Tampere in Finland. It is the base on a research on how Nabaztag could be used as an multimodal user-agent. The project is a part of Speech-based & Pervasive Interaction Group research.

JNabServer is written in j2se 6 (Java Standard edition) so it is platform independent. Main idea is that people can develop their applications and ideas more freely on jNabServer platform. By releasing this code as an Open-Source Project the developers want to give this extendible platform to be used in various projects including her own research in the university of Tampere.

The jNab server is started with the following command from the jNab folder

java -cp libjNab.jar jNab

in the command prompt window with a Java 6 environment.

The customization of the server is done in the configuration file jNab.conf. I set the following parameters:

# Ip address to which the server will be bound
jNab.server.ip=192.168.1.2

# Port to which the server will be bound to listen for Nabaztag’s
jNab.server.port=81

# Ip address to which the configuration server will be bound
jNab.conf.ip=192.168.1.2

# Port to which the configuration server will be bound to listen to a Telnet client
jNab.conf.port=6969

To manage the jNab.Server, a Telnet session is established with the telnet program which is usually located in the C:/WINDOWS/system32/ folder. The telnet program is started with the following command from the WINDOWS/system32/ folder

telnet.exe 192.168.1.2 6969

in the command prompt window (or use the telnet command o [ip-address] [port]). If the connection is succesful, the server will answer with a welcome message :

MicroServer configuration front-end. v1.0

An example is shown in the following figure :

Telnet

Telnet

If the connection fails, possible reasons are :

  • an error in the configuration file or in the telnet address
  • the ports are barred in the firewall
  • the ports are used by an other program running

A recommended solution to solve the problems is to verify the correct working of the server and the telnet client on the same computer with the IP-address “localhost” or “127.0.0.1”. If the computer running the jNabServer is managed by DHCP (Dynamic Host Configuration Protocol), the  IP-address attributed by the router is to be used.

To connect the Nabaztag’s to the server, you have to modify his connection parameters. To activate the wireless access-point of the Nabaztag, press down and hold the button between his ears while plugging the power cord. When all the lights of the Nabaztag turn blue, you can release the button. Catch the wireless network of the Nabaztag with the name nabaztag## on your laptop and click Connect.

Enter the Nabaztag IP address http://192.168.0.1 in the browser to access the Nabaztag configuration page. Go to the advanced configuration page and change the address of the Violet platform from r.nabaztag.com/vl to 192.168.1.4:81/vl. Click Update and Start and the Nabaztag will connect to the jNab-server.

The Nabaztag will request the bc.jsp webpage from the server with a HTTP-GET command and receive as answer the file bootcode.bin (59 KByte) with the binary boot code. It’s the initial bootcode from Violet before the protocol was changed to XMPP (Jabber).

The hardware of the Nabaztag consist of two moving ears which positions are tracked with optical sensors, a button, a microphone, a speaker and a rfid-reader. The rfid-reader reads tags of type ISO 14443 B. These tags operate on 13,56mhz and have a 4096-bit EEPROM.

The loaded byte code inside Nabaztag operates the following actions :

  • display and change the colour of the five LED’s (four in front and one in bottom)
  • turn the ears forward or backward
  • register a single or a double button-click
  • register an ear movement
  • read RFID tags
  • record and encode (ADPCM) sound from microphone when button was pressed for 2 seconds
  • receive and play sound to the speaker
  • send the events to the server
  • process data received from server
  • call the server with fixed intervals (ping interval)

The GET/POST requests used by the Nabaztag are the following :

  • bc.jsp (to request and process the correct booting byte code)
  • locate.jsp (to ask the IP adresses of the ping- and the broadcast-server)
  • p4.jsp (basic ping calls with informations about events)
  • record.jsp (encoded audio data of the recorded sound is passed to the server)
  • rfid.jsp (ID of the sniffed RFID is passed to the server)

A more detailed information is available at the website of the university of Tampere in Finland.

The implemented commands to send via the Telnet protocol to the jNab-server are (my Nabaztag “Aenderhues” and “Ouschterhues” with serial numbers “0013d3845819” and “0019db01e01f” are used as example) :

  • INFO server
  • SHUTDOWN client
  • SHUTDOWN server
  • INFO bunnies
  • INFO bunny: 0013d3845819
  • SET bunny name: 0013d3845819 Aenderhues
  • SET bunny ping interval: 0013d3845819 25
  • ADD bunny plugin: 0013d3845819 Dice_Plugin
  • SET bunny plugin parameter: 0013d3854819 Talkie_Plugin 0019db01e01f
  • REMOVE bunny plugin: 0013d3845819 Dice_Plugin
  • SAVE bunny: 0013d3845819

The available plugin’s are :

  • Dice_Plugin
  • GreenOrangeRedWithEars_Plugin
  • SystemOutLogger_Plugin
  • Echo_Plugin
  • Null_Plugin
  • Talkie_Plugin

The processing requests treated by the worker java class are :

  • case 1 : bunny asks for its bootcode
  • case 2 : bunny asks for location
  • case 3 : bunny notifies an event (ping, rfid, record, …)
  • case 4 : bunny asks for a choreography
  • case 5 : bunny asks for a local file

I installed the jNab-server on my Desktop (wired) and run the Telnet client on my Laptop (wireless), both are connected to a Thomson Speedtouch Router 585i of my Home Network (LAN). The following informations are displayed on the console during normal operation:

<jNab/server> new connection from /192.168.1.34:12933

<jNab/server/worker: /192.168.1.34:12933> Request received:

Request with params : {tc=7fffffff  v=65808  st=1  requestfile = /vl/p4.jsp  h=4  sd=0  sn=0013d3845819}

<jNab/server/worker: /192.168.1.34:12933> Processing request

<bunny /0013d3845819> Handling a ping event

<jNab/server/worker :/192.168.1.34:12933> Packet to send is a default packet

<jNab/server/worker:/192.168.1.34:12933> Sending packet:

Packet:

[Data block type: 3 size: 1]

[Raw data :20]

[Ping interval block set for 20 seconds]

[Data block type: 4 size: 23]

[Raw data 127 -1 -1 -1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ]

The server sends a packet to the Nabaztag when it request a ping command. The answer packets are custom byte arrays. These byte arrays start with byte 7F and end with FF and 0A bytes. In between there can be any amount of blocks. Blocks consists of three parts. First there is a byte telling the type of the block(03 , 04 , 09 and 0A). Next three bytes are reserved to indicate the length of data in the blocks. After the length bytes there is the data for the block. The following figure shows an example :

Nabaztag packet

Nabaztag packet

There are four different block types :

  • 03 : ping blocks to change the ping interval
  • 04 : ambient blocks sets light flashing patterns
  • 09 : reboot block
  • 0A : message blocks contains commands that are separated from each other with newline character

There are eight possible commands in a message block :

  • ID : id of the message
  • CL : color
  • PL : palette
  • CH : choreography
  • MU : sound
  • MC : sound
  • ST : shoutcast streaming
  • MW : wait

Choreographies are files that can be played by calling them from message blocks with CH command.