miércoles, 26 de octubre de 2016

Color y Fondo en CSS

3 Formas de Insertar color en CSS

  • Nombre
  • Valor Hexadecimal
  • Valor RGB

Nombre

En la declaración se anota color:NombreDelColor. Se puede elegir entre:

  • red, blue, magenta. 

Valor Hexadecimal

  • #000000
Valor RGB

  • rgb(255,0,0)

Fondo

El fondo de los elementos en HTML puede ser de distintos tipos:

  • color
  • imagen
Los principales atributos de una imagen son:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Se pueden usar por separado o todos los atributos juntos separados por un espacio.

Ejemplo de página usando Color y Fondo.

Código:

 <DOCTYPE! html>
<html>
<head>
<title> Usando Color y Fondo</title>
<style>
body{
background-color: linen;
background-image: url("imagenFondoLibre.jpg");
background-repeat: repeat-y;
background-attachment: fixed;
background-position: right top;
}
header{
background-color: lightblue;
}
</style>
</head>
<body>
<header><h1>Encabezado de otro color</h1></header>
Aquí va un texto.
</body>

</html>

 Resultado:


Publicadas por a la/s No hay comentarios.:
Etiquetas: , , ,

lunes, 24 de octubre de 2016

Cómo Insertar CSS

3 Maneras de usar CSS

Existen 3 maneras de insertar código CSS en HTML;

  • En línea
  • En el encabezado
  • A través de un archivo externo

En línea

Se utiliza para agregar estilo a un elemento, no es aconsejable ya que hace menos legible la estructura de la página. Se agrega el estilo style con su valor al elemento. Ejemplo:

 <p style="color:blue;"> Hola a todos </p>

En el Encabezado

Dentro de las etiquetas <head></head> se insertan las etiquetas <style></style> y dentro de estas etiquetas se enlistan los elementos con su declaración. Este estilo tampoco es tan recomendable ya que hace más largo el archivo y por lo tanto el tiempo de carga. Ejemplo:

<head>
<style>

p{
color:blue;
}

h1{
color:red;
}

</style>
</head>


Archivo Externo

En el encabezado se establece el/los archivos de los cuales se tomarán los estilos. Es la forma más recomendada ya que acelera el tiempo de carga de las páginas y además es más comprensible el código. Ejemplo:

Primero relacionar el archivo en el encabezado

<head>
<link href="MisEstilos.css" rel="stylesheet">
</head>

Después en el archivo se escriben los selectores con sus declaraciones.

h1{
color:red;
}

#lateral{
margin-right: 20px;
}

.titulos{
color:blue;
}




Publicadas por a la/s No hay comentarios.:

CSS

CSS Por sus siglas en inglés Cascading Style Sheets es el encargado de darle estilo a las páginas web, es decir, como se va mostrar la información en la pantalla. Su objetivo principal es ahorrar tiempo, ya que permite dar estilo a múltiples páginas con un solo archivo. 

CSS fue desarrollado por W3C.

Sintaxis

Un estilo CSS normalmente se compone de dos partes; selector y declaración.

http://www.w3schools.com/css/
Imagen tomada de http://www.w3schools.com/css
El selector es el elemento HTML al que se le quiere dar estilo(puede ser el nombre de una clase, de un elemento HTML o el id de un elemento), mientras que una declaración agrupa a su vez varias declaraciones separadas por punto y coma. Cada declaración se compone de una propiedad:valor.

Selectores CSS

Imagen tomada de http://www.c-sharpcorner.com
Selector Elemento: Selecciona los elementos basados en su nombre html. Para seleccionarlo basta con escribir su nombre seguido de las declaraciones encerradas entre corchetes. Ejemplo:

 header {
color:red;
}

Selector Id: Selecciona un elemento en base a su atributo id. Para seleccionarlo en CSS se antepone a su nombre el símbolo #. Ejemplo:

 #titulos{
font-size:16px;
}

Selector Clase: Selecciona uno o varios elementos en base a su atributo clase. Para seleccionarlo en CSS se antepone a su nombre el símbolo . Ejemplo:

 .lateral{
text-align: right;
}
Publicadas por a la/s No hay comentarios.:
Etiquetas: ,

miércoles, 19 de octubre de 2016

HTML5 - Estructura

HTML5 

La combinación entre la estructura, el estilo y la funcionalidad.  

Estructura

<DOCTYPE!> - Tipo de documento

 <html>  </html> - Envuelve el resto del código puede utilizar el atributo lang.
