Upload
kurtgessler
View
153
Download
1
Embed Size (px)
Citation preview
• Talk about ourselves and our focus• Class logistics• How the web works• HTML I• Narrative storytelling• First data visualization exercise• Homework
Today
• Your name• Hometown• Undergraduate degree• Personal history• Previous employment• Professional passion(s)• Most want to learn in this class
Introduce yourself
Class site canvas (http://bit.ly/1AuuRsH)Class structure: • 3-hour class with a 50-minute optional
lab• Mostly hands-on workshops and
focused assignments• No final projectGrading: Homework 40%, workshops 40%, engagement 20%
Logistics
• Plain text editor like Textwrangler (Macs) or Notepad++ (PCs)
• Newest versions of Chrome and Firefox w/Firebug• Photoshop or other photo editing software• Non-NU Google account connected with Google
Fusion Tables • Twitter account
What you need
• “HTML & CSS: Design and Build Websites” by Jon Duckett
• “Don’t Make Me Think Revisited” by Steve Krug
Officially Friday from around 4:30 p.m. in the Loop campus. Doesn’t hurt emailing me as [email protected]@[email protected]
Office hours
“The purpose of the schools [is] to, as one teacher argues, ‘Teach carpentry, not hammer.’ We need to teach the whys and ways of the world. Tools come and tools go. Teaching our children tools limits their knowledge to these tools and hence limits their futures.”- Michael Bellino, an electrical engineer at Boston University's Center for Space Physics
‘Teach carpentry, not hammer’
Journalism 451 is a digital laboratory designed to arm you with the perspective and essential skills to be at the epicenter of a digital newsroom, assessing, sometimes swiftly, what needs to be done and how and when to do it.It’s more than just tools, because tools change and evolve. You need to know why we use them.And it’s real.
What this class is about
• Fundamental knowledge of how the web works• HTML5, CSS and responsive web design• CMS basics• Digital storytelling and data visualization tools• Breaking news writing, content curation and
writing from multiple sources• Headline writing• SEO and identifying trends• Analytics and audience analysis• Social media
Core concepts
Deep dive into web developmentA long hand-holding-type project you could never replicate away from the classLong-form lamentation of journalism or ivory tower navel-gazing at NYT Innovation Report
What this class isn’t about
The first ARPANET link was established between UCLA and the Stanford Research Institute on Oct. 29, 1969 …
But that’s not what we’re talking about. At all.
How the web works
We want to answer the question: “What’s your browser doing when it displays a page?”
Exploration of that question has many pragmatic implications as you work on the web.
How the web works
• You enter a URL into your browser, such as Chrome or Firefox.
• Vocab: URL = Uniform Resource Locator• That URL gets parsed by your browser
in this format: <protocol>://<server>/<path/file>
http://www.northwestern.edu/admissions/graduate.html
Finding your web page
• The protocol defines the how computers will communicate. In this example, it’s “http” or Hypertext Transfer Protocol.
• The server tells your computer the name of the computer serving the requested page.
• The path indicates which page you’re interested in accessing on the requested website.
Finding your web page
Two important takeways: case sensitivity and paths
Are these paths the same?www.redeye.com/News/Story.htmlwww.redeye.com/news/story.html
No. Web files and directories are case sensitive.
Finding your web page
In the following example, what does “admissions” represent in the file structure?
http://www.northwestern.edu/admissions/graduate.html
A folder. And graduate.html is an html document.
Finding your web page
• Now that your browser has chopped up the URL, it can get down to work, which is establishing a communication session with the requested server.
• Vocab: These computers are called “web servers”, because they respond to (i.e. serve) requests from “clients,” like your browser.
Finding your web page
• Your browser now uses the internet’s phone book: the Domain Name System (DNS). It’s how clients, like your browser, convert a server name into its corresponding IP address.
• Want to look up a name in DNS? Visit http://www.webmaster-toolkit.com/dns-query.shtml
Finding your web page
• When you type in chicagotribune.com that resolves to 184.26.143.177
• These numbers are called IP (Internet Protocol) addresses. They are generally 10 or 12 digits.
• Want to find your IP address? http://whatismyipaddress.com
Finding your web page
Next, your computer sends something called an HTTP (Hypertext Transfer Protocol) request.One of two things happen: • If it can find the page you requested, it
returns it in an HTTP response• If the server can’t find the page you
requested, it returns a “404 page not found” response
Making a connection
• If it a successful connection is established, the actual content starts to be transferred and presented by your browser
• The format it follows? HTML (HyperText Markup Language)
• That information may be in one place (on one server). It, most likely, is not.
Making a connection
A web page is controlled by three parts:• HTML controls the structure of a web
page • CSS controls the presentation• Javascript controls its behavior (drag
and drop, swipe, dynamic style changes, button functionality)
Web page structure
• How does a browser render a web page?
• It chops up elements to form a Document Object Model (DOM) tree.
Read more? http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction
Web page structure
• OK, you’ve typed a URL, it’s been DNS resolved to an IP address. We’ve made a successful connection
• Now, data (web documents, images) are transferred to your web cache
• A web cache is a mechanism for the temporary storage (caching) of web documents to reduce bandwidth usage, server load and lag
Data caching
Why are some webpages slow to load while others are speedy?• Too many requests/high traffic• Too many off-server requests• HTML/CSS errors• File sizes, especially images
Web page lag
Manage your images properly before you FTP them to your image or web server.
Web page lag
• Always save for web and devices
• Size them appropriately (never enlarge)
• You told your browser you wanted to visit a particular URL
• Your browser parsed the URL• Your browser used the DNS system to
convert the user-friendly name into an IP address
• You connected to the IP address• Your browser sent the server an HTTP
request asking for a copy of the HTML document
Anatomy of a page load
• The server found the requested HTML document and returned it to your browser via an HTTP response
• Your browser interpreted and displayed the HTML document, gathering all needed resources and storing them in your web cache
Read more: http://www.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm
Anatomy of a page load
Takeaways
• Know what a URL means, from the IP address to the path
• The internet is case sensitive• Know the parts of the web page• Know the importance of file sizes• Remember your debugging tips
• HTML is a language for describing web pages. It houses and describes content within sets of tags. It stands for HyperText Markup Language.
• HTML is not a programming language. It is a markup language.
• We’ll be using HTML5 with some XHTML standards.
What is HTML?
• HTML controls the structure of a web page.
• CSS controls the presentation. • Javascript controls its behavior.
Good, clean HTML contains no style information.
What does HTML do?
• HTML uses tags in documents to describe the structure of pages.
• Most tags will involve both an opening and a closing tag.
• Each tag tells the browser something about the data within each container.
How does it work?
• HTML is delivered as a “documents.” These are then parsed, which turns them into the Document Object Model (DOM) within a web browser.
• As they are parsed, “elements” are generated from each “tag.”
• On your HTML document they are “tags;” on your website, they are “elements.” Move along.
Super perfectionist alert …
<html>Start and end of an HTML document</html> <head>Metadata, style, script</head><body>Main content area</body><p>This is a paragraph of normal text</p><h1>This is the most important headline</h1><h6>This is the least important headline</h6><strong>This is bold text</strong><em>This is italicized text</em><blockquote>Sets this text apart</blockquote>
Basic HTML5 tags
<a>Links</a><span>Unstyled tag for inline elements<span><figure><figcaption> HTML5 image and caption containers<img /> Image call<ul><ol><li> List tags and items<aside><header><footer><hgroup><section><nav><article> HTML semantic containers<div>Unstyled container for block-level elements</div><hr /> Horizontal rule<br /> Line break
More HTML5 tags
Empty tags are “elements” that contain no content, such as <hr> or <br>, and are usually styled <br /> or <hr /> <img /> under XHTML standards.
<img src=“http://coolpic.jpg” alt=“cool pic” />
Empty tags
DON’T USE ALL CAPS FOR TAGS.
It works, but it’s poor (deprecated) form.
In fact, lots of bad things work fine, but don’t do them.
Speaking HTML
• Opening tags contain attributes.• They give more information about how
to render the information contained in the tag.
<a href=“http://fakelink.edu”></a>
HTML attributes
HTML5 is a semantic system, meaning the tags tell browsers how to interpret them. Not styles, per se, but presentation clues. This helps with:• SEO, page maintenance, accessibility
Again, though, styling is left to CSS not HTML
Markup with meaning
<strong> not <b><em> not <i><blockquote><address><cite>Browsers will often apply a style as they render these. But you can override.
Markup with meaning
Good HTML structure will allow you to apply styles to relative positions.
<article><h1>header</h1><p>CTA ghost trains are
<em>very</em>scary</p></article>
<article> is the parent of <h1> and <p>. <h1> and <p> are children from <article>. <p> is the parent of <em>
Parents and children
It’s valid structure. But when you nest tags, you close the tags in the opposite order that you opened them.
Yes: <strong>This is <em>right</em></strong>No: <strong>This is <em>right</strong></em>
Nesting tags
<!DOCTYPE html><html><head>META/STYLE/SCRIPT INFO</head><body>CONTENT</body></html>
Simple HTML5 page structure
<!DOCTYPE html><html lang="en"><head><meta charset="utf‐8" /><title>TITLE GOES HERE</title> <link rel="stylesheet” type="text/css" href="style.css" /></head><body>CONTENT GOES HERE </body></html>
HTML-to-English translationTells browser "this is an HTML file”Let’s converse in EnglishStarts metadataTranslate characters this wayAppears in your browser tabGet presentation info here
I’m done with the metadataStart main content areaEnd of the main content area“All done with this page”
1. Open the file lesson1.html with your text editor2. Make the changes detailed in the commented out section at the top of the file: <!-- COMMENTS -->3. Save4. Open your file with Safari/Firefox/Chrome to see changes
Lesson I
There are three types of lists: ordered lists <ol>, unordered lists <ul>, definition lists <dl>.• Ordered lists are used for sequential
lists like instructions for assembling a box
• Unordered lists used bullet points rather than characters
• Definition lists really aren’t used much
Lists
Note: You can change numbering schema.<h2>How to create web pages</h2><ol><li>Write markup</li><li>Save file</li><li>Preview file in browser</li></ol>
Ordered lists
Note: You can change bulleting schema.<h2>Needs for web page building</h2><ul><li>Text editor</li><li>FTP client</li><li>Photoshop</li><li>Domain</li></ul>
Unordered lists
1. Open the file lesson2.html with your text editor2. Format the recipe (with its two lists) as appropriate3. Save4. Open your file with Safari/Firefox/Chrome to see changes
Lesson II
• Many stories that have a strong or entirely necessary geographic component
• Visualized data often reveals the real story• Video and audio convey mood and setting• Documents show authenticity
Words and photos are not enough in 2015.
Why bother?
Geography of jobsSpot the BallTed LigetyMoore, Okla. tornadoBoston Marathon bombingHarsh Treatment graphic novelsRegional dialectEveryone has a nameCardstacks
Effective storytelling
Create a Google Fusion document based on the the file chicagospeedcameras.csv.
This is a simple file with predetermined geopoints (lat/long) and marker_icons.
We’ll import, customize the info window and marker icons, and publish.
Exploration I: GFT geopoints
Select “Tools/Change info window Layout” (“Configure info window” in classic).
Options: Automatic (checkbox based on your columns) or Custom (based on column plus open (inline) HTML)
Customizing map info windows
Select “Tools/Change map styles”
Options: Fixed, Column, Buckets
For fixed, you have 10 icons:https://support.google.com/fusiontables/answer/2679986?hl=en&ref_topic=2575652
You can use custom icons as well:https://developers.google.com/maps/tutorials/customizing/custom-markers
Customizing marker icons
Select Publish, Change visibility/Change/Public on the web/Done.
Re-select Publish, and specific your embed width and format (iframe embed or HTML + JS)
Publishing
Create a Google Fusion document based on the the file bibgourmand2014.xlsx.
This file only contains addresses not geopoints.
We’ll import how Google manages this process and what adjustments we need to make.
Exploration II: addresses
To select which column is plotted, toggle over to Map of Area, click on “Map of Area” and select “Select Location” and the column desired.
Exploration II: addresses
• Create a map illustrating what areas got the most snow from the recent winter storm.
• Follow one of two paths listed at the top of snowfall-template.html in the mapping folder, using the files town-coords.xlsx, snowfall-template.html and snowfall-20150106.xlsx or nws-rawdata.docx.
Lesson I: Snowfall map
• Find a visual story to share and explain in a few grafs why it worked. You might be asked to show and tell.
• GFT homework: snowfall map• HTML homework: Read Duckett Chapters
1-3• Good reading: “The News Mixtape”
(http://bit.ly/1tPQUIl) • Good reading: “Platforms Not One-Offs”
(http://bit.ly/1tPQWQv)
Week 1 homework