Web and Mobile Communications

Web Article Rubric

For the Web Article assignment, start by picking a topic and writing a short paper on it. While the content of your paper – its writing quality, coherence, clarity – is of course important, it only accounts for a small portion of your grade. Additionally, you will be ‘porting’ this paper into HTML and CSS. Here’s how:

  • Open your paper in whatever program you wrote it (Word, for example), and copy all of the text to the clipboard.
  • Download the ‘boilerplate’ from the server to your work space (desktop, external hard drive, whatever)
  • Open the ‘index.html’ file of the boilerplate, and paste your paper’s content in
  • Follow the assignment requirements (below)
  • Upload the content (the whole folder!) to the server, and send me a link to it

The requirements for the assignment are as follows:

  • At least 450 words, up to 800 words
  • Wrap your text in semantically correct HTML tags, such as <h1>, <h2>, <p>, <span>, <div>, <ul>, <li>,. etc.
  • Use (at least) two images, and (at least) two links to external websites (have them open in new windows)
  • Use at least two floats on the desktop layout of your page
  • Use a #wrapper or #container, limiting the horizontal width of your page (for example, to 960px)
  • Embed and use a custom font from Google Fonts
  • Style the content with CSS, effectively adjusting margin, padding, and colors (you may benefit from choosing a simple color scheme before starting)
  • Make the page responsive, so it down-sizes to a phone-sized screen gracefully, by writing media queries in your CSS. Be sure to test your page on a phone or skinny browser window to ensure it doesn’t appear with horizontal scrollbars or content too wide for the window.
  • Upload the project to your student server via Cyberduck, and email me a link
Posted in Uncategorized | Comments Off on Web Article Rubric

The basics of floats

A great article describing what a float is and how to use it.

http://css-tricks.com/all-about-floats/

Posted in Uncategorized | Comments Off on The basics of floats

Media Queries

Media queries have to go at the end of your CSS file. If your project has a #wrapper with a width of 960px, for example, you’d want to use a media query like this:

@media all and (max-width: 959px) {

/* media query rules go here */

}

In this case, the rule you’d probably want to put inside your media query would be:

#wrapper {

width: 90%;

}

So the end result would look like this:

@media all and (max-width: 959px) {

#wrapper {

width: 90%;

}

}

To see if your media query works, resize your page to under 960 pixels and see if your text wraps.

Posted in Uncategorized | Comments Off on Media Queries

Media Queries and Responsive Design

Responsive Design didn’t exist until about four years ago, when an Internet coder and theorist named Ethan Marcotte proposed the idea in an article he wrote for A List Apart. To see how an idea can change Web design in an instant, consider reading Ethan’s short, Internet-friendly articles that started Responsive Design:

http://alistapart.com/article/fluidgrids

http://alistapart.com/article/responsive-web-design

http://alistapart.com/article/fluid-images

Please note that these articles are also on hold in Belk Library for our class, but are freely available online.

Posted in Uncategorized | Comments Off on Media Queries and Responsive Design

ID vs. Class

An excellent explanation of when to use ID and class:

https://css-tricks.com/the-difference-between-id-and-class/

Posted in Uncategorized | Comments Off on ID vs. Class

Online Resources for COM 210

As mentioned in class, Lynda.com is great for learning website design. I recommend the lesson ‘HTML: Essential Training.’ Also, the w3schools.com site is useful for quick examples of code snippets.

Some other useful sites for practicing or learning Web design:

editor.openhtml.org

A simple web page that lets you enter HTML and CSS, and see the results. No file management, no live preview – it all happens in one browser window. There’s an option to save your work and even download the files, too. Great practice tool, especially to test if an idea ‘works.’

css-tricks

A great site filled with video tutorials, code snippets, forums and code examples. If read as a blog, the most recent posts will sound too complicated and advanced for us, but if you search on the site, there’s some great descriptions and examples of concepts like the Box Model, fonts, debugging, and all kinds of other useful things.

codeacademy.com

Code academy is filled with little tutorials of coding concepts, which then ask you to code yourself and try to get the same results. It’s a good way to practice.

 

Posted in Uncategorized | Comments Off on Online Resources for COM 210

An Introduction to CSS