<html lang = "es"> </html> 
<head></head> - Encabezado, incluye título, juego de caracteres, incorporar archivos externos con estilos (CSS) o con funcionalidades (Javascript). La mayoría son etiquetas invisibles.
<body></body> - Cuerpo, Toda la parte visible del documento.

Estructura de la Encabezado <head></head>


 <meta></meta> -  Describe el juego de caracteres a utilizar en la página. Contiene los atributos charset, description, keywords.

 <title></title> - Muestra el título del documento en la pestaña del navegador.
<link> - Esta etiqueta sirve para insertar archivos externos, pudiendo ser archivos CSS, Javascript, imágenes u otros archivos. Utiliza los atributos rel que especifica el tipo de archivo y href que es

Estructura del cuerpo <body></body>

<table> De las primeras etiquetas que se utilizaban para hacer el diseño del sitio.
<div> Aún se utiliza junto con las nuevas etiquetas de html5. La idea es que estas últimas se utilicen para diferenciar las secciones más importantes del sitio.

 Las etiquetas principales en un sitio web son:

  • Cabecera
  • Barra de Navegación
  • Información Principal
  • Barra lateral
  • Pie

Imagen tomada del curso de desarrollo web de la Universidad de Alicante.

 <header></header> - Provee información introductoria al sitio, logo, títulos etc.,
<nav></nav> - menús principales, bloques grandes.
<section></section> - Dividir partes de la Información Principal. Distingue de Aside.
<article></article> - Divide partes importantes de la Información Principal que comparten características.
<aside></aside> - La barra lateral contiene datos de la barra lateral pero de menor importancia.
<footer></footer> - Compartir información general del autor o de la organización.



Publicadas por a la/s No hay comentarios.:

martes, 10 de mayo de 2016

Análisis y Diseño Orientado a Objetos - A/DOO

Conceptos Básicos:



Publicadas por a la/s No hay comentarios.:
Etiquetas: , ,

jueves, 5 de mayo de 2016

Formulario con nuevos elementos HTML5

