Thursday, September 17, 2009

AJ Van Beest - modx free, easy cms

Using free CSS from third-party website.
freecsstemplates

http://modx.bayfieldcounty.org

www.cmsmatrix.org
search by feature

Drupl, Joomla & Mombo are popular examples of CMS.

Free MODx open-source php application framework

Large download, but quick install.

EditPad Pro - txt editor

Backend -
Template name, description, category, template code


Tools: breadcrumbs, ditto, eForm, firstchildredirect, jot, etc. (similar to what we have developed in-house)

Permissions (more restrictive than our current setup, which is per user resources (files or folders).

Link from concurrent session: http://www.nagw.webdevelopedia.com/switchable-holier-grail.html , Cssbeautifier.com
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source.
tinymce.moxiecode.com

Web Developer 1.1.8 - https://addons.mozilla.org/en-US/firefox/addon/60

Julie Tarwater - Web Analytics Simplified

City of Virginia Beach uses urchin to track analytics

Got distracted during this session, so no notes, but audio was recorded for later consultation.

We should collect analytics for Connections as a new campaign, so we can track the sucess of the press event next week.

Jerry Silverman - Designing for the Web - Adobe

Attending Jerry's session this morning.
XFL = XML for Flash.

The Non-NAGW Post

I guess it's true what they say that everything is bigger in Texas, because the urinals at the George Bush airport were low enough that my dog Ziggy could have peed in them without lifting his leg.

Our driver from the shuttle service (never got his name) was most knowledgeable about the history and current demographics of Houston. He pointed out as many famous landmarks we could see from the expressway (I-45 I believe) on our way to Hobby Airport and the beautiful Moody Gardens here in Galveston.

I made two new friends from the west coast who also got on the shuttle, then the entire crew from Hobby (Jay, Susan, Britt, Twiggs) were all familiar faces from the past. Minutes from the hotel, we hit the killer pothole (the kind of pothole that kills two-wheeled riders when hit after dark at posted speeds) and blew out one of our two right rear tires. We made it to the hotel unscathed, but the blowout was like none I've ever seen before.

I got a room right by the elevators on the 7th floor. Old fashioned 27" CRT, and basic room set up (2 queen sized beds), but the added ammenities were great: desk w/free internet & easy access 'holes' (as they are called in a Seinfeld episode), a mini fridge, and turn-down service with chocolates on the pillows (nice touch). My room overlooked the three pyramids (rainforest, Imax theatre, and something else) as well as their Texas-sized outside pool. There is also an inside pool and sauna, and a 24-hour fitness center, which I finally got to try out today. Singe serve coffee in the room is a nice touch to help me get started in the morning. There are THREE phones in the room: by the bed, on the desk, and in the bathroom. NICE! Beds are comfy, but the pillows give me a crick in the neck midway through the night. Overall, a great place to stay, especially if you are having a conference.

Wednesday, September 16, 2009

Eric Meyer CSS Intermediate/Advanced Techniques

Starting with a single sentence in black on a white background, we modify the CSS for this document. Mousepose boinks.com for the mac is used as a spotlight. Renaming html.css for Firefox default.

CSS Bar Graph
bargraph/bg-v.css

table - display:block vs display:table

use table captions, but position: -1.3em; to get it above the table, or -0.67 to get it through the table border, then use a bgcolor and border to set it off.

4 columns evenly positioned:
left:0
left: 25%
left:50%
left:75%

Inside each tr is a th scope="row"

www.meyerweb.com/eric/css/edge/bargraph/demo.html

Jay Eason: Time-Lapse Video - Cheap and Easy

conversation: create simple music using Acid due to copyright issues on music since 1930.

hosted on YouTube

Handy AVI $40
IP Camera Filter - can capture images from any IP camera on the web.

WavePad
www.nch.com.au/wavpad
compress song length or change pitch.

AoA Audio Extractor

Windows Movie Maker -free

Logictech Webcam -$50

www.pclix.com

We viewed various examples of time-lapse videos, using single and changing frames of reference, from a basic "how-to" and community classroom, to a professionally developed work of art showing the contruction of a Boing 777.

Tuesday, September 15, 2009

Eric Meyer CSS Standards-Oriented Design Workshop

These are my notes from the afternoon session with CSS Guru Eric Meyer.

Started out installing Firebug and Web Developer toolbars for Firefox. Opera and Safari have similar tools (Dragon ???). We went over basic use of these tools, including how to validate a local (behind the firewall) html, change how block-level elements display, Linearize a page (removes floating), small screen rendering, diplay css by media type, disable groups of styles, etc.

http://westciv.com/tools/ , get XRAY, a neat tool that gets dragged to the bookmark toolbar that examines any element you click on in a webpage. (a Bookmarklet)

Specificity defines how specific a defined selector is. For example,
h1 {color:red;}
body h1 {color:red;}
html h1 {color:red;} /* 0,0,0,0 */
* {color:blue;}
!Priority is different than specificity

html body h1 {color:lime;} /* 0,0,0,2 */

NOTE: Eric used a neat utility (Mac) that 'lightboxed' the page except for a white circle or spotlight around the cursor.

/* 0,0,0,0 */

element - 4th column
class .joe -3rd column (including pseudo classes)
ID #title - 2nd column
inline - 1st column

html body h1 {color:red;background:gray;} /* 0,0,0,3 */

group selector h1, h2 {color:cyan;}

LVHA Rule
Love Ha
link, visited, hover, active
0,0,1,1
! order is important

Focus
Lord Vader Hates Fuzzy Animals
Luther Vandros Finds Her Attractive

a.visited:hover
a:link:hover

chained selectors, last wins for old browsers (IE6)

!important is per attribute, it overrides the standard specificity, doesn't change it.
It is used out of lazyness and for debugging purposes (specificity conflict, which is now viewable in Firebug). Good use is with print.css, where sometimes things should not print. However, importantce can trump user-defined css files.

[using BBEdit - Mac text editor]

Review of CSS versus the client browser CSS, which will override certain rules.

IE7 & up: a[href] {color: inherit;}

Attribute selectors:

a[href^="https:"] {padding-left: 15px;
background: url(icons/lock.gif) 0 0 no-repeat;}

a[href$=".pdf"] {padding-right: 18px;
background: url(icons/pdf.gif) 100% 50% no-repeat;}

http://code.google.com/p/ie7-js/

IE7.js
IE8.js

Eric asked who was still using tables to layout their sites, and there were still a few who would admit it.

Basic demonstration of floating divs.

Discussion of em-based layout (where the left and right columns dissappear below a minimum width.

vertical rule
#entry {background: url(blackline.png) 15.5 em 0 repeat-y;}

Source order: body, then navigation, then links. Better for screen readers.

www.alistapart.com/articles/fauxcolumns/
[only works with pixel based design]

www.alistapart.com/articles/holygrail

[also see: www.theholiergrail.com - JTF]

body {margin: 0 auto;}

"Different Browser Round Differently" - Marc Drummond

Social Networking Pre-Conference Workshop

I got to the registration table in time to check in a few people before I had to run to my morning workshop.

Discussion starts with the convienience or possibility of coming to the government office versus using online eGovernment tools to interact with the government. Social media is convienient for questions, initial contacts, but other benefits include ...

A good number of attendees have LinkedIn accounts, even more have Facebook pages. All admit they have not personally met each person they are linked to. This opens conversations to people you may not have had the chance to talk to before. Through social media, you can showcase local places (parks, maps, video) and what a particular county or government is like.

Social media is cool. A downside, is that it can be used to avoid face-to-face contact with the public. Unlike telephone tag, and verbal communications, social media has a verbatum text record of a communications. Active listening (like repeating something said, leaning in closer, or asking a follow-up question) doesn't really work, since those cues are removed, so choosing the correct language and conventions is even more important when the physical element of a communication is removed.

Emoticons. Can be used effectively if the audience understands the meaning behind the ones you use (like the smiley face :)), but becomes a roadblock when not understood >&-<. Active voice vs. Passive voice. Use active voice to invite people to join the conversation. One Federal Gov org locks down all staff use of social media, with the single message of the agency coming from the Public Relations office, but the GSA keeps it all open, with very few actually using it, being such a new medium of communications. A big concern is that there is already so much email to deal with, how much resources are being dedicated to maintain social media efforts. Most agencies are currently developing their social media policies. Twitter - microblogging. geared towards younger & tech-savy public. Facebook - very informal, lots of exposure to all types of citizens. 25 fans for 'vanity' URL. BaseCamp - For collaborating on projects. LinkedIn - 'trusted' contacts, more professional. YouTube - Video sharing in 10 minute form. Apply for Government Channel - 1 GB per video. Ads are gone. youtube.com/morriscountynj Vimeo - Read terms of service before using free service "For personnal, non-commercial use" Flickr - Hosted photos. Premium account for gov use. Picnik - Hosted image manipulation tools website. Premium account for gov use. A long discus Zooomr - Photo sharing website, similar to Flickr, free w/premium levels, images are there 'forever', less restrictions on images that can be posted (think Philly Naked Bike Ride). Livestream - service that lets you stream, broadcast from webcam. Not Hi-Def. You can do graphics, titles & you can archive. 4 hour time limit, space limit. UStream.TV - also good (cspencer suggestion). Eventful - calendar - can be searched by geographic area. Value is the link to other calendars that are setup for the same area. Eventful 'scrapes' 'Upcomming' tool. Good website integration tool. Helios Calendar IM Clients - real-time media contact. Gtalk - comes with Gmail, hooks into AOL Pidgin - open source
Social Bookmarking -
Del.icio.us - A few use it. easy to tag, install browser toolbar to tag it.
Google Maps -
skype -
Qik - stream live video from your mobile device
Orkut - Google's online community app (Google's 'Facebook')
Google Wave - Next gen messaging and collaboration (Apply now for account!) You have a play-by-play of a conversation, so new people to the discussion can go back and easily catch up to speed.
FriendFeed - Aggregates your social content from other networks (now owned by Facebook)
Tumblr - Blogging client with great interface (like blogger)
Picasa
Google Docs
Google Calendar
Yugma - online meetings, share screen, share presentations, best on 32-bit OSes.
StumbleUpon - Discover and share websites based on your preferences.
Plurk - Blogging/lifestreaming app with timeline format.
Doodle - pool availibility w/o using a group calendar, schedule events, can be embedded as a widget.
Scribd - using Flash iPaper, stats are collected.
AddThis - lightweight social media for a portal.
Posterous - a bloging tool that lets you post everything.

