w3 « WordPress.com Tag Feed

Web Coding Basics

keystonelemur — Tue, 07 Oct 2008 23:15:08 +0000

A quick tutorial for some of you who don't understand HTML or CSS, just a basic one for now, I'll expand upon it later.

Section 1- The Basics
HTML is one of the easiest languages to learn, but has many uses in comparison, making it a valuable asset in all of your projects. HTML is a globally accepted language in Web Design, and honestly I don't get how anything could be made without understanding this base language, but you didn't come here to listen to me rant, did you? On to the content then!

Tags are pretty simple, with almost all of them having an opening <> and a closing </>. All documents start with the same basic tags.
<html>
<title>Test Site!</title>
<body>
</body>
</html>

simple enough, eh? That's all you need to have a website up, but then again, its just a blank page, where's all the goodies?

<html>
<title>Test Site!</title>
<body>
<p>
WOW! A section title!
</p>
<p>
blah
</p>
</body>
</html>

ya, no... You have text, but that's ALL it is, that's not even close to a website, it might be good to make yourself feel warm and fuzzy inside that you made something in HTML, but that's all it's good for. Let's get into some text tags to make this more interesting!

<b></b> - Bold tag
<i></i> - Italic tag
<u></u> - Underline tag
<h1></h1> - Header tag, can be 1-6 to make the size bigger/smaller

Let's try this again now!

<html>
<title>Test Site!</title>
<body>
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>

better, but no good, all you have is still text, onto the next section then.

Section 2- Color

Color makes things more interesting to be honest, without it, all you have is black and white, which does absolutely nothing with aesthetics (how it looks...).
One more time with some color!

<html>
<title>Test Site!</title>
<body bgcolor="black">
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>

Ya, that was smart, you have a black BG, cool, eh? NO! You also have black text, good luck with that, now its not boring, its blank... lets try this again

<html>
<title>Test Site!</title>
<body bgcolor="black">
<h1><font color="white">
WOW! A section title!</font>
</h1>
<p><font color="white">
blah blah blah blah <b>blah!</b></font>
</p>
</body>
</html>

Ya, there we go, that's actually readable, but honestly, who wants to go through all of that!? Lucky for you there's css, which brings us to the next section.

Section 3- Hex Color
Hex is, put simply, your best friend, or your worst enemy. Hex color codes are in, as the name suggests, 6 digits, sometimes different, but I wont cover that here. The hex system has 16 numbers, as opposed to the decimal system. 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 00 is the lowest value, meaning 0, and FF being equal to 256, notice something? It's similar to the RGB method, infact, it is, just in hex. 000000 is black, of course, with no value, and FFFFFF is white, with all value, and RGB is the order, so
FF0000 Red
00FF00 Green
0000FF Blue

I'm not going to go through all the math involved in hex, but the dead basic, as not to bore you
Decimal - Hex
1 - 16^1
10 - 16^2 (256)
100 - 16^3 (4096)

And if this rings a bell, you used windows 95, and hopefully trashed it by now, and its 256 colors of joy. Hoo-rah for 32-bit!

a color picker is very useful for these things, maybe color cop or something else, sourceforge is your friend

Section 4- CSS

This will save your life, quite literally. Your boss decides he wants another page, and a bunch more text with all red font, that leaves you to change EVERY LAST FREAKING FONT TAG. No fun, eh? Just hope you never learn the hard way. CSS can be a seperate text document that controls the style for MULTIPLE pages, making it easy to change it up, and lucky for you, its not hard to learn either! For not, lets start with just css in the document instead of external. If I catch you with font tags after this, you will die a most painful death(not really, just dont use them...)

