Web arayüzü geliştirme yardım(taktik ihtiyacı)

  • Konuyu başlatan Konuyu başlatan nt
  • Başlama tarihi Başlama tarihi
Gerçekci olalım atasözlerimiz var bu konuyla ilgili ama bu resim işin özeti

Untitled.jpeg


1. Projeyi gizledim. Burada ağustosda aynı muhabbeti çevirdik, kimse projeye yardım etme çabasında değil.

2. picproje - stm32dunio forumlarında paylaştım oralarda'da bir yardım gelmedi kimse çatallamadı.

3. Yaklaşık 1-1.5 hafta gece gündüz dengem şaşarak yazdığım kodları kimsenin çalmasını istemiyorum. Bitince insanlar kullansın ozamanda kimse aaa ne güzel süper demez yok burası böyle olsaymış der sorun değil :)

4. dün akşam 6 saatlik html videosu izledim ne gerekiyorsa yapıcam.

herkese teşekkürler katkılarınız için
 
<div> tag'ını kullanmayı öğrenmen gerek.
Ayrıca arayüzün, kullanıcının ekranına göre şekil alması için düzenleme yapman gerek. Ben de bir zamanlar baktım ki öğren öğren bitmiyor, bıraktım web ile uğraşmayı. :)
 
Ha bide <div> tagını öğrendikten sonra css ile bu "div" leri şekillendirmeyi öğrenmen gerek.

Konu öyle senin aklındaki gibi "al şu kodu kullan olur", yada elektronikten örnek verecek olursak "oraya 10k direnç tak" diyerek aşılamayacak kadar derin.
 
  • Beğen
Reactions: nt
nt dedi ki:
28439 eklentisine bak
bu küçüklütmüş hali arkaplan resmi header'da oysa ki arka planda olması gerekli

