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 4686
Rejilla básica CSS 6-Box 3834
¿Qué es una página Web? 3194
Ultimate HTML5 Cheatsheat 1330
HTML5 - Introducción 1220
Los enlaces en HTML 1805
Galerías de imágenes: Lightbox 3817
Sobre Tipografía... tendencias 2695

Utilidades ...

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

Recursos

aulav

Visitas...

Hoy 13

Ayer 64

Mes 1745

TOTAL 151979

En Línea...

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