TWITTER APPS
Tweetdeck - also does Facebook
Hootsuite - Prof. Twitter client, scheduled tweets, follow multiple accounts
TweetTake - manually save as .csv for backup of all tweets

#HashTags
Tim O'Reilly's twitter book - good resource

REALITIES / ROADBLOCKS OF SOCIAL MEDIA
Time, money,
www.bayfieldcounty,org/social-media.asp
Be Mature, Don't Be Mean, Decide For Yourself. Very common-sense approach that did not get the lawyers involved. Good approach for DVRPC, with review by lawyers.

Nightmare scenario - what if somebody posts offensively or as a personal attack, but also has a criticism about the way government operates, gets censored for the inappropriate attach, then sues for surpressing their opinion.

Put your opinions up on Facebook, since you are being talked about anyway. Address issues directly when it is posted on your Facebook page, then when it shows up in a newspaper the next week. Misinformation about an organization and our stance on certain issues can be very damaging. Social media gives us a chance to address issues or misinformaiton before a problem escalades into something bigger.

PACE
Better to respond late than never. Different reaction times are expected on BBS, email, facebook, and Twitter.

Presentation notes are hosted here: http://social.bayfieldcounty.org/

"webmaster" account cannot be used for the Fan Page.

Followers on twitter can be a porn-bot, which would show the last post. It is VERY IMPORTANT to delete followers that are not actual people, but bots.

