Προς το περιεχόμενο

Σχεδιασμός custom site

killer76

Από τον killer76
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

killer76 Mentor

killer76

Δημοσ.
Δημοσ. (επεξεργασμένο)

Καλησπέρα. Ξεκίνησα να προχωράω πέρα από το wp, φτιάχνοντας ένα δικό μου custom site από την αρχη, ωστε σιγά σιγά να μαθαίνω.

Έχω φτιάξει αρκετά πράγματα όπως τα θέλω (σχεδιασμος, δυναμικές σελίδες κλπ), με html,css, php, mysql, (δεν έχω βάλει js ακόμα), και χρησιμοποιώ σαν framework και το bootstrap.

Μέχρι στιγμής το πιο μπερδεμένο σημείο που χάνω ώρες ατελείωτες, είναι στην κατανόηση του σχεδιασμού σε μερικά σημεία. Για παράδειγμα έχω φτιάξει μια σελίδα όπως ακριβώς την θέλω (header, footer, αλγόριθμους για τις λειτουργίες που θελω) σχετικα γρήγορα και παιδευομαι μια εβδομάδα για το πώς θα βάλω sidebar και το πώς θα εμφανίσω τα results της mysql, όπως ακριβώς τα θέλω. 

Υπάρχει κάποιο πρόγραμμα που να με βοηθάει σε αυτό το κομμάτι; Μπας και γλυτώσω λίγο με τα άπειρα div, class κλπ. Δηλαδή να φτιάχνω οπτικά αυτό που θέλω και να μου δίνει html και css για το συγκεκριμένο κομμάτι.

Ή πρέπει οπωσδήποτε (γιατί με ενδιαφέρει να προχωρήσω) να μάθω να τα κάνω όλα με editor;

 

Επεξ/σία από killer76
  • Like 1
The King Proficient

The King

Δημοσ.
Δημοσ. (επεξεργασμένο)
7 ώρες πριν, killer76 είπε

(δεν έχω βάλει js ακόμα), και χρησιμοποιώ σαν framework και το bootstrap.

Ήδη χρησιμοποιείς JS, απλά δεν το γνωρίζεις (bootstrap lib).

 

7 ώρες πριν, killer76 είπε

Υπάρχει κάποιο πρόγραμμα που να με βοηθάει σε αυτό το κομμάτι; Μπας και γλυτώσω λίγο με τα άπειρα div, class κλπ. Δηλαδή να φτιάχνω οπτικά αυτό που θέλω και να μου δίνει html και css για το συγκεκριμένο κομμάτι.

  1. Macaw
  2. Pingendo
  3. Pinegrow
  4. Mobirise

Με τον καιρό, όσο πολύπλοκες κι αν είναι οι ιστοσελίδες που θα φτιάχνεις,  θα αρχίσεις να αποζητάς ο ίδιος να δουλεύεις με κάποιον code editor κι ας μην το καταλαβαίνεις ακόμα τώρα.

Καλή επιτυχία !

Επεξ/σία από The King
  • Thanks 1
TheDarkKnight Contributor

TheDarkKnight

Δημοσ.
Δημοσ.

Για να τοποθετήσεις sidebar θα πρέπει να δημιουργήσεις ένα grid layout. Για το θέμα με τη mysql θα πρέπει να δώσεις παραπάνω πληροφορίες σχετικά με το τι θες να κάνεις αλλά και τι έχεις κάνει ως τώρα.

killer76 Mentor

killer76

Δημοσ.
  • Μέλος
Δημοσ. (επεξεργασμένο)

Καταρχήν ευχαριστώ για τις απαντήσεις σας. Δεν ξερω αν θα καταφέρω κάτι με τους παραπάνω editors, αλλά θα ασχοληθώ αργότερα που θα πάω σπίτι πιο αναλυτικά. 

Ποιο είναι το προβλημά μου: 

Εμφανίζω κάποια πεδία από την mysql. Δείτε όμως τα προβλήματα στις εικόνες που έφτιαξα σαν παράδειγμα.

Spoiler

image1.jpg.8c1c53baf1682f04da4a3d047ffd2753.jpgimage2.jpg

 

Έχω κάνει 100 πειράματα. Φτιάχνει το ένα, χαλάει το άλλο. Επίσης τώρα ανεβάζω από πριν τις εικόνες σε 800x600 για να έχουν σταθερές αναλογίες. 

O κώδικας στην php μέχρι στιγμής είναι:

Spoiler

  


<?php
Κωδικας που συνδέω με την βάση και select τα πεδία.
?>
<section>
    
