Why isn't it possible to convert a layered image (such as in Photoshop) to a good web page with maintainable code?
<div id="2copy3"><img src="images/2copy3.png"></div>
<div id="Layer24"><img src="images/Layer24.png"></div>
<div id="Lines"><img src="images/Lines.png"></div>
<div id="Shape1"><img src="images/Shape1.png"></div>
<div id="Tab"><img src="images/Tab.png"></div>
<div id="Home"><img src="images/Home.png"></div>
<div id="LocationSouthAfrica"><img src="images/LocationSouthAfrica.png"></div>
<div id="CrewDragna"><img src="images/CrewDragna.png"></div>
<div id="Health100"><img src="images/Health100.png"></div>
<div id="Points44080"><img src="images/Points44080.png"></div>
<div id="Bullets28883"><img src="images/Bullets28883.png"></div>
<div id="TableDesign"><img src="images/TableDesign.png"></div>
Converting a visual representation to a fully functioning web page that is well thought out for many devices is something that requires a human. There is no algorithm (thus far, maybe in science fiction) that can make the appropriate decisions for interpreting a design and building a site out of it.
It's not just a conversion. There is an art to this. Unless of course you want a page that is just images...
Related
If I want to store HTML code to a database, is better to add one row with big HTML code or more rows with smaller HTML code?
In my app, I can edit the code in both ways, so don't really need more rows, but maybe is faster or more effective having more rows and smaller HTMl code.
What is your opinion? Thanks you.
HTML Code Example:
<div class="row">
<div class="col-sm-12">
<section data-type="component-text">
content
</section>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<section data-type="component-photo">
content
</section>
</div>
<div class="col-sm-6">
<section data-type="component-video">
content
</section>
</div>
</div>
The code is generated by a plugin. This is only an example created by me.
Answer: It depends on your querying needs.
Efficient querying is an extensive topic focused on design and algorithms.
It depends on the size, type and structure of the data you have.
If you just need to store all the HTML and get it back, you could simply store as much per block.
If you need specific lines of HTML per query then each block with the necessary content is a good idea!
I hope this helps.
I keep bumping into this issue where everyone keeps:
a) wanting to wrap HTML5 semantic tags with divs, and
b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.
For example, I am constantly told that this is "incorrect",
<body class="container">
<header class="row">
<div class="col-md-12"> ...
And something like this is more preferable,
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
And here, where the first example I have the column class in the h2 tag
<div class="row">
<h2 class="col-4 feature">Featured Work</h2>
</div>
But "the correct" way is to add yet another div tag to apply the class,
<div class="row">
<div class="col-4 feature">
<h2>Featured Work</h2>
</div>
</div>
I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.
I recommend sticking to the
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
format.
If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.
Since we are talking about markup there is no right answer, but following this convention is strongly recommended.
For consistency
For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).
However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.
I have a doubts about this HTML structure. Is it correct according to BEM approach?
<div class="boxWithBorder">
<div class="header">
<h2 class="boxWithBorder__element"></h2>
</div>
</div>
To my mind it should look like that
<div class="boxWithBorder">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
What keeps elements encapsulated.
Generally we do components and structures, that means structures are compositions of components. It will require nesting so that part is ok. As far as your first approach that is not ok by our standards and not used. block1 should not live inside block2 but block2 has to live inside block1 as it's a nested component. Makes sense? BTW BEM is perfectly fine to use and a lot of frontend devs do it, heavyweights as well, check out csswizardry.com for instance, he got some great articles about BEM
Also I would suggest the following using BEM (or any html/css for that matter) is that skip the camleCase and use "-" instead
<div class="box-with-border">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
<div class="hero hero--red-with-border">
<h1 class="hero__title>Title...</h1>
<p class="hero__body-text">Text...</p>
</div>
HTML often has repeating and independent structures that are modular on a theoretical level, such as multiple portfolio-items:
<div class="protfolio-item">
<div class="image">
<a ...><img /></a>
...
</div>
<div class="portfolio-content">
<h2>...</h2>
<p>...</p>
</div>
</div>
Even writing them out feels stupid. Now I want to make a change, like having an icon superposed on every picture. What ways are there to achieve more modular code that's easier to change? Are there any non-PHP "native" ways to do so?
Non-PHP, native? The first thing I can think of is Server Side Includes - not very powerful but you can divide your document into pieces making it modular. The main disadvantage is lack of loops.
I've seen lately a lot of discussions about this new concept called oocss and I was wondering if it is a bad practice to wrap your main tags in divs only for styling/page layout purposes.
I'm asking this because I see some frameworks like Twitter Bootstrap use such a method.
What are the implications of such a markup from a semantic and accessibility point of view?
For example:
<div class="container">
<div class="row">
<div class="span4">
<nav class="nav">...</nav>
</div>
<div class="span8">
...
</div>
</div>
</div>
instead of
<div class="menu">
<nav class="nav">...</nav>
...
</div>
No, it's fine. HTML is a "mark-up language", and mark-up involves styling. Besides, everyone does it. Many of the fluid multi-column layouts rest precisely on this approach.
Using unnecessary divs is not a good idea... if the HTML codes in the second box is enough to do everything that you want or need to do then don't use extra divs... secondly, HTML codes in the second box is much clear and shorter then the codes in the first box... if you keep your codes clean, short and formatted, it will help you a lot when you want or need to update your code in future...