Komfort
we wszechobecnym Internecie
Mateusz Miracki
2000
<table>
<table>
<tr>
<td>hello</td>
<td>from</td>
</tr>
<tr>
<td>HTML</td>
<td>table</td>
</tr>
</table>
Evolution?
AJAX!
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Micr...
The State of the Internet
Options?
ignore
mobile website
application
RWD
Responsive web design
is a web design approach aimed at crafting sites to provide an
optimal viewing experience—easy readi...
Responsive web design
fluid grid
flexible images
media queries
RWD - grid
no pixels
target ÷ context = result
em
%
RWD - images
img, object { max-width: 100%; }
overflow:hidden
best quality
RWD - media queries
@media screen and (min-width:500px) { }
RWD
<meta name="viewport" content="width=device-width">
Tools?
mobitest.akamai.com
THE END
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”
Upcoming SlideShare
Loading in …5
×

#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”

311 views
249 views

Published on

Autor: Mateusz Miracki (Akamai)
Strona: www.itfest.pl
Facebook: https://www.facebook.com/festiwal.it
--------------------------------------
#IT fest to dwudniowy festiwal prezentujący kierunki oraz możliwości rozwoju kariery zawodowej w IT. W ramach projektu odbędą się targi pracy informatyka, prelekcje ekspertów z branży IT oraz warsztaty i szkolenia informatyczne.

Tematami #IT fest 2013 są:
- Optymalizacja (poruszane aspekty: Architektura, Praca w chmurze, Bezpieczeństwo)
- Big data (poruszane aspekty: Business Intelligence, Real Time Analysis)
- HR w IT (poruszane aspekty: Personal Brand w social media, Możliwości Rozwoju kariery w IT)
- Responsive Web Design/Mobile (poruszane aspekty: Tworzenie rozwiązań, Development)

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

No Downloads
Views
Total views
311
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

#IT fest 2013 - Komfort we wszechobecnym Internecie – parę słów o “responsive web design”

  1. 1. Komfort we wszechobecnym Internecie Mateusz Miracki
  2. 2. 2000
  3. 3. <table> <table> <tr> <td>hello</td> <td>from</td> </tr> <tr> <td>HTML</td> <td>table</td> </tr> </table>
  4. 4. Evolution?
  5. 5. AJAX! var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // do sth with xmlhttp.responseText; } } xmlhttp.open("GET", "http://example.com/ajax", true); xmlhttp.send();
  6. 6. The State of the Internet
  7. 7. Options?
  8. 8. ignore
  9. 9. mobile website
  10. 10. application
  11. 11. RWD
  12. 12. Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
  13. 13. Responsive web design fluid grid flexible images media queries
  14. 14. RWD - grid no pixels target ÷ context = result em %
  15. 15. RWD - images img, object { max-width: 100%; } overflow:hidden best quality
  16. 16. RWD - media queries @media screen and (min-width:500px) { }
  17. 17. RWD <meta name="viewport" content="width=device-width">
  18. 18. Tools?
  19. 19. mobitest.akamai.com
  20. 20. THE END

×