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 4375
Rejilla básica CSS 6-Box 3634
¿Qué es una página Web? 3019
Ultimate HTML5 Cheatsheat 1154
HTML5 - Introducción 1067
Los enlaces en HTML 1628
Galerías de imágenes: Lightbox 3591
Sobre Tipografía... tendencias 2542

Utilidades ...

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

Recursos

aulav

Visitas...

Hoy 92

Ayer 58

Mes 1891

TOTAL 141056

En Línea...

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