Human aggregation is a good way to push usefull information to your group of people.

County does not follow anyone on Twitter, but people are able to follow the County. Think the website linking policy, which limits links to partners and other government presences.

Document retention in Twitter? Scribd OK, so is YouTube - the document owner is responsible for record retention. In NJ, the owner of the document or record is responsible for maintaining it for archival purposes. Archiving tool for Facebook?

2009 NAGW Conference


This year's National Association of Government Webmasters (NAGW) Conference is being held in Galveston TX. I used Expedia to book my flight and I received a 6-digit confirmation code, but chose to panic at the last minute thinking I needed to print a ticket.My brother-in-law (a frequent flyer) calmed me down and all I had to do was worry about getting to the airport Monday morning.

Working for an MPO, I wanted to take public transit, but the local bus (which never keeps an actual schedule since this morning three Route 48 buses came one after each other). The connection to the airport (on the R1 Airport train) also added another variable to the equation, so I opted for the taxi, which is a $28.50 flat fee from Center City. Since I technically live about three blocks north of the area as defined by the Philadelphia ??? Authority, I decided I would walk to the nearest intersection on the northern limit (Fairmount Av). The first place I called would not pick me up without an actual house number, so I hung up, found the address of the local real estate agency on the corner, then called another service that specializes in service to the airport.

