• Author / Uploaded
• Roque Tolentino

Citation preview

Curso de HTML5 y CSS3 Hola amigos en este curso de html5 como crear mi web les trae otra nueva entrega pero esta vez con lo que está de moda un curso de HTML5 y CSS3 que es lo que esta ahora en el diseño y programacion de páginas web, el HTML5 y CSS3, en esta ocasión vamos a aprender a armar nuestra propia página web, con HTML5 y CSS3 y que sea autoajustable o mejor dicho Responsive Web Design o diseño auto ajustable. Para maquetar nuestra página en este Curso de HTML5 y CSS3 necesitamos un editor puede ser simple y un navegador para ir viendo los las transformaciones que vamos haciendo yo en lo particular utilizo como editor de código Sublime Text y Notepat++ pero bueno el editor es su elección y por el navegador recomiendo que sean firefox o chrome y en caso que utilicen internet Explorer descárguense la última versión. Bueno con estos puntos claros podemos empezar a armar la estructura de nuestra página web Lo primero que vamos hacer en este curso de HTML5 y CSS3 es el código HTML5 para lo que crearemos un documento en blanco con el nombre de “index.html” y luego los estilos CSS3, bueno empezamos Escribimos la cabecera de la página



Curso de HTML5 y CSS3

Bueno esta es la parte de la cabecera de nuestra web ahora le explico cómo funciona primero pusimos la etiqueta esto significa que empezamos a programar nuestra web con HTML5. Luego escribimos la etiqueta de apertura y le establecemos el lenguaje español en nuestro caso esto es para que nos res conozca los caracteres latinos y no tengamos problemas con esos signos raros. Luego abrimos y serramos la etiqueta y en ella escribimos el para los signos de puntuación también una meta con la descripción de nuestra página web que es esta

También incluimos el titulo de nuestra pagina con la etiqueta El titulo de tu web

Una vez añadida la etiqueta title enlazamos una hoja de estilo con el nombre “stylo.css” en la cual estará el código CSS3 que vamos a crear para maquetar nuestra web

Luego serramos la etiqueta y continuamos con el cuerpo de la página, y estaría estructurado de la siguiente manera solo tenemos que agregar el siguiente código. (inicio) (Final)

Con esto ya tenemos el cuerpo de nuestra página programada en HTML ahora empezamos a introducir el contenido con etiquetas HTML5 obvio que pensaban que era con HTML4 bueno lo primero que creamos es la cabecera de nuestra página con la etiqueta

Y dentro de este header creamos un div e introducimos un texto para describirlo en este caso nuestra cabecera seria la siguiente.

Esta es la cabecera de nuestro sitio web

Ahora creamos una etiqueta para la botonera y quedaría así

Esta es nuestra botonera

Ahora creamos el cuerpo del la mayor parte del contenido de nuestra web para esto creamos una etiqueta y dentro de esta metemos otro section parecido pero con id diferentes y también agregamos las etiquedas y

En este caso nuestro código HTML5 quedaría así

Esto es una sección

Esto es un article

Esto es un aside

Ahora lo que nos falta es el pie de página y para esto utilizamos las etiquetas

Que el código sería el siguiente

Este es el pie de nuestra página

Bueno con todo esto explicado ahora les pongo el código HTML5 complete para que lo estudien y vean como está estructurado y para pasar a maquetar con CSS3 . Ahora procedemos a maquetar nuestra página HTML5 con puro código CSS3 y que todo se ajuste a cualquier pantalla donde se esté visualizando. Bueno empecemos lo primero que vamos a definir e el atributo de todo el HTML para esto lo primero que hacemos es un * y entre llaves ponemos el código que queremos establecerle al documento completo en este caso yo solo les voy a establecer dos valores que es el margen y el padding *{ margin: padding: }

0; 0;

Ahora establecemos la tipografía de nuestro sitio web para eso tenemos que utilizar la el atributo de CSS 3 que es @font-face y lo que les vamos a establecer a este atributo son 2 mandatos que el tipo de letras y el estilo sea normal @font-face font-weight:normal;

{

font-style:normal; } Si

has

hecho

todo

bien

nuestro

índex

tendría

que

estar

quedando

así

