פיתוח Web מבוא

אז מה קורה כשאנחנו גולשים באינטרנט?
פתחתי את הדפדפן
גלשתי לכתובת...
וקיבלתי את האתר.
אז מה קרה פה?

נקודת מבט של משתמשת.
אבל... מנקודת מבט של מפתחת...

דפדפן

שרת
יש לנו לקוח ויש לנו שרת, והם מדברים ביניהם בפרוטוקול HTTP.


בקשה


בקשה


בקשה


עיבוד


תגובה


תגובה
HTML, CSS, Images,...


תגובה


בעמוד אחד הרבה בקשות

HTML

למי שעדיין לא יצא לה לתכנת

אל תבהלי

אתן הולכות לראות קוד.
    
<p>Hello Rails Girls Tel-Aviv!</p>
    
  

Hello Rails Girls Tel-Aviv!

זה הקוד
להמתין 3 שניות
וככה זה נראה בדפדפן
מסומן בוורוד = תגית
תגית פתיחה ותגית סיום, סלאש
p - paragraph - פיסקה
    
<h1>Hello!</h1>          
<p>Hello Rails Girls Tel-Aviv!</p>
    
  

Hello!

Hello Rails Girls Tel-Aviv!

h1 זאת תגית כותרת.

לחכות 3 שניות

    
<h1>Hello!</h1>          
<p>Hello Rails Girls Tel-Aviv!</p>
<a href="http://railsgirls.com/tel-aviv">Our Website</a>
    
  

Hello!

Hello Rails Girls Tel-Aviv!

Our Website
a זה לינק.
להמתין טיפה
תגית יותר מורכבת
כתובת, טקסט
attribute / מאפיין
לחכות 5 שניות
    
<h1>Hello!</h1>          
<p>Hello Rails Girls Tel-Aviv!</p>
<a href="http://railsgirls.com/tel-aviv">Our Website</a>
<img src="cupcake.jpg">
    
  

Hello!

Hello Rails Girls Tel-Aviv!

Our Website
אז בואו נוסיף גם תמונה.
I-M-G, קיצור של image
attribute / מאפיין
אין תגית סיום
להמתין 3 שניות
    
<html>
  <head>
    <title>I'm The Title!</title>
  </head>
  <body>
    <h1>Hello!</h1>          
    <p>Hello Rails Girls Tel-Aviv!</p>
    <a href="http://railsgirls.com/tel-aviv">Our Website</a>
    <img src="cupcake.jpg">
  </body>
</html>
    
  

Hello!

Hello Rails Girls Tel-Aviv!

Our Website

להמתין 2 שניות ולעבור הלאה

  מצחיק מאוד :-)   

    
<html>
  <head>
    <title>I'm The Title!</title>
  </head>   
  <body>       
    <h1>Hello!</h1>          
    <p>Hello Rails Girls Tel-Aviv!</p>
    <a href="http://railsgirls.com/tel-aviv">Our Website</a>
    <img src="cupcake.jpg">
  </body>
</html>
    
  
לאאאאאט ויש עוד כמה עניינים פורמלים.
תגית HTML
מסמך מחולק ל-head, body
קינון תגיות
    
      <table>
      </table>
    
  
    
      <table>
        <thead>
        </thead>

        <tbody>
        </tbody>
      </table>
    
  
    
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Sign up date</th>
          </tr>
        </thead>

        <tbody>
        </tbody>
      </table>
    
  
    
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Sign up date</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Ortal</td>
            <td>12/21/2013 14:13:21</td>
          </tr>
        </tbody>
      </table>
    
  
    
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Sign up date</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Ortal</td>
            <td>12/21/2013 14:13:21</td>
          </tr>

          <tr>
            <td>Lea</td>
            <td>12/22/2013 11:03:59</td>
          </tr>
          
          <tr>
            <td>Ishay</td>
            <td>12/25/2013 22:10:49</td>
          </tr>
        </tbody>
      </table>
    
  
    
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Sign up date</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Ortal</td>
            <td>12/21/2013 14:13:21</td>
          </tr>

          <tr>
            <td>Lea</td>
            <td>12/22/2013 11:03:59</td>
          </tr>
          
          <tr>
            <td>Ishay</td>
            <td>12/25/2013 22:10:49</td>
          </tr>
        </tbody>
      </table>
    
    
  

CSS עיצוב בקוד

        
<html>
  <head>
    <title>I'm The Title!</title>
  </head>   
  <body>       
    <h1>Hello!</h1>          
    <p>Hello Rails Girls Tel-Aviv!</p>
    <a href="http://...">Our Website</a>
    <img src="cupcake.jpg">
  </body>
</html>
        
      

Hello!

Hello Rails Girls Tel-Aviv!

Our Website
        
<html>
  <head>
    <title>I'm The Title!</title>
  </head>   
  <body>       
    <h1>Hello!</h1>          
    <p>Hello Rails Girls Tel-Aviv!</p>
    <a href="http://...">Our Website</a>
    <img src="cupcake.jpg">
  </body>
