How to manage a big scale HTML/CSS project
•Télécharger en tant que PPT, PDF•
5 j'aime•4,066 vues
![[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Contents 1](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à How to manage a big scale HTML/CSS project
Similaire à How to manage a big scale HTML/CSS project (20)
Dernier
Dernier (20)
How to manage a big scale HTML/CSS project
- 1. How to manage a big scale project
- 4. More than 150 websites 3
- 5. Some of them were web apps 4
- 8. 7 The project
- 9. 8 The project
- 10. 9 The project
- 11. 10 How ?
- 12. Steps to manage 1. Gather visual elements as a "Reference" 11 … you know, screenshots of different UI elements of the project.
- 18. Be ready to re-learn My best advice Write your code by hand. It makes you get better, understand what you do, and in the long run train you to code faster. Get better, while working! 17
- 19. Be ready to re-learn My best advice Seriously . Get better, while working! 18
- 20. Some examples ? 19
- 21. Some examples 20 Create the main layout defined with programmers
- 23. What we get A reference rendering, with screenshots 22 A reference rendering, with screenshots A reference rendering, with screenshots During the project, some modifications broke the reference?
- 24. What we get 23 … Things can break
- 26. One last thing After creating my own framework on this project. Twitter's Bootstrap, And @Snookca's SmaCSS Already do all this. Take a look! 25
- 27. Questions Slides available slideshare.com/renoirb Code I published on GitHub : github.com/renoirb My del.icio.us feed, lots of stuff: del.icio.us/inexisdotnet 26
- 28. Thank you ! On Twitter, GitHub, Forrst @renoirb My blog (in french) http:// renoirboulanger.com / Where I work http:// evocatio.com / Geeks, unite! 27 February 29 - March 2, 2012
Notes de l'éditeur
- Next: How it starts
- Next: My introduction
- Next: More than 150 websites
- Cover: - I created websites for various organizations as a freelance / entrepreneur - from 2002-2006 Next: Some of them were web applications
- Cover What's interresting about web apps: - We can guess the outcome - Separation between the markup - Lots of opportunity to have standardized markup Here: ~ Next: What I learned
- Recreating always the same made me think there must be a way Cover: - the layer - Progressive enhancement, responsive design - Learn from existing tools - Browser war is over finished with conditional jQuery, Modernizr But there is still something missing. Next: ... In an ideal world...
- Cover: - Impact - Work together - Architect of markup and missing link with UX and Designers Next: The project (before)
- Cover: - First version was old - We were asked to work with the marketing agency to change the image - From this "Legal" image to one about the most important thing. The artists. Next: ... present
- Cover: - Each artists has a profile - Artists can showcase lots of details - Transformed it as a usable platform - Agents can do castings - UDA can manage business issues - Commerce to sell artwork - Agents can do custom search on the numerous details - Search within all site and attached documents ... Major business logic changes ... into... Warning: Dont' blink Next: Future
- Cover: Why rebuilding? - The actual version was not scalable - Wanted to make it future compliant - We had to make it look as it's exactly the same. Next: Steps to manage "Gather... "
- Cover: Why rebuilding? - The actual version was not scalable - Wanted to make it future compliant - We had to make it look as it's exactly the same. Next: Steps to manage "Gather... "
- Cover: - Take all screenshots you can - Enumerate them in sequence to refer to them - Put together things that you assume is the same visuall y If it's a mint project: - Work with the designer... all possible views - Work with the programmers team ... contexts (service failure, application error, etc) Important: This will be used throughout the static code process Next: 2. Organize
- Cover: Get a hardcover book - timestamp - illustrate possibilities with programmers - refer to it later - Organize ... estimated markup ... similaritude - Sketch everything - Use it as your project reference for all your markup as a draft This is what will create the landmark to follow. Next: ... Organize and do Sketches
- Cover: - Reconcile w/programmers where to put what id's and classes - Convention, less pollution and tagsoup - Define w/programmers to be able to require different assets (js, css files) specific to modules Landmarks are important because you can make sure the application will put the switches on the correct places. Next: Build the markup
- Cover: I tried many 1. Blueprintcss 2. 960gs 3. HTML5Boilerplate 4. Compass w/ SASS 5. Went creating my own Before starting the "real work". Next: Don't forget the basics
- Cover: Just a reminder: - HTML has its own verbs without any tagsoupization required - Use tags for what they were designed for - Same structure for what is the same - Markup should be used for it’s semantic. Look is what’s CSS’s for. - Don’t overdo not using tables, sometimes it’s still the best way to go. Next: ... my best advice
- Cover: - This is one of the most important part - If you are using a new set of tools than your usual. - Better read a bit more on your spare time. It's worth it!! Next: ... While creating html, don't forget
- Cover: ~ Next: Seriously.
- Cover: ... Next: Some examples
- Cover: ... Next: Create the main layout
- Cover: - The landmark is applied here - You set the main zones - The essential skeleton Next: Find visual patterns and normalize markup
- Cover: - Create all views elements you sketched in your notes - Create static views - Pay attention to the switches - Refer to the references (screenshots) Example of form permutations with only 1 CSS class name. Next: A reference rendering with screenshots
- Cover: - Create links with reference screenshots - Use it as validation that the markup and CSS is not affected later Next: … Things can break
- Cover: - This is your security to know if the programmer followed the guides set - It helps you make sure you dont break something while adjusting Because we always have to :( Next: The end result
- Next: One last thing...
- Cover: When I started this project, I did not knew about Bootstrap. - Almost everything you want to be covered is covered. Next: Questions?
- Next: Thank you!