Tag: html5

TinyMCE hack to shoehorn Paul Irish conditional statements into Cascade Server

Posted on | by C. | Leave a Comment on TinyMCE hack to shoehorn Paul Irish conditional statements into Cascade Server

Here is some code to shoehorn Paul Irish’s conditional statements for Internet Explorer into Hannon Hill’s Cascade Server using PHP’s ob_start() function. This is a mashup from a few people on the Cascade help forum. Really, it’s a TinyMCE (Cascade’s WYSIWYG editor) hack to get conditional code, i.e. comments, around the HTML tag. I know it’s a very specific use case, but if you are trying to make your web site responsive using HTML5 Boilerplate in Cascade you’ll want this. (Irony: WordPress’s WYSIWYG editor won’t save the code correctly so I took a screen shot.)

Paul Irish Cascade hack

UPDATE

Hannon Hill added a set of special tags in version 7.4 of Cascade that allow code – even “illegal” code – to sit in a page unrendered. You’ll find it in their knowledge base under Code Sections. Below is a revised version of the Boilerplate conditional statements using the new “protect-top” tag.

protect-top-cascade

HTML5.tx 2013

Posted on | by C. | Leave a Comment on HTML5.tx 2013

I attended HTML5.tx in Austin, Texas, February 1-3. Friday, February 1, was 8 hours of CSS3. Saturday was a series of 7, 1 hour-long talks. Sunday was 5 hours of JavaScript. Here is a brain-dump of my notes.

Links

Friday

CSS: from Knowledgable to Ninja
Estelle Weyl
@estellevw
http://standardista.com/
http://estelle.github.com/CSS-Workshop/

Course Outline Selectors Specificity
Generated Content
Media Queries
Debugging
Colors & Transparency
Fonts / Typography
Backgrounds & Borders
Gradients
Transforms
Transitions & Animation
Other Features

http://copypastecharacter.com/

data-FOO is HTML5 for creating your own attribute.

http://caniuse.com

http://modern.ie

Saturday

Adaptive Images for Responsive Web Design
Chris Schmitt
http://github.com/teleject/hisrc/

http://www.useragentstring.com/

Feature Testing
1) width
2) screen resolution
3) bandwidth

but speed test hinder ux

there is native speed test
modernizer network-connection.js

Img old school
1) .htaccess
2) <picture> and or srcset
3) HiSRC

hisrc.js w/ jquery.js
and data-1x, data-2x
or
css media queries and single-pixel gif replacement

Workarounds
1) background-size:auto (fittextjs.com)
2) svg
3) font-based solutions
4) compressed jpeg (not for high contrast)

Img new school
1) simple design for users
2) browser, server handshake
3) same,…

DOM
codylindley.com/domit

1. document node
2. element node
3. text node
encompass 90% of nodes

jQuery = “find something, do something”

The New Rules of the Responsive Web
@matthew_carver

“The Responsive Web”
Use code 13rw37 for 37% off book
http://manning.com/carver/

Tech has changed in the last 18 months.

People create with big device, consume with small device.

Rules:

1) responsive design doesn’t end with squishing

2) there is no responsive pixie dust

Think: prototyping

3) your workflow will change

Think: style tiles

4) your tools will change

Think: CSS preprocessors; scss, sass, less
Book: SMACSS (lumberjack book)

5) the web is responsive by default

6) embrace unpredictability

LIGHTNING TALKS

Aaron Murray
10 Minutes that can save hours of debugging headaches
or Dodging Javascript pitfalls
@aaronkmurray

In developer console

parseInt(010) – octal = 8

a == true doesn’t check type
=== does check type

—————————————————-

Ryan Joy
Drop the widgets
embrace html5

@atxryan
ryanjoy.com

<form>
<progress>
autocomplete
drag and drop
audio and video
contenteditable
javascript (sizzle)
css
input type=date
color picker input type=color
context menu

—————————————————-

Austin Hallock
clay.io

html5 games – cross platform
<canvas>
github.com/austinhallock/html5.tx

10 Things You Didn’t Know Browsers Could Do
Estelle Weyl
@estellevw
estelle.github.com/10

1) $(‘selector’) without jquery
Selectors API

2) everything is editable
contentEditable()

3) can store lots of data
local storage
session storage
webSQL (webkit)
indexedDB
your whole site with appcache

4) svg as background image

5) count with css

6) css can calculate

7) IE6 and IE7 can buy you a house

8) take your picture
navigator.getusermedia

9) animate sprites

10) help you manage memory

HTML5 on TV
Mike Taylor
github.com/pepelsbey/shower

