Share
Även om en webbplats som är helt baserad på Flash inte är en bra idé av olika skäl, betyder det inte att du inte får använda Flash alls. Jag tycker om att tänka på Flash som krydda. Att lägga några kryddor här och där kan förbättra smaken på din webbplats vilket gör det trevligare och interaktivt för dina besökare. Naturligtvis, som vi alla vet, kan vi få problem med att lägga för många kryddor i vår maträtt. Så, Flash ska användas i måtta. Låt oss se hur detta kan göras.
Målet med varje webbplats är innehåll som människor kan läsa och njuta av, och som också förstås av sökmotorer och robotar. Så, lite Flash är nästan alltid bra. Men för mycket Flash är mindre användbart för sökmotorer, i förhållande till HTML. Flashmedia kan inkluderas var som helst i ett WordPress-tema: i rubriken, i ett inlägg eller en sida, i en sidofält eller i sidfoten. Det är helt upp till dig och dina personliga preferenser och behov. Den väldigt viktiga saken här är inte var du kommer att använda den snarare än hur du ska använda den. Och detta är syftet med denna handledning. För att visa olika sätt att bädda in Flash-media i dina WordPress-drivna webbplatser och hur du utför dessa metoder korrekt. Låt oss börja med det mest nödvändiga, vilket är en bas för de andra.
SWFObject är ett JavaScript-bibliotek som erbjuder två optimerade metoder för att integrera SWF-filer i webbsidor - ett markupbaserat tillvägagångssätt och en metod som bygger på JavaScript. Det använder diskreta JavaScript för att upptäcka Flash Player och undvika brutna SWF-innehåll, och är utformat för att göra inbäddade SWF-filer så enkelt som möjligt. Den stöder användningen av alternativt innehåll för att visa innehåll till personer som surfar på webben utan plugins, för att hjälpa sökmotorer att indexera ditt innehåll eller att peka besökare på nedladdningssidan för Flash Player. Allt detta drivs av en liten JavaScript-fil.
SWFObject är den mest populära och effektiva Flash-inbyggnadsmetoden som finns tillgänglig idag. Den används i stor utsträckning av högprofilerade webbplatser som YouTube, Microsoft Windows och Skype.
För att behöva ta reda på vilken markering och JavaScript-kod som ska användas kan det vara ett tråkigt jobb, och SWFObject ger dig en extra SWFObject Generator för att göra det här arbetet för dig. Du kan hitta de senaste versionerna av SWFObject och SWFObject Generator på Google Code. Ladda ner SWFObject och HTML-versionen av SWFObject Generator. Huvudskillnaden mellan HTML och AIR-versionen är att den sista har funktionen kopiera till klippbordet och kan spara HTML-sidan på din hårddisk.
När du extraherar innehållet i swfobject_2_2.zip Du kommer att få en mapp som heter Flashobject som innehåller följande filer:
Du kan också ladda ner SWF-filen som vi ska använda under resten av handledningen på Free Flash Animations. Byt namn på den till nosmoke.swf för korta.
OK. Allt är klart. Låt oss gå vidare.
Nu måste du ladda upp alla nödvändiga filer på din server. Dessa är swfobject.js, expressInstall.swf och nosmoke.swf. Placera dem i din aktiva templatmapp. I detta fall är det här tjugo elva temmapp. Om du har många .sWF filer du kan placera dem i en undermapp.
För att skapa och infoga den nödvändiga koden i WordPress, följ dessa steg:
Accentsconagua
tagg i kroppsdelen av koden. Allt från till får väljas. Kopiera den.
- Klicka på pilen till höger om Utseende i sidfältet på din WordPress Dashboard. Klicka sedan på Editor.
- På höger sida av skärmen har du nu en lista över alla mallar som finns i mappens rotkatalog. Klicka på titeln på önskad .php fil (i det här fallet footer.php). Detta laddar det i temredigeraren.
- Klistra in koden du kopierade från kodgeneratorn till lämplig mallfil. I det här exemplet strax ovanför
- För huvudinnehållet, välj och kopiera följande:
- Tillbaka i WordPress, öppna upp header.php genom att klicka på Utseende> Redigerare> header.php. Klistra in den markerade texten i huvuddelen ovanför
Kodgeneratorn skapar koden för dig baserat på de val du gör. Det genererar koden inom grundstrukturen på en HTML-sida. Den genererade koden är kompatibel med webbstandarder och stöder införlivandet av alternativt innehåll. JavaScript-elementen i tagg skapas som håller objektet och nestad objektinformation / metod som avgränsar vilken .sWF ska spelas, bredden och höjden av det och vilket alternativt innehåll som ska visas om lämplig Flash Player-version inte hittas. Observera att speciell kodning används för att ta hänsyn till behoven i Internet Explorer, till exempel: Nu nosmoke.swf animering kommer att visas på varje sida under sidfoten. Självklart är det här ett exempel på dummy, men jag använder det bara för presentationsändamål bara för att det kan bli gjort snabbare och enklare. Självklart behöver du lägga till några stilregler för att få bättre utseende. Du kommer att se hur kort tid.
Steg 4 SWFObject Konfiguration förklaras
Statisk vs Dynamisk Publishing
Statisk publicering använder markering för att integrera både SWF-innehåll och alternativt innehåll och använder diskreta JavaScript för att lösa en serie problem som inte kan lösas med uppmärkning ensam. Det främjar den faktiska utformningen av standardkompatibla markup och kommer därför särskilt att vädja till webbstandardutvecklare. Denna mekanism för inbäddning av Flash-innehåll är inte beroende av ett skriptspråk, så ditt Flash-innehåll kan nå en betydligt större publik. Om du har Flash-plugin installerat, men har JavaScript inaktiverat eller använder en webbläsare som inte stöder JavaScript, kan du fortfarande se ditt Flash-innehåll.
Dynamisk publicering använder markup för att bara definiera alternativt innehåll och använder diskreta JavaScript för att ersätta detta med SWF om den minsta versionen av Flash Player är installerad och tillräckligt med JavaScript-stöd finns tillgängligt. Dynamisk publicering är mindre ordentlig än statisk publicering och integrerar mycket bra med skriptprogram. Om du har Flash-plugin installerat, men har JavaScript inaktiverat eller använder en webbläsare som inte stöder JavaScript, ser du alternativet i stället för ditt inbäddade Flash-innehåll.
Du måste bestämma vad som är den bättre lösningen för dig beroende på dina mål och behov.
Använda Adobe Express Install
Adobe Express Install är en mekanism som är inbyggd i Flash Player, som låter dig hämta den senaste versionen av Flash-plugin-programmet direkt utan att behöva bläddra till Adobes webbplats. Express Install är en valfri funktion för webbförfattare och visar en standardiserad nedladdningsdialogruta när en besökare redan har installerat Flash Player 6.0.65 eller senare på Win- eller Mac-plattformar, men en senare plugin-version krävs. Express Install använder ett popup-bekräftelsesfönster och är därför en valfri funktion som kan aktiveras av webbförfattare. Om du klickar på Yes, öppnar Express Installera en nedladdningsdialogruta med begäran om att stänga alla webbläsarfönster. Efter installationen av Flash Player öppnas ditt webbläsarfönster och vidarekopplas dig till den sida där Express Install startades. Om du klickar på Nej, kommer SWFObject återgå till alternativt innehåll.
Du kan aktivera Express Installera genom att kryssrutan Adobe Express Installera och justera sökvägen till expressInstall.swf fil, om det behövs. För att testa om den här funktionen fungerar och se den i åtgärd bara gör det här lilla tricket - byt ut den nödvändiga Flash-versionen till något som är större än den senaste versionen av Flash Player (till exempel 14.0.0). Och du kommer att få detta resultat:
Meddelandet berättar att innehållet kräver Adobe Flash Player 11.1, eftersom det här är faktiskt den senaste versionen av plugin (för tillfället) och version 14.0 existerar inte än.
Steg 5 SWFObject Definition Förklarad
I SWFObject Generator kan du hitta en massa ytterligare attribut och parametrar tillgängliga för dig. De är dolda som standard. Så, för att få tillgång till dem klickar du bara på "mer" längst ner i definitionsområdet för SWF. Därefter bör du se följande:
Beroende på dina val gjorda här kommer ditt Flash-innehåll att verka och se annorlunda ut. För en beskrivning om vad ett visst attribut eller parameter gör, sväng bara över sitt namn.
Namnattributet är användbart när du behöver referera till din Flash-film med skriptspråk. Som jag sa innan du kanske behöver lägga till ytterligare styling till ditt Flash-innehåll. För att göra detta lägg bara till ett värde för klassattributet som "flashmovie". Den här klassen läggs till objektet taggelementet i din genererade kod. Så, nu behöver du bara lägga till följande stilregel i ditt tema stilark:
object.flashmovie // din css-kod här
Steg 6 Använda Bädda in SWF Online Generator
Det finns ett annat enkelt sätt att få den nödvändiga detekteringskoden - genom att använda en onlinegenerator. En bra man kan hittas på embed-swf.org. Den är baserad på SWFObject HTML och JavaScript Generator. För att bearbeta följa dessa steg:
- Öppna konfiguratorn. Gränssnittet är indelat i fem flikar.
- Skriv önskade parametrar i varje flik
- Klicka på fliken Exportera. Här kan du välja en exportmall. Om du vill använda din egen HTML-mall väljer du Anpassad. För att lära dig hur du skapar en, kontrollera dokumentationen.
- Klicka nu på Visa HTML-kod. Din HTML-kod visas. Klicka på Hämta för att spara filen på din hårddisk.
Om du behöver kan du återställa standardinställningarna när som helst genom att klicka på länken i övre vänstra hörnet. Du har också ett alternativ att exportera / importera sparade inställningar för enkel återanvändning.
Du behöver inte oroa dig för swfobject.js fil. Lämna bara standardalternativet för SWFObject som ska använda swfobject.js filen värd Google.
Steg 7 Använda Kimili Flash Bädda in
Enligt sin hemsida är Kimili Flash Embed:
... ett plugin för populära bloggar med öppen källkod som gör att du enkelt kan placera Flash-filmer på din webbplats. Byggd på SWFObject JavaScript-koden är det standardkompatibelt, sökmotorvänligt, mycket flexibelt och fullt utrustat, liksom lätt att använda.
Installera plugin är enkelt:
- I din Dashboard expandera plugin-menyn och klicka på Lägg till nytt
- I sökfältet typ "flash inbädda"
- När du ser Kimili Flash Embed klicka på Installera
- Efter installationen gå till Plugins och aktivera den eller klicka bara på Aktivera nu
För att lägga till flashinnehåll i dina inlägg eller sidor gör du följande:
- Skapa ny post / sida eller öppna befintlig
- Byt till HTML-vy
- För att lägga till en Flash-animering, använd följande kortnummer, ersätt sökväg, y och x-parametrar med respektive webbadress, höjd och bredd på din swf:
[kml_flashembed movie = "/ path / to / your / movie.swf" /]
- Filmparametern är den enda som krävs - höjd och bredd är valfria. Även om det är mest effektivt att stora din .sWF Under exporten ändras parametrarna för höjd och bredd a .sWF fil. Om du gör det, var noga med att hålla siffrorna i skala för att undvika förvrängning.
Kimili Flash Embed Tag Generator är en modifierad version av SWFObject 2 HTML och JavaScript Generator och är integrerad tätt i WordPress, vilket gör det mycket enkelt att bygga KFE-taggar med rätt formatering.
Lägga till Flash via KFE Tag Generator:
- För att starta Tag Generator, ett guidenliknande gränssnitt som hjälper dig att skapa den nödvändiga KFE-taggen, klicka på knappen med Flash Player-ikonen. (du måste växla till visuellt läge för att se det)
- Ett fönster som liknar SWFObject Generator kommer att dyka upp
- Allt du behöver göra är att fylla i nödvändiga parametrar och klicka sedan på Generera
Du kan ställa in standardinställningar i Admin-menyn. Välj Inställningar> Kimili Flash Bädda in.
Alternativen här är ganska mycket desamma, förutom dessa för JavaScript längst ner. Du kan ändra det första alternativet till "Nej", om du redan har swfobject.js som refereras någon annanstans i din kod. Om du väljer att använda Kimili Flash Bädda in för att skapa en referens till swfobject.js genom att markera "Ja", har du två alternativ från var du ska referera till filen - Google Ajax Library eller Internal. Klicka på "vad är det här?" för att se vad skillnaderna är. När du är klar klickar du på Uppdateringsalternativ.
Steg 8 Ge alternativt innehåll
Dessa dagar är de ledande sökmotorerna som Google och Yahoo! kan indexera textinnehåll och länkar inuti SWF-filer medan de bläddrar igenom programmets stater, som om de var riktiga besökare. Så varför behöver du fortfarande använda alternativt innehåll för att hjälpa sökmotorer att indexera ditt innehåll? Detta är av ett par skäl.
- För det första kan inte alla sökmotorer indexera Flash-innehåll.
- För det andra, eftersom en SWF-fil vanligtvis är full av multimediainnehåll, kommer det fortfarande mycket innehåll att vara osynligt för sökmotorer. Du behöver fortfarande använda alternativt innehåll för att visa beskrivande material för personer med mindre tekniskt stöd och för att hjälpa besökare att hitta nedladdningssidan för Flash Player.
- Och slutligen kan sökmotorerna indexera både Flash-innehåll och alternativt innehåll. Även om en webbförfattares synvinkel betraktas dubblet innehåll betraktas det som en bästa praxis eftersom det gör att du kan skapa webbinnehåll som är tillgängligt för den bredaste målgruppen som är möjligt, till sökmotorleverantörer erbjuder det några knepiga utmaningar, till exempel hur att bestämma vilka resultat som ska visas i sökmotorns listor. När du skapar sökmotorvänligt innehåll borde du alltid behålla denna dualitet i åtanke. Se till att ditt HTML-innehåll är en sann reflektion av ditt Flash-innehåll och låt en sökmotor bestämma vilket innehåll som kan visas bäst som ett sökresultat.
Du kan till exempel göra följande för att skapa bättre alternativt innehåll:
- Använd exakt samma kopia och länkar som i ditt Flash-innehåll
- Lägg till bilder och textbeskrivning till Flash-innehållet
- Lägg till kopia för att förklara var Flash Player kan hämtas
- Lägg till CSS i stil och placera din HTML för att bevara webbsidans visuella identitet.
Som standard publicerar SWFObject 2 Generator följande alternativa innehåll:
Detta resulterar i en "Get Adobe Flash Player" -knapp för att peka besökare på var de kan hämta pluginprogrammet. För att testa detta måste du inaktivera ditt Flash Player-plugin. I Firefox gå till Add-ons> Plugins. Hitta Shockwave Flash och klicka på "Inaktivera" -knappen. Nu när du laddar om sidan ska du se följande:
Du kan ersätta standardkoden med den här:
Nu om besökare bläddra på sidan utan Flash-plugins ser de en bild istället för den faktiska animationen:
Sökmotorer och besökare som surfar på webben i en textbläddrare eller med bilder som är inaktiverade, kommer att se innehållet som i denna skärmdump:
Om du har en banner med flera stater kan du ta en bild för var och en av dem och sedan infoga dessa bilder som alternativt innehåll. Det kan se ut så här:
För ett animations- eller videoinnehåll kan du använda samma princip. Du kan fånga flera viktiga bilder och använda dem för att beskriva innehållet i din animation / video. Här är basschemat:
Beskrivning av ram 1- Beskrivning av ram 2
- Avbildning av ram 3
Personer utan Flash-plug-in kommer att se en bildsekvens med beskrivningar och personer som surfar på webben i en textbläddrare eller med bilder som är inaktiverade kommer att se en numrerad uppsättning beskrivningar.
Ett annat sätt att göra detta är att inkludera en miniatyrbild för video och en textbeskrivning av filmen.
Du kan också lägga till några rader av kopia till ditt alternativa innehåll som förklarar att den avsedda interaktiva eller audiovisuella användarupplevelsen kräver den senaste versionen av Flash Player, med en länk till hämtningssidan.
Du kanske också vill skapa ytterligare stilregler för att se till att den visuella identiteten eller layouten på en webbsida förblir intakt. Tänk bara på alternativt innehåll som ett tillfälle att kommunicera med din målgrupp, även om de kanske inte har det riktade tekniskt stöd.
Slutsats
Det är allt. Nu vet du hur du bäddar in Flash-innehåll på din WordPress-powered webbplats enkelt och korrekt. Innehållet kan vara allting - animering, applikation, film, spel och vad du vill och behöver. Med lite fantasi kan du göra din webbplats riktigt cool, å ena sidan, och fortfarande användbar, å andra sidan.
Beskrivning av ram 1