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.

Wednesday, May 6, 2009

Charleston SC

Yesterday, we left the dog at the condo and took a day trip to Charleston SC. Not enough time to see this beautiful and historic city, but enough to say "I was there" and "I want to go back". We took US 17 from Myrtle Beach, hitting Georgetown & Charleston Counties for the first time. After an uneventful hour's drive, we stopped in Georgetown for an iced tea in their historic downtown area, and drove around admiring some of the local architecture. By the way, I hit 60,000 on the Beetle's odometer as we were crossing the bridge and entering Georgetown SC. Another half-hour of driving and we started seeing suburban development on the outskirts of Charleston (Mount Pleasant SC), and lots of roadside stalls selling handmade sweetgrass baskets.

Before entering Charleston, we crossed the Arthur Ravenel Bridge, a cable-stayed bridge over the Cooper River designed by Parsons Brinckerhoff. The bridge opened in 2005 and is one of the longest cable-stayed bridges in the Western Hemisphere.

After an overwhelming visit to the Visitors Center, we took a picture of the gothic revival railroad buildings that were still standing, then drove down to the old market, where we found a spot, then walked around looking for a place to eat. We found a hidden gem down a cobblestoned alley called The Buccaneer Restaurant, that had just the right atmosphere, affordable fare and a great selection. Afterwards, we walked along the riverwalk, saw the USS Yorktown across the harbor at Patriot's Point, and saw some of the most beautiful and unique homes and mansions. We made our way back to the car, after a quick browse through the market in the middle of the street, and drove away just as it began raining. We spent the next hour driving around taking way too many photos of homes, the classic side porches that Charleston is known for, micro gardens, and my obsession - parking, in the historic French Quarter and historic downtown sections of town. With the weather not cooperating with us, we decided to leave, taking the scenic route home along SC 41, which added Berkeley and Williamsburg counties to the list. On the way home, we stopped at an Atlanta Bread Company for coffee and a snack.








Monday, May 4, 2009

South Carolina



Yesterday, we ended up trying out US 301 from Wilson NC to Selma NC, but everything was closed (on Sunday) and most of the area we drove through had seen better days. So, it was back on I-95, a quick rest stop and hoagie at Subway (so much for the local flavor), and reached the Palmetto State being greated by way too many bilboards of Pedro - so of course, we had to stop.


We left on US 301 until we caught US 501 E which took us the rest of the way in to Myrtle Beach SC. We wanted to stop a few places, but couldn't because of Ziggy crammed into the back seat of the Beetle. We drove through town, again hoping to stop a few places, but it was 82 degrees and we couldn't leave the dog in the car, so we continued on south to Surfside Beach SC, where Colleen's parent's condo was, just a few miles inland.


We got to the condo, which overlooks a golf course and got situated. We were too tired to go back out, so we ordered in. The local places would not deliver, so we had to get national chain pizza with a side of breadsticks - satisfying, but not what we were hoping for.

This morning, we went to Nibils Restaurant, suggested by Colleen's Mom and Mary from work, which was a family restaurant overlooking the beach and fishing pier here in Surfside Beach. We were lucky enough to get a window table with a beatiful view of the ocean. I had a nice omlette and Colleen had a fruit plate w/grits, and we both enjoyed some great hash browns and coffee.

We put money into the pay station (which accepted credit cards - cool) to reserve our space through noon, so we got our beach gear and headed for the sand. We got a bit of sun (maybe a bit more than we should have - ouch) then came back to the car for a nice drive up the coastal resort community of Myrtle Beach. We stopped at the local Wings Beachwear for some T-shirts, before hitting a Krystal Drive-Thru for a snack on our way home.


Sunday, May 3, 2009

3rd Annual Trip to Da South


OK, I am sitting here at a Motel 6 in Fredericksburg VA with Colleen and Ziggy. We arrived around 8:30 pm, left the dog in the room, and went off to "Central Park", the largest unenclosed mall on the East Coast. Out of all the usual chain suspects, we settled on Cracker Barrel to soothe our fried ocra fix.

Today, we are going to walk the dog around the historic part of town, and jump on US 301 (which parallels I-95) for a more leisurly, scenic drive to South of the Border, and eventually, Myrtle Beach SC.