</html>
        
      

Hello!

Hello Rails Girls Tel-Aviv!

Our Website
        
body { 
  background-color: Khaki; 
}
        
      
        
<html>
  <head>
    <title>I'm The Title!</title>
  </head>   
  <body>       
    <h1>Hello!</h1>          
    <p>Hello Rails Girls Tel-Aviv!</p>
    <a href="http://...">Our Website</a>
    <img src="cupcake.jpg">
  </body>
</html>
        
      
        
body { 
  background-color: Khaki; 
  font-size: 30px;
  color: MidnightBlue;
}
        
      

Hello!

Hello Rails Girls Tel-Aviv!

Our Website
        
<html>
  <head>
    <title>I'm The Title!</title>
  </head>   
  <body>       
    <h1>Hello!</h1>          
    <p>Hello Rails Girls Tel-Aviv!</p>
    <a href="http://...">Our Website</a>
    <img src="cupcake.jpg">
  </body>
</html>
        
      
        
body { 
  background-color: Khaki; 
  font-size: 30px;
  color: MidnightBlue;
}
a { color: FireBrick; }
img {
  border: 2px solid black;
}
        
      

Hello!

Hello Rails Girls Tel-Aviv!

Our Website

CSS is Powerful
אומנם ראינו רק כמה דוגמאות בסיסיות איך CSS יכול לעצב עמוד HTML, אבל אפשר לעשות הרבה יותר מזה.
יש אתר שנקרא CSS Zen Garden שממחיש בדיוק את הנקודה הזאת.
הקונספט של האתר הוא שה-HTML שלו נשאר תמיד קבוע, ומעצבים מכל העולם בשנים האחרונות קודד עבורו קבצי CSS שמשנים את העיצוב שלו לחלוטין. נראה כמה דוגמאות

זה למשל דוגמה לעיצוב.
וזה עיצוב אחר. שימו לב שהתוכן נשאר בדיוק אותו הדבר. רק העיצוב השתנה.
ועוד דוגמה.
ועוד אחת אחרונה.

תגיות כלליות


<div>Division</div>
<span>Span1</span>
<span>Span2</span>
  
Division
Span1 Span2

תגיות כלליות


<div>Division</div>
<span>Span1</span>
<span>Span2</span>
  
div { 
  background: red;
}
span {
  border: 3px solid blue;
}
        
      
Division
Span1 Span2

Class


<span class="date">21/3/14</span>
<span class="total">34</span>
  
.date { font-size: 12px; }
.total { font-size: 20px; font-weight: bold; }
        
      
21/3/14 34

דפדפן

שרת
עיבוד

דפדפן

שרת
עיבוד

דפדפן

שרת
עיבוד
מספר שם סוג מין צבע פרווה תאריך לידה חמוד?
1 לוסי לברדור נקבה בלונד 12.7.2011 כן
2 מוטי באסט האונד זכר שחור 14.2.2010 כן
3 פירוס לברדור זכר לבן 5.10.2003 כן
4 יאנה זאב נקבה חום-שחור 15.1.2012 כן
5 בל האסקי נקבה אפור-לבן 22.11.2008 כן
6 ששון באסט האונד זכר שחור-חום 12.10.2005 כן
7 לירון מעורבת נקבה שמנת 2.4.2013 כן
8 דובה גולדן-לברדור נקבה לבן 2.12.2012 כן
9 פו קטן-קטן נקבה לבן-כתום 28.9.2009 כן
10 שושה אמסטף נקבה שחור 21.5.2013 כן
    
      @dogs = Dog.all
    
  
    
      @dog  = Dog.find(1)
    
  
    
      @dogs = Dog.where(gender: :female)
    
  
    
      @dogs = Dog.where(gender: :female)
                 .order('born_at ASC')
    
  
    
      <table>
      </table>
    
  
    
      <table>
        <thead>
        </thead>

        <tbody>
        </tbody>
      </table>
    
  
    
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Breed</th>
            <th>Gender</th>
            <th>Fur color</th>
          </tr>
        </thead>

        <tbody>
        </tbody>
      </table>
    
  
    
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Breed</th>
            <th>Gender</th>
            <th>Fur color</th>
          </tr>
        </thead>

        <tbody>
          <% @dogs.each do |dog| %>
          
          <% end %>
        </tbody>
      </table>
    
  
    
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Breed</th>
            <th>Gender</th>
            <th>Fur color</th>
          </tr>
        </thead>

        <tbody>
          <% @dogs.each do |dog| %>
            <tr>
              <td><%= dog.name %></td>
              <td><%= dog.breed %></td>
              <td><%= dog.gender %></td>
              <td><%= dog.fur_color %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    
  
<img src="cupcake.jpg">
HTML
h1 { color: red; }
CSS
@dogs = Dog.all
Controller
<% @dogs.each do |dog| %>
View
למדנו 4 דרכים להגיד דברים.

לכל דרך יש תפקיד
    </מבוא>
  
שאלות?