<html>
<title>Test Site!</title>
<head>
<style type="text/css">
h1 {color: #ff0000}
h2 {color: white}
p {color: rgb(0,255,0)}
</style>
</head>
<body bgcolor="black">
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>

That's better, no more evil font tags! In case you didnt notice, the three tags up there demonstrate the different ways to define color, hex, names, and rgb values.

Section 5- Background images/colors with css

here's a basic rundown of how to get backgrounds to work using css

body
{
background: #FF0000;
}

A colored background

body
{
background: url(pic.gif) no-repeat top;
}

A pic with no repeat

body
{
background: #00FF00 url(pic.gif) no-repeat fixed top;
}

A pic with no repeat, and is fixed at the top of the screen

Section 6- Links and Images

Again, all you have is text, what fun is that? You need some images and some links to get the site running! Lets use an image as a link for this example

<html>
<title>Test Site!</title>
<head>
<style type="text/css">
h1 {color: #ff0000}
h2 {color: white}
p {color: rgb(0,255,0)}
a {color: green}
</style>
</head>
<body bgcolor="black">
<a href="testsite.com"><img src="testsite.com/banner.jpg" alt="Our banner! yey!" border="0">
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>

just make sure you have the image, eh? You can use text instead, and notice that I changed the css too, now all links are green. MAKE SURE YOU HAVE BORDER="0" , lest you want a tacky blue border around your image(in this case, its now green )

Section 7- Tables and Div(ision) tags

Two tags that are probably life savers in organizing things, the table and the div tag, but lets start with tables. Think Microsoft Excel, with columns and tables, same basic idea. Table utilizes <th> (table head), <tr> (table row), <td> (table block). (thanks mukou)

<table>
<tr>
<td>Apple</td>
<td>Orange</td>
</tr>
<tr>
<td>Strawberry</td>
<td>Bannana</td>
</tr>

That'll make a 2x2 table with the information given, simple enough eh? <table bgcolor=""> can also be used

The div tag can be used to define sections, and as you'll learn in further learning in css, classes are a lifesaver. CSS can define multiple classes in the div tag, meaning different color, font, size, and other things in each different class. I would explain it, but it's one of those things that's best for you to learn from the pros, they can explain it ALOT better than I can(/will, lol)

<div bgcolor="red">red section</div>
<div bgcolor="green">green section</div>

But do me a big favor and never use that combination, please, for the sake of soon to be color-blinded web-surfers, dont do it (read color tutorial below)

Conclusion
hope that helped

Programs-
Notepad ++
HTML Kit (also good for php[later tutorial])
Dreamweaver(good luck wih the cash )

Color tutorial(also by me)
http://www.deviantart.com/deviation/56255162/

This will help explain the woes of color usage, make yourself look alittle more like a pro early with the right color combinations!

for more advanced learning in scripts, go to www.w3schools.com !

Till next time!

♣♣REMADE THE SITE!♣♣

d4rknn3s — Mon, 01 Sep 2008 04:08:06 +0000

wooooo i remade the website(http://d4rknn3s.110mb.com). its way better than the old one

new site features:

-more space :)

-no tables.. if you dont know HTML you probably dont know what a table is. lets just say tables make you look like a n00b.

-VALID xhtml and css

-easier to edit

i removed some things like the poll and the hit counter and the thing that tells you your ip i might put them back on.

COMPLETELY UNRELATED!

this(opens in a new tab/window) is friggin awesome!

THIS VIDEO IS AWESOME!

CSS Browser Reset

Jakob E — Tue, 12 Aug 2008 18:01:32 +0000

Application interpretation is how an application

When designing CSS one of the most annoying tasks is to make YOUR design work well in if not all then at least the most common browsers.

One way of getting a head start is turning of as much of the application interpretation as possible. In the case of CSS - application interpretation is the visual tag presentation provided by the browser.

To illustrate application interpretation try adding a <h1> header to a web page without any styling - then view the document in a browser. The size, font type, margin, padding, color, line-heigt etc. are all set by the browser.

____________________________________________________________________________

____________________________________________________________________________

HTML Document Object Model

Lewis — Mon, 23 Jun 2008 10:35:16 +0000

The HTML Document object model is a w3 standard for accessing and working with HTML. It provides a hierarchial, tree like structure, where "objects" within the document contain attributes, and even other objects. Using scripts, these "parent nodes" (higher level objects), and their "child nodes" (contained objects) can be viewed and altered according to the author's will, and user inputs. To view or alter these elements, "GetElementById" may be used in Javascript eg:

document.GetElementById("Div1").innerHTML = "this text"

would select the element with the id "Div1" and change the text it contains to "this text". Following this, exclusive to IE, DOM, enables the use of document..all"Div1") to select all of the objects below "Div1" in the heirarchy.

Events can be used within scripts in objects, to provide user interactivity, and to access other elements of the DOM. Events such as OnKeyPress, and OnKeyDown allow such events (as user presses keys) to run scripts within the HTML. The difference between OnKeyPress and OnKeyDown, is that while OnKeyPress will trigger an event repeatedly as long as the key is held down, OnKeyDown will trigger only on the initial keypress.

Event Bubbling is a function performed within the DOM process, which occurs when events are triggered by the user. If an event is triggered by an element, but no associated process is included within the object, the event is shifted up the DOM heirarchy in a 'bubbling' process, until it reaches an element which can process the event.

Source:

MSDN: About the DHTML Object Model

Byte Order Mark - BOM

EbNCaNa — Mon, 23 Jun 2008 08:59:04 +0000

تعريف :

Byte order mark هي مجموعة رموز في بداية الملف النصي ووظيفتها اعلام المستخدم بان هذا الملف تابع لمجموعة محارف يونيكود Unicode فاما ان يكون بترميز UTF-8 او UTF-16 او UTF-32 .
هذه المجموعة من الرموز لا تكون ظاهرة بالملف واذا كنا نريد ان نعرف ترميز ملف معين فنستطيع ان تفتح الملف باي محرر HEX وننظر الى بداية ترتيب بيانات قيم HEX في المحرر والرسم التوضيحي التالي يبين ترميز الملف حسب مجموعة الرموز الاولى :

وطبعا إذا لم يكن يحوي تيار البيانات أي من هذه القيم فإن هذا الملف لا يُصنف على أنه من مجموعة الملفات المرمزة بواسطة Unicode .

العلاقة بين BOM و الترميز UTF-8 :

هناك علاقة وطيدة بين الـ Byte order mark والترميز العالمي المشهور UTF-8 فعند استخدامنا لأي محرر تقريبا واردنا حفظ الملف بترميز UTF-8 فان المحرر تلقائيا باضافة هذه الرموز الى بداية الملف والهدف كما اسلفنا ان يتم اعطاء هوية لهذا الملف على انه من مجموعة محارف Unicode والا فانك عندما تفتح الملف من جديد بدون هذه الرموز فان المحرر لن يتعرف على الترميز المناسب لهذا الملف وبالتالي فانه سيعتبر ترميز الملف ANSI او الترميز التلقائي للملفات عند فتحها بواسطة هذا المحرر .

أهمية حذف الـ BOM من الملفات التي بترميز UTF-8 :

انه ومن المهم جدا للمبرمجين ان يقوموا بحذف هذه الرموز من بداية الملف والسبب ان بعض لغات البرمجة مثل لغة php لا تقبل من اي اشارة ان تتقدم على بعض دوالها المهمة مثل دالة الجلسات Session او الدالة Header والابقاء على رموز الـ BOM يعني تعطل الملف واعطاء خطأ برمجي لا يعرف المبرمج سببه في كثير من الاحيان لجهله برموز الـ Byte Order Mark فيأخذ بالبحث في المواقع والمنتديات عن سبب الخطأ ويحاول ان يعرض الكود الذي في داخل الملف على من هم اكثر خبرة منه علهم يعرفون السبب وفي الحقيقة ان الكود خالي من الشوائب والعيوب البرمجية تماما لكن سبب الخطأ البرمجي هو الرموز الاضافية في بداية الملف .

يمكن أن يقول البعض أنه ما من حاجة لاستخدام الترميز UTF-8 في ملفاتنا لأننا نستخدم الترميز ANSI ولا توجد مشكلة، والجواب طبعاً أن هذا الترميز هو الترميز العالمي والأكثر شهرة والأكثر فاعلية لأنه يعمل مع جميع لغات العالم ويعمل في جميع أنظمة التشغيل ولأنه متوافق أيضا مع المعايير القياسية للمواقع W3 .

مشاكل وعقبات عند استعمال الترميز UTF-8 وعلاقتها بالرموز الاضافية BOM وحلولها :

1- انا مبرمج اريد الانتقال من البرمجة بترميز ANSI الى الترميز UTF-8 ولكن المتصفح يظهر خطأ برمجي دائما مع العلم بان الكود سليم وخالي من الشوائب البرمجية .

الجواب : من الواضح انك تستخدم دالة php طلائعية اي انها لا تقبل لاي رمز ان يسقبها في الملف والا تعطل عملها نهائيا وهنا فانك تستعمل الدالتين Session و Header ... الحل ان تقوم بتحميل اي محرر يحتوي على خاصية تحرير رموز HEX مثل PSPad وتقوم بحذف القيم الاولى في الملف وهي EF BB EF او ان تقوم بتحميل محلل يحوي خاصية حفظ الملف بدون BOM اي انك عند حفظك للملف فانه سيجعلك تختار ترميز الملف وانت اكيد ستختار الترميز UTF-8 واسفل هذا الخيار هناك مربع اختيار بالنقر عليه سوف يتم حفظ الملف مع الرموز الاضافية BOM وعند سحب علامة الصح من داخله فان الملف سوف يحفظ بدون هذه الرموز وانا ارشح محرر EMeditor او البرنامج الرائع Dreamweaver لهذه المهمة ... وبعدها قم بحفظ الملف وان شاء الله لن تعود هذه الأخطاء البرمجية للظهور مجددا .

2- بحمد الله تم التخلص من مشكلة الرموز الاضافية ببداية الملف BOM واشتغل الملف بنجاح لكني عندما اريد ان اعدل على الملف اقوم بفتحه بواسطة المفكرة Notepad لكن لا يظهر لي بان الملف بترميز UTF-8 وانما يظهر على انها صاحب الترميز ANSI او لا يظهر الترميز بالمرة ؟!! اعتقد باني سأعدل عن فكرة البرمجة بواسطة الترميز UTF-8 !!

الجواب : أخي، كل شي بالصبر وحب المعرفة يأتيك على رجليه ... برنامج المفكرة Notepad ومع الأسف فانه يعتبر كل ملف لا يحوي الرموز الاضافية BOM يعتبره بترميز ANSI !!! وليس المفكرة فقط وانما برنامج المفكرة ++ (Notepad ++ ) ايضا به نفس المشكلة طيب ما الحل ؟؟ من الافضل اخوي ان تقوم باستعمال محررات محترمة وصديقة للترميز UTF-8 لكي تتخطى هذه المشكلة وانا ارشح هنا برنامج Dreamweaver مرة اخرى لهذه المهمة لان الامور لا تلتبس عليه عند فتح ملف UTF-8 بواسطته وحتى لو كان الملف بدون BOM فأنه سوف يعتبره ملف يونيكود UTF-8 وارشح ايضا برنامج EMeditor لهذه المهمة ايضا .

وفي النهاية اقول لأخواني بان اي شيء تراه مفيد وغير متواجد عربيا وغير مكرر بعالم تطوير المواقع فعليك ثم عليك ان تقوم بنشره ولا تحتكر العلم !!

في إمان الله إخواني في مقالات قادمة .

المراجع :

Génération W3 - La naissance d'un acronyme

[ Enikao ] — Sun, 08 Jun 2008 08:24:37 +0000

J'entame une série de billets dédiés à un phénomène sociologique que je vais tâcher de définir dans un premier temps. J'ai vu des dénominations courir ici et là, comme digital native (nés en même temps que le PC domestique et les consoles de jeu) ou generation Y, (petits-enfants des baby boomers et enfants de la generation X) mais ça ne me convient pas tout à fait. Je veux parler de ceux qui ont baigné dès leur plus jeune âge dans la culture numérique : Internet, appareils électroniques portatifs en tous genres (téléphone mobile, ordinateur portable, balladeur audio...). J'en fais presque partie.

Pourquoi W3 ? Parce que ça sonne mieux que "www", très connoté "web". Au passage, c'est le seul acronyme plus long à dire que sa version complète. Il n'y a qu'à faire le test : doublevé-doublevé-doublevé ou doboliou-doboliou-doboliou, c'est bien plus long que world wide web. Voilà qui est fait pour le nom.

Passons à l'acronyme :

We : nous, nous sommes, nous sommes des individus voire des nominalistes, nous sommes identitaires, nous voulons nous affirmer.
Web : nous sommes en réseau, nous sommes empathes, nous sommes relationnels.
Wii : nous sommes ludiques, nous sommes légers.

Cet acronyme est en anglais car c'est aussi une langue de la génération W3 : manuels d'utilisation, services innovants, l'anglais est partout plus présent que le français. Et puis c'est une langue que j'apprécie, au point de l'utiliser pour mes catégories de billets, qu'il faut lire en français mais entendre en anglais (oui, c'est subtil...).

