pnghack 1.0 presentation
DESCRIPTION
A quick presentation of the PNGHack project.TRANSCRIPT
![Page 1: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/1.jpg)
PNGHackThe end of 13 years PNG issues on IE
![Page 2: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/2.jpg)
13 Years ?
![Page 3: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/3.jpg)
13 Years ?
• PNG was introduced in 1995
![Page 4: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/4.jpg)
13 Years ?
• PNG was introduced in 1995
• IE 5.5 was released in 2000
![Page 5: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/5.jpg)
13 Years ?
• PNG was introduced in 1995
• IE 5.5 was released in 2000
• IE 6 one year later in July 2001
![Page 6: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/6.jpg)
13 Years ?
• PNG was introduced in 1995
• IE 5.5 was released in 2000
• IE 6 one year later in July 2001
• We are now in 2008 and IE 6 is still the most used browser around the world
![Page 7: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/7.jpg)
What’s the problem ?
![Page 8: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/8.jpg)
What’s the problem ?
• IE 6 supports PNG files only by using non-valid DirectX filters, or other namespaces like VML (Vector Markup Language).
![Page 9: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/9.jpg)
What’s the problem ?
• IE 6 supports PNG files only by using non-valid DirectX filters, or other namespaces like VML (Vector Markup Language).
• Most developers excepts IE to handle with PNG files without these deprecated technologies ...
![Page 10: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/10.jpg)
The actual solutions ?
lacks and fails on ...
![Page 11: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/11.jpg)
The actual solutions ?
• easy maintenance,
lacks and fails on ...
![Page 12: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/12.jpg)
The actual solutions ?
• easy maintenance,
• cross-browser DOM compatibility,
lacks and fails on ...
![Page 13: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/13.jpg)
The actual solutions ?
• easy maintenance,
• cross-browser DOM compatibility,
• scalability and further developments ...
lacks and fails on ...
![Page 14: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/14.jpg)
This means ...
![Page 15: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/15.jpg)
This means ...
• It’s every time hell when the designer comes around with an über-sexy-glossy-webdesign
![Page 16: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/16.jpg)
This means ...
• It’s every time hell when the designer comes around with an über-sexy-glossy-webdesign
• The customer and the marketing team are pissed off.
![Page 17: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/17.jpg)
This means ...
• It’s every time hell when the designer comes around with an über-sexy-glossy-webdesign
• The customer and the marketing team are pissed off.
• And you got frustrated once again about the blue E ...
![Page 18: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/18.jpg)
![Page 19: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/19.jpg)
Why PNGHack ?
![Page 20: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/20.jpg)
More than a “quick fix”
![Page 21: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/21.jpg)
More than a “quick fix”
• It’s a light, unobtrusive and well documented JavaScript Library, meeting the needs of front-end developers.
![Page 22: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/22.jpg)
More than a “quick fix”
• It’s a light, unobtrusive and well documented JavaScript Library, meeting the needs of front-end developers.
• It’s evolving and supported by a bunch of developers.
![Page 23: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/23.jpg)
More than a “quick fix”
• It’s a light, unobtrusive and well documented JavaScript Library, meeting the needs of front-end developers.
• It’s evolving and supported by a bunch of developers.
• It’s open-source and free !
![Page 24: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/24.jpg)
Lets you handle ...
![Page 25: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/25.jpg)
Lets you handle ...
• Namespaces : it’s not only dedicated to valid HTML,
![Page 26: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/26.jpg)
Lets you handle ...
• Namespaces : it’s not only dedicated to valid HTML,
• Elements : you’re able to hack what ever element you want, (img, input, image, ...)
![Page 27: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/27.jpg)
Lets you handle ...
• Namespaces : it’s not only dedicated to valid HTML,
• Elements : you’re able to hack what ever element you want, (img, input, image, ...)
• Attributes : you can define any attribute to retrieve the image source.
![Page 28: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/28.jpg)
With many tools ...
![Page 29: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/29.jpg)
With many tools ...
• 3 hacking methods,
![Page 30: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/30.jpg)
With many tools ...
• 3 hacking methods,
• 2 useful properties,
![Page 31: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/31.jpg)
With many tools ...
• 3 hacking methods,
• 2 useful properties,
• 1 storing collection,
![Page 32: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/32.jpg)
With many tools ...
• 3 hacking methods,
• 2 useful properties,
• 1 storing collection,
• 9 optional parameters partially supporting Regular Expressions,
![Page 33: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/33.jpg)
With many tools ...
• 3 hacking methods,
• 2 useful properties,
• 1 storing collection,
• 9 optional parameters partially supporting Regular Expressions,
• a hundred of combinations .. and solutions !
![Page 34: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/34.jpg)
The future ?
![Page 35: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/35.jpg)
The future ?
• PNGHack is going to support W3C CSS 2.1 background specifications in version 2.
![Page 36: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/36.jpg)
The future ?
• PNGHack is going to support W3C CSS 2.1 background specifications in version 2.
• We will also keep up the work on PNGHack 1.0 by introducing new features.
![Page 37: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/37.jpg)
The future ?
• PNGHack is going to support W3C CSS 2.1 background specifications in version 2.
• We will also keep up the work on PNGHack 1.0 by introducing new features.
• And more ...
![Page 38: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/38.jpg)
Not convinced ? There still are other solutions...
![Page 39: PNGHack 1.0 Presentation](https://reader035.vdocuments.us/reader035/viewer/2022062705/556432e4d8b42ad3308b489a/html5/thumbnails/39.jpg)
The end.Feel free to join our community by reporting issues, filling demands and participate to our discussion group.
http://png-hack.googlecode.com
© 2008 Yves Van [email protected]
Distributed under MIT X11 License