Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Making of Web by Mind Map: Making of Web
4.7 stars - 3 reviews range from 0 to 5

Making of Web

building

reading code

for maintenance, this takes at least 6 hours for any given project

as part of discovery, answering questions on usenet, reverse-engineering

enterprise

server-side development

tools, ClearQuest, Vignette, Ajax, DWR, JSON

debugging

formal QA, code-level bug reports, URL, annotated screenshot, 3 full sentences, Describe the problem., Speculate as the the cause., Describe the solution., write tests concurrently with the code

optimization, cross-browser, accessibility/SEO, access keys, meta-data, microformats, microcontent, the TITLE attribute, the LABEL attribute, programmatically produced textual analogs, graceful degradation, works in Lynx, works without JavaScript, links with an ONCLICK action also have a related HREF, works without CSS, works without images, works without plugins, CSS hacks, IE6- PNG transparency, alpha filters, browser filters, IE conditional comments, character encoding, internationalization, the LANG attribute, load-time, CSS sprites, preload

manage expectations

tweak positioning last, if ever, positioning that is off by a few pixels is to be expected, the designer should design with this in mind

compatibility, what browsers are supported?, what kind of bandwidth is expected?

philosophy

laziness, impatience and hubris

design patterns, conservation, target hacks downward, use fewer files, Web UI patterns, semantic markup, markup, integration, XHTML widget library, XSLT stylesheet, VAP grids, CSS, positioning, the cascade, layout, fixed width, variable height, patterns, maintenance, naming convention, files, elements, URLs, JavaScript, unobtrusive JavaScript, sanity checks, trigger or target not found, event management, event queue, add/remove event, direct assignment, Try/Catch/Throw, get parameter from URL, class name tools, getElementsByClassName, hasClass, toggleClass, removeClass, UI widgets, skinnable UI, stylesheet switcher, show and hide, collapsible module, floating control, lightbox, lightweight popup, dialog balloon, tabbed navigation, new window, reuseable box, client-side form validation, Big Ball of Mud, the selfish snippet, code-level culture, developer personas, mad scientist, implementer, cannibal, maintainer, refactoring, eschew premature optimization, many incremental changes, automated testing, writing tests is a step toward debugging, applied at build or check-in time, "release early, release often", bottom-up development, "tools to make tools"

object-oriented programming, separation of presentation, behavior and content, MVC on the client side, what is behavior?, special cases are inevitable, innerHTML, DOM methods, document.write() considered harmful, CSS 3, CSS pseudo-classes, Ajaxy content, "shared-nothing" architecture, it's easy to upgrade, it can be explained gradually, "learn it once, use it many times", incomplete documentation is still useful

planning

ask questions, boundary conditions, what are the elements of the UI?, what states can the elements have?, how is each state invoked/canceled?, what are the data structures?, what happens when some data is larger/smaller than comped?, what if some data is not available?, brand, font, hex colors, layout, column widths, justification, how will the images be sliced?

build prototypes, paper prototypes, Firefox prototypes, cartoon prototypes

mashups

tools, Yahoo! pipes, Google maps, Firefox

knowledge capture

iLab

brown bag lunch

comeraderie and mutual respect, toys, Pixel Blocks, nerf weapons, lolcat builder, conferences

tools

Google Desktop

WordPress

Lyris

wiki, everyone has a blog, wiki tools, TiddlyWiki, Confluence, SharePoint

del.icio.us

bookmarklets

Firefox

QuickBase

hardware, Wacom tablet, 2 monitors per machine, Synergy, whiteboard, high-resolution still camera, colorful markers, eraser, drawing, life drawing, charicature, icons, library of facial expressions, comics, comics as documentation, comics as process diagrams, comics as interaction prototypes