L'impact de ces trois facettes sur la manière dont une génération conçoit le monde et l'appréhende, sur sa relation avec d'autres générations qui lui sont différentes est particulièrement fort, et surtout crescendo. La génération W3 n'a pour le moment que 20/30 ans, elle n'accède que rarement aux postes à responsabilité. Je ne suis pas sociologue mais j'entends déjà, comme beaucoup, le fracas des vagues qui annoncent un raz-de-marée imminent. A ceci près que de nombreux observateurs sont sur le rivage (planche aux pieds, ou incrédules, ou sourds) alors que je suis sur la crète des premières vagues.*

Ceci n'est pas un manifeste : je n'ai rien à revendiquer, je tente une analyse dans la mesure de mes connaissances et réflexions. Mon regard manquera certainement de profondeur et de rigueur sociologique, les commentaires constructifs sont les bienvenus.

Précision utile : il me semblait avoir vu une forme de définition de ce genre, mais pas tout à fait exposée en ces termes. La formulation n'était pas allée au bout de la logique, j'y avais vu des manques, des omissions, et le nom n'était pas exactement le même que W3. Seulement la mémoire me faisant défaut et n'ayant pas eu la présence d'esprit d'intégrer ça sur del.icio.us, j'ai perdu l'origine. Si l'auteur se reconnaît, plutôt que de se lancer dans une guerre de paternité / maternité, faisons comme Lorentz et Fitzgerald qui donnèrent un nom conjoint à leur contraction.

