Making of Web

Get Started. It's Free
or sign up with your email address
Rocket clouds
Making of Web by Mind Map: Making of Web

1. building

1.1. reading code

1.1.1. for maintenance

1.1.1.1. this takes at least 6 hours for any given project

1.1.2. as part of discovery

1.1.2.1. answering questions on usenet

1.1.2.2. reverse-engineering

1.2. enterprise

1.2.1. server-side development

1.2.2. tools

1.2.2.1. ClearQuest

1.2.2.2. Vignette

1.2.2.3. Ajax

1.2.2.3.1. DWR

1.2.2.3.2. JSON

1.3. debugging

1.3.1. formal QA

1.3.1.1. code-level bug reports

1.3.1.1.1. URL

1.3.1.1.2. annotated screenshot

1.3.1.1.3. 3 full sentences

1.3.1.2. write tests concurrently with the code

1.3.2. optimization

1.3.2.1. cross-browser

1.3.2.1.1. accessibility/SEO

1.3.2.1.2. graceful degradation

1.3.2.1.3. CSS hacks

1.3.2.1.4. character encoding

1.3.2.2. load-time

1.3.2.2.1. CSS sprites

1.3.2.2.2. preload

1.4. manage expectations

1.4.1. tweak positioning last, if ever

1.4.1.1. positioning that is off by a few pixels is to be expected

1.4.1.1.1. the designer should design with this in mind

1.4.2. compatibility

1.4.2.1. what browsers are supported?

1.4.2.2. what kind of bandwidth is expected?

1.5. philosophy

1.5.1. laziness, impatience and hubris

1.5.2. design patterns

1.5.2.1. conservation

1.5.2.1.1. target hacks downward

1.5.2.1.2. use fewer files

1.5.2.2. Web UI patterns

1.5.2.2.1. semantic markup

1.5.2.2.2. JavaScript

1.5.2.2.3. UI widgets

1.5.2.3. Big Ball of Mud

1.5.2.3.1. the selfish snippet

1.5.2.3.2. refactoring

1.5.2.3.3. bottom-up development

1.5.3. object-oriented programming

1.5.3.1. separation of presentation, behavior and content

1.5.3.1.1. MVC on the client side

1.5.3.1.2. what is behavior?

1.5.3.1.3. "shared-nothing" architecture

1.6. planning

1.6.1. ask questions

1.6.1.1. boundary conditions

1.6.1.1.1. what are the elements of the UI?

1.6.1.1.2. what are the data structures?

1.6.1.2. brand

1.6.1.2.1. font

1.6.1.2.2. hex colors

1.6.1.2.3. layout

1.6.1.3. how will the images be sliced?

1.6.2. build prototypes

1.6.2.1. paper prototypes

1.6.2.2. Firefox prototypes

1.6.2.3. cartoon prototypes

1.7. mashups

1.7.1. tools

1.7.1.1. Yahoo! pipes

1.7.1.2. Google maps

1.7.1.3. Firefox

2. knowledge capture

2.1. iLab

2.1.1. brown bag lunch

2.1.2. comeraderie and mutual respect

2.1.2.1. toys

2.1.2.1.1. Pixel Blocks

2.1.2.1.2. nerf weapons

2.1.2.1.3. lolcat builder

2.1.2.2. conferences

2.2. tools

2.2.1. Google Desktop

2.2.2. WordPress

2.2.3. Lyris

2.2.4. wiki

2.2.4.1. everyone has a blog

2.2.4.2. wiki tools

2.2.4.2.1. TiddlyWiki

2.2.4.2.2. Confluence

2.2.4.2.3. SharePoint

2.2.5. del.icio.us

2.2.6. bookmarklets

2.2.7. Firefox

2.2.8. QuickBase

2.2.9. hardware

2.2.9.1. Wacom tablet

2.2.9.2. 2 monitors per machine

2.2.9.2.1. Synergy

2.2.9.3. whiteboard

2.2.9.3.1. high-resolution still camera

2.2.9.3.2. colorful markers

2.2.9.3.3. eraser

2.2.9.3.4. drawing