The purpose of coding CSS is to change the appearance of your HTML document. Specifically, the way we do this is to alter the appearance of specific HTML tags, by writing CSS rules that affect them.

For instance, our biography assignment had an <h1> tag in it. In an attached CSS document, we could say something like:

h1 { color: red; }

…and we would change the appearance of the <h1> tag on our page (to be red text). Of course, if we had multiple instances of the <h1> tag on our HTML page, all of them would change accordingly.

Note the syntax – CSS uses curly brackets, colons and semi-colons, and all are required (that is, don’t leave them out or your code won’t work).

CSS Selectors that have two words in their name are hyphenated – for instance, ‘border-radius,’ ‘line-height,’ and ‘background-color.’ There are no spaces in CSS Selectors or rules.

CSS files are connected to your HTML files in the <head>, in a line that looks like this:

<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>

Note that the file name ‘stylesheet’ is informative, but certainly not necessary – our file could be named ‘fred.css,’ as long as that’s the file name we connect to our HTML document. ‘Index,’ as you’ll remember, does have an importance to its file name, and shouldn’t be changed.

The best way to write out a bunch of CSS rules for an element is to do so on a line-by-line basis, so you can comment out what isn’t working. CSS comments look like this:

/* this is a comment */

As a reminder, HTML comments look like this:

<!– this is a comment –>

So a CSS rule could look like this:

h1 {
line-height: 32px;
color: red;
/* background-color: green; */
}

There’s a ton of great CSS rules to learn. Try looking through our textbook (Chapters 11-14 act as an intro to CSS; chapters 15-17 are more advanced CSS concepts), or checking out Lynda.com’s offerings – I recommend a class called ‘HTML: Essential Training’ (it also covers CSS).

Posted in Uncategorized | Comments Off on An Introduction to CSS

CSS Primer

For our next class, we’ll attach an external CSS file to our HTML document. Dealing with file location and naming conventions is good content for our class meetings; for the blog, I thought it’d be best to instead go over some basics about CSS and share some links on how to get to know it better.

SYNTAX

A typical CSS rule looks like this:

h2 {

border: 2px solid black;

}

But what if we wanted to add a border to both <h1> and <h2> tags?

h1, h2 {

border: 2px solid black;

}

And what if we only wanted the border to show up underneath the text, not all the way around it (top, bottom, left, right)?

h1, h2 {

border-bottom: 2px solid black;

}

Finally, what if we only wanted the border to cover the span tag located inside an <h2> tag?

h1, h2 > span {

border-bottom: 2px solid black;

}

Hands down, the best (really, the only) way to learn CSS is to practice writing it. And the best way to do that is to follow along with a tutorial. If you visit www.elon.edu/lynda, you can log in and access the lynda.com tutorials. One I suggest is called ‘CSS fundamentals;’ it goes over the same concepts we cover in class.

Another great resource is the W3Schools: The W3C is the consortium that ‘governs’ the Internet, so this site is made by the people who run the Internet. Pretty snazzy idea, but the site is ugly. Nonetheless, it’s a good way to see and practice some CSS in action. (there’s also an HTML section)

CSS-Tricks is the best developer site out there, but most of the topics covered are too advanced to be of practical use in our class. That said, this ‘Almanac’ lists posts on every possible CSS property the site has ever talked about:

http://css-tricks.com/almanac/

Our textbook is an excellent resource for learning CSS. Chapters 11-13 deal specifically with the content of our next two classes, and Chapters 14-17 cover the content of the classes after that. The textbook also works as a great reference when coding!

Posted in Uncategorized | Comments Off on CSS Primer

Creating a simple HTML document

Hi guys, this post is for Professor Hannam’s section of COM 210, but Professor Walsh’s sections might want a refresher on how to create a simple HTML page, upload it using Cyberduck, and finding your URL. The video is a little over 5-minutes long and will hopefully get you squared away. Good luck!

Posted in Uncategorized | Tagged , , , , , | Comments Off on Creating a simple HTML document

Connecting to Quicksilver on ANY OS

Great, great summary of how to connect to quicksilver on a Mac, as well as Windows 7/8 and 9/10:

http://www.wiki.imedia365.us/index.php?title=Quicksilver

Posted in Uncategorized | Comments Off on Connecting to Quicksilver on ANY OS