אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

1

מבוא לתיכנות ופיתוח במארג

מולטימדיה

אודי הלרudi@eitan.ac.il

ד"ר אריאל פרנקariel@cs.biu.ac.il

יולי2006

http://eden.eitan.ac.il

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

2

מולטימדיהעל קצה המזלג

בפרק זה נסקור בקצרה את השימוש של מולטימדיה בבואנו לפתחאתרים

אנו נסתמך על מושגים בסיסיים,ביניהם

MIME –הגדרת סוג התוכן של קובץ(במקור מיועד לדוא"ל)

Codec -איפנון(הצפנה/פענוח/דחיסה)של אודיו/וידאו.לכל סוג של שיטתדחיסה(mp3למשל)ישcodecמשלו.

מיטוב תמונות–שיטות לביצוע אופטימיזציה(הקטנת משקלו של קובץ)

מומלץ ללמוד ולקבל מושג מעמיק יותר באתר מולטימדיה של איתן.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

3

מולטימדיההגדרת המושג"מולטימדיה"

בצורה המופשטת,מולטימדיה הינה השימוש במחשבלשילוב של טקסט,תמונה,וידאו,קול,הנפשה וכיו"ב.

בבסיס הרעיון–העצמת חווית המשתמש ויכולות העברתהמידע בין המחשב למשתמש.

בני אדם הינם יצורים תקשורתיים בבסיסם ומולטימדיהעונה על צורך/משאב זה.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

4

מולטימדיהמולטימדיה ואינטרנט(א)

אינטרנט הינה סביבת מולטימדיה.

הדפדפן הגרפי מוזייק שפותח ב-1993,פרץ את עולם האינטרנטוהביא אותו למיליוני משתמשים.לפניו,האינטרנט היה טקסטואליוקשה לשימוש.

כל הדפדפנים המודרניים(אקספלורר,נטסקייפ וכיו"ב)מבוססים עלמוזייק.

כיום,אנו יכולים לשלב בדפדפן וידיאו(Real, Media Playerוכיו"ב),אודיו(האזנה לתחנות רדיו,קבצי מוזיקה בתצורות שונות דוגמתMp3),הנפשה וגרפיקה באיכות גבוהה(Flash, SVGוכיו"ב),ייצוגטקסט וגרפיקה בתצורות שונות(הודות ל-XMLו-CSS)ועוד.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

5

מולטימדיהמולטימדיה ואינטרנט(ב)

קצב התפתחות האינטרנט ועולם המולטימדיה משולבים יד ביד.

עשרות טכנולוגיות בתחום המולטימדיה פותחו בשנים האחרונותוהגבירו את הצורך בפס רחב.

שפות דוגמתSMILו-TIME (ע"ע)פותחו לשם שילוב וסנכרון ביןמרכיבי טקסט,אודיו,וידיאו ומצגות.

חברות מסדי נתונים מפתחות יישומים  כדי לתמוך במיוחד באחסוןוקיטלוג של קבצי מולטימדיה.

עולם התקשורת התאית(סלולרי),הצילום הדיגיטלי והסורקיםלמיניהם,מביאים לאינטרנט ולקשר בין בני-אדם יכולות חדשות.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

6

מולטימדיהפלאש–מבוא והסטוריה

טכנולוגיה ושפת גרפיקה וקטורית.

פותחה במקור ע"י חברתFutureWaveונקראהFutureSplash Animator.

נרכשה בשנת1996 (גרסה1)ע"י מקרומדיהונהפכה להיות הדה-פאקטו של ההנפשהבאינטרנט.

בשנת2005מוזגה מקרומדיה לתוך ענקיתהמדיהAdobe,בעיקר בגלל פלאש.

יתרונה הגדול– cross browser andcross platformאמיתית.עובדת על כלדפדפן ועל כל מערכת הפעלה,ובכל מקוםנראית אותו דבר.

החל מגרסאות4.0של הדפדפנים,פלאש הואמרכיב בהתקנה.

מותקנת בלמעלה מ-98אחוז מכלל משתמשיהאינטרנט.

FlashLiteהיא גרסה של פלאש למכשיריקצה ניידים(טלפונים סלולריים/חכמים,כף-ידוכיו"ב)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

7

מולטימדיהפלאש-פיתוח

פלאש הואGUI,היכול לקבל נתונים ולהבנות כולו ממסדי נתונים בצד השרת(XML),להתממשק עם שפות תיכנות אחרות(ג'אווה,  PHP,דוט-נט ועוד)

לפלאש מגוון רחב מאוד של כלי פיתוח ושרתים

החל מכלי הפיתוח המרכזי(IDE)

ועד קוראי מסמכים,נגני וידאו ואודיו,שרתי קומיוניקציה ושידור וידאו,המרת מסמכים,יצירתמצגות ועוד.

לאמיתו של דבר,כיום פלאש היא אחת מן הטכנולוגיות הכי רב-תחומיות,ואין אתר שאינו משלבפלאש בצורה זו או אחרת.

יש לשים לב שלא כל אחד יכול לראות פלאש,מסיבות של אבטחה,חסימת פרסומות ועוד.

שימו לב כיצד מאתרים תמיכה בנגן הפלאש ומספקים למשתמש חלופות.

בעיות עברית

פלאש אינה תומכת בעברית ויזואלית(חרף מחאות רבות בשנים האחרונות)

יש צורך לבצע הפיכת עברית(במקום פלאש נכתוב שאלפ).

ישנם ישומים לפתרון הבעיה:תוסף מבית היבואן בארץ ופתרון פרטי בשםR4F (ZIP)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

8

מולטימדיהפלאש- SWF

שפת אנמציה וקטורית

SWFאינו ראשי תיבות,אבל יש כאלו שמנסים(כמוsmall web formatאוshockwave flash)

מורכבת מעצמים היכולים להיות צורות,קווים,קבציbitmapכתמונות,קבצי מוזיקה כ-Mp3

אלו אנלוגים לשחקנים,סצנות ומוזיקת רקע בסרטים

ניתן לתאר אתSWFכבמאי(או כותב התסריט לסרט)הקובע ושולט כיצד כל אלו יתפקדובסרט

כל הסרט מחולק לפריימים.כל פריים מחולק לתגים

SWFתומך בסוגים שונים של תגים הקובעים ומגדירים את התנהגות האובייקטים

כן תומך במספר סוגי ייצוג מידע(data-types)כתמונות וקבצי מוזיקה.

SWFתוכנן במיוחד עבור האינטרנט(כיווץ(zlib),העברה ברשת, unicode,שילובבדפדפן ותצוגה)

תיכנות ושליטה על עצמים ניתן תוך שימוש ב-ActionScript (ע"ע פרק שפות תיכנות).

AVM – ActionScript Virtual Machine (בדומה לJVMשל ג'אווה)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

9

מולטימדיהפלאש– SWF (המשך)

נגןSWF (התוסף שמותקן בדפדפן, Flash player)

תוכנת התרגום/מכונה וירטואלית(פלאש היא שפת תרגום ולא הידור,ראו פרק שפות תיכנות)

קובץ ה-SWFיורד מהשרת ונטען לזכרון.

הנגן מסוגל להתחיל את העבודה ישר עם התחלת ההורדה(הדמיית זרימה אוpseudostreaming)

קורא פריים אחרי פריים ומבצע את התגיות

בעת יצירתSWF,פונטים בשימוש משולבים בקובץ

זה מאפשר תאימות ושימוש בכל פלטפורמה,ללא קשר לפונטים מותקנים ותמיכת מערכתהפעלה

בשנת1998פורסם התיאור של שפתSWFעל-ידי מקרומדיה,ונפתח לציבור.

FLA –קבצי מקור של סביבת הפיתוח הגרפית(Flash MX\8)מבית אדובי(מקרומדיה)

אלו אינם קבצי טקסט ומכילים את המידע הדרוש(קבצי הפרוייקט)לצורך הידור לשפתהבייטקודSWF.

FLAאינו פתוח ומשמש אך ורק את תוכנות אדובי.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

10

מולטימדיהפלאש– SWF (קישורים)

Inside FlashMX (ppt, very indepth to SWF)

Alexis' SWF Reference

Comparing .SWF and .SVG file format specifications

SWF decompiler

תוכנות היודעות לבצע הינדוס אחורה– Reverese engineering

נא להשתמש לצרכי לימוד בלבד!

Eltima Flash Decompiler

Sothink SWF Decompiler

Flasm (fla debugger, see flare also)

Ming - a SWF output library and PHP module

SWF Scripting and Library Project

Swfdec library for rendering Flash

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

11

מולטימדיהפלאש– SWF (כלים)

Flash stand-alone player

Gnash - GNU Flash movie player

SWF Source - Cross-Platform Flash SDK

Flirt - open source extensible Flash runtime

JSwiff - Java framework for Flash

SWF Tools

JGenerator

DrawSWF (Java app to creat SWF)

swfShrink

Flash Optimizer

NeoSwiff - Flash Applications in C#

Flash Control for ASP.NET 2.0

JavaSWF2

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

12

מולטימדיהפלאש–אתרים נבחרים ללימוד

ראו פרק טכניקות ושפות תיכנות– ActionScriptלמידע נוסף

קורס איתן–פלאש במעבדה

FlashOO –קמפוס הפלאש הישראלי-פורומים

Flash Kit

http://www.ifbin.com/

תוכנה להתקנה ובה מאגר קודים לשימוש חופשי

Open Source Flash projects

The Flame Project

QuickSoft –נציגת אדובי בישראל

פורום פלאש בתפוז

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

13

מולטימדיהמיקרוסופטSilverlight [1]

טכנולוגיה מתחרה לפלאש של אדובי

מבוססת על גרפיקה ווקטורית(במקום פיקסלית)

מתבססת עלXAML

דומה אך שונה מ- SVG (בעצם,הגרסה של מיקרוסופט)

שימוש בג'אווה סקריפט לגישה לעצמיDOMוהגבה לארועים שונים בדפדפן

מסוגלת להגדיר גם אנמציות וגם גרפיקה(StoryBoards)

תמיכה בסטים של פקדים

TextBoxes, Buttons, DropDownLists, Calendars, DataGridsוכיו"ב

פיתוח ישומיsilverlightבסביבת.Net

מאפשר גמישות ופיתוח בשפות ריצה דינמיות דוגמתIronPython, IronRubyועוד

יכול לשלב קבצי וידאוWMV, mpegו-AVIכתחליף ל-Windowsmedia playerבצד הלקוח

בכך לשפר את הנגישות והשילוב בתוך דפי אינטרנט.

במקרה כזה,בצד השרת סילבלייט עובדת מולWindows media server

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

14

מולטימדיהמיקרוסופטSilverlight [דוגמאות]

דוגמא לקודXAML:

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="455" Height="349">

<TextBlock Text="Hello World"/>

</Canvas>

דוגמא לשילובSilverlightבתוך קודHTML:

...

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript" src="CreateSilverlight.js"></script>

...

<div style="position:absolute; left:100px; top:100px;" id="SilverlightControlHost">

<script type="text/javascript">

createSilverlight();

</script>

</div>

...

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

15

מולטימדיהמיקרוסופטSilverlight [3]

במקור,חלק מפרוייקטAvalon (Windows PresentationFoundation/Everywhere)שמקורו בויסטה.

הנגן הינו תוסף(כמו פלאש)במשקל2MB

זמין למערכות הפעלה חלונות(ויסטה ו-XPעםSP2)ו-OS Xשל אפל

דפדפנים סאפרי,פיירפוקס ואקספלורר בלבד.

לפרטים נוספים והורדה,פנו לאתר הבית בכתובת

http://silverlight.net/

ראו גם גרסה ללינוקס כחלק מפרוייקט מונו

כטריוויה מותר לציין שמיקרוסופט ניסתה בשנת1998להציגטכנולוגיה מתחרה לפלאש בשםLiquid Motion

התבססה על ג'אווה,אך כשלה

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

16

מולטימדיהSilverlight vs. Flash

אז מי יותר טוב?

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

17

מולטימדיהנגנים-נגן המדיה של חלונות

עד שמיקרוסופט השיקה את נגן המדיה שלה(גרסה4בשנת1999),חברתReal,ממציאת המדיה הזורמת(StreamingMedia)הייתה השולטת הבלתי מעורערת.

בזכות קלות השימוש והשילוב בדפדפן אקספלורר(השולט בשוק),עובדת היותו כלי פיתוח ותכנות–הניתן בחינם כמו גם התמיכההנרחבת,הביאה לשליטה של מיקרוסופט בשוק זה.

Windows Media Playerתומך בכל תצורות המולטימדיה הקיימותבשוק,בנוסף לתצורות הפנימיות שלו(wma\wmv\asf).

ראו מרכז יידע וסיוע של מיקרוסופט וכן אתר תוספות.

ראו בהמשך על טכנולוגייתSilverlight.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

18

מולטימדיהנגנים-נגן המדיה של חלונות(קבצים)

WMA (Windows Media Audio).סוגMIME audio/x-ms-wma .קובץ המכיל אודיו בלבד.

WMV (Windows Media Video).סוגMIME video/x-ms-wmv.קובץ המכיל וידאו ואודיו.

ASF (Advanced Streaming Format(.סוגMIME video/x-ms-asf.סוג מיוחד של קובץ התומך בפרוטוקולים רבים ותמיכה ברשתותתקשורת להעברה וסינכרון של וידאו/אודיו.

ASX\WAX\WVXהן קובצי הוראות מבוססותXMLהקוראות לקבציה-ASF\WMA\WMV.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

19

מולטימדיהנגנים- QuickTime

לא רק נגן אלא תשתית מולטימדיה של חברת אפל(ipod,מקינטוש)

מסוגל לנגן ולהציג מגוון רחב מאוד של תצורות קבצים,כולל פלאש,טקסט,תמונות מסוגים רבים,סרטים,מוזיקה,אנמציות  וכן צורות מסויימות של תמונותהידודיות(אינטראקטיביות)פנורמיות.

גרסאות גם לחלונות וגם למקינטוש(מערכת הפעלהOS X)

היה בין הראשונים לתמוך בתצורתmpegו-mpeg4

תצורות קבצים קניניות: qt, mov

גרסה רגיל בחינם,גרסתProבתשלום הכוללת קידוד סרטים ל-mpeg4 (גרסהH.264של אפל),עריכה של סרטים,מוזיקה,צפיה במסך מלא ועוד

ידוע באיכותו הגבוהה(יש שמחשיבים אותו לנגן האיכותי ביותר)ומשמש כנגןהרשמי למספר חברות סרטים להפצת גרסאות-קדם(טריילרים)

ראו:אתר רשמי,הוספת תמיכה ב-Ogg Vorbis,אתר מפתחים רשמי

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

20

מולטימדיהנגנים- Real

אחד מן הנגנים הראשונים(הוצג ב-1985)והראשון שתמך וקידם את נושא המדיההזורמת.

מבוסס על קוד פתוח(helix)הכוללת נגן ושרת מדיה זורמת.

תמיכה נרחבת במערכות הפעלה שונות(יוניקס,לינוקס,מקינטוש,חלונות,סלולרי)

מעבר לתמיכה בתצורות הקניינות(rm, rv)

הנגן תומך בעשרות תצורות אחרות,כוללwmv\wmaבגרסת הלינוקס

עשרות ויותר(אין מספר מדוייק)של הרחבות ותוספות ברשת,עקב היותו בעל תשתית קודפתוח,לניגון תצורות אחרות.

מסוגל לנגן קבצי מדיה של חלונות ומקינטוש אם אותם נגנים גם כן מותקנים על המחשב(הואצריך את ה-codecשל תצורות קבצי המדיה)

Envivioפיתחה בעבר תוסף המאפשר לנגןmpeg-4 (כיום זה חלק אינטגרלי מהנגן)

Realמקדמת מאוד את גרסת ה-Plusבתשלום הכוללת מגוון רחב של גישה לתכניםבידוריים.

זאת בנוסף לגרסת החינם הפתוחה.

ראו אתר תמיכה.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

21

מולטימדיהנגנים-עוד

ישנם שני נגנים נפוצים לסביבת לינוקס:

http://www.mplayerhq.hu

מנגן את כל סוגי המוזיקה והוידאו הנפוצים,בכללםasf\wmv\wma

יכול נגן גםmov, mp4.

כעקרון יכול לנגן הכל(ארכיטקטורה פתוחה),אבל תלוי האם מותקן על לינוקס או עלחלונות,ואילו מפרשים(codec)מתקינים.

http://xinehq.de

נגן וידאו בלבד.תומך ב: wmv

נגנים נוספים:

Yahoo Music Jukebox

ראוMedia players download

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

22

מולטימדיהנגנים- Metafile

קובץ בשימוש במדיה זורמת.

מכיל סט הוראות לנגן מסויים(quicktime, ms media player, real playerוכיו"ב)

לקבוע שהנגן המתאים יטען במחשב המשתמש

לאמר לנגן היכן נמצא הקובץ לשדר.

כאשר נמצא בשימוש,אנו קוראים לקובץ זה והוא מכיל את ההוראות לקובץהשידור.

אינו חיוני,ניתן לתת בקוד הוראה ישירה לקובץ הנגן ולא לקרוא לקובץ המטה,זהיעבוד,אך לא תמיד.

על-כן מומלץ להשתמש בסט הוראות כדי להבטיח100אחוז תקינות.

לעיון נוסף: Streaming Media Metafiles: When And How To Use Them

בהמשך הסעיף נדון בהוראות לכל אחד מהנגנים.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

23

מולטימדיהנגנים– Metafile -סוגים

QuickTime .qtl files

<?xml version="1.0">

<?quicktime type="application/x-quicktime-media-link"?>

<embed src=“rtsp://your.qtserver.com/YourStream.mov" />

RealSystem .ram files

rtsp://your.realserver.com/YourStream.rm

Windows Media .asx files

<asx version="3.0">

  <entry>

    <ref href="mms://your.wmserver.com/YourStream.wmv" />

  </entry>

</asx>

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

24

מולטימדיהנגנים– Metafile -פרמטרים

QuickTime

Use in <embed> tag

loop, autoplay, fullscreen, controller, quitwhendone (= true/false)

qtnext (for playlists)

RealSystem .ram files

Place after “?” following URL; separate with “&”

title, author, copyright, start, end

Many others for dictating look of player

Windows Media .asx files

title, author, copyright use their own tags

Place others in name-value pairs in <param> tag

starttime, duration, repeat

Many others

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

25

מולטימדיהנגנים– Metafile -פרמטרים

QuickTime .qtl files

<?xml version="1.0">

<?quicktime type="application/x-quicktime-media-link"?>

<embed src=“rtsp://your.qtserver.com/YourStream.mov"

autoplay=“true” fullscreen=“true” />

RealSystem .ram files

rtsp://your.realserver.com/YourStream.rm?start=:30&end=“2:21”

Windows Media .asx files

<asx version="3.0">

  <entry>

    <ref href="mms://your.wmserver.com/YourStream.wmv" />

    <param name=“starttime” value=“30” />

    <title>My Stream</title>

  </entry>

</asx>

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

26

מולטימדיהנגנים-תיכנות ושילוב

שילוב אודיו ווידאו באתר אינטרנט יכול להתבצע בשתי דרכים עקריות:

המשתמש לוחץ על קישור ונפתחת לו התוכנה התומכת באותה תצורה(wmv,mp3, movוכיו"ב)המותקנת על המחשב.

שיטה יותר אלגנטית ומקובלת באתרים מקצועיים:שילוב הנגן בתוך דף האינטרנטואפילו בנית תפריט נגינה עצמאי תוך שימוש בג'אווה סקריפט.

כפי שכבר ציינו–השיטה הטובה ביותר היא להמיר את כל הסרטים והמוזיקהלפלאש(FLV\SWF),אלא ששיטה זו מצריכה משאבים.

הבעיה בשילוב הנגן בקוד הוא לבחור איזה נגן צריך.

לא לכל המשתמשים בכל מערכת הפעלה יש את הנגן המבוקש

הנפוץ ביותר הוא נגן המדיה של מיקרוסופט,אך הוא מוגבל לחלונות ולא יכול לנגןאת כל הקבצים(ראו טבלה  בהמשך)

בדף הבא נסקור אפשרויות להתגבר על בעיה זו.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

27

מולטימדיהנגנים-תיכנות ושילוב-זיהוי נגן מותקן

אדובי אקרובט(PDF),ג'אווה ונגני מוזיקה ומולטימדיה שוניםיודעים להשתלב בדפדפן(browser plug-in).

ניתן באמצעות ג'אווה סקריפט לזהות מה מותקן במחשב ובדרך זולדעת מה ניתן להפעיל/לשדר למשתמש.

נציין מספר אתרים מהם ניתן ללמוד ולקחת קוד:

Cut & Paste Detect Plugin

Plug-In detection (מאתר המפתחים של אפל,מומלץ ללמוד)

Plug-In Detection with JavaScript (קצת ישן אבל שווה לבדוק)

Detect and Embed Browser Plugins with Javascript

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

28

מולטימדיהנגנים–תיכנות ושילוב-תגיות

דפדפנים מבוססים על אקספלורר משתמשים בתגית<object>

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

     codebase="http://www.apple.com/qtactivex/qtplugin.cab“

     width="160" height="136" >

     <param name="src" value="YourRefMovie.mov">

</object>

דפדפנים מבוססי מוזילה(פיירפוקס לדוגמא)משתמשים בתגית<embed>

<embed type="video/quicktime” src="YourRefMovie.mov"

     pluginspage="http://www.apple.com/quicktime/download/“

     width=“160” height=“136”>

</embed>

ניתן להשתמש בשניהם לתמיכה נרחבת(בערך)כפי שנראה בהמשך,תגיתמשולבת בתוך תגית.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

29

מולטימדיהנגנים–שילוב ותיכנות- Quicktime

נשתמש בשתי התגיות שציינו לתמיכתcross browser

אקספלורר מתעלם מהתגית<embed>

מוזילה/פייפורס מתעלם מהתגית<object>

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

     codebase="http://www.apple.com/qtactivex/qtplugin.cab“

     width="160" height="136" >

     <param name="src" value="YourRefMovie.mov">

     <embed type="video/quicktime” src="YourRefMovie.mov"

       pluginspage="http://www.apple.com/quicktime/download/“

       width="160" height="136" >

     </embed>

</object>

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

30

מולטימדיהנגנים–שילוב ותיכנות- RealPlayer

נגנים בנויים משני אזורים:הסרט והפקדים.

בנגןRealזה מופרד וקוראים לכל מרכיב בניפרד

"ImageWindow" –אזור הסרט

"All" –אזור הפקדים(יכול גם להיות משולב בניפרד במקוםאחר בדף,למשל,או בכלל לא)

הפרמטרconsoleקושר בין שניהם(ראו בדף הבאכיצד זה עובד באמצעות השם שניתן לכל אזור).

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

31

מולטימדיהנגנים–שילוב ותיכנות- RealPlayer

<!– code for Image Window -->

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"

     width="240" height="180">

    <param NAME="controls" VALUE="ImageWindow" />

    <param NAME="console" VALUE="one" />

    <param NAME="src" VALUE="media/MyMovie_240x180.rpm"/>

    <embed type=“x-pn-realaudioplugin”

         src="media/MyMovie_240x180.rpm" width="240"

         height="180" controls="ImageWindow" console="one" />

</object>

<!-- code for controls -->

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"

     width="375" height="100">

    <param NAME="controls" VALUE="All"/>

    <param NAME="console" VALUE="one"/>

    <embed src="media/MyMovie_240x180.rpm" width="375"

         height="100" controls="All" console="one" />

</object>

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

32

מולטימדיהנגנים–שילוב ותיכנות– Windows media

מיקרוסופט לא הייתה יציבה בתמיכתה בדפדפן נטסקייפ

זאת מכיוון שבהתחלה נטסקייפ/מוזילה לא תמכו בתוסף שלActiveXהדרוש לשילוב הנגן בדף ה-HTML.

כיום מיקרוסופט תומכת אבל גם לפיירפוקס התווספה תמיכה ב-ActiveXהניתנת להתקנה(התוסף אינו מותקן אוטומטית מסיבות אבטחה).

לאחרונה פיתחה מיקרוסופט תוסף רשמי כחלק ממעבדתPort25

אנו נשתמש בשתי התגיות<object>ו- <embed>

חשוב מאוד לשים לב שנגן המדיה משלב את הפקדים שלו(אלאאם אומרים לו לא ומשתמשים בג'אווה סקריפט לשליטה)

כשמחשבים את גודל הנגן,צריך להוסיף אח"כ את גובה אזור הפקדים(64pxנכון לגרסה9)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

33

מולטימדיהנגנים–שילוב ותיכנות– Windows media

<object id="WMTPlayer" width="240" height="244"

      classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

      <param name="url" value="media/wmv9.asx"/>

      <embed type="application/x-mplayer2"

         src="media/wmv9.asx" width="240" height="226">

     </embed>

   </object>

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

34

מולטימדיהנגנים–שילוב ותיכנות–טיפים

לשמור על פשטות הקוד.

אל תשכחו להשאיר מקום לאזור הפקדים(בנוסף לציון גודלהתמונה)

QuickTime – 16פיקסלים

RealPlayer – 36פיקסלים לפקדים, 30-55למידע נוסף

נגן המדיה של חלונות– 64פיקסלים(נכון לגרסה9)

אל תשכחו להשתמש בפרמטריםcodebaseו/אוpluginspageעל-מנת שמשתמשים יוכלו להתקין את התוסףלנגן אם הוא לא מותקן.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

35

מולטימדיהנגנים–שילוב ותיכנות–ג'אווה סקריפט

תיכנות מתקדם של נגנים מאפשר לוותר על הבקרים שמשתלביםאוטומטית,ולבנות פקדים משלכם,עם גרפיקה וכיו"ב.

יש לשים לב שלכל נגן,בגרסאות שונות,על פני מערכות הפעלהשונות ודפדפנים שונים–יש צורת עבודה וגישה שונה לתיכנות.

דוגמאות לנגנים השונים:

Quicktime Javascript Examples

Spicing-Up RealPlayer with JavaScript

לנגן המדיה של חלונות ועוד דוגמאות ראו בדף הבא–קישורים.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

36

מולטימדיהנגנים–שילוב–קישורים

HTML Code for Embedding Windows Media Content

How to embed Windows Media Player in HTMLdocument

Real Player > Code Samples > Web Page Embedding

Including QuickTime In A Web Page

Embedding Windows Media Player 9 Series (+)

Build a Simple MP3 Player for Your Site

Add Voice to your Site:The html EMBED Tag

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

37

מולטימדיהמדיה זורמת

Streaming mediaהיא שיטה להעברת מדיה(אודיו ווידאו)באמתרשת האינטרנט

בעיקר מייצגת את שיטת העברת המדיה מהשרת לנגן  ולא את סוגהמדיה עצמה.

בשיטה זו אנו מנגנים תוך כדי שידור ולא מורידים(download)

למרות צפיות גולשים–אין פה איכותDVD (דחיסה גדולה יותר,הפרעות שידור,מגבלות רוחב פס וכיו"ב)

השיטה יכולה להיות שידור חיי(liveמתחנות רדיו/טלוויזיה)אושידור על-פי דרישה(Video on demand)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

38

מולטימדיהמדיה זורמת-הבדלים

מדיה זורמת:

שידור וידאו בזמן אמת

לפי דרישה(VOD)או חיי(live)

לא מאוחסן במחשב מקומי

 RTSP\MMS\RTP\RTCP-Streaming server

ניתן לדלג לכל מקטע בסרט

הפרוטוקולUDPמאפשרשרידות תקלות והמשך נגינה.

הורדה(download)

כל הסרט חייב לרדת(נגניםמודרנים יודעים להתחיל לנגן אתהסרט אחרי שמקצתו כבר הורד– progressivedownloading\playback)

אחסון במחשב מקומי

HTTP\TCP – Web server

אין אפשרות לדלג למקטעמסויים–צריך לחכות שיורד

אם יש תקלה–הסרט"נתקע"

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

39

מולטימדיהמדיה זורמת-פרוטוקולים

הפרוטוקול קובע כיצד רכיבים(תוכנה וחומרה)מתקשרים(מעבירים מידעביניהם)

UDP - User Datagram Protocol

פרוטוקול בסיסי ברשת האינטרנט(IP).

מיועד בעיקר ליישומיVoIP,מדיה זורמת,שירות ה-DNS ,ביטרונט למשל.

בגדול–עבור יישומים הדורשים פחות אמינות בבדיקת שגיאות(TCPמיועד לכך)ויותר כמות ומהירות,העיקר שהמסר יגיע

  RTSP - Real Time Streaming Protocol

פותח ע"יIEEEבשנת1998ומשמש תוכנות לקוח(נגנים)בהעברת פקודות לשרתהמדיה הזורמת.

בדומה לפקודות הקיימות במכשירי וידאו/DVD –נגן(Play),אחורה,קדימה,הקפאה,עצירה(TEARDOWN),הקלטה.

RTSP - RTSPUדרךUDP (הכי טוב)

RTSP - RTSPTדרךTCP  (במקרה ו-UDPחסום ב-Firewallאו לא זמין)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

40

מולטימדיהמדיה זורמת-פרוטוקולים

MMS - Microsoft Media Services

פרוטוקול בשימוש בלעדי ע"י שרת המדיה של מיקרוסופט.

יודע לבחור אוטומטית ביןTCPל-UDP (לייתר הבנה ביןhttp://לביןrtsp://)

MMS - MMSUבאמעותUDP (הכי טוב)

MMS - MMSTבאמצעותTCP (במקרה ו-UDPחסום ב-Firewallאו לא זמין)

הוסר החל מגרסה9.5של שרת המדיה(longhorn\vista server 2007)

עדיין יש לרשום ב-URLאת הכתובתmms://siteurl/file.wmv-asfלמה שנקראprotocol rollover

ראו תמיכת מיקרוסופט–שאלות ותשובות.

RTP - Real-time Transport Protocol

פרוטוקול בסיסי בהעברת קול ותמונה על גבי רשתותIP (אינטרנט)

VoIPמבוסס עליו כמו גם נושא המדיה הזורמת וועידות חוזי(videoconference)

HTTP/FTPהם פרוטוקולים שתוכננו קודם להוריד את התוכן למחשב המקומי ואז"לנגן"אותו

RTPתוכנן ישר"לנגן"את התוכן בזמן אמת,תוך כדי שידור(מכאן מגיע ה-Real Timeשלו)

ראו גם פרוטוקולSIP

RTCP - Real time control protocol

פרוטוקול בקרה וויסות רוחב פס,מספר לקוחות לשידור ואיכות שידור עבורRTP

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

41

מולטימדיהמדיה זורמת-מונחים

נפרט טכניקות של בניית מערכי נתבים ושרתים לשידור מדיה זורמת ברשת האינטרנט.

Unicast –שידור ליחיד

שיטת השידור נפוצה וכרגע היחידה הזמינה בישראל

פחות טובה אך בעלת עלויות נמוכות

הפצת אותו שטף(stream)נפרד לכל לקוח(אחד לאחד)

הנתבים ישלחו את אותו שידור לכל הלקוחות כל פעם מחדש.

Multicast –שידור לרבים

שיטת שידור חדשה אך מורכבת ליישום

הפצת אותו שטף לכולם ביחד(אחד לרבים).

הנתבים מעבירים את אותו עותק לכל לקוח בניפרד,אפילו אם העותק נשלח100פעם.

Broadcast

שיטת שידור שכיום נחסמת על-ידי רוב השרתים.

שידור לטווחIP (כאשר לא יודעים את ה–IPשל הלקוחות)

ראו גם: Message Addressing and Transmission Methods

IPTVהוא המונח המודרני לשידורי וידאו על גבי רשת האינטרנט(אינו פרוטוקול אלא כינוילארכיטקטורה המשלבת פרוטוקולים דוגמתmulticast,דחיסה ועוד).

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

42

מולטימדיהמדיה זורמת–מונחים- Codec

מורכב משתי המיליםCompression (דחיסה) +   Decompression (פריסה)

אלגוריתמים(לרוב לכל נגן ישCodec-ים יעודיים עבורו)שמטרתם צמצום קצבי העברת המידע ביןהשרת ללקוח.

זאת באמצעות הקטנת גודל הקובץ ומבנה הנתונים בתוכו.

חיוני מאחר ואנו מוגבלים ברוחב פס(תמיד אין מספיק)עקב מספר המשתמשים בו-זמנית בגישהלשרת המדיה

Mpeg2למשל(שיטת הדחיסה שלDVD)אינו רלוונטי

שעה הקלטה תהיה מעל2ג'גה

WMVלדוגמא יכווץ ל-200מגה בלבד

1סרט ב-Mpeg2 = 10סרטים ב-WMV

פי10יותר לקוחות יוכלו לגשת לשרת המדיה באותו רוחב פס זמין.

Encoder (מקודד) –תוכנה/תהליך להכנת סרט לשידור משרת המדיה הזורמת.

ישנם תוכנות המכילות מקודדים לנגנים שונים או כאלו כמוWindows media encoderשל מיקרוסופטשמכיל רק את הקידוד לתצורות הקבצים ונגן המדיה שלה.

Decoder –כל נגן תומך במספר רב של מפענחים לסוגים שונים שלCodecs.

כלCodecיוצר סוג של תצורת קובץ המשתמש בו.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

43

מולטימדיהמדיה זורמת–סוגי קבצים

קובע כיצד הקובץ בנוי

לרוב לכל חברה יש סוגי קבצים משלה(עםCodecהיוצר אותם)

wmv\asf –מיקרוסופט

rmשלReal

qtשל אפלQuicktime

Flvשל אדובי פלאש.

mp4הינו תקן דחיסה(mpeg4שכבה10ו-14)וסוג קובץ לשידור באינטרנט.

ראו בהמשך יותר מידע אודותיו.

נחשב לתקן הדחיסה המכווץ ביותר,אך דורש משאבים רבים לקידוד.

Quicktimeתומך בו הן בצד הנגן והם בצד השרת

יש לשים לב ביןmp4 "רגיל"לבין הגרסה של אפל שהיאH.264/AVC

מיקרוסופט אינה תומכת בו ובשרת המדיה שלה ניתן לנגן רקwmv\asf

עוד על סוגי קבצים לשידור ו-CodecsראוChoosing a Audio or Video InternetDistribution Format

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

44

מולטימדיהמדיה זורמת–רוחב פס

רוחב פס(bandwidth)הוא המדידה לכמות המידע היכולה להיותמועברת(לרוב בקבלה/download)בזמן אמת.

מדיה זורמת מוגבלת לפי רוחב הפס של הצרכנים(משתמשים)

ככל שיש יותר צרכנים בשרת–כך מתכלה רוחב הפס.

ככל שיש צרכנים עם רוחב פס גבוהה יותר–כך הם מסוגלים לקבל יותרמידע בזמן קצר יותר ולפנות את רוחב הפס של השרת

רוחב הפס הפנוי קובע את איכות השידור(QoS – Quality ofService)

יש חשיבות גוברת והולכת לפיתוחCodecsמתקדמים ושיטותשידור והעברה וגן הרחבת רוחב הפס המוצע ללקוחות ולשרתים.

בתהליך ההפקה חשוב לתכנן כמה צרכנים משוערים ידרשו בו-זמנית את אותו סרט וכמה סה"כ בו-זמנית יגשו לשרת המדיה.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

45

מולטימדיהמדיה זורמת–תהליך

תהליך הכנת מדיה לשידור מורכב מ:

הפקה

הכנה ואיסוף החומרים.

הקלטה,עריכה,דיגיטיליזציה.

קידוד

תלוי בשרת,בחומרה ובקהל המטרה

חברות גדולות(יאהו למשל)מקודדות לרוחבי פס שונים ולנגנים שונים תוךאחזקה של מספר שרתים.

חיבור(Authoring)

לחבר את המשתמשים לתוכן

יצירת מנשק לתוכן(אתר האינטרנט,יצירת מטה-דטה,קיטלוג,חיפוש ועוד)

הפצה

הפצה/פרסום התוכן לציבור(קהל היעד)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

46

מולטימדיהמדיה זורמת–המלצות

מדיה זורמת,בשונה משרתWebרגיל,הינה בעלת דרישותגבוהות של רוחב פס מספק האינטרנט,וחומרה

באם אתם הם אלו שמכינים את התכנים לשידור

יש לרכוש תחנת עבודה חזקה(לפחות2ג'גה זכרון, CPUכפול ליבה)

הדבר החשוב ביותר–כרטיס תפיסה(capture card)המזרז את תהליךהקידוד ומקצר אותו משמעותית.

לפירוט,התאמה של כרטיסים ומידע נוסף אודות המלצות חומרה,תוכנהומאמרים בנושא הפקה,ראו:

Windows Media Hardware Product Vendors

VideoHelp.com - Capture Card List

VideoHelp.com - Guide, How To, Tutorial and Article list

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

47

מולטימדיהמדיה זורמת–תוכנות–קידוד

התוכנה שנחשבת לטובה ביותר,היא אדובי פרמייר.

זוהיא תוכנת עריכה,הפקה,קידוד עם תמיכה רחבה מאוד

לא רק לאינטרנט.משתמשים בה להפקות וידאו מקצועיות.

יקרה!מעל800דולר בארה"ב.

יש תוכנות בחינם(פשוטות יותר ולרוב מיועדות לסוג מסויים שלCodec)

Microsoft Windows media encoder

QuickTime Broadcaster (עבור מחשבי אפל בלבד)

Real Producer (גרסתbasicבחינם)

Mencoderו- Mplayer –נגן ומקודד לסביבת לינוקס(mpeg-4ו-divX).

Total Video Converter –נגן ומקודד לתצורות קבצים רבות,כוללFLV,mp4, mov, 3gp, dvועוד רבים.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

48

מולטימדיהמדיה זורמת–תוכנות–הגדרות קידוד

מהירות חיבור שלמשתמשים

קצב העברה

רזולוציית מסך

קצב אודיו(BitRate)

56k modem

34kbps

160x120,176x132

8-10kbps

xDSL, Cable

300kbps

320x240

32-64kbps

High bit rate(LAN multicast)

700kbps

640x480

64-96kbps

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

49

מולטימדיהמדיה זורמת–תוכנות-שרתים

שרתים

אפל מאפשרת,במסגרת קוד פתוח,לקבל את שרת המדיה שלה, Quicktime server,בחינם,עבור יוניקס,לינוקס וחלונות,לשם הזרמתmpeg-4ו-qt

מאמר- Streaming MPEG-4 with Linux

VideoLAN streaming solution  - VLCהוא נגן וגם שרת מדיה זורמת לכמעט כל מערכותההפעלה הקיימות,במסגרת קוד-פתוח והורדה בחינם.תומך במגוון רחב של סוגיCodecs

http://www.icecast.org/לשרת בקוד פתוח לכל מערכות ההפעלה לשם הקמת תחנת רדיוברשת.

Helix Universal Server –שרת מסחרי(בתשלום)מביתRealהתומך ב-quicktime,mpeg4, windows media, 3gppלהזרמת מדיה למכשירי קצה ניידים ועוד.מגוון שלמערכות הפעלה.

Apple Quicktime Streaming Server  -מגיע חינם עם מערכת ההפעלה של אפל ומיועד רקלה.תומך3gpp.

Windows Media Server –מגיע חינם כחלק משרתWindows server 2003ומיועדלהזרמתwmv\asfבלבד.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

50

מולטימדיהמדיה זורמת–שרת פלאש

FMS (Flash Media serverאו בשמו הקודםFlash communication server)

פותח על ידי מקרומדיה(כיום בבעלות אדובי).

משמש כשרת למדיה זורמת בתצורתFLV (Flash Video)המתחרה במיקרוסופט, RealואפלQuicktime.

יש לשים לב בין גרסאות6,7שלFLVלבין גרסה8ששונה מהם.

ראו עוד עלFLVבאתר וויקפדיה באנגלית

אין בעיית תמיכה או התאמה לרוחב פס(הנגן של פלאש מותקן וקיים כמעט בכלהמחשבים ומערכות ההפעלה הקיימות בעולם).

RTMP – Real Time messanging protocolפותח במיוחד עבור שרת הפלאשלהזרמת מדיה בין השרת ללקוח ומבוסס עלTCP\IP.

יכול לשמש גם לפיתוח ועידות חוזי(video conference),הקלטת מהלקוח אל השרת,שידור חיי של ארועים,ישומי שולחן עבודה(ראוhttp://vyew.com/ועוד).

עובד רק על שרת חלונות או לינוקס עקב מגבלות שלCodecs

כיום בגרסה3עם תמיכה ב-Hige Definitionויכולת לנגן גםH.264

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

51

מולטימדיהמדיה זורמת–שרת פלאש-קישורים

MP4 streaming FAQ

אתר הבית שלFlash media server

VCS - Video Communication ServerשלOnlinelib -מוצר מתחרה שלאדוביFMS.תומך בקידוד(DRM)

Flash Media Server Developer Center

מאמר מצויין של אדובי המסביר את עקרונות המדיה הזורמת בפלאש וההבדלים

Flash Video Developer Center

Red5 –שרת פלאש המפותח בג'אווה במסגרת קוד פתוח

RTMP OS (חלק מ-Red5)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

52

מולטימדיהמדיה זורמת–שרת פלאש–מקודדים

מקודדים

אדובי פרימייר ואדוביFlash Professionalמגיעים עם מקודד לגרסות6, 7ו-8.

FLV Encoder (חינם)

Riva FLV Encoder –בחינם.המרה מwmv\quicktime\avi\mpegל-flv.

http://www.flash-video-mx.com/ (המרה גם באצווה)

http://www.ultrashareware.com/Ultra-Video-To-Flash-Converter.htm

On2 –החברה שפיתחה אתVP6 (כיום יש גם אתvp7),הקידוד שלFLVגרסה8ו-9 (החדש).

גרסאות שרת שלOn2משמשות אתmetacafe.comואתyoutube.com

לחברה מוצר בשםFlixלהתקנה על מחשבים אישיים אך עולה כסף רב.

ראו גםffmpegומאמר בנושא

מאמרים והשוואות

Selecting a Flash video encoder

Flash video FAQ

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

53

מולטימדיהמדיה זורמת-פלאש–מקודדים מקוונים

אתרים המציעים להמיר סרטים בתצורות דוגמתAVI,WMVואחרים,ל-FLV,ללא צורך בהתקנת תוכנה עלהמחשב האישי(טוב לעבודות קטנות)

http://www.zamzar.com/

http://vixy.net/

http://heywatch.com/

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

54

מולטימדיהמדיה זורמת–שרת פלאש–מהנסיון

לצורך פרוייקט וידאוeitan.tvנדרשנו להמיר מאותDVDל-FLV.

לאחר בחינה מדוקדקת בחרנו בשיטת שני שלבים:

המרה לקבציmpegבאמצעות תוכנתmpeg video wizard DVDשל חברתwomble.

הליך זה הינו ידני מאחר ומדובר בהליך שלripping

ארגנו את קבצי הmpegבספריות

השתמשנו בתוכנתUltra video to flash converterבעלת אפשרות שימוש באצווה(batch)

אפשרות זו חוסכת זמן רב ומאפשרת להשאיר את המחשב יום שלם עובד וממיר ללא התערבות.

על אף  ש-ultra video to flashמשתמשת בקידוד גרסה6 (סורנסון)ולא במתקדם יותר שלon2,מצאנו שבהגדרות מסויימות,אנו מגיעים לאותה איכות עם אותו גודל קובץ.

Flash Video Converter Options

Width=450   height=340 (נותן גודל תמונה כמו ב-youtube, 340X220יצא קטן מדי)

Video frame rate=30

Video bit rate=336

Audio sample rate=22050

Audio bit rate=56

יש צורך בבניית נגן בפלאש שיוכל לנגן את קבצי הFLV.

ראו דוגמא באתרhttp://www.jeroenwijering.com/?item=Flash_Video_Player

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

55

מולטימדיהמדיה זורמת–קישורים ומקורות

ffmpeg-php and Ffmpeg –ספריות לניגון,יצירה ועבודה עםקבצי מדיה מרוב הסוגים,כולל פלאש.קוד פתוח.

http://sdp.ppona.com/ -יישום המתחכה אחר פרוטוקולMMSומסוגל לנגן ו"לתפוס"את הקבצים המנוגנים דרכו ולשמור במחשבמקומי.

http://sourceforge.net/projects/libmms -ספריה בקוד פתוחלעבודה עםMMS

מצגת מפורטת על מדיה זורמת,כלים,טכנולוגיות,תיכנות ועוד(אנגלית).

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

56

מולטימדיהמיקרוסופטProducer

תוכנת הפקת מצגותמולטימדיה מתקדמת.

ניתן לייבא,לשלב ולסנכרן ביןמצגות פאואר פוינט,אודיו,וידאו, HTMLותמונות.

ניתן לבחור בין מספר רב שלתבניות ואפקטים.

ניתן להורדה בחינם.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

57

מולטימדיהSMILו-TIME

ראשי תיבות שלIntegration Language Synchronized Multimedia.

שפת סימון שפותחה ע"י ארגוןw3על-מנת לתמוךבשילוב מדיה זורמת עם טקסט/תמונה וכל סוג אחר שלמדיה.

אינטרנט אקספלורר תומך ב-SMILאך מיקרוסופט קוראתלטכנולוגיה בשם אחר– TIME (Timed InteractiveMultimedia Extensions ).

ראו גםhttp://www.justsmil.com/

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

58

מולטימדיהMathML

ראשי תיבות שלMathematical Markup Language.

שפת סימון בעלת תגים מיוחדים,שפותחה על-ידי ארגוןw3לייצוג ביטויים מתמטיים בדפיHTML.

יש להתקין תוסף(Plug-In)לדפדפן דוגמתMathPlayer(ניתן החינם)אוIBM techexplorer (30יום ניסיון אךמקצועי יותר).

ראו אתר לימוד לשפה.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

59

מולטימדיהSVGו-VML

SVGהוא ראשי תיבות שלScalable Vector Graphics.

שפת סימון לתיאור ישויות גרפיקה דו-ממדית ב-XML.

הישות(אובייקט)יכולה להיות גרפיקה וקטורית,תמונה או טקסט.

יתרונה הברור שלSVGהוא באפשרות לבטא גרפים,מפות וכיו"ב ממידע המאוחסן במסדי נתוניםבתצורתXML,על-פי דרישה(On the Fly and On Demand).

לשם צפייה ב-SVGבדפדפנים,יש להוריד תוסף(Plug-In)מאתר חברת אדובי(התוסף הנפוץוהנתמך ביותר).

ראו אתר ללימודSVGבמסגרת הספריה הדיגיטלית באיתן.

SVGלא הצליח לתפוס תאוצה בשוק,לעומת פלאש.

VML – Vector graphic markupהייתה הצעה של מיקרוסופט לשפת סימון גרפי מבוססתXML

הצעה זו נדחתה לבסוף ואוחדה יחד עםPGMLלתקןSVG

יתרונה שלVMLשמיקרוסופט החליטה לשלבה כמרכיב באקספלורר החל מגרסה5.0,ללא צורך להורידתוסף כלשהוא

ראוhttp://msdn.microsoft.com/workshop/author/vml/default.asp

SVG Implementation and Resource Directory

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

60

מולטימדיהPNG

ראשי תיבות שלPortable Network Graphics.

יועדה להחליף את תצורתGIFותומכת ברקע שקוף(transparency)כמו גםאפשרויות מתקדמות וטובות בהרבה מאילו שלGIF.

אינה מיועדת ותומכת בהנפשה כמו תצורתGIF (ראוmng)

נתמכת כיום על-ידי כל הדפדפנים.

יתרונה הגדול הוא בהיותה תצורה חופשית  ללא זכויות יוצרים על האלגוריתם שלהדחיסה(בעיה מרכזית בשימוש ב-GIF).

יש שני תקנים:

PNG-8  -מקביל לGIFבעקרונות הדחיסה(הפחתה של עומק סיביות)וביעודהשימוש.

PNG-24 -מקביל לJPEGומיועד בעיקר עבור עיבוד תמונה באיכות גבוהה(דחיסות נמוכה יותר).

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

61

מולטימדיהGIF

ראשי תיבות שלGraphics Interchange Format.

תצורת הגרפיקה הנפוצה ביותר(ביחד עםJPEG).

אלגוריתם הדחיסה של התצורה(שנקראLZW)שייך לחברת יוניסיס,הדורשתרישיון שימוש,דבר שהביא למלחמת תביעות(וליצירת תצורתPNGהחופשית).

תצורתGIFהיא דו-ממדית וקיימת בשני תקנים: 87aו-89a.

האחרונה היא החדשה ביותר ותומכת בהנפשה ובסריקת שזירה(interlaced(.

גרוע מאוד לשמור תמונות ב-GIFואח"כ לנסות להמירם לJPEGאוPNG

GIFשומר במרחב צבע מאונדקס(indexed color)ומאבד צבעים ומידע רב עלהקובץ.

בפוטושופ ותוכנות אחרות–אם אתם קולטים קובץ ב-GIFורוצים לעבד אותו,מומלץלגשת לאפשרויות תמונה(image),ולשנות את המצב(mode)מ-indexed colorל-RGBורק אז לשנות גודל,צבעים,ולעשות שינויים אחרים בתמונה.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

62

מולטימדיהJPEG

ראשי תיבות שלJoint Photographic Experts Group.

תצורתJPEGהינה פרי פיתוח של מספר רב של גופים אקדמיים,מסחרייםוגורמי תקינה בינלאומיים,המרכיבים את הקבוצה(ומכאן שמו– JPEG).

הוא נוצר במיוחד עבור תמונות(ומכאן גם כן שמו).

קובץJPEGהוא שילוב של מספר אלגוריתמים המאפשרים קשר ישיר בין גודלהתמונה למידת איכותה.

תצורתJPEG (ביחד עםGIF)היא הנפוצה ביותר באינטרנט.

השם המלא הואJPEG JFIF (JPEG File Interchange Format)

כיום יש תקן חדש שנדון והואJPEG2000

ראו שאלות ותשובות למידע מורחב.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

63

מולטימדיהTIFF

Tagged Image File Format

אינו מתאים לשימוש באינטרנט(אינו נתמך ויוצר קבצים גדולים)

מיועד בעיקר לעיבוד תמונות ושמירה באיכות גבוהה לתעשיית הדפוס,דפוסדיגיטלי,סריקה וכיו"ב.

עד64סיביות צבע לכל פיקסל ו-CMYK (Full color)

פותח על-ידי חברת אלדוס(לימיםAdobe)

השם"tag"מגיע בגלל יכולתה לשלוט ולשמור מספר תמונות בקובץ אחד תוךשימוש בתגיות בראש הקובץ(header)

הדחיסה בTIFFהינה לא אובדנית,מה שאומר שאין אובדן של סיביות/פיקסלים.

ראו:

TIFF Specification

LibTIFF - TIFF Library and Utilities

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

64

מולטימדיהBMP

Windows bitmap

בעיקר בשימוש על-ידי מיקרוסופט במערכת ההפעלה חלונות.

כיום נמצא בשימוש מרבית מערכות ההפעלה ותוכנות הגרפיקה

תומך ב1-24סיביות לכל פיקסל(עד16.7מליון צבעים)

בעל דחיסה מועטה מאוד,מה שיוצר קבצים גדולים

אינו מומלץ לשימוש באינטרנט

בגלל התמיכה המובנית של יישומי מיקרוסופט,והעדר פטנטים רשומים,הואנמצא בשימוש נרחב(למרות עדיפותם הברורה שלGif, JPG, PNG).

ראו אתר מיקרוסופט בנושא

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

65

מולטימדיההשוואה בין תצורות קבצי תמונות

GIF

JPEG JFIF

PNG

מספר/עומק צבעים(לכל פיקסל)

256 (4-8 bit)ראוANGIF

24ביט(16.7מליון)

24ביט(עובד הכיטוב ב-8ביט)

מרחב צבע מאונדקס

חובה

לא(True Color)

אופציה(תומך גם ב-True color)

שקיפות

כן

לא

כן

הנפשה

כן

לא

לא

דחיסה לא אובדנית(loss less)

כן

לא

כן

דחיסה

LZW

JPEG

Pkzip withprefiltering (נקראDEFLATE)

ערוץ אלפא

לא

לא

כן

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

66

מולטימדיההשוואה בין תצורות קבצי תמונות(המשך)

GIF

JPEG JFIF

PNG

תיקון גאמא

לא

לא

כן

יכול להכיל הערות

כן

לא

כן

תמיכת דפדפנים

כן

כן

משתנה בין דפדפןלדפדפן.

שימוש עקרי

אנמציה ותמונותשטוחות

עיבוד צילומיםממוחשב

שקיפות,דחיסה לאאובדנית,צבע מלא

לא להשתמש

עיבוד צילומים

טקסט,שרטוטים

עיבוד צילומים לתמונהגדולה בצבע מלא(יוצרקבצים גדולים מדי)

תיקנון

GIF89a (יוניסיס הינהבעלת הזכויות)

IS 10918-1 (ITU-TT.81)

גרסה1.2.אין תקנוןרשמי.קוד פתוח.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

67

מולטימדיההשוואה בין תצורות קבצי תמונות(קישורים)

Digital Media File Types: Survey of Common Formats

Compression - Optimizing Web Graphics

Wikipedia - Comparison of graphics file formats

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

68

מולטימדיהMPEG

ראשי תיבות שלMoving Picture Experts Group

אחראית על פיתוח תקנים לוידאו ואודיו,ביניהם:

Mpeg1 –תקן לאודיו(כולנו מכירים אתmpeg1בתור הבסיס ל-mpeg3הידוע יותר בכינויוmp3)

- Mpeg2תקן לוידאו

- Mpeg4תקן דחיסה מתקדם לוידאו,נפוץ באינטרנט ובסלולר.רבים מתקניהדחיסה כגוןQCIFבסלולר מתבססים עליו.

ניתן לקרוא עוד על תקניםMpeg7ו-Mpeg21

בפיתוח אתרים אתרים נשתמש בעיקר ב-Mp3אוmpeg4מאחרוהם דחוסים מאוד וקלים להעברה דרך רשתות תקשורת.

Mpeg4דורש מחשבים חזקים מאוד ולרוב ההמרה מתבצעתבאמצעות חומרה יעודית(כרטיס מותקן)ולא תוכנה.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

69

מולטימדיהעוד על תצורת קבצים-מבוא

אנו נסקור כאן את הידועים ביותר.מעטים מהם מומלצים לשימושבאינטרנט.

באינטרנט מומלץ להשתמש או במוזיקה המשולבת בפלאש,אומנוגנת על ידיwindows media (wma\wmv)ונגנים תומכיםבלינוקס/יוניקס

אנו לא ממליצים להשתמש בסוגי קבצים שידרשו מהמשתמשלהתקין תוכנה מיוחדת.

מומלץ ללמוד ולעיין באתרhttp://vlib.eitan.ac.il/music2/ -פרקפורמט קבצים.

אתר הדמיה דיגיטלית ווידאו דיגיטלי בספריית איתן.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

70

מולטימדיהעוד על תצורת קבצים-מוזיקה

Midi, mp3 –הכי מומלצים.נתמכים על-ידי כל הנגנים בכל פלטפורמה.

m4a –סוג מוזיקה המבוסס עלmpeg4.אינו נפוץ דיו.

wave (מוכר כ.wav) –על אף היותו נפוץ מאוד ותיקני,בעיקר ב-CD,הדחיסהאינה משמעותית שיוצרת קובץ גדול.

ra –סוג קובץ לאודיו שלRealPlayer.לא מומלץ עקב תמיכה חלשה בישראל.

au –הומצא על-ידי סאן מיקרוסיסטמס.נפוץ בעיקר ביוניקס.

aac –סוג שלQuickTime.לא מומלץ.התוכנה אינה נפוצה דיה.בעיקר נפוץב-iPod.שימו לב ל-m4pשהוא סוג קובץ מוזיקה מוגן מחנותiTunes.

OggVorbis –סוג יחסית חדש של תצורה דחוסה של קבצי מוזיקה.קוד פתוח.לא נפוץ דיו עם תמיכה חלשה באינטרנט.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

71

מולטימדיהעוד על תצורת קבצים-וידאו

mov –שייך ל-quicktime.לא מומלץ-שכיחות נמוכה.

DivX –מבוסס עלmpeg4.בעייתי ושנוי במחלוקת עקב היותובשימוש נרחב להעתקה והפצת סרטים.לא מומלץ.דורש תוסףמיוחד.

avi –מומלץ מאוד לא להשתמש.קובץ גדול ולא מכווץ.

rv, rvx –בשימושRealVideo.לא מומלץ–שכיחות נמוכה.

3gp –סוג קובץ וידאו מקודד על-ידי טלפונים סלולריים.

לא מומלץ.אין נגן תיקני פרט ל-quicktimeהמסוגל לנגנם.

יש נגנים יעודיים המגיעים כחלק מהתוכנות של נוקיה/סוני אריקסון ושות'

מה כן? asf\wmv –הכי מומלצים ונתמכים.

באופן עקרוני,עדיף להשתמש בפלאש(FLV).

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

72

מולטימדיההשוואה בין תצורות קבצי מוזיקה

תמיכה

שימושים

יתרונות

חסרונות

קצב דגימה(bitrate)

תיקנון

AAC

Advanced AudioCoding

בעיקר אפלבחנותitunesומכשיריipod.מכשירי סלולר(נוקיה,סוניאריקסון,סמסונג,מוטורולה ועוד).רצועת המוזיקהבקבציmp4הםAAC.

איכות שמעגבוהה מזו שלmp3.שימושנרחבבשידוריםדיגיטליים(HDTV\SDTV,בעיקר ביפן)

בהיותו מבוססעלmpeg2וגםmpeg4 (שכבה3),לעומתmp3שהואmpeg1שעבה3,טועניםלדחיסה טובהבכ-30אחוז,כךש192kbpsmp3ישמע כמו128kbps AAC.

דרוש רשיון(יקר)למקודדולמפרש.איןתמיכה מצדנגנימיקרוסופט אוReal (רקQuicktime)

עד48ערוצים בקצבדגימה של96mhz

ISO\IEC

Mpeg2שכבה7ו-mpeg4שכבה3.

AC-3

התקן לרצועתשמע ב-DVD

איכות גבוהה,רב-ערוצי.

ממיר6ערוצים שלצליל היקפי ל-2.איכותשמע גבוההמזה שלCD.

עד448kbps

דולבי

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

73

מולטימדיההשוואה בין תצורות קבצי מוזיקה(המשך)

תמיכה

שימושים

יתרונות

חסרונות

קצב דגימה(bitrate)

תיקנון

Midi

תוכנות הלחנהועריכת מוזיקה,סינטיסייזרים.נגנים גמוquicktimeומיקרוסופטמדיה פלייר,טלפוניםסלולריים

תוכנן עבורסינטיסייזריםומיכשור דיגיטלילתקשר אחד עםהשני.מאוחריותר הותאםלמחשב.

קבצים קטניםמאוד הנשמעיםאותו דבר בכלמקום מאחר ואינולוקח בחשבוןשינויים בערוצים.

אין שליטהמדוייקת עלהצליל כך שלאתמיד נשמע כמומה שנכתב/נוצרבתוכנה/כלי נגינה.

8סיביותתמסורתטורית,עד31.25kbps

3תקנים:

GMע"י ארגוןmidi.

GSע"י רולנד

XGע"י ימהא(Yamha)

Mp3 (mpeg-1 layer 3)

התקן הנתמךוהנפוץ ביותרלקבצי אודיובמחשביםובנגנים.לאחרונה גםבמכשיריסלולר.

קבצי מוזיקהבאינטרנט,הןלהורדה והןלזרימה.

שומר עלאיכות גבוההבקצב דגימהנמוך.יחסדחיסה של12:1לעומתקבציwavלמשל.

במערכותסטריאו ביתיותוברכב–דורשתוספת אוחיבור מיוחד.לא נתמךאוטומטיתודורש דגמיםמתקדמים.

קצב דגימהמשתנה אםכי לרוב128kbpsכאשר1מגהלכל דקה.

ISO\Mpeg

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

74

מולטימדיההשוואה בין תצורות קבצי מוזיקה(המשך-2)

תמיכה

שימושים

יתרונות

חסרונות

קצב דגימה(bitrate)

תיקנון

Real audio (.rm, .ram)

נגניRealבחינם אובתשלום(גרסאותמתקדמות)

נחשב לנפוץביותר למוזיקהבמדיה זורמת(streaming)

תוכנן למדיהזורמתבאינטרנט

בעקבותדחיסה ברמהגבוהה כל כך,הצליל יכוללהשמעבאיכות שלטלפון או רדיו(לאdab...).

מותאם לקצבתעבורתהמידעוהחיבורלאינטרנט.מ20kbpsלמודם56Kועד220kbpsלחיבורT:1

קנייני– RealNetworks

Wav

נתמך כמעטבכל מערכתהפעלה ונגן.AIFFבאפלשווה לwavבהיותו לאדחוס)

התצורהשנצרבתבדיסקים(CD)למוזיקהבהפצהבחנויות למשלולשמיעהבמערכותסטריאו ללאתמיכה ב-mp3

ללא דחיסהכך ששומר עלכל המידעוהאיכותכאשר נקרע(rip)מ-CD

קבצים גדוליםמאוד,לאדחוסים.

44.1Khz,16סיביותסטריאו.

מיקרוסופט.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

75

מולטימדיההשוואה בין תצורות קבצי מוזיקה(המשך-3)

תמיכה

שימושים

יתרונות

חסרונות

קצב דגימה(bitrate)

תיקנון

wma

חלונות/נגנימיקרוסופט.מתחיל להיותנפוץבאינטרנט.דגמים שלנגני מוזיקהברכב,ניידים,סלולר,כף-יד.נתמך גםבלינוקס ע"ינגניםמסויימים.

מדיה זורמתוהורדת מוזיקהבאינטרנט.

64Kbpsנשמע כמו128kbpsשלMp3בחציגודלו שלקובץ.תוכנןלמדיה זורמת.

קנייני שלמיקרוסופט.לא נפוץ ונתמךכמוmp3.

48Khzסטריאו.

מיקרוסופט

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

76

מולטימדיההשוואה בין תצורות קבצי וידאו

תמיכה

שימושים

יתרונות

חסרונות

קצב דגימה(bitrate)

תיקנון

AVI

נגן המדיה שלחלונות ו-Real.Cinepakמשמש לדחיסה(הנפוץ ביותר).מגיע חינם עםDirectShow.

נפוץ מאוד(אם כינחשב כברלמיושן)במחשביPC/חלונות.תוכנות רבותכתפיסת מסך,הקלטה וכיו"במשתמשות בו.

המידע מחולקלחתיכות מהשמאפשרשליטה על גודלקובץ(יש דחיסותהמגיעות ליחסשל1:100.

אם לאמשתמשיםבתוכנת דחיסהטובה,הקבציםגדולים מאוד.

8-16סיביותסטריאו או מונו.דגימות11,22,44.1קילוהרץ.  24סיביות צבעתקני.

OpenDML AVIFormat (PDF)

Mpeg (mp4, mg4,mpeg-2)

נרחבת,על-ידיכל הנגניםומערכותההפעלה

Mpeg-1עבורשידורים לוויניםוקוויים, VCD.Mpeg-2הואהתקן שלDVD,Mpeg-4עתידלהפוך לתקן הנפוץלסרטיםבאינטרנט,כמוMp3לאודיו.

שומר על איכותתחת כל רוחבפס,ניתן לזרימה(stream),Mpeg-4מגיעלדיחה של1:10מזה שלMpeg-2כמעט ללאאיבוד מידע.Mpeg-4הואבעל תכונות שלכוון-עצמים הנותןלו יכולות תיכנותוהידודיות.

נדרש רשיוןבתשלום   עבורפיתוח תוכנותלדחיסה וניגון שלMpeg-4.

Mpegבכללותומאוד גמישומשתנה,אפילובתוךMpeg-4יש סדרותופרופיליםשונים.

ראוH.264ואודיו ב-Mpeg4.

Mp4הואmpeg4שכבה14.  mpeg4הוא שכבה10H.264אוAVCעבורQuicktime.שניהםמתוקנניםבמסגרתקבוצתISO\mpeg.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

77

מולטימדיההשוואה בין תצורות קבצי וידאו(המשך)

תמיכה

שימושים

יתרונות

חסרונות

קצב דגימה(bitrate)

תיקנון

Quicktime (mov)

תוכנתQuickTimeבחינם אוProבתשלוםמאתר אפל.

פלטפורמה רב-גווניתלמולטימדיהכולל תלת-מימד.רביםמאמינים כיהיא האיכותיתביותר.

Movהוא סוגשל מעטפתלסוגים רבים שלמולטימדיה כוללפלאש, mpeg4,אפקטים,טקסטועוד.גרסתproיכולה ליצורולקודד בתצורותרבות,כולללסלולר(3gpp)

לא נפוץ דיובקרבמשתמשיחלונות.קבציmovיחסיתגדולים

אפל

RealMedia\ RealVideo

 (.rm, .rv)

נגן המדיהויישומי שרתולקוח אחריםמביתreal

מדיה זורמת אוהורדה שלקבצימולטימדיה

קצב דחיסהגבוהההמאפשרקבצים קטנים

קצב הדחיסהעלול לגרוםלירידהבאיכות.חסור תאימותשל קבציםלגרסאותישנות.

עד16סיביות אודיו,24סיביותוידאו.

RealNetworks

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

78

מולטימדיההשוואה בין תצורות קבצי וידאו(המשך-2)

תמיכה

שימושים

יתרונות

חסרונות

קצב דגימה(bitrate)

תיקנון

Flash (swf)

הורדת נגןבחינם(קייםבלמעלה מ-98אחוזכמעט לכלתשתית,כוללניידים).כליפיתוח רבים,שרתי מדיהזורמתוקידוד.נגניםמפותחים גםבקוד פתוח.

שילובמולטימדיההידודית בדפימארג אוכתצורת סרטים(FLV)וניגוןכמו אלושפורטובטבלה.

בהשוואה לאחרים:כלי יצירהופיתוח מגוונים.יותר טובבמדיה זורמת,משתלב הייטבבישומי אינטרנט,זמן הורדהונגינה מהיר,שוקוויב מאפשרהידודיות ברמה גבוהה יותרמהנגן הרגיל,תצורה גמישהמסרטים ועד מסמכים.

בהשוואה לאחרים:היותו תצורהשל גרפיקה ווקטורית מביאהלקבצים קטנים יותר הניתניםלתיכנות והידודיות רבה,רובמשתמשי המחשב בעולםמשתמשים בו(קהל רב יותרמכל נגן אחר).נתמך ומשתלבבטכנולוגיות ויישומים של חברותרבות.

מקרומדיה(כיום אדובי).

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

79

מולטימדיההשוואה בין תמיכת נגנים בקבצים

סיומת

Microsoft MediaPlayer (WM)

Apple QuickTime(QT)

Real One player

AAC (אודיו)

כן

כן

כן

Mp3 (אודיו)

כן

כן

כן

Wav (אודיו)

כן

כן

כן

Midi (אודיו)

כן

כן

כן

WMA (אודיו)

כן

כן(עםFlip4Mac)

כן(כאשרWMמותקן)

AU (אודיו)

כן

כן

כן

RM (אודיו)

כן

Mp2 (אודיו, mpeg)

כן

כן

כן

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

80

מולטימדיההשוואה בין תמיכת נגנים בקבצים

סיומת

Microsoft MediaPlayer (WM)

Apple QuickTime (QT)

Real One player

Mpg (וידאוmpeg1)

כן

כן

כן

Mpeg (וידאוmpeg1)

כן

כן

כן

Mp4 (וידאו, mpeg4)

כן

כן

Mov, qt (וידאו)

כן

Avi (וידאו)

כן

כן

כן

Asf (וידאו)

כן

כן(עםFlip4Mac)

WMV (וידאו)

כן

כן(עםFlip4Mac)

כן(כאשרWMמותקן)

RA (וידאו,זרימה)

כן

RV (וידאו,קליפים)

כן

3gp, 3g2 (וידאו,סלולר)

כן

SWF

כן

כן

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

81

מולטימדיההשוואה בין תצורות קבצי טקסט

תמיכה

שימושים

יתרונות

חסרונות

הערות

תיקנון

ASCII (*.txt)

כל עורך בכלסוג שלמערכתהפעלה.

נפוץ עבורמסמכי טקסטפשוטיםותיקניים.ניתןלקרוא ולשמורבתצורותאחרות.

קבצים בעלי נפחקטן ביותר

תוויםהבסיסייםביותר של קודאסקי,ללא כלעיצוב,טבלאותמסוגננות אוגרפיקה.

ANSI

DOC (MS word)

בעיקרתוכנותמיקרוסופטבסביבתחלונות אומקינטוש,אבל גםחברותאחרות פיתחוכלים לקריאהוהמרתמסמכי וורד

עיבוד טקסט

יכולות עיצוב,סגנונות,גרפיקהועיבוד טקסטגמישות ורבותמאוד.

קבצים גדוליםאם משלביםבהם תמונות/גרפיקהואובייקטיםמכלי אופיסשונים כמוגרפים באקסל.

עבר שינוייםבמהלךהגרסאותהשונות שלאופיס.עדגרסה2003docהוא קובץבינארי.החלמאופיס2007,יש אתdocxשהוא חלק מopenxml –התקן החדש שלמיקרוסופט.

מיקרוסופט

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

82

מולטימדיההשוואה בין תצורות קבצי טקסט

תמיכה

שימושים

יתרונות

חסרונות

הערות

תיקנון

HTML

כל הדפדפניםבכל מערכותההפעלה.בהיותו קובץטקסט,גםקוראימסמכים(וורדואחרים)

להצגת אתריודפי אינטרנטוגם צפיהמקומית ללאחיבור לרשת.

מאפשרשליטהנרחבת עלהתצוגהוהמבנה  שלמסמך,כוללהידודיות(DHTML)ואנמציות.יכול לשלבמספר שפותמחשב בצורהשקופה.תמונותמקושרות ולאמשולבות

בעיות שלתמיכה ביןדפדפנים(תאימותמאחר ולא כלהתגיות אומצורשמית וכאלופותחו באופןעצמאי על-ידיכל חברההמפתחתדפדפן).ישצורך ללמודאת השפה כדילשלוט טוב,ועורכיםויזואלים לאתמיד יעשוהכל בצורהטובה.

W3

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

83

מולטימדיההשוואה בין תצורות קבצי טקסט

תמיכה

שימושים

יתרונות

חסרונות

הערות

תיקנון

RTF

פותחה ע"ימיקרוסופטונתמכתבוורד אך גםבתוכנותטקסט אחרות

למרות הקידודשל7סיביותכמוascii,RTFמרחיבאת אפשרויותעיבוד המסמךבהיותו בעלשפת סימוןתגיות דומה ל-HTML.

מאחר ו-RTFמשלב קידודתווים מ-ANSII,IBM,מקינטוש,יש לו את היכולתלהמיר ולהפתחבסביבות שונותולהתמך ע"יקוראי מסמכיםרבים.

עדיין אין לו אתהיכולות שלשליטה ועיבודתמונה כמוdocאוopenxmlו-opendocumentהחדשיםיותר.

מיקרוסופטRTF

XML

XMLונגזרותיו(RSSלמשל)קיימות ונתמכותע"י מירבהדפדפניםומערכות תוכנהומסמכים

יכולת לאחסןתוכן  בצורהמבנית.בעיקרבאינטרנט אבלגם לקישורוהעברת מידעבין מערכותתוכנה

לא קנייני,שליטהעל מבנה(סכמה)שלהמסמך והתגיות,הסרת מגבלותשלSGML,תוךשמירת גמישות.התממשקותוקישוריותמתקדמת מזושיש בHTML.

ביקורותמושמעות עלהיותו טקסט ולאבינארי,יוצרקבצים גדוליםואינו מתאיםלרוחב פס נמוך,תחביר מורכבולעיתים מיותרועמוד

SGMLע"יISO.

XMLע"יW3

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

84

מולטימדיההשוואה בין תצורות קבצי טקסט

תמיכה

שימושים

יתרונות

חסרונות

הערות

תיקנון

OpenDocument (ODF)

בעיקר תוכנותקוד פתוחדוגמתOpenOfficeו-Koffice.

פיתוח לתמיכהוהמרה עבוראופיס2007

ODT –סיומתלקבצי טקסט

ODF –לגליונותאלקטרוניים

ODPלמצגות

ODGלגרפיקה

לא קנייני ופותחבמטרה להיותתקן פתוחלשימוש לכל ללאכבילה למוצר אוחברה מסויימת(למשלdocשלמיקרוסופט).מבוסס עלXML,

בהיותו תקן פתוחלא כל המוצריםמיישמים אותובצורה מלאה,כךשנוצרת בעייתתאימות.לאהושלם עדייןהתמיכה בכלהאפשרויות.

התקן תומךב-ZIPלשםכיווץ ה-XML.

אואזיס ו-ISO/IEC26300

OpenXML (OOXML)

מיקרוסופטאופיס2007(מוצריםנוספים יצאובהמשךמחברותנוספות)

פותח ע"ימיקרוסופטכתשובה ל-ODF.דיי דומה לובשימושים,עםמפרטים קצתשונים בסכמה שלה-XML.

Docxלוורד, pptxלפאורפוינט ו-xlsxלאקסל.ראו אתרמיקרוסופטבנושא.

מיקרוסופטהצהירה כמהפעמים כיOOXMLיהיהפתוח לשימושואין צורך ברשיון(במטרה לקדםאת התקן על פניODF).

לא תואם ל-XHTMLובשונהמODFהמשתמשתבתקנים פתוחים(SVG, MathMLועוד),ב-OOXMLהמציאואת ה"גלגל"מחדש.

על מנת לשמראת היכולות שלמוצרי אופיס,מיקרוספטבנתה תקן ובוקובץZIPהמכיל ספריותשל כל הקבציםהמשולבים(גרפיקה וכיו"ב)כאשר קובץXMLמחבר ביןכולם ומכיל אתהטקסט.

Ecma OfficeOpen XML.

בתהליכי אישורעבורISO\IEC

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

85

מולטימדיהPDF

Portable Document Formatהוא תצורת קובץ וטכנולוגיה שפותחה על-ידיאדובי בתחילת שנות ה-90.

במקור מבוסס על טכנולוגיה ושפתPostScriptומהווה התפתחות שלו.

יתרונו בכך שניתן לקרוא אותו על כל סוג של מערכת הפעלה וחומרה,והמסמךיוצג באופן זהה כפי שהיוצר התכוון לכך.

משלב גופנים,תמונות(ווקטור וגרפיקת רשת/רסטר),טקסט,קישורים ועוד לכדיקובץ אחד(עם או בלי כיווץ).

PDFהוא תקן פתוח מה שמאפשר באופן חופשי ליצור גם קוראי מסמך(reader)וגם יוצריPDF

הכלי הנפוץ ביותר ליצירה הוא של אדובי ונקרא אקרובט.

כנ"ל גםAcrobat readerהזמין לכל תשתית,כולל כף יד וטלפונים חכמים.

תוסף חינם לאופיס2007מבית מיקרוסופט להמרה ל-PDFאו ל-XPS (XMLPaper -התצורה המתחרה של מיקרוסופט)

ראו:רשימת תוכנות ליצירה,המרה,קריאה ועוד(אנגלית,וויקיפדיה)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

86

מולטימדיההנפשה

נגדיר הנפשה(אנמציה)כשינויים הדרגתיים במצבה של תמונה על-פני ציר זמן.

הגדרה זו הינה מצומצמת ביותר שכן מתייחסת אך ורק לשינוי רציףוהדרגתי בתמונה בודדת(כך שקיים רצף הגיוני בין המצביםבתמונה).

הטכנולוגיות הקיימות כיום בשימוש הן:

Animated Gif -הטכניקה הוותיקה.נתמכת החל מגרסה89a.

Flash -הכלי האולטימטיבי והמומלץ כיום ליצירת הנפשות.

קיים שימוש בבניית גלריות והנפשה תוך שימוש בפילטרים וג'אווה סקריפט.

לא לבלבל-זה כמובן אינה יחידה נטענת אחת של קובץ מונפש.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

87

מולטימדיהתלת-מימד

מנוע הפלאש אינו3Dמובנה ופלאשMXאינו תומך בבניית3D.

מה שמונע בניית מודלים אינטראקטיביים תלת-מימדיים.

ישנן טכניקות לאשליית3Dבפלאש,אך אלו דורשים המון תיכנות ומומחיות.

ראו מאמר(PDF)מקיף בנושא.

ישנם כלים יעודיים שפותחו לענות על דרישה זו,אך אלו מגיעים עם תוסף(Plug-in),נוסף לזה של הפלאש.

שוקוויב-פלאש

VRMLויורשו-X3D.ראו גם חברתINT3Dובה הדגמות ל-VRMLוהורדת נגניםמתאימים.

חברתViewpoint (שלטענתה הנגן שלה מותקן בכ-60%מהמחשבים האישייםבארה"ב)מפתחת נגן וכלי יצירה למודלים3Dאינטראקטיביים.

ישומוני ג'אווה(Java3D).לא נפוצים כל כך.

ראו אתר3dשל איתן בנושא.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

88

מולטימדיהרכישת מסך

נשתמש ברכישת מסך כדי לצלם חלקים או מסך שלם,לצרכי הדרכה,הסבר עלבעיה,אינדקס אתרים ובאוםן כללי להוספת גרפיקה לאתר.

חשוב לשים לב:

לאיכות צילום המסך

לסוגי הקבצים בהם ניתן לשמור את התמונה

עריכה תמונה

סוגי הצילום השונים

קלות ונוחות השימוש

התוכנות המומלצות:

Snagit

Grabit

HyperSnap

השתמשו בגוגול במילות חיפושscreen capture softwareלעוד תוכנות.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

89

מולטימדיהפילטרים ומעברים

שיטה שתחילתה במיקרוסופט,להוספת אפקטים לדף אינטרנטולתמונות.

לדוגמא:

תמונה תופיע במעומעם ובמעבר עכבר לברורה.

Fade in\outושלל מעברים בין תמונות.

כנ"ל לדפי אינטרנט ביציאה וכניסה לדף

אקספלורר הוא הכי מפותח בתחום

ראוhttp://msdn.microsoft.com/workshop/author/filter/filters.asp

התמיכה בפיירפוקס מוגבלת,אך קיימות שיטות לבצע תמיכה בשניהדפדפנים

ראוhttp://www.brainerror.net/scripts_js_blendtrans.php

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

90

מולטימדיהתוכנות גרפיקה

התוכנה הכי טובה לעיבודי תמונה היא פוטושופ.אבלהיא יקרה ולמי שאין דרך להשיגה עומדות תוכנות אחרות,חלקן בחינם.

Gimp.חינם

פיקאסה מבית גוגול.חינם.ראו גםSketchUpל-3d.

Paint.net.אקדמית.חינם.

Pixia.חינם

PhotoPlus.חינם.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

91

מולטימדיהתוכנות–מיטוב תמונות

Xatהיא תוכנה למיטוב תמונה(אופטימיזציה)שתומכתב-GIF, Jpegו-PNG.

בנספח א'אנו מסבירים כיצד לבצע מיטוב בפוטושופ.

אתרים דוגמתJpegWizardמציעים מיטוב בחינםבאמצעות האינטרנט,ללא הורדה והתקנת תוכנותבמחשב.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

92

מולטימדיהגרפיקה

השגת גרפיקה לפרוייקט היא משימה הדורשת מחשבה,יצירתיות,השקעה אבל בעיקר–הקפדה על חוקיות.

כיום יש ברשת מליוני תמונות

רובן בעלות זכויות יוצרים וקיימת בעיה לפרסמם באתרפתוח.

יש לו מעט תביעות בנושא

קיימות מספר שיטות קלות,נוחות וחוקיות למשימה זו

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

93

מולטימדיהגרפיקה-חיפוש

גוגול–מנוע חיפוש לתמונות

אומנם ישנן לא מעט תמונות מוגנות בזכויות

אבל ניתן לקבל רעיונות

יש המון תמונות כלליות–של אנשים,חלקי צילומים,צילומים של חלקיםטכניים,שרטוטים ללא צבע

את כל אלו ניתן לשמור למחשב או לבצע העתקה ישירות לפוטושופ(או לכלתוכנת גרפיקה אחרת)

לבצע עיבוד לתמונה,לשנות,לחבר בין תמונות

וקיבלתם תמונה לאתר שלכם.

Royalty-free –מאגרים ומנועי חיפוש משתמשים רבות במונח זהלציין שניתן לקנות תמונה במחיר זול,ולהשתמש בה בהתאם לתנאיהשימוש,ללא תשלום נוסף לזכויות יוצרים או הייקף שימוש באתר.

ראו גםhttp://www.picsearch.com/

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

94

מולטימדיהגרפיקה–מאגרי תמונות

מאגרי תמונות בחינם

אלו הם מאגרי ענק של עשרות אלפי תמונותשמנועי חיפוש דוגמת גוגול לא יכולים לאנדקסאותם(מה שנקראHidden web)

מציעים תמונות איכותיות ברשיון לשימושחופשי/ציבורי

http://www.openphoto.net/

http://www.imageafter.com/

http://pdphoto.org/

http://www.morguefile.com/

http://www.stockvault.net/

http://www.mayang.com/

http://www.sxc.hu/

http://yotophoto.com/

http://www.pixrat.com/

רשימה ארוכה של מקורות כאלו תוכלו למצואבבלוג של רובין.

מאגרים מסחריים

Animation Factory

Corbis

Getty Images

GoGraph.com  -מדריך ומאגר תמונות

שונות

יש לשים לב שרבים מאתרים אלו מוצפיםבפרסומות(חלק מהיותם בחינם)

http://www.clipartheaven.com/ (בחינם)

http://www.1clipart.com/ (בחינם)

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

95

מולטימדיהגרפיקה–שיתוף תמונות

וויקיפדיהCommons

מאגר של מאות אלפי תמונות שצילמו או הכינו יוצרי התכניםהשונים בכל העולם של וויקפדיה

התמונות הינן ברשיוןCC (Creative Common)אוGFDLאושניהם(כל יוצר בוחר את הרשיון בעת העלאת התמונה)

פירושם של רשיונות אלו כי אתם רשאים להשתמש בתמונה,כלעוד תיתנו ציון המקור

פתרון נוסף לחיפוש תמונות בחינם–אתרי שיתוף תמונות

פליקר מציע מליוני תמונות שהעלו גולשים עם רשיוןCCעלסוגיו השונים,לשימוש והפצה חופשים

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

96

מולטימדיהגרפיקה–גופנים

לפוטושופ כמו גם לתוכנות גרפיות אחרות יש מאגר גופנים נרחב מאוד הניתן להרחבה

חלק מגופנים אלו אינם אותיות אלא סמלים(Symbol\Picture fonts)

Dingbat, Symbol Fonts

ראו אתר1001fontsלאלפי גופנים,מכל הסוגים,בחינם להתקנה במחשב.

חפש את הגופןDingbat symbolומולץ כי תמיד תמיינו לפי פופולריות,כך תשיגו את הגופניםהטובים ביותר.

עוד סוגים שלDingbatניתן למצוא באתרCoolArchibe

גופנים נוספים שניתן למצוא בפוטושופ,לא תמיד,שווה לבדוק:

Guttman logo1

Webdings

Wingdings

2Wingdings

3Wingdings

Bento Box

Carta

Maestro (סימולים מוזיקליים)

Marlett

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

97

מולטימדיהגרפיקה–גופנים(המשך)

גופנים להורדה בחינם

Electronic Symbols True Type Font

Medieval fonts (כל מיני גופנים מימי הביניים עם כתרים וסמלי מלוכהואבירות)

Dinglets (Letterbats) –מאתabout.comעם המון תוכן,הסברים וגופניםחינם להורדה.

Jeff's Dingbats –מאגר גדול מאוד של גופנים ציוריים

מאגרי גופנים בתשלום(למי שמוכן)

http://www.myfonts.com/browse/category/myfonts/symbol/

ראו גם:

Using Greek and special characters from Symbol font in HTML

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

98

מולטימדיהמוזיקה–בחינם וחוקי

יש הבדל עצום בין להוריד מוזיקה לא חוקית מתוכנות שיתוףקבצים,לבין להשתמש בה באתר פומבי.

חשוב מאוד למצוא מוזיקה חוקית למגוון שימושים כמוזיקה רקע,המתנה,אפקטים ועוד.

עם התפתחות רשיונות דוגמתCC,התאפשרו התנאים למצב שלשיתוף מוזיקה ושימוש בחינם.

אתרים לדוגמא:

http://www.commoncontent.org/ -הקטלוג שלCCהמאפשר למצואתוכן ברשת תחת רשיון זה.יש לשים לב שחלק מהאתרים חוסמים את מנועהחיפוש ולכן מומלץ לחפש באתרים עצמם.

http://www.podsafeaudio.com/

http://ccmixter.org/

http://www.jamendo.com/

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

99

מולטימדיהוידאו–בחינם וחוקי

מה שנכתב לגבי מוזיקה–תקף גם כאן.

ישנם אתרים המציעים שיתוף ואירוח של וידאו

אתרים אלו גם מספקים שירותי מדיה זורמת החוסך השקעה רבהבתשתית(בתמורה לפרסום)

אותם אתרים מספקים קודHTMLהמאפשר שילוב הסרטון בתוךאתר אינטרנט/בלוג.

דוגמאות:

http://www.clipshack.com/

http://www.gofish.com/

http://www.archive.org/details/movies -במסגרת ארכיון האינטרנט,אלפי סרטים בחינם להורדה ושימוש חופשי

http://www.youtube.com/

תוכלו לעשות השוואה בין השירותים השונים באתר וויקפדיה.

סדנאות איתן לפיתוח באינטרנט

פרק שביעי

אודי הלר/ד"ר אריאל פרנק.  ©כל הזכויות שמורות

100

מולטימדיהוידאו–חיפוש

http://www.blinkx.com/

http://clipblast.com/

http://dabble.com/

http://www.open-video.org/

http://everyzing.com/