Opera is everywhere

beware of overscan

navigation – spatial navigation (keyboard)

input

libraries – microjs

vanilla-js.com

javascript, html5 & DOM

storage

cookies

audio/video

tools

opera tv emulator
dragonfly

templates

dev.opera.com/tv

Model-View-Websockets
Garann Means

javascript

SPA – same page application

issues:
scaffolding
how/when to redraw
where client interactions fit
those damn http requests

twitter flight
airbnb – node.js
meteor
mvc vs. eda

model = object
view = presentation
controller = ?

eda – event-driven architecture

Controller

spine.js in Toolmvc

Presenter
backbone.js in todomvc

Viewmodel
knockback.js in todomvc

CRUD
REST

WebSockets
server push dataq
bi-directional
no request, no responce

Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve
Nathan Smith
@nathansmith

j.mp/get-serve

get-serve.com

nathansmith.github.com

unsemantic.com

Sunday

Advanced Javascript Training
Pamela Fox

http://tinyurl.com/html5tx
http://www.teaching-materials.org/workshops/html5tx.html

developers.whatwg.org

CLIENT SIDE STORAGE
1)localStorage/sessionStorage
Use a library like store.js or lscache https://github.com/pamelafox/lscache
Careful, there are ways not to use localstorage

2)IndexedDB
Again use a library like lawnchair,
Not in all browsers, need fallbacks

3) File APIs
There are many file APIs

jshint.com

MULTIMEDIA IN HTML5
online-convert.com – online video converter
handbrake – download video converter

Subtitle tag Use a tool

JavaScript APIs
There are javascript tools and hosted services.

GRAPHICS IN HTML5
Try to make it without use of plugins.

SVG
embed, inline, scripted, CSS background
There are tools and libraries.

<canvas> tag</canvas>
<canvas> HTML and Javascript.</canvas>
<canvas> Animation is redrawing the canvas.</canvas>

Javascript drawImage.

Canvas has lots of libraries & tools.

WebGL
Most people use ThreeJS.
There are libraries and tools.

CSS 3d Transforms

BONUS:

I managed to make videos of me at my hotel. I posed them to youtube: Irony in a hotel & Irony in a hotel part 2.

HighEdWeb 2011 Wrap Up

Posted on | by C. | Leave a Comment on HighEdWeb 2011 Wrap Up

Every year I go to HighEdWeb I write a pre- and post-conference blog detailing what I want to see, and what I actually saw. I wrote a pre-conference blog back on October 2, 2011 – Looking Forward to HighEdWeb 2011. Let’s start with a review of last year.

Review from HighEdWeb 2010

Last year I summerized my predictions with the following:

What are the lessons for next year? High Ed Web 2011 will be in Austin, Texas. We should be able to send two people next year. I’ll go out on a limb and predict the hot topics next year. Semantic content (Web 3.0) for mobile, desktop, vehicles, televisions, toasters, etc. (We can make content inter-operable; maybe using a CMS.) Location-based (geo-loco) applications with a side of augmented reality or geo-fencing. (Facebook Places exploded this year. Foursquare has the most users, for now. Gowalla is based in Austin.) HTML5 and CSS3 are growing, even if at a slow pace. (The W3C made an announcement about holding off deploying HTML5.)

Hits and Misses

Semantic web was a topic at the conference, but it was more of an underlying theme of the HTML5, mobile and accessibility topics. Mobile and accessibility were hot topics. Of the 70 talks, 13 (18%) had mobile in their title. There were 5 talks (7%) with accessibility in the title including Shawn Henry’s keynote, Embracing Accessibility – Go for the Carrots.

The CMS vendors where there en masse: Hannon Hill, OmniUpdate, Campusuite, Jadu, Ingeniux, TERMINALFOUR, Zivtech.

The big 3 geo-loco company’s weren’t a hot topic, but SCVNGR, Google Venture’s geo-loco, made a surprise appearance. Jadu, sponsored a SCVNGR hunt – where we had to collect check-ins with the other vendors at the hotel. SCVNGR sponsored Tuesday’s keynote – Better Education through the Web with Chris Wilson from Google.

Your Own Backyard

Having the conference in Austin this year, I didn’t have far to travel. When I introduced myself it was followed by, “it’s 90 miles that way” and I’d point towards the northeast. Austin felt like Austin, comfortable, relaxed, fun. The two evening events weren’t spectacular – no “Karaoke Plane” moments happened – but I had fun watching the World Series (Go Cards!) with other high-ed folks. I played some pool, ate some food, drank some drinks, and talked a lot of shop with a lot of people. Two dinner spots worth mentioning are P. F. Chang’s and Fogo de Chao.

