CIS89A notes

From WikiEducator
Jump to: navigation, search

CIS89A * https://wikieducator.org/User:Vtaylor/CIS_89A_HTML_and_CSS

Dec 2018 - notice - Thimble is going away by Dec 2019. Recommended alternative is Glitch

  • 19w - cis2 - introduce Glitch and Thimble in Module 7 * students seem to like Glitch ok even though it doesn't have the side by side editor / view panels - 2mar2019


CIS89A Summer 2018

  • skills * protect find use share solve make

misc notes

2018.6

Webmaking: More than just coding, webmaking is the act of creating, understanding, and promoting content on the Web

  • 2018 * Syllabus SPRING 2018 * media following assignments * some surveys to google forms so students see results *
  • 2017 - transition from Moodle/Catalyst to Canvas


  • Thimble supports all three types of style sheets - inline, internal and external. For the CIS89A course assignments, you will be using internal style sheets, that are placed within the header information of the web page (Willard p.44) * for external CSS stylesheet file - will need to be hosted as https & .css

??

??

need to know for CIS89A

Popcorn remixes


Web Literacy Map


PACE - Practice, Apply, Correct, Extend


PACE some +1 complete +2
Practice reviewed text, tutorial + w3school Try It examples
Apply code examples - basic tags + comment, description
Correct altered attributes, display, problems + described changes, discussion
Extend more / advanced tags, attributes + explained learning

CIS89A Spring 2018

from module announcements * byxbee blog

3. A few words - Text

Most web pages include a lot of text. It is important to know how to format text for readability and searching.

Most visitors skim to find the information they are looking for. So it is important that pages of text are attractive and well organized.

  • consider onscreen readability of text
  • provide printer-friendly version of page
  • organize content with natural divisions and headings
  • arrange information in columns
  • understand accessibility issues for people with disabilities



Keywords

readability, text style, .PDF, paragraph, line break, quotation block, box, alignment, page layout, column, fluid, layer


from module 2. Basic HTML

Wow. Many of you are jumping right in, already adding images, creating surveys and using lots of features that we will be covering during the course.

Have a look through the list of module topics. This will tell you when we will "study" these topics in detail. All the modules are open, so you can look ahead at the resources and references that you may use as you work with these features.

There are plenty of online resources and tutorials as well. Thanks to everyone who provided a link to an online resource that you found helpful.

If you are new to online learning and web development, please just take your time and work through the activities as they are described in each module.The course structure and module pacing is designed with you in mind.

The format of this course allows everyone to learn more about HTML, CSS and web development than they knew when the course started. Some students are starting with all the basic knowledge and need the course credit. Others are starting from almost nothing. There is plenty here for everyone to learn and be challenged.


HyperText Markup Language (HTML) is a "markup language" - telling a web browser how to display a page --Willard p. 4

Information about formatting (markup) is separate from the content. By changing the markup specifications, the content can be reformatted for completely different devices or dramatically altered "look and feel" without ever changing the content.

A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of paper manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts.[citation needed] In digital media, this "blue pencil instruction text" was replaced by tags, that is, instructions are expressed directly by tags or "instruction text encapsulated by tags." ... Some markup languages, such as the widely used HTML, have pre-defined presentation semantics—meaning that their specification prescribes how to present the structured data. https://en.wikipedia.org/wiki/Markup_language


Discussion posts For summaries and reviews, keep you posts to 2-3 sentences. Please do not include a lot of text from the article. It is important to learn to read a whole article then pick out just the few ideas to pass along to the class.


Textbook Optional There are plenty of really good online tutorials for HTML and CSS. There are links to several in each module. I like a soft cover reference book, but most of the time I just search online for a tag or attribute. Some students really like the video tutorials. Everyone has a personal preference. There is no point in requiring a textbook if many students never use it. If you like something in print, get the Willard book.

If you have questions, please ask.

Have a great week. ..vt



2. HTML Basics

Although web pages have become more complex and visually impressive, they are created using the same basic HTML elements that have been the foundation of the web from the beginning.

It is all about letting the world know you have something to say and you understand the simple framework for a web page.

  • explore the HTML language formatting and element structures
  • create and save an HTML file
  • preview an HTML file in a browser
  • add comments to an HTML file



Keywords

HTML, web, internet, element, tag, formatting, hypertext, markup language, special characters, comment, style sheet, color identifier

from 1. Getting Started

How to use Thimble Did you just try looking around and trying Thimble? There is online help available. There are links to Thimble tutorials and videos in the media section of the Assignments page. You can search for others. Several students made suggestions in the discussion forum. You can also ask specific questions there.

Discussion grading Discussion grading will vary depending on the activities within a module. Reply to each topic. Provide links and supporting information as outlined in the activity description. Respond to others to extend and expand the discussion. Be brief. Use college-appropriate writing - grammar, punctuation.

