CIS89A - 9. Beyond HTML

From WikiEducator
Jump to: navigation, search
Ray and Maria Stata Center (MIT)

Beyond HTML

Tools are central to the web developer toolkit. They help make development work more efficient, code more robust, and teamwork easier. CSS preprocessors and postprocessors are available for writing CSS efficiently and accurately. An introduction to the building blocks of JavaScript serves as a good starting point for further exploration.


Learning outcomes

  • understand usability
  • follow design guidelines
  • understand the design process
  • transfer files to a web server
  • understand search optimization



Keywords

  • usability, audience, FTP
  • preprocessor, postprocessor, JavaScript, client-side, scripting language, loop, if statement


Reading guide

  1. What types of development tools are available?
  2. What is GitHub? Why do developers use it?
  3. What is JavaScript?
  4. How can you use JavaScript to improve your visitors' experience?
  5. What are some of the basic blocks and functions?


Assignments

Coding assignment * beyond HTML basics as a new project with the Gen Garden html file and all styling in your own linked css file

  • download the Gen Garden HTML File
  • all your own css code - see the grading rubric for suggestions of what to include
  • comments in css - identify and describe the css code and why you have used this feature


  1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of activities for this module.

  2. Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
    * Chapter 19 CSS Variables . Chapter 20 CSS Preprocessors . Chapter 25 Going Beyond HTML & CSS . This information is beyond the scope of the course - good to know about but not necessary for completing this assignment.

  3. User Interface Design - Where can you learn more about user interface design - tutorials, online courses, articles, web sites, books, MOOCs, college courses? Post a summary and a link to your resource to User Interface Design discussion. Review 2 others.

  4. Search Engine Optimization (SEO) and Analytics - Being "found" and listed in search results is an important part of publicizing your site. The meta elements in head section of the page html code are used for this. Analytics - how many viewers found you and who are they and what did they want? Find an article that gives a good overview or specific advice about using these elements effectively. Post a brief summary and a link to the article in the Search Engine Optimization & Analytics discussion.

  5. Search and Meta Data - Search for a topic of interest to you. Look at the source code for several of the sites that are listed in the search results. Do the keywords and description in the meta elements in the head element match your search? What other information is provided in the meta data. Why is this important? Post links to 2-3 search results with their meta data and a brief summary of the connections between your search and the results to the Search and Meta Data discussion. Review 2 other posts.

  6. Internet of Things (IoT) - The next big thing is the Internet of Things. The articles listed in the Media section provide a great overview with lots of interesting examples in a broad range of categories. Take a look. What do you think? What is one example that is a surprise but you would like to see? Post the name and ONE sentence about your selection to the Internet of Things discussion. Conclude your post with a question. Reply to 2 others and concluded your replies with questions.

  7. Managing Websites - When you are managing an existing website, keeping content up to date, ensuring site users can complete their tasks, and driving continuous user-centered improvement are critical. Find a description of website management guidelines. How is this different than creating a website? What are some of the practices that you can use? Post a link to the guidelines and a summary of 3 important points to the Managing Websites discussion.

  8. Web developer jobs - There are many skills and roles available for web developers. ..see Frontend Developer Roadmap Some organizations have a team of developers with different specializations. For other organizations, there may only be one person who develops the web site in addition to other responsibilities.
    De Anza College has partnered with Handshake as a job and internship platform for students and employers. For more opportunities sign up for an account. Join and login to De Anza Handshake website to view available jobs and internships.
    Find 2-3 job ads for web developers. Review the job requirements. Post a link to 1-2 job descriptions and comment on what skills you have and need to develop to perform this job in the Developer jobs discussion.

  9. VounteerMatch.org - virtual volunteering. For many of the volunteer opportunities, you can work on projects that will allow you to gain some important experience. There are listings for web developers, programmers, social media editors, graphic artists, testers, game developers, and more. Look through the descriptions for 1-2 that would help you gain experience in the work you would like to be doing. Post a link to the Volunteer experience discussion with the descriptions and a brief note about organizations looking for these volunteers.

  10. JavaScript - Learn about JavaScript. Review the resources listed in the Media section below, online tutorials, instructional material from JavaScript tutorials. Also review the w3shcools.org How To examples that include code snippets for HTML, CSS and JavaScript. Add 2-3 of these to your coding project for this module.
    What did you know about JavaScript before you started this activity? What resources did you use? What did you learn? What questions do you have about JavaScript? Have you seen web sites that are mostly made with JavaScript? What did they do that is different from just HTML? Will you need to learn JavaScript for developing web sites beyond this course? Write a brief summary of your experience and post it to the JavaScript experience discussion. Review the posts of 3 others.
    If you are interested, explore further. There are other programming languages such as Python and PHP as well as frameworks and development environments being used by professionals. Some of these are mentioned in the job descriptions for web developers.

  11. Revisit basics - In a NEW ONE page project, demonstrate all the items listed within your page. Include some descriptive information about how the requirements are used. Also, use comments in your CSS code to indicate what you are doing. Publish your project file.
  12. Submit the link to your project to the Revisit basics assignment.
  13. Post a link to your project to the Revisit basics discussion. How do these coding projects relate to your understanding of what web development is?
  14. Review the work of 2 others - the page display and the source CSS code. Post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the Revisit basics discussion.

  15. Readability and text display - In the beginning, the web user had complete control over how text was displayed. This has been largely replaced by the developer deciding what is "best". However, new research shows that readability and comprehension can be impacted by these choices. See for yourself. Access the ReadabilityMatters.org Sandbox and adjust the sliders to change the text display. Think about what you read and what settings would be better (or worse) for each. Phone, tablet, laptop, desktop? Academic papers, books for pleasure, searching for specific information within text? How about on standardized tests, assignment instructions or even math problem descriptions? Could text display make a difference to you? Post you observations in the Readability demo discussion.
    https://readabilitymatters.org/readabilitysandbox/

  16. Data visualization - There are many different ways to display numbers and statistics. Tables are convenient but can be overwhelming. Other data displays include charts, infographics and interactive animations. Find an example for an interesting display that is an effective way to convey the information. Post a link to your selection and provide a brief description of why this is better than just a table of numbers to the Data Visualization discussion. Review 3 others and post a comment comparing effectiveness of these to the one you selected.

  17. Success Skills - Solve it - There are many tools available on the web to help with problem solving skills development and practice. Critical Thinking, Problem Solving and Decision Making are the primary focus of the articles provided. Review 2-3 articles from the Success skills - SOLVE list in the Media section below. Find another similar article that your would recommend be added to the list. Post a link and a brief summary of 1 to the Success Skills - Solve it discussion.

  18. eCommerce - Some of the "best" examples of web site design are the sites that sell stuff. Find a site that sells products or services online - not Amazon. Think about why the customer visits this site. How does the site design help the customer buy from the site? Post a link to a commercial web site with a brief description of what makes this a successful (or not) web design to the eCommerce site design discussion. Keep the description short - 2-3 sentences.

  19. Group Project groups discussions - Web Design - Practice evaluating web design. You have looked a several sites for this module. Pick one and evaluate the site design. What are you looking for in good web design? What have you learned about web design? How would you apply these design ideas to your own work? Provide a link to the example and brief description of the the design feature. Share with your group in the Group discussion. Are there outstanding questions? Contribute one or more posts to the discussion for the group. If you have a question about working as a group, please ask.


