Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Copy of Integrating Components of Websites

No description

Deniz Demirkurt

on 11 March 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Copy of Integrating Components of Websites

Software Types
Integrating Components of Websites

Manipulating graphics
• Software types to house and display the multimedia components:

• Differences in files for print and online versions
• Inserting and manipulating objects
• Tables
• Layers
• Links


Referencing and reviewing
• Inline and floating graphics
• Applications and online tools used for creating and making available interactive multimedia
• Use of scripting in creating web pages
Differences in Files
Deniz, Polen, Sarp
Website contains related web pages from a single web domain on the World Wide Web.
Usually devoted to one single topic or several related topics.

World Wide Web= It is a system of internet servers that allow specific documents to be viewed or accessed. These documents are formatted via HTML (Hyper Text Markup Language).

Web Domain= is an identification string that defines authority or control on the Internet

Its is web document suitable for WWW and web browser.

One can display multimedia components like audio files, videos, animations, images etc.
Web Page
Creation of documents using page layout skills on a personal computer. It’s software can generate layouts and produce typographic quality text and images comparable to traditional typography and printing.

Desktop Publishing
Adobe FrameMaker
Adobe InDesign
Adobe PageMaker
Adobe HomePublisher
Apple Pages 4.x
Microsoft Office Publisher

Word Processing
Using a computer to create, edit, and print documents. A word processor enables you to create a document, store it electronically on a disk, display it on a screen, modify it by entering commands and characters from the keyboard, and print it on a printer.
Display information in the form of a
slide show.
It has three major functions:
an editor
that allows text to be inserted and formatted
a method
for inserting and manipulating graphic images

slide-show system
to display the content.
Apple Keynote
Corel Presentations
Google Docs (web-based)
Harvard Graphics (obsolete)
Hewlett Packard Bruno (software)
IBM Lotus Freelance Graphics (obsolete)
Kingsoft Presentation
LibreOffice Impress (open source)
Microsoft PowerPoint
OpenOffice.org Impress (open source)
Audio is typically stored on magnetic tape as analog data. For audio data to be stored on media such as a CD-ROM or hard disk, it must first be encoded using a digital sampling process . Once encoded, the audio data can then be written to disk as a raw digital audio data stream, or, more commonly, stored using an audio file format.
One can view a non moving graphic both online and on paper, but one can not view a moving graphic as it is on paper
CoffeeCup Free HTML Editor

Apple Pages- Mac
Applix Word - Linux
Atlantis Word Processor - Windows
Gobe Productive Word Processor
Kingsoft Writer - Windows and Linux
Lotus Word Pro - Windows
Mariner Write - Mac
Mathematica - technical and scientific word processing
Mellel - Mac
Microsoft Word - Windows and Mac
Microsoft Works Word Processor
QuickOffice - Android, iOS, Symbian
Apache OpenOffice Writer
Calligra Words
Celtx (screenplay and media production)
GNU TeXmacs
LibreOffice Writer
Analog Data-magnetic tape

3GP – the most common video format for cell phones
GIF – Animated GIF (simple animation; until recently often avoided because of patent problems)
M1V MPEG-1 – Video
M2V MPEG-2 – Video
SOL – Adobe Flash shared object ("Flash cookie")
M4V – (file format for videos for iPods and PlayStation Portables developed by Apple)
MPEG (.mpeg, .mpg, .mpe)
MPEG-4 Part 14, shortened "MP4" – multimedia container (most often used for Sony's PlayStation Portable and Apple's iPod)

8SVX - Commodore-Amiga 8-bit sound (usually in an IFF container)
16SVX - Commodore-Amiga 16-bit sound (usually in an IFF container)
AIFF (.aif, .aifc, .aiff) – Audio Interchange File Format
BWF – Broadcast Wave Format (BWF), an extension of WAVE
RAW – raw samples without any header or sync
WAV – Microsoft Wave
FLAC – (free lossless codec of the Ogg project)
LA – Lossless Audio (.la)
PAC – LPAC (.pac)
M4A – Apple Lossless (M4A)
APE – Monkey's Audio (APE)
OptimFROG (.ofr, .ofs, .off)
RKA – RKAU (.rka)
SHN – Shorten (SHN)
TTA – free lossless audio codec (True Audio)
WV – WavPack (.wv)
WMA – Windows Media Audio 9 Lossless (WMA)
BRSTM – Binary Revolution Stream (.brstm)[5]
AST – Audio Stream (.ast)[6]

