CSS3 Speech Module

CSS3 Speech module is now in last call state (Aug 18 , 2011) . Journey for making accessible web standards have come far from WCAG guidelines , SSML (Speech Synthesis Markup Language ) to CSS Speech

Here is the summary of what CSS Speech module provides.

CSS Speech standard specifies how to present the content in way which can be understood by speech synthesizers. Using CSS Speech module we can specify meta data like voice speed , pause information etc for content . This CSS information is used by User agents while rendering and producing final sound output for the content.

Typical usage for this would be

• Screen readers
• Machine to Human interaction ( e.g incase while you are driving car , car would read content for you online with appropriate pauses , breaks etc or your ebook reader will read the book , exactly the way it is read by humans)

CSS Speech is based on concept of Aural Box Model for content to be rendered in speech form . It is a conterpart for visual box model for visual presentation of content.

See the Visual box model for CSS and Aural Box Model below for similarities

 

Cue : Cue is small piece of sound which you can insert in between.

Properties and Characteristics which are available include

Pause Properties

• pause-before
• pause-after

Rest Properties

• rest-before
• rest-after

Cue Properties

• cue-before
• cue-after

Speaking Properties

• speak
• speak-as

Mixing Properties

• voice-volume
• voice-balance

Voice Characteristics

• voice-family
• voice-rate
• voice-pitch
• voice-range
• voice-stress

The link below provides the complete summary for each of the above properties

http://www.w3.org/TR/css3-speech/#property-index

Browser share in various markets

Browser share worldwide shows some interesting ideas.

Internet Explorer will slowly fade down to market share of 20%

You can develop with latest standards of CSS3 and HTML5 freely

Ultimately browsers will compete with them selves to retain market share , following latest W3C specifications for CSS and HTML

As a Web Designers / Developers we can recommend our users to use latest browsers which can give best browsing experience

 

Here are some of the useful website to check the market share statistics for latest browsers

 

• http://marketshare.hitslink.com/browser-market-share.aspx?spider=1&qprid=0 
• http://gs.statcounter.com 
• http://www.w3counter.com/globalstats.php 
• http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

 

My main point for looking at these websites was something different , i wanted to analyze how various counties fair in terms of riding the latest browsers usage wave. Which country is ahead in using up latest browsers.

Graceful degradation and Progressive Enhancement

Graceful degradation and Progressive enhancement are two different web design strategies

Progressive enhancement

In progressive enhancement you design for bare minimum design standards , generally without any CSS or JavaScript support. In this way webpage will have content that all users can see at least , irrespective of the user agents.

And slowly slowly on the top of baseline design we add on latest standards support for example Latest CSS3 styling.

You can read more about Progressive enhancement at Wikipedia

Graceful degradation

Graceful degradation is very aggressive form of web design in which you are following latest standards and specifications and incase user agent doesn't support them , you don't show latest markup styles. Your webpage just degrades itself to present all what is supported by current user agent.

You can read more about Graceful degradation at Wikipedia

Some of the useful links on the same topic

• The Case for Designing with Progressive Enhancement,” by Todd Parker, Maggie Costello Wachs, Scott Jehl, and Patty Toland (www.peachpit.com/articles/article.aspx?p=1586457)
• “Progressive Enhancement: What It Is, And How To Use It?,” by Sam Dwyer (www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it)
• “Progressive Enhancement: Paving the Way for Future Web Design,” by Steven Champeon(www.hesketh.com/publications/articles/progressive-enhancement-paving-the-way-for)
• “Graceful degradation versus progressive enhancement,” by Christian Heilman (http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance)

Also please share any other useful link you have for the same.

Browser Support for CSS3

Different browsers use different layout engines to render the HTML / CSS markup to the end user. Layout engine is a software which is used by browsers to read the HTML/CSS markup and produce final output on the user screen. It reads all the HTML and renders it onto browser.

You can also read about List of various layout engines and their comparison of layout engines for support of HTML5 and CSS3 standards at wikipedia.

Identifying which browser supports what CSS3 features can be a daunting task. Ultimately we should design around basic principle that irrespective of final user agent our web application should be usable to the end user. Progressive Enhancement design principle says that , make your web page with minimal markup without CSS so that it looks fine without any Javascript or scripting. Then we slowly improves its look by using advanced CSS and Scripting techniques. Designing With Progressive enhancement is an excellent book to learn more about it.

