Javascript inside PDF – Detect Browser Acrobat Reader Version

Introduction

Yesterday I had a chance to met with “Adobe Acrobat X Pro“. I feel remorse for meeting lately to such a wonderfull software, Acrobat X.

If you need a complete PDF editor, just check out.

How Can a Pdf Editor be so Bully?

With “Adobe Acrobat X Pro”, you can :

  1. Save PDF files as Word documents with improved preservation of formatting and layouts. Relative positioning of tables, images, and even multicolumn text is preserved, as well as page, paragraph, and font attributes.
  2. Combine a wide range of file types into a polished, organized PDF Portfolio. Apply professionally designed layouts, visual themes, and color palettes. Easily add corporate logos and colors to reflect your branding.
  3. Quickly bring ideas to life through rich, interactive documents. Insert audio, Flash Player compatible video, and interactive media into PDF files, for seamless playback in Adobe Reader X or Reader 9.
  4. Automate routine, multistep tasks into a guided Action. Create, manage, execute, and share a sequence of frequently used steps that can be applied to a single PDF or batches of files.
  5. Eliminate confusion and improve version control. Easily identify differences between two versions of a PDF file by having Acrobat analyze both files and highlight changes to text and images.
  6. Enable Adobe Reader X or Reader 9 users to participate in shared reviews, fill and save forms, and digitally sign and approve PDF documents — regardless of platform or operating system.
  7. Easily convert existing forms to fillable PDF forms with intelligent form field recognition, or design them yourself using included templates. Collect data quickly and export to spreadsheets for analysis. Track and manage responses.
and more..
I will focus on the 3. – 4. and 7th items, that I marked as bold. Living and interactive documents? Inserting audio, Flash player and more interactive media.. I’m looking like this now => :O
Pdf documents are always one of the key points that is always discussed in securty forums. With Html5, we have the ability to include pdf’s to our webpages without Javascript&Activex. This new features in Html5 shows us the future of pdf documents.

You are not still excited? Then check this showcases :

– Amy Graff, Professional Student and Instructor

If you have Adobe Reader or Adobe Acrobat installed on your system and your browser supports Html5, you should see the embed pdf document, that show your Reader or Acrobat version with Javascript.

Lets take a deeper look inside this Pdf file.

This PDF created as a Form Application, and checking the Adobe Reader version and Adobe Acrobat version with ACRO_script – JavaScript.

You can see the forms in the PDF file, like a simple Html page or a server-side-languages.

I said server-side-languages because the form applications those collects a value or stores the form input in a database, these are the attirubutes of Pdf files with Acrobat.

Detect Client Browser’s Reader or Acrobat Version

Now take a look to Javascript too :

The whole code :

You can develop my example with your own Javascript knowledge.

Finally I can easily say, Javascript will never die! Jquery, Mootools, Ajax and more..

Mustafa Serhat Dündar

HTML5 Template

Html 5 ile hazırladığım template bitti.

smashingmagazine.com‘dan oldukça faydalandım, bir çok bilgi aldım, sonuç olarak paylaştığım uygulama tamamen Html 5 standardına göre hazırlanmıştır. Html5 hakkında diyebileceğim en kesin şey, smashmag’te yazdığı üzere “Html5 is not for everyone”.

Sayfaların sağ altında ufak bir JQuery eklentisi de kullandım. Yakın zamanda bloga da eklemeyi düşünüyorum aynısını.

İndex resmini Fireworks CS4’le hazırladım.

Geniş bir CSS dosyası kullandım.

Gördüğünüz template genel olarak 2 kısımdan oluşuyor. Bunlardan birincisi Fireworks desteği ile hazırlanmış index sayfası. Bu sayfayı hazırlamak için Fireworks kullanmak gibi bir zorunluluğunuz yok. Crop tool içeren herhangi bir araç kullanmanız da yeterli. Sayfadan seçtiğiniz konu başlığına göre, Html 5, Ajax, JQuery veya CSS 3 sayfalarından birine gidiyorsunuz.

