Archive for the ‘CSS3’ Category

O’Reilly Web Design Site

Wednesday, December 16th, 2015

O’Reilly Web Design Site

O’Reilly has launched a new website devoted to website design.

Organized by paths, what I have encountered so far is “free” for the price of registration.

I have long ignored web design much the same way others ignore the need for documentation. Perhaps there is more similarity there than I would care to admit.

It’s never too late to learn so I am going to start pursuing some of the paths at the O’Reilly Web Design site.

Suggestions or comments concerning your experience with this site welcome.

Enjoy!

W3C Validation Tools – New Location

Wednesday, June 3rd, 2015

W3C Validation Tools

The W3C graciously hosts the following free validation tools:

CSS Validator – Checks your Cascading Style Sheets (CSS)

Internationalization Checker – Checks level of internationalization-friendliness.

Link Checker – Checks your web pages for broken links.

Markup Validator – Checks the markup of your Web documents (HTML or XHTML).

RSS Feed Validator – Validator for syndicated feeds. (RSS and Atom feeds)

RDF Validator – Checks and visualizes RDF documents.

Unicorn – Unified validator. HTML, CSS, Links & Mobile.

Validator.nu Checks HTML5.

I mention that these tools are free to emphasize there is no barrier to their use.

Just as you wouldn’t submit a research paper with pizza grease stains on it, use these tools to proof draft standards before you submit them for review.

Shadow DOM

Tuesday, March 25th, 2014

Shadow DOM by Steven Wittens.

From the post:

For a while now I’ve been working on MathBox 2. I want to have an environment where you take a bunch of mathematical legos, bind them to data models, draw them, and modify them interactively at scale. Preferably in a web browser.

Unfortunately HTML is crufty, CSS is annoying and the DOM’s unwieldy. Hence we now have libraries like React. It creates its own virtual DOM just to be able to manipulate the real one—the Agile Bureaucracy design pattern.

The more we can avoid the DOM, the better. But why? And can we fix it?
….

One of the better posts on markup that I have read in a very long time.

Also of interest, Steven’s heavy interest in graphics and visualization.

His MathBox project for example.

D3.js, Three.js and CSS 3D Transforms

Friday, March 21st, 2014

D3.js, Three.js and CSS 3D Transforms by Steve Hall.

From the post:

This week I have been having some fun thinking about how you could use D3.js and Three.js together to do some data visualization work. We’ll have to put this one in the experimental column since there is a lot more work to be done, but I was pretty pleased with the results and thought I would blog about what I have done up to this point. While there are plenty of dramatic examples of three.js used to generate 3D globes with lines shooting everywhere, I was interested in a more subtle approach to complement work in D3. I would be curious to hear about other experiments going on along the same lines. A Google search didn’t turn up much.

The following example is using D3 to generate HTML elements and SVG charts and also to store coordinate information for transitions inside data properties. The objects created using D3 are then passed into a three.js scene and animated using CSS 3D transforms (no WebGL here, this is pure DOM).

You really need to run the full demo on a large, high-res monitor.

Wicked cool!

Definitely raises the bar for data visualization!

The only downside being you will be expected to find clever 3D ways to visualize data. Way more complicated than the visualization itself.

The Seven Parts of “HTML 5 Fundamentals”

Wednesday, March 19th, 2014

The Seven Parts of “HTML 5 Fundamentals” by Greg Duncan.

From the post:

It’s Web Wednesday and today we’re going to take a step back and share a series by David Giard, who’s going to give us a fundamental look at HTML5. Oh, I know YOU don’t need this, but you might have a "friend" who does (cough… like me… cough…).

HTML 5 Fundamentals

Read this series of articles to learn more about HTML5 and CSS3

Part 1- An Introduction to HTML5

Part 2 – New Tags

Part 3 – New Attributes

Part 4 – New Input Types

Part 5 – CSS3

Part 6 – More CSS3

Part 7 – HTML5 JavaScript APIs

Part 1 has this jewel:

Due to the enormous scope of HTML5 and the rate at which users tend to upgrade to new browsers, it is unlikely that HTML5 will be on all computers for another decade.

Let’s see, a web “year” is approximately 3 months according to Tim Berners-Lee, so in forty (40) web years, HTML5 will be on all computers.

That’s a long time to wait so I would suggest learning features as they are supported by the top three browsers. You won’t ever be terribly behind and at the same time, your webpages wit

That would make an interesting listing if it doesn’t exist already. The features of HTML5 as a matrix against the top three browsers.

Legend for the matrix: One browser – start learning, Two browsers – start writing, Three browsers – deploy.

