Quantcast
Channel: Web Teacher » HTML5
Viewing all 49 articles
Browse latest View live

Announcing Web Platform Docs

$
0
0

A great new resource for learning web design was announced at webplatform.org. It’s a wiki and participation by knowledgeable web designers and developers is needed. That said, it’s already a huge resource of the best information available.

Congratulations to everyone involved in this effort. The group calls itself the Web Platform Stewards, and includes

  • Adobe
  • Apple
  • Facebook
  • Google
  • HP
  • Microsoft
  • Mozilla
  • Nokia
  • Opera
  • W3C

Paul Irish has a lot of good ideas about how you can contribute to the site in Why I’m So Excited about Web Platform Docs.


© vdebolt for Web Teacher, 2012. | Permalink | One comment |


Useful links: Flexbox, background-size, models of disability, smart objects, HTML5 headings

$
0
0

Opera Dev has a post by Chris Mills called Flexbox: fast track to layout nirvana?

Take advantage of the CSS background-size property is at .net magazine.

Models of disability and their relation to accessibility is a fascinating post by Martyn Cooper. The post conclusion will give you an idea of the different models of disability the article discusses:

Our models of disability are important, they shape our attitudes and impact on how effectively the needs and preferences  of disabled people are met in design. The medical model is now widely seen as outmoded and a perpetuator of  discriminatory attitudes. The social model has had widespread influence. It is important in accessibility considerations because it recognises the importance of the context of the users and supports the view of accessibility as a relationship property; in the case of web accessibility the relationship being between the diversity of users and the web resource or application. Functional models have been asserted as the most useful in design and development and the potential of these for personalisation and analytics highlighted.

Working with Smart Objects in Dreamweaver and Photoshop is by Tom Negrino.

HTML5 Ranked Headings for Screen Readers. Yep, your hierarchy on HTML5. How’s it working in screen readers?


© vdebolt for Web Teacher, 2012. | Permalink | No comment |

HTML5: Past, Present and Future (Infographic)

Useful links: Figure/figcaption, a main element?

$
0
0

HTML5 Figure and Figure Caption Elements is an excellent tutorial with good code examples.

A couple of people are talking about the proposed ‘main’ element in HTML5 in On HTML5 and the proposed main element and The ‘main’ Element. Here’s the proposed ‘main’ element spec, by Steve Faulkner, that prompted the discussion. To contribute my opinion to the discussion of the proposed new element, I think it would be a valuable addition to HTML5. There is so much confusion as to the proper tag for the main content area of a page – should it be a div? A section? Something else? A new element with the semantic name and purpose ‘main’ is perfectly clear as to purpose and use.


© vdebolt for Web Teacher, 2012. | Permalink | No comment |

Useful links: top 50 books, form validation, Windows 8

$
0
0

Here’s what .net magazine thinks are the top 50 web design books. I haven’t read them all, but it is interesting that the titles they picked range from fairly technical to practical good sense to broadly philosophical.

Accessible form validation with HTML5 from Deque Systems uses HTML5, adds ARIA, and finally adds jQuery validation. This is the first of three parts.

Jakob Neilsen joins the list of critiques of Windows 8 for poor usability. Here are some early reviews of Windows 8 from several other sources.


© vdebolt for Web Teacher, 2012. | Permalink | No comment |

Useful links: a main element, @supports, required inputs,

Useful links: subline element, my name is me, Quora

Useful Links: W3C news, Instagram TOS

$
0
0

W3C published today the complete definition of the HTML5 and Canvas 2D specifications. Though not yet W3C standards, these specifications are now feature complete, meaning businesses and developers have a stable target for implementation and planning.

Instagram’s new terms of service are causing controversy. What Instagram’s New Terms of Service Mean for You is from the NYTimes. Wired tells us How to Download Your Instagram Photos and Kill Your Account. Alexandra Asher Sears, who writes about various site’s terms of service for BlogHer in a series called If Emily Posted, will be looking at the ethics of what Instagram is doing. That post will be published on BlogHer on Thursday and should be full of helpful details to help you make a decision about your Instagram account.

Regarding Instagram, here’s a strong thought from blogdiva,

 


© vdebolt for Web Teacher, 2012. | Permalink | No comment |


Useful links: Structural Pseudo-Classes, The Web, Fastbook, bMobilized

$
0
0

Good article at SitePoint about CSS3 Structural Pseudo-Class Selectors.

The Web We Lost by Anil Dash could be described as a thought piece, an examination of how the web has changed and whether it’s an improvement or not. Here’s a quote:

We’ve lost key features that we used to rely on, and worse, we’ve abandoned core values that used to be fundamental to the web world. To the credit of today’s social networks, they’ve brought in hundreds of millions of new participants to these networks, and they’ve certainly made a small number of people rich.

But they haven’t shown the web itself the respect and care it deserves, as a medium which has enabled them to succeed. And they’ve now narrowed the possibilites of the web for an entire generation of users who don’t realize how much more innovative and meaningful their experience could be.