* Il n'est pas interdit de mettre de la métaphore dans un blog. Au contraire.

15 ans de liens hypertextes!

zwan — Fri, 16 May 2008 21:50:52 +0000

Voila donc 15ans que les 3 W (www) sont allés à la conquête du monde. C'est exactement le 30 Avril 1993 que sous l'impulsion des responsables du projet WorldWideWeb, le CERN (Organisation européenne pour la recherche nucléaire) a décidé de mettre les protocoles et technologies du Web dans le domaine public.

Tim Berners-Lee (actuel Président du World Wide Web Consortium (W3C)) et Robert Cailliau , les 2 co-inventeurs du Web, était en effet convaincu des différents apports de ce nouvel outil qui permet de relier des documents entre eux à travers le monde.

Le grand avantage du Web a sans aucun doute été sa gratuité contrairement au protocole Gopher né à l'Université du Minnesota qui réclamait des royalties pour son utilisation. Notons au passage que ce protocole existe toujours et est maintenant sous licence GPL (trop tard)!

Vous pouvez voir un exemple de site ici: gopher://gopher.floodgap.com/ ou gopher://home.jumpjet.info/11%5CBegin_Here%5CReferences
Attention munissez-vous au préalable d'un super navigateur.

Rien à voir avec les sites HTML actuels, n'est ce pas? Mais attention, voyez ici la toute première page Web (hébergé à l'origine à l'URL: http://info.cern.ch/hypertext/WWW/TheProject.html ) pour comparaison.