The following websites are helpful in deciding which of the CSS3 properties you can use safely and are supported by browsers.

HTML5 and CSS3 Browser support

Can i Use us wonderful website which tells about browser support for HTML and CSS3 feature you ask for

http://www.standardista.com/css3

http://www.quirksmode.org/css/contents.html

Layout engines

-moz properties support

http://css-infos.net/properties/firefox.php

-webkit properties support

http://css-infos.net/properties/webkit.php

If you are developing some email application then following website would be useful to see CSS3 and HTML5 support for various email clients

http://www.campaignmonitor.com/css/

If you are developing something for Apple world , iPad etc then following Apple developer guide would be useful

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

Getting Started with CSS3

CSS3 is next level of CSS2.1 in which lots of new features are being developed.

The interesting thing to be noted for CSS3 is that it is group of various modules which are being developed as part of CSS3 specifications. For example one module deals with how to display tables using CSS and other deals with how to use CSS for displaying images.

The inherent advantage of using modular concept for developing CSS specification is that each module can be developed independently and hence presented in market independently for reviews , comments and usage. The time to market for CSS3 will be reduced by following modular approach than following one big bang change. This gives time to all stake holders from User agents producers to web site owners to adapt to new specifications.

The list of modules present in CSS3 standard and their current status of developed is documented in W3C official CSS3 working group website.

http://www.w3.org/Style/CSS/current-work

The key to read this is as follows

Ab­bre­vi­a­tion and Full name

WD
Working Draft

LC
Last Call

CR
Candidate Recommendation

PR
Proposed Recommendation

REC
Recommendation

New Google results with Sublinks description

I noticed Google is showing some detailed text snippets for the sub links which it shows for many websites

Along with website text description it is also showing up text description for sub links

Here is the results with simple sublinks

 

Now Here is what i saw today for one of the website which i was searching

 

Interestingly this behavior is not consistent. I guess Google is testing some new feature

What are your thoughts on this ?

Web Service Client using Bottom up approach in Eclipse

This post is in continuation to http://jugnu-life.blogspot.com/2011/08/getting-started-with-web-services.html

This post will cover how to Create a new Web Service Client project , bottom up approach of development.

 

In the Wizard paste the URL of WSDL copied earlier

Sect Axis Runtime as Apache Axis2

Click on Client Project and Enter new New Client Project Name BottomUpWebServiceClient , it will automatically become of type Dynamic Project . Its fine.

Drag up the slider for client and make it start

Click Next

Keep all settings as default

Select

Generate a Junit test case to test the service

Click Finish

That completes the Client generation process

Now we will test this what we have created

In the test package

Open the file CalculatorTest.java

In the TODO you can see we have two methods , add and subtract

Add the following lines for subtract and add methods TODO

subtract8.setC(10);

subtract8.setD(30);

I am just passing values of parameter c and d as 10 and 30 respectively

Similarly for addition we can write like

sum10.setA(100);

sum10.setB(30);

I am just passing values of parameter a and b as 100 and 30 respectively

Save the file

RightClick on CalculatorTest and Select Run As Junit Test

All the 4 tests should pass as shown below

That completes the WSDL creation, client creation and testing process using bottom up approach

Getting Started with Web Services bottom up WSDL development

This tutorial will guide you how to create a new Web Services project with Bottom up approach.

You can read this earlier post If you want to read what us Bottom up and Top down web service development approach.

This tutorial will help you to get started to use

• Eclipse WTP Tools
• Apache Axis2 runtime
• Create a simple webservice
• Create simple client

The tutorial is updated version of the one present in Eclipse official website . It follows the same steps

This is a long tutorial and hence has been divided into two posts.

• This post and
• Web Service Client using Bottom Up approach

The list of softwares required are

1. Eclipse J2EE ( I used Indigo) ( Download Eclipse )
2. Apache Axis runtime( I used 1.6.0 binary distribution ) ( Download Apache Axis )
3. Apache Tomcat ( I used 7.0.19 windows distribution) ( Download Tomcat )

