Geek basics

712 views

Published on

An alphabetical tour of digital media landscape terminology, covering concepts from Ajax to Usability. Designed for training of journalists entering the digital media landscape.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
712
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Geek basics

    1. 1. Knight Digital MediaCenter
    2. 2. Web Geek BasicsScot Hacker
    3. 3. Ajax •Asynchronous Javascript and XML •AKA “Javascript finally works” •No full-page refresh, URL doesn’t change •More like desktop apps •Async database updates
    4. 4. Bounce Rate •From stats/analysis •User hits one page and leaves •You want to reduce bounce
    5. 5. Cache •Data stored locally for performance •Client (browser) stores copy of page •Server stores precompiled Java/PHP/Python, etc.
    6. 6. Cascading Style Sheets •Syntax for controlling appearance of pages •(HTML is for logical structure, CSS for looks) •Decoupled from HTML •Targets either official HTML tags or custom elements •Ideally site-wide
    7. 7. Client-side / Server-side •Servers provide services •Outlook/Mail.app are clients of your mail server •Firefox/Safari/Chrome are clients of a web server •PHP/ASP / Django / Rails are server-side •Javascript/Flash are client-side
    8. 8. Content ManagementSystem •aka CMS: Database-backed publishing system •Creates pages “on the fly” •Site workflow, consistency, automation •WordPress, Drupal, Sitepoint, Ektron, dotCMS... •More than 600 on the market •Free <--> $$$ ... often proprietary
    9. 9. DNS •Domain Name System •Translates IP addresses to human-readable domain names •A critical backbone •A "nameserver" runs DNS software
    10. 10. Domain •example.com •Top level domains: .com, .net, .org, .edu, .gov •Subdomains: www.example.com, projects.example.com •Create/manage at a “registrar” like GoDaddy or Moniker
    11. 11. Embed/IFRAME •Code running on remote site embedded in yours •HTML and/or Javascript •Google Maps/Charts, Vimeo videos, widgets •Copy into HTML mode in your CMS (permissions)
    12. 12. File Formats - Audio •Audio alone not great on the web (except podcasts) •MP3 - Most common compression format - 1/10th size •128kbps+ for music, 64kbps for spoken word •Compressed MOV also acceptable •AIFF and WAV - Raw, uncompressed
    13. 13. File Formats - Image •TIFF, RAW - Uncompressed, large files, high-quality •PSD - Photoshop native, with layers, masks, editable text •JPG - Best for web photography. Full color, lossy compression{ •GIF - Smallest files for line art (256 color, transparency) •PNG - Full color, lossless compression, transparency, OSS
    14. 14. File Formats - Video •MOV (QuickTime), WMV (Windows Media) •Also MP4, M4V •Can be compressed or uncompressed •Aim for 4MBs/minute in compression •Even compressed, files and bandwidth bills are big •Recommend embedding w/ Vimeo or YouTube
    15. 15. File Formats - Web •Only these can be in web folders: •Documents: HTML, CSS, JS, PHP, ASP maybe PDF •Audio: MP3, MOV, M4V, MP4, WMV (compressed) •Video: MOV, FLV (compressed) •Images: JPG, GIF, PNG (compressed) •Orphans = unused = clutter
    16. 16. Fluid vs. Fixed Layout •Resize browser window to test •Fluid works on more devices, but gives less control •Fixed more common by far (mastheads) •Recommended width for fixed: 960px (i.e. 1024 screen)
    17. 17. Fold (below the) •Analogy to newspapers •Content out of sight before user starts vertical scrolling •Used to be considered worthless; not anymore
    18. 18. Font family •You can only use fonts installed on all/most computers •These tend to be grouped by similarity •font:12px verdana,arial,helvetica,sans-serif; •Situation changing fast! •TypeKit, Google Fonts
    19. 19. FTP •File Transfer Protocol ( http:// nntp:// email:// ftp:// ) •Internet’s oldest protocol •Move files between any two computers on net
    20. 20. FTP •File Transfer Protocol ( http:// nntp:// email:// ftp:// ) •Internet’s oldest protocol •Move files between any two computers on net
    21. 21. Hash tag (Twitter) •Instant saved search - gathers conversation on same topic •Popular for breaking news, conferences •User can click to see aggregated tweets
    22. 22. Hexadecimal •Six-character representation of a color •16.7 million possible color values •Use in Photoshop, Flash, Dreamweaver, HTML, CSS... •Match image colors to web colors, build palettes
    23. 23. HTML5 •Latest standard, not an animation tool! •New semantic tags (article, section, header, footer, aside) •New video handling •Offline storage / browser database •Geolocation •Canvas
    24. 24. Metadata •Data about your data •Like card catalog at library •MP3 tags •EXIF data in photos •HTML meta tags - content not shown in browser
    25. 25. Open source •Software created collaboratively, often without pay •Firefox, Apache, Linux, WordPress, Drupal •The best matches quality of best commercial software •You’re free to modify or scrutinize
    26. 26. Permalink •URL representing a permanent story page •Story may disappear from home or beat pages •Often includes a date, story keywords
    27. 27. Plugins •Software that extends other software •Spam control •Email comments •Contact form •Override roles •Conduct polls •Integrate Twitter/Flickr etc. •Photo galleries •Events systems
    28. 28. Responsive Design •We now have to cater to smartphones and giant monitors •Rather than serve multiple site versions, respond dynamically •bostonglobe.com is a great example
    29. 29. RSS •Really Simple Syndication •A “pull” format that feels like “push” •Lets users digest or discover your content w/o browser •Lets other sites integrate your linked headlines •Generated automatically by most CMSs •Internally: XML •Atom format is similar
    30. 30. RSS
    31. 31. Semantic Web •Page elements tagged in a meaningful way •Machines reading page source code can understand context •HTML5 helps by providing new <article> and <footer> tags •Microformats •Formats like RSS, Atom, XML, JSON •Build with clean code to encourage the semantic web
    32. 32. Server •Can mean either a physical machine or software •Usually a “pancake” w/very fast drives, high-rated RAM •Servers live in data centers with high redundancy •“Web server” can also mean software like Apache •Don’t confuse “web host” (company) with “server”
    33. 33. Tag (HTML) •A “container” that wraps text in a document •Can take “attributes” (some required) •All tags must be closed •All lowercase •Proper nesting
    34. 34. Tag (Taxonomy) •Similar to Categories or Beats, but less formal •Site may have a dozen categories but hundreds of tags •Sometimes used for User Generated Content
    35. 35. URL •Uniform Resource Locator (aka URI) •Every tiny piece of content has a unique address •Sometimes physical, sometimes virtual •Make them readable! •Include keywords for SEOhttp://kdmc.berkeley.edu/blog/2010/feb/22/webcasts/ protocol://subdomain.domain.tld/path/to/resourcehttp://news.cnet.com/2300-17938_105-10002703-4.html? s=0&o=10002703&tag=mncol;thum
    36. 36. Usability Usability is the study of the ease with which people can employ a tool in order to achieve a particular goal•User testing: How long to achieve a task?•Small focus groups - 5 users•Eliminate confusion points•If a site is hard to use, people leave•Homepage should clearly state purpose•Ask people to do simple tasks, record them
    37. 37. Usability (cont.) Usability is the study of the ease with which people can employ a tool in order to achieve a particular goal•If they can’t find the it, they can’t USE it•Search needs to rock•Write for the web (short, scannable)•Anticipate and answer user questions•Jakob Neilsen: useit.com•Usability 101 & Top 10 Web Design Mistakes
    38. 38. UI/UX •User Interface/Experience •You can’t design an experience •You CAN design FOR an experience
    39. 39. Validation/Web Standards •Standards matter (w3.org) •The key to fixing what’s broken •Structural perfection •Google is blind •Important for SEO •validator.w3.org

    ×