Erstellen Webseite wie Windows 8-Start-Bildschirm (Neuling)

Ersten, ich bin ein high-schooler und eine sehr neue Programmierer (denke CS101-Ebene). In meiner Freizeit (leider begrenzt), möchte ich versuchen, einige Projekt, um mich ermutigen, mehr zu lernen, und ich habe eine interessante Idee.

Ich bin mir nicht sicher, ob dies der richtige Ort das zu Fragen, aber ich Frage mich, wenn jemand konnte mich schon in die richtige Richtung. Ich möchte eine web-site, die ähnlich aussieht wie die Windows 8-Start-Bildschirm (hier ist ein link zu einem Bild, wenn aus irgendeinem Grund, Sie nicht wissen, wie es aussieht).

Die Idee ist ähnlich wie block-wie Objekte von unterschiedlicher Länge (vielleicht nicht so ordentlich aus einem raster wie Windows 8 hat), die kann man scrollen, aber horizontal, und das kann einige "aktive" Dinge auf Sie. Klicken Sie auf eine könnte verwenden einige AJAX-Techniken, um entweder zu einem anderen Menü, oder öffnen Sie ein Fenster "Informationen" auf der Seite. Art, wie Sie Outlook/Hotmail ändern können Bildschirme ohne nachladen. Die Informationen für die box-Elemente würde wahrscheinlich kommen aus einer Datenbank.

Habe ich eine kleine Menge Erfahrung in PHP, MySQL und JavaScript - genug zu verstehen, einige code und schreiben von einfachen Skripten. Was sollte ich den Fokus auf das lernen für meine Idee zu einem Projekt? Ich bin gerade auf der Suche für eine roadmap der Dinge zu studieren.

Dank!

  • Leider ist dies nicht ein großartiger Ort für die Frage, wie es ist, weil es zu offen. Stack-überlauf ist über technische Fragen, bei denen Sie zeigen Sie Ihre code und Holen Sie sich Hilfe auf, warum etwas nicht funktioniert. Wird es sein, wenn Sie haben spezifische Fragen wie: "Soll ich eine Tabelle zur Anzeige von Blöcken unterschiedlicher Länge, wie windows 8", oder "Das rollover-Effekt funktioniert nicht wie ich es will".
  • Ich dachte, dass dies der Fall war, aber ich war nicht sicher, ob ein besserer Ort. Super-User scheint nicht zu viel über die Programmierung, und der "Programmierer" - Seite ist etwas für Profis. Und ich habe nicht wirklich wollen, gehen Sie zu Yahoo! Antworten...
  • Sie könnten versuchen, jacedc.deviantart.com/#/d5oqhvq aber seine unvollendet und enthält keine ansprechende Gestaltung. Auch browser-Verhalten ändert sich drastisch, aber es ist immer noch ein unvollendetes Projekt. (P. S. Sorry für ein wenig spät, dachte, ich würde werfen, dass die, die es gibt :P)
  • Das ist interessant, aber mein Projekt hat sich in eine horizontale scrollen timeline-app.
InformationsquelleAutor LaserWraith | 2012-11-13
  1. 3

    Können Sie mock-up der win8 look mit css und Bild 2 breiten und ob Ihr einen normalen oder breiten Element, fügen Sie einfach eine extra Klasse auf der Stil. Mit jQuery kann man die Symbole/Seite ziehen können ect, mit ein bisschen Arbeit könnte man einfach Messen Sie die Breite und laden Sie weitere Inhalte per ajax viel wie lazy load sondern horizontal, verwenden Sie die ondblclick="" zu initiieren laden der app/content, das ist, was ich mit oben kommen in 30min. Quelle & Bilder

    Erstellen Webseite wie Windows 8-Start-Bildschirm (Neuling)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>basic win8</title>
<style>
*{font-family: "Segoe UI", Frutiger, "Frutiger Linotype";}
body{background-image:url('Win8Background.jpg');}

#wrapper {
    width: 70%;
    padding: 0px;
    margin-left:auto;
     margin-right:auto;
}
.sortable-list li {
    padding: 4px;
    margin: 4px;
    float: left;
    border: 1px solid black;
    list-style-image: none;
    list-style: none;
    list-style-type: none;
    background-color:#204558;
}