Yes?

I first saw this in a tweet by Microsoft Channel 9.

Client-side full-text search in CSS

Friday, September 13th, 2013

Client-side full-text search in CSS by François Zaninotto.

Not really “full-text search” in any meaningful sense of the phrase.

But I can imagine it being very useful and the comments to his post about “appropriate” use of CSS are way off base.

The only value of CSS or Javascript or (fill in your favorite technology) is creation and/or delivery of content to a user.

Despite some naming issues, this has the potential to deliver content to users.

You may have other criteria that influence you choice of mechanisms but “appropriate” should not be one of them.

node-webkit

Tuesday, December 4th, 2012

node-webkit

From the webpage:

node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and Javascript with node-webkit. It also lets you to call Node.js modules directly from DOM and enables a new way of writing native applications with all Web technologies.

Will HTML5 and Javascript, via apps like node-webkit free users from developer based interfaces?

Developer based interfaces are intended to be useful for others, or at least I suspect so, but quite often fall short of the mark.

Apps like node-webkit should encourage rapid prototyping and less reluctance to trash yesterday’s interface code. (I said “should,” whether it will or not remains to be seen.)

Rather than a “full featured” topic map editor, how would you divide the task of authoring a topic map into pieces?

I first saw this in Christophe Lalanne’s A bag of tweets / November 2012.

WebPlatform.org [Pump Up Web Technology Search Clutter]

Tuesday, October 9th, 2012

WebPlatform.org

From the webpage:

We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

From Matt Brian:

In an attempt to create the “definitive resource” for all open Web technologies, Apple, Adobe, Facebook, Google, HP, Microsoft, Mozilla, Nokia, and Opera have joined the W3C to launch a new website called ‘Web Platform

The new website will serve as a single source of relevant, up-to-date and quality information on the latest HTML5, CSS3, and other Web standards, offering tips on web development and best practises for the technologies.

I first saw this at the Semanticweb.com (Angela Guess).

So, maybe having documentation, navigable and good documentation, isn’t so weird after all. 😉

Assume I search for guidance on HTML5, CSS3, etc. Now there is a new site to add to web technology search results.

Glad to see the site, but not the addition to search clutter.

I suppose you could boost the site in response to all searches for web technology. Wonder if that will happen?

Doesn’t help your local silo of links.

Hakim [Graphics, Visualizations]

Monday, September 3rd, 2012

Hakim by Hakim El Hattab.

I was following a link to Reveal.js HTML Presentations Made Easy when I discovered its “parent” site.

A likely source of ideas for visualization for your data sets.

I first saw this at DZone.

Collection of CSS3 Techniques and Tutorials

Sunday, July 8th, 2012

Collection of CSS3 Techniques and Tutorials

From the post:

For today I have selected few fresh and useful CSS3 tutorials for your next project. CSS3 and HTML5 are the topics that you see and hear everyday and I think it is the right time to start diving into it. While there is no freedom in expressing our ideas in CSS3 prior to weak support in major browsers we want to be the first ones when it is fully supported right? Besides chasing the trends you will gain valuable experience in HTML5 and jQuery which will help you to solve your problems in your projects.

This techniques can be proficiently functioned using markup, HTML, and some improved properties of CSS3. It has many features which are not compatible with the old web browsers and hence it will require some present day internet browsers like Internet Explorer 7 & 8, Chrome, Safari and Firefox to use the CSS3. It can be used in developing the following techniques:

  • It can be used to create multiple backgrounds
  • Developing and drawing border images
  • Handling of opacity
  • Used in text- shadowing and box sizing
  • Used for support of columns of many different web layouts.

If we go back on time we will realize how far we have come from the time of Adobe’s Flash and JavaScript, which were used to create some cool designs. Then came the new version of CSS and it was CSS3 that has transformed the world of animation with its transition features. It is the markup language that has many other applications that can be used for designing web pages that are written in XHTML or HTML. Whereas on the other hand, CSS is made for primary separation of documents that are written in simple markup languages. The content accessibility provides elements which can differ from fonts to layouts and colors.

In this compilation you will find few tutorials on creating amazing transition effects, slideshows, navigation menus and much more.

However clever your models, searching/extraction protocols, etc., there will come a time when results have to be delivered.

Graphs, charts, visualizations, networks, static and interactive will play a role, but so will basic web design/delivery techniques.

You should be aware of what is possible, should you decide to out source the design task.

This collection illustrates the range of modern web presentations. Will also make you wonder about some of the web presentations you encounter.

I first saw this at DZone.