Comprenez donc que le Web est un fruit du Libre (de l'Open Source)! Zut, imaginez un peu que ce protocole ait été découvert par ceux de Microsoft!!!

Aujourd'hui, le Web 2.0 est à toutes les sauces. Et comment? Vous faites actuellement du Web 2.0: Parcourir un blog, y laisser des commentaires et pourquoi pas s'en créer un également?

Qu'attendre donc du Web dans l'avenir? Des experts se prononcent sur le site de la BBC.

Kolay erişilebilir web sayfaları hazırlamak için ipuçları

Erkan — Fri, 09 May 2008 19:00:01 +0000

Kolay erişilebilir web sayfaları hazırlamak için W3.org tarafından yazılan ipuçları;

Resimler ve canlandırmalar (animasyonlar). Her bir görsel öğenin işlevini açıklamak için “alt” özniteliğini kullanınız.
Resim haritaları. İstemci-tarafı haritası ve aktif bölgeler için metin kullanınız.
Çoklu ortam (multimedya). İşitsel öğeleri başlıklar ve yazılı döküm, görsel öğeleri ise açıklamalarla destekleyiniz.
Hipermetin bağlantıları. Kontekstten bağımsız okunduğu zaman da anlamlı olabilecek metinler kullanınız. Örneğin, “buraya tıkla” metnini kullanmaktan kaçınınız.
Sayfa düzenlemesi. Tutarlı bir yapı oluşturunuz; başlıklar ve listelere yer veriniz. Biçem (stil) ve sayfa düzenlemesi için mümkün ise CSS kullanınız.
Grafik ve çizelgeler. Özetleyiniz veya “longdesc” özniteliğini kullanınız.
Betikler (Script), uygulamacıklar (applet) ve uyumlu ekler. Hareketli kısımların desteklenmediği veya erişilemez olduğu durumlar için alternatif içerik sağlayınız.
Çerçeveler. “noframes” seçeneğini tercih ediniz ve anlamlı başlıklar kullanınız.
Tablolar. Satır satır okunabilecek şekilde hazırlayınız. Özetleyiniz.
Çalışmanızı kontrol ediniz. Sayfanın geçerliğini denetleyiniz. http://www.w3.org/TR/WCAG ’deki denetim listesinden, araçlardan ve yönergelerden faydalanınız.

Kaynak:

http://kolayurl.com/7g

Not: Yukarıda belirtilen maddeler w3.org sitesinden alınmış ve üzerinde değişiklik yapılmadan yayınlanmıştır.

2-bed flat in Acton

cgaa1395 — Sun, 04 May 2008 10:29:18 +0000

In the Barnard Marcus auction on Wednesday, 21 May 2008:-

29 Wendover Court, Western Avenue, ActonW3 0TG previous price not known.

UNSOLD - Last bid was £136,500

W3 Review - Written Inc.

fowgre — Sat, 01 Mar 2008 23:14:55 +0000

So, here's another of my favorites that I've meant to blog about for too long.

Although I'm not at all shy about expressing an opinion or three, mostly I just lurk on journalist Carmi Levys' photo blog. In fact, I'm not sure that I've ever left a comment. But that shouldn't be interpreted as a negative reaction on my part. Quite the opposite, in fact. Carmi's photos are often outstanding, framed perfectly, and taken from a perspective that evokes envy in me. If only I could see the world from more angles... how much am I missing?

It's easy to pop over and simply soak up the latest visual candy and ignore whatever narrative might accompany it. But then, you'd be apt to miss something like the following: "I'm here with our two youngest munchkins...I get to watch our son eat ice cream with his older sister while we spend some rare quiet time together. Sometimes, just letting them enjoy the moment is enough."

Life can be good, when you take the time to appreciate it. Carmi helps me to do that. So my advice to you is, go check out Written Inc.

W3 Review - It Strikes Me Funny

fowgre — Thu, 28 Feb 2008 00:15:17 +0000

Here's another online destination which I think is worthy of your consideration...

Like the last site that I reviewed, it reflects an attempt on the part of an individual citizen to act responsibly towards the environment.

It Strikes Me Funny is authored by Gord Harrison, local columnist for The Londoner, and frequent contributor to one of my personal favorite blogs, Four Mugs and a Crock (which I'm ashamed to admit, I haven't reviewed yet).

Although it's a new endeavour, ISMF already shows promise of being as thoroughly thought-provoking (will Timmie self-serve coffee machines be a threat to national security?) and entertaining (when he gets 'gobsmacked' by one of his readers) as Gords other efforts.

Live HTML editors

Doc-Computing — Thu, 14 Feb 2008 21:16:37 +0000

If your new to HTML and want to try some coding out, you can use several live HTML editors. These allow you to see what your html would look like in a website.

Rendurr:
Rendurr is a great HTML editor that lets you see your website in full screen

TryIt Editor:
TryIt editor is an easy to use real time HTML editor. The only downside to using this is that you have to keep hitting a button to see your creation

Real-time:
This if a pretty good HTML editor. The only downside is that the screen is split horizontally, which makes it hard to see.

So go and get editing! You can get started with HTML by looking

at my tutorials.

Desenvolvimento Web

victorwestmann — Fri, 08 Feb 2008 18:49:49 +0000

Se você é um desenvolvedor web provavelmente conhece(ou já ouviu falar) de:

CSS (Cascading Style Sheets),
HTML (Hyper Text Markup Language),
XHTML (Extensible HyperText Markup Language).

Você já fez uma página no FrontPage (da Microsoft) e viu que ela estava perfeita no Internet Explorer mas estava feia e com um monte de coisas erradas quando ela era carregada em outros navegadores?

Sua página não estava seguindo os padrões da W3C! Para que seus sites sejam iguais(ou quase) em diversos navegadores diferentes estes padrões têm que ser seguidos.

Para validar arquivos HTML, XHTML, SVG e SMIL:
http://validator.w3.org/

Para validar páginas para aparelhos móveis (celulares, handhelds...):
http://validator.w3.org/mobile/ [BETA]

Para validar arquivos CSS:
http://jigsaw.w3.org/css-validator/

Para validar o seu site conforme as especificações da WCAG(ou "Seção 508"):
http://www.w3.org/TR/WAI-WEBCONTENT

Para ver como um site fica em diferentes navegadores e sistemas operacionais:
http://browsershots.org/

Para validar o seu site tableless:
http://w3tableless.com/?uri=

Para ver a eficiência do marketing do seu site:
http://www.websitegrader.com/

Bom desenvolvimento! ^^

Category Icons 1.7.2

submarine — Sat, 26 Jan 2008 09:26:36 +0000

I've released a new version. Download it now ! Now fully W3 Compliant.

HTML 5

Mustafa Turan — Thu, 24 Jan 2008 15:13:46 +0000

W3C Publishes HTML 5 Draft, Future of Web Content

2008-01-22: W3C today published an early draft of HTML 5, a major revision of the markup language for the Web. The HTML Working Group is creating HTML 5 to be the open, royalty-free specification for rich Web content and Web applications. "HTML is of course a very important standard," said Tim Berners-Lee, author of the first version of HTML and W3C Director. "I am glad to see that the community of developers, including browser vendors, is working together to create the best possible path for the Web." New features include APIs for drawing two-dimensional graphics and ways to embed and control audio and video content. HTML 5 helps to improve interoperability and reduce software costs by giving precise rules not only about how to handle all correct HTML documents but also how to recover from errors.

Source: http://www.w3.org/TR/2008/WD-html5-20080122/

Wissenschaftliche Mitarbeiter nach TV-L 13 und ihre Zukunft

mosworld — Wed, 16 Jan 2008 17:22:12 +0000

Da sehr viele Anfragen auf mein Blog kommen die nach dem Gehalt von wissenschaftlichen Mitarbeitern fragen, denke ich mir ein eigener Eintrag zu dem Thema wäre angemessen.

Ich gehe von der Annahme aus, dass der oder die Person Lohnsteuerklasse I hat und keine Kinder. Die Berechnungen gehen vom Startgehalt auf der Stufe 1 aus. Ich habe angenommen, dass der Krankenkassenbeitrag bei 13,8% liegt was der momentane Satz der TK ist. Die Tabelle ist auch nach dem Stand von 01.01.2008 erstellt worden und bezieht sich auf NRW.

	50% halbtags Stelle	100% volle Stelle
Jahreseinkommen	17400€	34800€
Einmalzahlung jährlich	725€	1450€
Jahres Brutto	18125€	36200€
Monatlich Brutto	1510€	3020,83€

Grundgehalt monatlich	1450€	2900€
Netto Gehalt monatlich	1035,55€	1755,99€
Abgaben ca.	29,5%	40%

In den Abgaben sind so Dinge wie Lohnsteuer, Soli, Krankenversicherung, Pflegeversicherung, Rentenversicherung, Arbeitslosenversicherungen. Ganz schön viele Versicherungen die man so hat J . Die Zahlen können etwas variieren je nachdem, ob man Kirchensteuerzahlt oder einen niedrigeren Krankenkassenbeitrag hat. Das Gehalt kann in den einzelnen Bundesländern auch etwas anders sein.

So nun kennen wir das Gehalt von den Assistenten, aber was verdient so ein Juniorprofessor? Ich denke für viele die mit einer akademischen Laufbahn liebäugeln sollten wissen was so ein W1 Prof. oder W3 Prof. verdient. Mit der Umstellung auf den TV-L würde auch die Beamten Bezahlung geändert. Als neue Professoren bekommen jetzt die Gehaltsstufen W. Es gibt W1 für Juniorprofessoren und W3 wenn man Institutsleiter als Professor ist. Das (Grund-)Gehalt ist eindeutig gesunken gegenüber den C4 bis C1 Stufen. Bei der W Besoldung gibt es auch nur noch eine Stufe. Kommen wir mal zur Sache.

	W1 Juniorprofessor	W3 Professor
Jahreseinkommen	40864,08€	56683,32€
Einmalzahlung jährlich	1021,60€	1417.08€
Jahres Brutto	41885,68€	58100,40€
Monatlich Brutto	3490,47€	4841,69€

Grundgehalt monatlich	3405,34	4723,61€
Netto Gehalt monatlich	2644,94€	3417,04€

Man sollte sich nicht wundern, dass Brutto und Netto so nah sind in den Gehälter. Man darf nicht vergessen, dass Profs Beamte sind. Sie müssen noch einen kleinen Teil ihres Gehaltes für die private Krankenkassenversicherung zurück legen. Das gute ist Beamte bekommen keine Rente sondern eine Pension, die nicht zu verachten ist. Die neunen Besoldungsstufen sollen variabel sein, d.h. die Profs sollen noch Zuschläge bekommen. Das hängt dann wohl von den Drittmittel die sie einwerben und die Güte ihrer Arbeit ab. Es ist etwas undurchsichtig diese Bonnie Reglung. Die Idee ist mehr Leben in die Universität zubringen und Leistungsbezogen die Professoren zu bezahlen. In Zeitungen und Zeitschriften war auch mal die Rede vom Ausverkauf der Universitäten. Ich selbst weiß nicht genug darüber um mir einen Urteil machen zu können.

Nichts desto trotz ist das Gehalt eines Juniorprofs auf der Selben Höhe wie das Einstiegsgehalt eines Strategie und Management Beraters bei einer Top-Beratung. Das Land und der Bund sollten darüber nachdenken, ob Sie Ihre Talente halten wollen um noch mehr Talente auszubilden oder eher die B-Leute nehmen. Denn ein Land wie Deutschland das nur von Ideen lebt, sollte die Ausbildung seines Nachwuchses nicht in die Hände von den B-Leuten geben, sondern auch versuchen die "High-Potentials" zuhalten. Ich kenne sehr viele sehr gute Studierende die einfach nicht an der Universität bleiben, da die Bezahlung einfach schlecht ist. Sie machen dann irgendwo einen nicht so herausfordernden Job, als an der Uni zubleiben. Gerade, wenn im Falle der Top-Beratungen diese noch mit der bezahlten Auszeit für Promotion oder MBA werben. Bin gespannt was so passiert an den Top Universitäten.

Ich hoffe ich habe den Suchern nach Informationen etwas weitergeholfen. Meine Berechnungen habe ich mit Hilfe der Webseite http://oeffentlicher-dienst.info gemacht. Dort kann jeder an sich angepasst sein Gehalt ausrechnen. Eine sehr schöne Seite. Denke Anfangs etwas gewöhnungsbedürftig, aber dann klappt es ganz gut.

Ogg Vorbis/Theora removidos da especificação do HTML 5

victorwestmann — Wed, 12 Dec 2007 00:30:37 +0000

"É oficial. A tecnologia livre Ogg foi removida da especificação do HTML 5 devido a pressões da Apple e Nokia."

Até quando o mundo de autoria de conteúdo na Web vai se submeter a tecnologias proprietárias?
O que temos a perder com uma tecnologia que é livre de patentes e que possui boa interoperabilidade entre Windows, Linux, Mac e que pode ser espalhada livremente?
Quem são os interessados em NÃO permitir que conteúdo sem proteção(DRM) seja espalhado por aí?

Para saber mais: Rudd-o, W3.
Fonte: Slashdot.

Uma pequena introdução as assinaturas digitais XML

nunojob — Tue, 11 Dec 2007 17:25:41 +0000

De acordo com o RFC2828 uma assinatura digital define-se como sendo um valor calculado com um algoritmo criptográfico e anexado ao objecto de dados de tal forma que se possa usar essa assinatura para verificar a autenticidade e integridade dos dados.Então o que é uma assinatura digital XML (W3C XMLDSIG)? É, como seria de esperar, uma assinatura digital mas adaptada a assinar documentos XML.A forma como funcionam é extremamente fiável.Logo para começar a assinatura não só assegura que a pessoa assinou aquele documento é de facto quem se espera - através de um certificado - como também que o mesmo se manteve inalterado até ao momento em que foi apresentado. Uma mensagem encriptada com uma chave pública apenas pode ser desencriptada com a correspondente chave privada.

Começamos por processar o documento. Para isso precisamos de transformar o ficheiro XML em um ficheiro que seja igual na fonte e no destino. Como sabem em XML ter

<nome>   Nuno Pinto</nome>

É igual a

<nome>Nuno Pinto</nome>

Logo surge a necessidade de criar uma representação única para cada documento XML. A este processo chamamos canonicalização. Numa assinatura digital XML existe a necessidade de explicitamente declarar qual foi o algoritmo usado para criar esta representação. Agora podemos processar o documento XML e criar, através de um algoritmo criptográfico num processo normalmente chamado de digest, uma impressão digital do documento. Em seguida, com a chave privada, encriptamos essa impressão digital e enviamos para o destinatário a nossa assinatura (que contém a chave pública, certificados, impressão digital assinada e os algoritmos que foram usados para o digest e a canonicalização).Ao receber o documento assinado pode-se verificar o resultado do digest do documento (usando os algoritmos contidos na assinatura). Depois podemos desencriptar a impressão digital assinada e comparar os dois valores. Se coincidirem é valido dizer que o documento é autentico e não foi alterado. Fixe!Por fim resta dizer que existem três tripos de assinaturas XMLDSIG.

Detached: O documento XML a ser assinado e a assinatura estão são dois ficheiros distintos, sendo que esta tem uma referência ao documento que se propõe a assinar.
Enveloped: O documento XML e a assinatura surgem no mesmo ficheiro de uma forma sequencial.
Enveloping: O documento e a assinatura estão contidos em um envelope XML.

Se este artigo serviu para vos aguçar o apetite sobre este assunto, podem ler mais sobre o assunto no artigo Programing with Java XML Digital Signature API feito pelo Sean Mullan da Sun.

О стандартах

Ugnich Anton — Mon, 10 Dec 2007 20:19:04 +0000

На этих выходных я развлекался, "метая бисер перед свиньями". :) Тормоз знает, о чем я. ;) В результате этого "метания" родилось много букв текста, некоторыми из них я спешу с вами поделиться. Итак, цитаты о стандартах...

