Pořád se mi něco nezdá na mém způsobu zapisování kódu - když to píšu, tak je to fajn, ale když se na to zpětně podívám, tak bych z toho... Vy víte co...
Je to prostě takové nepřehledné, zamotané a možná i zbytečně dlouhé? Funkčnost kódu je perfektní, všechno funguje, tak jak chci, ale to jak ten kód vypadá, to je podle mě něco hrozného.
A chtěl bych se tedy zeptat jestli by mi tu někdo zkušenější nedal pár rad a tipů jak vylepšit formu zápisu kódu a jeho vzhled, pro lepší přehlednost a nepsaní zbytečných rádků.
index.php
Kód: Vybrat vše
<?php
require_once "languages/czech.php";
?>
<!DOCTYPE html>
<html lang="cs">
<head>
<title><?php echo $jazyk["nazevWebu"]. " | Úvod"; ?></title>
<meta charset="utf-8">
<meta name="author" content="Jan Dvořák">
<meta name="description" content="Osobní web/Portfolio">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600,300,300italic,400,400italic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<?php include "components/header.php"; ?>
<div id="container">
<div class="middle-box">
<div class="article-heading"><div class="article-heading-inner">Novinky</div></div>
<article class="article">
<div class="article-inner">
<h3 style="margin-top: 5px;">Něco málo pro začátek</h3>
<p style="margin-top: 5px;">
Ahoj, jmenuji se Jan Dvořák, ale z internetu mě můžete znát pod přezdívkou strangereu nebo také PanPringles, záleží na tom, kde mě zrovna potkáte :D.
Je mi 18 let a narodil jsem se 20.05.1997 v Litoměřicích v Ústeckém kraji :-)</br></br>
Zabývám se tvorbou webových stránek a webových aplikací + vývojem systémů pro SQL databáze.</br></br>
Také jsem nějakou dobu (asi 4 roky) pracoval s Lua a vytvářel scripty pro MTA:SA servery. Jeden ze scriptů, u kterého jsem navrhl design a podílel se na vývoji můžete nalézt na herním serveru
zvaném <a href="http://twisted-gamers.net/">Twisted Gamers</a>, přesněji se jedná o scoreboard (TAB), který slouží pro zobrazení online hráčů na serveru z různých místností (gamemódů).</br></br>
Jinak momentálně pracuji na svém osobní webu (tomto) a asi třech dalších projektech, o kterých v budoucnu určitě něco napíšu a tak trošku nakousnu, co se skrývá za tím vším kódováním, vývojem a dalším
různým zamotáváním mozků a pálením mozkových závitů :D.
</p>
</br>
<a href="#" class="display-more">Číst více...</a>
<p class="written">Napsal: Jan Dvořák v 12:20 dne 17.12.2015</p>
</div>
</article>
<article class="article">
<div class="article-inner">
<h3 style="margin-top: 5px;">Zkouška</h3>
<p style="margin-top: 5px;">
Tady bude pak taky nějak text, vůbec se nebojte, že by tu nikdy nic nebylo, určitě bude, jen ještě nevím co a zatím zkouším jak by to něco mohlo vypadat.</br></br>
A jak vidím, tak asi takhle, takže dobře - dle mého!</br>
Možná na to máte jiný názor, kdo ví?
</p>
</br>
<a href="#" class="display-more">Číst více...</a>
<p class="written">Napsal: Jan Dvořák v 13:01 dne 17.12.2015</p>
</div>
</article>
</div>
<div class="right-box">
<div class="article-heading"><div class="article-heading-inner">Kontakt</div></div>
<article class="article">
<div class="article-inner">
<p>Skype: <a href="skype://stranger.eu">stranger.eu</a></p>
<p>Email: <a href="mailto://j.dvorak1997@gmail.com">j.dvorak1997@gmail.com</a></p>
<p>Facebook: <a href="https://www.facebook.com/MS-WEBcz-1494594950846628/?fref=ts">MS-WEB.cz</a></p>
<p>Paypal: john.dvorak1997@gmail.com</p>
</div>
</article>
</div>
<div class="right-box">
<div class="article-heading"><div class="article-heading-inner">Aktuality</div></div>
<article class="article">
<div class="article-inner">
<p>Osobní web: 10%</p>
<p>???: 0%</p>
</div>
</article>
</div>
</div>
</body>
</html>style.css
Kód: Vybrat vše
body {
margin: 0;
padding: 0;
background: #e9e9e9;
font-family: "Open Sans", "sans-serif";
}
/* Setting */
p, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
article {
display: block;
}
a {
color: #3498db;
}
table {
width: 100%;
text-align: center;
}
tr {
height: 30px;
}
/* Mobile */
.navigation {
width: auto;
height: auto;
background: #fff;
overflow: hidden;
border-bottom: 1px solid #f2f2f2;
}
li {
list-style-type: none;
width: auto;
height: 30px;
}
li a {
text-decoration: none;
color: #34495e;
padding: 15px 10px 15px 10px;
text-transform: uppercase;
}
li a:hover {
color: #3498db;
}
.navigation-inner-menu {
text-align: center;
}
#container {
width: auto;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
}
.middle-box {
width: auto;
float: none;
}
.right-box {
width: auto;
float: none;
margin-top: 20px;
margin-bottom: 5px;
}
.article {
margin-top: 5px;
background: #fff;
}
.article-inner {
width: auto;
margin: 10px;
}
.article-heading {
width: 100%;
height: 30px;
background: #fff;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.article-heading-inner {
padding: 5px;
}
.display-more {
float: none;
text-align: center;
display: block;
font-weight: 300;
font-size: 16px;
}
.written {
font-weight: 300;
font-size: 14px;
float: none;
text-align: center;
}
.global-box {
width: auto;
float: none;
margin-top: 20px;
margin-bottom: 5px;
}
/* Desktop */
@media screen and (min-width: 1024px) {
.navigation {
height: 55px;
}
li {
display: inline;
}
#container {
max-width: 1050px;
}
.middle-box {
width: 725px;
float: left;
}
.right-box {
width: 300px;
float: right;
margin-top: 0px;
margin-bottom: 10px;
}
.article {
margin-top: 5px;
border-right: 3px solid #2ecc71;
float: left;
width: 100%;
}
.article-inner {
width: 98%;
margin-left: auto;
margin-right: auto;
}
.article-heading {
height: 40px;
text-align: left;
border-right: 3px solid #3498db;
}
.article-heading-inner {
padding: 10px;
}
.display-more {
float: left;
text-align: left;
}
.written {
float: right;
text-align: right;
}
.global-box {
width: 100%;
float: left;
}
}header.php
Kód: Vybrat vše
<nav class="navigation">
<div class="navigation-inner">
<div class="navigation-inner-menu">
<ul>
<li><a href="index.php">Úvod</a></li>
<li><a href="sestava.php">Sestava</a></li>
<li><a href="#">Projekty</a></li>
<li><a href="#">Reference</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</nav>sestava.php
Kód: Vybrat vše
<?php
require_once "languages/czech.php";
?>
<!DOCTYPE html>
<html lang="cs">
<head>
<title><?php echo $jazyk["nazevWebu"]. " | Úvod"; ?></title>
<meta charset="utf-8">
<meta name="author" content="Jan Dvořák">
<meta name="description" content="Osobní web/Portfolio">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600,300,300italic,400,400italic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<?php
include "components/header.php";
?>
<div id="container">
<div class="global-box">
<div class="article-heading"><div class="article-heading-inner">Moje sestava</div></div>
<article class="article">
<div class="article-inner">
<table>
<tr>
<th>Komponent</th>
<th>Sloupec 1</th>
<th>Sloupec 2</th>
<th>Sloupec 3</th>
<th>Sloupec 4</th>
<th>Sloupec 5</th>
<th>Sloupec 6</th>
</tr>
<tr>
<td>Procesor</td>
<td>Intel</td>
<td>i5</td>
<td>3350P</td>
<td>3,10GhZ</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>Grafická karta</td>
<td>AMD</td>
<td>Radeon</td>
<td>HD 7850</td>
<td>Pitcairn</td>
<td>2048 MB</td>
<td>PCI-Express</td>
</tr>
<tr>
<td>Paměť</td>
<td>Kingston</td>
<td>HyperX Beast</td>
<td>1600 MhZ</td>
<td>2x 8192 MB</td>
<td>16384 MB</td>
<td>DDR3</td>
</tr>
<tr>
<td>Základní deska</td>
<td>MSI</td>
<td>B75A-G43</td>
<td>1155 Socket</td>
<td>Intel B75</td>
<td>ATX</td>
<td>305x244mm</td>
</tr>
<tr>
<td>SSD</td>
<td>Samsung</td>
<td>Evo 850</td>
<td>122880 MB</td>
<td>Serial ATA</td>
<td>R 540Mbps</td>
<td>W 520Mbps</td>
</tr>
<tr>
<td>Zdroj</td>
<td>Seasonic</td>
<td>Energy Knight</td>
<td>SS-500ET, T3</td>
<td>500W</td>
<td>ATX</td>
<td>80 PLUS BRONZE</td>
</tr>
</table>
</div>
</article>
</div>
</div>
</body>
</html>czech.php
Kód: Vybrat vše
<?php
$jazyk = array(
"nazevWebu" => "Jan Dvořák - Portfolio",
);
?>V php to zvládnu zapsat dobře a přehledně, ale jak příjde na CSS nebo HTML, tak je to v háji... Ale to bude asi tím, že osobně mám radši jazyky jako lua a php a dělám s nimi častěji.
(Ten kód je mé portfolio - nedokončené)
stejně tak neni nutný nastavovat víc písem do font-family, když se písmo stahuje z google fonts...
prostor pro optimalizaci a zjednodušení tady ale pořád je 