De lo contrario revisa el código no valla hacer que has cometido un error , Bueno uno vez con esto así en caso de que no hayas cometido ningún error proseguimos con el curso. Y ahora continuamos con el siguiente bloque de código CSS3 que corresponde al body en este caso al bodi lo primero que les vamos a decir es que tenga un background blanco un color de letras naranja una tipografía o tipo de letra Helvética, Verdana y un tamaño de letras de 2em entonces nuestro código CSS3 sería el siguiente body{ background: color:#F60; font-family:Helvetica, font-size: }

#FFF; Verdana; 2em;

Ahora lo que hacemos es que al h1 que está dentro del es establecerles los parámetros de cómo queremos que sea para estos le ponemos el siguiente código CSS3. h1{ color:#F60; margin:0.25em text-align:center; text-shadow: }

auto; 5px

5px

10px

rgba(255,255,255,o.5);

En este código lo primero que establecimos fue el color de las letras del en este caso (color:#F60;) que corresponde al naranja, luego el margin es espacio que va a tener de los demás elementos. También establecimos el text-aling:cener; esto es para alinear el texto al centro y algo muy importante que no se puede quedar es el atributo (text-shadow: ) que ya

lo explique en un post anterior por eso creo que no hay necesidad de explicarlo aquí nuevamente. Como ya agregamos los estilos del y del que está dentro del nuestra página tendría que estar quedando de la siguiente manera.

Si se fijan nuestro documento HTML a cambiado mucho y en el h1 se nota una sombra la cual la establecimos con el atributo (text-shadow: ) si tu imagen va quedando igual que esta sigamos adelante, en caso contrario te recomiendo volver atrás y revisar el código haber en que has fallado. Bueno seguimos maquetando nuestro index.html ahora vamos a establecer el color de fondo de la cabecera que en este caso seria nuestra etiqueta para ello vamos a ponerle un background:#DEDEDE; que corresponde a un gris también un borderradius:0.25em; para ponerles los bordes medio redondeados en margin que va a tener de los otros elementos donde les ponemos (margin:0.25em auto) con esto les indicamos al que tome un margin de arriba de 0.25em y a los lados se centre con el atributo (auto). Y algo nuevo que incorpora CSS 3 para que nuestros sitios puedan ser auto ajustables es el (max-width ) y el ( min-height) con estos atributos no le establecemos márgenes variables a nuestros documentos HTML donde les indico que le tamaño máximo o max-width va hacer el que queramos y el tamaño mínimo min-height también va hacer el que le establezcamos, o sea ya nuestros documentos no van a tener un tamaño fijo si no que van a varias dependiendo el tamaño de la pantalla que los este visualizando. Con esto claro solo queda establecer el padding y alinear el texto lo cual lo hacemos con las etiquetas ( padding:0.25em;) y (text-aling:center;) Con esto el código para nuestro seria el siguiente. header background:#DEDEDE; border-radius:0.5em; margin: max-width:960px; padding:0.25em; text-align:center; }

{

0.5em

auto;

Ahora si visualizamos nuetro documento tendría que tener el siguiente aspecto

Bueno si todo va bien seguimos maquetando nuestro sitio, y se nos presenta el siguiente problema si se han fijado la botonera y el pie de página vendrían siendo algo parecido a la etiqueta < header> si te lo imaginaste estas en lo correcto y para ahorrar tiempo y en escribir todo este código nuevamente solo tendremos que agregar a la etiqueta header las las etiquetas nav y footer que quedaría de la siguiente manera. header background:#DEDEDE; border-radius:0.5em; margin: max-width:960px; padding:0.25em; text-align:center; } Si

visualizamos

,nav,footer{

0.5em

nuestro

documento

auto;

esto

quedaría

asi.

Si vemos a nuestro sitio ya le falta muy poco por maquetar solo el y el

lo cual vamos a explicar de inmediato. Si nos fijamos en el index creamos un con un ID contenedor o sea este y otro bueno como como tenemos identificados nuestros section lo que vamos hacer es crear en la hoja de estilo lo estilos correspondiente

pero en este caso vamos a ponerle una armoadilla o gato (#) al cual vamos hacer referencias de la siguiente manera section#contenedor y section#principal. Primero escribimos el section#contenedor y les ponemos un margin de 0.2em y auto a los lados para que se centre, luego max-width:960px; les decimos que el tamaño máximo que va a tener este section es de 960px, les ponemos un padding de 0 y un tex-aling: center para que el contenido se centre. En conclusión nuesto código CSS3 para el section contenedor sería el siguiente section#contenedor{ margin:0.2em max-width:960px; padding:0; text-align:center; }

auto;

Ahora seguimos con el section#principal. A este le decimos que tenga un background o color de fondo un border-radius para que tenga border curvos, y otro atributo que añade CSS 3 es display:inline-block; esto le indica a nuestro section que todo lo que venga dentro del será visto como bloques y les añadimos el atributo vertical-align:top este nuevo atributo de CSS3 viene a sustituir al float del css anterior esto le indica a nuestro section que alinee todo verticalmente y que sea en la parte superior. Luego les indicamos que tome un tamaño de un 65% del section contenedor lo otro ya lo sabemos por eso no lo explico y les pongo el siguiente código. Si notan que puse el en este código es porque quiero que tenga la misma forma que el section principal solo que a este les vamos a dar un tamaño mas pequeño en la parte de abajo section#principal, background:#F1F1F1; border-radius:0.5em; display: margin:0.25em max-width:960px; min-height:200px; padding:0.25em; text-align:center; vertical-align:top; width:65%; }

aside{

inline-block; auto;

Si han hecho todo bien nuestro documento iría quedando de la siguiente manera corte la imagen para que puedan ver cómo va quedando el aside.

Como le explique arriba tenemos que establecerle el porcentaje que va a tomar el aside del section en este caso con un 30% quedaría bien mas debajo de ese código escribimos el siguiente aside{ width:30%; } Ahora si actualizamos nuestro navegador todo se vería de la siguiente manera.

Bueno ahora solo nos falta darle estilo al article, este será sencillo solo tenemos que ponerle un color de fondo distingo a fondo actual para ellos les ponemos un brackground:#000; que corresponde al negro, luego un border-radius para las esquinas curvas y les ponemos un alto mínimo con el atributo min-height: de 140px; y un padding: de 0.25em con esto quedaría listo nuestro article. article{ background:#011E30; border-radius: min-height:140px; padding:0.25em; }

0.5em;

Si has copiado bien todo el código esta tendría que ser la imagen final de nuestro

documento.

Ahora si te fijas en el navegador reduciendo el tamaño de la ventana veras como todo se ajusta al tamaño de la ventana, esto lo obtuvimos porque trabamos con los tamaños en (em) y no en (px) también porque los atributos max-width y min-height. Bueno aquí les dejo una toma de mi navegador reducido a lo que simula una pantalla de un celular.

Espero y les aya gustado el tutorial y será hasta la próxima gracias y dejen sus sugerencias así seguimos mejorando el blogs y colocando tutoriales de calidad. Aquí

les

dejo

los

codigos

del

curso

completo.

index.html



/>

web

Esta es nuestra botonera

Esto es una seccion

Esto es un article

Esto es un aside

es el pie de nuestra página

es

la

cabecera

de

nuestro

sitio

stylo.css *{ margin: padding: } @font-face

0; 0; { font-weight:normal; font-style:normal;

} body{ background: font-family:Helvetica, font-size: } h1{

#FFF; color:#F60; Verdana; 2em;

margin:0.25em text-shadow: } header,nav,footer

5px

5px

margin:

10px

0.5em

color:#F60; auto; text-align:center; font-size:1.25em; rgba(255,255,255,o.5); { background:#DEDEDE; border-radius:0.5em; auto; max-width:960px; padding:0.25em; text-align:center;

} section#contenedor{ margin:0.2em

} section#principal, display: margin:0.25em

auto; max-width:960px; padding:0; text-align:center; aside{ background:#F1F1F1; border-radius:0.5em; inline-block; auto; max-width:960px; min-height:200px; padding:0.25em; text-align:center; vertical-align:top; width:65%;

} article{ border-radius:

background:#000; 0.5em; min-height:140px; padding:0.25em;

} aside{ width:30%; }

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios...

Crear base de datos y tablas desde php En esta entrada vamos hablar sobre cómo crear base de datos y tablas desde php tambien crear tablas dentro de la base de datos utilizando solamente PHP un tema que es muy importante para cualquier programador y persona que esté empezando a programar. En este tema nos centraremos en las base de datos mysql ya que es la más utilizada en el mundo de la programación web por su rapidez y facilidad de trabajar con ella, este tutorial va dedicado para aquellas personas que no le gusta estar con un manejador de base de datos como phpmyadmin o que quieren hacer un sitio web más avanzado como un sistema de esos como WordPress, drupal, y esos que no hay que estar ejecutando ningún archivo en la base de datos porque ellos se encargan de crearte todo. Bueno si este es tu caso entonces estas en el sitio correcto porque aquí vamos aprender cómo crear la base de datos como crear las tablas y como insertar datos en dichas tablas Para empezar te recomiendo que tengas una base de datos instalada en tu sistema yo en mi caso tengo el phpmyadmin que trae el XAMPP pero en este tutorial vamos a crear la base de datos y las tablas directamente sin irme a la interfaz.

Crear base desde php Para empezar lo primero que vamos hacer es crear un archivo llamado conexión.php que es el que nos servirá de modelo para conectarnos a la base de datos cuando estemos creando nuestra página web.

Que necesitamos para hacer la base de datos desde php Lo primero que tenemos que hacer es establecer los parámetros de conexión con la base de datos en este caso como yo estoy trabajando en modo local lo que hacemos es usar los valores por defecto que trea nuestro servidor que son localhost y root entonces los parámetros serian los siguientes.

$host='localhost'; $user='root'; $pass=''; Si te fijas no hemos puesto ninguna contraseña ya que nuestro administrador de base de datos no la trea, pero en caso de que tu haya puesto una tienes que establecerla donde dice $pass. Luego de esto procedemos a conectar a la base de datos con mysql_connect() añadiéndole los parámetros de conexión que establecimos más arriba, entonces nuestra conexión seria la siguiente $sql="CREATE database programador"; Con los datos de la base de datos guardada en nuestra variable $sql entonces procedemos hacer la consulta a nuestro servidor con el comando mysql_query que seria de la siguiente manera. $insertar=mysql_query($sql,$conexion); Si te fijas en la línea de código hemos almacenado en la variable $insertar la consulta a nuestro servidor y para que pueda conectarse dicha consulta necesita 2 parámetros que son la variable donde tenemos los datos de la base de datos que vamos a crear y la conexión con la que nos conectaremos al servidor para crear dicha base de datos. Entonces luego de esto les ponemos un condicionar para ver si la base de datos se creó sí o no if(!$insertar){ echo 'Error al crear la base de datos'; }else{ echo 'Base de datos creada exitosamente'; } Con este código lo que le hemos dicho a nuestra consulta es sabes que si la consulta que está en la variable $insertar es negativa entonces manda el mensaje de error “Error al crear la base de datos” pero si es positiva entonces que mande el siguiente mensaje "Base de datos creada exitosamente". Entonces si todo va bien y nuestra consulta no manda ninguno error lo que hacemos es crear una tabla que nos puede servir para diferente cosas ya sea una tabla para almacenar usuarios, archivos, datos de noticias etc...

Crear tablas desde php

Para crear tablas desde php se sigue casi el mismo procedimiento solo que en este caso tendremos que seleccionar la base de datos en la cual queremos crear dicha tabla y como sabemos que la base de datos que hemos creado se llama "programador" entonces solo nos falta seleccionarla, y esto lo hacemos con el comando mysql_select_db el cual necesita 2 parámetros que son el nombre de la base de datos y la conexión. mysql_select_db('programador',$conexion); Con la base de dato ya seleccionada entonces procedemos a almacenar la tabla en una variable en este caso les voy a llamar $tabla. Para crear tabla en una base de datos lo hacemos con el comendo CREATE TABLE luego el nombre de la tabla pero para no tener errores por si la tabla ya existe entonces le añadimos antes del nombre de la tabla este comando IF NOT EXISTS con esto lo que le decimos es si la tabla no existe entonces créala. $tabla="CREATE TABLE IF NOT EXISTS 'usuario' (); Con esto ya tendríamos creada nuestra tabla entonces ahora lo que vamos hacer es insertarle varios campos para eso nos situamos dentro de los paréntesis y arpretamos enter y pegamos el siguiente codigo. `id_usuario` int(11) NOT `nombre` varchar(100) `correo` text `clave` text PRIMARY KEY (`id_usuario`);

NULL NOT NOT NOT

AUTO_INCREMENT, NULL, NULL, NULL,

Con esto tendríamos ya creada la base de datos y la tabla, ahora podemos insertar datos en tabla usuario para eso en la misma consulta donde creamos la base de datos nos situamos juesto después del mensaje que dice que se creó la tabla con éxitos y colocamos los datos que queremos insertar de esta forma. $datos="INSERT INTO `usuario` (`id_usuario`, `nombre`, `correo`, `clave`) VALUES (1, 'administrador', '[email protected]', 'admin')"; $consulta=mysql_query($datos,$conexion); if(!$consulta){ echo 'Error al insertar los datos'; }else{ echo 'Los datos se insertaron correctamente'; } Entonces nuestro archivo completo para crear la base de datos y crear las tabla e insertar los datos sería el siguiente Conxion.php