Tag Archive 'css'

Nov 02 2009

An Event Apart Seattle 2010

Published by petra under HTML/CSS,Web Conferences

YES, I’ll be back for another year of An Event Apart, after attending two years in a row An Event Apart Seattle 2007 & An Event Apart New Orleans 2008, but missing out this year due to some economy crisis and my personal life events.

I’ve been wanting to go to Boston for the next one no matter what the line up of speakers would be, but when I found out that for the first time ever that there will be A Day Apart, I knew that I’ll have to be there. Whether my work will pay for it or not, I had to make sure to make this happen!!! I mean I would be dumb to miss out on a full day workshop about HTML5 and CSS3 with Dan Cederholm & Jeremy Keith. A full day workshop that I’ve been wanting and even brought it up to Jeffrey Zeldman himself during a lunch at AEA in New Orleans where he sat at my table. Consequently, the second I knew that my wishes came true, it was a no-brainer that I had to be part of this & I will be… :)

So, besides signing up for two days of geekiness presented by only the best and my mentors in the industry like already mentioned Jeffrey Zeldman, my CSS guru Eric Meyer, always funny but mostly very resourceful Andy Clarke, also known as “Malarkey“. I will be delighted to see Aarron Walter again, as well as Jared Spool, Jeff Veen. In addition, I will get to listen for the first time to Ethan Marcotte who also co-wrote Handcrafted CSS with Cederholm and Designing with Web Standards (3rd Edition) with Zeldman, which both I got obviously and read by now. ;)

No need to add anymore as it should be obvious that not only I will get my money worth, I’ll have three days to spend among the best and learn from them as much as I’ll be able to absorb. So, I am happy to say that I’M BACK An Event Apart, so be ready for me!!!!!

No responses yet

Aug 12 2008

CSS hacks & conditional statements

Published by petra under HTML/CSS,Tools & Tutorials

Don’t you wish sometimes there weren’t all these browsers out there for you to worry about your site breaking when developing a site with a nicely structured, table-less, semantic and valid (X)HTML/CSS markup? Well, guess what? They are here and won’t be going away very soon either. ;-)

But that is what I love about what I do, is the challenge and finding better solutions to any issue that I might a come across when cross-browser testing any site that I work on. We all have done hacks in the past, including me, but it’s been said many times by many people that it is better stay away from them and rather use conditional statements where needed instead.

Continue Reading »

No responses yet

Jul 18 2008

Encode / Decode HTML Entities

Published by petra under HTML/CSS,Tools & Tutorials

Have you ever wondered how to post code snippets on your site to demonstrate an example? I have to admit myself that I’ve tried myself to use <pre> or <code> tags, hoping that it would solve my frustration. After few trial and errors, some research, I found out that that you need to encode the html entities, like the “<” by replacing them with their html code equivalents.

HTML Code Browser View HTML Code Browser View HTML Code Browser View HTML Code Browser View HTML Code Browser View
&copy; © &#33; ! &#95; _ &#157; ? &#219; Û
&reg; ® &#34; &#96; ` &#158; ž &#220; Ü
&nbsp; &#35; # &#97; a &#159; Ÿ &#221; Ý
&quot; &#36; $ &#98; b &#160; &#222; Þ
&amp; & &#37; % &#99; c &#161; ¡ &#223; ß
&lt; < &#38; & &#100; d &#162; ¢ &#224; à
&gt; > &#39; &#101; e &#163; £ &#225; á
&Agrave; À &#40; ( &#102; f &#164; ¤ &#226; â
&Aacute; Á &#41; ) &#103; g &#165; ¥ &#227; ã
&Acirc; Â &#42; * &#104; h &#166; ¦ &#228; ä
&Atilde; Ã &#43; + &#105; i &#167; § &#229; å
&Auml; Ä &#44; , &#106; j &#168; ¨ &#230; æ
&Aring; Å &#45; - &#107; k &#169; © &#231; ç
&AElig; Æ &#46; . &#108; l &#170; ª &#232; è
&Ccedil; Ç &#47; / &#109; m &#171; « &#233; é
&Egrave; È &#48; 0 &#110; n &#172; ¬ &#234; ê
&Eacute; É &#49; 1 &#111; o &#173; ­ &#235; ë
&Ecirc; Ê &#50; 2 &#112; p &#174; ® &#236; ì
&Euml; Ë &#51; 3 &#113; q &#175; ¯ &#237; í
&Igrave; Ì &#52; 4 &#114; r &#176; ° &#238; î
&Iacute; Í &#53; 5 &#115; s &#177; ± &#239; ï
&Icirc; Î &#54; 6 &#116; t &#178; ² &#240; ð
&Iuml; Ï &#55; 7 &#117; u &#179; ³ &#241; ñ
&ETH; Ð &#56; 8 &#118; v &#180; ´ &#242; ò
&Ntilde; Ñ &#57; 9 &#119; w &#181; µ &#243; ó
&Otilde; Õ &#58; : &#120; x &#182; &#244; ô
&Ouml; Ö &#59; ; &#121; y &#183; · &#245; õ
&Oslash; Ø &#60; < &#122; z &#184; ¸ &#246; ö
&Ugrave; Ù &#61; = &#123; { &#185; ¹ &#247; ÷
&Uacute; Ú &#62; > &#124; | &#186; º &#248; ø
&Ucirc; Û &#63; ? &#125; } &#187; » &#249; ù
&Uuml; Ü &#64; @ &#126; ~ &#188; ¼ &#250; ú
&Yacute; Ý &#65; A &#127; ? &#189; ½ &#251; û
&THORN; Þ &#66; B &#128; &#190; ¾ &#252 ü
&szlig; ß &#67; C &#129; ? &#191; ¿ &#253; ý
&agrave; à &#68; D &#130; &#192; À &#254; þ
&aacute; á &#69; E &#131; ƒ &#193; Á &#255; ÿ
&aring; å &#70; F &#132; &#194; Â
&aelig; æ &#71; G &#133; &#195; Ã
&ccedil; ç &#72; H &#134; &#196; Ä
&egrave; è &#73; I &#135; &#197; Å
&eacute; é &#74; J &#136; ˆ &#198; Æ
&ecirc; ê &#75; K &#137; &#199; Ç
&euml; ë &#76; L &#138; Š &#200; È
&igrave; ì &#77; M &#139; &#201; É
&iacute; í &#78; N &#140; Œ &#202; ?
&icirc; î &#79; O &#141; ? &#203; Ë
&iuml; ï &#80; P &#142; Ž &#204; Ì
&eth; ð &#81; Q &#143; ? &#205; Í
&ntilde; ñ &#82; R &#144; ? &#206; Î
&ograve; ò &#83; S &#145; &#207; Ï
&oacute; ó &#84; T &#146; &#208; Ð
&ocirc; ô &#85; U &#147; &#209; Ñ
&otilde; õ &#86; V &#148; &#210; Ò
&ouml; ö &#87; W &#149; &#211; Ó
&oslash; ø &#88; X &#150; &#212; Ô
&ugrave; ù &#89; Y &#151; &#213; Õ
&uacute; ú &#90; Z &#152; ˜ &#214; Ö
&ucirc; û &#91; [ &#153; &#215; ×
&yacute; ý &#92; \ &#154; š &#216; Ø
&thorn; þ &#93; ] &#155; &#217; Ù
&yuml; ÿ &#94; ^ &#156; œ &#218; Ú

