Seguidores

MIS WEBS

logo html5 logo PHP logo SQL logo JS

HTML5

Como crear una web con html y css
Logo de hmtl5 para articulos html

Estructura de una página web y lenguajes con los que se construye

Ua web esta compuesta de varios pilares:

FRONTEND

Es la interface con la que interactua el usuario, tambien conocida como parte del lado del cliente.

HTMl
Es un lenguaje de marcado, se utilizará para que google interprete nuestra página y dependiendo de la sintaxis que le generemos con nuesras etiquetas la mostrará de una busqueda u otra al usuario. Es muy importante que marquemos de forma correcta neustros textos para que las arañas de google lo interpreten.
CSS:
Es el lenguaje que utilizaremos para dar formato a nuestra página, es la parte visual, colores, centrado, justificado, degradados...
JavaScript
Es el lenguaje que utilizaremos para generar interacion a nuestra página. JS (JavaScript) genera las animaciones e intarcciones de nuestra página.
Supongo que habréis accedido a una web y tocado un botón para que la página haga algo, habierto un desplegable y selecionado una opción. Cuando os cargan esos incomodos pantallazos o pasas el raton por una foto y cambia de tamaño. Todo eso y más se hace con JavaScript.
A pesar de su nombre parecido no es lo mismo JavaScript que Java, son lenguajes totalmente diferentes en sintaxis y estructura.
BACKEND
Son todos los proceos internos de la página que no están acesibles al usurio. Parte del servidor
SQL
Como su acrónimo del ingles bien dice (Structured Query Language) es un lenguage de consultas estructuradas. SQL lo utilizaremos para borar, editar y crear registros en nuestar BBDD.
Una vez conectados a nuestra BBDD utilizaremos Sql para cargar registros dedes nuestros formularios o solicitar que nos regrese datos anterior mente guardado en nuestro almacen de datos.
  1. PHP
  2. JAVA
  3. PYTHON
  4. RUBI
  5. LARABEL
  6. JQUERI


¿QUE ES HTML?

No es un lenguaje de programación, es la forma que tenemos de dar sentido semántico a nuestra página mediante el marcado de etiquetas (énfasis a unas determinadas palabras, encabezados, pies de paginas...). Sus siglas probienen del acronimo HyperText Markup Lenguage (Lenguaje de marcado de hipertexto). HTML es la encargada de dar un sentido semántico a nuestra página para conseguir que el browser interprete nuestro contenido. Hemos de tener en cuenta que estamos explicando a un programa informático el contenido en nuestra página y debemos hablar en su idioma para que nos entienda.
Será inprescindible un buen marcado de nuestros textos para que el SEO (posicionamiento Web). Cuando cuando indicamos desde HTML negrita a una palabra (<strong>) le estamos diciendo que esa palabra/as son muy importantes en nuestro texto.
En la actualidad estamos utilizando la versión 5 de html, es por ello que se denomina HTML5. Todo texto en html5 empezara por la etiqueta <!DOCTYPE html> .

PARTES DE LA ESTRUCTURA HTML

La estructura html se divide en arbol entre etiquetas que se habren y cierran, la inmensa mayoria de etiquetas que se abren < > han de ser cerradas posteriormente </>. Es conveniente organizar muy bien el código para evitar dejar etiquetas abiertas.

<head></head>

Es la parte de nuestro html que el usuario no podrá leer, será la zona destinada para la información que damos al navegador y es donde se registra el lenguaje con el que escribimos nuestra página (español, ingles, aleman..), en el caso de estar compuestro por varios archivos (css, JavaScript,php) se linkan o esriben aquí, el titulo.... Nuestro <head> irá siempre en primer lugar tras la apertura de la etiqueta <html>

PARTESTE DENTRO DEL <head>

<META>

Las etiquetas meta no tendran par de cierre, se habren y se cierran en la misma línea. Normarlemente una etiqueta html se habre <body> y cuando finalizamos se cierra < /body>. Pero en el caso del meta no se cierra de esta manera, se cerrará sin renombrarla <meta charset="utf-8">.

<meta charset= "utf-8" >
La propiedad "UTF-8" del atributo charset dentro de la etiqueta meta es para decirle a nuestro navegador que el codigo es en español España, así reconocera de forma automatica caracteres como la ñ o los acentos.
<meta name="desecription" content = "breve descripción ">
En el atributo content haremos un breve resumen del contenido de nuestra página, esto servira para orientar al buscador sobre el contenido de nuestra página.
<meta name= "Keyword" content = "palabra uno, palabra dos " >
En el atributo content escribiremos nuestra palabars claves o keyword separando unas de otras con comas.
una palabra clave es un aviso al browser de que en nuestro texto se hable de esa pabra. Imagina que estas buscando en internet algo, acederías al buscado y escribirias un texto, por ejemplo cursos html, si dentro de mis keywords esta la palabra html, el buscador entendera que puedo tener contenido para esa persona.
<meta name= "author" content = "David Gimenez Plaza " >
Lo utilizaremos para identificar a la presona creadora de la página o blog.
<meta http-equiv= "refresh" content = "tiempo en milisegundos" >
La utilizaremos para actualizar nuestra web cada x tiempo determinado. En content = indicaremos el tiepo en segundos que desemos para actulizar nuestra web. Por ejemplo se deseamos que nuestra web refresque y actualice cada 5 min (5*60=300 seg), lo haremos de la siguiente manera:
. <meta http-equiv= "refresh" content = "300" >
<meta name= "viewport" content = "width=device-width, initial-scale=1.0" >
Esta etiqueta meta nos ayuda a escalar nuestro prollecto en tecnologia movil y pc. Con la instrucción device-width indica que el ancho de nuestra página será el ancho de la pantalla del dispositivo.
<Title></Title>
En esta etiqueta cargaremos el titulo de nuestra página. Este titulo cargará en la pestaña de nuestro buscador, pero lo importante no es eso, será el que utlice el browser para clasificar tu articulo u página.