Тега noindex нет, "табличной верстки" тоже нет. Уже много лет на w3.org висит надпись про недопустимость использования тега table для визуального форматирования.

Если страница не соответствует стандарту HTML, то это уже не HTML. Сайт, состоящий из таких "страниц" — говносайт. Интернет/гипертекст/HTML/... придумали не вы и не вам решать, что и как должно быть. Ваше мнение по этому поводу никого не интересует. Если хотите играть в интересную игру под названием "веб-мастер" — прийдется принимать правила этой игры.

Насчет ошибок, при проверке валидатором: ошибки бывают в коде сайтов, программных кодах, текстах энциклопедий; врачи и космонавты тоже иногда ошибаются. Нужно только понимать разницу между ошибкой и умышленным игнорированием спецификаций.

Когда-то в Яндексе работал человек, который не был способен трезво оценивать последствия своих действий. Он придумал "тег noindex". Теперь никто не сомневается, что такой тег существует, потому что "это ж Яндекс!". Среди людей встречаются идиоты, в Яндексе они тоже могут быть. Надо думать своей головой, а не слепо верить "гуру".

Привычки верстальщика - это личные проблемы верстальщика, которые никого, кроме него самого, не волнуют.

Мне абсолютно безразлично, как отображаются мои сайты в недобраузере IE. Их содержимое в любом случае можно прочитать, даже в lynx, поэтому за посетителей я как-то не переживаю.

Стандарт — это идеал, к которому должны стремиться две стороны: разработчики сайтов и разработчики браузеров. Если обе стороны достигнут этого идеала — всем будет хорошо. Если будут идти в разные стороны и выдумывать то новые типы версток, то свои трактовки тегов — будет бардак.

"Стремиться" я написал, потому что нужно учитывать человеческий фактор, ошибки. Ну и прогресс, конечно: технологии не стоят на месте, чтобы за ними успевать, нужно бежать быстро. Не всем это одинаково успешно удается.

Прошу не считать это самоцитированием в результате обострения мании величия. Считайте это кросс-постингом. ;)

З.Ы. Я устал спорить про очевидные вещи, поэтому глупые говнокомменты к этому посту будут просто удаляться.