Fastbook, Fastbook, Fastbook. Talk about it is everywhere. Here’s The Making of Fastbook: An HTML5 Love Story.

Convert your site to mobile with 30 seconds of analysis? That’s the claim. Check out DIY Mobile Website Creator bMobilized Adds Another $2.5 Million In Series A Funding  from TechCrunch


© vdebolt for Web Teacher, 2012. | Permalink | No comment |

Thanks for the Input Types (and curses upon them what ain’t)

$
0
0

Are you using HTML 5 and the new form input types with the form elements on your sites and apps? Especially on your mobile apps? If you are, then I say THANK YOU!

If you are not, and I am attempting to fill in your form on my smart phone, I’m probably cursing your name.

A Primer for Those Who Need It

What are input types? I’m sure you’ve used them if you’ve built a form. Before HTML5, most input types were text. <input type=”text”> New input types that came along with HTML5 are

  • search
  • email
  • website
  • phone
  • range
  • number
  • date
  • time
  • color

When you use the proper input type, a mobile device will display a screen or keyboard intended to help you complete your task. For example, if you use <input type=”search”> you get a search box automatically.

FirefoxScreenSnapz001

If you use <input type=”email”> You get a keyboard with an @ sign and a dot (.) right on top.

FirefoxScreenSnapz002

Similar keyboard goodies happen with the other input types: phone gives you a number pad, date gives you a calendar, and so on.

If you haven’t started using the new form input types yet, why the hell aren’t you?


© vdebolt for Web Teacher, 2013. | Permalink | No comment |

Useful links: Hixie, ARIA, WCAG

$
0
0

Bruce Lawson published a far-reaching interview with Ian Hickson, AKA Hixie, the editor of HTML5 at HTML5 Doctor. Maybe it’s because I just reviewed a book about Mark Zuckerberg, but this interview with Ian Hickson makes me think Hixie’s process and vision in managing the implementation of HTML5 amid a barrage of criticisms and complaints might be an interesting book. How about it, Bruce?

Changes to the recommendation for ARIA roles in <section> and <form> elements are listed in Using ARIA in HTML at the W3C. With some exceptions, ARIA roles are not recommended with these elements.

The Future of WCAG: Maximising its Strengths Not its Weaknesses is a long and thoughtful look at the WCAG accessibility guidelines. The author examines the guidelines strengths and weaknesses and takes a look at what needs to be done to move forward with this (or some similar) recommendation in the future.


© vdebolt for Web Teacher, 2013. | Permalink | 2 comments |

Useful links: a quiz, voice computing, programming for politics

$
0
0

You have until Jan. 29 to get in on the fun at Simplequiz #7: Pinterest. How should a pin be marked up in HTML5?

Any Eureka fans out there? Check out this article: Siri Jokes Aside, Voice Control will Make Computing Better.

As Obama heads back to office, a battle rages over the tech that got him reelected. This is potentially a very important question regarding building on open source. The tech community should be discussing this issue everywhere.

At issue is the code created during the Obama for America (OFA) 2012 campaign: the digital architecture behind the campaign’s website, its system for collecting donations, its email operation, and its mobile app. When the campaign ended, these programmers wanted to put their work back into the coding community for other developers to study and improve upon. Politicians in the Democratic party felt otherwise, arguing that sharing the tech would give away a key advantage to the Republicans.


© vdebolt for Web Teacher, 2013. | Permalink | No comment |

Useful links: Navigation, Christina Truong, Apple in China

$
0
0

Navigation in Lists: To Be or Not to Be is an important post by Chris Coyier. It talks about how using an unordered list as navigation may not be the great idea we thought it was. If you, like me, use unordered lists in all your navigation, you need to read this post.

If you haven’t checked out the new blog Women and Tech you must look at it. Amazing design and functions. Why not read their latest interview while you’re there: Christina Truong.

The Chinese New Year is coming. It will soon be “my” year for great good fortune – the year of the snake. Here’s a look at how Apple thinks about the marketing opportunities in the celebration of the Chinese New Year.


© vdebolt for Web Teacher, 2013. | Permalink | No comment |

A Roundup of Current Thinking on Responsive (Adaptive) Images

$
0
0

While responsive web design has taken off like a rocket, the question of what to do with images in a design that adapts to any device that might be used to display it is still under investigation. I’ve gathered some resources to help you understand the issues and see some of the tests and demos that have be done.

I don’t think we have a final answer that will become “best practice” yet, but there are a lot of great minds grappling with the issues.

Posts and Tips

Helpful Tools

W3C Involvement

 


© vdebolt for Web Teacher, 2013. | Permalink | No comment |

Useful Links: CSS gradients, the progress element, ARIA in WordPress


Useful links: Relationships, Human Users, Attachments

$
0
0

Anna Debenham has a very concise and clear post about using “rel” to establish relationships between people on her blog. It was a Valentine’s Day post, but the infomation is good any time of the year.

