Tabla de Pendientes con JS/JQuery

En esta publicación vamos a realizar una pequeño y fácil script en JavaScript que realizara el trabajo de una pequeña tabla de pendientes.

Este ejercicio es bastante útil, no necesariamente por que vayamos a incluir una tabla de pendientes en una de nuestras páginas web sino porque podemos sacarle algunas ideas para otras cosas que deseemos realizar solo basta con cambiar la idea principal y aunque no se quede guardado ya que no haremos uso de base de datos es un ejercicio que podría resolverte varias dudas con respeto a la creación de nuevos elementos hijo o su eliminación.

Pasos:

  1. En el el head le agregamos el <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> para poder hacer el query que necesitamos.
  2. Creamos un archivo html en este tendremos una entrada de tipo texto y le podremos un id = textoTarea, este input nos servirá para ingresar el texto de nuestro pendiente. Creamos un botón el cual le podremos un id = btnAniadir el cual tiene como texto Añadir, como el texto lo dice este botón contendrá el evento para añadir el pendiente o tarea.
  3. Aquí podría ser de diferentes maneras como crear la tabla completamente desde el script, pero aquí crearemos el encabezado de la tabla desde el html, creamos una tabla la cual tendrá como id= TablaPendientes.
    1. Dentro de la tabla creamos el cuerpo de la tabla mediante la etiqueta <body> y creamos la fila del encabezado con la etiqueta tr el cual tiene definido class = “FileRen”, este encabezado tendrá 3 columnas Fecha, Pendiente, Estado y no constará de ningún id.
  4. Darle diseño, le daremos un pequeño diseño a nuestra tabla para que no se vea tan feo.
  5. Ya en el script instanciamos la variable btnAniadir la cual obtendrá el elemento botón que creamos, textoPendiente que obtendrá el elemento de la entrada de tipo texto, tbody obtendrá el cuerpo de la tabla que servirá para agregarle los renglones que vamos creando, ren obtendrá los renglones y realizara un query, checa obtendrá los elementos qie tienen estado para realizar un query y una variable de tipo fecha para sacar la fecha del dia.
  6. Creamos un evento a btnAniadir en el cual cada que demos clic crearemos un TR y sus respectivos TD, el primer TD le creamos un nodo texto donde sacamos la fecha por medio de la variable fecha que creamos previamente, el segundo TD le creamos un nodo texto apartir del texto que ingresamos, y al tercer le creamos un nodo texto con la palabra “PENDIENTE” y le agregamos un atrubuto “class” de nombre “estado” para crearele un query a ese TD, los tres TD se los agregamos a el TR y este TR se los agregamos al cuerpo de la tabla tbody.
  7. En el mismo evento de btnAniadir creamos un query para la variable ren que es la que tiene todos los elementos que tienen la clase = “FilaRen” eliminar cada vez que un renglón tenga doble clic
  8. Creamos otro query con la variable checa que es la que obtiene todos los elementos que tienen la clase = “estado”, para que cada que le demos clic a la ultima celda de cada fila cambie su estado.

 

See the Pen
JzaNJX
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

CSS Media Query

¿Qué es una Media Query?

La Media Query es una técnica CSS introducida en CSS3.

Utiliza la regla @media para incluir un bloque de propiedades CSS solo si una cierta condición es verdadera.

Las consultas de los medios se pueden utilizar para verificar muchas cosas, como:

  • ancho y alto de la ventana
  • ancho y alto del dispositivo
  • orientación (¿la tableta / teléfono está en modo horizontal o vertical?)
  • resolución

El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada para computadoras de escritorio, computadoras portátiles, tabletas y teléfonos móviles (como los teléfonos iPhone y Android).

 

Sintaxis de consulta de medios

Una consulta de medios consta de un tipo de medio y puede contener una o más expresiones, que se resuelven como verdaderas o falsas.

Por ejemplo en este query el fondo de todos los h2 sera tomado solo si tiene un rango mínimo de 50rem y un máximo de 75rem en el ancho de la pantalla


@media screen and (min-width:50rem) and (max-width:75rem)
{
h2{ background-color: tomato;}
}

El resultado de la consulta es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones en la consulta de medios son verdaderas. Cuando una consulta de medios es verdadera, se aplican la hoja de estilo o las reglas de estilo correspondientes, siguiendo las reglas normales en cascada.

A menos que utilice los operadores no o solo, el tipo de medio es opcional y all tipo estará implícito.