<title> Cómo crear una página web < / title>
<link>
Utilizaremos esta etiqueta para vincular archivos a nuestro archivo principal de Html. Esto se conoce como linkear. No se suele escribir todo el codigo en un mismo archivo, lo normal en un prollecto es cargar un archivo con el css, otro con el PHP, otro JavaScrip y unirlo todo al archivo HTML con el <link>.
<link rel="shortcut icon" href = " ">
Utilizarremos esta etiqueta link para cargar un icono en la pestaña superior de unestra web. Entre las comillas del href cargaremos la ruta de unestra imagen para el icono y en el atributo rel especificaremos "shortcut icon".
icono en una ventana
<link rel = "stylesheet" type "text/css" href = "Equipo\MiHojaDeEstilos.css" >
Utilizaremos esta etiqueta link para cargar nuestra hoja de estilis CSS. Es muy común editar una hoja de estilos css y reutilizarla para varios proyectos. Por esta razón es normal generar un archivo independiente CSS y utilizarlo con varios proyectos, en el caso de desear modificar el aspecto de varias paginas, tan solo tendremos que modificar este archivo.
<style>< / style>
<style rel = "stylesheet" type "text/css" >
En ocasiones surje la necesidad de crear el Css en el mismo archivo que el resto del código html, en este caso cargaremos el cesse dentro de la etiqueta head.
<script>< / script>
Utilizaremos las etiquetas script para incrustar el código JavaScript. Es importante que coloquemos esta etiqueta por debajo de las de css, debido a que un script puede llegar a modificar el css y es combeniente que esté cargado previamente.
<script type "text/JavaScript" src = "Equipo\MiHojaDeEstilos.JS" > < / script>
Utilizaremos esta etiqueta script para cargar nuestra hoja de estilos JavaScript, en el atributo src le indicaremos la ruta de nuesto archivo.
<script type "text/JavaScript" > codigo JavaScript.................. < / script>
Utilizaremos esta etiqueta script para cargar nuestro codigo JavaScript dentro de nuestro hatml.
<script src= "https://code.jquery.com/jquery-3.4.1.js" ></script>
Utilizaremos esta etiqueta para linkar con Jquery, librería compuesta por funciones JavaScript.

nuestro head quedaria asi:

<head></head>

  • <meta>
  • <title>
  • <link>
  • <script>

<header></header>

<section>

<article><p>texto</p</article>

<article><p>texto</p</article>

</section>

<asside></asside>

<footer><footer>

Estilos css para una página web

Funadmentalemente existen tres tipos de estilos para nuestras paginas web:Estilos en linea (inline), estilos externos, en cabecera.

Estilo exteno:

Generaremos un archivo externo en los que daremos caracteristicas a todas las eqiqutas principales. Estos estilos generales los podremos utilizar en muchas paginas de nuestro proyecto.


h1{
        background-color:red;
    }
Estilo en cabecera:
la cabecera de nuestra página html cargaremos un estilo para Cargando un id:una etiqueta determinada.
En primer lugar nombremos nuestra etiqueta con id, 
<h1 id="pEnCabecera">

Luego cargamos ese estilo determinado en el head. 
<style>

h1#pEnCabecera{
    
backgroun:red;

}
</style>
Podemos cargarlo tambien con un name en la etiqueta: <h1 name="eStiloEnCabecera" >
Luego cargamos ese estilo determinado en el head. 
<style>
h1[name="PStiloEnCabecera"]{

backgroun:red;

}
</style>
En linea o inline:
Cargaremos nuestro estilo en la misma etiqueta. No es nada recomendable el abuso de este estilo. Es acosejable ralizar en máximo de estilos adjuntos, en caso de ser muy necesario modificar alguno en cabecera y solo en caso de ser un caso muy puntual en linea.
cargaremos nuestro estilo en la misma etiqueta utilizando el atriburo syle.

<h2 style= "color:Red" > texto...... <h2>

ETIQUETAS CENTRALES DEL <body>

Tal y como hemos dicho anteriormente el diseño de los objetos es responsabilidad de CSS, pero es impotante que nos realacionemos con la esctructura que reperesenta para html. En html reprensentamos la semántica de la página, con CSS le daremos el aspecto. Si creamos esta esctructura con html no se mostrará tal y como la ves, si no como filas completas, pero lo que nos interesa es el sentido e importancia del texto. Cuesta comprenderlo pero no estamos mostrando imagenes, estamos haciendo que el ordeandor comprenda lo que hemos escrito.

<header></header>

<article><article>

<p></p>

<article><article>

<p></p>

<article><article>

<p></p>

<article><article>

<p></p>

<article><article>

<p></p>

<article><article>

<p></p>

<article><article>

<p></p>

<article><article>

<p></p>

<article><article>

<p></p>

<asside></asside>

<footer><footer>

Etiquetas <h1><h2><h3><h4><h5><h6>

Estas etiquetas las utilizaremos para los diferentes Titulos y subtitulos de nuestros articulos. Son muy importantes para el SEO de nuestra web. En ella le marcamos el contenido de nuestra pagina por orden de importancia. Ademas de lo evidente que es el tamaño que tiene el texto con las difetenes etiquetas.

Aqui pueder ver un ejemplo:

<h1 >Esto es un h1</h1>
<h2 >Esto es un h2</h2>
<h3 >Esto es un h3</h3>
<h4 >Esto es un h4</h4>
<h5 >Esto es un h5</h5>
<h6 >Esto es un h6</h6>

Esto es un h1

Esto es un h2

Esto es un h3

Esto es un h4

Esto es un h5
Esto es un h6

Lo mas importante es el orden de semántico que le damos entre el h1 que es el más importante de nuestros titulo y el h6 que es el menos importante.
En el siguiente articulo pueder ver, ¿como usar h1 h2 h3 y h4 en un blog ?

<p>

Utilizaremos la etiqueta <p> para crear parrafors dentro de las etiquetas.

  • Se puede crear un parrafo en un encabezado 

    <header>
    <p>esto es un parrafo</p>
</header>
  • Tal y como ves podriamos subdividir un parrafo dentro de cualquier sección. 
    <body>
    <header>
        <h2> titulo encabezado<h2>
    </header>
        <section>
    <header>
        <p>parrafo</p>
    </header>
    <section>
        <p>parrafo de la seccion</p>
    </section>

    </section>
</body>

Etiquetas inline

Son aquellas que se encuentran dentro de un parrafo y no generan salto de línea (<p></p>), estas etiquetas no subdividen el parrafo en partes, su función es informar al buscador el significado de las palabras e importancia sobre el resto.