Environment Setup

1. Extract all the Zip files for above 3 , just note the location of all of these three.

2. Axis Configuration :

Start Eclipse Go to Window > Preferences > Web Services > Axis2 Preferences

Browse for Axis2 folder where you extracted Axis download

Message that Axis runtime loaded successfully will be shown.

 

3) Tomcat Configuration

Start Eclipse Go to Window > Preferences > Server > Runtime Environments

click Add

Browse and give path for tomcat zip where you extracted.

This will configure tomcat for eclipse.

This completes the system environment setup part for developing new Web Service project

Creation of Project

Next we need to create a project with the support of Axis2 features. Open File -> New -> Other... -> Web -> Dynamic Web Project

Give the project name as BottomUpWebService

Select the target runtime as configured earlier

Select Dynamic web module version as 2.5

In the Configuration , select custom and click Modify

When you select Modify , a new Window Project Facets will come

Choose Apache Axis also along with Java / J2EE

Click Ok to save and exit

 

In Project setup wizard , just click Next , Next to complete the project creation

Just write simple addition and subtraction program in src folder

package firstWebService;

public class Calculator {
	
	int sum(int a,int b){
		return a+b;
	}
	
	int subtract (int c,int d){
	return c-d;
	}
}

Select Calculator.java, open File -> New -> Other... -> Web Services -> Web Service

Click Next

Click on Web Service runtime and select Apache Axis2

· The Web service wizard would be brought up with Web service type set to Bottom up Java bean Web Service with the service implementation automatically filled in. Move the service scale to Start service.

 

 

On the

If the server is currently stopped , it will say you to Start Server . Just click Start Server

After server has been started , just click finish

Deploy the Project

Right click on the project BottomUpWebService and select Run As > Run on Server

Select the tomcat which you configured earlier to run this project and Click Finish

The home page will open to show that Apache Axis is running

Click on services

Click on Calculator to see WSDL file of Calculator class generated

 

This completes the WSDL generation

Copy the WSDL URL above , we will need this is next process

http://localhost:8080/BottomUpWebService/services/Calculator?wsdl

Now we will make Client for this project

Create a new Web Service Client project

http://jugnu-life.blogspot.com/2011/08/web-service-client-using-bottom-up.html

Bottom up vs Top down Web services development

Bottom up approach

Bottom-up Web services development involves creating a Web service from a Java bean or enterprise bean.

Although bottom-up Web service development may be faster and easier, especially if you are new to Web services, the top-down approach is the recommended way of creating a Web service.

When creating a Web service using a bottom-up approach, first you create a Java bean or EJB bean and then use the Web services wizard to create the WSDL file and Web service.

Top Down

In Top Down approach , business logic first. A contract on business side is finalized and then WSDL is made based on that based on business requirements.WSDL to Java based tools generate necessary files .Top-down Web services development involves creating a Web service from a WSDL file.

When creating a Web service using a top-down approach, first you design the implementation of the Web service by creating a WSDL file. You can do this using the WSDL Editor. You can then use the Web services wizard to create the Web service and skeleton Java classes to which you can add the required code.

In this way you have more control over how business logic is being handled by creating WSDL first

Although bottom-up Web service development may be faster and easier, especially if you are new to Web services, the top-down approach is the recommended way of creating a Web service. By creating the WSDL file first you will ultimately have more control over the Web service, and can eliminate interoperability issues that may arise when creating a Web service using the bottom-up method.

However from final consumer point of view this can be a pain. For example they will not get the data in the format in which they require , they might have to do lot of manipulations , calculations to ultimately consume the data.

---------------------

I have seen fight when you are not in WSDL side , IT people who are at consumer side want that WSDL should directly provide us this data in format in which they can consume easily.

The bottom up approach generates web services for which the design is driven from an application point of view (developer driven) and will not address the need for other consumers.

Some useful Websites with pros and cons on Top and Bottom up approach

http://www.infoq.com/news/2010/07/top-down-bottom-up-soa

http://oracled.wordpress.com/2009/12/25/developing-web-service-top-down-vs-bottom-up-approach/

http://technologyandleadership.com/top-down-vs-bottom-up-soa/