Tema 6º : Internet

HTML5 CSS3 JavaScript
PHP MySQL Blog, CMS, LMS

El objetivo de este tema es aprender a crear "Sitios Web" (Web sites), partiendo desde cero y usando las herramientas y tecnicas más utilizadas hoy en día. Para facilitar el aprendizaje los sitios web que vamos a crear se maquetaran primero con diseño fijo, luego fluido y por último utilizando técnicas adaptativas (Responsive Design) de manera que nuestros sitios se puedan adaptar a los distintos dispositivos móviles que cada vez más estamos utilizando: smartphone y tablet.

en construccion128Esto implica conocer los fundamentos del desarrollo y diseño de páginas Web, que podemos dividir en:

  • Capa 1 (contenido): Lenguaje HTML5
  • Capa 2 (diseño): Lenguaje de hojas de estilo CSS3
  • Capa 3 (comportamiento): Javascript y jQuery
  • Capa 4 (dinámica de datos): Lenguaje PHP / Base de datos MySQL

Para que todo esto funcione debemos disponer de un servidor web (Apache) y si queremos publicar nuestro "Web site" en Internet emplearemos un cliente FTP (Filezilla) para subirlo a un Hosting.

responsive-vs-mobile-first-webdesign 1

DEMO

Código CSS

/*  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
        (cc) 3con14
        Basada en Grid 1000px - Elliot Stock
    /////////////////////////////////////////////// */

* {
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}

body {
    background : #cba;
    color      : #111;
    font       : 87.5%/1.5 serif;
    text-align : center;
}
header  { font: 400 italic 4em/1 serif; color: #444; }
section { border-bottom: 10px solid transparent; }
footer  { font: 100 1em/1.5 serif; padding: 6% 0 0 0; color: #666;}
article { background: rgba(255,0,0,0.1); }
header:before, header:after { content: " ─ ";}

.main { max-width: 99%; margin: 1% auto; }
.fila { clear: both; }
.col-1, .col-2,.col-3,.col-4,.col-5,.col-6 {
    box-shadow : 1px 1px 1px rgba(0,0,0,0.5);
    padding    : 1%;
    margin     : 1% 0; }
.clear { clear: both; }

/* Responsive design */
@media (min-width: 767px) {
    .main { max-width: 1000px; margin: 1% auto; }
    .col-1, .col-2,.col-3,.col-4,.col-5,.col-6 {
        float        : left;
        display      : block;
        margin-right : 2%;
    }
    .final { margin-right: 0; }
    .col-1 { width:  15%;}
    .col-2 { width:  32%;}
    .col-3 { width:  49%;}
    .col-4 { width:  66%;}
    .col-5 { width:  83%;}
    .col-6 { width: 100%;}
}
Título Visto
Las páginas Web 5346
Rejilla básica CSS 6-Box 4236
¿Qué es una página Web? 3516
Ultimate HTML5 Cheatsheat 1719
HTML5 - Introducción 1604
Los enlaces en HTML 2225
Galerías de imágenes: Lightbox 4260
Sobre Tipografía... tendencias 3064

Utilidades ...

imprescindibles Firefox Chrome Safari Opera IE9 Adobe Reader 7zip Flash Java Filehippo Ninite

Recursos

aulav

Visitas...

Hoy 50

Ayer 30

Mes 974

TOTAL 177205

En Línea...

Hay 16 invitados y ningún miembro en línea