You should submit a zip file with one or two html pages and as many js or css fi
ID: 3837576 • Letter: Y
Question
You should submit a zip file with one or two html pages and as many js or css files as you need. Requirements: The HTML page(s) should have two forms. The first is the form you will construct in the activites that connects to Open Weather Map, lets a user input a city or a zip code and asynchronously shows the weather information retrieved from Open Weather Map. The other should be a form that submits to http://httpbin.org/post. This from should submit asynchronously via a POST. It needs to send a content-type of application/json (you can also experiment with other content-types like applcation/x-www-form-urlencoded). You should display the data you get back (which should match the data you send). It will be stored as a string in the data field of the JSON encoded string returned from the server. If you run into trouble you can use a tool like: https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo (Links to an external site.) which will let you submit data manually via a GUI to check what the output looks like.
Explanation / Answer
Prepare and upload HTML
To set up display creatives with HTML5, upload your HTML5 creative to DCM in the form of a .zip file. The .zip should consist of an HTML file plus any files referenced by the HTML file.
What to include
What not to include
TL;DR
The process of reducing the size of data is data compression. Many people have contributed algorithms, techniques, and optimizations to improve compression ratios, speed, and memory requirements of various compressors. A full discussion of data compression is beyond the scope of this topic. However, it's important to understand, at a high level, how compression works and the techniques you can use to reduce the size of various assets that your pages require
TL;DR
Content-specific optimizations can significantly reduce the size of delivered resources.
Content-specific optimizations are best applied as part of your build/release cycle.
The best way to compress redundant or unnecessary data is to eliminate it altogether. We can’t just delete arbitrary data, but in some contexts where we have content-specific knowledge of the data format and its properties, it's often possible to significantly reduce the size of the payload without affecting its actual meaning.
<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container { font-size: 120% }
.awesome-container { width: 50% }
</style>
</head>
<body>
<!-- awesome container content: START -->
<div>…</div>
<!-- awesome container content: END -->
<script>
awesomeAnalytics(); // beacon conversion metrics
</script>
</body>
</html>
Consider the simple HTML page above and the three different content types that it contains: HTML markup, CSS styles, and JavaScript. Each of these content types has different rules for what constitutes valid content, different rules for indicating comments, and so on. How can we reduce the size of this page?
Compression with GZIP:
GZIP is a generic compressor that can be applied to any stream of bytes. Under the hood, it remembers some of the previously seen content and attempts to find and replace duplicate data fragments in an efficient way. (If you're curious, here's a great low-level explanation of GZIP.) However, in practice, GZIP performs best on text-based content, often achieving compression rates of as high as 70-90% for larger files, whereas running GZIP on assets that are already compressed via alternative algorithms (for example, most image formats) yields little to no improvement.
How To Optimize Site With GZIP Compression
Compression is a simple, effective way to save bandwidth and speed up site.
The system works, but it’s not that efficient. 100KB is a lot of text, and frankly, HTML is redundant. Every <html>, <table> and <div> tag has a closing tag that’s almost the same. Words are repeated throughout the document. Any way you slice it, HTML (and its beefy cousin, XML) is not lean.
If we could send a .zip file to the browser (index.html.zip) instead of plain old index.html, we’d save on bandwidth and download time. The browser could download the zipped file, extract it, and then show it to user, who’s in a good mood because the page loaded quickly. The browser-server conversation might look like this:
Browser: Hey, can I GET index.html? I’ll take a compressed version if you’ve got it.
Server: Let me find the file… yep, it’s here. And you’ll take a compressed version? Awesome.
Server: Ok, I’ve found index.html (200 OK), am zipping it and sending it over.
Browser: Great! It’s only 10KB. I’ll unzip it and show the user.
The formula is simple: Smaller file = faster download = happy user.
The tricky part of this exchange is the browser and server knowing it’s ok to send a zipped file over. The agreement has two parts
If the server doesn’t send the content-encoding response header, it means the file is not compressed (the default on many servers). The “Accept-encoding” header is just a request by the browser, not a demand. If the server doesn’t want to send back compressed content, the browser has to make do with the heavy regular version.
Compression options:
Deflate is quick and works, so I use it; use mod_gzip if that floats your boat. In either case, Apache checks if the browser sent the “Accept-encoding” header and returns the compressed or regular version of the file. However, some older browsers may have trouble and there are special directives you can add to correct this.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.