Raster Graphics
ASE – Adobe Swatch
GIF – CompuServe's Graphics Interchange Format
JPEG, JFIF (.jpg or .jpeg) – Joint Photographic Experts Group – a lossy image format widely used to display photographic images.
JP2 – JPEG2000
JPS – JPEG Stereo
PC1 – Low resolution, compressed Degas picture file
PC2 – Medium resolution, compressed Degas picture file
PC3 – High resolution, compressed Degas picture file
PCF – Pixel Coordination Format
PI1 – Low resolution, uncompressed Degas picture file
Vector graphics[edit]
Vector graphics use geometric primitives such as points, lines, curves, and polygons to represent images.
3DV – 3-D wireframe graphics by Oscar Garcia
AMF – Additive Manufacturing File Format
AWG – Ability Draw
3-D Graphics
3DM – OpenNURBS Initiative 3D Model (used by Rhinoceros 3D) (.3dm)
3DS – Legacy 3D Studio Model (.3ds)
ABC – Alembic (Computer Graphics)
AC – AC3D Model (.ac)
AMF – Additive Manufacturing File Format
AN8 – Anim8or Model (.an8)
B3D – Blitz3D Model (.b3d)
BLEND – Blender (.blend)
BLOCK – Blender encrypted blend files (.block)
C4D – Cinema 4D (.c4d)
Cal3D – Cal3D (.cal3d)
Snap To Grid
Anytime the grid is enabled in Page Settings, Snap To Grid is enforced on The Tabletop. Snapping affects all transformations that can be made on your Background Images as well as Tokens. Hold down the ALT Key while moving, rotating or scaling to ignore snapping.

If you don't like how you transformed your images, using the keyboard shortcut Ctrl/Cmd Key + Z will undo the last action.

Movement is achieved by clicking and dragging anywhere inside the selected image. It's best to avoid clicking the outer edges of an image for movement. Doing this might trigger the scaling transformation instead. When Snap to Grid is enabled, an image snaps to the bottom right corner of a grid square and snaps to the center of a grid hex.

When selected, a handle will stick out from the top of the image. This is the rotation gizmo. Click the end of the handle for rotation. While Snap To Grid is enabled, an image rotates in increments of 45° for square grids and 30° for hex grids.

Flip Horizontal/Vertical
These two menu options will flip the graphic horizontally or vertically.

As Drawing
The "As Drawing" menu option changes a graphic on the Token & Objects and GM layers by removing the suite of Token features normally attributed to it. It will ignore grid snapping in this mode and can also be selected along with other hand drawings by holding down the Alt key while selecting items on the Tabletop.

Set Dimensions
If there's a specific pixel/unit height and width you want to force a particular graphic to conform, selecting "Set Dimensions" brings up a new window where you can input the desired dimensions.

ex: .gif
Manipulating graphics
Manipulating graphics
Scale (GM Exclusive)
The scale gizmo is the bounding box that surrounds a selected image. If you click and drag the nodes on either the top or the bottom of the bounding box, you will vertically scale the image. The nodes on either side (left and right) of the image will horizontally scale it. Clicking and dragging any of the corner nodes will scale both horizontally and vertically simultaneously. Images scale from the center of the image. While
"Snap To Grid"
is enabled, an image will scale to the nearest grid in either direction.

Advanced Features
You can access the advance features of an image by right clicking on it to bring a
Graphics Menu
and selecting

Grouping and Ungrouping
When multiple graphics are selected, right clicking on one of the graphics and selecting the
option will bind the graphics together, turning them into a one single movable block. To ungroup the graphics, you need to right click on the grouped graphics and select
A web page consists of different layers. Each element of a web page is placed on a seperate layer.

They are used to select the positions of all the texts, graphics and etc on a web page.