Etiquetas in line
ETIQUETA USO
<strong> Lo veremos en el navegador como texto en negrita, pero el sentido para html es que esa en concreto es una palabra muy importante para nosotros, es una palabra clave
<em> Lo utilizaremos para dar énfasis a una palabra o conjutno de palabras, se mostrará en el navegador como cursiva
<small> Lo utilizaremos dentro de un footer siempre y su utilidad es indicar al browser que se trata de un texto legal.
<cite> Para realizar citas a autores.
<dfn> Se utiliza para hacerdefiniciones.
<i> Crea una caja en línea y se utiliza paraestilos y colores en el texto que estmos escribiendo, no tiene sentido semántico.
<code> Le indicamos que dentro de esta etiqueta eixite un trozo de código programación.
<abbr> Indicamos que se trata de una abreviatura
<data> Para datos de una estadística o etc.
<br> Salto de línea,no es necesario cerrarlo
<q> cita a libros, videos, canciones...
<del> Texto eliminado, lo podemos utilizar para precios antiguos, lo veremos como un texto tachado
<pre> Matiene el formato anterior del texto.
<sub> Subindice ejem. 259 /50
<sup> Poner potenciales. ejm. 150 25.
<time> fechas
<time datetime "2018-03-30" pubdate>
<mark> resaltado de texto subrrayador.
<kdb> Cuando hacemos alusion a atajos de teclado o teclas del teclado(alt,sift, enter, control+spr...).>
<span> No tienen sentido semántico, la única utilidad que tiene es la de selcionar una palabra o conjunto de palabras para posteriormente modificarlas con css o JavaScript.
<a> hipervinculo, palabra ancla o ancorText
<a href= "RUTA" target="_black" rel="follow"> ...texto... </a>
lo utilizaremos para redirecciones a una url , target= “_blank” abrirá la URL en otra pestaña nueva y rel follow o nofollow determinara el tipo de nelace que hacemos.
<address> Lo utilizaremos dentro de un footer y se usa para datos personales emali,telefonos,dni
<b> Fuente en negrita esta etiqueta esta desaconsejada en html5 se aconseja utilizar estilos css como font-weight: bolder;. Cabe recalcar que no es lo mismo que la etiqueta Strong que proporciona un sentido semántico de nefasis.

Marcadores o anclas

Un marcador suele ser una lista que utilizaremos como indice, cada uno de los elementos de nuestra lista tendra un una etiqueta <a> y cuando preseionemos sobre ella nos llevará a la parte dentro de nuestra página donde se encuentra el id. Es muy facil así hacer un indice con nuesras etiquetas h.
<a href= "#idDondeQuieroIr">texto < / a>

Ejemplo:

  1. Estructura de una página web y lenguajes con los que se construye
  2. ¿QUE ES HTML?
  3. PARTES DE LA ESTRUCTURA HTML
  4. ESTILOS CSS EN UNA WEB
  5. ETIQUETAS CENTRALES DEL BODY

Tal y como podeis ver si haceis click en cualquiera de estros hipervinculos de la lista os llevará a una parte del articulo determinada. Así sería el código:

<ol>

    <li>
        <a href="#lenguajesDeUnaWeb">
            Estructura de una página web y lenguajes con los que se construye
        </a>
    </li>
    <li>
        <a href="#queEsHtml">¿QUE ES HTML?
    </li>
    <li>
        <a href="#partes-de-la-estructura-html">PARTES DE LA ESTRUCTURA HTML
    </li>
    <li>
        <a href="#estilosCssEnUnaWeb"> ESTILOS CSS EN UNA WEB
    </li>
    <li>
        <a href="#CAJA">ETIQUETAS CENTRALES DEL BODY
    </li>
</ol>
Rutas relativas y absolutas
../carpeta Anterior/archivo.jpg ../../2 carpetas Anteriores/archivo.jpg archivo En carpeta actual.jpg ./archivo En carpeta actual.jpg ../carpetaAnterior/archivo.jpg

ETIQUETAS<ins>

Utilizaremos la etiqueta ins para remarcar que esa parte del texto es una modificación sobre el texto original, genera un efecto subrayado. Esta atiqueta tiene dos atributos datetime para la fecha y cite para URI que apunta a un documento que provee información extendida acerca de la actualización.

La podemos convinar con una etiqueta <del> para generar un efecto de anular el primer texto y poner el otro.

Este era el texto de antes y este es el actual.

ASÍ ES EL CÓDIGO

<p><del>Este era el texto de antes </del><ins datetime="2019-05-30" cite="uso-etiqueta-ins"> y este es el actual.</ins></p>

Otro de los usos frecuentes que tiene es para generar anuncios y frames que utilicen JavaScript.

ETIQUETAS <hr>

Utilizaremos esta etiqueta para generar una ralla que separara nuestros articulos o párrafos.

Ejemplo de <hr>:

Este es un párrafo de ejemplo donde vamos a introducir un hr para separarlo del otro párrafo. Es una etiqueta de bloquea.

Este es un párrafo de ejemplo donde vamos a introducir un hr para separarlo del otro párrafo. Es una etiqueta de bloque.

Este es un párrafo de ejemplo donde vamos a introducir un hr para separarlo del otro párrafo. Es una etiqueta de bloque.

Asi es código de hr:


<p>1 bloque texto</p>
<hr>
<p>2 bloque texto</p>
<hr style="background:blue; height: 4px;">
<p>3 bloque texto

ETIQUETAS <button>

Utinlizaremos las etiquetas <button> para crear botones, en ellos podremos introducir imagenes utilizando la etiqueta img y utilizarlos como desencadenantes de acciones.

TIPOS DE BOTONES

  1. Botón con imagen dentro.


    <button type="button">boton con imagen <img src="ruta.jpg" alt=""></button>

  2. <button type="reset">BOTON1</button>
  3. <button type="button">BOTON1</button>
  4. <button type="button">BOTON1</button>

  5. Botón con separadores y una imagen en el último separador.

    <button>espacio 1 <hr><br>espacio 2<hr><br>y otro <ht><img src="ruta\imagen"></button>

LISTAS Y TABLAS HTML