<?php
	$tmpCount = 0;
	if ($result) {
			while($row = $result->fetch_assoc()) {
				$tmpCount ++;				
?>
	<div class="row" style="margin: 10px 0 10px 0;background-color:white;" >
	<div class="col-sm-1" style="background-color:black;" style="padding:0;">
			<span  id="list_photo2"> <h1 style="padding:0;color:white;"><?php echo $tmpCount; ?></h1></span>
		</div>
		<div class="col-sm-5" style="padding:0;">
			<img src="<?php echo $row["Avatar"]; ?>" >
		</div>
		<div class="col-sm-6">
			<h1 class="card-title" style=""><?php echo $row["Title"]; ?></h1>
            <p class="card-text">Λ/Σ: <b><?php echo $row["os"]; ?></b></p>
            <p class="card-text">Οθόνη: <b><?php echo $row["screen"]; ?></b></p>
			<p class="card-text">Βάρος: <b><?php echo $row["weight"]; ?></b></p>
			
			<span style="vertical-align:bottom;">
			<div>
			<a href="<?php echo $row["Website"]; ?>" target="_blank"><i class="fa fa-external-link-square" style="font-size:3em; color:#e67300;"></i></a>
			<a href="<?php echo $row["Facebook"]; ?>" target="_blank"><i class="fa fa-facebook-square" style="font-size:3em; color:#3C5A99;"></i></a>
			<a href="" target="_blank"><i class="fa fa-twitter-square" style="font-size:3em; color:#55ACEE;"></i></a>
			<a href="" target="_blank"><i class="fa fa-youtube-square" style="font-size:3em; color:#DE2825;"></i></a>
			<a href="" target="_blank"><i class="fa fa-google-plus-square" style="font-size:3em; color:#DA4030;"></i></a> 
			<a href="" target="_blank"><i class="fa fa-linkedin" style="font-size:3em; color:#1B75BB;"></i></a>
			<a href="" target="_blank"><i class="fa fa-instagram" style="font-size:3em; color:#D93073;"></i></a> 
			</div>
			</span>
		</div>
	</div>
<?php
    }
	} else {
    echo "0 results";
}
$conn->close();
?>		
</section>

Και ο κώδικας του css μέχρι στιγμής είναι:

Spoiler

  


body  { 
   overflow-x: hidden;
}
h2 {
    padding: 50px 0px 50px 0px;
    font-size:40px;
    color:grey;
}
h1 {
   text-align:center;
   font-size:42px;
   padding:15px 0 15px 0;
   
}
img{
max-width:100%;
display:inline-block;
}

@media screen and (min-width: 768px) {
  .jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 42px;
  }
}
/* Dropdown menu background color*/
.navbar-nav > li > .dropdown-menu {     
background-color: #e7e7e7;  
}
/* Dropdown menu font color*/ 
 .navbar-nav > li > .dropdown-menu a{   
 color: #555555;  
 }


  #list_photo2 {
padding:2px 5px 2px 5px;
background-color:black;
color:white;
margin: 0;
text-align:center;
 }
 
 .card-title {
	padding: 5px 5px 5px 5px;
	text-align: center;
 }

 

===== Για να μην ανοίγω νέο νήμα =====

Υ.Γ.1 τι μπορώ να κάνω στον παραπάνω php κώδικα ωστε να εμφανίζω μόνο τα social εικονίδια που έχουν λινκ για σελίδα ή social profile. Γιατί τώρα και άδεια να είναι σε μια εγγραφή τα πεδία "facebook, twitter, youtube κλπ", τα εμφανίζει κανονικά.

Υ.Γ.2 Έχω φτιάξει ένα δυναμικό μενού στο navbar που τα στοιχεία του τραβιούνται από έναν πίνακα στην mysql. Πχ ο πίνακας λέγεται OS και έχει μέσα εγγραφέςOS.name "iOS, Android, Windows κλπ". Οπότε το menu είναι οκ. Στην σελίδα με την λίστα των results (στο παραπάνω php κώδικα) αν στο select βάλω για παράδειγμα WHERE OS.name = "Android", δουλέυει μια χαρά και εμφανίζει μόνο τα αποτελέσματα με android λειτουργικό. 

Υπάρχει όμως τρόπος στο ίδιο phones.php να γίνεται αυτόματα το φίλτρο με την επιλογή που κάνει κάποιος από το μενού? Ή πρέπει να φτιάξω ξεχωριστά php (android.php, ios.php κλπ) που θα έχουν μέσα αντίστοιχα WHERE OS.name = "Android", WHERE OS.name = "ios", και στο μενού σαν σύνδεσμους θα πρέπει να βάλω σαν link τα android.php, ios.php κλπ

 

Επεξ/σία από killer76
TheDarkKnight Contributor

TheDarkKnight

Δημοσ.
Δημοσ. (επεξεργασμένο)

Για να εμφανίσεις μόνο τα links που δεν είναι κενά, έλεγξε με if στη php και μόνο αν ικανοποιούν τη συνθήκη κάνε echo ολόκληρο το στοιχείο. Μπορείς να εμφανίσεις και από τα άλλα λειτουργικά συστήματα συσκευές είτε με τη χρήση ajax είτε με απλό get request. Πχ. phones.php?os=android

Επεξ/σία από TheDarkKnight
killer76 Mentor

killer76

Δημοσ.
  • Μέλος
Δημοσ.
3 ώρες πριν, TheDarkKnight είπε

Για να εμφανίσεις μόνο τα links που δεν είναι κενά, έλεγξε με if στη php και μόνο αν ικανοποιούν τη συνθήκη κάνε echo ολόκληρο το στοιχείο. 