Bu sayfalar aslında birbirinin tamamen kopyası. Footer’da kullanılan JQuery Mario eklentisi ise tamamen sayfaya renk katsın diye koyduğum bir şey. Beğenmezseniz footer dosyasını açarak silebilirsiniz.

Projeye https://github.com/msdundar/Html5-Template adresinden ulaşabilirsiniz.

HTML5 Nedir? HTML5'te ki Yenilikler Nelerdir?

Html 5 Nedir?

Html şüphesiz ki tek ve en güçlü front-end dili. Bu tabir son zamanlarda oldukça popüler, hatta ABD-Avrupa’da bulunan firmalar front-end developer bile istihdam ediyor. Ama iş artık eskisi gibi basit değil..

Önceden frontpage ile iyi veya kötü herkes basit html sayfalar tasarlayıp işvereni mutlu edebilirdi, oysa şimdi bu bahsettiğimiz eleman profili hem Html5 hem XHtml 1T hem CSS3 hemde Javascript ve JQuery üzerine uzman olmak zorunda. Hatta ve hatta DOM API’s diye anılan günümüzün popüler web teknolojilerinin de geliştiricisi ve kullanıcı olması gerekli.

Konumuzdan sapmadan Html5 neymiş, nası yenilikler getirmiş bi göz atalım.

HTML5 ile hayatımıza bir kaç yeni element girdi. Burada kullandığım “element” kelimesine dikkat. Bir kaç html imi veya tag’i girdi demiyorum, artık html’in üzerine eklenen şeyler birer element. Önceden de bizim im veya tag diye andığımız şeyleri W3C element diye anıyordu ancak benim için Html gerçek elementlerini 5.sürümünde kazandı.

Yeni Gelen Html Elementleri

<canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>

Bu elementlerin bir çoğunun işlevlerini isimlerinden anlamışsınızdır büyük olasılıkla, ancak ileride detaylı bir şekilde hepsini tek tek inceleyeceğiz.

Html 5 Kaynakları

Html 5 hakkında tam anlamıyla bilgi sahibi olmak için W3C’yi ziyaret etmeniz yeterli.

http://dev.w3.org/html5/spec/Overview.html

Ayrıca bu adreste müthiş bilgiler var, illustrasyonlarla süslenmiş oldukça şık bir eğitim materyali. Teknik anlamda sorular-cevaplar için bu adresi ziyaret edebilirsiniz.

Html 5’e şüphesiz ki en büyük desteği youtube verdi. http://www.youtube.com/html5 adresinden ulaşabileceğiniz bilgilerin yanı sıra sayfanın altındaki “Join Html 5 Beta” linkini tıklayarak Html 5 deneyimine ortak olabilirsiniz.

Eğer dilerseniz aynı sayfadan işleminizi geri de alabilirsiniz.

HTML 5 ile artık video oynatmak için ActiveX elementleri ve Flash player gibi eklentilere gerek yok ! Sadece bir web tarayıcınızın olması yeterli.

Html 5’te artık desteklenmeyen Html elementleri :

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>

Html 5 ile Esnek Uygulamalar

Slaytlarınızı benim gibi slideshare vb. sitelerin eklentileri ile mi paylaşıyorsunuz? Artık hepsi bitti. Html 5 ile slaytlarınızı herhangi bir harici eklentiye veya uygulamaya ihtiyaç duymadan paylaşabilirsiniz.

Nasıl mı? http://apirocks.com/html5/html5.html#slide1 Slaytları ilerletmek için klavyenizde ki sağ yön ok tuşuna basmanız yeterli.

Çok Fazla <div> Etiketi ..

Üstte ki tablodan görebileceğiniz üzere 2002 yılından beri “tableless web design” yani “tablosuz web tasarımı” dönemini yaşıyoruz. <table> elementi yerini <div> elementine devr edeli tam 8 sene oluyor.

