Etkileşimli bilgi grafikleri ve haritalar oluşturmayı öğrenmek isteyen herkes için yararlı olan veri görselleştirmeye yeni başlayanlar için bir kılavuz.
Infographics ve etkileşimli haritalar aktivistler, gazeteciler ve toplumsal hareketler tarafından yürütülen birçok projenin parçası oldu. Peki tam zamanlı bir tasarımcısı olmayan kuruluşlar ne olacak? Yine de, yüksek kaliteli görsel malzemeler oluşturabilirsiniz - Gardiyan nasıl yapılacağını anlattı.
Veri
Yapmanız gereken ilk şey, ne tür verileri görselleştirmek istediğinizi anlamaktır.
Diyelim ki dünya çapında daha iyi temizlik için bir kampanya yürütüyormuşsunuz gibi. Bunun ne kadar önemli olduğunu göstermek için, halen kaç ülkenin sahip olduğu vurgulanmalıdır. Sınırlı erişim tuvaletleri temizlemek ve bu durumun son 10 yılda ne kadar az değiştiği. Bu eğitim için Dünya Bankası'ndan bir veri seti kullanacağız.
Şimdi elimizde 10 yıllık veri var ama sadece 2000 ve 2012 rakamlarına ihtiyacımız var. Bu nedenle verileri kendimiz yükledikten sonra gereksiz satır ve sütunları siliyoruz (ipucu: kaydet Orijinal dosya verilerle).
Artık verileri temizlediğinize göre, işlemeye hazırsınız. Bizim durumumuzda, oluşturmadan önce başka bir sütun eklendi - 2000 ile 2012 arasındaki yüzde farkı.
Etkileşimli bir grafik nasıl oluşturulur
Verileri bir grafikte görüntülemek, bilgileri görselleştirmenin en hızlı ve en kolay yoludur. Datawrapper, Infogr.am ve PiktoChart gibi siteler, çeşitli grafikler ve çizelgeler oluşturabileceğiniz ve bunları herhangi bir siteye yerleştirebileceğiniz hafif ve kullanımı kolay araçlardır.
Datawrapper tartışmasız en sezgisel ve aynı zamanda ücretsizdir. Zayıf taraf Bu araç, büyük veri kümelerini görüntülemede pek iyi değil, bu nedenle yalnızca son 10 yılda en fazla değişikliği yaşayan 10 ülkeyi görselleştireceğiz.
Datawrapper kullanarak bir grafik nasıl oluşturulur:
- Datawrapper web sitesine kaydolun ve yeni bir grafik oluşturun.
- Ayrıntılarınızı kopyalayıp özel alana yapıştırın.
- Ayrıntılarınızı kontrol edin.
- Şimdi eğlenceli kısım için - bir grafik şablonu seçin. Bu görselleştirme için basit bir etkileşimli grafik seçilmiştir, ancak aşağıdakiler arasından seçim yapabilirsiniz: Büyük bir sayı Sitede sunulan seçenekler.
- Son adım, programınızın son düzenlemesidir. Renkleri değiştirebilir, başlık, açıklama vb. ekleyebilirsiniz.
Etkileşimli bir harita nasıl oluşturulur
ilgili verileri göstermek için Farklı ülkeler, bir harita kullanmak en iyisidir. Size üç genel bakış sunuyoruz ücretsiz araçlar yeni başlayanlar için.
veri sarmalayıcı
Bu araç artık verilerinize dayalı bir degrade oluşturmak için bir koroplet harita seçeneğine sahiptir. Datawrapper kullanan haritalar, grafiklerle aynı şekilde oluşturulur.
Başına: en hızlılarından biri ve basit araçlar... Veri sarmalayıcı, yanlış ülke adını girdiğinizde sizi uyaracaktır. Bu aracın bir başka artısı da, üzerine gelirseniz belirli renk efsanede, haritada yalnızca bu renge sahip ülkeler vurgulanacaktır.
Karşısında: tek tek ülkeler veya şehirler için şablon yoktur.
Başına:ücretsiz ve kullanımı kolaydır (özellikle harita üzerinde noktalar oluşturmak için).
Karşısında: Ek özelliklerör. değişiklik renk uyumu yeni başlayanlar için göz korkutucu görünebilir (ancak KML dosyalarını mevcut verilerle nasıl birleştireceğinizi biliyorsanız, böyle bir harita oluşturabilirsiniz). Haritaya bir efsane eklemek zordur.
İlk başta göz korkutucu görünebilir, ancak bu araçla çok çeşitli haritalar oluşturabilir ve haritada görmek istediklerinize bağlı olarak bunları özelleştirebilirsiniz.
Başına: birçok ayar yapmanıza ve ek katmanlar eklemenize olanak tanır. Mobil cihazlarda çalışır.
Karşısında: 5'ten fazla kart oluşturmayı planlıyorsanız ve ayda 10.000'den fazla sayfa görüntülemeyi bekliyorsanız, bu aracı kullanmak için ödeme yapmanız gerekir.
Geleneksel bir infografik nasıl oluşturulur?
Geleneksel infografikler statiktir, renkli görüntü, hangi bilgilerin sayılar ve simgelerle görüntülendiği. Daha önce bahsedilen araçlar - Infogr.am ve PiktoChart - böyle bir görüntü oluşturmanıza yardımcı olacaktır. Kullanımı kolaydır - sadece sürükleyip bırakabilirsiniz gerekli bilgi ve grafikler oluşturmak için verilerinizi ekleyin. Mevcut şablon sayısı ücretsiz sürümler araçlar sınırlıdır.
Infogr.am kullanarak veri kümemizin hızlı görselleştirilmesine bir örnek:
Bu kılavuzda sunulan araçlarla, becerileri ne olursa olsun herkes güzel bir interaktif infografik veya harita oluşturabilir ve mesajlarını daha geniş bir kitleye iletebilir.
Etkileşimli Infographics nedir - bu soru müşterilerimiz tarafından giderek daha fazla soruluyor. Yakın zamana kadar, az sayıda ajans ve stüdyo genellikle neyin ne olduğunu anladı. söz konusu, ancak günümüzde çağa ayak uyduran iletişim firmaları sadece fiyat listesine dahil etmek zorunda değiller. bu servis değil, aynı zamanda verimli bir şekilde gerçekleştirmek için. Ne yazık ki, şimdiye kadar herkes bunu nasıl yapacağını bilmiyor.
Etkileşimli infografiklerin çeşitli türleri ve tanımları vardır.
İlk olarak, etkileşimli infografikler, okuyucunun görüntülenen verileri yönetmesini içeren infografiklerdir. Etkileşim, Flash veya JavaScript, HTML 5 teknolojileri kullanılarak oluşturulur.
İkincisi: yapmanızı sağlayan herhangi bir infografik çevrimiçi mod grafik biçiminde görüntülenen verileri değiştirin.
Etkileşimli infografik oluşturma projeleri, yalnızca yüksek karmaşıklık ve maliyet nedeniyle ivme kazanıyor. Etkileşimli Infographics'in en parlak örneklerinden biri, 2011 "Lukashenko'yu Başkanlıktan Tebrik Edenler" projesiydi.
Çevrimiçi olarak güncellenen infografikler, hangi devlet başkanlarının A.G.'yi tebrik ettiğini görmeyi mümkün kıldı. 2010 seçimleri ile Lukashenko. Infographics'te görüntülenen veriler cumhurbaşkanının bir fotoğrafından, bir ülkenin bayrağından, bir tablodan veya bir küreden seçilebilir. Böylece, kullanıcı hangi verilerle ilgilendiğini ve neyin gösterileceğini kendisi seçti. Tabloda ülkeleri, tebrikler sırasında devlet başkanının iktidarda olduğu süreye, hak ve özgürlükler durumuna, yaşam kalitesine, basın özgürlüğüne, fiili demokratik seçimlere göre sıralamak da mümkün oldu. ve diktatörlerin reytingi. Tebriklerin varlığı, cumhurbaşkanlarının resmi web sitelerinde kontrol edildi ve manuel olarak değiştirildi.
Lansmandan bu yana bu projeninçok zaman geçti ve bugün birçok uzman, etkileşimli infografiklerin bilgileri değiştirmesini sağlamaya çalışıyor. otomatik mod... Bununla birlikte, bu projenin bütçesini ciddi şekilde etkiler.
Görüntünün değerini anlayan büyük Batılı şirketler, etkileşimli infografikleri itibar oluşturma veya kullanıcı sadakatini artırma aracı olarak ilk kullananlar arasındaydı. sıkıştırılmış bilgi dinamikleri ve kullanıcıları aracılığıyla katılım olasılığı.
Bazı infografik türleri, bazı parametreleri etkileşimli bir biçimde özelleştirmenize ve ilginç veriler elde etmenize olanak tanır. Örneğin, kullanıcıya bir soru sorulur, belirli bir sayı girin, ardından grafik veya diyagram gözlerinin önünde değişir - yaratılışta doğrudan katılımcı olduğu tamamen yeni bir bilgi materyali elde edilir.
Örneğin, tarayıcının üçüncü yıldönümü için krom şirketi Google, web'de gezinmeye yönelik teknolojilerin ve programların gelişim tarihini görselleştirmiştir: Bağlantıyı takip etmenizi ve Batı'nın en iyi geleneklerinde renkli interaktif bilgi grafiklerinin keyfini çıkarmanızı şiddetle tavsiye ederiz.
Yukarıdaki örnekte, büyük tarayıcıların kullanıcıları Internet Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+, tarayıcılarda kullanılan yirmi yıllık teknolojileri görebilir - http protokolünden çevrimdışı AppCache uygulamalarına kadar.
Rus şirketleri henüz etkileşimli infografiklerde uzmanlaşmadı, çünkü basit infografikler bile şu anda piyasada mevcut. iyi kalite herkes değil. Etkileşimli Infographics oluşturma hizmetinin daha çok bir yenilik olmasına rağmen Rus pazarı, ajansımız bugün bu tür görevleri yerine getirmeye hazırdır, çünkü bu biçim giderek daha fazla talep görüyor. Bu hizmetin maliyeti yüksektir çünkü benzer teknolojiler bekar ve her zaman kesinlikle bireyseldir, bu da yaratılışı gerektirir yazılım ürünü her görev için "0" ile.
Testix makalenin bir çevirisini yayınladıRobbie Richards ... Orijinal:Etkileşimli İnfografik Nasıl Yapılır (6 Noktalı Kılavuz)
En iyilerinden biri büyük problemler Pazarlamacıların bugün karşılaştığı şey, ilgi çekici içerik oluşturma mücadelesidir.
İçeriği filtrelemek için arama algoritmaları sürekli değişiyor Düşük kalite... Yukarıdakilerin tümü ile birlikte, bu, içerik oluşturma stratejilerinde büyük bir değişikliği tetikliyor.
Bazı markalar uzun okumalara geçti ...
... veya Brian Dean'in Gökdelen Tekniği ile tanıttığı içerik türü.
Sonuç, interneti sular altında bırakan bir içerik patlamasıdır. Bugün sadece bloglarda her gün 2 milyondan fazla makale yayınlanıyor.
Bu içerik doygunluğu seviyesi, şirketlerin stratejilerinde çarpıcı bir değişimi tetikledi.
V son yıllar Birçoğu, infografikler gibi başka formatlar ekleyerek içeriklerini çeşitlendirmek için çalıştı. Gerçek: Pazarlamacıların %58'inin onları kitlelerin ilgisini çekmek için kullandıkları en iyi taktikler arasında sıraladığı 2016 yılında, Infographics inanılmaz bir büyüme yaşadı.
Örneğin, bazı pazarlamacılar, infografik oluşturmanın belirli profesyonel beceriler veya pahalı bir grafik tasarımcı gerektirdiğine inanır. Ama durum böyle değil.
ihtiyacın yok özel ekip geliştiriciler, etkileşimli içerik oluşturma sürecini hızlandırmak ve basitleştirmek için bir dizi araç sunan platformlarınız * varsa.
Bu makalede, etkileşimli infografiklerin oluşturulmasının sadece kolay olmadığını, aynı zamanda hedef kitlenizin ilgisini çekmede statik infografiklerden daha etkili olduğunu ve okuyucularınızı potansiyel müşterilere dönüştürdüğünü göreceksiniz.
Etkileşimli Infographics neden statik muadillerini yendi.
Infographics kavramı basittir: bir içerik parçasına okuyucularınız için mümkün olduğunca fazla değer koyun ve onları daha iyi meşgul etmek için görselleştirin.
Etkileşimli infografikler tam olarak bunun içindir.
Grafik tasarım, hem hikayenin konusu hem de veri seti ile mükemmel uyum sağlar. Kendinizi saatte 3000 kilometre hızla seyahat ederken, Uluslararası Uzay İstasyonunu geçerek Instagram'da bir yılda yayınlanan 21,9 milyar fotoğrafın en tepesine uçarken buluyorsunuz.
Etkileşimli bir infografik için görsel bir tema seçerken akılda tutulması gerekenler:
- Görüntüler ve etkileşimli öğeler, verileri hayata geçirmeye yardımcı olur mu?
- Görseller, animasyonlar ve tasarım öğeleri, içerik ortağı olarak hareket eden diğer markaların yanı sıra markanızı ne kadar iyi yansıtıyor?
- nerede yaşayacak etkileşimli grafikler? Web sitenizde yer alacaksa tasarımın sitenizin temasına veya şablonlarına uygun olmasını isteyebilirsiniz.
- Görselleştirme fikrinin hedef kitlenizin, sektörünüzün ve genel olarak hikayenizin ilgi alanlarına uygun olduğundan emin olun. Resort Infographics, üst düzey yöneticiler için tanıtım etkinliklerinden tamamen farklı bir görsel stile sahip olacak.
Bir başka harika örnek de Joho Bean infografik:
Sulu görüntüler kullanarak kullanıcıyı alışılmadık bir multimedya macerasına çıkarıyor, kahve çekirdeklerinin olgunlaşma yerinden tüketiciye yolculuğunu anlatıyor.
Kullanıcı eylemleri bir yanıt oluşturmalıdır
Etkileşimli bilgi grafikleri etkileşimli olmalıdır, ancak bu, tek tek tıklanabilir öğelerle sınırlı olmaları gerektiği anlamına gelmez.
Her kullanıcı eylemi, bütünün gerçekten kişisel bir deneyim yaratması için içerik içinde bir tür yanıt oluşturmalıdır - bu yalnızca sayfanın basit bir kaydırması olsa bile.
Gizli içerik yalnızca okuyucuyu içerik çalışmasına aktif olarak katılmaya zorlar, merakı teşvik eder ve ayrıca okuyucuların kendilerini çok az ilgilendiren bölümleri atlamalarına izin verir.
İçeriği kullanıcı girişi ile kişiselleştirin
Kullanıcılara girdikleri bilgilere dayalı veriler sunarak çok daha güçlü etkileşimi garanti edebilirsiniz. Bu, kullanıcıların istekleri doğrultusunda: daha fazlasını istiyorlar etkileşimli içerik ve daha fazla kişiselleştirme.
Bunun harika bir örneği, işinizin robotlar tarafından otomatikleştirilme riski altında olup olmadığı konusunda size bir fikir veren kişiselleştirilmiş bir infografiktir:
Kullanıcıların elde etmek için ilgilerini çeken bir meslek seçmeleri gerekir. ilgili bilgiler.
Bilgi toplamak için grafik formları dahil edin
Muhtemelen büyük bir değişim fark etmişsinizdir. çevrimiçi dünya metin tabanlı içerikten görsel içeriğe.
İnternette ve hayatımızda görsellerin gücü inkar edilemez. Gündelik Yaşam... YouTube ve Instagram'da görsel içerik hakim; YouTube, her gün Instagram'da yayınlanan 80 milyondan fazla fotoğrafla web'de en çok ziyaret edilen 3. sitedir.
Blog gönderileri ve makaleler, eğer renkli görsellere, başlıklara veya küçük resimlere sahiplerse %80 daha fazla "tüketilebilir" olurlar ve ilk saniyeden itibaren dikkatlerini çekmezse insanlar bir sitede 15 saniyeden fazla harcamazlar.
Infographics, izleyiciler ve satıcılar arasında favoridir ve bugün insanlar için 2012'ye göre %800 daha fazla ilgi çekicidir.
Üstelik, içerik endişe verici bir hızla oluşturuluyor - pazarlamacıların %60'ı her gün en az küçük bir parça yeni içerik oluşturuyor! Genel bakış makalesinde daha fazlasını bulabilirsiniz.
Gittikçe daha fazla insan içerik oluşturdukça, bir şey netleşiyor: Görünmek için öne çıkmanız gerekiyor.
Doğal olarak, içerik pazarlamacıları şimdiden görsel içeriğin geleceğini düşünüyor, şimdi ne yapabileceklerini, ne uygulayabileceklerini ve ufukta hangi yeni teknolojilerin olduğunu anlamaya başladılar. Bu tür ileriye dönük düşünme, her şeyi yaratabilecek veya tüm içerik pazarlama çabalarınızı mahvedebilecek şeydir; uyum sağlamak zorundasın yoksa boğulursun.
Infographics gibi görsel içeriklerle pazarlamacılar, eşsiz bir fırsat yaklaşırken geleceği görün. şirketler, grafik tasarımcılar ve pazarlamacıların hepsi Infographics kullanmaya başlıyor - onları kitleleri için daha da çekici hale getirmek için güncelliyorlar. İnfografikleri zaten düzenli olarak "göndermiş olsanız" bile, henüz gelişmeye başlayan trendleri bilmek için asla erken değildir, tıpkı bunları içerik pazarlama stratejilerinize nasıl uygulayacağınızı bilmek için de çok erken olmadığı gibi.
Geleceğe bakmak, hatta belki de herkesten önce birkaç numara öğrenmek istiyorsanız, şimdi tam zamanı!
İşte (yakın) gelecekte en yaygın olacak üç tür infografik.
Harika bir infografik aracı arıyorsanız, Visme'ye göz atmanızı tavsiye ederim. Başlangıç olarak, sundukları bedava hesap ve mükemmel kullanışlı fonksiyonlar tasarımla uğraşmayanlar için. Şimdi ücretsiz bir hesap alabilirsiniz.
1. Etkileşimli bilgi grafikleri
Etkileşimli web sitelerinin ve kullanımı kolay oyunların güzelliğini görmemize rağmen, etkileşimli infografikler kendi alanlarında hala oldukça yeni. Infographics gibi, belli ki bazı bilgiler içerirler ve genellikle dinamiktirler. Ancak etkileşimli öğelerin kullanılması, kullanıcılara bilgilerle bağlantı kurma ve kendi bilgilerini oluşturma yeteneği verir.
İşletmeniz, ürününüz, hizmetiniz veya mesajınız ne olursa olsun, insanların kendilerini derecelendirmelerine olanak tanıyan etkileşimli infografikler oluşturabilirsiniz (örneğin, “burada BMI'nizi hesaplayın”). Kullanıcılar ayrıca, onları daha derinden hedeflenmiş bir kaynağa gönderecek veya geri gönderecek ilgili bilgilere tıklayabilir. Açılış sayfası böylece trafik oluşturur. Kitlenizle etkileşim kurmanın son derece uyarlanabilir ve eğlenceli bir yolu.
Birçok pazarlamacı bu tür infografiklere zaten adapte oldu ve bu bilgiler hızla yayılıyor. Ancak aynı zamanda, çoğu, yine de, temel alır basit infografik:
.... interaktif Infographics ile başka neler yapabileceğinizi hayal edin.
Deneyebilirsin:
- Görüntüleri veya şekilleri arka planda öne çıkaran kaydırma tekniklerini kullanma
- Metin alanlarını genişleten "açılır pencereler" oluşturma
- Üzerine tıkladığınızda kayan resimler veya istatistikler
- İnfografiklerinizi, kullanıcıların görüntüleyebileceği birden çok sayfaya dönüştürmek
Daha fazlası için ayrıntılı örnek interaktif infografik, şuna bir göz atın:
İnfografiğinizi yüksek düzeyde etkileşimli hale getirmek için (kaydırma, açılır pencereler vb. ile) HTML5 veya CSS hakkında biraz bilgi edinmeniz veya sizin için çözmesi için başka birini tutmanız gerekir.
Ekstra çabaya rağmen, benzersiz, ilgi çekici ve etkili bir içerik parçasıyla ödüllendirileceksiniz.
Neden yakın gelecekte Infographics uygulamaya çalışmalısınız?
- Kitlenizi içeriğinizle etkileşime girmeye ve paylaşmaya teşvik eder.
- Bu, trafik oluşturur (bağlantılar aracılığıyla)
- Hedef kitlenize yenilikçi, becerikli ve zamanında ve ilgi çekici içerik sunmaya kararlı olduğunuzu kanıtlar.
- Gelişimini yönlendiren etkileşimli bilgi grafiklerinin seviyeleri vardır.
2. Gömülü video ve GIF
Bu, bugün daha sık gördüğümüz başka bir infografik türüdür. Kısa videolar ve hatta GIF (Grafik Değişim Formatı) sunan Infographics - harika yol dikkat çekin ve infografiğinizi kalabalığın arasından sıyrılın. Bu, platformları sınırlarken, infografiklerinizi gerçek zamanlı olarak paylaşabilirsiniz.
Easel.ly gibi birçok basit infografik aracı, “Yerleşik YouTube Videosu” seçeneği sunar veya Photoshop'ta oluşturduğunuz infografiklere bir video katmanı kullanarak video ekleyebilirsiniz. Powerpoint slaydınıza bir video bile ekleyebilirsiniz ve bunu infografiklere de dönüştürebilirsiniz.
Üstelik internette milyonlarca GIF bulabilir ve aynı şekilde ekleyebilirsiniz. Buradaki yakalama, sitenize düzgün bir şekilde yerleştirildiğinden emin olmak için infografiklerinizi bir URL olarak dağıtmanız gerektiğidir. Bu tür infografikleri .jpeg veya PDF formatında dağıtamaz veya kaydedemezsiniz. Kuşkusuz, bu giderek daha popüler hale geldikçe, süreci daha da kolaylaştıracak başka video ve gif ekleme araçları da olacak.
Ancak bu tür infografikleri herkesten ve hatta köpeklerinden önce kullanmak istiyorsanız, nasıl yapılacağını öğrenin, şimdi çevrimiçi bulduğunuz araçlarla başlayın.
Bir sonraki aşamaya geçmek istiyorsanız, zaten sahip olduğunuz infografikten bir video yapabilirsiniz. Bu görmek için harika bir fırsat YouTube, Instagram ve hatta Vimeo, Snapchat ve diğerleri gibi video platformlarında. Aşağıdaki video - harika bir örnek Infographics nasıl videoya dönüştürülür.
İnfografiklere neden videolar veya GIF'ler yerleştirmelisiniz?
- Bu size bir sürpriz unsuru verir - insanlar resmin hareket etmeye başlamasını beklemiyor!
- İnsanların etkileşim kurma ve bilgi grafiğinizi paylaşma şansını artıran çok eğlenceli ve orijinal.
- o iyi bir yol herkese markanızın benzersizliğini gösterin
3. Hareketli infografikler
Animasyonlu infografikler var büyük miktar görsel modeller ve çok dikkat gerektirir. Bir kullanıcı bir sayfayı görüntülediğinde, genellikle hiçbir şeyin hareket etmesini beklemez, bu nedenle tüm bu teknikleri herkesten önce öğrenmeniz iyi bir fikirdir.
Birçok animasyonlu infografik oldukça karmaşık olduğundan ve bazı bilgiler gerektirebilir. grafik dizayn, kodlama ve/veya alanda bilgi sahibi yazılım, çok takdir edilirler.
İşte bahsettiğim şeyin bir örneği:
Animasyonlu infografiklerin nasıl oluşturulacağı hakkında daha fazla bilgi edinmek istiyorsanız, Tabletop Whale'daki bu bilgi grafiğine göz atın. Ayrıca bulabilirsiniz çeşitli hizmetler bu tür infografikler oluşturmaya yardımcı olur. Her durumda, bu, infografiklerin evrimindeki en zor süreçlerden biridir.
Neden zamanınızı, enerjinizi ve/veya paranızı animasyonlu infografikler oluşturmak için harcamalısınız?
- Aslında sizi kalabalıktan ayıracak çünkü herkesin bu tür yazılımlara veya içeriğe erişimi yok.
- Birkaç yıl içinde bu sıradan olacak - bunu ilk yapanlardan biri siz olacaksınız!
- Animasyon, Infographics içindeki bilgileri daha akılda kalıcı hale getirecek
- Kullanıcılarınıza sizinle çalışmak için ilham verecek.
Bütün bunlar bilim kurgu değil
Kulağa çok teknik gelebilir ve şu anda ulaşamayacağınız bir şey gibi görünebilir, ancak bu tür infografiklerin 2-3 yıl içinde çok yaygın hale gelmesi muhtemeldir. Özellikle GIF'lerin popülaritesi artmaya devam ederken, animasyonlu infografikler ve GIF infografiklerinde güçlü bir atılım görebiliriz. Infographics, en çok tüketilen ve en sık kullanılanlardan biri haline geliyor. oluşturulan türlerİnternetteki içerik. Niye ya? Çünkü beynin bir sembolün değerini alması ve işlemesi için sadece 250 milisaniyeye ihtiyacı vardır.
Ortalama bir kişi bir web sitesinde yaklaşık 15 saniye geçirir ve sonra sıkılmaya başlarsa, elbette onları geciktirebilecek herhangi bir şeyi ortaya çıkarmak veya en azından 15 saniye veya daha kısa sürede bir mesaj almak istersiniz. Hatta bazı araştırmalar, insanların bir şeye 8 saniyeden fazla odaklanamayacağını bile kanıtladı ve bu rakam her yıl azalıyor.
Bu, sürekli bilgi ihtiyacımızın nedeni ve muhtemelen bir yan ürünüdür. Bilgi çağında yaşıyoruz ve tüm bilgiler bizim için mevcut. Ama bu aynı zamanda ne demek Daha fazla insan mesajları paylaşmaya ve her şeye cevap vermeye çalışmak olası sorular, daha fazla oluşturulan içerik arka plan gürültüsü haline gelir.
İnfografiklerin mevcudiyeti bugün bir gösterge ise, yakında her yerde olacaklar. Bu, işinizde yeni değişiklikler anlamına gelir. Tarihte hiçbir pazarlama kampanyası, her zaman aynı şeyi yaparak başarılı olmamıştır.
Buradaki fikir, infografikte bir jpeg görüntüsünden daha fazlasını görmektir. Infographics, farklı ortamlara uyarlanabilir ve çok çeşitli platformlarda kullanılabilir. Girişimciler ve pazarlamacılar bunun potansiyelini zaten gördüler. Peki sen?
V bu ders SVG, CSS ve JavaScript kullanarak etkileşimli infografiklerin nasıl oluşturulacağını öğreneceğiz. Daha az tartışılan bir konu, yeni tarayıcıların dosya desteğini artırma özelliğidir. SVG formatı... farklı bit eşlemlerörneğin PNG, JPG veya GIF, Vektör grafikleri SVG dosyalarında kesinlikle herhangi bir boyuta ölçeklenebilir ve kalite kaybı olmadan herhangi bir çözünürlükte veya ekran yoğunluğunda görüntülenecektir. Çoğu durumda, SVG dosyaları çok daha küçüktür ve daha hızlı yüklenir. Ancak en ilginç şey, bazı geliştiricilerin SVG'nin XML belirtimine dayandığını ve HTML'ye benzer şekilde uygulanabileceğini anlamamasıdır.
Bu aynı zamanda SVG dosyasındaki grafiklere ve öğelere aşağıdakileri kullanarak erişebileceğimiz ve bunları değiştirebileceğimiz anlamına gelir. CSS teknolojileri ve web geliştiricilerinin zaten aşina olduğu JavaScript. Geliştiriciler artık SVG kullanarak oldukça etkileyici animasyonlar ve efektler oluşturabilir. Bugün, web için etkileşimli vektör bilgi grafikleri oluşturarak SVG'nin gücünü keşfedeceğiz. Demoyu görüntüleyin veya indirin kaynak aşağıdaki resmin altındaki linklere tıklayarak yapabilirsiniz. Başlayalım.
SVG dosyasının hazırlanması
oluşturmanın birçok yolu var SVG grafikleri... SVG'yi elle kodlama ile yapmak mümkün olsa da, daha karmaşık grafiklerin SVG formatında dışa aktarabilen bir tür vektör yazılımına sahip olmasını isteyeceğiz. Popüler seçim tasarımcıların çoğu bize tanıdık gelebilir Adobe illüstratör , ancak aşağıdakiler gibi herkese açık başka uygulamalar da vardır: Inkscape, bizim amaçlarımız için daha uygun olabilir.
Seçtiğiniz yazılım ne olursa olsun, nesneleri bir arada gruplayabilmek ve bu grupları isimlendirebilmek (id niteliklerini yazarak) önemlidir. Bu, SVG'mizi daha sonra CSS ve/veya JavaScript kullanarak erişebileceğimiz uygun bir hiyerarşide düzenlememizi sağlar. Illustrator ve Inkscape, öğesine giderek birden çok grafik seçerek bunu yapma yeteneğine sahiptir. Nesne> Gruplandır (veya Grubu Çöz) ana menüden.
Daha sonra herhangi bir nesneye veya gruba, dışa aktarma sırasında grubun veya nesnenin id niteliği haline gelen bir ad atanabilir, bu nedenle boşluklardan kaçının, özel karakterler ve kopyalar.
Illustrator'da bunu Katmanlar panelinde yapabilirsiniz ( katmanlar). Panelde adlandırmak istediğiniz nesneyi bulun, katman alanına çift tıklayın ve istediğiniz kimliği girin. Inkscape kullanımında Nesne> Nesne Özellikleri bir nesneye veya gruba kimlik atamak için bir panel. İle de yapılabilir Düzenle> XML Düzenleyici sadece kimliği değil, sınıfları da kaydedebileceğiniz bir panel.
Örneğimizde, kaydettiğimizde SVG dosyası ve onu aç Metin düzeltici, aşağıdaki yapıya sahip olacaktır:
Yukarıdaki işaretleme bize yöneldiğimiz yapıyı gösteriyor.
SVG işaretlememizde görebileceğimiz gibi, her etiket
JAVASCRIPT ile SVG'yi HTML'ye Yükleme
HTML
SVG'yi HTML'ye dahil etmenin veya yerleştirmenin yolları vardır. Bu, etiketin kullanılmasıyla mümkündür. , etiket
Önce HTML belgemizde bir div oluşturalım:
JavaScript
Şimdi kullanarak jQuery yükleme, SVG dosyasını bir #stage bloğuna yükleyin ve ona animasyonu tetiklemek için kullanacağımız svgLoaded sınıfını atayın:
$ (işlev () ($ ("# aşama") .load ("interactive.svg", işlev (yanıt) ($ (bu) .addClass ("svgLoaded"); ise // Bunu bir web sunucusunda veya yerel ana bilgisayarda çalıştırdığınızdan kesinlikle emin olun! } } ) ; } ) ;
Önemli: DOM'sine erişmek için SVG'yi JavaScript ile yükleme. Chrome (ve muhtemelen diğer tarayıcılar) bunu yerel olarak yapmanıza izin vermez; bu yalnızca birlikte çalıştırıldığında çalışır HTTP protokolü güvenlik nedenleriyle.
CSS
Bu eğitimdeki CSS'nin herhangi bir tarayıcı özelliği içermeyeceğini, ancak bunların dosyalarda olacağını unutmayın.
Her şeyden önce, bazı stiller belirliyoruz div bloğu... SVG'yi yüklerken dosyanın blok boyutuyla eşleşmesi gerekir, bu nedenle blok boyutunu SVG tuvalinin boyutuyla eşleşecek şekilde ayarlamak önemlidir.
#stage (genişlik: 1024 piksel; yükseklik: 1386 piksel;)
SVG öğelerini şekillendirme: "dönüştürme-orijinlerini" ayarlama
Tuval içindeki öğeleri canlandırmanın anahtarı transform-origin özelliğindedir. Varsayılan olarak, SVG'deki herhangi bir öğeye yapılan tüm dönüşümler SVG tuvalinden (0px, 0px) gelir. Dönüştürmek istediğimiz herhangi bir öğe için (örneğin ölçekleme, döndürme), SVG tuvalinin sol ve üst tarafına göre uygun bir dönüştürme kaynağı ayarlamamız gerekir. Başlangıç noktası, istenen efekte/animasyona bağlı olarak her bir öğeden farklı olacaktır, ancak çoğu durumda öğenin zaten yerleştirildiği merkez noktasına eşit olacaktır. Bu oldukça sıkıcı olabilir, ancak vektör düzenleyicimizde sunulan koordinat bilgilerini kopyalamak daha kolaydır.
#coffee (transform-origin: 517px 484px;) # coffee-badge (transform-origin: 445px 488px;) # coffee-title (transform-origin: 310px 396px;) # coffee-details (transform-origin: 311px 489px;) #design (transform-origin: 514px 603px;) # design-badge (transform-origin: 580px 606px;) # design-title (transform-origin: 712px 513px;) # design-details (transform-origin: 710px 620px;) #build (transform-origin: 511px 769px;) # build-badge (transform-origin: 445px 775px;) # build-title (transform-origin: 312px 680px;) # build-details (transform-origin: 310px 790px;) #şikayet (transform-origin: 512px 1002px;) # şikayet-badge (transform-origin: 586px 1000px;) # şikayet-başlık (transform-origin: 718px 921px;) # şikayet-detayları (transform-origin: 717px 1021px;) #bira (dönüşüm-kökeni: 513px 1199px;) # bira-rozeti (dönüştürme-kökeni: 444px 1193px;) # bira-başlığı (dönüştür- kaynak: 313px 1097px; ) # bira ayrıntıları (dönüştürme kaynağı: 316px 1202px;)
Bazı ilk dönüşümleri uygulama
Bazı nesnelerin konumunu değiştirmek için başlangıç stillerini ayarlamamız gerekiyor. Ve ayrıca gizlemek gerekir belirli nesnelerüzerlerine gelene kadar göstermek istemediğimizi.
Bunu yapmak için kullanacağız CSS seçicileri... Temel olarak “sonekleri” olan nesneleri seçiyoruz.
[kimlik $ = rozet] ( / * Kimliği "rozet" ile biten herhangi bir öğe * / dönüştürme: ölçek (0. 5 , 0 .5 ); ) [id $ = başlık] (dönüştürme: ölçek (1. 8 ) çevir (0px, 48px); ) [id $ = ayrıntılar] (dönüştürme: ölçek (0, 0);)
Stil ekleme: üzerine gelme ve geçişleri uygulama
Fareyle üzerine gelinen gruptaki öğeleri seçip tekrar başlangıç pozisyonu. Sonra geçişi ayarladık 0.25s harika bir animasyon efekti için.
#timeline> g: vurgulu [id $ = rozet], #timeline> g: vurgulu [id $ = ayrıntılar] (dönüştürme: ölçek (1, 1);) #timeline> g: vurgulu [id $ = başlık] (dönüştürme : ölçek (1) çevir (0px, 0px);) [id $ = rozet], [id $ = başlık], [id $ = ayrıntılar] (geçiş: 0,25s kolay giriş-çıkış;)
Animasyona giriş
Kullanırız CSS animasyonu... İlk olarak, farklı CSS özelliklerinden bazılarını canlandırmak için bazı ana kareler oluşturmanız gerekir:
@keyframes sol ayraç-intro ( 0 % (dönüştürme: translateX (220 piksel); opaklık: 0;) 50 % (opaklık: 1; dönüştürme: translateX (220 piksel);) 100 % (dönüştür: translateX (0 piksel);)) @keyframes sağ ayraç giriş ( 0 % (dönüştürme: translateX (-220 piksel); opaklık: 0;) 50 % (opaklık: 1; dönüştürme: çeviriX (-220 piksel);) 100 % (dönüştürme: translateX (0 piksel);)) @ana kareler yavaş yavaş ( 0 % (opaklık: 0;) 100 % (opaklık: 1;)) @keyframes büyüme-y ( 0 % (dönüştür: ölçekY (0);) 100 % (dönüştürme: ölçekY (1);)) @ana kareler büyüme-x ( 0 % (dönüştür: ölçekX (0);) 100 % (dönüştürme: scaleX (1);)) @ana kareler büyür ( 0 % (dönüştür: ölçek (0, 0);) 100 % (dönüştür: ölçek (1, 1);))
Bir animasyon dizisi oluşturma
Daha önce kullandığımız svgLoaded sınıfına dayalı seçiciler kullanabiliriz.
Sormak animasyon dizisi, animasyon gecikme özelliğini ayarlayın ve animasyonun duraklatılması için animasyon doldurma modunu geriye doğru ayarlayın.
SvgLoaded #logo (animasyon: soldurma 0,5 sn kolay çıkış;) .svgLoaded # alıntı metin (animasyon: soldurma 0,5 sn kolay çıkış 0,75 sn; animasyon doldurma modu: geriye doğru ;) .svgLoaded # alıntı-sol ayraç (animasyon: sol ayraç-giriş 1 sn giriş kolaylığı 0 ,25 sn; animasyon doldurma modu: geriye doğru;) .svgLoaded # alıntı-sağ ayraç (animasyon: sağ- ayraç-intro 1s kolay giriş-çıkış 0,25s; animasyon-doldurma-modu: geriye;) .svgLoaded #background (animasyon: büyüme-y 0 ,5s kolay giriş-çıkış 1 ,25s; dönüştürme-kökeni: 512px 300px ; animasyon doldurma modu: geriye;) .svgLoaded #background> g (animasyon: büyüme-x 0 .25s giriş kolaylığı 1 .75s; animasyon doldurma modu: geriye doğru;) .svgLoaded #background> g: türün son örneği (dönüşüm kaynağı: 458px 877px;) .svgLoaded #background> g: türünün ilk örneği (dönüştürme kaynağı: 563px 877px;) .svgLoaded #coffee, .svgLoaded #design, .svgLoaded #build, .svgLoaded #complain, .svgLoaded #bira (animasyon: 0,25s kolay giriş çıkış; animasyon doldurma modu: geriye doğru; ) .svgLoaded #kahve (animasyon gecikmesi: 2s;) .svgLoaded #design (animasyon gecikmesi: 2 ,25s;) .svgLoaded #build (animasyon gecikmesi: 2 ,5s;) .svgYüklendi #şikayet (animasyon gecikmesi: 2 .75s;) .svgLoaded #bira (animasyon gecikmesi: 3s;)
WEB yazı tipleri
SVG dosyamızda özel yazı tipleri kullandığımız için bunları web sayfamıza da eklememiz gerekiyor. SVG'yi dışa aktarırken kullanılan yazı tipinin doğru adını girmek önemlidir. SVG dosyasını bir metin düzenleyicide açıyoruz ve sadece fontun kullanıldığı metni bulup font-family özelliğine bakıyoruz:
Gördüğümüz gibi SVG dosyası, adlı font ailesi kullanılarak dışa aktarıldı. 'LigGotik'... Bu nedenle, web yazı tipini CSS'de tam olarak aynı adı kullanarak tanımlamamız gerekiyor.
@ font-face (font-family: "LeagueGotik"; url ( "../fonts/league-gothic/league-gothic.eot.woff") biçim ("woff"); )
Hepsi bu! Umarız öğreticiyi beğenmişsinizdir ve faydalı ve bilgilendirici bulmuşsunuzdur. Yorumlarınızı duymaktan memnuniyet duyarız.
Tercüme - Görev odası.
Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir:
Havai iletişim ağı için destek seçimi
AC katener tasarımı ve hesaplanması
Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları
mcs51 ailesinin mikrodenetleyicileri