Icon multimedia.gif

Media



Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 19 CSS Variables . Chapter 20 CSS Preprocessors . Chapter 25 Going Beyond HTML & CSS


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x9basics: Error parsing XML for RSS


SEARCH ENGINE OPTIMIZATION (SEO) Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/SEO: Error parsing XML for RSS


JAVASCRIPT

Eloquent JavaScript

A Modern Introduction to Programming - an introduction to the JavaScript programming language and programming in general. Originally written and published in digital form, includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/javascript: Error parsing XML for RSS


BEYOND HTML
Programming Languages - Javascript, SQL, PHP, Python, jQuery, development tools

10 Best Web Development Tutorials For Beginners

Maybe you’re looking to build a website for the business you’re bootstrapping from the ground up. Maybe you’d like to enter the world of web development and are looking for an introduction to coding. Or maybe you’re just trying to stay a step ahead (or behind) your hacker kid. Whatever the case, we’ve got the resources to help you get started. Here’s a list of the 10 best web development tutorials for beginners.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/beyondhtml: Error parsing XML for RSS


INTERNET OF THINGS (IoT) Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/iothings: Error parsing XML for RSS


WEBSITE MANAGEMENT Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webmngmt: Error parsing XML for RSS


WEBWORK - developer jobs Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webwork: Error parsing XML for RSS


E-COMMERCE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/ecommerce: Error parsing XML for RSS


SOLVE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/solveit: Error parsing XML for RSS


2016.3 2540 . 2018.3 5131 . 2020.11 9544

Retrieved from "https://wikieducator.org/index.php?title=User:Vtaylor/CIS89A_Learning_Web_Design/Beyond_HTML&oldid=1107717"