8 senedir sayfalarımızı nasıl dizayn ediyorduk peki? Genel olarak tasarlarsak aşağıdaki şekilde ki gibi ifade edebiliriz.

Tipik bir 2 sütunlu web sayfası tasarımı bu şekilde olacaktır. Gördüğünüz gibi çok fazla div elementi kullandık ve dahası sayfamızda yaratacağımız bir çok div elementi daha olacak. Html 5 üzerimizde ki yükü biraz hafifletiyor ve yeni getirdiği elementler sayesinde aşağıda ki kolay ön tasarımı yapıyoruz.

Kod halinde bakarsak ;

<section> elementi

Sayfaları bölümlere ayırmak ve bu bölümleri isimlendirmek ziyaretçiye sayfada ulaşmak istediği veriye daha kolay ulaşması açısından yardımcı olacaktır. Örneğin ziyaretçi kolayca bir makaleden diğerine “devam et” benzeri linklere ihtiyaç duymadan geçebilir. Sayfa tasarımcısı ise bir çok sayfa oluşturma derdinden kurtulacak ve <div>’ler arasında boğulmayacak.

<header> ve <footer> elementleri

Bu elementler sayesinde sayfaların başlık kısmı ve son kısımlaırnı kolayca işaretleyebiliriz.

<nav> elementi

<nav> elementi ile blogroll veya link kısmı şeklinde ki bölümlerinizi kolayca belirleyebilirsiniz.

<aside> elementi

<aside> elementi ile sidebar’larınızı kolayca belirtebilir, CSS ile tüm önce ki elementler gibi şekillendirebilirsiniz.

Tüm bu belirtme elementleri bizi karışık <div> elementlerinden kurtarıyor ve stil işlemlerimizde bize kolaylık sağlıyor.

<article> elementi

Bu element ile sayfamızda gireceğimiz content yani içerik kısmını kolayca belirtebilir, CSS ile şekillendirebiliriz.

<video> ve <audio> elementleri

Ses ve video içerikleri 56K modemleri çöpe attığımız günlerden beri hayatımızda oldukça fazla rol alıyor, facebook, youtube, dailymotion, last.fm gibi bir çok web uygulaması sayesinde internette geçen her saniyemizde yeni bir medya dosyası okuyoruz.

Html 4 ne yazık ki bu medya içeriklerini kendi içerisinde barındırmaktan acizdi. Bu yüzden web uygulamaları Flash, QuickTime, MediaPlayer gibi plug-in’ler sayesinde bu eksikliği gideriyordu.

Flash gibi plug-in’ler sayesinde yayıncılar kendi medya yürütme arayüzlerini şekillendirebiliyor, kullanıcıya farklı medya yürütme seçenekleri sunabiliyordu (farklı play-stop özellikleri, HD kalitesi, HQ-SQ kalite seçenekleri vb.

Yeni gelen <video> elementi ile tüm bunlar artık Html’in kendi özelliği haline geldi.

“poster” özelliği ile video başlamadan önce video ekranında görünecek resmi seçebilirsiniz. MPEG-4 gibi video formatları ise kendi “poster” gösterme özelliklerini içerilerinde barındırıyor.

Audio elementinin çalışma mantığı video elementiyle benzer.

Html 5’in video ve audio elementlerinin özellikler bunlarla da sınırlı değil, dilediğiniz video oynatma codec’lerini belirtme özgürlüğüne sahipsiniz.

Bu iki elementi detaylı bir biçimde öğrenmek için bu adresi ziyaret ediniz.

<input> elementine eklenen yeni özellikler

Html 5 bir çok input özelliğini de kendisiyle beraber getirdi.

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Html 4 ile Html 5 arasında ki farklar

Tüm farkları incelemek için bu adresi ziyaret etmenizi öneririm.