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 5049
Rejilla básica CSS 6-Box 4044
¿Qué es una página Web? 3375
Ultimate HTML5 Cheatsheat 1550
HTML5 - Introducción 1439
Los enlaces en HTML 2026
Galerías de imágenes: Lightbox 4055
Sobre Tipografía... tendencias 2895

Utilidades ...

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

Recursos

aulav

Visitas...

Hoy 3

Ayer 66

Mes 1496

TOTAL 164637

En Línea...

Hay un invitado y ningún miembro en línea