Check out these sites for info on using appcache: http://alistapart.com/article/application-cache-is-a-douchebag http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://www.marcotroisi.com/make-your-website-available-offline-with-html5/
http://manifesto.ericdelabar.com/
And of course
chrome://appcache-internals/
ToDo
- try with multiple URLs (just no params)
- get it onto Github pages
- get the 'save to home screen' hint working
- learn how to clear the cache on iOS? It's in the OS settings, but can also delete and reinstall the browser!
Notes
-
put every file under NETWORK as well as under CACHED
-
once the html file is cached, how can I get it to reload changes to that html file?
-
Scaling will reduce pixel perfection, but use the whole screen size
-
Not scaling will keep pixel perfection, but add extra white around the edge :-(
-
Is it more important it looks great in the show? Or on the screens of the nurses?
- Probably the former
- if so, scale down from native resolution?
Angular
-
Add the rest of the copy on the homescreen
-
Try the thing that comes with Brackets - for Photoshop imports?
-
Repeat the bang, make it clickable (hooked up to controller) and stylable
-
Add array of text and images to controller, show on screen
-
Add some condition images
-
Add the bang image
-
Add background body image
-
Style + layout the text
-
Style the footer into the right place
-
Fix the colours
-
Create the body on transparent BG
THIS SPRINT
- Text highlighting?
- Larger touch areas?
- Check caching in Snowbunny - it's a private browser
- Get layouts with and without Safari header
- Read Shedden's notes:- use flexbox to position the thing into the centre
- Centre align with flexbox - a separate app?
- try scaling down from native resolution (with flexbox?)
NEXT SPRINT
- Write instructions for Jonny and Lizzie
- RGB color mode
- Pick a webfont
- Double resolution to 2048 x ??? before export
- Resolution to be smaller of 1024 x 768 and 1024 x 671
- images as PNGs with transparency
- wrap text around img bottom right is HARD http://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div
- Option1: Fix image width, variable height? Text wraps around img at top right
- Option2: make paras and image all an image, fixed dims. Text can wrap wherever you like
- Use Illustrator. Snap to nearest pixel. Use integer values for pixel widths for strokes
- Illustrate what I mean with images PPP
- Get the SVG link of Tom Petty (and share that image - pixel perfect)
LAST SPRINT
- Build a cover page (or two)
- How to link from the cover to the 4 detail pages?
- Alt tags
Learn
- Bang and Info pane into directives?
- write tests?
- float images to bottom-right! Try Second answer on the SO post, or the Javascript!
- CSS compiler - Rework?
- Learn float and layout stuff again (codecademy?) https://css-tricks.com/all-about-floats/