Una lista de campos o tabla es un conjuntos de datos distribuidos de forma ordenada o no ordenada en un espacio determinado.Estas listas pueden ser de varios tipos:

  • Listas numeradas.
  • Listas no numerdas.
  • Listas desplegables.
  • Listas definiciones.
  • Tablas.

Listas numeradas <ol>

Son las que utilizaremos para realizar listas con orden correlativo, viene del ingles ordered list, podremos numerar nuestras listas con números, letras, Romanos.. Pero la importancia de ella no es como se muestra, si no que le decimos al buscador. Le estamos indicando el orden de imporntancia que tienen cada uno de ellos en nuesra lista.

Este sería un ejmplo de lista ordenada:

  1. Primer artículo
  2. Segundo artículo
  3. Tercer artículo
  4. Cuarto artículo
<ol>
    <li type="I" >Primer artículo </li>
    <li type="A">Segundo artículo </li>
    <li type="i">Tercer artículo </li>
    <li type="a">Cuarto artículo </li>
    <li type="1">Quinto artículo </li>
</ol>

Podemos modificar el aspecto de nuestra lista ordenada utilizando diferentes atributos de <li>:

    <li type="I">Con números Romanos en mayusculas.</li>
  1. Con números Romanos en mayusculas.
  2. Con números Romanos en mayusculas.
  3. Con números Romanos en mayusculas.
    <li type="A">Abecedario mayusculas</li>
  1. Abecedario mayusculas.
  2. Abecedario mayusculas.
  3. Abecedario mayusculas.
    <li type="a">Abecedario minusculas</li>
  1. Abecedario minusculas.
  2. Abecedario minusculas.
  3. Abecedario minusculas.
    <li type="i">Números Romanos en minusculas.</li>
  1. Números Romanos en minusculas.
  2. Números Romanos en minusculas.
  3. Números Romanos en minusculas.
Listas no ordenadas <ul>

Son aquellas listas cuyos elementos no tienen preferencia unos sobre otros, semantimente nos resulta indiferente que el buscador los considere al mismo nivel, probiene del ingles An unordered list.

<ul>
    <li>primero</li>
    <li>segundo</li>
    <li>tercero</li>
</ul>
  • primero
  • segundo
  • tercero
Listas definiciones <dl>

En una lista de definiciones se enumeran varias definiciones correlativas, tendremos la etiqueta <dt> en la que cargaremos el termino y la etiqueta <dd> donde cargaremos nuestra definición de dicho termino. Si deseais ver un ejemplo, esta parte de la pagina esta utilizando <dl>Definition List. 

<dl>
    <dt>Termino que definimos</dt>
        <dd>Es la definición </dd>
</dl>
Listas desplegables <select>

Es una caja desplegable compuesta por varias opciones que facilitamos al usuario para elija entre una de ellas. Las listas desplegables se utilizan normamente en formularios para que el usuario rellene un dato de una forma que predertimanos nosotros. (ejm. estado civil: soltero o casado). Contra menos opciones de error demos al usuario más facil sera realizar el tratamiento de datos en nuesras BBDD.

Así se vería una lista desplegable:


Este seria nuestro codigo: 

<select name="" id="">
    <option value="">Elige una opción</option>
    <option value="">Opcion 1</option>
    <option value="">Opcion 2</option>
    <option value="">Opcion 3</option>
    <option value="">Opcion 4</option>
</select>

Tablas <table>

Una tabla es un conjunto de registros ordenados en filas y columnas. Las tablas tienen una cabecera <th> encerrada entre dos etiquetas de fila <tr> y los registros <td> entre otras etiquetas de fila <tr>. A su vez las etiquetas de encabezado th tendran que ir dentro de una etiqueta <thead> y las etiquetas td en una etiqueta <tbody>. En el caso que crearamos una fila de totales o resumen creariamos una etiqueta <tfooter>.
Esta puede ser la representación de una tabla simple:

Este es el titulo de nuestra tabla
Fila 1 fila 2 fila 3
0,0 0,1 0,2
1,0 1,1 1,2
2,0 2,1 2,2
Este seria su codigo:
    A su vez una tabla se puede dividir en:
  • Encabezado tabla (header) <thead>Serán los nombre de filas
  • Cuerpo tabla (body) <tbody> En el encontraremos los registros de nuestra tabla
  • Pie de tabla (footer) <tfoot> En el tendremos los sumatorios, promedios o cualquier calculo que deseemos.
Segundo ejemplo de tabla
Fila 1 fila 2 fila 3
0,0 0,1 0,2
1,0 1,1 1,2
2,0 2,1 2,2
suma fila suma fila suma fila
Este seria su codigo:
Representación de las partes que componen una tabla en html: Cabecera tabla, cuerpo de la tabla y fila totales (tbody, thead,tfoot)
Imagen de las partes de una tabla

    Existiran ocasiones en las que nos resulte necesario unir dos celdas. En paralelo u en horizontal.

  • Si deseamos unir con la celda en paralelo utilizaremos colspan
  • Si deseamos unir con la celda inferior o superior utilizaremos rowspan
colspan
Nombre 1ª apellido 2º apellido
David Gimenez Plaza
rowspan Perez Gomez
Perez Muñoz

Nuestro código se verá así:

Etiquetas de imágen <img>

Las etiquetas img se utilizan para cargar fotos en formato gif, jpg o png. Es muy importante etiquetar bien las imagenes y selecionar las adecuadas para ayudar a un buen posicionamiento SEO. Una imagen o video es objeto independiente, por lo que debe esta encerrado dentro una etiqueta <figure>.

Utilizaremos la etiqueta <figcaption> para un pie de foto.

La etiqueta img tiene varios atributos podemos resaltar tres:

  • src: donde pondremos la URL o dirección en la que se encuentra la imagen y el atributo.
  • srcset: Cuando deseamos poner varias imagenes cada una para un tamaño determinado podemos utilizar este atributo. Cargaremos la imagen principar en src y en srcset las que cargan con los diferentes tamaños de la pantalla. Pondremos la ruta y el tamaño de la pantalla utilizando el devicePixelRatio o el whidth directamente.
  • alt: se utiliza para hacer una breve descripción de nuestra imagen, es importante rellenarla para decir al buscador que contine dentro.
  • Title:Nos cargará un texto de ayuda en caso de no cargargar la foto. Es recomendable poner una breve y cota descripción de la imagen.
  • target:Si deseamos que nuestra imagen cargue en una nueva pagina elegiremos _black.