#dashboard-layout .item.normal {
    width: 100px;
    height: 100px;
}

#dashboard-layout .item.wide {
    width: 224px;
    height: 100px;
}

.item.normal p{
margin:0px;
padding: 0px;
}

.item.wide p{
margin:0px;
padding: 0px;
}

h1{color:white;}

#left_head{width:45%; float:left;}
#right_head{width:45%; float:right; text-align:right;margin-right:15px;}
</style>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
function update_columns() {
    var positions = []
    $("#dashboard-layout .item").each(function() {
        var $item = $(this);
        positions.push($item.attr('id'));
    });
    $.post("./", { 'positions[]': positions },
        function(data) {
            alert("Update Success - New positions:" + positions);
        }
    );
}

$(function() {
    $("ul.sortable-list").sortable({
        connectWith: "#wrapper",
        placeholder: 'ui-state-highlight',
        tolerance: 'pointer',
        revert: true,
        forcePlaceholderSize: true,
        forceHelperSize: true,
        update: update_columns,
    }).disableSelection();
});
</script>

</head>

<body>

<div id="left_head"><h1>Start</h1></div>
<div id="right_head"><h1>Lawrence Cherone</h1></div>
<div style="clear:both;"></div>

<div id="wrapper">

<ul class="sortable-list" id="dashboard-layout">

    <li id="a" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content a
    </li>

    <li id="b" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content b
    </li>

    <li id="c" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content c
    </li>

    <li id="d" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content d
    </li>

    <li id="e" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content e
    </li>

    <li id="f" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content f
    </li>

    <li id="g" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content g
    </li>

    <li id="h" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content h
    </li>

    <li id="i" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content i
    </li>

    <li id="j" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content j
    </li>

    <li id="k" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content k
    </li>
</ul>

</div>

</body>
</html>
    • Vielen Dank für die Zeit, die Sie verbracht! Ich dachte, ich würde in die richtige Richtung mit jQuery, aber war nicht absolut sicher.
    InformationsquelleAutor Lawrence Cherone
  2. 0

    Vorausgesetzt, jeder "Block" auf Ihrer Website stellt eine einzelne Zeile in einer Datenbank (Also nicht geerbt, Eltern-Kind-Beziehung) es gelöscht ziemlich einfach, verwenden Sie einfach CSS3 zu erstellen, die Blöcke, jQuery zu tun die roll-over-Effekte (Und schwebt, weil let ' s face it, Bewegung der Fische sind genial).

    Integration von jQuery und Ajax wird Ihnen erlauben, zu tun, die Datenbank, rufen Sie entweder per PHP als flache Datei oder OOP.

    Vielleicht wollen Sie auch zu suchen in verschachtelten Abfragen, wie Sie wahrscheinlich in handliches kommen, wenn Sie wollte etwas verrücktes tun wie die 2 "Blöcke" auf der einen Seite und Sie brauchen, um Daten aus 2+ Tabellen auf der besagten Seite.

    Glück

    • "tun Sie das Datenbank-Aufruf entweder per PHP als flache Datei oder OOP." Ich habe gelesen das einige über die Verwendung einer separaten .php-Datei, um die Datenbank abzufragen, aber was redest du mit "OOP"? Ich nehme an, du meinst, Object-oriented programming, wissen aber nicht genau, wie es angewendet wird, in diesem Fall, oder unterscheiden sich von den Techniken, die benutzt werden: openenergymonitor.org/emon/node/107
    • Flat File = <Code code code code> require_once('File.php') <--- enthält für logic etc, <code code code> OOP-Methode: require_once('DBCon.php); require_once('DBQueries.php); require_once('Application-Blocks.php'); Und jeder dieser Dateien pretains mehrere Funktionen, so dass, wenn es Zeit zum ändern der "Web Seite" müssen Sie nur einige einfache Zeilen wie $dbConn = new dbConn(); $dbConn->dbConnect(); $dbConn->dbQueries->loadAppConfig(); Extrem hart, aber hoffentlich bekommen Sie die Idee. Mit OOP erlaubt das erstellen von Funktionen bereit, zugänglich fast überall.
    InformationsquelleAutor John
Schreibe einen Kommentar