This fantastic post by Pamela Wilson on Copyblogger should be reproduced and used in every beginning web design class. It’s called The Essentials of Human Web Design.

NIcholas Zakas looks at the HTML5 and JavaScript that goes into Gmail’s attachment feature in Dissecting Gmail’s Email Attachments.


© vdebolt for Web Teacher, 2013. | Permalink | No comment |

Useful links: being human, Marissa Mayer, women’s history, Jared Smith on ARIA, captioning

$
0
0

Hello, I’m a human being is from Elliot Jay Stocks. May I repeat: we need an internet etiquette training movement.

While we are on the topic of how to use language to disagree and/or present your own point of view in a respectful yet effective manner, read this post by Lauren Bacon: On Marissa Mayer’s Disavowal of Feminism. It’s a great example of how to make a point without being a jerk about it.

Did you know this year’s Women’s History Month theme honors women in STEM? Yay, women in STEM.

Here’s a great post about how to use WebVTT and captioning on the web with the HTML5 video element.

Jared Smith made his slides from his ARIA Gone Wild talk available on Slideshare. Good stuff.

 

 


© vdebolt for Web Teacher, 2013. | Permalink | No comment |

Useful links: Drupal extension for Dreamweaver, computer history, HTML5 News

Useful Links: Accessibility Checklist, CSS Best Practice, hgroup out

Review: The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript

$
0
0

[Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy.]

The Modern Web cover

The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript by Peter Gasston is from no starch press (2013).

Recently I’ve been reevaluating that pyramid (or three-legged stool) image we have of what skills are used to create a web site. The traditional pyramid metaphor has been a broad foundational layer of semantic HTML, followed by a second presentational layer of CSS, with the complete pyramid being topped by a small peak of interaction created with JavaScript.

Now we have a modern web. We deal more and more often with responsive (or adaptive) thinking, with apps, with APIs, with new CSS layout techniques using programming concepts, and with images built from SVG or canvas. All these changes lead me to think that the foundational layer in the pyramid of web design skills should be recognized as JavaScript. Books like this one reinforce that idea. (I first began thinking about this when I reviewed Introducing HTML5, but I didn’t mention it at the time.)

There is concern over the idea of HTML5 as “pure” HTML vs. the idea of HTML5 and related technologies that often get labeled as HTML5. It’s a dilemma facing many authors today who tackle the topic of modern web technologies, because you can no longer talk “just” about HTML.

The web is moving toward scripting as a way of dealing with every part of a website. In this book by Peter Gasston, it’s very clear that what he calls “the demands and requirements of working on the multi-device Web” are interlaced inextricably with JavaScript. He’s writing about that broader range of technologies I mentioned.

This is a well-written book. In a clear and accessible manner, Gasston leads you through several chapters detailing the latest technologies and thinking in modern web design. The book isn’t for newbies, it’s for people who already have skills and want to keep informed on the latest thinking, trends, techniques, and possible future directions. Here’s a summary of the chapters. Every chapter has an extensive section called Further Reading with excellent resources for the reader.

  1. The Web Platform talks about HTML5 and new best practices, CSS3 and beyond, and CSS preprocessors.
  2. Structure and Semantics deals with new elements in HTML5, WAI-ARIA, semantic markup, microformats, RDFa, microdata, data attributes and web components.
  3. Device-Responsive CSS provides information about media queries, adaptive and responsive design, viewport relative length units, and responsive images.
  4. New Approaches to CSS Layouts talks about multi-columns, flexbox, and grid layout.
  5. Modern JavaScript looks at new features in JavaScript, JavaScript libraries, and polyfills and shims.
  6. Device APIs covers a whole bunch of APIs from geolocation to drag and drop as well as information about PhoneGap and Native Wrappers.
  7. Images and Graphics includes SVG and canvas.
  8. New Forms takes you through new input types, new attributes, datalists, on-screen controls, form validation, constraint validation and css for forms.
  9. Multimedia deals with media elements, media API, and media events.
  10. Web Apps talks about various kinds of apps and tools for creating them as well as application cache.
  11. The Future goes through some really interesting ideas that may become reality in the future such as decorators, the shadow DOM, regions and exclusions in CSS and more.

There’s an appendix for browser support and one with further reading suggestions.

The style of presenting each concept is consistent throughout the book. He introduces a single idea, provides a spare code example, and shows the results. (He talks as if there are code samples available for download somewhere, but although I searched for a mention of the location of those code samples, I couldn’t find it.) Then he builds on the previous example with an new idea, a new code example, and a new result. It’s a very effective way of walking the reader through the new information and building an understanding of it step by step.

Summary: Trying to keep up? This book is an informative and up-to-the-minute look at modern web technologies.

A review by Virginia DeBolt of The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript (rating: 5 stars)


© vdebolt for Web Teacher, 2013. | Permalink | No comment |

Viewing all 49 articles
Browse latest View live




Latest Images