kodum burada bir göz atarmısın usta
Kod: 
{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <title>Kayıt Sayfası</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }
        body {
        background: url('/home/n/Desktop/1.jpg') no-repeat center center fixed;
        background-size: cover;
    }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f2f2f2;
        }
       
        .form {
            background-color: #fff;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            width: 400px;
        }
       
        .form-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
       
        .form-group {
            margin-bottom: 20px;
        }
       
        .form-group label {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
       
        .form-group input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
       
        .form-group input[type="submit"] {
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
       
        .form-group input[type="submit"]:hover {
            background-color: #555;
        }
       
        .form-group .form-text {
            font-size: 14px;
            color: #888;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form class="form" action="{% url 'register' %}" method="POST">
            {% csrf_token %}
            <h2 class="form-title">Kullanıcı Kaydı</h2>
            <div class="form-group">
                <label for="username">Kullanıcı Adı:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="first_name">Adınız:</label>
                <input type="text" id="first_name" name="first_name" required>
            </div>
            <div class="form-group">
                <label for="city">Şehir:</label>
                <input type="text" id="city" name="city" required>
            </div>
            <div class="form-group">
                <label for="age">Yaşınız:</label>
                <input type="text" id="age" name="age" required>
            </div>
            <div class="form-group">
                <label for="email">E-posta Adresi:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password1">Şifre:</label>
                <input type="password" id="password1" name="password1" required>
                <p class="password-policy">8 karakter uzunluğunda, bir büyük harf, bir küçük harf, ve bir sayı içermelidir.</p>
            </div>
            <div class="form-group">
                <label for="password2">Şifre Tekrar:</label>
                <input type="password" id="password2" name="password2" required>
            </div>
            <div class="form-group">
                <input type="submit" value="Kayıt Ol">
                <p class="form-text">Zaten bir hesabınız var mı? <a href="{% url 'login' %}">Giriş yapın</a></p>
            </div>
        </form>
    </div>
</body>
</html>
Genişletmek için tıklayın...
Resim için style > body altındaki backgrund size 'ı değiştirmeyi dene.
Bende kodu inceleyip şurayı değiştir diyecek kadar tecrübeli değilim. O resmi düzeltmek için kodu alıp üzerinde çalışmam lazım ki şuan iş yerimdeyim. Pek mümkün değil.
 
  • Beğen
Reactions: nt
nt dedi ki:
şimdi html ile bilgili arkadaşa sorum; bu formu sayfaya nasıl yayarım, ikiye bölerim ya da bilmiyorum bilen söylesin lütfen.
Genişletmek için tıklayın...
Style altındaki form un width değerini büyüt. 600 yap, 800 yap. Sonrada ona göre altındaki elemanların width değerini değişmen gerekebilir.
 
O değilse form-group label altındaki margin bottom u değiştir.
 
Ben niye bıraktım sanıyorsun?
Html, css, php, database, java script, ajax bilmem ne... Birde bunlar kollara ayrılıyor. Bootstrap, laravel vs. O kadar çok ki kaybolursun içinde :D
 
Gokrtl dedi ki:
Ben niye bıraktım sanıyorsun?
Html, css, php, database, java script, ajax bilmem ne... Birde bunlar kollara ayrılıyor. Bootstrap, laravel vs. O kadar çok ki kaybolursun içinde :D
Genişletmek için tıklayın...

Her sıkıntıda kütüphane bakmamak lazım. Sadece html ve css kullanarak yerleşimleri kontrol etmek mümkün.
 
  • Beğen
Reactions: nt
css ile display: block display: inline display: inline-block stillerine bak. Ama işin daha doğrusu, oturup "html, css, javascript" üçgenini öğrenmen lazım. Bu işin en temeli. Önemli olan bu üçlüyü %100 bilmen değil. Ben de o kadar bilmiyorum. Ama genel mantığını anlarsan bilmediğini araştırıp bulabiliyorsun.
 
  • Beğen
Reactions: nt
taydin dedi ki:
Her sıkıntıda kütüphane bakmamak lazım. Sadece html ve css kullanarak yerleşimleri kontrol etmek mümkün.
Genişletmek için tıklayın...
İşte, keşke yerleşimle kalsa sorun. Html css bir yere kadar abi. Sonra benim açımdan php giriyor devreye. Saf php de kalmak en güzeli ve verimlisi ama piyasada laravel tarzı öyle modüller dönüyor ki bir şey ararken sürekli onlar ile yapılmış çözümler çıkıyor karşına. Bazı yerlerde php yetmiyor mecbur java scripte bulaşmak zorunda kalıyorsun filan.

Yine kendi açımdan baktığımda bazen php kütüphanelerini çözemiyorum. Adam anlatmış ama benim kafaya girmiyor yapı bir türlü. Çok sıkışınca da bıkkınlık veriyor bırakıyorum. Tıpkı bir zamanlar uğraştığım multimetre karşılaştırma web sitesi gibi :D
 
Yerleşim konusunda şöyle birşey yapabilirsin:

İki tane div oluştur ve bunları "display: inline-block" şeklinde yan yana yerleştir. Sol div de ad, soyad vs alan inputlar olsun, sağ divde de email adres ve şifreleri alan inputlar olsun. inputları "display: block" yaparsın, böylece alt alta yerleşirler.
 
  • Beğen
Reactions: nt
nt dedi ki:
bugünük son sorumu soruyorum günlük limiti aşmıyalım :D

şifre yazıyoruz ama görünmüyor yani ****** olarak görüyorum

bunun için emoji ekledim fakat göremiyorum hem normal karakter hemde ***** olarak görmek için

bir yerde hatam var :(

28461 eklentisine bak

28460 eklentisine bak
Genişletmek için tıklayın...
O öyle olmaz ya.
Orada da javascript devreye girer. Nasıl yapılır bilmiyorum ama input tipini password tanımlayınca yıldız yazıyor ya, belki orayı değişken olarak tanımlayarak çözülebilir. Yani bir tıklarsın input tipi text olur, bir daha tıklarsın input tipi password olur. JS de on klik olaylarına bir bak.
 
  • Beğen
Reactions: nt
nt dedi ki:
yazdım abi js acayip benziyor pythona hazır buluyorum zaten insanlardan :D crtl+c / crtl+v

Kod: 
 function togglePasswordVisibility(inputId) {
            var passwordInput = document.getElementById(inputId);

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
            } else {
                passwordInput.type = "password";
            }
        }
Genişletmek için tıklayın...
O değilde hakkaten input tipi değiştirilerek yapılıyormuş. Demek ki yapışmış yakamıza. Ne kadar bıraksak ta çözüm bulma mantığımız körelmemiş. :katil2:
 
nt dedi ki:
emoji göstermiyordur dedim sadece bir harf denedim oda yok ortada

acaba css ayarlarında bir hata yaptımda sağ sola mı gitti:dusun1:
Genişletmek için tıklayın...
İmput tagının kullandığı elemanlara baksana bi. Sanki oradan ayarlanıyordu.
 
İnput tagında onu düzenleyen bir komut var. Her zamanki gibi adını hatırlamıyorum. Onu kaldır.
 
  • Haha
Reactions: nt
Cevaplamak için giriş yap veya kayıt ol.

Çevrimiçi personel

Çevrimiçi üyeler

Toplam: 368 (üye: 22, misafir: 346)

Forum istatistikleri

Konular
7,356
Mesajlar
124,390
Üyeler
2,982
Son üye
merthkm

Bu sayfayı paylaş

Son kaynaklar

Son profil mesajları

Freemont2.0
Freemont2.0 herbokolog Freemont2.0 wrote on herbokolog's profile.
nick iniz yakıyor
:D
•••
Freemont2.0
Freemont2.0 posta Freemont2.0 wrote on posta's profile.
Merhabalar :)
•••
muro28
muro28
az bilgili çok meraklı
•••
P
Prooffy semih_s Prooffy wrote on semih_s's profile.
Merhaba, sizden DSO2C10 hakkında bilgi rica ettim. Yanıtlarsanız sevinirim...
•••
U
Unal taydin Unal wrote on taydin's profile.
Timur Bey, Arduino kontrollü bir akü şarj cihazı yapmaya çalışıyorum. Aklımdaki fikri basit bir çizim olarak konu açmıştım. Özellikle sizin fikirlerinizi çok önemsiyorum.
•••
Back
Top