Ejemplo de uso de srcset

<img
  src =    " img1.jpg "
  srcset = " img2.jpg 500w ,
             img3.png 300w "
     >

<figcaption></figcaption>

La etiqueta figcaption se utilizara para poner un pie de foto. Este pie de foto aparecera en letra mas pequeña en la parte inferior de la foto.

Ejemplo de img

Esta es la imagen del teclado de mi ordenador con las teclas y distribución

Esta es una imagen de mi portatil

Tipos de imágen para una página web

Es muy importante seleccionar el tipo de imágen, gran parte del peso que tiene nuestra web depende del tipo de imagen que elijamos y cuanto más pesada sea mayor será el tiempo de carga. Es evidente que cuando entras en una web y no carga lo que haces es salirte. Por otro parte es muy importante tener en cuenta los derechos de autor para evitar demandas.

Bitmap
Son imagenes de pixeles y al aumentar tamaño pueden ir perdiendo definición. Las mas utilizadas en la web son las siguientes:
  • jpg
    Es muy util para fotografias.
  • png
    La utilizaremos para dibujos e iconos.
  • Webp
    Es un nuevo formato de google que representa jpg y png con menor peso, pero de momento solo lo soporta crome.
  • gif
    Son animaciones compuestas por una jucesión de imagenes.
Vector
Es una imgen creada mediante código que se puede redimensionar y no pierde definición, es ideal para iconos.

<video>< / video>

Esta etiqueta html la utilizaremos para cargar videos en nuestra paginas web . Los formatos soportados para video en html serán mp4 y ogg. Tener en cuenta que las imagenes deben estar entre eqituetas figure al tratarse de objetos independientes al contexto general igual que pasaba con la etiqueta img.

ATRIBUTOS DE LA ETIQUETA <video>

  1. Src: En el indicaremos la ruta de unestro archivo.
  2. Controls: Nos cargara la botonera del play, stop...
  3. Atoplay: Iniciará el video cuando cargue la página
  4. Loop: Le indicará a nuestro navegador que reproduzca el video de forma infinita. Al llegar al final iniciará de nuevo.
  5. Preload: Indicará al navegador cuantos fotogramas tiene nuestro video.
  6. Width: Será el tamaño, convien gestionarlo con css.

Uso de la etiqueta <source> dentro de un video

Es conveniente que preveamos todos los escenarios posibles para cargar nuestros videos, por esa razón es razonable cargar nuestros archivos en los dos formatos que se pueden reproducir mp4 y ogg. Para que cargue una u otra dependiendo del navegador utilizaremos la etiqueta source.

    <figure id=”video”>
        <video>
            <source src =”ruta/video.mp4”>
            <source src =”ruta/video.ogg”>
        </video>
    </figure>

Ejemplo de etiqueta <video>

En el siguiente ejemplo vamos a crear una etiqueta video dentro de una etiqueta figure y activaremos los botones de play. 

<div>
    <video>
        <source src="ruta de mi ordenador\video\USO BOTONES.mp4">

    </video>
    <nav id="Botones_video" style="margin-top:0px;">
                <button type="button" id="Boton_2">Play</button>
    </nav>
</div>

Formularios en Html <form>

El formulario es una herramienta muy importante de una página web. Se utiliza para que el usuario ingrese datos dentro de nuesras BBDD de una forma determinada. En el eligiremos como, cuando y de que forma se ingresan los datos. Para generar un formulario necesitaremos en primer lugar las etiquetas <form></form> .

Un formulario se compone de difrentes elementos, cuadros de relleno de texto, listas desplegabls, correos electrónicos ...Todos estos elementos los podremos crear con la etiqueta <input> Jugaremos con el atributo type=""para elegir el tipo de elemento que deseamos crear.

Este podria ser un formulario basico con una caja de texto donde introducir datos y un botón para cargar los datos en nuestra BBDD: 

<form  name="Formularios" id="Formulario_1" method="get">
    <input type="text">
    <input type="submit" value="Enviar">

</form>

Usos del atributo Style en una etiqueta <input>

En la versión 5 de html se han incluido diferentes estilos de eqiquetas que nos facilitan la tarea. Le indicaremos al navegador si el cuadro es para un texto, Email,busqueda, una dirección web, un teleono...

Ejemplos de etiqueta input para formulario

  • text <input type="text" name="texto">

    NOMBRE:
  • Email <input type="Email" name="email">

    Email:
  • Search(Casilla busqueda) <input type="search" name="busqueda">
    Busqueda:
  • Password: Para introducir un password con los datos ocultos. <input type="Password" name="password">
    Password:
  • Url <input type="url" name="URL">
    Busqueda:
  • Tel <input type="tel" name="tELEFONO">
    Busqueda:
  • date <input type="DATE" name="FECHA">
    Busqueda:
  • Number:En el introduciremos números y utilizanso los metodos max y min podemos indicar el número máximo y minimos.
    <input type="number" name="numero" max="50" min="0" placeholder="número entre 50 y 0">


  • range:
    <input type="range" name="numero" min="10" max="200" step="10">

  • wek:(calendario con semanas)
    <input type="week" name="fechaConSemanas" >>
  • datetime-local:(calendario con semanas)
    <:input type="datetime-local" name="fechaConSemanas">

  • Radio botón de chek redondo
    <input type="radio" name="miboton" id="miboton" value="BontonChek" />
    <label for="raza_3">Boton de check</label>

  • checkbox:Botón de chek cuadrado
    <input type="checkbox" name="raza" id="" value="enano" />
    <label for="raza_3">Boton de check Cuadrado</label>
  • Color: Crearemos un selector de colores.

     <label>Seleciona un color:   </label>
 <input type="color" name="Colores">

Asi se puede hacer un pequeño formulario con html5, tener en cuenta que no le boy a dar ningun formato con css por lo que el resultado será un poco rustico, tan solo utilizare la etiqueta br al final para que aparezcezcan unas debajo de las otras:

Nombre:

Apellidos:

Correo:

télefono:

Web:

fehca:

Busqueda:

