HTML5
Estos son algunos apuntes sobre HTML5:
Los elementos estructurales de HTML5 son los siguientes:
<header></header> : Encabezado de la pagina
<nav></nav>: Menu de navegación
<aside></aside>: Contenido que esta sutilmente relacionado con el contenido alrededor
<section>: Agrupar diferentes articulos por tema.
<article></article> : Noticias individuales
</section>
<footer></footer>: Contiene el pie de página
Los elementos estructurales de HTML5 son los siguientes:
<header></header> : Encabezado de la pagina
<nav></nav>: Menu de navegación
<aside></aside>: Contenido que esta sutilmente relacionado con el contenido alrededor
<section>: Agrupar diferentes articulos por tema.
<article></article> : Noticias individuales
</section>
<footer></footer>: Contiene el pie de página
<br/> : Da un espacio.
<em>: La letra se ve en cursiva.
<strong>: Letra en negrilla.
<p>: Es un elemento de bloque, osea varios <p> van uno debajo del otro.
ENLACES <a>
<p id="link_prueba">esto es una prueba</p>
y al enlace lo marcamos de la siguiente forma:
<a href="#link_prueba">Ir al parrafo marcado</a>
<em>: La letra se ve en cursiva.
<strong>: Letra en negrilla.
<p>: Es un elemento de bloque, osea varios <p> van uno debajo del otro.
ENLACES <a>
- Para generar un enlace a la misma página:
<p id="link_prueba">esto es una prueba</p>
y al enlace lo marcamos de la siguiente forma:
<a href="#link_prueba">Ir al parrafo marcado</a>
- Para generar un enlace tipo correo:
- Para generar un enlace tipo descarga:
FORMULARIOS
Permite capturar datos de nuestros usuarios para interactuar en nuestro sitio.
- Formulario normal:
<fieldset>
<legend>Información</legend>
<p>
<label>
Descripcion:
<input type="text" />
</label>
</p>
<p>
<label>
<input type="text" />
</label>
</p>
</fieldset>
</form>
- Formulario login:
<fieldset>
<legend>Ingreso</legend>
<label>
Correo:
<input type="email" name="email" placeholder="ejemplo@servidor.com" autofocus maxlength="100" required />
</label>
<label>
Clave:
<input type="password" name="pass" placeholder="password" />
</label>
<input type="submit" value="Enviar" />
</fieldset>
</form>
- Formulario de busqueda
<form action="search.php" method="get">
<fieldset>
<input type="search" name="search">
<input type="image" src="https://devcode.la/static/imagen.png"> </fieldset>
</form>
</form>
- Formulario Slambook
CSS3
SELECTORES
Para aplicarle un estilo a algun elmento de nuestro documento html, utilizamos en css las diferentes formas:
- Selector universal (*): Esto aplica el estilo a todos los elementos del documento, por ejemplo : * { margin: 0px; }
- Selector elemento: Se aplica el estilo al elemento que estamos referenciando, por ejemplo: p { color: blue; }
- Selector Id: Aplica el estilo al elemento que este identificado con el id, por ejemplo: <article id="mensaje"></article>, el archivo css tendremos lo siguiente: #mensaje { color: grey; }
- Selector de clase: Aplica el estilo al elmento con el nombre de clase, por ejemplo: <h3 class="miclase"></h3>, y en el archivo css tendremos lo siguiente: .miclase { color: blue; }
Las tres propiedades de las pseudo clases son: :hover, :active, :focus, first-child, last-child
Por ejemplo:
input:hover { color: yellow; }
input:active { color: blue; }
input:focus { color: violet; }
li:first-child { background: yellow; }
li:last-child { background: violet; }
li:nth-child(2n) { background: blue; }
li:nth-child(3n) { background: green; }
COLORES
Los colores se definen por la regla sRGB y se pueden definir de diferentes maneras:
- Keywords: Son las que se definen mediante palabras, tales como blue, white, black, etc. por ejemplo: p { color: blue; }
- Notación hexadecimal: Es una anotación en valor hexadecimal iniciando con la #. por ejemplo: p { color: #fe1; }
- RGB y RGBA: Utilizamos el formato de tres números para seleccionar el color. Por ejemplo:
- formato RGB -> p { color: rgb(255,155,200); }
- Con la clase rgba son de cuatro números, el último indica la opacidad del color. Por ejemplo: p { color: rgba(255,230,90,.5); }
- HSL y HSLa:
- HSL -> Hue(matiz), Saturation(saturación) y Lightness(brillo). Por ejemplo: p { color: hsl(0,100%,50%); }
- HSLa -> Por ejemplo: p { color: hsla(240,100%,50%,.4); }
UNIDADES DE LONGITUD
Entre las unidades de longitud absolutas estan:
- centrimetro (cm)
- milimetro (mm)
- pulgada(in)
- pixel(px)
- punto(pt)
- pica(pc)
- em
- rem
- ex
- ch
Esta es una propiedad de como se van a mostrar los elementos en la página, entre los cuales estan:
- Inline: Los elementos se ubican al lado del otro, pero no tienen en cuenta ancho ni alto de los elementos. Por ejemplo: div { width: 200px; height: 100px; display: inline; }
- Inline-block: Los elementos se muestran uno seguido del otro, tomando en cuenta las características de los elementos, por ejemplo: div { width: 200px; height: 100px; display: inline-block; }
- None: No muestra los elementos en el navegados. div { width: 200px; height: 100px; display: none; }
- Flex: Organiza los elementos hijos horizontalmente, y para que no se salgan del recuadro podemos utilizar la propiedad flex-wrap: wrap. Finalmente para centrarlos utilizamos la propiedad justify-content: center. .parent { display: flex; flex-wrap: wrap; justify-content: center; }
La propiedad position puede aceptar algunos valores en CSS y cada uno tiene su propia aplicación.
- Static: Se ubica en la posición por defecto y las demas propiedades como top, right, botton, left no tiene efecto sobre el posicionamiento. Por ejemplo: div { position: static; }
- Relative: Las propiedades anteriores si son tomadas en cuenta (top,right,left,botton). Por ejemplo: .miposicion { position: relative; top: 40px; left: 30px; top: 20px; bottom: 10px; }
- Absolute: Pone el elemento en la posición absoluta que le asignemos con las propiedades. Por ejemplo: .miparrafo { position: absolute; top: 10px; left: 10px; }
- Fixed: El valor “fixed” el cual posee un comportamiento similar al valor “absolute”, solo que acomoda el elemento con respecto a la ventana y no con respecto a su contenedor. Por ejemplo: .miposicion { position: fixed; bottom: 0px; right: 0px; }. Esto hace que el elemento se posicione en la parte inferior derecha de la ventana y no del elemento contenedor.
- Float: Hace que los elementos se remuevan del flujo normal de la pagina y se posiciones al lado derecho o izquierdo de los elementos que queramos. Por ejemplo: aside { float: right; width: 40%; background: blue; }. Cuando un elemento no quiere ser ubicado a ningún lado le asignamos la propiedad clear: both;
LISTAS
Las listas tienen varios tipos:
- Listas descriptivas: Palabra con su respectiva descripción, por ejemplo:
- <ld><dt>Python</dt><dd>Descripción del lenguaje python</dd></dl>
MULTIMEDIA
Tenemos varios elementos de multimedia que nos permite agregar a nuestro sitio:
- Imagen (img): Muestra imagenes. Por ejemplo: <img src="rutaimagen" alt="descripcion de la imagen"/>
- Audio (audio): Reproduce audio. Por ejemplo: <audio src="rutaaudio/audio.mp3" controls preload="metadata"/>
- Video (video): Reproduce video. Por ejemplo: <video width="100%" height="auto" controls autoplay><source src="rutavideo" type="video/mp4"></source></video>
- Figure: Podemos agregar cualquier tipo de elemento como parte independiente pero en el mismo flujo del documento. Por ejemplo:
- <figure><figcaption>Descripción de la imagen</figcaption><img src="fuenteimagen" alt="Descripción de la imagen" /></figure>
- en el css: figure { border: 2px solid #bbb; padding: 5px; } img { width: 100%; }
PROPIEDADES GENERALES
- border-radius: 20px 15px 30px 20px; -> Esquinas redondeadas
- box-shadow: rgb(150,150,150) 5px 5px 10px; -> Da un efecto de sombreado a una caja de texto.
- text-shadow: rgb(0,0,150) 3px 3px 5px; -> Lo mismo que la anterior pero para texto.
- linear-gradient(posicion inicio, color inicial, color final) -> para darle el efecto de degradado al elemento.
- radial-gradient(center,circle,#ffff 15%, #006699 200%) -> lo mismo que el anterior
- rgba() -> aplica opacidad a un elemento, por ejemplo:
- text-shadow: rgba(150,150,150,0.5) 3px 3px 5px;
- hsla() -> lo mismo que la anterior, hsla(tono,saturación,luminosidad,opacidad), por ejemplo:
- color: hsla(220,40%,60%, 0.5);
- Outline: Agregamos a un elemento una segunda caja con el borde que deseamos y con características propias. Por ejemplo:
- outline: 2px dashed #000099;
- outline-offset: 15px;
- border-image: Permite implementar un borde con imagen. Por ejemplo:
- border: 29px;
- -moz-border-image: url("image.png") 20 stretch;
- -webkit-border-image: url("image.png") 20 stretch;
- border-image: url("image.png") 29 stretch;
BOOTSTRAP
En el diagrama, observa lo siguiente:
- Las columnas de la cuadricula de Bootstrap estan representadas por 12 barras verticales. Los cajones representan elementos HTML.
- Las palabras "container", "jumbotron", "col-sm-6" and "col-sm-3" se refieren a las clases de Bootstrap.
- Los elementos con clase "jumbotron" se extiende por todo el ancho de la página web, más allá de las fronteras del Grid.
- Los elementos dentro del segundo "container", tales como "col-sm-6" and "col-sm-3" estan contenidos dentro de las columnas de la cuadricula.
- Los elementos con la etiqueta "col-sm-3" toman tres columnas del grid; Los elementos con las etiquetas "col-sm-6" toman 6 columnas del grid.
JAVASCRIPT
Fuentes:
