Uploaded bykdmcBerkeley at UC Berkeley
Geek basics
The document provides an overview of various web technologies and best practices, including AJAX, content management systems, file formats for audio, video, and images, and importance of usability and user experience design. It emphasizes the significance of web standards, semantic web, and responsive design to create efficient and user-friendly websites. Additionally, it outlines the structure and components of URLs, protocols, and the role of servers in web development.
More Related Content
Geek basics
- 2.
- 3. Web Geek Basics ScotHacker
- 4. Ajax •Asynchronous Javascript and XML •AKA “Javascript finally works” •No full-page refresh, URL doesn’t change •More like desktop apps •Async database updates
- 5. Bounce Rate •Fromstats/analysis •User hits one page and leaves •You want to reduce bounce
- 6. Cache •Data storedlocally for performance •Client (browser) stores copy of page •Server stores precompiled Java/PHP/Python, etc.
- 7. 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
- 8. 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
- 9. Content Management System •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
- 10. DNS •Domain NameSystem •Translates IP addresses to human-readable domain names •A critical backbone •A "nameserver" runs DNS software
- 11. Domain •example.com •Toplevel domains: .com, .net, .org, .edu, .gov •Subdomains: www.example.com, projects.example.com •Create/manage at a “registrar” like GoDaddy or Moniker
- 12. Embed/IFRAME •Code runningon remote site embedded in yours •HTML and/or Javascript •Google Maps/Charts, Vimeo videos, widgets •Copy into HTML mode in your CMS (permissions)
- 13. 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
- 14. 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
- 15. 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
- 16. 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
- 17. Fluid vs. FixedLayout •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)
- 18. Fold (below the) •Analogy to newspapers •Content out of sight before user starts vertical scrolling •Used to be considered worthless; not anymore
- 19. Font family •Youcan 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
- 20. FTP •File TransferProtocol ( http:// nntp:// email:// ftp:// ) •Internet’s oldest protocol •Move files between any two computers on net
- 21. FTP •File TransferProtocol ( http:// nntp:// email:// ftp:// ) •Internet’s oldest protocol •Move files between any two computers on net
- 22. Hash tag (Twitter) •Instant saved search - gathers conversation on same topic •Popular for breaking news, conferences •User can click to see aggregated tweets
- 23. Hexadecimal •Six-character representationof a color •16.7 million possible color values •Use in Photoshop, Flash, Dreamweaver, HTML, CSS... •Match image colors to web colors, build palettes
- 24. HTML5 •Latest standard,not an animation tool! •New semantic tags (article, section, header, footer, aside) •New video handling •Offline storage / browser database •Geolocation •Canvas
- 25. Metadata •Data aboutyour data •Like card catalog at library •MP3 tags •EXIF data in photos •HTML meta tags - content not shown in browser
- 26. Open source •Softwarecreated collaboratively, often without pay •Firefox, Apache, Linux, WordPress, Drupal •The best matches quality of best commercial software •You’re free to modify or scrutinize
- 27. Permalink •URL representinga permanent story page •Story may disappear from home or beat pages •Often includes a date, story keywords
- 28. Plugins •Software thatextends other software •Spam control •Email comments •Contact form •Override roles •Conduct polls •Integrate Twitter/Flickr etc. •Photo galleries •Events systems
- 29. Responsive Design •Wenow have to cater to smartphones and giant monitors •Rather than serve multiple site versions, respond dynamically •bostonglobe.com is a great example
- 30. RSS •Really SimpleSyndication •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
- 31.
- 32. Semantic Web •Pageelements 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
- 33. Server •Can meaneither 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”
- 34. Tag (HTML) •A“container” that wraps text in a document •Can take “attributes” (some required) •All tags must be closed •All lowercase •Proper nesting
- 35. Tag (Taxonomy) •Similarto Categories or Beats, but less formal •Site may have a dozen categories but hundreds of tags •Sometimes used for User Generated Content
- 36. 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 SEO http://kdmc.berkeley.edu/blog/2010/feb/22/webcasts/ protocol://subdomain.domain.tld/path/to/resource http://news.cnet.com/2300-17938_105-10002703-4.html? s=0&o=10002703&tag=mncol;thum
- 37. Usability Usability isthe 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
- 38. Usability (cont.) Usabilityis 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
- 39. UI/UX •User Interface/Experience •You can’t design an experience •You CAN design FOR an experience
- 40. Validation/Web Standards •Standardsmatter (w3.org) •The key to fixing what’s broken •Structural perfection •Google is blind •Important for SEO •validator.w3.org