También puede tener diferentes hojas de estilo para diferentes medios.

 

 

Ejemplo sencillo: MENU RESPOSIVO

 

Tenemos un pequeño menú el cual diseñamos de la siguiente manera que en teoría es lo original


* {
box-sizing: border-box;

.nav {
overflow: hidden;
background-color: #333;
}

.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.nav a:hover {
background-color: #ddd;
color: black;
}

p{
width: 50%;
float: left;
}

Pero al meter nosotros nuestra primer quería la restricción nos dice que cuando el ancho de la pantalla este entre un mínimo de 75rem y un máximo de 120rem el fondo de la etiqueta h2 será de color #FCF7FF, y todo sigue igual en nuestro navegador

@media screen and (min-width: 75rem) and (max-width:120rem){
h2{ background-color: #FCF7FF;}
}

Pero cuando nuestra pantalla cumpla la siguiente restricción el fondo de la etiqueta h2 cambiara a  #967AA1 la barra de menú o navegador dejara de flotar y cubrirán el 100% del ancho y las etiquetas p también lo haciendo que a pesar de lo pequeño de nuestra pantalla no se pierdan los elementos del menú.


@media screen and (min-width:25rem) and (max-width:50rem){
h2{
background-color: #967AA1; }

p{
width: 100%;
float: none; }

.nav a {
float: none;
width: 100%; }
}

 

See the Pen
bZqPGV
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

JavaScript HTML DOM

El DOM de HTML (modelo de objeto de documento)

¿Qué es el DOM?

El DOM define un estándar para acceder a los documentos:

“El DOM es una plataforma y una interfaz de lenguaje neutral que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento”. 

 DOM se divide en 3 Puntos:

  • Core DOM – modelo estándar para todos los tipos de documentos
  • XML DOM – modelo estándar para documentos XML
  • HTML DOM – modelo estándar para documentos HTML

¿Qué es el DOM de HTML?

El DOM de HTML es un modelo de objeto estándar y una interfaz de programación para HTML. Se define:

  • Los elementos HTML como objetos.
  • Las propiedades de todos los elementos HTML.
  • Los métodos para acceder a todos los elementos HTML.
  • Los eventos para todos los elementos HTML.

El método getElementById

El método getElementById () devuelve el elemento que tiene el atributo ID con el valor especificado.

Este método es uno de los métodos más comunes en el DOM de HTML y se usa casi cada vez que desea manipular u obtener información de un elemento de su documento.

Devuelve nulo si no existen elementos con el ID especificado.

Una identificación debe ser única dentro de una página. Sin embargo, si existe más de un elemento con el ID especificado, el método getElementById () devuelve el primer elemento en el código fuente.

El método getElementsByClassName

El método getElementsByClassName () devuelve una colección de todos los elementos en el documento con el nombre de clase especificado, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: Puede usar la propiedad de longitud del objeto NodeList para determinar el número de elementos con un nombre de clase específico, luego puede recorrer todos los elementos y extraer la información que desee.

El método getElementsByName 

El método getElementsByName () devuelve una colección de todos los elementos en el documento con el nombre especificado (el valor del atributo del nombre), como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: puede usar la propiedad length del objeto NodeList para determinar el número de elementos con el nombre especificado, luego puede recorrer todos los elementos y extraer la información que desee.

El método getElementsByTagName 

El método getElementsByTagName () devuelve una colección de todos los elementos en el documento con el nombre de etiqueta especificado, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: el parámetro “*” devuelve todos los elementos del documento.

Sugerencia: Puede usar la propiedad de longitud del objeto NodeList para determinar el número de elementos con el nombre de etiqueta especificado, luego puede recorrer todos los elementos y extraer la información que desee.

La propiedad innerHTML

La forma más fácil de obtener el contenido de un elemento es mediante el uso de la propiedad innerHTML .

La propiedad innerHTML es útil para obtener o reemplazar el contenido de elementos HTML.

Veremos un ejemplo de la manipulación del DOM en HTML

En nuestro documento html tendremos dos entradas una de tipo “text” la cual tendrá un id el cual identificaremos con “entrada” y otra de tipo “button” en la cual su id será “btnElimina”.

Posteriormente tendremos una etiqueta “section” donde estarán situados nuestras cajas las cuales son simples “div” con un estilo fondo azul para ubicarlos y un contenido.

 

En la hoja de estilos editamos el estilo de los “div” a través de su clase “caja”  poniéndole un fondo azul.

En js tenemos que  declarar una variable para obtener por medio del id, el nodo de la etiqueta de entrada de tipo boton y posteriormente crearle un evento el cual se activara al momento de dar clic en el botón, en ese instante se declarara una variable “entrada” la cual obtiene por medio del id “entrada” los elementos de la etiqueta y una variable contenido para igualarla al valor de la variable entrada, y se mandara llamar la función agregaCaja.

La función agrega caja constara de declarar una variable que en este caso llamaremos divCaja la cual inicializaremos con un método para crear elemento el cual llevara el elemento a crear en este caso “div”.

Se declarara otra variable textDiv, pero esta vez crearemos un nodo de texto con el texto que nos llega por parámetro.

A la variable divCaja de añadiremos un elemento al nodo divCaja que en realidad es un “div”, y le agregamos un atributo de tipo class y su nombre de clase.

Creamos una variable padre, para obtener todos los elementos de estén que en nuestro caso es el “body”, para finalmente adherirle un hijo a padre que en este caso es la variable divCaja.

 

See the Pen
JzYqgJ
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

Declaración de variables en Javascript

Como programador, seguramente te has topado con la necesidad de definir el tipo de las variables que vas a usar en tu código; ya sean de tipo enteros, punto flotante o caracteres, entre otros. Gracias a que JavaScript es un lenguaje de tipado blando, podemos olvidarnos de esta manera de declarar variables y usar unas más generales var, let y const.

En este post aprenderemos cómo declarar nuevas variables en JavaScript y cómo son interpretadas, con el fin de hacer un mejor uso de los recursos de cómputo y de evitar errores a la hora de programar.

Rompiendo los hábitos

En lenguajes como C, C++, Phyton e incluso Java, declaramos las variables que usaremos en nuestro programa dándoles un tipo específico.

En el caso de JavaScript esta costumbre no es necesaria. JavaScript realiza las conversiones necesarias de forma interna para tratar las variables según se requieran durante la ejecución.

A este tipo de lenguajes se le conoce de tipado blando, ya que permite violaciones entre los tipos de las variables una vez que ya fueron declarados.
Por lo tanto, si en C la declaración de una variable de tipo entero se hacía de la siguiente manera:
int i
En JavaScript lo haremos así:
var i
Al asignarle un valor, por ejemplo: i=10, JavaScript entenderá entonces que se trata de un entero.

Diferentes maneras de declarar variables

En esta parte del post hablaremos de las diferentes maneras de declarar variables en JavaScript, aprenderemos qué sucede si declaramos una variable de una manera o de otra y cuáles son las palabras reservadas que debemos de usar para hacer estas declaraciones.

Ámbitos

JavaScript también es un lenguaje con ámbito global con ámbito predeterminado, es decir que si se declara una variable fuera de una función se va a pasar por referencia a todas las funciones, convirtiéndola en una variable global. Y también, si declaramos una variable dentro de una función su ámbito sólo va a ser dentro de esa misma función.
Por ejemplo:

var g = 1000

function f()

{

var g=14;

console.log(g); // mostrará 14 en la consola

}

En el ejemplo anterior tenemos dos variables con el mismo identificador; sin embargo, están en localidades de memoria diferentes, ya que una fue declarada afuera de la función con ámbito global y la otra con ámbito sólo dentro de la función. Por lo tanto, JavaScript no sobre escribe la variable global.
Usaremos la palabra reservada var para definir variables de ámbito local, que se hereda a scopes descendientes por referencia. En otras palabras, sólo es válida dentro de su scope, afuera de él ya no será reconocida.

Hoisting

Este término se refiere a que cada que se cada declaración de variable hecha con la palabra reservada var se moverá al inicio del código durante la ejecución. Con esto nos aseguramos de que las variables siempre estarán definidas y tendrán un espacio en memoria sin importar su posición dentro del código. Sin embargo, si le asignamos un valor inicial a una variable, no se le asignará hasta llegar a esa línea de código.

Palabras diferentes

Hasta ahora hemos visto que cualquier tipo de variable puede declararse usando la palabra var al inicio; sin embargo, no es la única. Existen dos palabras más para hacer declaraciones con JavaScript.

let y const.
En esta parte del post repasaremos cuáles son sus utilidades y diferencias principales.

const

Al usar const queremos decir que la variable no va a ser reasignada, que no es lo mismo a decir que no va a cambiar.
Estamos hablando de una constante, que siempre tendrá el mismo ‘objeto’ dentro de ella, pero las propiedades de dicho objeto pueden cambiar.
Por ejemplo, definir: const r=360
r=180;
Nos daría un error, pero si definimos un arreglo cuyos valores cambien, no tendríamos ningún problema.

let

Las palabras reservadas var y let tienen un uso bastante similar, sólo que una variable declarada con let dentro de un bloque de control de flujo, como: for, while o if, estará definida sólo dentro de ese bloque.
Por ejemplo:

function f()
{
let i=0
I=5*9; 
while(true){ let i=8;}
}

La variable i dentro del while será de ámbito local, y será definida en otra dirección de memoria a la que está definida fuera del bloque.
Se prefiere usar let a var, ya que gracias a estas definiciones locales, es más difícil cometer errores y sobrescribir valores.

Redactor:
Valeria Estefanía Cortez Gutiérrez
Tecnologías Web, semestre 20182018-1

Tipos de Selectores en CSS

Los selectores en CSS son aquellos que identifican elementos dentro de una página web para así poder aplicar estilos a sus elementos.

Los tipos de selectores abarcan desde el nombre de las etiquetas usadas en HTML hasta combinaciones que permiten diversos selectores de la página.

Existen diferentes tipos de selectores como lo son:

  • universal
  • de etiqueta
  • descendentes
  • de clase
  • de id.

TIPOS:

Selector Universal

Es aquel que se puede utilizar para identificar y modificar a todos los elementos de la pagina web.

El selector universal se declara con un asterisco (*) y dentro de las llaves se colocan las características que tomarán los elementos como se muestra a continuación.

Creamos nuestro selector * {} en el que daremos el mismo estilo margin y padding ademas de el color aqua a todos los elementos.

Selectores de Etiqueta

Los selectores de etiqueta seleccionan a los elementos cuyo nombre coincida con el nombre del elemento html.

Cuando existen diferentes etiquetas con propiedades iguales se puede enlazar separando los nombres por comas.

Ejemplo: Se le asigna un color y un formato al texto de los títulos h1, h2 y h3.

Podemos observar en el ejemplo estamos asignando un mismo estilo a las tres etiquetas.

Selectores descendentes

Son aquellos que seleccionan los elementos que se encuentran dentro de uno o mas elementos creando una mayor precisión para la selección de la etiqueta a la que se le aplicara el estilo. Estos selectores se separan por espacios en blando.

Ejemplo: Se modificara el color y la fuente de los elementos dentro de una etiqueta <p> que a su vez este dentro de la etiqueta <div>.

Un elemento no tiene que ser descendente directo de otro si no que la única condición es que el elemento debe estar dentro del otro elemento sin importar el nivel de profundidad en el que se encuentre

Selectores de Clase

Son prácticos para aplicar estilos a un solo elemento de la página ya que utilizando el atributo class se puede indicar directamente la regla CSS

Se diferencia este tipo de selector con la notación de un punto (.) antes de la palabra usada con el prefijo “class”.

Ejemplo: Al elemento <p> en su atributo class asignamos el nombre del selector creado .DeClase

Selectores de ID

Se utilizan para dar estilo a un solo elemento según su identificador único (id). Se utiliza con el atributo de id.

La sintaxis es muy parecida con los selectores de clase; la diferencia es que se utiliza el símbolo (#) en vez del (.). La diferencia  es que no se puede repetir en una misma página web.

Por ejemplo: Al elemento h3 se le da como identificador único #DeId por lo cual solo se le aplicara el estilo a este elemento. 

Es importante no confundir este selector con los anteriores:

p#DeId : Todos los elementos de tipo p con identificador unico DeId

p DeId : Todos los elementos con identificador único DeId y este dentro de alguna etiqueta p

p, DeId : Todos los elementos p y todos los elementos con identificador único DeId

Selectores Específicos

Pero ¿Cómo es posible aplicar estilos a solamente al párrafo cuyo atributo class sea igual a Estilo?

Combinando el selector de clase y el selector de tipo, para obtener un selector mucho mas especifico:

Como podemos observar el estilo solo se aplico al párrafo y no a los otros elementos. “Se puede interpretar el selector p.Estilos como Elementos de tipo <p> que dispongan de un atributo class con un valor de Estilos”

Estos fueron los diversos selectores CSS que puedes utilizar en la creación de tu página web.

 

Los mejores Frameworks para tu sitio web

Los Frameworks web son una herramienta utilizada  para el desarrollo de sitios web.

Proporciona una esqueleto o una estructura para ser rellenado por el desarrollador y de esta manera crear una aplicación.

Algunas de las ventajas al utilizar frameworks son:

  • Ahorro de tiempo y trabajo
  • Facilita el entendimiento de código si se desarrolla en una aplicación por mas de una persona.
  • Es mas sencillo encontrar herramientas o librerías para el framework.
  • Facilita la funcionalidad en diferentes navegadores para que luzca similar.

Mientras que entre las desventajas se encuentran:

  • Limita la libertad de diseño
  • Fuerza a usar la semántica propia del framework

Para decir que framework utilizar, se necesita plantear que lenguaje de programación se utilizará y el tipo de aplicación que se realizará.

A continuación te presentamos una lista de los framework, mas utilizados por los desarrolladores

LARAVEL

Laravel es uno de los mejores Frameworks de desarrollo PHP utilizados para desarrollar una aplicación web.

Es una aplicación web con una sintaxis expresiva y elegante. Algunos de los beneficios para los usurarios son:

  • Proporciona un serie de instalaciones a los desarrolladores
  • Cuenta con bibliotecas orientadas a objetos
  • Seguridad, contraseña y cifrado
  • Migración de bases de datos
  • Almacenamiento en cache y varias características mas.

DJANGO

Django es un framework gratuito de código abierto para el desarrollo de aplicaciones web, escrito en Python, un conjunto de componentes que te ayudan a desarrollar sitios web de manera mas rápida y fácil.

Este framework fue diseñado para ayudar al llevar las aplicaciones desde el concepto hasta su finalización, es tranquilo y seguro evitando errores en la seguridad ademas Django es escalable.

 

ANGULAR.JS

Un framework basado en JavaScript, que permite ampliar el vocabulario HTML para la aplicación. El entorno resultante es expresivo, legible y rápido de desarrollar.

AngularJS es un conjunto de herramientas completamente extensible. Cada característica se puede modificar o reemplazar para adaptarse a su flujo de trabajo de desarrollo.

METEOR

Meteor es una framework javascript diseñada para agilizar el proceso de desarrollo de aplicaciones.

Las ventajas de usar este framework son:

  • Meteor simplifica el proceso de desarrollo al ofrecer la posibilidad de crear una aplicación solo con Javascript.
  • Funciona a base de modulos.
  • Es una framework sencilla de manejar, se puede aprender a manejar en cuestión de horas.
  • Para comenzar a utilizar Meteor se necesita de un nivel básico de JavaScript.
  • Para desarrolladores más experimentados en JavaScript, Meteor les da la oportunidad de escribir código y ver resultados de manera inmediata.
  • Es un framework de respuesta rápida, de manera que todos los elementos se actualizan automáticamente.
  • Por ultimo, cuanta con el apoyo de una gran comunidad activa, con la que se pueden resolver dudas que surjan respecto al funcionamiento de meteor.

RUBY ON RAILS

Es un entorno de desarrollo web de codigo abierto que permite escribir un código eficaz, evitando que se repita.

Ruby es un lenguaje de scripts, multiplatarfoma orientado a objetos.

Entre las carecterísticas del lenguaje se encuentran:

  • Posibilidad de hacer llamadas directamente al sistema operativo.
  • Muy potente para el manejo de cadenas y expresiones regulares.
  • No se necesita declarar las variables.
  • La sintaxis es simple y consistente.
  • Gestión de memoria automática.
  • Todo es un objeto.
  • Métodos Singleton.

Rails permite crear aplicaciones con acceso a bases de datos como lo son Twitter, Scribd, Hulu, Soundcloud, xing, github entre otras.

 

YII

Es un framework PHP de alto rendimiento, y el mejor para desarrolar aplicaciones web 2.0, permite la maxima reutilizacion y asi acelerar el proceso de desarrollo.

El requerimiento para poder utilizar este framework es tener un servidor web con soporte PHP 5.1.0 o superior, ademas del entendimiento de la programación orientada a objetos.

Como la mayoría de los frameworks PHP, Yii es un framework MVC (modelo-vista-controlador) y sobresale del resto por su eficiencia y gran cantidad de características y su clara documentación

 

Ahora ya conoces algunos frameworks que te pueden ayudar a facilitar el desarrollo de un sitio web.

 

Contador de visitas en un sitio web utilizando PHP

En esta publicación vamos a realizar un script en “php” que nos servirá como un contador de visitas para nuestro sitio web.

Un contador de visitas sirve para indicar el número de visitantes que ha tenido un sitio web de forma que incrementa cada vez que una persona acceda al sitio.
Actualmente se puede ver esta “estrategia” en sitios web personales ya que muestran la cantidad de lectores que tienen un interés en común.

Existen muchas formas de realizar un contador de visitas.

  • Obtener un servicio gratuito en Internet y pegar el código con un script ya establecido.
  • Crear un propio script y manipularlo directamente en una tabla de una base de datos enlazada a nuestro sitio web.
  • Crear un propio script y guardarlo en un archivo de texto plano el contador.

A continuación realizaremos un script y lo guardaremos en un archivo de texto plano, este método es el más sencillo de implementar y se puede visualizar el objetivo general de tener un contador de visitas.

Pasos:

  1. Crear un archivo de texto plano con cualquier extensión ya sea .txt, .contador, etc. Y escribir el numero 0 como único contenido y guardarlo en el mismo directorio del archivo .php que crearemos a continuación.
  2. Crear un script que llamaremos “contador_visitas.php” para aumentar el número que está almacenado en el archivo que creamos anteriormente ya que se activara cada vez que cargue el sitio web y sea llamado el script.

a.- Ubicamos el archivo que creamos anteriormente. (1)
b.- 
Abrimos el archivo en modo de lectura con la letra “r”. (2)
c.- 
Verificamos si el archivo vea abierto exitosamente. (3)
d.-
 Leemos el archivo y guardamos su contenido en la variable “contador”. (4)
e.-
 Aumentamos 1 a nuestro variable contador. (5)
f.-
 Abrimos nuevamente el archivo pero ahora en modo de escritura con “w+”. (6)
g.- 
Escribimos en el archivo el nuevo número de visitantes. (7)

4.- Ahora podremos utilizar este script en cualquier sitio web que queramos. Podremos ejecutarlo desde el inicio al cargar el sitio.

Cambiar formato de elementos Font Awesome, botones y texto al colocar el puntero

En esta practica vamos a cambiar el formato de elementos Font Awesome, ademas de un texto y un botón, cada que el puntero se posicione sobre el elemento.

Anteriormente aprendimos a añadir elementos Font Awesome, recordemos un poco.

Para utilizar los íconos Font Awesome es necesario:

1.-Descargar a la carpeta de tu proyecto la carpeta:

  • CSS que incluye los siguientes archivos:
    • font-awesome.css
    • font-awesome.css.map
    • font-awesome.min.css
  • fonts que incluye los siguientes archivos
    • FontAwesome.otf
    • fontawesome-webfont.eot
    • fontawesome-webfont.svg
    • fontawesome-webfont.ttf
    • fontawesome-webfont.woff
    • fontawesome-webfont.woff

2.- Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir las referencias CSS en las páginas desde donde se utilizarán los iconos:

<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

3.-  para llamar los íconos en tu página web se hace através del artributo class de HTML donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:

<span>
<img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/>
</span>

Ya que hemos recapitulado la manera de añadir elementos Font Awesome, Comencemos con el ejercicio.

Pasos:

1.- Como anteriormente lo mencionamos añadimos las referencias al archivo css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
<link rel="stylesheet" href="FA/css/font-awesome.min.css"/>
</head>

2.-Ahora armemos nuestro body en el que insertamos el elemento Font Awesome con la etiqueta <span>, ademas de insertar texto y un botón.

< div class="services-div">
 <span> 
    <img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/> 
 </span>
 <p class="services-title">
   <a href="#">Services</a>
 </p>
 <p class="services-title">
   <a href="#">Services</a>
 </p>
 <hr width="50%" align="center"/>
 <p class="services-desc">Look through an extensive catalog of our services including everything from cloud messaging to remote sensing equipment.</p>
 < div class="boton">
   < div class="capa"></div>
   < a href="#">More</a>
 </div>
</div>

3.-El siguiente paso sera insertar el código css

  • Usaremos .services-title para dar formato al Titulo
  • .service-title a para dar formato a los hiperenlaces que colocaremos.
  • .services-title a:hover para especificar los cambios que tendra el titulo al momento de color el cursor sobre el.
  • .services-desc para dar formato al parrado de texto.
  • .fl-icon para dar formato en este caso tamaño y una transición a los iconos Font Awesome.
  • Y por ultimo .services-div:hover .fl-icon para señalar que cada que el cursor pase en el contenedor cambie el formato de los iconos Font Awesome dentro de este.
<!--Código CSS--> 
<style type="text/css">

.services-title{ 
    font-family:"Arial Narrow", "Times New Roman", Times, serif; 
    text-transform:uppercase; color:white; 
    text-align:center; font-size:2.3em; 
}
.services-title a{ 
    color:white;
    text-decoration:none;
    transition:all .5s; 
}
.services-title a:hover{ 
     color:#50ADE7;
 }
.services-desc{ 
      text-align:center; 
      color:white; font-family:Tahoma; 
      width:80%; margin:0px auto; 
      font-size:0.95em;
}
.fl-icon{ 
      transform:scale(.4);
      transform:scale(.4); 
      transition:all 1s;  
      margin-top:-140px; 
      margin-bottom:-150px;  
      margin-left:30px
}
.services-div:hover .fl-icon
{ transform:scale(.5);}

.
.
.
  • También usaremos .boton para dar estilo al boton
  • .boton a para dar estilo al hiperenlace dentro del botón
  • .capa para el estilo a una capa que que tendrá el botón
  • Y por ultimo .boton:hover .capa para cambiar el tamaño de la capa y así crear el efecto en el botón.
.
.
.
.boton{ 
width:155px; 
height:50px; 
background:linear-gradient(to bottom, #429fe2, #5ebbeb); 
overflow:hidden; 
border-bottom:2px solid #a5dbfa; 
margin:0px auto;
 margin-top:50px; 
margin-bottom:50px}

.boton a{ 
text-align:center; 
padding-top:15px; 
padding-bottom:15px; 
color:white; 
text-decoration:none; 
text-transform:uppercase; 
font-weight:100; 
font-family:"Arial Narrow"; 
display:block; 
position:absolute; 
width:155px;}

.capa{ 
height:0px; 
transition:all  0.5s  ease; 
position:absolute; 
width:155px; 
background-color:rgba(76,80,81,1);}

.boton:hover .capa{ 
height:50px;}

</style>

A continuación se muestra el resultado final

Resultado Final:

See the Pen Elementos by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Crea tu propio Slider para tu página web con HTML, CSS Y JS

Hola, en esta nueva publicación te mostraremos una manera sencilla de crear tu propio slider de imágenes para tu página web.

Comencemos con una pequeña introducción de lo que es un slider.

Un slider es un recurso que se utiliza para dar un diseño mas novedoso a la presentación de imágenes en un sitio web además de ser una manera de atraer la atención de los visitantes y usuarios que accedan a ella.

Requisitos:

Para realizar esta práctica necesitaras de algunas imágenes, así como también haremos uso de conocimientos en HTML, CSS y Javascript.

  • Definiremos el código HTML en el cual crearemos un contenedor donde se creara el slider, lo llamaremos “caja”.
  • Declararemos en el código CSS la apariencia que tomara el contenedor.
  • Y por ultimo utilizaremos Javascript para el funcionamiento de este con un degradado.

Procedimiento:

  1. Iniciemos la práctica colocando el código HTML, dentro de la etiqueta <body>  colocamos onload=”javascript:Aparecer()” para que se ejecute automáticamente al cargar la página.
  2. Ahora crearemos el contenedor con la etiqueta <div> en la que declararemos las imágenes  <img  src= dirección de imagen  id= identificador de imagen>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
</head>
<!--Código HTML-->
<body onload="javascript:Aparecer();">
.
.(imagenes)
.
</body>

 

Es importante que dentro de la etiqueta <img> se declare un identificador ya que se utilizara mas adelante.

3.- Para definir la apariencia utilizaremos CSS el cual definimos de la siguiente manera dando formato al contenedor de las imágenes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS--> 
<style type="text/css">
#caja{
width:262px; 
height:192px; 
color:white; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 
margin:0px auto; 
margin-top:30px;}

img{     
width:350px;    
height:200px; 
position:absolute;}
</style>
</head> 
<!--Código HTML--> 
.
.
.
</html>

Asignamos un tamaño a las imágenes con un width y height además de la posición en la que se ubicarán las imágenes dentro del slider.

Ahora estamos listos para comenzar a introducir el código javascript.

4.- Comenzaremos creando la función Aparecer en la que utilizaremos un interval=setInterval(muestra, 20) para llamar cada 20 milisegundos una nueva función llamada muestra.

La función Aparecer llamara:

  • La función detener  la cual manejara un clearInterval(interval) para limpiar el intervalo.
  • Y la función elige la cual se encargara de elegir y activar la visibilidad entre las imágenes del slider.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS-->
.
.
. 
<!--Código Javascript--> 
 
var interval; 
var i=1; 
var ver=0; 

function Aparecer() { 
detener(); 
elige(); 
interval=setInterval(muestra, 20); } 

function muestra() { 
if(i>6) { 
   i=1; 
    Ocultar(); } 
if(ver==0) 
   document.getElementById("arbol").style.opacity=i; 
else 
   document.getElementById("nieve").style.opacity=i; 
i+=0.05; } 

function detener() { 
clearInterval(interval); } 

function elige() { 
if(ver==0) { 
document.getElementById("arbol").style.visibility="visible"; 
document.getElementById("nieve").style.visibility="hidden"; } 
else { 
document.getElementById("arbol").style.visibility="hidden"; 
document.getElementById("nieve").style.visibility="visible"; } }


</head> 
<!--Código HTML--> 
.
.
.
</html>

5.- La función muestra jugara un papel muy importante a la hora de mostrar y ocultar ya que manejara la transición entre imágenes jugando con la opacidad de la imagen que se muestra en el slider.

function Ocultar() { 
detener(); 
interval=setInterval(desvanecer,20); } 

function desvanecer() { 
if(i<=0) { 
i=0; 
if(ver==0) 
ver=1; 
else ver=0; 
elige(); 
Aparecer(); } 
if(ver==0) 
document.getElementById("arbol").style.opacity=i; 
else document.getElementById("nieve").style.opacity=i; 
i-=0.05; } 
<!--Código HTML--> 
.
.
.
</html>

6.- Mientras que la función de Ocultar se encargara con un interval=setInterval(desvanecer,20) de llamar cada 20 milisegundos a la función desvanecer esta se encargara de modificar la opacidad de la imagen que se ocultara.

De esta manera tendremos el efecto de un transición entre cada imagen del slider. Listo esta es una manera secilla de realizar un slider para tu sitio web.

Resultado:

See the Pen slider1 by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Crear un reloj utilizando Javascript, HTML Y CSS

A continuación se muestra la creación de un reloj, un  ejercicio en que utilizaremos elementos html, css y javascript.

Con este ejercicio podremos aprender la utilización de la hora y fecha del sistema para implementarla en una pagina web.

Iniciaremos con la creación de un nuevo documento de tipo html, y dentro de body crearemos el contenedor con la etiqueta <div></div> donde colocaremos nuestro reloj el cual llamaremos “caja”. Ademas agregaremos un enlace utilizando la etiqueta <a></a> con la cual daremos inicio a nuestro reloj.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
<body>
</html>
 A continuación le daremos un formato a la caja utilizando elementos css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
<style type="text/css">
#caja{ 
width:300px; 
height:200px;
background-color:blanchedalmond;
color:black; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size:2.0em; 
text-align:center;}
a{ 
border:1px solid brown;}
</style>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
</body> </html>

Ya que tenemos nuestro código CSS y HTML comenzaremos con nuestro código. Utilizaremos la función de iniciarReloj() en la que con setInterval(reloj, 1000)  según el valor indicado la función sera ejecutada en este caso 1000 milisegundos es el tiempo que se ejecutara la función reloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){
interval=setInterval(reloj, 1000);//1000 milisegundos = 1 segundo  }

function reloj() { 
var d= new Date(); 
var t= d.toLocaleTimeString();
document.getElementById("caja").innerHTML= t;
} 

</head>
<!--Código HTML-->
.
.
.
</html>

Posteriormente en la función reloj() es donde se inyectara el código js en HTML con document.getElementById(“caja”).innerHTML= t  utilizaremos t en caso de utilizar solo la hora, y d si se requiere la fecha completa.

También podemos incluir un enlace con la etiqueta <a></a> para detener el reloj esto en nuestro código HTML y creando una nueva función en el código CSS en la cual marcamos el clearInterval(interval); que limpiara el intervalo que anteriormente se había declarado para el intervalo de ejecución en el iniciarReloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){ ... }
function reloj() { ... } 

function detenerReloj() { 
clearInterval(interval);
 }

</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
 <a href="javascript:detenerReloj();">Detener Reloj</a>
 </body> </html>

De esta manera concluimos el ejercicio con el cual aprendimos a utilizar la hora del sistema, y la implementan del setinterval y el clearinterval ademas del innerHTML.

See the Pen reloj by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.