Password:
Así es el código de un formulario básico: 
<form method="get">
    Nombre:  <input type="text" name="nombre">
    Apellidos: <input type="text" name="apellidos">
    Correo:    <input type="email" name="Email">
    télefono:  <input type="tel" name="telefono">
    Web: <input type="url" name="Url">
    fehca: <input type="date">
    <input type="search">
     Password: <input type="Password" name="Password">
    <input type="submit" name="Enviar">
</form>

Atributo Placeholder

Lo utilizaremos para dejar un valor por defecto en un input o cuadro de texto.

<input type="text" placeholder="Aqui va el DNI">

Atributo required

Como su nombre dice lo utilizaremos para que sea inprecindivle rellenar un input antes de enviar el formrulario.

<input type="Email" required >

Atributo Multiple

Lo utilizaremos para enviar mas de un dato dentro de un campo. Podremos rellenar varios registros separandolos con comas (cosa1,cosa2,cosa3).

<input type="tel" name="telefono" required >

Atributo autofocus

Cuando aparezca nuestro formulario se cargará el foco en el imput que le indiquemos que tiene el auto focus.

<input type="tel" name="telefono" required autofocus>

Atributo Patter

Lo utilizaremos para validaciones especieles, en las que le tengamos que indicar un cp un dni...

<input pattern="[intervalo del caracter]{numero caracteres}">
<input pattern="[0-9]{5}">

Atributo form de un input

Lo utilizamos para poner un input fuera de nuestro formulario y vinsularlo a nuestro formulario inicial. Dentro del input pondremos form="formulario al que se bincula"

<input type="text" form="FormularioCompras" id="inputSuelto" name="inputSuelto">

Atributo maxlength

Con el podremos indicar el tamaño en carateres o digitos de nuestro input. En el siguiente ejemplo podemos ver un input en el que el usuario solo puede introducir 5 caracteres

<input type="text" name="texto" id="texto" maxlength="5" value="12345">

Atributo desable

Desabilitará nuestro input, visualmente quedará como sombreado y no podrmos meter datos en él mientras se encuentre en este estado.

<label>Desabilidado: </label><input type="text" name="" disabled>

API FORMS DE HTML5

Son un conjunto de objetos, propiedades y métodos que utiliza html en su actualización numero 5 para el tratamiento de formularios.

Uso de la etiqueta <datalist>

Es un array o matriz donde guardaremos un conjunto de registros en etiquetas option y posteriormente recuperaremos mediante una etiqueta input, con el podemos crear listas desplegables dentro de un formulario, es una actualización que nos trae html5.

Código de como se crea el datalist
 
<form method="get" >
    <datalist id="datos">
            <option value="FONTANERO" label="OFICIO 1"></option>
            <option value="ELECTRICISTA" label="OFICIO 2"></option>
            <option value="ALBAÑIL" label="OFICIO 3"></option>
            <option value="ENCOFRADOR" label="OFICIO 4"></option>
            </datalist>
<input type="text" name="lista" id="listadosdd" list="datos">

</form>
EJEMPLO DE DATALIST  

Agrupar options con la etiqueta <optgroup>

Este sería el código html del optgroup: 
<label> Ciduad
    <select>
        <optgroup label="Andalucia">
            <option>Sevilla</option>
            <option>Osuna</option>
            <option>Estepa</option>
            <option>Cadiz</option>
        </optgroup>
        <optgroup label="Valencia">
            <option>Valencia</option>
            <option>Castellon</option>
            <option>Alicante</option>
            <option>Gijona</option>
        </optgroup>
    </select>
</label>

Como cargar un dalist con un array con javaScript

Un datatlist no deja de ser mas que un conjunto de etiquetas optino. Vamos a crear un script donde crearemos un aray que paseremos por un bucle for para que rellene tantos option como registros tengamos en nuestro aray.

Es es el código: 
<script type="text/javascript">
    <input name="DatalistConAray" list="ListaD" />
    <datalist id="ListaD"></datalist>
    <script type="text/javascript">
        var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
        var options = '';
            for(var i = 0; i < lista.length; i++){
                    options += '<option value="'+lista[i]+'" />';
                    document.getElementById('ListaD').innerHTML = options;
            }
</script>

Como cargar un dalist con un array con Php

En primer lugar tener en cuenta que para que un código php corrar nuesra pagina ha de estar en un servidor y nuestro archivo tiene que ser .php.
". $opciones[$i] . "" . "
"; } }; setOptions($opciones); ?>
Código: 

  <form >

        <input type="text" name="operador" id="operador" list="listaOperadores">
        <datalist id="listaOperadores">
            <?php
                $opciones = ["multiplicar", "dividir", "restar","sumar" ];
                 function setOptions($opciones){
                    for ($i=0; $i<count($opciones) ; $i++) {

                        echo "<option>". $opciones[$i] . "</option>" . "<br>";
                    }
                 };
                setOptions($opciones);
            ?>

            </datalist>
        </form>

Uso de la etiqueta <fieldest>

Utilizare mos esta propiedad para dividir un formulario en secciones.. Podremos poner estas etiquetas dentro de un formulario y facilitar difenetes eleciones al usuario de una forma muy visual.
Datos personales
Estado civil
Experiencia Laboral
RESIDENCIA
Observaciones:

EJEMPLO DE FORMULARIO CON HTML5

 En el siguiente ejemplo juntare varios impusts de un formulario y les daré un diseño.
FORMULARIO PRÁCTICA
Fecha nacimiento
Estado civil
Estado civil hermano

Contenido interactivo <details>para hacer acordeón.

Es un contenedor que actua como un acordenor sin tener que programar el css. Cuando tocamos en el icono se desplegará y veremos el resto del articulo. Si deseamos que un acordeon por defecto este abierto cudno carge la pagina utilizaremos el atributo open="open"
<details>

Aqui se encuentra el texto oculto que tine details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.

Este es nuestro código 
 <details>
    <summary><span id="eT_1">Cabecera</summary>
        <p>Aqui se encuentra el texto oculto que tine details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.</p>
</details>

Ventana emergente o modal con <dialog>

La etiqueta <dialog> puede ser utilizada para crear una ventana modal de validación formulario sin tener que estar peleando con css y javaScript practicamente. Una ventana modal es una ventana suspendida en el medio de la pantalla o ventan de dialogo.

