editing for the web tecm 4190 dr. lam. what makes a website “good” write down some...
TRANSCRIPT
![Page 1: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/1.jpg)
Editing for the Web
TECM 4190Dr. Lam
![Page 2: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/2.jpg)
What makes a website “good”
• Write down some characteristics that you consider define a “good” website.
![Page 3: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/3.jpg)
Components of editing for the web
As an editor, there are several components you must consider (beyond copyediting, of course):
1. Technical considerations
2. Visual display and architecture
3. Alternative editing process
![Page 4: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/4.jpg)
Technical Considerations
• Sometimes clients will want you to edit directly on their websites or demo servers
• This requires knowledge of technology
• WYSIWYG vs. HTML/CSS
![Page 5: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/5.jpg)
How do you author/edit in print?
• Create a document cover page with the following:
• Title: “Recommendation Report for TECM 4190”
• “Name”
• “Date”
![Page 6: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/6.jpg)
Now let’s try something else
• Visit unt.edu and click on the news article
• Right-click and select “view page source”
• Copy and paste into Notepad++
• Save file as test.html on your desktop
![Page 7: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/7.jpg)
What is HTML?
• Hypertext Markup Language
• Systems of descriptive tags (tag is a fancy word for a word inside of carats; e.g., <image>
• Tags describe the semantic content of document, but do NOT describe any visual or design elements
• As an editor, you don’t necessarily need to know how to author in HTML
![Page 8: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/8.jpg)
What is CSS?
• Cascading style sheets
• A system that allows a user to alter all visual elements on a website (from font choices to layout)
• Want to learn HTML/CSS? (BTW, I think EVERYONE should be literate in it)
• Go to http://codeacademy.org
![Page 9: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/9.jpg)
What is a WYSIWYG editor?
• “What you see is what you get”
• An interface that allows a user to edit the content (HTML) and the design (CSS) without knowing the languages
• Think Wordpress, Wix, Dreamweaver
![Page 10: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/10.jpg)
So, what does this mean for those editing websites?
You have several options:
1. Edit the actual HTML and CSS files (best option)
2. Copy the text from the website into a Word file to edit the language. Provide a written summary of design changes and a design style guide.
![Page 11: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/11.jpg)
Visual Display and Architecture
• Last week, we talked about CRAP
• While CRAP principles are generally applied to print documents, they also apply to websites
• There’s more to web design than just design principles though.
• There’s single page and multi-page architecture
![Page 12: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/12.jpg)
Single Page Architecture (Wireframe)
![Page 13: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/13.jpg)
Multi-page Architecture
![Page 14: Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e9f5503460f94ba117d/html5/thumbnails/14.jpg)
What to give to client
1. Provide the client with your language and design changes (as described in previous slides)
2. Provide client with a wireframe
3. Provide client with a sitemap