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

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. 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. Core elements
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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. 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. 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. 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. 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. 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. Basic tools
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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. Advanced tools
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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. 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. Responsiveness
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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. 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. 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. Cross browsers
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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. 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. 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. 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. 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. Advanced CSS Frameworks
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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. 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. Thank you
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.