Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Geek basics

741 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Design
  • Als Erste(r) kommentieren

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