Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

markupwand.com

Post reply on HN
Print view View original

111–120 of 129 posts

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#111

Post by mnicole »

salvadornav wrote: post #83
brianfryer wrote: post #30

Earlier quoted context omitted.

As a designer, I've never "implemented" in Photoshop. Ever. Illustrator, yes (a long time ago), but there's nothin' like coding your own design. In fact, I design entirely with HTML/CSS (using the Live CSS Editor feature of the Web Developer add-on for FireFox) and use Illustrator to mix and pick colors.

I used to always start in Photoshop and when I had 2/3rds of the design start coding. But since I started using CSS3 attrs like 'box-shadow', 'border-radius', etc. I only open Photoshop for tweaking icons, patterns, gradients; but never to design the actual page.

Exactly. Not taking advantage of what you can do - and how easy you can do it - in the code right away just means more time wasted. Once you get the basic layout out, all Photoshop is good for is finding the colors you're going to use (which a lot of times, tools like Colllor in addition to preprocessors with color functions can supplement) and quickly prototyping something just to see it (which is easier in Illustrator, anyhow).

With things like this and CSSHat, I fear that people will use these tools not to learn from, but to immediately sell themselves as devs and further worsen the state of an industry that's already lost its passion for the combination of art and experience by cutting all corners possible.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#112

Post by vhf »

haxplorer wrote: post #97
vhf wrote: post #35

Earlier quoted context omitted.

I've just seen that some of the technique/some of your questions are answered after sign up! I'll c/c here for your convenience (without the explainations and examples available on sign up) Five tips given on the website to get good results (I have not tested myself) : - Break your page into smaller pieces (header = 1 .psd, same for body, footer, sidebar, etc) - Use one text layer for each logical piece of text - Eac…

Sorry about the fifth point not being clear. Will try to make it clear. Some designers produce effects using indirect methods instead of using the photoshop effects. These should be avoided as much as possible, for the code to be clean.

Don't worry, I was only quoting the titles of the tips.

The explaination and screenshots on your website made this fifth tip very clear to me !

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#113

Post by splatcollision »

DeepDuh wrote: post #109
splatcollision wrote: post #102

Earlier quoted context omitted.

Just to prove a point, I roughly re-created the sample PSD on the markupwand page in my tool, Edit Room: http://www.edit-room.com/review/RnNDyuCX It's not pixel-perfect, but it is flexible and responsive, and should work decently well across different screens for 5 minutes of work. (I don't support images yet, so you won't see icons or an avatar, but the type and grid and color and shape and all those important thing…

What you show in the video looks pretty good. A few things that caught my eye: The signup form is unconventional. that in itself is ok. but the cleartext password text field is a really bad practice. Also the whole thing just looks very hand-stricken, you know what I mean? I'm not that much of a designer myself, maybe others have a different taste. I really hope you succeed, overall I think it's a very good idea. I l…

Cool, thanks for the notes. I'll research the password field a bit more, I was going for the increased usability, but security (and perceived security) are important as well.

I'm working on improving the design of the controls, etc, based on some other feedback. It's definitely hand-made, if that's what you're referring to.

Thanks for the good wishes! Glad the video was helpful.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#114

Post by nnash »

brianfryer wrote: post #40
nnash wrote: post #29

Earlier quoted context omitted.

>divs are not semantic HTML This is very wrong, divs are as semantic as you want them to be. If you have an element that looks like this: Hello World Then yeah sure it's not semantic because you have two unnecessary divs holding a paragraph, but if it was just the one div holding a paragraph tag it would be perfectly acceptable in HTML 4.x onwards. The only cases I can see a div being non semantic are the silly examp…