Student Learning Outcome Officially - by the end of the course students can create and publish web pages. Most students do way more than that. Basic HTML is simple. What you can do with it is amazing. The assignment activities are intended to introduce you to what is possible. Some students will stick with the basics and that's ok, too. Sharing assignments within the class helps everyone achieve their personal objectives.

Dynamic layouts Responsive web site design is covered later in the course. There are many options for every tag that contribute to how the display will work in different environments.


Great start to the class. Thanks to everyone for your contributions and enthusiasm.

If you have questions, please ask.

Have a wonderful week.

..vt

April 9, 2018 -

  • ACTIVATE course - from Faculty page in MyPortal
  • actual course

https://wikieducator.org/User:Vtaylor/CIS_89A_HTML_and_CSS

2018.2 - DeAnza Bookstore adoption * OPTIONAL HTML: A Beginner's Guide, 5th Edition by Wendy Willard (Author)

New for 18s * European privacy * AVR Augmented / Virtual Reality * privacy fair use

http://byxbee.wikispaces.com/cis89a




2015.2.6 - live > master request. page review discussion > rating by peers. assignment scoring - required, style, clarity ? quick

cis89images1 - img, src, width, height, alt, title (image attribute), href, map, area, shape, coords, figure, figcaption, border, float, margin, .gif, .jpg, .png

CIS89A HTML and CSS Web Page Development

topic WW, HD, VQ practice exploring building connecting technology
1. Getting started WW.Intro/1, HD., VQ1. Webpage Building Blocks Introductions, Voyager account, Catalyst Navigation Composing for the Web Sharing and Collaborating Goggles
2. HTML basics WW.2, HD.B, VQ3. Basic HTML Structure ** WW.3, HD.CSS, VQ8. Working with Style Sheets ** WW, HD.CSS, VQ7-14 Personal Learning Environment page - outline, courses Web Mechanics Remixing Community Participation Thimble
3. A few words
Text 		WW.4/5/6, HD.B, VQ4. Text PLE - personalize, interests Search Design & Accessibility Privacy Pinterest
4. From here to there Links WW.7, HD.B, VQ6. Links search, cite Security Infrastructure Tracking changes made to co-created Web resources Blogs, RSS, Twitter
5. Picture this Images WW.8, HD.B, VQ5. Images creative Commons, Wikimedia, Flickr Credibility Coding / Scripting Open Practices WikiMedia, Flickr, image formats - jpg, png, gif
6. Sound, light & magic Multimedia WW.9, HD.A, VQ17. Video, Audio, and Other Multimedia TED, YouTube education Researching authorship and ownership of websites and their content Improving the accessibility of a Web page by modifying its color scheme and markup Participating in both synchronous and asynchronous discussions Popcorn
7. To the point Lists WW.10, HD.B, VQ15. Lists categorize into lists Using browser add-ons and extensions to provide additional functionality Creating Web resources in ways appropriate to the medium/genre Choosing a Web tool to use for a particular contribution/collaboration Prezi
8. Rows and columns Tables WW.11, HD, VQ18. Tables summary Detecting online scams and 'phishing' by employing recognized tools and techniques Adding code comments for clarification and attribution Identifying rights retained and removed through user agreements JavaScript
9. Data collection Forms WW.12/13/14, HD.B, VQ16. Forms input form Synthesizing information found from online resources through multiple searches Identifying and using openly-licensed work Configuring notifications to keep up-to-date with community spaces and interactions Google Docs, Forms
10. A homepage of your own Site planning WW.15/16, HD, VQ2. Working with Webpage Files, VQ7. CSS Building Blocks plan a web site 3-5 pages for a course, community group or a subject of interest Comparing information from a number of sources to judge the trustworthiness of content Using CSS tags to change the style and layout of a Web page Identifying and taking steps to keep important elements of identity private
11. Final Projects WW, HD, VQ20. Testing & Debugging Webpages work out site layout, build pages Discriminating between 'original' and derivative Web content Securing your data against malware and computer criminals Making Web resources available under an open license Creative Commons
12. Peer Review review other project Changing the default behavior of websites, add-ons and extensions to make Web browsing more secure Exporting and backing up your data from Web services Contributing to an Open Source project


  • HTML - in the beginning, Tim Berners-Lee, WorldWide Web Consortium, history
  • CSS - beyond academic publishing, "brand" website
  • Web Literacy Standard - Mozilla Learn project
  • technologies - consume, create, collaborate
  • Webmaker - remix, make, share
  • cis89a.makes.org - remixes for CIS 89A
  • Choose your own adventure - personal objectives, quizzes to help you decide, map


Building activities / projects - suggestions - weekly report

  • Starters - easier, fun - overview, introduction to Web Literacies
  • Basics - skill building - all Web Literacies competencies
  • Challenges - stretch, more difficult - in depth on one or more Web Literacies
  • Projects - individual, collaboration - activities, teaching kits - based on skill or competency in Web Literacies - #tags