La interpretación semántica de esta etiqueta es entendida por el navegador como un objeto independiente al body.

En javaScript exite una instrucción conocida de como alert("texto"), esta instrucción se utiliza para crear ventanas de dialogo, pero tiene la desbentaja de que no se puede modificar. HTML5 crear la etiqueta dialog para crear ventanas de dialogo propias en las que podemos introducir imagnes, textos, inputs...
Todo esto facilitara la interactividad de nuestra web y ayudará a personalizar nuestros formularios, generar formularios emergentes, validaciones de ok o ko en rellenado de formularios y todo lo que se te pueda ocurrir.

Existen dos metodos que pueden resultar muy utiles close() y show() o showModal(). Como su nombre indica podremos utilizar estos métodos para oculta o mostrar la etiqueta dialog.
Por defecto la etiqueta dialog inicia oculta. En el caso de que desemos mostrar nuestra etiqueta le incluiremos el tributo open. ( <dialog open>)

¡Formulario cargado!!!!!!!!!

Ventana emergente creada con etiqueta dialog.

Cómo crear una ventana emergente o alert personalizado

<button onclick="document.getElementById('cargado-ajax').show()">Abrir ventana Modal

              <dialog id="cargado-ajax" >
                    <h2>¡Formulario cargado!!!!!!!!!</h2>
                          <p> Ventana emergente creada con etiqueta dialog.</p>
                          <button  onclick="document.getElementById('cargado-ajax').close()">cerrar Ventana</button>
                    </dialog>

Introducir código embebido con <iframe>

El cçodigo embebido se utiliza para introducir apis de terceros de forma grauita y rápida. Con el podemos introducir videos de youtube, mapas, entradas a instagram...
Ejemplo de iframe descargado de google maps 
<iframe src="https://www.google.com/maps/....s" 
 width="600"
 height="450" 
frameborder="0" 
style="border:0" 
allowfullscreen></iframe>

Ejemplo de iframe descargado de youtube

API Canvas para dibujos rectangulares

Utilizaremos la etiqueta canvas como lienzo para realizar nuestros dibujos o graficos en la pagina. Una vez creado este lienzo con la etiqueta canvas de html utilizaremos css para dar tamaño y un fondo. Finalmente utilizaremos jacaScript para dibujar en el lienzo.

Existen una serie de métodos que debemos conocer para poder crear y modificar con JS los lienzos creados con las etiquetas canvas :

  • getContext("2d"): Al pasarle el parámetro 2d a este método le indicamos que nuestro dibujo será en dos dimenciones.
  • fillRect(x,y,ancho,alto): Con el dibujaremos un rectangulo sólido.
  • strokeRect(x,y,ancho,alto): Rectangulo vacío.
  • clearRect(x,y,ancho,alto): Borrador rectangular.
  • fillStyle= "color": Método para modificar color del interior,tenemos que determinarlo antes de formar el objeto.
  • strokeStyle= "color": Método para modificar color del contorno, tenemos que determinarlo antes de formar el objeto.
  • globalAlpha: Este método lo utilizaremos para dar mayor o menor opacidad a nuestro objeto, siendo el 1 la maxima opacidad y el 0 un objeto trasparente por completo u invisible.
En tu navegador soporta canvas

Codigo para crear cuadros en un canvas:

 
window.addEventListener("load", function Dibujar(){

    objCanvas1 = document.getElementById("Dibujo");
    var subObjetoCamvas, subObjetoCanvas2;
    var x = 10; var y = 10;var ancho=50;var Alto=50;

    subObjetoCamvas =  objCanvas1.getContext("2d");
    subObjetoCamvas2 =  objCanvas1.getContext("2d");

    subObjetoCamvas.fillRect(x,y,ancho,Alto);
    subObjetoCamvas.clearRect(x+10,y+10,ancho-20,Alto-20);

    subObjetoCamvas2.fillStyle="#3B6845";
    subObjetoCamvas2.fillRect(x+50,y+50,ancho,Alto);
    subObjetoCamvas.clearRect(x+60,y+60,ancho-20,Alto-20);
}, false );

API canvas para gradiente o degradados

Es una transición de un color a otro en un espcio determinado recorriendo por el cámino los colores de transición.

Este es un ejemplo de degradado creado como imagen en PhotoShop:

Imagen de un degrado hecho con PhotoShop

Para construir estos objetos con la API canvas nos hace falta conocer una serie de métodos:

  1. createLinearGardient(x1,y1,x2,y2): Crearemos un objeto para generar un degradado en un canvas. x1 e y1 marcan el punto de incio del degradado, mientras que x2 e y2 marcarán el punto final.
  2. createRadialGradient(x1,y1,r1,x2,y2,r2): Creamos un degradado circular x1 e y1 son el centro del circulo, r1 es el rádio, x2,y2 y r2 formarán el segundo circulo con el sugundo color.
  3. addColorStop(posicion, "color"): posición marcará el inicio del degradado entre 1 y 0.0, siendo 1 el 100% o punto final y 0.0 el 0% o punto inicial.

Esto es un degradado hecho con canvas y js:

No carga canvas en tu brouser No carga canvas en tu brouser

Código para crear un degrado

 
window.addEventListener("load", function(){
   //constructor de canvas
   const canvas = document.getElementById("Dibujo_4");
   const Dibujo = canvas.getContext("2d");
   //constructor de estilo degradado circular
   let gradientCircle = Dibujo.createRadialGradient(160,75,50,160,75,200);
   gradientCircle.addColorStop(1,"red");
   gradientCircle.addColorStop(0,"green");
   //cargamos estilos a nuestro objeto canvas 2d
   Dibujo.fillStyle= gradientCircle;
   Dibujo.fillRect (0,0,300,300);
}, false);

Crear trazados con Canvas

Un trazado es un conjunto de líneas en un orden determinado que generan una figura (triangulo, rectangulo, esfera...). Con canvas primero generaremos el trazado y luego dibujaremos el trazado creado.

Exiten una serie de metodos que tenermos que tener en cuenta:

Inico y fin del objeto trazado:

  • beginPath():Inicio del trazo.
  • closePath():Fin del objeto.

Métodos para dibujar el objeto:

  • Stroke():Contorno.
  • Fill():Figura solida.
  • Clip():Mascara.