The launch party for LINK magazine was at Buffalo Billards. The Tuesday night excursion was at The Highball.

Remember the three rules of the office (or life):

  1. Don’t put your tongue on it.
  2. Size does matter.
  3. There are stupid questions.

HighEdWeb 2010 Wrap Up

Posted on | by C. | Leave a Comment on HighEdWeb 2010 Wrap Up

I know it’s a month late, but here’s my wrap-up of High Ed Web 2010.

Conference Links

Post-conference Links

Last year I wrapped up HighEdWeb 2009 with this thought:

We have something to think about for next year. In this age of transparency you must “know thyself” and be an expert in your area – experience and ignorance shine equally through the window of our minds. We are people in higher education with limited budgets that come together to live, laugh, learn, and we express ourselves using the technology we help to create – the web.

Sea of Hands at HighEdWeb 2010 Opening Session

So, did we learn our lessons? Did we know ourselves? Did we become experts? The simple answer is “yes.”

There was only one keynote this year, by Steve Krug, author of “Don’t Make Me Think.” While I think the keynote wasn’t a failure, I expected more. I expected Steve to be a more engaging speaker. I’m glad he was the keynote. He did what he said he does in the book: he gave a quick accessibility test using a member of the audience.

I think the biggest difference this year was the comfort level. Being around so many people with the same job as me was comfortable. I think that was due in part because I was returning to many of the same people, but also because we had shared our lives on Twitter throughout the past year. I felt like I knew them.

Worldle of this blog for HighEdWeb

What did I learn?

HTML5 and CSS3 were topics I wanted to learn about. I learned some of the the pros and cons of HTML5, and I got a lot of links to good resources. I got enough CSS3 before the conference and after the conference to keep me occupied for the next year. Bonus, those of us in attendance at the CSS…In 3D! workshop got a free copy of Christopher Schmitt’s book, CSS Cookbook.

But, aside from these few technical topics, I felt 2010 was a little disappointing. Last year I had a similar feeling; however, last year was my first time going and I was a little overwhelmed.

Tweetups, After Darks and more

I met a lot more new folks and followed them on Twitter. We had a lot of shared experiences at this year’s conference as well. Starting the night I arrived, through the night before I left, my circle of friends expanded.

Saturday night was dinner with the guys from A&M at O’Maley’s in the Alley, followed by a tweetup at Madonna’s Bar & Grill.

Sunday night was the “Welcome Reception” at the Contemporary Arts Center, followed by “Party Like It’s 10-10-10” back at the Hilton, followed by the Hilton bar.

Monday night was sushi at Benihana (sponsored in part by nuCloud) with about 30 people. That was followed by the HighEdWeb After Dark mini pub crawl with stops at Madonna’s, Nicholson’s Gastropub, Bartini’s, and the Cadillac Ranch.

Karaoke Plane
"I can not wait to ride the #karaokeplane tonight." @mikepetroff

Tuesday night we started at the Newport Aquarium with hot hors d’oeuvres with the fishes. That was followed by the Hofbräuhaus for dunkelbier (dark beer), bratwursts, pretzels, fried sauerkraut and fried pickles. Of course there was lots of accordion-playing and yodeling and prosting (toasting). I have to say it was almost as good as the one in Munich, but it felt American-ized.

Since Newport, Kentucky is on the other side of the Ohio River from Cincinnati, we were bussed over there. After Hofbräuhaus we took the bus back to the Hilton, but we didn’t stop there. We topped off the night with a ride on the “Karaoke Plane” – straight to Hamburger Mary’s. Mary’s a mixed gay-straight bar and they probably had the best night of there lives because we showed up by the bus-load. I’d say at least 100 people were there drinking, singing, dancing, and of course playing pool.

Wednesday night we took it easy with the guys from A&M and dinner at Rock Bottom Restaurant and Brewery.

Next year

What are the lessons for next year? High Ed Web 2011 will be in Austin, Texas. We should be able to send two people next year. I’ll go out on a limb and predict the hot topics next year. Semantic content (Web 3.0) for mobile, desktop, vehicles, televisions, toasters, etc. (We can make content inter-operable; maybe using a CMS.) Location-based (geo-loco) applications with a side of augmented reality or geo-fencing. (Facebook Places exploded this year. Foursquare has the most users, for now. Gowalla is based in Austin.) HTML5 and CSS3 are growing, even if at a slow pace. (The W3C made an announcement about holding off deploying HTML5.)