My taxi was exactly on time and my driver (Raj) couldn't have been any nicer, engaging in small talk, but not too invasive. We got to terminal C (rescheduled from the night before) in 20 minutes flat, taking 21st Street down to Market, then jumping on I-76. I gave him a $5 tip and he gave me his cell phone number in case I needed a ride back Friday night.

With only 1 person in front of me at 8:35 am, I was quickly directed to a self check-in terminal, paid for my checked bag, then it was off to find a cup of coffee and wait for my boarding at terminal C17 (US Airways Express - Republic Airlines flight 3121). Expedia did a nice job of showing me where I would sit (row 5 seat F) which ended up being zone 4 seating, or the last ones on the plane, so I got a few extra minutes to streach my legs before the almost 4 hour flight. It was a small E75 plane which only had 2 seats per side (4 per row) and only 22 rows. A much more comfortable ride than most, where the odd man out is stuck in the middle. In fact, I don't think I even came close to brushing up on the dude sitting next to me, working on his large brick of a Dell laptop.I got nervous the two times beverage service came by, and handed me a filled-to-the-rim beverage just inches above his keyboard. I read through an entire issued of Maximum PC and took their 50 question geek quiz, only to find out that I just barely pass as an enthusiest, scoring 27 out of 50 answers correct (can YOU identify the socket for the latest intel chip?).

Got to Houston Intercontinental Airport (IAH) without incident. Nervous about the next leg of the trip (shuttle to the hotel), I was glad the NAGW people got all their information straight and directed me (in an email) to go to the Limo area outside terminal C. Since I landed in Terminal A, a friendly information booth guy pointed me down the escalator, where I boarded a waiting tram, or automated people mover. It was over 3,200 feet to Terminal C, so they squeezed in this mini rail system that makes turns on a dime like a go-kart, and had passenger's luggage jostling about which each hairpin turn. Unlike PHL food concessions, they don't appear to be regulated here in Houston, as a half grilled chicken ceasar wrap and bottle of water was $10.02! OK, so it did come with a complementary bag of chips, but that was outrageous for such a lackluster meal (bad, bad chili's to-go franchise).

Messed up with the time difference, I kept calling Colleen thinking she was on lunch break, when her lunch was actually 1.5 hours ago. For the 2nd time today, I found a plethora of wi-fi signals, but none of them worked, and the one that did was not free. So much for cloud computing!
It's 1:50 pm local time, and my shuttle leaves at 3 pm. So now I sit and wait.