Download MULTIMEDIA WEB DESIGN CLASS NOTES CLASS :: 08 10.28

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
Document related concepts

URL redirection wikipedia , lookup

Transcript 
MULTIMEDIA WEB DESIGN
CLASS NOTES
CLASS :: 08
03.17
2017
3 Hours
AGENDA
EXPORTING PSD IMAGES TO FOLDER
::
::
::
::
::
Ensure Your Folder Structure is Correct
Open Photoshop CC [Creative Cloud]
Properly Name Your Image Layers
Turn on Generator
Duplicate images Folder/Paste in Your Website Folder
INSERTING IMAGES
:: Basic Images
EMBEDDING MEDIA
::
::
::
::
::
::
::
Webpage
PDF
Google Maps
Social Media Code
Social Media Video
Original Video
Original Audio
HW-7
1
MULTIMEDIA WEB DESIGN
CLASS NOTES
EXPORTING PSD IMAGES TO FOLDER
:: Ensure Your Folder Structure is Correct
:: Open Photoshop CC (Creative Cloud)
:: Properly Name Your Image Layers
Ensure you have an empty layer named: default images/
Image layers/groups should be named with no spaces and a file extension ( logo.png, instagram.jpg )
Image layers/groups may contain size & quality info, in addition to multiple file exports ::
EXAMPLE: 50% footer-logo.png, logo.png24, logo.png (generates 3 files: 50% size of original, 24 png quality, & original)
SOURCE URL: http://youtu.be/Z4DU87M9yYQ
:: Turn on Generator
This will generate image file from your image layers/groups [ File > Generate > Image Assets ]
:: Copy Image Assets Content > Place in images Folder (for your website)
The Generator in Photoshop CC has placed all Photoshop layers & groups (properly named with extensions)
inside a folder named Image Assets. This folder is located in the same place as your mock up files.
1.
2.
3.
4.
Save your PSD document, then Open your Image Assets folder (Located in same folder as PSD)
Duplicate the images folder
Locate your website folder: _DGIM759> your-student-folder > website-folder > public_html >
Paste the images folder within your public_html folder
2
MULTIMEDIA WEB DESIGN
CLASS NOTES
INSERTING IMAGES
:: Basic Images
SOURCE URL: http://www.w3schools.com/tags/tag_img.asp
a. Image Tags.
The basic structure for inserting an image consists of a tag, attribute(s), and value.
START TAG
<
ELEMENT
ATTRIBUTE
img
Src
VALUE
=
“filename.jpg”
Use all lowercase and no
spaces when naming your
web files.
image tag
SHOWN ABOVE: .jpg
Other image file extensions
used in web publishing are:
.png, .gif, and .svg
Alt
=
END TAG
> or />
The image element
mark-up is an empty or
self-terminating tag. It
only requires a “>” or
“/>” to close the
element
“Image of filename”
This text will appear if the
image is not displayed in
the browser. It may also be
read by a screen reader
(often enabled for visually
impaired site visitors)
NOTE: You may also add a title attribute for tooltips: <img src=”filename.jpg” title=”image description”>
In HTML, The code appears as follows:
1. <img src=”filename.jpg”> if located in the root directory
2. <img src=”images/filename.jpg”> if located inside images folder (PREFERRED)
3. <img src=”http://www.yourwebsite.com/filename.jpg”> located on live site (root)
4. <img src=”http://www.yourwebsite.com/images/filename.jpg”> live site inside images folder
CREATE A CODE SNIPPET FILE FOR INSERTING IMAGES
1. Open new HTML 5 File
2. Place cursor BETWEEN the opening and closing <body> tag
3. Type the following [alternate: Menu Bar > Insert > Image ]:
<img src=”images/logo.png” alt=”This is my logo”>
4. Save As: “code_images.html
5. Click Save
6. Preview in Browser
3
MULTIMEDIA WEB DESIGN
CLASS NOTES
EMBEDDING MEDIA
:: Webpage
Save As… code_embed-webpage.html
Embed a Webpage inside of a Webpage
You may embed an entire live site into your own page [ permissions permitting ].
With the correct measurements and styles, you may allow your visitors to have a seamless experience for
viewing information and media (external to your site).
In the following example, you may view NYIT’s website through an element called the iframe:
<iframe src="http://www.nyit.edu" width="1100" height="575" frameborder="0" scrolling="yes"></iframe>
Element:
<iframe
Markup to open an iframe element.
It creates frame for object/media from another page source
After you type iframe hit the spacebar before typing the first
attribute…
Attribute 1:
src=
This attribute tells browser to look up a source
Value1:
“http://www.nyit.edu”
This is the absolute hyperlink/web location (URL)
for the page you wish to embed
Attribute 2:
width=
Width of the iframe
Value 2:
"1100"
Value (measurement) for the width attribute
Attribute 3:
height=
Height of the iframe
Value 3:
Attribute 4:
Value 4:
"575"
frameborder=
"0"
Value (measurement) for the height attribute
Informs browser a frameborder behavior will be added
Value of “0” allows webpage to be displayed without a
border.
Attribute 5:
scrolling=
Informs browser a scrolling behavior will be added
Value:
="yes"
“yes” value for scrolling, adds a scrollbar to the iframe
>
Closes the opening iframe tag
</iframe>
Terminates the iframe element (closing tag)
NOTE: In this example, you may manipulate the attribute values to see how width, height, and
scrolling, affects the look and feel of the web embedment.
REFERENCE: http://www.w3schools.com/tags/tag_iframe.asp
4
MULTIMEDIA WEB DESIGN
CLASS NOTES
:: Social Media Code
The majority of social media sites allow users to embed feeds/timelines/gallery thumbnails/etc. by use of developer
tools. Typically the embed code is located on the developer tools page, in settings, or share embedding within a post
itself…
REFERENCE FOR VARIOUS SOCIAL MEDIA EMBED CODE:
URL: http://iris.nyit.edu/~dmyrick/dgim759/embed-social-media.html
Example: Embed Twitter into Your Web Page
Video Demo This video shows how to embed twitter, as
well as screenshot and include the feed in a Photoshop
Mock-Up…
Save As… code_embed-twitter.html
1. Login to your Twitter Account OR
Go to: https://publish.twitter.com/#
1. 2. Go to your Twitter Menu Bar >
Click Your Profile and settings icon
2.
3. Choose Settings and privacy from dropdown menu
4. Go to Left Column > Locate Widgets > Click Widgets
5. In the center of the page > Click Create New
6. Enter the URL for your Twitter Account > http://www.twitter.com/yourusername
NOTE: You may go directly this page to start the embed code process: https://publish.twitter.com/#
7. Choose the option for your embed code: For this exercise you will chood Embedded Timeline
5
MULTIMEDIA WEB DESIGN
CLASS NOTES
8. Choose the appropriate styles for you feed:
// Set Width (You may use percentages)
// Set Height (You may use percentages)
// Theme: You may choose a light or dark theme
and your own link color
6. Choose 9. [Click] Update
10. Copy HTML code [Cmd+C/Ctrl+C]
11. Paste Code within desired element in
Dreamweaver [Cmd+V(Mac) / Ctrl+V(PC)]
INSTAGRAM:
[ SEE EMBED SOCIAL MEDIA PAGE ]
URL: http://iris.nyit.edu/~dmyrick/dgim759/embed-social-media.html
LINKED IN:
[ SEE EMBED SOCIAL MEDIA PAGE ]
URL: http://iris.nyit.edu/~dmyrick/dgim759/embed-social-media.html
6
MULTIMEDIA WEB DESIGN
CLASS NOTES
:: Social Media Video
YOUTUBE
Save As… code_embed-youtube.html
1. Go to YouTube video of your choice
2. Click The Share Button
3. Choose the Embed Button
4. Copy the highlighted code from the text field
5. Paste the code in your desired location (inside the body tag)
SAMPLE CODE: NYIT – 10 YEARS OF SOURCE
<iframe width="560" height="315" src="http://www.youtube.com/embed/ne_kXZ3BkEc" frameborder="0" allowfullscreen>
</iframe>
:: Original Video
Embed Original Video in Your Webpage
Save As… code_embed-original-video.html
1. Create a new folder (inside of your pubic_html folder) named videos
2. Save all of your converted (from HW-4) video files inside the videos folder
SAMPLE HTML5 CODE:
<video id="video-background" poster="videos/still-image.gif" autoplay loop controls>
<source src="video/filename.mp4" type="video/mp4">
<source src="video/filename.ogv" type="video/ogg">
<source src="video/filename.webm" type="video/webm">
Your browser does not support the video tag.
</video>
REFERENCES: http://dev.w3.org/html5/spec-author-view/video.html
http://www.w3schools.com/html/html5_video.asp
mobile: https://github.com/etianen/html5media/wiki/embedding-video
7
MULTIMEDIA WEB DESIGN
CLASS NOTES
:: Original Audio
Embed Audio in Your Webpage
Save As… code_embed-audio.html
CONVERTING FILES: http://www.online-convert.com/
1. Create a .mp3 and .ogg file from your audio file of choice (use above link)
2. Use one of the following code structures for embedding audio on your page
SAMPLE CODE HTML5: AUDIO (The Browser will display the first recognized format)
<audio controls="controls">
<source src="audio/musicfile.ogg" type="audio/ogg">
<source src="audio/musicfile.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
MORE MULTI-BROWSER COMPLIANT:
<object width="199" height="16">
<param name="src" value="audio/musicfile.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#333333">
<embed TYPE="application/x-mlayer2"
src="audio/musicfile.mp3" autostart="false"
loop="false" width="199" height="16" controller="true"
bgcolor="#333333">
</embed>
</object>
NOTE: If you wish to autoplay your music once visitors arrive to your page, change the following
attributes and values:
<param name="autoplay" value="true"> AND src="audio/musicfile.mp3" autostart="true"
REFERENCE: http://www.w3schools.com/html/html5_audio.asp
8
MULTIMEDIA WEB DESIGN
CLASS NOTES
:: PDF
Embed a PDF Inside of a Webpage
Save As… code_embed-pdf.html
NOTE: An absolute URL address must be used as the .pdf location for multi-browsers
<object data="http://helpx.adobe.com/pdf/dreamweaver_reference.pdf" type="application/pdf"
width="100%” height="100%">
<p>It appears you don't have a PDF plugin for this browser.
<a href="http://helpx.adobe.com/pdf/dreamweaver_reference.pdf">
Click here to download the Dreamweaver Help and Tutorials PDF file.
</a>
</p>
</object>
Link to a PDF or Word Document
Link to PDF (Viewable on Web):
<a href=”http://helpx.adobe.com/pdf/dreamweaver_reference.pdf”>See PDF</a>
Link to Microsoft Word Document (Downloads from Web):
<a href=”http://iris.nyit.edu/~dmyrick/dgim759/docs/class8.doc”>See PDF</a>
:: Google Maps
Embed a Google Map Into a Webpage
Save As… code_google-maps.html
1. Go To Google Maps: https://www.google.com/maps
2. Type an address:
3. Click the Share Button
4. Copy the HTML Embed Code [See blue highlighted code below]:
5. Paste the code into your Structural (<p>,<div>, <section>, etc.) HTML Element of Choice
9
MULTIMEDIA WEB DESIGN
CLASS NOTES
Homework
HW-8
DUE :: 03.31
REVIEW ::
1. Class 8 Notes
2. Embed Media Web Page:
URL:: http://iris.nyit.edu/~dmyrick/dgim759/embedmedia.html
DO ::
SEE HOMEWORK PAGE FOR COMPLETE DETAILS
BRING :: HW-8
1
Class 8 Notes
10
Related documents
(control O) and work through the instructions to build this web page.
(control O) and work through the instructions to build this web page.
Document
Document
What makes a good visual aid - Rochester Community Schools
What makes a good visual aid - Rochester Community Schools
Your project: Create a page that looks something like this: The
Your project: Create a page that looks something like this: The
Deliverables from the 2004 – December, San Diego, CA MMP session
Deliverables from the 2004 – December, San Diego, CA MMP session
How to Organize a Website
How to Organize a Website
Peer to Peer File Sharing
Peer to Peer File Sharing
2.1 Adding Images
2.1 Adding Images
International Marketing
International Marketing
Images - Northside Middle School
Images - Northside Middle School
Tangozebra `Stub` File Implementation – Vers 02b
Tangozebra `Stub` File Implementation – Vers 02b
Enrich your eChalk Site with Rich Media!
Enrich your eChalk Site with Rich Media!