Métodos para dibujar trazados:

  • moveTo(x,y): Mueve el lapiz a la posici x/y en el eje cordenadas de la figura.
  • lineTo(x,y): genera línea recta desde pisción del lápiz en ese momento determinado hasta el punto dado por x/y.
  • Rect(x,y,ancho,alto): crea un rectangulo.
  • Arc(x,y,r,angInical,angFianal,direccion): crea un arco.
  • bezierCurveTo(a,b,c,d,x,y): Genera una curba becier cubica(curba utilizada en graficas para generar un promedio).
  • quadraticCurveTo(a,b,x,y): Curba bezier cuadratica

En el siguiente canvas crearemos un objeto con diferentes líneas

your browser does not support canvas
Este sería el código: 
window.addEventListener("load", function Dibujante3(){
    //constructor del obj. Dibujo em  2d
    const canvas = document.getElementById("Dibujo_5");
    const Dibujo = canvas.getContext("2d");
    //Indicamos que inicia el trazado
    Dibujo.beginPath();
    //nos despazamos a la coordenada de incio de nuestro trazado
    Dibujo.moveTo(50,50);
    //indicamos donde finaliza nuestra línea
    Dibujo.lineTo(150,120);
    //marcamos una segunda y tercera línea.
    Dibujo.lineTo(150,50);
    Dibujo.lineTo(200,100);
    Dibujo.lineTo(20,60);
    //cerramos el objeto regresando al punto incial beginPath()
    Dibujo.closePath();
    //hace visible el objeto creado rellenandolo
    Dibujo.fill();

}, false );

Crear una mascara con el método clip()

Una mascara será una ventana que nos permitirá ver los dibujos que tenemos en el canvas. En el siguiente canvas cargaremos un degradado por detar y lo mostraremos dentro de nuestra máscara.

Este es el código 
window.addEventListener("load", function Dibujante4(){
   //constructor obj. canvas
    const canvas = document.getElementById("Dibujo_6");
    const Dibujo= canvas.getContext('2d');

    Dibujo.beginPath();
    Dibujo.moveTo(100,50);
    Dibujo.lineTo(120,50);
    Dibujo.lineTo(120,130);
    Dibujo.lineTo(100,130);
    Dibujo.lineTo(150,130);
    Dibujo.lineTo(150,140);
    Dibujo.lineTo(100,140);
    Dibujo.lineTo(100,50);
    Dibujo.closePath();

    //mascara
    Dibujo.clip();
    //creamos un for para que a
    //cada vuelta de bucle genere una linea
     for (var i = 10; i<290; i+=10) {
            Dibujo.moveTo(0,i);
            Dibujo.lineTo(290,i);
                           }
     Dibujo.stroke();
}, false);

GENERA GRAFICOS VECTORIALES CON <svg>

Un grafico vectorial es un dibujo esclable a cualquier tamaño, es una forma de generar dibujos de una forma muy ligera para el navegador y mucho más simple que canvas. El contenedor sgv es muy útil para gnerar dibujos de textos, circulos, cuadrados.

En primer lugar abriremos una eqiqueta sgv y dentro de ella podrmos incluir el resto de equetas

<text>
Cargaremos textos dentro de nuestro contenedor sgv. Los atributos x e y marcaran el punto en el que se situa nuestro dibujo.El atributo fill lo utilizaremos para indicar el color del relleno.
<rect>
Lo utilizaremos para generar un rectangulo. El atributo stroke sera el borde de nuestra imagen.
<circle>
Crea un circulo, para posicionarlo tenemos los atribuyos cx y cy, para definir el tamaño tenemos el atributo r que representa el rádio de nuestro circulo y para definir el grosor del borde tenemos stroke-width
<line>

Utilizaremos esta etiqueta para poder realizar líneas dentro de nuestro lienzo svg. En esta tabla podeis ver sus diferentes atributos de la etiqueta <line>.

Atributo Ejemplo USO
x1 y1 x2 y2 <line x1="5" y1="10" x2="120" y2="60"> x1 e y1 sera el punto de início de la línea, mientras x2 e y2 seran el puento final.
stroke stroke:aquamarine; Lo utilizaremos para dar color a nuestra línea.
stroke-width stroke-width:5px; Grosor de la línea
stroke-linecap stroke-linecap:round; Define diferentes tipos de acabado de la línea redondeada, rectangular.. butt, round, square
stroke-dasharray stroke-dasharray: 6px; Línea discontinua, le indicaremos la distancia entre líneas. En el ejemplo se generan líneas discontinuas cada 6px.
stroke-dashoffset Inicio de la línea discontinua
shape-rendering tipos de líneas. auto | optimizeSpeed | crispEdges | geometricPrecision | inherits

stroke-linecap

stroke-dasharray

<ellipse>

Es una figura geométrica parecida a un circulo pero no tiene un radio regular. utilizaremos los atributos cx y cy para situar la elipse y utilizaremos rx y ry para darle forma a nuestra elipse.

<polyline>

Una polilinea es un conjunto de líneas, utilizaremos el atributo points para darle los puntos x,y en los que inicia cada línea (points="20,20 40,25 60,40"). En la siguiente imágen ceremos dos polilíneas con un texto superpuesto y un elípse.

<path>

Utilizaremos esta etiqueta para generar arcos:

<path d="M 10,12 a 6,9 90 1,0 9,2" fill="black"></path>

Dentro del parámetro de incluiremos varios datos que he representado con varios colores:

  • El primer color representa el punto x,y de início de nuestro arco.
  • El segundo color (verde) representa los radios rx, ry de nuestro arco.
  • El tercer color (azul) representa los grados de nuestro arco (90º)
  • El cuarto color (amarillo) nos marca el sentido de la curva siendo 0 hacia la izquierda y 1 hacia la derecha.
  • El quinto color (rojo) reprensenta el punto x+=9, y+=2 donde finaliza el arco.

Degradados <defs>

DEGRADADO CIRCULAR

<tspan>

Podemos utilizar esta etiqueta para insertar textos dentro de una etiqueta text.

Aquí tenemos un ejemplo para crear una imagen de carga de una página

See the Pen svg que rota para carga páginas by CVDGP (@cvdgp) on CodePen.

No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)

Buscar este blog

Sandisk y Western Digital