HTML and CSS - Visual Quickstart - textbook


notes, resources

HTML Beginner Tutorial assumes that you have absolutely no previous knowledge of HTML or CSS. HTML Intermediate Tutorial

  • Getting Started: What you need to do to get going and make your first HTML page.
  • Tags, Attributes and Elements: The stuff that makes up HTML.
  • Page Titles: Titles. For Pages. A difficult concept, we know…
  • Paragraphs: Structuring your content with paragraphs.
  • Headings: The six levels of headings.
  • Lists: How to define ordered and unordered lists.
  • Links: How to makes links to other pages, and elsewhere.
  • Images: Adding something a bit more than text…
  • Tables: How to use tabular data.
  • Forms: Text boxes and other user-input thingamajigs.
  • Putting It All Together: Taking all of the above stuff and shoving it together. Sort of in a recap groove.



  • Cascading Style Sheets (CSS) is a powerful tool that transforms the presentation of a document or a collection of documents, and it’s spread to nearly every corner of the Web—as well as many non-web environments. In this free introduction to Cascade Style Sheets, you’ll learn how CSS makes it possible for you to completely change the way document elements are presented by a user agent. You’ll discover the origins of this specification and how CSS styles work with HTML.


HTML HyperText Markup Language (HTML) is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML. More precisely, HTML is the language that describes the structure and the semantic content of a Web document. Content within a Web page is tagged with HTML elements such as <img>, <title>, and so forth. https://developer.mozilla.org/en-US/docs/Web/HTML

CSS (Cascading Style Sheets) is a language for describing the appearance of web pages. To create good-looking web pages, you need to learn CSS in order to define the appearance and location of the HTML elements within the pages. https://developer.mozilla.org/en-US/learn/css


maker map

cis89a.makes.org - remixes for CIS 89A - teaching kit > learning activities - Evil Twin

https://webmaker.makes.org, Teaching kit ? remix > learning

  • Web Literacies - Exploring, Building, Connecting - weekly discussions - competency from each strand
  • Textbook - discussions - HTML topics 1-7, 15-18. CSS, JavaScript
  • Building - Consumer - general knowledge, Builder - regular user, Advanced - power user
  • images - Creative Commons, Flickr - CC-BY-SA

Activities / projects - suggestions - choose your own adventure - weekly report

  • Starters - easier, fun - overview, introduction to Web Literacies
  • Basics - skill building - all Web Literacies competencies
  • Challenges - stretch, more difficult - in depth on one or more Web Literacies

Projects - individual, collaboration

  • activities, teaching kits - based on skill or competency in Web Literacies - #tags


outline

  • sequence provided, due dates for assignments/discussion, work ahead and/or more depth
  • consume (12), create (9), collaborate (3)
  • curate, reflect, contribute

personalization

  • what you know
  • what you want to know
  • plan, options > groups
  • students answer student questions

build your own adventure - placement/assessment - self, quiz

  • new here - basic concepts, functionality - required
  • some experience - beyond current level - select one or more areas of interest/focus
  • challenge - depth, breadth, extension

??

  • scoring - focus, interest, depth, exploration

topic

  • I know
  • consume - site, review, highlight, question, discuss
  • create - demonstrate, learning narrative, peer review
  • collaborate - problem, work breakdown, solution
  • thinking thing - sharing, questions, news, funny
  • I wonder - reflection, want to know...

Technologies

  • consume - search, RSS, Twitter
  • create - presentation, share, publish - blog, Prezi, Pinterest, Flickr
  • collaborate - Wikia, Wikispaces


template

Introduction


Learning outcomes


Keywords


Study notes

  • What 
 ==
 ==


Icon multimedia.gif

Media


 ==
Assignments==
  1. I know
  2. consume - site, review, highlight, question, discuss
  3. create - demonstrate, learning narrative, peer review
  4. collaborate - problem, work breakdown, solution
  5. thinking thing - sharing, questions, news, funny
  6. I wonder - reflection, want to know...
  • Web Literacies - Exploring, Building, Connecting - weekly discussions - competency from each strand
  • Textbook - discussions - HTML topics 1-7, 15-18. CSS, JavaScript
  • Building - Consumer - general knowledge, Builder - regular user, Advanced - power user

Building / create - Activities / projects - suggestions - choose your own adventure - weekly report

  • Starters - easier, fun - overview, introduction to Web Literacies
  • Basics - skill building - all Web Literacies competencies
  • Challenges - stretch, more difficult - in depth on one or more Web Literacies
Retrieved from "https://wikieducator.org/index.php?title=User:Vtaylor/Willard/CIS_89A_HTML_and_CSS/CIS89A_notes&oldid=1070222"