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 4441
Rejilla básica CSS 6-Box 3679
¿Qué es una página Web? 3062
Ultimate HTML5 Cheatsheat 1201
HTML5 - Introducción 1104
Los enlaces en HTML 1681
Galerías de imágenes: Lightbox 3643
Sobre Tipografía... tendencias 2578

Utilidades ...

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

Recursos

aulav

Visitas...

Hoy 37

Ayer 54

Mes 1803

TOTAL 143475

En Línea...

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