Inline Graphics:
Images that are “in line” with the text. They are treated as part of a text in a document.

Floating Graphics:
Images that are independent from the text. They are not treated as part of a text.

Inline & Floating Graphics
Applications/Tools Used To Make
Interactive Multimedia
What is interactive multimedia?
Any type of media on an electronic platform that allows the user/viewer to control, improve or change the media. Interactive multimedia is the videos you watch, the audio you listen to, the games you play, etc…

Applications/Tools Used To Make
Interactive Multimedia
What Applications Are Used?
Adobe Programs are used such as Adobe Flash, Adobe Dreamweaver, etc…
Tools like webcams, microphones and programs like GarageBand, Fruity Loops, Final Cut, Moviemaker, etc.. are used to create or edit interactive multimedia.

Scripting Languages
Scripting is used by coders to create web pages. It is the platform where you’re able to write codes to design what your web page wants to look like (ex: Inserting a video, providing inner and outer links, including graphics and texts, etc..)

Some scripting languages are: HTML, Javascript, Python, Ruby, etc…

Absolute Link
– Includes the domain name of the website
Ex: http://www.website.com/graphics/image.png

Relative Link
Ex: /graphics/image.png

Since there’s no domain name included in the relative link, they can only lead to a relative page within the website they’re inserted in. So relative links are only used as
internal links
, and to provide a link to an outside website, you need to use an absolute link.

The links within a website that takes the user to another webpage that is in the same website the link is within.
These are outer links that can take the user to other webpages of other websites as well. They are not limited to only the website the link is within, they can also link to outer websites.
HTML Tables
Tables are defined with the

A table is divided into rows with the

A row is divided into data cells with the

A row can also be divided into headings with the

elements are the data containers in the table.

elements can contain all sorts of HTML elements like text, images, lists, other tables, etc..

The width of a table can be defined using CSS.
Cascading Style Sheets is a style sheet language used to describe the look and format of a document written in a markup language.
Referencing and Reviewing
Tools that are pre-installed in softwares such as WordCount, Spellcheck, etc.. help us to review our work and spot our mistakes. With the help of them, we can improve what we've done wrong.
"Absolute vs. Relative Paths/Links | CoffeeCup Software." CoffeeCup Software. N.p., n.d. Web. 10 Mar. 2014.
"Cascading Style Sheets." Wikipedia. Wikimedia Foundation, 03 Oct. 2014. Web. 10 Mar. 2014.
"DeviantART: Outgoing Link." DeviantART: Outgoing Link. N.p., n.d. Web. 10 Mar. 2014.
"Frozen - Reindeer(s) Are Better Than People [Official Clip]." YouTube. YouTube, 23 Dec. 2013. Web. 10 Mar. 2014.
"Group Objects in PPT." Group Objects in PPT. N.p., n.d. Web. 10 Mar. 2014.
"Grouping Slide Objects." Grouping Slide Objects. N.p., n.d. Web. 10 Mar. 2014.
"How to Wrap Text around the Visible Area of a Graphic." How to Wrap Text around the Visible Area of a Graphic. N.p., n.d. Web. 10 Mar. 2014.
"I Am Too Fat Autocorrect." Owned By AutoCorrect. N.p., n.d. Web. 10 Mar. 2014.
"Inline versus Floating Graphics." Inline versus Floating Graphics. N.p., n.d. Web. 10 Mar. 2014.
"Interactive Multimedia." Encyclopedia Britannica. N.p., n.d. Web. 03 Mar. 2014.
"Services." Interactive Media Web Site Design & Development. N.p., n.d. Web. 03 Mar. 2014.
"Scripting Language." Wikipedia. Wikimedia Foundation, 28 Feb. 2014. Web. 03 Mar. 2014.
“Using Graphics In Microsoft Word”, Docstoc.com. N.p., n.d. Web. 03 Mar. 2014.
"Word Processing." Word Processing. N.p., n.d. Web. 24 Feb. 2014. <http://www.webopedia.com/TERM/W/word_processing.html>
"Wordsite.com." Wordsite.com. N.p., n.d. Web. 10 Mar. 2014.

Full transcript