Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Sunum Bileşenleri
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Genel Bakış
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları. Temel HTML Etiketleri - Tablo, Form
Temel HTML Etiketleri - Text, Image, Link, List, Imagecmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları. Temel HTML Etiketleri - Text, Image, Link, List, Image
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 2cmkandemir
Eskişehir Osmangazi Üniversitesi Eğitim Fakültesi
Öğrenme Yönetim Sistemleri Dersi Ödev Raporu
Öğretim Üyesi: Yrd.Doç.Dr. Celal Murat KANDEMİR
Hazırlayanlar: Mehmet Mevlüt ODACI
Şükrü DUTAR
• Sınav Hazırlama ve Soru Bankası Seçenekleri
• İletişim Araçları(Danışmanlık Hizmetleri)
• Ödev/Portfolyo Araçları
• Yönetimsel Araçlar
• Diğer Araçlar
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. impress.js Framework
Eskişehir Osmangazi Üniversitesi, Mühendislik-Mimarlık Fakültesi, Bilgisayar Mühendisliği, Advanced Programming. Face Detection In Java by Using OpenCV Lİb.
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Genel Bakış
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları. Temel HTML Etiketleri - Tablo, Form
Temel HTML Etiketleri - Text, Image, Link, List, Imagecmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları. Temel HTML Etiketleri - Text, Image, Link, List, Image
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 2cmkandemir
Eskişehir Osmangazi Üniversitesi Eğitim Fakültesi
Öğrenme Yönetim Sistemleri Dersi Ödev Raporu
Öğretim Üyesi: Yrd.Doç.Dr. Celal Murat KANDEMİR
Hazırlayanlar: Mehmet Mevlüt ODACI
Şükrü DUTAR
• Sınav Hazırlama ve Soru Bankası Seçenekleri
• İletişim Araçları(Danışmanlık Hizmetleri)
• Ödev/Portfolyo Araçları
• Yönetimsel Araçlar
• Diğer Araçlar
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. impress.js Framework
Eskişehir Osmangazi Üniversitesi, Mühendislik-Mimarlık Fakültesi, Bilgisayar Mühendisliği, Advanced Programming. Face Detection In Java by Using OpenCV Lİb.
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.
PHP ve MySQL Bağlantısı - Temel İşlemlercmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.PHP ve MySQL Bağlantısı, Temel Veritabanı İşlemleri; SELECT, INSERT, DELETE, UPDATE
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 1cmkandemir
Eskişehir Osmangazi Üniversitesi Eğitim Fakültesi
Öğrenme Yönetim Sistemleri Dersi Ödev Raporu
Öğretim Üyesi: Yrd.Doç.Dr. Celal Murat KANDEMİR
Hazırlayanlar: Mehmet Mevlüt ODACI
Şükrü DUTAR
• Öğreten Rolleri
• Öğrenen Rolleri
• Öğretene Sunulan Araçlar
• Öğrenene Sunulan Araçlar
• Kullanıcı Hesabı Oluşturma
o Öğretmen Hesabı Oluşturma
o Öğrenci Hesabı Oluşturma
o Ebeveyn Hesabı Oluşturma
• Ders Oluşturma
• İçerik ve Etkinlik Çeşitleri ve Adımları
• Öğrenci İzleme Yöntemleri
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Sunum Bileşenleri
Kod Akış Kontrolü - Döngüler, Fonksiyonlarcmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.Döngüler ve fonksiyonlar
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. Web Sitesi Geliştirme Adımları
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.PHP ve Kullanıcı Girişlerinin İşlenmesi
HTML Formlar – Kullanıcı Girişlerinin İşlenmesi
GET ve POST farklılıklar
Sihirli cURL
Escaping user data
Dosyalar
Chapter 2-8085 Microprocessor Architecture and Microcomputer Systemscmkandemir
The 8085 microprocessor uses three separate busses - the address bus, data bus, and control bus - to perform operations. The 16-bit address bus allows the 8085 to access up to 64K memory locations. The 8-bit data bus transfers data between the microprocessor and memory or I/O devices in 8-bit chunks. The control bus consists of individual control signals that coordinate operations. Memory is organized into chips that are selected using address lines and chip select signals. This allows the microprocessor to access multiple memory chips within its 64K address range.
Chapter 1-Microprocessors, Microcomputers, and Assembly Languagecmkandemir
This document provides an introduction to microprocessors and assembly language programming. It discusses the basic components and organization of a microprocessor-based system including the microprocessor, memory, and input/output. It also covers number systems including decimal, binary, and hexadecimal. The document provides examples of simple programs and discusses the instruction set and machine language of microprocessors. The overall purpose is to introduce foundational concepts about microprocessor architecture and assembly language programming.
The document discusses Vaadin's data model and JPAContainer component. It describes how the data model uses properties, items, and containers to bind user interface components to data. JPAContainer allows connecting Vaadin components directly to persistent model objects stored in a database using the Java Persistence API. It provides examples of using JPAContainer with a sample address book application to display and edit data from a database in tables and forms.
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.
PHP ve MySQL Bağlantısı - Temel İşlemlercmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.PHP ve MySQL Bağlantısı, Temel Veritabanı İşlemleri; SELECT, INSERT, DELETE, UPDATE
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 1cmkandemir
Eskişehir Osmangazi Üniversitesi Eğitim Fakültesi
Öğrenme Yönetim Sistemleri Dersi Ödev Raporu
Öğretim Üyesi: Yrd.Doç.Dr. Celal Murat KANDEMİR
Hazırlayanlar: Mehmet Mevlüt ODACI
Şükrü DUTAR
• Öğreten Rolleri
• Öğrenen Rolleri
• Öğretene Sunulan Araçlar
• Öğrenene Sunulan Araçlar
• Kullanıcı Hesabı Oluşturma
o Öğretmen Hesabı Oluşturma
o Öğrenci Hesabı Oluşturma
o Ebeveyn Hesabı Oluşturma
• Ders Oluşturma
• İçerik ve Etkinlik Çeşitleri ve Adımları
• Öğrenci İzleme Yöntemleri
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Sunum Bileşenleri
Kod Akış Kontrolü - Döngüler, Fonksiyonlarcmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.Döngüler ve fonksiyonlar
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. Web Sitesi Geliştirme Adımları
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.PHP ve Kullanıcı Girişlerinin İşlenmesi
HTML Formlar – Kullanıcı Girişlerinin İşlenmesi
GET ve POST farklılıklar
Sihirli cURL
Escaping user data
Dosyalar
Chapter 2-8085 Microprocessor Architecture and Microcomputer Systemscmkandemir
The 8085 microprocessor uses three separate busses - the address bus, data bus, and control bus - to perform operations. The 16-bit address bus allows the 8085 to access up to 64K memory locations. The 8-bit data bus transfers data between the microprocessor and memory or I/O devices in 8-bit chunks. The control bus consists of individual control signals that coordinate operations. Memory is organized into chips that are selected using address lines and chip select signals. This allows the microprocessor to access multiple memory chips within its 64K address range.
Chapter 1-Microprocessors, Microcomputers, and Assembly Languagecmkandemir
This document provides an introduction to microprocessors and assembly language programming. It discusses the basic components and organization of a microprocessor-based system including the microprocessor, memory, and input/output. It also covers number systems including decimal, binary, and hexadecimal. The document provides examples of simple programs and discusses the instruction set and machine language of microprocessors. The overall purpose is to introduce foundational concepts about microprocessor architecture and assembly language programming.
The document discusses Vaadin's data model and JPAContainer component. It describes how the data model uses properties, items, and containers to bind user interface components to data. JPAContainer allows connecting Vaadin components directly to persistent model objects stored in a database using the Java Persistence API. It provides examples of using JPAContainer with a sample address book application to display and edit data from a database in tables and forms.
2. İçindekiler
Kenarlıklar - Borders
Taşma - Overflow
Kenar boşlukları ve –
girintiler Margins and
Paddings
Kutu modeli -The Box
Model
Genişlik/Yükseklik - Width
and Height
Diğer CSS Özellikleri
2
4. Kenarlıklar
border-width: thin, medium, thick veya
sayısal değer (e.g. 10px)
border-color: renk isimleri veya RGB değer
border-style: none, hidden, dotted,
dashed, solid, double, groove, ridge,
inset, outset
Her bir özellik sol, sağ, üst ve alt kenar için ayrı
ayrı tanımlanabilir.
border-top-style, border-left-color, …
4
5. Kenarlık Steno Özellikleri
border: kenarlık özelliklerini bir kerede
ayarlamak için steno kuralı:
aşağıdakine eş değerdir:
Steno kuralı tüm kenarlar için uygulanabilir:
border-top, border-left, border-right,
border-bottom
When to avoid border:0 5
border: 1px solid red
border-width:1px;
border-color:red;
border-style:solid;
6. CSS3 – Kenarlık resmi
Normal kenarlık yerine görüntü kullanılmasına
imkan verir.
Örnek:
border-image özeliiği 3 bölümden oluşur:
Daha detaylı açıklama:
http://css-tricks.com/6883-understanding-
border-image/
6
border-image: url(border-image.png) 25% repeat;
8. CSS3 –Yuvarlatılmış Köşeler
CSS 3 ile gelmiştir.
Tüm önemli tarayıcılarda geçerlidir.
Firefox, IE 9, Chrome, Opera ve Safari
border-radius özelliği ile belirlenir
Köşe yarıçapı üç şekilde tanımlanabilir:
border-radius: [<uzunluk>|<%>][<uzunluk>|<%>]?
border-radius: 15px;
border-radius: 15px 20px;
border-radius: 15px 15px 15px 10px;
11. Taşma
overflow: İçeriğin belirlenenden daha fazla alana
gereksinimi olduğunda içeriğin bulunduğu bileşenin
nasıl davranacağını belirtir.
Değerler:
visible (default) – bileşen dışında içerik taşmasını
göster
auto – gerektiğinde kaydırma çubuklarını göster
scroll – kaydırma çucuklarını her zaman göster
hidden – sığmayan içeriği gizle/kırp
11
13. Kenarlıklar ve Girintiler
margin ve padding bileşeni çevreleyen
boşluğu tanımlar
Sayısal değer, e.g. 10px veya -5px
Her dört kenar için ayrı ayrı belirlenebilir-
margin-top, padding-left, …
margin kenarlık dışındaki boşluktur
padding kenarlık ve içerik arasındaki boşluktur
13
14. Margin ve Padding: Steno
Kuralları
margin: 5px;
Tüm kenar boşlukları 5 px olarak ayarlanır;
margin: 10px 20px;
Üst ve alt 10px, sol ve sağ 20px;
margin: 5px 3px 8px;
üst 5px, sol/sağ 3px, alt 8px
margin: 1px 3px 5px 7px;
üst, sağ, alt, sol (üstten itibaren saat yönünde)
padding değerleri için de aynısı geçerli.
14
19. CSS 3 Esnek Kutu Model
Sayfa yerleşimi ile ilgili bir özelliktir.
"display" özelliği için yeni değerler:
flexbox
inline-flexbox
Halen geliştirilmesi devam ediyor.
Çoğu tarayıcıda desteklenmiyor.
19
21. CSS 3 Flexible Box Model
Özellikleri
flex-direction
esnek kutuların sıralama yönünü belirler..
flex-order
Bileşenlerin sıralamasını değiştirmek
amacıyla kullanılabilir. Bileşenler bu değere
göre sıralanır.
21
22. CSS 3 Flexible Box Model
Özellikleri
flex-pack
kapsayıcı kutunun içindeki esnek kutuların
kapsayıcıya göre konumunu belirlemek için
kullanılır
flex-align
Kapsayıcı elemana atanan box-orient
değerine göre kalan boşluğa göre hizalama
yapmak için kullanılır.
22
23. CSS 3 flex-direction
Flex kapsayıcısı içerisindeki elamanlarının
yatay veya dikey olarak hizalanmalarını
sağlayan özelliktir
Alabileceği değerler:
row(varsayılan): elemanların yatayda soldan
sağa doğru hizalanmalarını sağlar
Column: elemanların dikeyde yukarında aşağıya
hizalanmalarını sağlar
row-reverse: row un tersidir.
column-reverse: column un tersidir.
23
25. Genişlik veYükseklik
width – bileşen (eleman) genişliği için sayısal
değeri gösterir, örn. 200px
height – bileşen (eleman) yüksekliği için
sayısal değeri gösterir, örn. 100px
Varsayılan olarak bileşenin yüksekliği içeriği ile
belirlenir.
Inline bileşenlere yükseklik uygulanamaz.
display stili değiştirilmedikçe.
25
27. Styles for Lists
Liste özellikleri liste bileşenlerinin nasıl
görüntüleneceğini belirlemek amacıyla
kullanılır.
Liste bileşen sembolünü değiştirir.
Normal stiller:
List-style-type
<ol>için değerler: circle, square,…
<ul>için değerler: upper-roman, lower-alpha
Her ikisi için: noneul
{
list-style-type:none;
}
28. İm Olarak Resimler
Madde imi olarak resim kullanılabilir.
list-style-image
Tüm tarayıcılarda aynı görüntülenemeyebilir.
IE im ve içerik arasında daha az boşluk bırakır.
Steno özellik
ul
{
list-style-image: url('images/blue-dot.jpg');
}
ul
{
list-style: bullet url('images/blue-dot.jpg');
}
29. İm Olarak Resimler- Alternatif
En soldakine arkaplan yerleştirilebilir.
Resimli im gibi görünür.
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url("images/blue-dot.png");
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
31. Navigasyon Oluşturmak
Bir navigasyonda ne bulunur?
Sağdan sola yerleştirilmiş bazı düğmeler
Ya da yukarıdan aşağıya
Genişletilebilir yapmak gerekir.
Bir liste yaratın
Yeni nav bileşeni kolayca ekleyin
35. Geçişler-Transitions
Bir stilden diğerine geçişte efekt eklenir.
Farklı zamanlama fonksiyonları:
ease, ease-in, ease-out, ease-in-out, linear
Örnek:
35
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
36. 2DTransformations
2D transformlar geniş desteğe sahiptir.
Skew – skew element
transform: skew(35deg);
Scale – scale element
transform: scale(1,0.5);
Rotate – rotates element
transform: rotate(45deg);
Translate – moves element
transform: translate(10px, 20px);
36
37. 3DTransformations
3D transform 2D transforma benzerlik gösterir.
Sadece Safari ve Chrome’da çalışır.
X,Y ve Z transformasyon
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
perspective: 800;
perspective-origin: 50% 100px;
translate3d, scale3d
37
39. Diğer CSS Özellikleri
cursor: bileşen üzerine gelindiğinde fare
imlecinin şeklini belirler.
Değerler: crosshair, help, pointer,
progress, move, hair, col-resize, row-
resize, text, wait, copy, drop, ve diğerleri
white-space – Metinlerde satır kırılımını
kontrol eder. Alabileceği değerler:
nowrap – metni tek satırda tutar
normal (default) – gerektiğinde satırı bölmeye
tarayıcı karar verir
39