If you feel a little overwhelmed by trying type up all those characters when you find yourself in need of using it, you might enjoy a Encode/Decode HTML entities tool at centricle.com. You can paste in your code snippet and convert it into ACII characters just by one click. Enjoy! :)

No responses yet

May 23 2008

Web Visions 2008

Published by petra under Web Conferences

Yesterday was my first day at Web Visions, and I am off to my second one today. During my first day I attended two half-day workshops, both with main focus on CSS and JavaScript. Both speakers, David McFarland and Aaron Gustafson, I got to see for the third time and neither one of them let me down – like usual. :-)
Both workshops were filled with a lot of useful information and ideas, which I am eager to go ahead and try out.

Aaron Gustafson at Web Visions 2008

Today, I am off for the second day of the conference and I’ll see who I will see then… I will definitely will go see Aaron again to see him speak about “What You Need to Know About IE8 and Standards“.

…and after the conference? I will get home, clean up a little and finally go pick my hubby from the airport and welcome him back home after 3 months being in Georgia. :-)

No responses yet

Apr 18 2008

Design Coding Video

Published by petra under General

Want to know what I do for living and why? Well, watch this video!

…and I thought that I was the only one who geeks out about what I do… :-D

Do you want to “rap” along, well here are the lyrics:

Design Coding

Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration

a clear Call to action to increase the temptation
use appealing graphics they create motivation

if you have animation
use with moderation
cause search engines can’t index the information

display the logos of all your associations
highlight your contact info that’s an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation

every page that they click should provide and explanation

should be easy to understand like having a conversation

when you design the style go ahead and use your imagination

but make sure you use correct color combinations
do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
design done, congratulations but it’s time to start construction

follow these instructions when you move into production
your photoshop functions then slice that design
do your layout with divs make sure that it’s aligned
please don’t use tables even though they work fine

when it come to indexing they give searches a hard time

make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat

tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won’t validate

check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox

title everything including links and images
don’t use italics, use emphasis
don’t use bold, please use strong
if you use bold that’s old and wrong

when you use CSS, you page will load quicker

client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that’s the real kicker
make you a lil richer, your site a lil slicker

design and code right man I hope you get the picture
what I’m telling you is true man it should be a scripture
if it’s built right you’ll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you’ll shine like glitter

if you trying to grow your company will get bigger
design and code right man can you get with it

No responses yet

Mar 25 2008

Web Visions 2008

Published by petra under Web Conferences

This year it will my third year in a row attending Web Visions. I am not going to lie that the line up isn’t as good as the first year I went, but I am sure that I will get out of it a lot new information as I always do anyway.

During the first two years I attended a workshop, and this year isn’t going to be any different. The first two ones were about CSS, and this year’s is called “javascript for Designers”. Interestingly enough, all three of them are taught by our local David McFarland, who is also an author of books like CSS: The Missing Manual, Dreamweaver CS3: The Missing Manual and to be released in June JavaScript: The Missing Manual.

Not only I can’t wait to attend his workshop, but I can’t wait to buy his latest book. So far all of them were great and just so easy to learn from that I can’t wait to improve my JavaScript skills very soon as well. ;-)

After some thinking and debating whether to take another workshop with Aaron Gustafson (who I’ve learned from last year how to learn to love forms and will see him this year again in New Orleans) called Progressive Enhancement with JavaScript and CSS, I decided to go for it and go at my own expense. It sounds very appealing and like something I could enjoy learning,… so we will see. :???:

One response so far