> divs are as semantic as you want them to be. Then they are not semantic at all. , , all have semantic CSS class names. But they are not semantic HTML names. Remove the CSS, and all you have is , , and . This makes it difficult for screen readers (and web surfers who don't use CSS (are these people even real?)) to understand what the page is saying. However , , and all have semantic meaning that can be discerned whe…

Your understanding of semantics is a bit hazy. Conversely to the pull quote you grabbed from me any semantic element can be used in a non-semantic way.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#116

Post by brianfryer »

crazygringo wrote: post #107
kitsune_ wrote: post #80

Earlier quoted context omitted.

Semantic html is overrated in my opinion. As if every web page or application could semantically fit the header, article, footer, summary, section, nav, menu paradigm. I'm not against it, but probably, we will have another set of semantic tags in 5 years, and 10 years later yet another set of semantic tags.

> As if every web page or application could semantically fit the header, article, footer, summary, section, nav, menu paradigm I know, that's the whole thing I'm talking about. A page is full of the div inside the header that centers the header. Then the header has three horizontal bars, two of which are split into right and left side, each of these are full of multiple kinds of items... These are all 's, and are sup…

With that logic, HTML is feature complete and no longer requires anymore upgrades, as we can just use s to our hearts' content.

Semantic HTML makes the web a better, more consistently understandable, place.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#117

Post by sopooneo »

brianfryer wrote: post #110
jameswyse wrote: post #99

Earlier quoted context omitted.

"I was certain, and I'm still certain hand-coding will go the way of the Dodo." I don't think so. How are you going to handle responsive designs or hell even fluid designs? Or deciding which HTML tag to use? HTML tags are meant to be semantic. More and more people are moving away from designing in photoshop to designing straight in the browser. edit: I see the link in the OP uses bootstrap and is well put together, b…

> HTML tags are meant to be semantic. I totally agree with this and gave my own detailed explanation of the difference between semantic and non-semantic HTML here --> http://news.ycombinator.com/item?id=4284054

I used to hear that a lot. Then everyone went nuts for bootstrap.css, which is very decisively not semantic. Now I don't know what to believe.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#118

Post by brianfryer »

ricardobeat wrote: post #86
kitsune_ wrote: post #80

Earlier quoted context omitted.

Semantic html is overrated in my opinion. As if every web page or application could semantically fit the header, article, footer, summary, section, nav, menu paradigm. I'm not against it, but probably, we will have another set of semantic tags in 5 years, and 10 years later yet another set of semantic tags.

Not every, but 95% do. For the rest, there are other pssibilities and tools to make sense of it (microdata, ARIA attributes, etc). Just ignoring semantics altogether won't do any better.

Exactly this. And for the 5% that doesn't work, that's what s are for!

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#119

Post by brianfryer »

nnash wrote: post #114
brianfryer wrote: post #40

Earlier quoted context omitted.

> divs are as semantic as you want them to be. Then they are not semantic at all. , , all have semantic CSS class names. But they are not semantic HTML names. Remove the CSS, and all you have is , , and . This makes it difficult for screen readers (and web surfers who don't use CSS (are these people even real?)) to understand what the page is saying. However , , and all have semantic meaning that can be discerned whe…

Your understanding of semantics is a bit hazy. Conversely to the pull quote you grabbed from me any semantic element can be used in a non-semantic way.

I agree I still have much to learn. But I don't let this get in the way of trying to "do things right" :-)

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#120

Post by brianfryer »

Ingolmo wrote: post #77
brianfryer wrote: post #40

Earlier quoted context omitted.

> divs are as semantic as you want them to be. Then they are not semantic at all. , , all have semantic CSS class names. But they are not semantic HTML names. Remove the CSS, and all you have is , , and . This makes it difficult for screen readers (and web surfers who don't use CSS (are these people even real?)) to understand what the page is saying. However , , and all have semantic meaning that can be discerned whe…

You cannot use ONLY these "meant to be" semantic tags ( , , ...) to describe semantically all the content you have. Divs is then the only way to go I know.

I'll quote ricardobeat's comment above (http://news.ycombinator.com/item?id=4284877):

"Not every, but 95% do. For the rest, there are other pssibilities and tools to make sense of it (microdata, ARIA attributes, etc). Just ignoring semantics altogether won't do any better."

Post reply on HN