Το έκανα φίλε μου και δούλεψε. Σε ευχαριστώ. 

3 ώρες πριν, TheDarkKnight είπε

Μπορείς να εμφανίσεις και από τα άλλα λειτουργικά συστήματα συσκευές είτε με τη χρήση ajax είτε με απλό get request. Πχ. phones.php?os=android

Σε αυτό δεν κατάλαβα πως πρέπει να το κάνω. Δεν ξέρω και πως να το ψάξω. Τώρα το μενού μου έχει φτιαχτεί με το παρακάτω κώδικα και εμφανίζει όλες τις επιλογές που θέλω, από την mysql. Τι πρεπει να βάλω στο href="#" ?

O κώδικας του μενού είναι κάπως έτσι. 

Spoiler 

<?php
$sql = "SELECT phone_os FROM phones_os;";
$result = $conn->query($sql);
?>
			<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Λειτουργικά<b class="caret"></b></a>
    <ul class="dropdown-menu columns">
	
<?php
	if ($result) {
			while($row = $result->fetch_assoc()) {
?>
			<li><a href="#"><strong><?php echo $row["phone_os"]; ?></strong></a></li>
                     
<?php
    }
	} else {
    echo "0 results";
}
$conn->close();
?>

 

 

  • 3 εβδομάδες αργότερα...
killer76 Mentor

killer76

Δημοσ.
  • Μέλος
Δημοσ.

καλησπέρα. Γράφω εδώ για να μην ανοίγω νέο θέμα. Έκανα αυτά που μου είπατε και μέχρι στιγμή όλα πάνε καλά. Έχω φτιάξει και μια navbar με href είτε στατικά είτε δυναμικά που φτιάχνουν ένα url. Μετά σε μία php κάνω get από το url όπως είπε ο @TheDarkKnight και με ένα where στο select της mysql μου, εμφανίζω τα αποτελέσματα. Μέχρι στιγμής ΟΛΑ δουλεύουν ρολόι.

Το site μου στην δομή του (την γράφω για να έχετε μια εικόνα, αν μπορείτε να μου απαντήσετε αν γίνονται αυτά που γράφω παρακάτω.

1) Έχω ένα index.php που φορτώνω μέσα ΟΛΑ με include (τα σπάω σε πολλά κομμάτια για να μην μπερδέυομαι)

  • header.php (με meta description, frameworks, title, favicon κλπ)
  • navbar.php
  • Ενα hero-image.php
  • 3-4 php με div οπως τα θέλω
  • footer.php

Όλα δουλεύουν ρολόι...

2) Εχω  μια σελίδα action.php που έχει.

  • header.php
  • navbar.php
  • apotelesmata.php (εδω εμφανίζονται τα αποτελέσματα)
  • footer.php

3) Η σελίδα apotelesmata.php αποτελείται από:

  • select.php (εδώ βρίσκονται τα get από το url και τα select της mysql)
  • Η λίστα των αποτελεσμάτων

Δηλαδή ο σύνδεσμος από ένα link στη navbar για παράδειγμα γίνεται localohost/action.php?category=car και εμφανίζονται σωστά τα αποτελέσματα.

Μέχρι εδώ όλα ΟΚ.

Απλά μετά από μια συζήτηση ανακάλυψα κάποια πράγματα που θα ήθελα να κάνω στο site. Ψάχνω 3 μέρες σε w3scool, google κλπ αλλά δεν βγάζω άκρη με τίποτα (δεν ξέρω και ποια τεχνολογία να χρησιμοποιήσω, ούτε καλά αγγλικά)

Θα  γράψω εδώ τι θέλω και όποιος μπορεί ας απαντήσει με ένα παράδειγμα που να ενσωματώνεται με την παραπάνω δομή. Επίσης θα ήμουν ευγνώμων αν στα 3 ερωτήματα εκτός από λύση θα μπορούσατε να με διαφωτίσετε αν αυτά που θέλω είναι:

  • Απαραίτητα (για λόγω εμφάνισης / UX ) σε μία σύγχρονη σελίδα ή προαιρετικά
  • Επιβάλλονται (για λόγω ταχύτητας, ασφάλειας, οικονομίας πόρων κλπ ) σε μία σύγχρονη σελίδα ή προαιρετικά
  • Αν μπορούν να υλοποιηθούν και αργότερα. Δηλαδή αφού ολοκληρώσω το site, ωστε να μην μπάινω σε περιπέτειες από τώρα.

Αυτα που θέλω να κάνω.

  1. Με κάθε επιλογή από navbar ή από τα αποτελέσματα κλπ, να μην γίνεται refresh όλη η σελίδα, αλλά μόνο το περιεχόμενο. Δηλαδή η navbar και το footer να είναι σταθερά.
  2. Τα url να μην είναι του στυλ localhost/action.php?category=cars&sort=by_price κλπ. Μου κάνει εντύπωση που το mixcloud.com για παράδειγμα, το url δεν αλλάζει σχεδόν ποτέ.

Ευχαριστώ πάρα πολύ!!!!

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...