Código: 

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <title>Formulario de prueba de HTML5</title>
  </head>
  <body>
  <form action="" method="GET" >
   
      <p>
    <label for="nombre">Nombre</label>
      <input type="text" name="nombre" id="nombre"
      autofocus
      required>
      
      </p>
      <label for="correo">Correo electrónico</label>
      <input type="text" name="correo" id="correo"
      required>
      <p>
      
      <p>
      <label for="url">URL</label>
      <input type="text" name="url" id="url"
      placeholder="Escribe la URL de tu página web personal">
      </p>
      
      <p>
      <label for="fecha">Fecha</label>
      <input type="date" name="fecha" id="fecha">
      </p>
      
      <p>
      <label for="tiempo">Tiempo</label>
      <input type="time" name="tiempo" id="tiempo"/>
      </p>
      
      <p>
      <label for="fechayhora">Fecha y hora</label>
      <input type="datetime" name="fechayhora" id="fechayhora"/>
      </p>
      
      <p>
      <label for="mes">Mes</label>
      <input type="month" name="mes" id="mes"/>
      </p>
      
      <p>
      <label for="semana">Semana</label>
      <input type="week" name="semana" id="semana"/>
      </p>
      
      <p>
      <label for="numero">Número (min. -10 max. 10</label>
      <input type="number" name="numero" id="numero"
      min="-10" max="10"/>
      </p>
      
      <p>
      <label for="telefono">Teléfono</label>
      <input type="tel" name="telefono" id="tel"/>
      </p>
      
      <p>
      <label for="busqueda">Término de Búsqueda</label>
      <input type="search" name="busqueda" id="busqueda"/>
      </p>
      
      <p>
      <label for="color">Color favorito</label>
      <input type="color" name="color" id="color"/>
      </p>
      
      <p>
      <input type="submit" value="Enviar" />
      </p>
      
    </form>
  </body>

</html>

 Resultado:
Publicadas por a la/s No hay comentarios.:
Etiquetas: , ,

viernes, 22 de abril de 2016

HTML - Tablas 1

Código:

<html>
<head>
<title>Desempleo</title>
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>El desempleo en España</h1>

<p>
La siguiente tabla muestra la evolución del desempleo en España, comparado con la media de los 27 países de la Unión Europea, Grecia, que compite con España en ser el primero en esta vergonzosa competición y Estados Unidos y Japón, dos de las primeras economías mundiales.
</p>

<table>

<tr>
<th>País</th>
<th>2000</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
</tr>

<tr>
<td>UE (27 países)</td>
<td>8.9</td>
<td>8.7</td>
<td>9</td>
<td>9.1</td>
<td>9.3</td>
<td>9</td>
<td>8.2</td>
<td>7.2</td>
<td>7</td>
<td>9</td>
<td>9.6</td>
<td>9.6</td>
<td>10.4</td>
<td>10.8</td>
</tr>

<tr>
<td><strong>España</strong></td>
<td><strong>11.9</strong></td>
<td><strong>10.6</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11</strong></td>
<td><strong>9.2</strong></td>
<td><strong>8.5</strong></td>
<td><strong>8.2</strong></td>
<td><strong>11.3</strong></td>
<td><strong>17.9</strong></td>
<td><strong>19.9</strong></td>
<td><strong>21.4</strong></td>
<td><strong>24.8</strong></td>
<td><strong>26.1</strong></td>
</tr>

<tr>
<td>Grecia</td>
<td>11.2</td>
<td>10.7</td>
<td>10.3</td>
<td>9.7</td>
<td>10.6</td>
<td>10</td>
<td>9</td>
<td>8.4</td>
<td>7.8</td>
<td>9.6</td>
<td>12.7</td>
<td>17.9</td>
<td>24.5</td>
<td>27.5</td>
</tr>

<tr>
<td>Estados Unidos</td>
<td>4</td>
<td>4.8</td>
<td>5.8</td>
<td>6</td>
<td>5.5</td>
<td>5.1</td>
<td>4.6</td>
<td>4.6</td>
<td>5.8</td>
<td>9.3</td>
<td>9.6</td>
<td>8.9</td>
<td>8.1</td>
<td>7.4</td>
</tr>

<tr>
<td>Japón</td>
<td>4.7</td>
<td>5</td>
<td>5.4</td>
<td>5.3</td>
<td>4.7</td>
<td>4.4</td>
<td>4.1</td>
<td>3.9</td>
<td>4</td>
<td>5.1</td>
<td>5.1</td>
<td>4.6</td>
<td>4.3</td>
<td>4</td>
</tr>

</table>
<p>
Fuente: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1">Índice de desempleo anual</a>, Eurostat
</p>

</body>
</html>

Resultado:


Publicadas por a la/s No hay comentarios.:
Etiquetas: , ,

martes, 19 de abril de 2016

HTML - Formulario 1

Código:

<DOCTYPE html>
<html>
<head>
<title>Formulario de registro - Mi web</title>
</head>

<body>
<h1>Formulario de registro</h1>

<form action="" method="get">
<p>
<label for="nombre">Nombre: </label> <input type= "text" name="nombre" id="nombre" maxlength="50" />
</p>

<p>
<label for="apellidos">Apellidos: </label><input type ="text" name="apellidos" id="apellidos" maxlength="50" />
</p>

<p>Sexo:
<input type ="radio" name="sexo" id="sexo-h" value="h"/> <label for="sexo-h">hombre</label> <input type="radio" name="sexo" id="sexo-m" value="m" /> <label for="sexo-m">mujer</label>
</p>

<p>
<label for="correo">Correo: </label> <input type ="text" name="correo" id="correo" maxlength="100" />
</p>

<p>
<label for="poblacion">Población:</label>
<select name="poblacion" id="poblacion">
<option>Alicante</option>
<option>Madrid</option>
<option>Sevilla</option>
<option>Valencia</option>
</select>
</p>

<p><label for="descripcion">Descripción: </label>
<textarea name="descripcion" id="descripcion" rows="6" cols="60"></textarea>
</p>

<p>
<input type="checkbox" name="info" id="info" checked="checked" /> <label for="info"> Deseo recibir información sobre novedades y ofertas.</label>
</p>

<p>
<input type="checkbox" name="condiciones" id="condiciones" /> <label for="condiciones">Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos</label>
</p>


<p>
<input type="submit" value="Enviar" />
</p>

</form>
</body>
</html>

Resultado:


Publicadas por a la/s No hay comentarios.:
Etiquetas: , , , ,

lunes, 18 de abril de 2016

Alojamiento Web (Hosting)

A continuación se presenta una tabla comparativa de paquetes básicos de 5 registradores acreditados en México. Como ya se sabe, es difícil comparar los paquetes de alojamiento web, debido a que no ofrecen exactamente los mismos servicios. Algunos ofrecen velocidad de transferencia ilimitada, lo cual, se sabe que no es verdad. 

En lo personal, me quedaría con un paquete de Kiubix, ya que me agradó la página de internet, me pareció que contiene información clara a diferencia de los otros proveedores, tiene servicio de chat, y de preguntas frecuentes para aclarar dudas antes de comprar.


Publicadas por a la/s No hay comentarios.:
Etiquetas: ,

lunes, 11 de abril de 2016

Alojamiento Web (Hosting)

Mapa conceptual con los conceptos principales del hosting.
Publicadas por a la/s No hay comentarios.:
Etiquetas: , ,

sábado, 9 de abril de 2016

Registro de Dominio (México)

NIC y Registry.mx

En México la empresa responsable de de los recursos de Internet que requieren administración centralizada es NIC (Network Information Center México S. C.). Es la organización encargada de la administración del nombre de dominio territorial.

En el año 2010 alcanzaron los 400,000 nombre de dominio registrados con .mx.

En México, los registradores acreditados para los nombres de dominio aparecen en el sitio web registry.mx. Este sitio es una división de NIC México, es el lugar donde se concentra la información de todos los nombres de dominio .mx. 

Ofertas de Registro de Nombre de Dominio

Akky es un proveedor de servicios de administración de nombres de dominio. A continuación se presentan las tarifas fen USD. Cabe recalcar que los precios pueden variar según los servicios requeridos.


123HOSTING es un registrador acreditado de hosting-cloud en México. A continuación se muestran las tarifas estándar para el registro de nombre de dominio.
JettHost es otro registrador acreditado, a continuación se muestra una lista básica de precios. 
Inter Cloud Host es una plataforma de hospedaje web basada en tecnología cloud. 


* La mayoría de los pagos se hace por transferencia o por depósito bancario. 
** Cabe recalcar que hay más registradores acreditados, se mencionan solo algunos.
*** Los precios pueden variar de acuerdo a los servicios adicionales que ofrezca cada registrador.
  
Publicadas por a la/s No hay comentarios.:
Etiquetas: , ,

martes, 5 de abril de 2016

HTML - Enlaces - Ejemplo:

RFC 1738. URL, documento donde Tim Berners-Lee explica URL en 1994.

Estructura y contenido: 

 <html>
<head><title>Los tres pilares de la Web</title></head>
  <body>
<h1>Los tres pilares de la Web</h1>


<p><a href = "http://es.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a> es           considerado el padre de la Web porque desarrolló los tres elementos básicos para el funcionamiento de la <a href = "http://es.wikipedia.org/wiki/World_Wide_Web">Web:</a></p>

<ul>
<li><a href = "#html">HTML</a></li>
<li><a href = "#http">HTTP</a></li>
<li><a href = "#url">URL</a></li>
</ul>

<h2 id="html">HTML</h2>


<p>HTML, siglas de <strong>HyperText Markup Language</strong>, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.</p>



Fuente: <a href = "http://es.wikipedia.org/wiki/HTML">HTML</a>, Wikipedia<br>



<h2 id ="http">HTTP</h2>


<p><strong>Hypertext Transfer Protocol</strong> o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica la versión 1.1.</p>



Fuente: <a href = "http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a>, Wikipedia<br>



<h2 id = "url">URL</h2>


<p>Un <strong>localizador de recursos uniforme</strong> o URL —siglas en inglés de <em>Uniform Resource Locator</em>— es un identificador de recursos uniforme (URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo. Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet.</p>



Fuente: <a href = "http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme">URL</a>, Wikipedia
   
    </body>

    </html>

Resultado:


Publicadas por a la/s No hay comentarios.:
Etiquetas: , ,

lunes, 4 de abril de 2016

HTML - Página con listas ordenadas, no ordenadas y de descripción

Estructura y Contenido:

<html>
<head>
  <title>Internet
  </title>
  </head>
  <body>
 
  <h1>Internet</h1>
  <h2>Contenido</h2>
    <ol>
    <li>Principales protocolos</li>
      <li>Formas de conectarse</li>
    </ol>
    <h2>1. Principales protocolos</h2>
    <ul>
    <li>Transmisión de ficheros:<ul>
      <li>FTP</li>
          </ul>
      </li>
      <li>Correo electrónico:<ul>
      <li>IMAP</li>
        <li>POP</li>
        <li>SMTP</li>
      </ul>
      </li>
    </ul>
    <h2>2. Formas de conectarse</h2>
    <dl>
      <dt>Red Telefónica Conmutada (RTC)</dt>
        <dd>La línea telefónica de toda la vida. Para acceder a Internet es necesario un módem.</dd>
        <dt>Red Digital de Servicios Integrados (RDSI)</dt>
        <dd>Una línea telefónica especial. Para acceder a Internet es necesario un módem RDSI.</dd>
        <dt>Línea de Abonado Digital Asimétrica (ADSL)</dt>
        <dd>Se basa en la conversión de una línea RTC en una línea de alta velocidad. Para acceder a Internet es necesario un módem ADSL.</dd>
        <dt>Fibra Óptica</dt>
        <dd>Una línea de fibra óptica. Normalmente la fibra óptica no llega hasta el usuario final, por lo que el término más apropiado es Fibra híbrida coaxial.</dd>
    </dl>
  </body>
</html>

Resultado:

Publicadas por a la/s No hay comentarios.:
Etiquetas: ,

viernes, 1 de abril de 2016

HTML - Listas numeradas, Listas No numeradas, Listas de Descripción

Etiquetas: 

Algunos de los elementos más usados en HTML son los encabezados, párrafos y las listas.

Las etiquetas que se emplean para usar listas son las siguientes:

<ul>
<ol>
<li>
<dl>

Existen diversos tipos de listas, (aproximadamente 5) a continuación se explica como usar listas numeradas o listas no numeradas y listas de descripción.

Listas numeradas

Para escribir una lista numerada u ordenada, dicha lista debe estar englobada entre las etiquetas:
 <ol...</ol>. A su vez, cada elemento de la lista deberá estar entre las etiquetas <li>...</li>. Algunos autores recomiendan que cada elemento de la lista se encuentre en una línea nueva. Las listas ordenadas pueden tener los atributos start (permite indicar en dónde se inicia la lista) y type (que permite indicar el tipo de numeración, letras, números romanos). En HTML5 se agregó el atributo reverse (Que permite la numeración sea descendente)

Listas no numeradas


Para escribir una lista no numerada o sin orden, dicha lista debe estar englobada entre las etiquetas:

<ul>...</ul>. A su vez, cada elemento de la lista deberá estar entre las etiquetas <li>...</li>. El resultado es que el navegar inserta caracteres no numéricos (viñetas) antes de cada elemento de la lista.

Listas de descripción

Es acrónimo de description list. Se emplea para definir una lista de términos con 0 o más descripciones de cada término, dicha lista debe estar englobada entre las etiquetas: 
<dl>...</dl> Cada término de la lista se define con <dt>...</dt> y cada descripción se define con <dd>...</dd> separándolos con sangría.

Ejemplo de un documento HTML usando listas numeradas, listas no numeradas y listas de descripción.



<html>

<head>
<title>HTML - L. numeradas - L. No numeradas - L. descripción</title>
</head>
<body>
<h2>Listas numeradas</h2>
<ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
<li> Elemento 5 </li>
</ol>
<h2>Listas no numeradas</h2>
<ul>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
<li> Elemento 5 </li>
</ul>
<h2> Listas de descripción </h2>
<dl>
<dt> Elemento 1 </dt>
<dd>Descripción 1 del Elemento 1</dd>
<dt> Elemento 2 </dt>
<dd>Descripción 1 del Elemento 2</dd>
<dd>Descripción 2 del Elemento 2</dd>
<dt> Elemento 3 </dt>
</dl>
</h2>
</body>
</html>
Publicadas por a la/s No hay comentarios.:
Etiquetas: , ,

miércoles, 30 de marzo de 2016

HTML - Conceptos Básicos

Conceptos Básicos:

Errores Web comunes en el título de la página

HTML - información:
https://es.wikipedia.org/wiki/HTML
HTML - Entrenamiento:
https://www.w3.org/community/webed/wiki/HTML/Training
HTML - Tutoriales:
http://www.w3schools.com/


Publicadas por a la/s No hay comentarios.:
Etiquetas: ,

martes, 29 de marzo de 2016

HTML

Al fin.

HTML sirve para dar la estructura y el contenido o información (texto, imágenes, video) de una página web, no la presentación.

HTML está formado por etiquetas, que se encuentran entre < >
HTML5 está formado por más de 100 etiquetas.
El elemento es el elemento básico de una página web.
Una página está formada por un conjunto de elementos.
Un elemento se compone de una etiqueta inicial y una etiqueta final.


Algunos elementos se pueden anidar, esto significa que se pueden escribir unos dentro de otros.
<html>Etiqueta principal
     <head> Cabera, no aprece en la página web, se emplea para definir los metadatos.
           <title> Define el título de la página</title>
     </head>
     <body>
            <h1>Tamaño de letra...<h6>
            <p>Delimita un párrafo</p>
            <strong> Hace negrita</strong>
             <em> texto enfatizado</em>
      </body>
</html>


Lugares para aprender HTML:
W3Schools
Publicadas por a la/s No hay comentarios.:
Etiquetas: ,
Suscribirse a: Entradas (Atom)