Basic web dveleopers terms for UX and graphic designers

2,885 views
2,744 views

Published on

Presentation that explain modern web developers terms and technology to UX, UI and graphic designers.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,885
On SlideShare
0
From Embeds
0
Number of Embeds
1,432
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Basic web dveleopers terms for UX and graphic designers

  1. 1. Guide to HTML Ran Bar-Zik PHPDrupal Developer 16.12.2013 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  2. 2. Who am I? Ran Bar-Zik, • PHP developer at HP Software • Working at hpln.hp.com • More information at my personal site: internet-israel.com 2 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  3. 3. Core elements © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  4. 4. What is HTML, CSS & JavaScript? Brief explanation 4 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  5. 5. What is HTML Hypertext Markup Language The base of all page • • • It is NOT a language The basic elements of the page. Every element have basic design implemented by the browser. • • • 5 For example: <h1> - header, is suppose to be large in every browser. For example select list will look like this in Internet Explorer on windows: But will look like this in Safari on Apple: © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  6. 6. What is CSS Cascading Style Sheets – Designing the page CSS is being used to design • • • • 6 Colors and sizes Dimensions Positioning Font design © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  7. 7. What is JavaScript? Language that do stuff on the page itself For example: • • • • • Opening Menus ExpandingCollapsing areas Validating input on forms Animating and moving elements Transitions Example: https://hpln.hp.com/node/21 7 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  8. 8. CSS, JavaScript and HTML This is all of web page components Server side programs (Java, PHP, .net etc.) generate those resources. 8 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  9. 9. AJAX What is AJAX? AJAX is JavaScript way to receive and get data. It means that you can get Information WITHOUT reloading the page. 9 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  10. 10. Basic tools © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  11. 11. jQuery jQuery is JavaScript library It allows the developer to write more efficient JavaScript It is just JavaScript! 11 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  12. 12. Advanced tools © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  13. 13. Boilerplates Boilerplates allowing us to create an basic web page – template HTML5 Boilerplate and other boilerplate Boilerplates is the professional term for base layer for web pages. It contains basic CSS, basic HTML and basic JavaScript code. 13 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  14. 14. Bootstraps More advanced boilerplates Templates for whole pages and components The most important one: Twitter bootstrap. It is CSS, JavaScript and HTML files that enable us to copy ready made elements to our application without creating those from scratch. Examples: http://getbootstrap.com/components/#dropdowns 14 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  15. 15. Responsiveness © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  16. 16. The problem: mobile devices But not only mobile In today world we have a lot of devices and screen sizes: Responsiveness is the tool to create layout for every screen. 16 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  17. 17. How do we do it? Responsiveness is achieved by CSS only! No Advance programming or very hard work! It is CSS only (no HTMLJavaScript) and it can be done very easily. Example: http://www.internet-israel.com 17 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  18. 18. Bootstrap can help you create a responsive site Bootstrap contains grid system What is grid? Like in Photoshop – help the developer position elements in a web page. And it does responsiveness automatically! Example: http://getbootstrap.com/examples/jumbotron-narrow/ 18 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  19. 19. Cross browsers © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  20. 20. Not every browser is the same Different browser renders HTML, CSS, JavaScript in different ways. This is why we are testing our application in different browsers and platforms. Web page that looks great in one browser can look like hell in other browser. 20 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  21. 21. Feature detection How to know if browser support features? http://caniuse.com/ 21 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  22. 22. Feature detection VS Browser detection Two ways to fight the differences Browser Detection Find the browser type (bad) Feature Detection Try to find The feature that the browser support 22 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  23. 23. Polyfills JavaScript file that fill the gap for old browsers Allowing new features on old browsers For example: allowing HTML5 form control on Internet Explorer 8 that does not support this feature. 23 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  24. 24. Fallbacks Allow alternative solution for browsers that does not have the feature For example: Showing Flash videos for browsers that does not support HTML5 videos. 24 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  25. 25. Advanced CSS Frameworks © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  26. 26. LESS & SASS Basically the same stuff: CSS generator CSS is not a real language Programmers love to program, this is why we invented CSS preprocessors: 26 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  27. 27. COMPASS It is like jQuery for SASS It contains a lot of functions (mixins in SASS language), variable and stuff that help the developer create interface. 27 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  28. 28. Thank you © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

×